nicht angemeldet
hr trennlinie-- Browserweiche??
Hallo!
Ich habe ein Problem! Bin Anfänger und versuche eine Linie einzufügen(habe es versucht als Grafik und mit hr) die genau positioniert werden soll(zwischen Menü und Untermenü).
Es zeigt in IE 7 das ganz anders an als im Firefox und die gesamt Position stimmt auch nicht.
Wäre dankbar für jede Hilfe.#
Hier mein Quelltext:---
<style type="text/css">
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 0.96em;
margin: 0;
background-color: #534C44;
background-image:url(bilder/kachel.gif);
background-repeat:repeat-x;
}
/* Hauptcontainer */
#layout {
height: 600px;
width: 955px;
margin: 0 auto 0 auto;
border: 1px solid #000033;
}
#titel{
margin-top: 0px;
height: 75px;
/*border: 1px solid #000033;*/
}
#inhalt {
height: 420px;
/*border: 1px solid #000033;*/
}
#fuss {
height: 105px;
/*border: 1px solid #000033;*/
}
/* Navigation */
div#Rahmen {
width: 47.1em;
padding: 0.15em;
}
/* Korrektur fuer Internet Explorer */
* html div#Rahmen {
width: 48.7em;
}
ul#Navigation {
margin: 0;
padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left;
width: 8.6em;
position: relative;
margin: 0.4em;
padding: 0;
}
/* Korrektur fuer Internet Explorer */
* html ul#Navigation li {
margin-bottom: -0.4em;
}
/* Korrektur fuer Internet Explorer */
*:first-child+html ul#Navigation li {
margin-bottom: -0.1em;
}
ul#Navigation li ul {
margin: 0;
padding: 0;
position: absolute;
top: 1em;
left: -0.4em;
}
/* Korrektur fuer Internet Explorer */
* html ul#Navigation li ul {
left: -1.5em;
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}
ul#Navigation a, ul#Navigation span {
text-decoration: none;
font-size: small;
color:#FFFFFF;
}
/* Korrektur fuer Internet Explorer */
* html ul#Navigation a, * html ul#Navigation span {
width: 6.4em;
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
color: #8E9194;
}
li a#aktuell {
color: #8E9194;
}
ul#Navigation li ul span {
color: #8E9194;
}
#linie {
padding-top: 25px;
width: 650px;
position: absolute;
}
</style>
</head>
<body>
<div id="layout" align="center">
<div id="titel" align="center"><img src="bilder/schriftzug.gif"></div>
<div id="inhalt" align="center"></div>
<div id="fuss" align="center">
<img src="bilder/linie.gif" align="bottom"id="linie">
<!-- <hr noshade size="1" id="linie"> -->
<div id="Rahmen">
<ul id="Navigation">
<li><a href="">HOME</a></li>
<li><a id="aktuell" href="#">ARCHITEKTUR</a>
<ul>
<li><a href="#">ARCHITEKTUR 2</a></li>
<li><span>ARCHITEKTUR 3</span></li>
</ul>
</li>
<li><a href="#">EVENT</a>
<ul>
<li><a href="#">E_a</a></li>
<li><a href="#">E_b</a></li>
</ul>
</li>
<li><a href="#">KONTAKT</a></li>
<li><a href="#">CREDITS</a></li>
</ul>
<div>
</div>
</div>
</div>
</div>
</body>
</html>
--------Vielen Dank!!!!------------------------------
Gruß
Micha
-
Hi Micha,
dein Layout soll horizontal zentriert in der Seite so aussehen
____________________
| header |
|____________________|
| inhalt |
| |
| |
| |
|____________________|
| fuß (navi) |
|____________________|richtig?
Nimm mal alle position, float, display, top und left Angaben raus. Dafür reichen 3 <div> tags und 1 <ul> im fuß. html und body kriegen width:100%, die <div> kriegen ihre Breite und margin links und rechts auto.
Für deine Linie verpasst du inhalt einfach border-bottom: 1px solid deinefarbe;
Für die navi kriegt die <ul> list-style: none; die <li> float: left; und die <a> display:block;
Was es mit der zweiten <ul> auf sich haben soll, müsstest du nochmal erklären.
Alle Infos, die du brauchst stehen ansonsten auch hier: CSS basierte Layouts
Gruß
Antipitch-
Hallo!
Vielen Dank erst einmal!
die zweite ul soll das Untermenü sein.
Ich probiere jetzt erst einmal deinen Vorschlag aus!
Übrigens beim IE 7 sieht das ganz anders aus als beim Firefox.
Ich habe gerade mir das mit den Browserweichen durchgelesen:<!--[if gte IE 5]> - gte
Hier Anweisungen für den IE 5
<![endif]-->
Wie wird das den richtig notiert, habs versucht?
Danke
Gruß
Micha
-