✔ komplex: Probleme mit Design

Status
Nicht offen für weitere Antworten.
C

caramba12321

blödefragensteller
Hallo Community.
Ich programmiere egrade ein Onlinegame und habe den kompletten PHP Code fertig.
Nun habe ich mir ein Design erstellt und da ich ja gleich modern bleiben will bau ich es auf CSS auf. Ich habe nur noch nicht alzuviel Erfahrung mit css-basierten Layouts gehabt aber nach schwierigen Anfängen klappte es doch ganz gut.

Nun habe ich ein Problem.
Wenn sich ein User einloggt , wird ein zusätzliches Menü geladen.
nun habe ich mit float:left; gesagt das sich der Content um dieses Menü legt.
Das Problem ist nur das der Foot sich auch noch mit darum legt.
Im Firefox habe ich nun eine mindesthöhe festgelegt, das klappt ja aber leider nur im Firefox und ist auch nicht wirklich professionell.
Ich hab echt alles ausprobiert und weiss nicht mehr weiter aber vllt hat ja einer von euch eine Idee.
Achja sollten da noch zusätzliche Fehler im Quelltext sein kann das gut sein, ist ja auch noch nicht fertig, bin aber für Anregungen immer gerne zu haben :) und der Quelltext sieht noch etwas gesprengt aus, da ich alles über PHP include und noch keine wirkliche Einrückung vorgenommen habe.

Quelltext der HTML datei:
HTML: 
<!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>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<meta http-equiv="Content-Language" content="de" />
		<meta name="author" content="S&ouml;ren Martius" />
		<meta name="Copyright" content="S&ouml;ren Martius" />
		<meta name="Keywords" content="Spacesoldiers, Onlinegame, kostenlos, Rendsburg, S&ouml;ren Martius, Community, neu, Genre" />
		<meta name="Description" content="Ein neu entwickeltes Onlinegame von Sören Martius" />
		<link rel="stylesheet" media="screen" href="media/css/screen01.css" />
		<meta name="MSSmartTagsPreventParsing" content="true" />
	</head>
	<body>
		<div id="container">
		<div id="minwidth">
		<div id="minwidthcontainer">
			<div id="header">
				<div id="logo1" class="header">	
					<div id="logo2"></div>
				</div>					
			</div>			<div id="navi">
				<div class="navi">
					<a href="index.php">Home</a>
																			
					<a href="?content=logout">Logout</a>
										<a href="?content=impressum">Impressum</a>
				</div>
			</div>			<div id="ingamenavi">
				<div class="ingamenavi">
				ingamenavi
				</div>
			</div>
			<div id="content">17carambahallo  du pansen :)<br />
Sessionid: 		</div>
		<div id="foot">
			<div class="copyright">&copy; by S&ouml;ren Martius	</div>
		</div>
		</div>
		</div>
		</div>
	</body>
</html>


Quelltext der CSS-Datei:
HTML: 
body {
    background: #c0c0c0;
    font-family: Verdana, Arial;
    font-size: 11px;
    margin: 0px;
}


#container{
    position:absolute;
    margin: 0px 0px 0px 0px;
    width:100%;
    
}
* html #minwidth {
    border:0px;    
}

* html #minwidthcontainer {
    margin:0px;
    position:relative;
}

    /*        HEADER         */
.header{
    height:128px;
}

#header{
    background: url(../design/headerfill.gif) repeat-x;
}
#logo1{
    
    background: url(../design/logo1.gif) no-repeat;
    height:128px;
}

#logo2{
    position: relative;
    background: url(../design/logo2.gif) no-repeat;
    height:128px;
    width:200px;
    right: -400px;
}

    /*        NAVIGATION    OBEN    */
#navi{
    position: relative;
    height:44px;
    background: url(../design/navifill.gif) repeat-x;
}

.navi{
    position:relative;
    top:14px;
    padding:5px;
}
    /*        INGAMENAVI        */
#ingamenavi{
    background: url(../design/gamenavifill.gif) repeat-y;
    height: 200px;
    width: 183px;
    float: left;
    
}

.ingamenavi{
}
    /*        CONTENT        */
#content{
    margin:0px;
    padding:5px;
    min-height:300px;
}    

    /*        FOOT        */
#foot{
    position: relative;
    bottom:1px;
    height: 39px;
    background: url(../design/footfill.gif) repeat-x;
}

    /*        ERRORS        */
.normal_error span{
    font-size: 9px;
    color: red;
}

    /*        AGREES        */
.normal_agree span{
    font-size: 9px;
    color: green;
}

    /*        Misc        */
.copyright{
    position:relative;
    top:11px;
    text-align:center;
    height:13px;
}
 
Hi,

versuch doch mal ob es klappt wenn du folgendes in der ID foot notierst.

clear:both;

Mit clear ist es möglich einen Umfluss abzubrechen und die Fortsetzung unterhalb des umflossenen Elements/Bereichs zu erzwingen.

Mit clear:both wird auf jeden Fall die Fortsetzung unterhalb erzwungen !


Weitere Angaben:
left -> Erzwingt die Fortsetzung unterhalb bei float:left
right -> Erzwingt die Fortsetzung unterhalb bei float:right
none -> Erzwingt keine Fortsetzung unterhalb (Default)

Hoffe das hilft dir weiter

Gruß
Andreas
 
Mit folgendem CSS wird der Footer unter dem Menü und Content angeordnet:

Code: 
#content{
    margin:0px;
    padding:5px;
    /*min-height:300px;*/ /* auskommentiert = deaktiviert */
}

    /*        FOOT        */
#foot{
    position: relative;
    bottom:1px;
    height: 39px;
    background: url(../design/footfill.gif) repeat-x;
    clear: left;
}
 
Herrlich, funktioniert einwandfrei.
Danke wieder was dazugelernt, ich merke auch das css um einiges genialer als blinde tabellen ist :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück