• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit Floats

Status
Für weitere Antworten geschlossen.
V

VirusX

Neues Mitglied
Hey,

Ich bin ja noch nicht der Begabteste in Sachen HTML und CSS und ich habe jetzt mal versucht, ein Design anzupassen. Bis jetzt sieht alles sehr gut aus ... bis auf die Positionierung der linken Navileiste, des Contents und der rechten Navileiste.

Also dem linken div habe ich float: left; gegeben und der rechten float: right; .

Naja und so sieht es im Moment aus.



Und hier noch der Code:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Anpassung_01</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Main">
  <div id="Header"></div>
    <div id="Ticker"></div>
    	<div id="Navi_links">
        	<ul>
           	  <li id="Menu1"><a href=""></a></li>
                <li id="Menu2"><a href=""></a></li>
                <li id="Menu3"><a href=""></a></li>
                <li id="Menu4"><a href=""></a></li>
                <li id="Menu5"><a href=""></a></li>
                <li id="Menu6"><a href=""></a></li>
                <li id="Menu7"><a href=""></a></li>
                <li id="Menu8"><a href=""></a></li>
                <li id="Menu9"><a href=""></a></li>
                <li id="Menu10"><a href=""></a></li>
                <li id="Menu11"><a href=""></a></li>
                <li id="Menu12"><a href=""></a></li>
                <li id="Menu13"><a href=""></a></li>
                <li id="Menu14"><a href=""></a></li>
                <li id="Menu15"><a href=""></a></li>
                <li id="Menu16"><a href=""></a></li>
                <li id="Menu17"><a href=""></a></li>
                <li id="Menu18"><a href=""></a></li>
                <li id="Menu19"><a href=""></a></li>
                <li id="Menu20"><a href=""></a></li>
                <li id="Menu21"><a href=""></a></li>
                <li id="Menu22"><a href=""></a></li>
             </ul>
  </div>
        <div id="Navi_rechts">
        	<ul>
            	<li id="Menu23"><a href=""></a></li>
                <li id="Menu24"><a href=""></a></li>
                <li id="Menu25"><a href=""></a></li>
                <li id="Menu26"><a href=""></a></li>
                <li id="Menu27"><a href=""></a></li>
            </ul>
        </div>
        <div id="Content">
        	<ul>
            	<li id="Menu28"><a href=""></a></li>
                <li id="Menu29"><a href=""></a></li>
                <li id="Menu30"><a href=""></a></li>
                <li id="Menu31"><a href=""></a></li>
            
            
            </ul>
        </div>
    




</div>
</body>
</html>

und

Code: 
@charset "utf-8";
/* CSS Document */

html, ul, li {

	margin: 0;
	padding: 0;
	border: 0;
}


body {

	background-color: #333333;
}

li {
	
	list-style: none;
}

#Main {
	
	width: 900px;
	height: auto;
	margin: 0;
	padding: 0;
}

#Header {
	
	background-image: url(Bilder/thiel_bot_01.jpg);
	width: 900px;
	height: 160px;
	display: block;
}

#Ticker {

	background-image: url(Bilder/thiel_bot_02.jpg);
	width: 900px;
	height: 27px;
	display: block;
	margin: 0;
}


/*Start Navigations-Leiste links*/

#Navi-links {
	
	background-image: url(Bilder/thiel_bot_19.jpg);
	background-repeat: repeat-y;
	float: left;
	width: 147px;
	height: auto;
	margin: 0;
}

#Menu1 {
	
	background-image: url(Bilder/thiel_bot_03.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}

#Menu2 {
	
	background-image: url(Bilder/thiel_bot_08.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}

#Menu3 {
	
	background-image: url(Bilder/thiel_bot_10.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}

#Menu4 {
	
	background-image: url(Bilder/thiel_bot_11.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}

#Menu5 {
	
	background-image: url(Bilder/thiel_bot_13.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}

#Menu6 {
	
	background-image: url(Bilder/thiel_bot_14.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}

#Menu7 {
	
	background-image: url(Bilder/thiel_bot_17.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}

#Menu8 {
	
	background-image: url(Bilder/thiel_bot_18.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}

#Menu9 {
	
	background-image: url(Bilder/thiel_bot_20.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}

#Menu10 {
	
	background-image: url(Bilder/thiel_bot_21.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}

#Menu11 {
	
	background-image: url(Bilder/thiel_bot_23.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}

#Menu12 {
	
	background-image: url(Bilder/thiel_bot_24.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}

#Menu13 {
	
	background-image: url(Bilder/thiel_bot_27.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}

#Menu14 {
	
	background-image: url(Bilder/thiel_bot_29.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}

#Menu15 {
	
	background-image: url(Bilder/thiel_bot_30.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}

#Menu16 {
	
	background-image: url(Bilder/thiel_bot_31.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}

#Menu17 {
	
	background-image: url(Bilder/thiel_bot_32.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}

#Menu18 {
	
	background-image: url(Bilder/thiel_bot_33.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}


#Menu19 {
	
	background-image: url(Bilder/thiel_bot_34.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}

#Menu20 {
	
	background-image: url(Bilder/thiel_bot_35.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}

#Menu21 {
	
	background-image: url(Bilder/thiel_bot_36.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}

#Menu22 {
	
	background-image: url(Bilder/thiel_bot_37.jpg);
	width: 147px;
	height: 30px;
	display: block;
	border: 0px;
	margin: 0 0 0 0;
}


/*Ende Navigations-Leiste links*/

/*-----------------------------------------------------------------------------------------------*/

/*Start Navigations-Leiste rechts*/

#Navi_rechts {

	background-image: url(Bilder/thiel_bot_19.jpg);
	background-repeat: repeat-y;
	float: right;
	width: 150px;
	height: auto;
	margin: 0;
}

#Menu23 {

	background-image: url(Bilder/thiel_bot_05.jpg);
	width: 150px;
	height: 34px;
	display: block;
}

#Menu24 {

	background-image: url(Bilder/thiel_bot_07.jpg);
	width: 150px;
	height: 76px;
	display: block;
}

#Menu25 {

	background-image: url(Bilder/thiel_bot_16.jpg);
	width: 150px;
	height: 28px;
	display: block;
}

#Menu26 {

	background-image: url(Bilder/thiel_bot_19.jpg);
	width: 150px;
	height: 72px;
	display: block;
}

#Menu27 {

	background-image: url(Bilder/thiel_bot_26.jpg);
	width: 150px;
	height: 266px;
	display: block;
}

/*Ende Navigations-Leiste rechts*/

#Content {

	width: 603px;
	height: auto;
}

#Menu28 {

	background-image: url(Bilder/thiel_bot_04.jpg);
	width: 603px;
	height: 54px;
	display: block;
}

#Menu29 {

	background-image: url(Bilder/thiel_bot_09.jpg);
	width: 603px;
	height: 31px;
	display: block;
}

#Menu30 {

	background-image: url(Bilder/thiel_bot_12.jpg);
	width: 603px;
	height: 97px;
	display: block;
}

#Menu31 {

	background-image: url(Bilder/thiel_bot_22.jpg);
	width: 603px;
	height: 49px;
	display: block;
}

(Edit: Wow gleich bei dem ersten Versuch ist kein einziger Fehler im Quelltext^^)
 
Zuletzt bearbeitet:
Kein Fehler und keine Lösung für Dein Problem, aber warum packst Du einzelne Elemente (Deine Listen) nochmal in ein Block-Element (das div)?
 
Wieso gibst Du dann nicht der Liste den Hintergrund? Dafür brauchst Du doch kein extra Element. Die Liste selbst hat doch noch keinen Hintergrund.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben