30.06.2005, 09:30
|
|||
|
|||
Layout Problem !
Morgen Forum,
ich habe ein grosses Problem mit meinem Layout !!! Ich bin blutiger Anfaenger was CSS angeht und hoffe das ihr mir helfen koennt ! Ich habe als Header mehrere CSS Boxen erstellt - das funktioniert (momentan in IE) auch ganz gut nur dann ist mein Latain am ende ! Unter dem Header moechte ich gerne auf der linken Seite eine Navigation und auf der rechten den Content Bereich haben. Der Navigationsbereich soll immer gleich lang sein wie der Content Bereich ! Mir wuerde der Tip gegeben das ich ein Background Image nutzen muss um dieses Problem zu loesen - nur leider sind bis jetzt alle mein versuche gescheitert ! Meine Seite: http://www.lantek.pl/web/cms/front_content.php?idart=5 Mein CSS COde: Code:
/* Website */
body {font-family: helvetica, arial, geneva, sans-serif; font-size: x-small; color: #000000; margin: 0px padding: 0px;
background-image: url(http://www.lantek.pl/web/cms/upload/structure/line.jpg);
background-color: #ffffff;}
.punkte {font-family: helvetica, arial, geneva, sans-serif; font-size:13; color:#AE6B00; font-weight: bold}
.headline {font-family: helvetica, arial, geneva, sans-serif; font-size:15; color:#000000; font-weight: bold}
.subheadline {font-family: helvetica, arial, geneva, sans-serif; font-size:13; color:#AE6B00}
.text {font-family: helvetica, arial, geneva, sans-serif; font-size:12; color:#000000 }
.navigation {font-family: helvetica, arial, geneva, sans-serif; font-size:10; color:#FFFFFF; font-weight: bold}
.headline_fb {font-family: helvetica, arial, geneva, sans-serif; font-size:13; color:#000000; font-weight: bold; font-style: italic}
.copyright {font-family: helvetica, arial, geneva, sans-serif; font-size:10; text-decoration: none; color: #000000}
A:link {font-family: helvetica, arial, geneva, sans-serif; font-size:13; text-decoration: none; color: #000000}
A:visited {font-family: helvetica, arial, geneva, sans-serif; font-size:13; text-decoration: none; color: #000000}
A:hover {font-family: helvetica, arial, geneva, sans-serif; font-size:13; text-decoration: none; color: #000000}
A:active {font-family: helvetica, arial, geneva, sans-serif; font-size:13; text-decoration: none; color: #000000}
A.klein:link {font-family: helvetica, arial, geneva, sans-serif; font-size:11; text-decoration: none; color: #000000}
A.klein:visited {font-family: helvetica, arial, geneva, sans-serif; font-size:11; text-decoration: none; color: #000000}
A.klein:hover {font-family: helvetica, arial, geneva, sans-serif; font-size:11; text-decoration: none; color: #AE6B00}
A.klein:active {font-family: helvetica, arial, geneva, sans-serif; font-size:11; text-decoration: none; color: #FFFFFF}
A.nav:link {font-family: helvetica, arial, geneva, sans-serif; font-size:13; text-decoration: none; color: #000000}
A.nav:visited {font-family: helvetica, arial, geneva, sans-serif; font-size:13; text-decoration: none; color: #000000}
A.nav:hover {font-family: helvetica, arial, geneva, sans-serif; font-size:13; text-decoration: none; color: #CCCCCC}
A.nav:active {font-family: helvetica, arial, geneva, sans-serif; font-size:13; text-decoration: none; color: #CCCCCC}
A.home:link {font-family: helvetica, arial, geneva, sans-serif; font-size:14; text-decoration: none; color: #000000}
A.home:visited {font-family: helvetica, arial, geneva, sans-serif; font-size:14; text-decoration: none; color: #000000}
A.home:hover {font-family: helvetica, arial, geneva, sans-serif; font-size:14; text-decoration: none; color: #CCCCCC}
A.home:active {font-family: helvetica, arial, geneva, sans-serif; font-size:14; text-decoration: none; color: #000000}
#logo {
background-color: #ffffff;
position:absolute;
width:250px;
height: 90px;
padding:0px;
}
#head_navi {
background-color: #000000;
top: 50px;
left:550px;
position:absolute;
width:405px;
height: 40px;
padding:0px;
}
div.head_navi_bg {
background-color: #ffffff;
background-image:url(../upload/structure/bg-header.jpg);
left:250px;
position:absolute;
width:705px;
height: 90px;
padding:0px;
}
div.lang {
background-image:url(../upload/structure/lang.gif);
float:right;
width:260px;
height:30px;
border:0px solid black;
padding:0px;
text-indent:40px;
font-family:verdana;
vertical-align:text-bottom;
}
#head_pix {
background-color: #FCDEAD;
background-image:url(../upload/structure/home_header.jpg);
top: 90px;
width:755px;
position:absolute;
height: 125px;
padding:0px;
}
#head_quad {
background-color: #6699ff;
top: 90px;
left:755px;
position:absolute;
width:200px;
height: 125px;
border-left: 2px solid white;
padding:2px;
padding-left:30px;
}
#head_spacer_left {
background-color: #6699ff;
top: 215px;
position:absolute;
width:210px;
height: 30px;
padding:0px;
border-top: 2px solid white;
}
#head_spacer_mid {
background-color: #3366cc;
top: 215px;
left: 210px;
position:absolute;
width:545px;
height: 30px;
padding:0px;
border-top: 2px solid white;
border-left: 2px solid white;
}
#head_spacer_right {
background-color: #3366cc;
top: 215px;
left: 755px;
position:absolute;
width:200px;
height: 30px;
padding:0px;
border-top: 2px solid white;
border-left: 2px solid white;
}
#home_navi_left {
background-color: #99ccff;
top: 245px;
position:absolute;
width:210px;
height: 150px;
padding:0px;
border-top: 2px solid white;
}
ul {
list-style-type: none;
margin: 0;
padding:0;
}
li a{
display: block;
color: black;
background-color: #D0DCF0;
width: 150px;
text-decoration: none;
border: 1px solid black;
margin: 10px;
padding-left: 5px;
text-align: left;
}
li a:hover{
background-color: #ffffff;
border: 1px solid black;
}
#main_box{
top: 250px;
position:relative;
color:black;
background-color:transparent;
background-image:url(../upload/structure/bg_navi.gif);
background-repeat:repeat-y;
border:1px solid black;
width:700px;
min-height:400px;
margin:auto;}
#navi_left{
color:#ffffff;
background:transparent;
margin:0;
float:left;
width:150px;
height:400px;}
#content{
margin:0 80px 0 190px;
padding:5px;}
#hh1
{
font-family:verdana;
font-size: 12px;
font-style: italic;
}
/* Website end */
Code:
<body > <div align="left" valign="center"><script language="JavaScript">menue.Build();</script></div> <div id="logo"> [img]upload/structure/logo-header.jpg[/img] </div> <div class="head_navi_bg"> <div class="lang"> [img]upload/structure/gb_blue.gif[/img] English [change] | Home </div> </div> <div id="head_pix"> </div> <div id="head_quad"> <div align="center" font-weight="bold;" color="#ffffff"></div> [img]upload/support/ts.gif[/img] [img]upload/support/hd.gif[/img] [img]upload/support/sa.gif[/img] </div> <div id="head_spacer_left"> </div> <div id="head_spacer_mid"> </div> <div id="head_spacer_right"> </div> <div id="main_box"> <div id="navi_left"> </div> <div id="content"> </div> </div> </body> Thanx 
|
| Sponsored Links |
|
30.06.2005, 12:32
|
||||
|
||||
|
Es wär ja schonmal ein Anfang, wenn Du ein korrektes HTML und CSS schreiben würdest:
http://validator.w3.org/check?verbos...hp%3Fidart%3D5 http://jigsaw.w3.org/css-validator/v...hp%3Fidart%3D5 Es muss eine Einheit bei Font angegeben werden (px, em ...). Und es gibt nur float: left und float: right, aber nicht float: middle oder float: center ... um mal nur einige Beispiele zu nennen.
__________________
“My software never has bugs. It just develops random features ...”  » DevShack - die Website des freien Webentwicklers Boris Bojic 
|
| Sponsored Links |
|
04.07.2005, 12:35
|
|||
|
|||
|
Ok, danke !
Waren wirklich dumme Fehler ! Ich habe sie alle korregiert - kannst du mir vielleicht noch einen Ratschlag geben wie ich das so wie im Bild hin bekomme ! Das ist der CSS Code der unter dem Header ansetzt ! Code:
#main_box{
top: 250px;
position:relative;
color:black;
background-color:transparent;
background-image:url(../upload/structure/bg_navi.gif);
background-repeat:repeat-y;
border:1px solid black;
width:700px;
min-height:400px;
margin:auto;}
#navi_left{
color:#ffffff;
background:transparent;
margin:0;
float:left;
width:150px;
height:400px;}
#content{
margin:0 80px 0 190px;
padding:5px;}
Danke Tim
|
 |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| problem mit layout --> testcase | andip | CSS | 5 | 29.02.2008 14:10 |
| Problem mit dreispaltigem Layout im IE | Breezah | CSS | 7 | 13.08.2006 21:27 |
| Problem mit 3-Zeiligem Layout | guenterfrosch | CSS | 6 | 10.08.2006 12:41 |
| Layout Problem | smooth-graphics | CSS | 3 | 08.08.2006 17:59 |
| Flexibles 3-Spalten Head-Foot Layout Problem | crucho | CSS | 4 | 26.08.2004 21:27 |
Linear-Darstellung
