Anfängerhilfe: Padding 'sprengt' Design

Johnny82 · 10 März 2011

Ich bin gerade dabei, meine Webseite neu zu gestalten. Was ich bisher zusammengestellt habe, könnt Ihr Euch unter http://www.spikydesign.net anschauen. Eigentlich kenne ich mich mit HTML und CSS schon recht gut aus, stoße nun aber doch an meine Grenzen.

Wie Ihr unschwer erkennen könnt, habe ich bisher für Padding überall den Wert '0' gesetzt.
Im Content-Div und Footer-Div macht das Padding im Prinzip keine Probleme. Die Divs würden nur über die Bilder und die Navigation etwas 'herausragen'. Wenn ich aber in der Navigations-Div Padding eingebe, wird das ganze Design gesprengt (was irgendwie schon logisch ist). Die Bilder sind in eigenen Divs und füllen diese komplett aus, die Navigation ist ein eigener Div. Rund um die Bilder und die Navigation ist der Header-Div. Die komplette Seite wird vom Page-Container umschlossen.

Könnt Ihr mir sagen, wie ich in das bestehende Layout eine Navigation und Inhalte Einfüge, sodass es schön aussieht und nicht alles 'auseinanderfliegt'? Ich hoffe ich konnte mein Problem deutlich machen

Danke für jede Antwort!

Cheffchen · 10 März 2011

Hallo,

in dem mit margin arbeitest :O).
Wenn mit padding arbeitest muss das div um den paddingwert x2 kleiner sein.
Deswegen einfach ein Margin und ein neues div mit dem Inhalt rein.

Cheffchen

Johnny82 · 22 März 2011

So, ich war mit anderen Dingen beschäftigt und konnte erst vorgestern wieder anfangen, herumzuprobieren. Wie auf Spikydesign zu sehen gibt es immer noch Probleme. Zunächst habe ich neue Divs+Margin eingefügt, danach habe ich es mit dem Subtrahieren von Padding*2 versucht (welches die 'aktuelle' Version ist). Vielleicht kann mich mal jemand auf meine Fehler stupsen? Ich wäre sehr dankbar! :sad:

HTML:

<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="page-container">
        
        <div id="header">
            <div id="logo">
            </div>
            
            <div id="headerimage">
            </div>
        
    
              <div id="navigation">
                <ul id="navigation">
                    <li><a href="home.php">Home</a></li>
                    <li><a href="portfolio.php">Portfolio</a></li>
                    <li><a href="biography.php">Biography</a></li>
                    <li><a href="contact.php">Contact</a></li>
                </ul>
            </div> 
           </div><!-- end header div-->
        
        <div id="content">Content
        </div> <!-- end content div-->
    
        <div id="footer">
        ©2011 Spikydesign</div>
        
    </div>
</body>
</html>

Code:

html, body{
    margin: 0;
    padding: 0;
    background-color: #8388e2;
}

#page-container{
    width: 820px;
    margin: auto;
}

#header{
    width: 820px;
    height:    150px;    
}

#logo{
    width: 200px;
    height:    150px;
    float: left;
    background-image: url(../images/logo.jpg);
}

#headerimage{
    width: 620px;
    height:    115px;
    float: right;
    background-image: url(../images/header.jpg);
}
    
#navigation{
    background-color: #0b0f5e;
    width: 616px;
    height:    31px;
    padding: 2px;
    float: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

#content{
    background-color: #2f35ac;
    width: 816px;
    height:    346px;
    padding: 2px;
}

#footer{
    background-color: #0b0f5e;
    width: 816px;
    height:    36px;
    padding: 2px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    text-align: center;
    color: #FFF;
}

ul#navigation{
    list-style-type: none;
    margin-left: 0;
    padding: 2px;
}

ul#navigation li{
    float: left;
    padding: 4px;
}

ul#navigation li a{
    background-color: #0b0f5e;
    padding: 4px;
}
ul#navigation li a:hover{
    background-color: #0066ff;

}

a{
    color: #FFFFFF;
    text-decoration: none;
}

p{
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
]

philipp.hat.alles · 22 März 2011

müsste so glaub ich nehmen, ich persönlich mach nie margin:auto, weil hatte es 1x genommen und alles war inder vorschau durcheinander, oder man verrät mir, wie es geht mit dem "auto"

prm · 22 März 2011

Gib #navigation ein

Code:

margin: 0;

und nimm bei ul #navigation das padding raus.

Cheffchen · 22 März 2011

edit: war schon wieder zu langsam, wieso wird das bloss nicht gecheckt :O(
@prm war schneller und genau auf meiner schiene :O)

Hallo,

@philipp.hat.alles: was sol der beitrag, hast noch nie eine Seite Zentriert oder ein div?

@Johnny82:
hatte doch gesagt padding nicht nehmen. wenn ich viele padding löschen und ul#navigation nur margin:0 eintragen ohne das padding sieht das schon ganz anders aus.
Anhang anzeigen 1920

Cheffchen

Johnny82 · 22 März 2011

Danke Euch allen! Ich habe es jetzt so geändert, wie von Euch vorgeschlagen. Bei ul#navigation habe ich margin und padding rausgenommen. Es ist fast schon in Ordnung. Allerdings ist es doch noch um ein paar Pixel verrückt: spikydesign. Was könnte das jetzt noch sein?

Cheffchen · 22 März 2011

Hallo,

so, nun zum letzten mal.

nimm bei #navigation alle padding raus und pass dann die höhe auf 35px bzw breite auf 620px an.

was ist daran so schwer zu verstehen :O).

Cheffchen

ps: #navigation hast zwei mal drin zu stehen, einmal im div und einmal in ul, das geht so nicht, ist doppelt und fehler.

Johnny82 · 22 März 2011

Entschuldige bitte! :cry: Es ist halt doch schwieriger als ich dachte. Ich habe jetzt die Div in #menue umbenannt und bei allen #navigation das Padding entfernt. Logischerweise sind jetzt aber alle Listenelemente direkt aneinenader, was auch nicht schön ist: http://www.spikydesign.net. Hier mal der aktuelle Code!

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="page-container">
        
        <div id="header">
            <div id="logo">
            </div>
            
            <div id="headerimage">
            </div>
        
    
              <div id="menue">
                <ul id="navigation">
                    <li><a href="home.php">Home</a></li>
                    <li><a href="portfolio.php">Portfolio</a></li>
                    <li><a href="biography.php">Biography</a></li>
                    <li><a href="contact.php">Contact</a></li>
                </ul>
            </div> 
           </div><!-- end header div-->
        
        <div id="content">Content
        </div> <!-- end content div-->
    
        <div id="footer">
        ©2011 Spikydesign</div>
        
    </div>
</body>
</html>

Code:

html, body{
    margin: 0;
    padding: 0;
    background-color: #8388e2;
}

#page-container{
    width: 820px;
    margin: auto;
}

#header{
    width: 820px;
    height:    150px;    
}

#logo{
    width: 200px;
    height:    150px;
    float: left;
    background-image: url(../images/logo.jpg);
}

#headerimage{
    width: 620px;
    height:    115px;
    float: right;
    background-image: url(../images/header.jpg);
}
    
#menue{
    background-color: #0b0f5e;
    width: 620px;
    height:    35px;
    margin: 0;
    float: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

#content{
    background-color: #2f35ac;
    width: 816px;
    height:    346px;
    padding: 2px;
}

#footer{
    background-color: #0b0f5e;
    width: 816px;
    height:    36px;
    padding: 2px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    text-align: center;
    color: #FFF;
}

ul#navigation{
    list-style-type: none;
}

ul#navigation li{
    float: left;
}

ul#navigation li a{
    background-color: #0b0f5e;
}
ul#navigation li a:hover{
    background-color: #0066ff;

}

a{
    color: #FFFFFF;
    text-decoration: none;
}

p{
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
]

Cheffchen · 22 März 2011

Hallo,

aber jetzt bist auf dem richtigen weg :O).
nun hast ein blankes feld und kannst da alles reinmachen was du so findest.

z.b. das SELFHTML: Stylesheets / CSS-basierte Layouts / Navigationsleisten
aber deine 4 #navigation erstmal rausnehmen.

Code:

  ul#navigation {
    margin: 0; padding: 0.8em;
    text-align: center;
    border: 1px solid black;
    background-color: silver;
  }
  ul#navigation li {
    list-style: none;
    [B]display: inline;[/B]
    margin: 0.4em; padding: 0;
  }

  ul#navigation a, ul#navigation span {
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#navigation a, * html ul#navigation span {
    width: 1em;    /* nur fuer IE 5.0x erforderlich */
    w/idth: auto;  /* sicherheitshalber fuer IE 6 zurueckgesetzt */
  }
  ul#navigation a:hover, ul#navigation span {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }

Cheffchen

prm · 23 März 2011

@Johnny82:
Ausgehend von deiner letzten Version ergänze hier:

ul#navigation li{
float: left;
margin-right: 15px;
line-height: 35px;
}

Anfängerhilfe: Padding 'sprengt' Design

Johnny82

Neues Mitglied

Cheffchen

Senior HTML'ler

Johnny82

Neues Mitglied

philipp.hat.alles

Guest

prm

Aktives Mitglied

Cheffchen

Senior HTML'ler

Johnny82

Neues Mitglied

Cheffchen

Senior HTML'ler

Johnny82

Neues Mitglied

Cheffchen

Senior HTML'ler

prm

Aktives Mitglied

Neueste Beiträge