Problem med float

pakmannenMedlem sedan dec. 2002227 inlägg

Frågan13 sep. 2005 19:43#1

Hej!

Okej, ska se om jag kan förklara mitt problem.. Först och främst, jag försöker lägga in detta: SlidingDoors på en sida (Koden postad längre ner). Jag har tidigare använt mig av koden, men då uppstod inte detta problem.

Problemet:
Koden ser ungefär ut så här:
<div id="toppen">
<div id="header"> (list-apart)
<div id="texten">

Om ni kollar in list-apart koden så märker ni att #header har en float:left. Detta för att kunna placera elementen inuti #header rätt.

Grejen är att mitt element som ligger under #header, alltså #texten lägger sig till höger om #header, även om #header har width:100%. Resultatet blir alltså en lång scrollbar nertill, plus att alltså hela sidan hamnar utanför skärmen (till höger). Jag lyckades få det att funka på något sätt genom att lägga till ett nytt element #space mellan #header och #texten och sätta det till en viss höjd (50px).

Jag noterar då att elementet börjar på samma ställe som #header men lägger sig bakom. Detta är ju naturligt eftersom "float" används. Problemet är att IE inte verkar köra så utan den startar #space efter #header och då blir ju mellanrummet mellan #header och #texten olika på IE/Mozilla. Plus att hela den här #space grejen känns ganska dum. Man borde kunna fixa utan den känns det som.

Jag förstår mig fortfarande inte på floats, verkar som om de beter sig olika hela tiden.. :) Hoppas någon vet vad jag yrar om. Slutligen, koden:

html

<body>
	<div id="wrapper">
		<div id="displayWindow">			
			<img src="images/dspWinDummy.jpg"/>
		</div>		
		<div id="navMenu">
			<ul>
				<li><a href="#">List #1</a></li>
				<li id="current"><a href="#">List #2</a></li>
				<li><a href="#">List #3</a></li>				
			</ul>
		</div>
		<div id="menuSpacer"></div>
		<div id="textContainer">
			Bla bla bla
		</div>
	</div>
</body>

css

html,body {
	margin:10px;
	background-image:url(../images/bgBody.jpg);
	font-family:verdana;
	font-size:10px;
	color:#000;
}

#wrapper {
	position:relative;
	margin:auto;
	width:750px;
	height:auto;
	padding-top:3px;
	padding-bottom:20px;
	background-color:#fff;
}

#displayWindow {
	position:relative;
	width:744px;
	height:310px;
	top:0px;
	margin:auto;	
	border:0px solid #CFD9CF;	
}

#menuSpacer {
	/** Fixen för float-grejen **/
	background-color:#fff;
	height:35px;
}

#textContainer {
	position:relative;
	top:10px;
	width:700px;
	margin:auto;
}

/** List-Apart kod **/
#navMenu {
	float:left;
	width:100%;
	background:#DAE0D2 url("../images/menuBg.gif") repeat-x bottom;
}

#navMenu ul {
	margin:0;
	padding:3px 3px 0;
	list-style:none;
}

#navMenu li {
	float:left;
	background:url("../images/menuLeft.gif") no-repeat left top;
	margin:0;
	padding:0 0 0 9px;
}

#navMenu a {
	float:left;
	display:block;
	background:url("../images/menuRight.gif") no-repeat right top;
	padding:5px 15px 4px 6px;
	text-decoration:none;
	font-weight:bold;
	color:#406644;
}

/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#navMenu a {float:none;}
/* End IE5-Mac hack */
#navMenu a:hover {color:#333;}

#navMenu #current {
	background-image:url("../images/menuLeftOn.gif");
}

#navMenu #current a {
	background-image:url("../images/menuRightOn.gif");
	color:#333;
	padding-bottom:5px;
}

InsiderMedlem sedan jan. 2000978 inlägg

13 sep. 2005 19:56#2

pakmannen skrev:

Grejen är att mitt element som ligger under #header, alltså #texten lägger sig till höger om #header, även om #header har width:100%.

Det finns ett vedertaget sätt att lösa det där, utan att använda den där "fixen" du la in, nämligen med egenskapen clear.
Att bredden är satt till 100% på #header hjälper inte. Ett flytande element förlängs bara tills det omsluter sina flytande barn. D.v.s. till menyn tar slut.
Ta bort #menuSpacer-elementet ur din HTML-kod och stoppa in:

#textContainer {clear:left;}

i din CSS.

pakmannenMedlem sedan dec. 2002227 inlägg

13 sep. 2005 20:00#3

Ach! Jag borde insett att det fanns något sådant till css också! Använde ju <br> 's "clear" attribut på den gamla goda tiden. :)

Tackar så mycket!