Hallo,
ich versuche eine Seite ganz ohne Tabellen mit css boxen zu erstellen und schaffe es einfach nicht, dass ich 2 Boxen links unter einander anordnen kann.
Ich sehe schon vor lauter Wald keine Bäume mehr, kann mir vielleicht jemand helfen?
.ecke { border-style: solid; width: 0px; height: 0px; line-height: 20px; float:left;}
.linksoben {border-width: 60px 150px 150px 60px; border-color: #ffffff #ACC3FA #F89A2C #ffffff; }
.farbe {height: 200px; background-color:#ACC3FA; color:#000066; font-size:20px; font-weight: bold; }
div#logo {text-align: left; padding: 40px; margin: 0;}
.links {float:left; margin-top: 130px;width: 220px; background-color: ACC3FA;}
ecke und links sollten eigentlich untereinander.
So langsam bekomme ich die Krise, nun stimmt die Seite im FF, aber der IE7 stellst sie bei mir noch immer versetzt dar.
Kann bitte noch mal jemand einen Blick darauf werfen und mir evtl. helfen den Grund zu finden warum dem so ist?
Hier noch mal der AT:
.ecke { border-style: solid; width: 0px; height: 0px; line-height: 20px; float:left;}
.linksoben {border-width: 60px 150px 150px 60px; border-color: #ffffff #ACC3FA #F89A2C #ffffff; }
.farbe {height: auto; background-color:#ACC3FA; color:#000066; font-size:20px; font-weight: bold; }
div#logo {text-align: left; padding: 40px; margin: 0; height:auto;}
.farbelinks {background-color: #FF0000; margin-top: 130px;width: 220px;}
div#links {float:left; }
#navlist
{
padding: 130px 1px 1px;
margin-left: 0;
font: 12px verdana, sans-serif;
background: #2BAB0D;
width: 210px;
color: #006; }
#navlist li
{
list-style: none;
margin: 0px;
border-top: 1px solid #060;
text-align: left;
white: 210px;
}
#navlist li a
{
display: block;
padding: 0.25em 0.5em 0.25em 0.5em;
background: #FBFBD6;
text-decoration: none;
text-align:center;
border-left: 1em solid #ACC3FA;
border-right: 1em solid #DE360F;
}
#navlist li a:link { color: #000; }
#navlist li a:visited { color: #006; }
#navlist li a:hover
{
border-left: 1em solid #060;
border-right: 1em solid #060;
color: #004500;
background: white;
}
kannst du BITTE mal ne testseite (URL) posten ...
die sources so im kopf durchzugehen dauert VIEL zu lange ;)
des weiteren sind attribute wie align="center" bei css nicht angebracht, das bringt nur chaos.
fang du mal bei 0 an.
bau du dir mal ein 3 spaltiges CSS div layout.
arbeite nur mit background-color, margin, width und float.
wichtig ist, dass dei flaot left/right container ÜBER dem im source stehen, der mittig sein soll.
mittig positionieren tust du den container garnichtm du gibst dem nur margin ;)
hier ein bsp:
HTML<br /><div class="left"><br /><!-- platzhalter wie ganz VIELE <br/> zum testen !--><br /></div><br /><div class="right"><br /><!-- platzhalter wie ganz VIELE <br/> zum testen !--><br /></div><br /><div class="main"><br /><!-- platzhalter wie ganz VIELE <br/> zum testen !--><br /></div><br /><div class="footer"></div><br />
CSS<br />.left{<br />width: 200px;<br />float:left;<br />background-color:#cc0000;<br />}<br /><br />.right{<br />width: 300px;<br />float:right;<br />background-color:#ccff00;<br />}<br /><br /><br />.main{<br />background-color:#cccccc;<br />/* containerbreite des linken + abstand von 10px*/<br />margin-left: 210px;<br />/* containerbreite des rechten + abstand von 10px*/<br />margin-right: 310px;<br />}<br /><br />/* um mal clear zu demonstrieren */<br />.footer{<br />clear:both;<br />width:100%;<br />height: 40px;<br />margin-top: 50px;<br />background-color: #ee99ee;<br /><br />}<br /><br />
solche layouts sind halt schon anspruchsvoller als tab layouts nur hast hier wesentliche vorteile mit der übersicht, barierefreiheit etc.
man muss tlw anderst denken und viel viel lernen ;)
Danke!
Ich habe schon mit css und 3 Spalten gearbeitet, das Problem hier ist die Ecke links in css und das Feld rechts daneben.
Das verursacht irgendwie Verwirrung.
Hier ist das Ganze mal im Netz, auch mit deinem QT von oben kommt die Seite ins Rutschen, wenn ich den geplanten Kopf einfüge.
Testseite
dein header...sry sowas hab ich noch nie gesehen xD
....wenn ich richtig hingucke....da nimmt man ne grafik und keine border trix, das ist alles andere als plattformunabhängig ;)
algin="...." vergisst du mal als attribut bei css layouts !
so solls aussehen oder ? ;)
3ColumnCSSLayout
It looks like you're new here. If you want to get involved, click one of these buttons!