webForumDet fria alternativet
Logga in / Bli medlem

float?

HTML & CSS

20 svar · 1 278 visningar · startad av nilleonline

nilleonlineMedlem sedan sep. 2006119 inlägg
Frågan#1

Jag har lite problem att placera 2 div:ar.
html-koden ser ut såhär:

<div id="menu"></div>
<div id="content"></div>

Jag vill att content ska ligga uppe i vänstra hörnet, och menu ligga till höger om den kant i kant. Om jag sätter float:right på menu hamnar content som den ska och menu brevid fast så långt åt höger som det går. För att få de att ligga kant i kant skulle jag kunna lägga en div runt om båda som har den totala bredden av de 2 divarna. Men problemet är att bredden på content är angett i % och menu i pixlar.

Hur löser jag det?

kaxigts avatarkaxigtMedlem sedan okt. 2004636 inlägg
#2

Lite svårt att se utan en länk...

ejickMedlem sedan mars 2001895 inlägg
#3

Du sätter float:left på båda

nilleonlineMedlem sedan sep. 2006119 inlägg
#4

ejick skrev:

Du sätter float:left på båda

Nej då kommer menyn till vänster om content. Men jag vill att menu ska ligga till höger om content kant i kant.

zcorpanMedlem sedan dec. 20042 245 inlägg
#5
<div id="wrap">
 <div id="menu"></div>
 <div id="content"></div>
</div>

#wrap { float:left; }
#menu, #content { float:right; }
mcsMedlem sedan okt. 20076 inlägg
#6

Fungerar det inte om du bara :

<div id="content">Content</div>
<div id="menu"> menu</div>

sen sätter man båda på float:left ?

nilleonlineMedlem sedan sep. 2006119 inlägg
#7

zcorpan skrev:

<div id="wrap">
 <div id="menu"></div>
 <div id="content"></div>
</div>

#wrap { float:left; }
#menu, #content { float:right; }

Det fungerade inte. menu hamnade fortfarande över content fast så långt till häger som det gick och content förlorade sin width på 70% och la sig 100%.

Här är koden:
http://www.nilleonline.com/example.htm

Danne Vs avatarDanne VMedlem sedan aug. 20068 090 inlägg
#8

Testa detta. Tog bort dom där konstiga extradivvarna så länge. Detta är grunden bara asså.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>example</title>

	
	<style type="text/css" media="screen,print">
	* {padding:0px; margin:0px}
	html,body {
		color:#000;
		background:#3C3C3C;
	}
	body {
	font:76%/145% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
	}
	code {
		font-family:Monaco, Courier, "Courier New", monospace;
	}

	#menu {
	width:190px;
	height: 300px;
	float: right;
	background: #FF9900;
	}
	
	/* CSS for the box starts here */
	.box {
	padding: 0;
	background:#FFFF00 url(borders.gif) repeat-y 100% 0;
	}
	.bi {
		padding: 0 0 0 14px;
		background:#fff url(borders.gif) 0 0 repeat-y;
	}
	.bt {
		height: 28px;
		margin:0 -13px;
		background:url(box.gif) 100% 0 no-repeat;
	}
	.bt div {
		width:22px;
		height:28px;
		background:url(box.gif) 0 0 no-repeat;
	}
	.bb {
		height:20px;
		margin:0 -13px;
		background:url(box.gif) 100% 100% no-repeat;
	}

	.bb div {
		width: 22px;
		height: 20px;
		background:url(box.gif) 0 100% no-repeat;
	}

	.box h1 {
		margin:0;
		padding:0.3em 10px;
		font:bold 1.2em/1 Arial, Helvetica, sans-serif;
	}
	.box p, .box ul {
	margin:0;
	padding: 4px 10px;
	}
	.box li {
		margin:0 0 0 2em;
		padding:0;
	}

	</style>
</head>

<body>
<div id="wrap">
<div id="menu">MENY</div>
<div class="box">
	<div class="bi">

<h1>Flytande layout</h1>

</div>
</div>

</div>
</body></html>
zcorpanMedlem sedan dec. 20042 245 inlägg
#9

Om du inte kommer ha någon footer, eller om du vet att menyn alltid är kortare än content, så kan du använda position:absolute på menyn och inte använda floats alls.

nilleonlineMedlem sedan sep. 2006119 inlägg
#10

Danne V skrev:

Testa detta. Tog bort dom där konstiga extradivvarna så länge. Detta är grunden bara asså.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>example</title>


	
	<style type="text/css" media="screen,print">
	* {padding:0px; margin:0px}
	html,body {
		color:#000;
		background:#3C3C3C;
	}
	body {
	font:76%/145% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
	}
	code {
		font-family:Monaco, Courier, "Courier New", monospace;
	}

	#menu {
	width:190px;
	height: 300px;
	float: right;
	background: #FF9900;
	}
	
	/* CSS for the box starts here */
	.box {
	padding: 0;
	background:#FFFF00 url(borders.gif) repeat-y 100% 0;
	}
	.bi {
		padding: 0 0 0 14px;
		background:#fff url(borders.gif) 0 0 repeat-y;
	}
	.bt {
		height: 28px;
		margin:0 -13px;
		background:url(box.gif) 100% 0 no-repeat;
	}
	.bt div {
		width:22px;
		height:28px;
		background:url(box.gif) 0 0 no-repeat;
	}
	.bb {
		height:20px;
		margin:0 -13px;
		background:url(box.gif) 100% 100% no-repeat;
	}

	.bb div {
		width: 22px;
		height: 20px;
		background:url(box.gif) 0 100% no-repeat;
	}





	.box h1 {
		margin:0;
		padding:0.3em 10px;
		font:bold 1.2em/1 Arial, Helvetica, sans-serif;
	}
	.box p, .box ul {
	margin:0;
	padding: 4px 10px;
	}
	.box li {
		margin:0 0 0 2em;
		padding:0;
	}

	</style>
</head>

<body>
<div id="wrap">
<div id="menu">MENY</div>
<div class="box">
	<div class="bi">



<h1>Flytande layout</h1>


</div>
</div>

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

Jag fattar inte riktigt vad du gjort? satt en float:right på menu som gör att den kommer för långt åt höger. och tagit bort width: 70% på boxen som ska vara där eftersom att boxen inte ska sträcka sig ut till högra kanten där menu ligger om man sätter float:right på den. Extradivarna ska jag ha kvar med samma egenskaper då de fixar runda hörn och border.

zcorpan skrev:

Om du inte kommer ha någon footer, eller om du vet att menyn alltid är kortare än content, så kan du använda position:absolute på menyn och inte använda floats alls.

Jag kommer att ha footer och menyn kommer ibland att vara högre än content. Jag testade med: position:absolute; top:0; på content boxen och position:absolute; left: 70%; på menu. Men det fungerade inte korrekt när man storleksförändrade fönstret.

Om ni undrar hur jag vill att det ska se ut, så kolla länken i min signatur. Jag vill göra precis samma layout men att bredden ska vara flytande på content.

Danne Vs avatarDanne VMedlem sedan aug. 20068 090 inlägg
#11

nilleonline skrev:

Jag fattar inte riktigt vad du gjort? satt en float:right på menu som gör att den kommer för långt åt höger. och tagit bort width: 70% på boxen som ska vara där eftersom att boxen inte ska sträcka sig ut till högra kanten där menu ligger om man sätter float:right på den. Extradivarna ska jag ha kvar med samma egenskaper då de fixar runda hörn och border.

Jag kommer att ha footer och menyn kommer ibland att vara högre än content. Jag testade med: position:absolute; top:0; på content boxen och position:absolute; left: 70%; på menu. Men det fungerade inte korrekt när man storleksförändrade fönstret.

Om ni undrar hur jag vill att det ska se ut, så kolla länken i min signatur. Jag vill göra precis samma layout men att bredden ska vara flytande på content.

Testa lägg menu inuti den där content-divven då. Inte separat.

Men jag tror man har svårt att förstå vad det är du försöker göra.
Kan du inte göra en bild i PS eller nåt som visar EXAKT vad det är du försöker åstadkomma?

EDIT: Kollade din sajt (i din sig). Jag vänder på frågan och undrar varför du ska ha 70% på content. Det behövs inte alls. Den borde ju inte ha någon bredd definerad alls utan sträcka sig fullt ut, till kanten på menu, dvs som jag gjorde. Sen får du väl justera avståndet mellan content och menu med margin. 70% bredd på content ställer ju bara till det för dig.

tantenMedlem sedan nov. 20051 596 inlägg
#12

Eftersom alla extradivvarna är placering av runda hörn, så är det zcorpans förslag som fungerar. Eller så får du tänka om bakgrunden.

nilleonlineMedlem sedan sep. 2006119 inlägg
#13

Danne V skrev:

Testa lägg menu inuti den där content-divven då. Inte separat.

Men jag tror man har svårt att förstå vad det är du försöker göra.
Kan du inte göra en bild i PS eller nåt som visar EXAKT vad det är du försöker åstadkomma?

EDIT: Kollade din sajt (i din sig). Jag vänder på frågan och undrar varför du ska ha 70% på content. Det behövs inte alls. Den borde ju inte ha någon bredd definerad alls utan sträcka sig fullt ut, till kanten på menu, dvs som jag gjorde. Sen får du väl justera avståndet mellan content och menu med margin. 70% bredd på content ställer ju bara till det för dig.

Men om menyn ligger så långt åt höger som det går kommer det ju ändå trassla när jag lägger till max-width då det blir för stort avstånd då också. Och sen vill jag ha 70% på content. Det måste ju gå att lösa på något sätt. Tycker det är jävligt skumt att det inte går att sätta position:absolute; left: 70%; edl. på menyn så den hamnar rätt.

nilleonlineMedlem sedan sep. 2006119 inlägg
#14

tanten skrev:

Eftersom alla extradivvarna är placering av runda hörn, så är det zcorpans förslag som fungerar. Eller så får du tänka om bakgrunden.

Jo men hur skulle jag då använda position:absolute da?

tantenMedlem sedan nov. 20051 596 inlägg
#15

så här kanske

#menu {
		width:190px;
		height: 300px;
		background-color: #fff;
		 position: absolute;
		 left: 71%;
	}
	
	/* CSS for the box starts here */
	.box {
		padding: 0 -4px 0 0;
		background:#fff url(borders.gif) 100% 0 repeat-y;
		width: 70%;
		float: left;
	}
nilleonlineMedlem sedan sep. 2006119 inlägg
#16

tanten skrev:

så här kanske

#menu {
		width:190px;
		height: 300px;
		background-color: #fff;
		 position: absolute;
		 left: 71%;
	}
	
	/* CSS for the box starts here */
	.box {
		padding: 0 -4px 0 0;
		background:#fff url(borders.gif) 100% 0 repeat-y;
		width: 70%;
		float: left;
	}

Det fungerar hyffsat. Men broblemet med det är att jag vill att menyn och boxen alltid ska ha tex 10px mellanrumm mellan varandra. i 800x600 blir det knappt något mellanrumm men i hägre upplösningar blir det större.

tantenMedlem sedan nov. 20051 596 inlägg
#17

den matematiken förstod jag inte alls. Din .box kommer visas på 70% av skärmen och menyn kömmer starta t.ex 5% från den. Det kommer väl se ut som den alltid är lika långt ifrån, som om du hade fasta pixlar där emellan.
Kan du inte visa det på sidan... så jag får se... :)

nilleonlineMedlem sedan sep. 2006119 inlägg
#18

tanten skrev:

den matematiken förstod jag inte alls. Din .box kommer visas på 70% av skärmen och menyn kömmer starta t.ex 5% från den. Det kommer väl se ut som den alltid är lika långt ifrån, som om du hade fasta pixlar där emellan.
Kan du inte visa det på sidan... så jag får se... :)

Ja det borde vara så. Fast ändå blir det lite skillnad. Men det är skit jag får ta, får se om jag hinner ladda upp den nya sen.

tantenMedlem sedan nov. 20051 596 inlägg
#19

Nu började mattecellerna fungera :r Självklart blir det en liten skillnad.

zcorpanMedlem sedan dec. 20042 245 inlägg
#20

Sätt 70% bredd på containern, float:right på menyn och negativ högermarginal på menyn lika mycket som menyn är bred. Och låt #content vara som vanligt.

258 ms totalt · 4 externa anrop · v20260731065814-full.1dc6f849
118 ms — deklarationer (db)
0 ms — hämta statistik (cache)
137 ms — hämta tråd, inlägg och bilagor (db)
119 ms — ändringar (db)