• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hilfe für CSS Layout

Status
Für weitere Antworten geschlossen.

Cloude

Neues Mitglied
Hallo erstmal,
ich bin sicher dass, das hier ziemlich einfach ist, wenn man sich damit auskennt. Für mich leider nicht

Folgendes Problem:

Die folgenden Seiten funktionieren in so ziemlich jedem Browser wunderbar und sehen auch so aus wie ich sie haben will. Nur im IE leider nicht.
Ich hab zwar auch schon einen Verdacht woran es liegen könnte, hab aber keine Ahnung was ich dagegen tun soll.

inex.html:

Code:
<!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>NFG Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="lead">

<div id="menue">
<div id="header" align="center">
<a href="index.html">
<!--Bild--> </a></div>
<p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
<ul id="nav">
<li><a href="index.html" class="link_akt">1. Home</a></li>
<li><a href="link.html">link</a></li>
<li><a href="link.html">link</a></li>
<li><a href="link.html">link</a></li>
<li><a href="link.html">link</a></li>
<li><a href="link.html">link</a></li>
<li><a href="link.html">link</a></li>
<li><a href="link.html">link</a></li>
<li><a href="link.html">link</a></li>
<li><a href="link.html">link</a></li>
<li><a href="link.html">link</a></li>
</ul>
</div>

<div id="main">
Inhalt
</div>
</div>
<p>&nbsp;</p>

</body>
</html>



style.css:

Code:
/* CSS Document */

body { background-color:#ffffff;
}

.link_akt {
color: #950000; 
text-decoration:none; 
font-weight: bold;
font-family:Maiandra GD;
font-size:0.91em;
}

#lead {
width:970px;
border:1px solid gray;
margin:auto;
padding: 5px;

}

#menue {
width:223px;
border:0px solid red;
float: left;

}

#header {
width:223px;
border:0px;
padding:0;
}

ul#nav {
font-size: 0.91em;
margin: 0; padding: 0;
border: 0px solid black;
}

ul#nav li {
list-style: none; 
margin: 0; padding: 0em; /* padding für abstand zwischen link-boxen */
}

ul#nav a {
display: block;
padding: 0.4em; /* padding für abstand zwischen links */
font-family:Maiandra GD;

}

ul#nav a:link {
color: navy; background-color: white; text-decoration:none;
}

ul#nav a:visited {
color: navy; background-color: white; text-decoration:none;
}

ul#nav a:hover {
color: #cc0000; background-color: white; text-decoration:none; /*font-weight: bold;*/
}

ul#nav a:active {
color: #950000; background-color: white; text-decoration:none; font-weight: bold;
}

#main {
width:730px;
min-height:600px;
margin-top:5px;
float: none;
border:1px solid;
border-left-color:gray;
border-right:0px;
border-bottom:0px;
border-top:0px;
margin-left:225px;
/* padding: 0 1 0 0 em; */
padding-left:1em;
padding-bottom:0em;
padding-right:0em;
padding-top:0em;

}

#list_nondec {
list-style: none;
color: navy;
font-family:Maiandra GD;
font-size:0.91em;

}

#box {
border:1px solid red;
margin:auto;
padding: 5px;
font-family:Maiandra GD;
font-size:0.91em;
color:#cc0000;
width:600px;

}



ich glaub am Code sieht man schon das ich ein ziemlicher noob bin

hoffe auf schnelle Hilfe und sag jetzt schon mahl DANKE.
 
Also dein Code sieht OK aus... kann darin keinen Fehler feststellen

Und sowieso... IE kannst du sowieso rauchen, wenn ich das mal so sagen darf.. wenn ich eine HP mache dann optimiere ich sie sowieso auf Mozilla Firefox, schon aus Prinzip :D:D:D

Aber wenn deine Seite sich in allen anderen Browsern darstellen lässt, weiss ich nicht woran es liegen könnte.....

Sry

LG MasteR ChieF
 
border und padding werden dem width hinzuaddiert.
(Das ist kein Bug vom IE, sondern Standard nach w3c.)
Darum passt die main-Box nicht neben die Navigation.
Ich habe die css geändert und die betreffenden Boxen zur Übersicht eingefärbt.
Die großen Zeilenabstände in der Navigation sind ein Bug vom IE 5 und 6.
Mit display: inline kann man das im IE 6 beheben. Beim IE 5 hilft das leider nicht. IE5-Nutzer werden sich an den Fehler wohl schon durch andere Seiten gewöhnt haben.

Ich finde den Code übrigens nicht schlecht.

Die betroffenen Stellen hab ich kommentiert:

HTML:
body { background-color:#ffffff;
}

.link_akt {
color: #950000;
text-decoration:none;
font-weight: bold;
font-family:Maiandra GD;
font-size:0.91em;
}

#lead {
width:970px;
border:1px solid gray;
margin:auto;
padding: 5px;
background-color : #CFCFCF;

}

#menue {
width:223px;
border:0px solid red;
float: left;
background-color : #6AA3AE;
}

#header {
width:223px;
border:0px;
padding:0;
}

ul#nav {
font-size: 0.91em;
margin: 0; padding: 0;
border: 0px solid black;
}

ul#nav li {
list-style: none;
margin: 0; padding: 0em; /* padding für abstand zwischen link-boxen */
display : inline; /* verhindert doppelten Zeilenabstand im IE6 */
}

ul#nav a {
display: block;
padding: 0.4em; /* padding für abstand zwischen links */
font-family:Maiandra GD;

}

ul#nav a:link {
color: navy; background-color: white; text-decoration:none;
}

ul#nav a:visited {
color: navy; background-color: white; text-decoration:none;
}

ul#nav a:hover {
color: #cc0000; background-color: white; text-decoration:none; /*font-weight: bold;*/
}

ul#nav a:active {
color: #950000; background-color: white; text-decoration:none; font-weight: bold;
}

#main {
width:730px;
min-height:600px; /*versteht ie6 nicht*/
margin-top:5px;
background-color : #CEF0F5;
/*border:1px solid;    border wird zum width dazugerechnet.*/
border-left-color:gray;
border-right:0px;
border-bottom:0px;
border-top:0px;
margin-left:225px;
/* padding: 0 1 0 0 em;  padding wird zum width dazugerechnet.*/
/*padding-left:1em;*/
padding-bottom:0em;
padding-right:0em;
padding-top:0em;

}

#list_nondec {
list-style: none;
color: navy;
font-family:Maiandra GD;
font-size:0.91em;

}

#box {
border:1px solid red;
margin:auto;
padding: 5px;
font-family:Maiandra GD;
font-size:0.91em;
color:#cc0000;
width:600px;

}
 
Danke

Danke vielmals für die schnelle Antwort, hat mir sehr geholfen. :-D

Danke


@MasteR ChieF: seh ich auch so, aber leider meine Kunden nicht. ;-)
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben