CSS Floating Umsetzten

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

Autor dieses Themas

22:19, 24.6.2010

Hallo Leute,

dies wendet sich an alle die sich schon mal mit CSS und floating beschäftigt haben:

Kann man so eine Seite umsetzen oder is dies einfacher bzw besser zu designen?
A, B, C haben eine variablen Inhalt. und beinhaltet natürlich weitere divs ect. es soll halt nie zu anzeige problemen kommen...

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float extrem</title>

<style type="text/css">
<!--
#maincontainer
{
	padding:0;
	margin: 0em auto;
	width: 300px;
}
#logocontainerleft
{
	float:left;	
	width: 100px;
	background-color:#C66;	
}
#containerright
{
	margin-left:100px;
}
#headernavi
{
	background-color:#CF6;
	padding:5px;
	text-align:left;
}
#footercontainer
{
	clear:both;	
	background-color:#9C6;	
}
#homeleft
{
	float:left;	
	width: 100px;
	background-color:#C6F;
}
#homeright
{
	margin-left:100px;
	background-color:#CFF;
}
#footerhome
{
	clear:both;	
	background-color:#FC6;	
}
-->
</style> 

</head>
<body>

<div id="maincontainer">

	<div id ="logocontainerleft">
    	A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
        A A A A A A A A A A A A A A A A A A A 
    </div>
    <div id ="containerright">
        <div id="headernavi">
        	header header header header header header header header header     
        </div>
        <div id="homeleft">
        	B B B B B B B B B B B B B B B B B B B B B 
            B B B B B B B B B B B B B B B B B B B B B 
            B B B B B B B B B B B B B B B B B B B B B 
            B B B B B B B B B B B B B B B B B B B B B 
            B B B B B B B B B B B B B B B B B B B B B 
            B B B B B B B B B B B B B B B B B B B B B 
        </div>
        <div id="homeright">
        	C C C C C C C C C C C C C C C C C C C C C C C 
       		C C C C C C C C C C C C C C C C C C C C C C C 
        	C C C C C C C C C C C C C C C C C C C C C C C 
        	C C C C C C C C C C C C C C C C C C C C C C C 
        	C C C 
        </div>
        <div id="footerhome">
        footer home footer home footer home footer home 
        </div>                
  </div>
  	<div id ="footercontainer">
    	footer footer footer fo oter footer footer footer 
        footer footer footer footer footer footer footer 
        footer footer footer 
    </div>
    
</div>

</body>
</html>

Code funktioniert meiner Ansicht nach, aber geht das auch besser?? thx

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

sneppa hat kostenlosen Webspace.

22:26, 24.6.2010
Mit Tabellen ;)

Ach was...
Sieht nicht schlecht aus, würde ich nicht anders machen.
Sieht so momentan zwar nach viel CSS aus, aber das wäre ja in richtiger Größe und mit viel Inhalt wieder hinfällig.

LG sneppa
fatfreddy

fatfreddy hat kostenlosen Webspace.

1:55, 25.6.2010
Hmmm!? Wenn das Ergebnis deiner Bemühungen wirklich so *click* aussehen soll, kann man es so machen.

Wenn Du aber ein Layout in der Form

HEADER
A | B | C
FOOTER

erreichen möchtest, solltest Du deine HTML-Gerüst und das CSS überarbeiten.
Einen Ansatz dafür findest Du bei CSS4You.

Eine perfekte Umsetzung, mit Header, Footer und gleichlang erscheinenden Spalten, demonstriert Mathew Levine bei Alistapart als den Holy Grail.

FF

Beitrag zuletzt geändert: 25.6.2010 2:04:06 von fatfreddy
Autor dieses Themas
finch

finch hat kostenlosen Webspace.

8:18, 25.6.2010
Ja so soll es aussehen. -> verschachtelte floating blöcke

Also kann man ohne Bedenken 2 x hintereinder clear:both verwenden?
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