WinFuture-Forum.de: Wo kommt die Zeile her - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Wo kommt die Zeile her bin etwas eingerostet


#1 Mitglied ist offline   Stefan_der_held 

  • Gruppe: Offizieller Support
  • Beiträge: 14.289
  • Beigetreten: 08. April 06
  • Reputation: 929
  • Geschlecht:Männlich
  • Wohnort:Dortmund NRW
  • Interessen:Alles wo irgendwie Strom durchfließt fasziniert mich einfach weswegen ich halt Elektroinstallateur geworden bin :)

geschrieben 11. Januar 2019 - 13:44

Hallo Leute,

möchte gerade meine Website quasi von Grund auf neu modelieren. Ein paar Code-Fetzen kommen aus der alten Variante dazu. Soweit-so gut...

Nur wo zum Donner kommt diese Leerzeile her (der rot umrandete Bereich) :unsure:

Angehängtes Bild: Unbenannt.PNG

der Relevante HTML-Code sieht aktuell so aus:

         <!-- CSS-Files -->
                  <link href="CSS/style.css" rel="stylesheet" type="text/css">

         </head>
        <body>
                <div class="site">
                        <div class="header">Ich bin ein Header</div>
                        <div class="content">Hallo der neue Content hier</div>
                </div>
        </body>
</html>


das CSS soweit

body {
        background-color:       #FFFFFF;
        background-image:       url(../PFAD/ZUM/bild.jpg);
        font-family:            verdana, arial;
        font-size:                      14px;
        font-weight:            bold;
        line-height:            1.5em;
        width:                          90%;
        height:                         100%;
        padding-top:            35px;
        padding-bottom:         20px;
        margin-top:                     auto;
        margin-bottom:          auto;
        margin-right:           auto;
        margin-left:            auto;
        }
        
.site {
        background-color:       #aaaaaa;
        height:                         90%;
        box-shadow:             5px 5px 10px #BBBBBB;
        }

.header {
        background-image:       url(../PFAD/ZUM/bild.jpg);
        background-color:       #789abc;
        height:                         200px;
        position:                       relative;
        }
        
.content {
        background-image:       url(../PFAD/ZUM/bild.jpg);
        background-color:       #123456;
        position:                       relative;
        padding-left:           5px;
        padding-right:          5px;
        margin-top:                     25px;
        height:                         100%;
        overflow:                       auto;
        white-space:            normal;
        }


bin ich so eingerostet? Bitte um Hilfe :imao:

Nachtrag:
Verschrieben im Screenshoot. kommt selbstredent aus "site".

Also "content" wird aus einem für mich nicht erkennbaren Grund nach "header" beendet und "content" steht dann darunter - inkl. einer Leerzeile.

Dieser Beitrag wurde von Stefan_der_held bearbeitet: 11. Januar 2019 - 13:50

0

Anzeige



#2 _d4rkn3ss4ev3r_

  • Gruppe: Gäste

geschrieben 11. Januar 2019 - 14:01

Ich würde sagen:
.site {
box-shadow: 5px 5px 10px #BBBBBB;
)

ist der Schuldige
1

#3 _Osmodia_

  • Gruppe: Gäste

geschrieben 11. Januar 2019 - 14:05

Nö, durch "margin-top: 25px" für ".content". Da ".site" als Hintergrund #aaaaaa hat, scheint das dann durch die 25px-Lücke an der Stelle durch.
2

#4 Mitglied ist offline   Stefan_der_held 

  • Gruppe: Offizieller Support
  • Beiträge: 14.289
  • Beigetreten: 08. April 06
  • Reputation: 929
  • Geschlecht:Männlich
  • Wohnort:Dortmund NRW
  • Interessen:Alles wo irgendwie Strom durchfließt fasziniert mich einfach weswegen ich halt Elektroinstallateur geworden bin :)

geschrieben 11. Januar 2019 - 14:09

Leider nein. Die Zeile mal rausgenommen für den Schatten.

Problem weiter existent - halt nun ohne umlaufenden Schatten :unsure:

Was ich interessant finde ist:

Füge ich meine Nav-Buttons testweise grob ein, so setzen die dort an wo sie sollen. Nur der DIV "content" weiterhin an seiner falschen Position (auch wenn es optisch "korrigiert" aussieht durch die "topnav"-Divs.

Angehängtes Bild: 2.PNG

ergänzter Code:

         <!-- CSS-Files -->
                  <link href="CSS/style.css" rel="stylesheet" type="text/css">

         </head>
        <body>
                <div class="site">
                        <div class="header">Ich bin ein Header</div>
                                <div class="topnav">1</div>
                                <div class="topnav">1</div>
                                <div class="topnav">1</div>
                                <div class="topnav">1</div>
                                <div class="topnav">1</div>
                        <div class="content">Hallo der neue Content hier</div>
                </div>
        </body>


body {
        background-color:       #FFFFFF;
        background-image:       url(../PFAD/ZUM/bild.jpg);
        font-family:            verdana, arial;
        font-size:                      14px;
        font-weight:            bold;
        line-height:            1.5em;
        width:                          90%;
        height:                         100%;
        padding-top:            35px;
        padding-bottom:         20px;
        margin-top:                     auto;
        margin-bottom:          auto;
        margin-right:           auto;
        margin-left:            auto;
        }
        
.site {
        background-color:       #aaaaaa;
        height:                         90%;
        box-shadow:             5px 5px 10px #BBBBBB;
        }

.header {
        background-image:       url(../PFAD/ZUM/bild.jpg);
        background-color:       #789abc;
        height:                         200px;
        position:                       relative;
        }
        
.content {
        background-image:       url(../PFAD/ZUM/bild.jpg);
        background-color:       #123456;
        position:                       relative;
        padding-left:           5px;
        padding-right:          5px;
        margin-top:                     25px;
        height:                         100%;
        overflow:                       auto;
        white-space:            normal;
        }
.topnav{
        position:                       absolute;
        background-color:       #FFFCF5;
        text-align:                     center;
        float:                          left;
        width:                          19.46%;
        position:                       relative;
        padding-left:           2px;
        padding-right:          2px;
        padding-top:            1px;
        padding-bottom:         1px;
        border:                         solid 1px;
        }
.topnav:hover{
        letter-spacing:         6px;
        font-size:                      105%;
        background-color:       #3D342B;
        color:                          #FFFCF5;
        }

0

#5 Mitglied ist offline   Stefan_der_held 

  • Gruppe: Offizieller Support
  • Beiträge: 14.289
  • Beigetreten: 08. April 06
  • Reputation: 929
  • Geschlecht:Männlich
  • Wohnort:Dortmund NRW
  • Interessen:Alles wo irgendwie Strom durchfließt fasziniert mich einfach weswegen ich halt Elektroinstallateur geworden bin :)

geschrieben 11. Januar 2019 - 14:17

 Zitat (Osmodia: 11. Januar 2019 - 14:05)

Nö, durch "margin-top: 25px" für ".content". Da ".site" als Hintergrund #aaaaaa hat, scheint das dann durch die 25px-Lücke an der Stelle durch.


hast wohl während meiner Antwort gepostet.

Argh! Nöööö.... den Codefetzen wollte ich doch nicht mit übernehmen. Danke.

Nun ist diese Zeile weg. :imao:
0

Thema verteilen:


Seite 1 von 1

2 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 2, unsichtbare Mitglieder: 0