chaosprinz
Neues Mitglied
Hallo,
hab in meinem Layout folgendes Problemchen: Die horziontale Navigation soll sich genau so weit erstrecken wie die komplette Site und dabei aber auch links und rechts jeweils einen 1.5px starken Rahmen aufweisen.
Es handelt sich um ein flexibles Layout, zur Positionierung nutz ich vorwiegend floatende Boxen. Funktioniert soweit auch gut.
Nur die horizontale Navi muss ich ja auf eine width von 100% bringen, damit sie sich soweit erstreckt.
Das beißt sich nun ja mit den 1.5 Pixeln für die Rahmenbreite, so dass keine Rahmen angezeigt werden. Habe schon viele Experimente gemacht, bin aber zu keinem Ergebniss gekommen. Über einen umfassenden div mit einer auto-width rahmen für links und rechts gesetzt. Da hat er mir die 1.5 Pixel im eingeschlossenen Menu dann eingerückt, aber den Rahmen nich gezeigt.
Hier ist mal der HTML-Code von der Templatedatei. Nich über die headers wundern, die passen so, sind genau stimmig mit der eingesezten CMS(Joomla1.5), das Menu wir über den Jdoc:include von der CMS her generiert.
Dementsprechend noch das listing der css-datei (ich poste mal nur den relevanten Teil, sonds wirds zu lang):
hab in meinem Layout folgendes Problemchen: Die horziontale Navigation soll sich genau so weit erstrecken wie die komplette Site und dabei aber auch links und rechts jeweils einen 1.5px starken Rahmen aufweisen.
Es handelt sich um ein flexibles Layout, zur Positionierung nutz ich vorwiegend floatende Boxen. Funktioniert soweit auch gut.
Nur die horizontale Navi muss ich ja auf eine width von 100% bringen, damit sie sich soweit erstreckt.
Das beißt sich nun ja mit den 1.5 Pixeln für die Rahmenbreite, so dass keine Rahmen angezeigt werden. Habe schon viele Experimente gemacht, bin aber zu keinem Ergebniss gekommen. Über einen umfassenden div mit einer auto-width rahmen für links und rechts gesetzt. Da hat er mir die 1.5 Pixel im eingeschlossenen Menu dann eingerückt, aber den Rahmen nich gezeigt.
Hier ist mal der HTML-Code von der Templatedatei. Nich über die headers wundern, die passen so, sind genau stimmig mit der eingesezten CMS(Joomla1.5), das Menu wir über den Jdoc:include von der CMS her generiert.
HTML:
<body>
<div id="container_head">
<div id="head">
<img src="templates/blueskytemplate2/images/top_banner.jpg" alt="Radio Bluesky - The web is listening" /></div>
<div id="log_in">Anmeldeformular</div></div>
<div id="sizer"><div id="mainlevel-nav"><jdoc:include type="modules" style="+1" name="user3" /></div></div><br />
<div id="container_main">
<div id="container_left">
<div id="left_menu">Die vertikale Navigation</div>
<div id="container_center">
<div id="latest_news">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut lLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l</div>
<div id="breadcrumbs">Breadcrumbs</div>
<div id="own_banner">Sendebanner</div>
<div id="content">Inhalt</div>
</div>
</div>
<div id="right_menu">Die Extra-Leiste</div>
</div>
<div id="foot">copyright</div>
</body>
HTML:
body {
background: #FF00FF;
}
#container_head {
background: #afd4ff;
border-top-width: 1.5px;
border-right-width: 1.5px;
border-bottom-width: 0px;
border-left-width: 1.5px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
overflow: hidden;
}
#head {
float: left;
width: 43.95431%;
}
#sizer {
width:auto;
border-left:1.5px #000000 solid;
border-right:1.5px #000000 solid;
}
#mainlevel-nav {
width:100%;
background-image:url(../images/grund_04.jpg);
background-repeat:repeat-x;
background-position:top left;
list-style-type:none;
}
#mainlevel-nav a {
text-decoration:none;
display:block;
width:auto;
color:#FFFFFF;
}
#mainlevel-nav ul {
float:left;
display:inline;
list-style-type:none;
padding:0;
margin:0;
overflow:hidden;
}
#mainlevel-nav ul li {
float:left;
display:inline;
}
#mainlevel-nav ul li a:link, #mainlevel-nav ul li a:visited {
padding-left:8px;
padding-right:8px;
}
#log_in {
float: right;
width: 40%;
background: #afd4ff;
}
