zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Kniffliges Layout mit float

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.03.2006, 20:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.02.2006
Beiträge: 17
Roadrunnerle befindet sich auf einem aufstrebenden Ast
Standard Kniffliges Layout mit float

Hallo Zusammen,

ich möchte den gbanner und fuss zusammenlassen aber den Abstand von fuss zu info entfernen, so dass der gbanner neben info ist und zentriert unter dem Inhalt steht. Gibt es da eine Möglichkeit? Siehe Bilder ist_zustand.jpg und soll_zustand.jpg

Gruss Roadrunnerle


Code:
<!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" xml:lang="de" lang="de">
<head>
<title>new</title>



<style type="text/css">

#container
{
	background-color:#CCCC33;
	color:#000000;
	height:1%;
}

#navigation
{
	background-color:#99FF00;
	color:#000000;
	float:left;
	width:10em;
	height:300px;
}

#infobox
{
	background-color:#99FF00;
	color:#000000;
	float:right;
	width:165px;
	height:600px;
}

#inhalt
{
	background-color:#00FFFF;
	color:#000000;
	margin-left:11em;
	margin-right:170px;
	height:1%;
}

.box
{
	background-color:#9966FF;
	color:#000000;
	width:14em;
	float:left;	
}

#gbanner
{
	background-color:#FF00FF;
	color:#000000;
	margin:auto;
	width:470px;	
	clear:both;
}

#fusszeile
{
	background-color:#0000FF;
	color:#FFFFFF;
}


</style>
</head>

<body>
<div id="container">

	<div id="navigation">

menü1
menü1
menü1
menü1
menü1
menü1
menü1</p></div>
	<div id="infobox">info</div>
	
	<div id="inhalt"><h3>Hier kommt eine Überschrift</h3>
		

 und möglicherweise auch Inhalte.</p>
		<div class="box">

box
box
box
box
box
box</p></div>
		<div class="box">

box
box
box
box
box
box</p></div>
		<div class="box">

box
box
box
box
box
box</p></div>
		<div class="box">

box
box
box
box
box
box</p></div>
		<div class="box">

box
box
box
box
box
box</p></div>		
	</div>
		
	<div id="gbanner">gbanner</div>
	<div id="fusszeile">fuss</div>

</div>
</body>
</html>
Angehängte Grafiken
Dateityp: jpg soll_zustand.jpg (43,1 KB, 172x aufgerufen)
Dateityp: jpg ist_zustand.jpg (44,0 KB, 170x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.03.2006, 20:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.02.2006
Beiträge: 17
Roadrunnerle befindet sich auf einem aufstrebenden Ast
Standard

Nachtrag: Das Menü ist in der Endversion variabel und kann nach unten länger werden.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.03.2006, 10:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.02.2006
Beiträge: 17
Roadrunnerle befindet sich auf einem aufstrebenden Ast
Standard

Keine Antwort soll wohl heißen, das es net geht? Na gut.
Mit Zitat antworten
  #4 (permalink)  
Alt 14.03.2006, 10:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

Du bist ungeduldig...

Solange #gbanner nicht floatet wird es nicht neben #info angezeigt werden, sondern darunter. Blockelemente verhalten sich so.

Im Prinzip hast Du auch "nur" ein 3-Spalten-Layout. Schau mal in meine Sig, wie man das einfach umsetzen kann.
Mit Zitat antworten
  #5 (permalink)  
Alt 14.03.2006, 10:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.02.2006
Beiträge: 17
Roadrunnerle befindet sich auf einem aufstrebenden Ast
Standard

@mazzo

Danke für deine Antwort und sorry für meine Ungeduld. Ich schau mir mal deine Sig an.
Mein Problem war immer, dass wenn ich #gbanner floate, dass der dann nach oben abhaut und nicht an der Fusszeile dran kleben bleibt. Vielleicht finde ich etwas in deiner Sig.


Gruß Roadrunnerle.
Mit Zitat antworten
  #6 (permalink)  
Alt 14.03.2006, 11:08
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

Du denkst falschrum

Je nachdem wo Du floatest wird das Element dort aus dem Fluss genommen und links oder rechts "gefloatet". Der Rest verläuft dann drumherum. Ein clear hebt das wieder auf. Somit wird die hohe Spalte aus info über den schmalen footer hinausragen, wenn dieser floatet.

Evtl. benötigst Du eine Kombination mit "Faux columns" (guck mal damit in die Suche oder in die FAQ des XHTML-wiki, oben verlinkt) damit die Spalte "mitwächst" und das Layout geschlossen wirkt.
Mit Zitat antworten
  #7 (permalink)  
Alt 14.03.2006, 12:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.02.2006
Beiträge: 17
Roadrunnerle befindet sich auf einem aufstrebenden Ast
Standard

@mazzo

folgendes habe ich mal gemacht:
- mit dem clearfix erreiche ich, dass der die .box 'en im #inhalt bleiben
- mit #klammer + clearfix, dass der gbanner nicht daneben rutscht
- fusszeile ganz raus aus dem #container
- gbanner rein in den #inhalt

"Faux columns" habe ich so verstanden, dass das nur eine Täuschung ist, die floats aber ihre Höhe behalten und nicht ausgedehnt werden.

Firefox: immer noch Abstand zwischen info und fuss
IE: sieht schon ganz gut aus

Code:
<!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" xml:lang="de" lang="de">
<head>
<title>new</title>



<style type="text/css">

#container
{
	color:#000000;
	height:1%;
}

#navigation
{
	background-color:#99FF00;
	color:#000000;
	float:left;
	width:10em;
}

#infobox
{
	background-color:#99FF00;
	color:#000000;
	float:right;
	width:165px;
	height:600px;
}

#inhalt
{
	background-color:#00FFFF;
	color:#000000;
	margin-left:11em;
	margin-right:170px;
	height:1%;
}

.box
{
	background-color:#9966FF;
	color:#000000;
	width:13em;
	float:left;	
}

#gbanner
{
	background-color:#FF00FF;
	color:#000000;
	margin:auto;
	width:450px;	
}

#fusszeile
{
	background-color:#0000FF;
	color:#FFFFFF;
}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

</style>
</head>

<body>
<div id="container">

	<div id="navigation">

menü1
menü1
menü1
menü1
menü1
menü1
menü1</p></div>
	<div id="infobox">info</div>
	
	<div id="inhalt" class="clearfix" ><h3>Hier kommt eine Überschrift</h3>
		

 und möglicherweise auch Inhalte.</p>
		<div id="klammer" class="clearfix">	
			<div class="box">

box
box
box
box
box
box</p></div>
			<div class="box">

box
box
box
box
box
box</p></div>
			<div class="box">

box
box
box
box
box
box</p></div>
			<div class="box">

box
box
box
box
box
box</p></div>
			<div class="box">

box
box
box
box
box
box</p></div>		
			</div>
		<div id="gbanner">gbanner</div>
	</div>
</div>

<div id="fusszeile">fuss</div>

</body>
</html>
Angehängte Grafiken
Dateityp: jpg firefox_421.jpg (17,6 KB, 110x aufgerufen)
Dateityp: jpg ie_850.jpg (18,1 KB, 110x aufgerufen)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Verschiebungen bei größerem Bildschirm seelefant CSS 4 28.07.2014 16:43
CSS von Plugin beisst! expand CSS 0 28.09.2012 18:44
joomla template wrock CSS 2 06.04.2012 20:24
CSS - CMS - lange Menus Balken/BG oben? shinobi CSS 3 13.10.2011 22:12
Webseite für Smartphones Optimieren. Cybertronic CSS 8 25.08.2011 12:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:54 Uhr.