Spalten in Div-Layout

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
gamesfun

gamesfun hat kostenlosen Webspace.

18:01, 2.7.2009
Hi
wie bekomme ich es ohne position:absolute hin, dass bei einem 3-Spaltigen Div-Layout die (optisch) mittlere Spalte im Quellcode vor den zwei Spalten für links und rechts steht ?
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
cookies

cookies hat kostenlosen Webspace.

18:27, 2.7.2009
Ohne position: absolute; geht das nicht!

Denk ich jedenfalls, bin mir zeimlich sicher!

Beitrag zuletzt geändert: 2.7.2009 18:27:58 von cookies
fatfreddy

fatfreddy hat kostenlosen Webspace.

18:55, 2.7.2009
Doch, das geht.

Mitte und Rechts in einen zusätzlichen Container packen

Mitte auf float:left, Rechts auf float:right setzen
Den umfassenden Container auf float:right.
Danach die Linke Spalte auf float:left;

FF

Autor dieses Themas

19:37, 3.7.2009

ich glaub ich habs hinbekommen, Danke !!!

hier mein Code (als grobes Layout-Gerüst)

<!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" dir="ltr" lang="de-DE" xml:lang="en">

<head>

<title>Homepage-Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--

body { 
margin: 0px;
padding: 0px;
color: #000000;
background: #8A8A8A; 
}

h1 { font-size: 28px; } 
h2 { font-size: 23px; } 
h3 { font-size: 21px; } 
h4 { font-size: 18px; } 
h5, h6 {  font-size: 18px; } 



#seite { 
margin: 0px auto;
padding: 0px;
background: #AAAAAA; 
text-align: center;
}


#header { 
width: 910px;
margin: 0px auto;
padding: 10px 4px 10px 4px;
background: #AA3366; 
text-align: center;
}


#rahmen_aussen { 
clear: both;
width: 910px;
margin: 0px auto;
padding: 10px 0px 10px 0px;
}


#rahmen_innen { 
float: right; 
width: 710px;
margin: 0px auto;
padding: 0px;
}


#spalte_links { 
float: left; 
width: 190px;
margin: 0px auto;
padding: 0px;
background: #CCFFCC; 
text-align: center;
}


#spalte_mitte { 
float: left; 
width: 510px;
margin: 0px auto;
padding: 8px 12px 8px 12px;
background: #FFFFFF;
text-align: left;
}


#spalte_rechts { 
float: right; 
width: 190px;
margin: 0px auto;
padding: 0px;
background: #FFCCFF;
text-align: center;
}


#footer { 
width: 890px;
margin: 0px auto;
padding: 10px;
/* background: #CCCCFF; */ 
text-align: center;
}


.clearall { clear:both; } 


.eintrag { 
margin: 0px;
padding: 8px 6px 8px 8px;
background: #CCCCCC; 
text-align: justify;
}


a:link     { color: #003366;  text-decoration: none; }
a:visited  { color: #003366;  text-decoration: none; }
a:active   { color: #003366;  text-decoration: none; }
a:hover    { color: #006600;  text-decoration: underline; }


-->
</style>


</head>


<body>

<div id="seite">

<div id="header">
<br />
<br /> __________HEADER_________ <br /> 
<br />
</div>

<div id="rahmen_aussen">
<div id="rahmen_innen">


<div id="spalte_mitte">

<h1>&Uuml;berschrift h1</h1>
<p class="eintrag">
Test blabla test Testblabla Test blabla test Testblabla Test 
blabla test Testblabla Test blabla test Testblabla Test blabla 
test Testblabla Test blabla test Testblabla Test blabla test 
Testblabla Test blabla test Testblabla Test blabla test Testblabla 
</p>

<hr /> 

<h2>&Uuml;berschrift h2</h2>
<p class="eintrag">
Test blabla test Testblabla Test blabla test Testblabla Test 
blabla test Testblabla Test blabla test Testblabla Test blabla 
test Testblabla Test blabla test Testblabla Test blabla test 
Testblabla Test blabla test Testblabla Test blabla test Testblabla 
</p>


<h3>&Uuml;berschrift h3</h3>
<h4>&Uuml;berschrift h4</h4>
<h5>&Uuml;berschrift h5</h5>


<br />
<br />
<br />

</div>


<div id="spalte_rechts">
<br />
<br /> ___SPALTE_RECHTS___ <br /> 
<br />
</div>


</div>
<!-- Ende: rahmen_innen -->



<div id="spalte_links">
<br />
<br /> ___SPALTE_LINKS___ <br /> 
<br />
</div>


</div>
<!-- Ende: rahmen_aussen -->



<div id="footer">
<br />
<br /> __________FOOTER__________ <br /> 
<br />
<br />
</div>


</div>
<!-- Ende: seite -->

</body>
</html>

... so in etwa .... :wink:

... aber schön wäre natürlich auch die linke spalte im Quellcode vor der rechten Spalte
dazu muss man bestimm wieder anderen Ansatz machen, wie es verschachtelt wird

:)

fatfreddy

fatfreddy hat kostenlosen Webspace.

21:08, 3.7.2009
So sah mein entwurf aus:*click*

Linke Spalte auf 2 müßte auch gehen (ungetestet):

Mitte und Links in einen zusätzlichen Container packen

Mitte auf float:right, Links auf float:left setzen
Den umfassenden Container auf float:left.
Danach die Rechte Spalte auf float:right;

FF
bluemax

bluemax hat kostenlosen Webspace.

1:25, 20.7.2009
Hallo!
Eine Anmerkung sei mir erlaubt: wird der CSS-Code bei den beschriebenen, ohne Frage eindrucksvollen Konstruktionen, nicht deutlich unübersichtlicher - will sagen: ist es die erreichte Verschiebung im Quelltext wert, diese Verschachtelungen vorzunehmen? Der Code wird dadurch m.E. nicht unbedingt übersichtlicher und damit auch nicht unbedingt wartbarer, oder? Und letzteres sollte auch ein Designkriterium bleiben.....
Viele Grüße mitten in der Nacht,
BlueMax
fatfreddy

fatfreddy hat kostenlosen Webspace.

2:47, 20.7.2009
Keine Frage, zur Übersichtlichkeit trägt es nicht bei. Was gamesfun damit bezwecken will, weiß ich auch nicht. Ich vermute aber, daß er auf eine alte Diskussion im Web gestoßen ist, nach der Google angeblich den Inhalt einer Webseite besser bewertet, wenn dieser am Anfang des Quelltextes steht. Ob diese Annahme berechtigt ist, ist fraglich, war aber auch nicht Thema. ;)

FF
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city