webForumDet fria alternativet
Logga in

lista som är 100% bred

10 svar · 405 visningar · startad av maqe

maqeMedlem sedan dec. 2003824 inlägg
#1

Jag har en lista med 4 bilder. hela min lista "<ul>" ska vara 100% bred och så vill jag att va <li> ska dela på den platsen så att den vänstra bilden ligger till vänster och den högra längst ut i högerkanten. Finns det nån egenskap så man kan sätta vilket space det ska vara mellan varje element? Detta skall förstås inte slå igenom om elementet inte har någon bredvid sig så som padding gör

InsiderMedlem sedan jan. 2000978 inlägg
#2

När dina bilder inte är 25% av webbläsarfönstret kommer det ju bli ett glapp mellan 3:e och 4:e bilden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
	<head>
		<title>test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
* {margin:0;padding:0}

li {
	float:left;
	width:25%;
	list-style-type:none;
}

.sista {text-align:right;}

	</style>
	</head>
	<body>
	<ul>
		<li><img src="hittaknapp.gif" /></li>
		<li><img src="hittaknapp.gif" /></li>
		<li><img src="hittaknapp.gif" /></li>
		<li class="sista"><img src="hittaknapp.gif" /></li>
	</ul>
	</body>
</html>
maqeMedlem sedan dec. 2003824 inlägg
#3

Jag har alltså en div som är 560px bred. I den har jag en lita som jag vill ska vara 100% av divven. bilderna skall vara 135px breda och dom ska vara jämt fördelade på ytan om 560px. Vänstra bilden skall ligga intil vänstra kanten och högra bilden intill högra kanten och dom bilderna i mitten delar på pixlarna som blir över.

maqeMedlem sedan dec. 2003824 inlägg
#4

Jag har sett att en del använder nått i stil med #lista li:before {padding-left:0;} och li:first-child:before ... skulle man inte kunna använda detta och få till en lista som sträcker sig 100% av en div med högra elementet till höger och vänster element till vänster och dom bägge i mitten har lika stort space mellan sig?

jarvkloMedlem sedan juli 20013 378 inlägg
#5

Jo i teorin, men MSIE stödjer inte de finesserna...

Men å andra sidan kan du kanske "fula" lite ;)

Tänk såhär:
Du vill ha in 4 bilder på bredden, det är 4*135 = 540 pixlar.
Skillnaden mellan den önskade bredden (560) och den bredd som täcks av bilderna (540) är alltså 20 pixlar.

Denna skillnad vill du fördela på tre mellanrum, vilket gör att varje mellanrum borde vara 20/3 dvs ungefär 7 pixlar (dvs du måste hantera fallet att det du vill ha blir 1 pixel bredare än din container om du måste leva med kod som bara kan ge dig samma mellanrum mellan bilderna)...

Om du inte skulle behöva oroa dig för den första bilden, skulle du kunna läsa det hela genom att sätta padding-left till 7px på alla bilder... Men man kan ju inte sätta individuell padding på "det första" och få det att funka i MSIE... men du kan ju å andra sidan sätta en negativ marginal på "det som bilderna ligger i" på 7px för att "trolla bort" vänsterglappet... (negativa marginaler är 100% OK i CSS ;)

Så ett exempel på hur det skulle kunna se ut är då:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv">
<head>
	<title>Ett exempel</title>
	<meta http-equiv="Content-Type" content="text/html; ISO-8859-1" />
<style type="text/css">
* {margin:0;padding:0;}
body {text-align:center}
#container {
	margin:0 auto;
	text-align:left;
	width:560px;
	border:1px solid silver;
	overflow:hidden; /* garantera att containern aldrig kan växa i sidled */
}

#listan ,#listan li {list-style-type:none;}
#listan li {display:inline;}
#listan img {
	width:135px; 
	display:block; 
	float:left;
	padding-left:7px;
}
#listan {margin-left:-7px; width:580px;}
</style>
</head>
<body>
<div id="container">
<ul id="listan">
		<li><img src="bakgrundsbild.gif" alt="en bild"/></li>
		<li><img src="bakgrundsbild.gif" alt="en bild"/></li>
		<li><img src="bakgrundsbild.gif" alt="en bild"/></li>
		<li><img src="bakgrundsbild.gif" alt="en bild"/></li>
	</ul>
</div>
</body>
</html>

Hur du än gör, så får du en pixel för mycket med padding-left: 7px... men du kan antingen minska det värdet till 6px (och justera margin-left på container så att du får en pixel över på var sida om ytterbilderna) eller att helt enkelt ändra dimensionerna så att de är delbara ;)

maqeMedlem sedan dec. 2003824 inlägg
#6

jarvklo skrev:

Jo i teorin, men MSIE stödjer inte de finesserna...

Men å andra sidan kan du kanske "fula" lite ;)

Tänk såhär:
Du vill ha in 4 bilder på bredden, det är 4*135 = 540 pixlar.
Skillnaden mellan den önskade bredden (560) och den bredd som täcks av bilderna (540) är alltså 20 pixlar.

Denna skillnad vill du fördela på tre mellanrum, vilket gör att varje mellanrum borde vara 20/3 dvs ungefär 7 pixlar (dvs du måste hantera fallet att det du vill ha blir 1 pixel bredare än din container om du måste leva med kod som bara kan ge dig samma mellanrum mellan bilderna)...

Om du inte skulle behöva oroa dig för den första bilden, skulle du kunna läsa det hela genom att sätta padding-left till 7px på alla bilder... Men man kan ju inte sätta individuell padding på "det första" och få det att funka i MSIE... men du kan ju å andra sidan sätta en negativ marginal på "det som bilderna ligger i" på 7px för att "trolla bort" vänsterglappet... (negativa marginaler är 100% OK i CSS ;)

Så ett exempel på hur det skulle kunna se ut är då:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv">
<head>
	<title>Ett exempel</title>
	<meta http-equiv="Content-Type" content="text/html; ISO-8859-1" />
<style type="text/css">
* {margin:0;padding:0;}
body {text-align:center}
#container {
	margin:0 auto;
	text-align:left;
	width:560px;
	border:1px solid silver;
	overflow:hidden; /* garantera att containern aldrig kan växa i sidled */
}


#listan ,#listan li {list-style-type:none;}
#listan li {display:inline;}
#listan img {
	width:135px; 
	display:block; 
	float:left;
	padding-left:7px;
}
#listan {margin-left:-7px; width:580px;}
</style>
</head>
<body>
<div id="container">
<ul id="listan">
		<li><img src="bakgrundsbild.gif" alt="en bild"/></li>
		<li><img src="bakgrundsbild.gif" alt="en bild"/></li>
		<li><img src="bakgrundsbild.gif" alt="en bild"/></li>
		<li><img src="bakgrundsbild.gif" alt="en bild"/></li>
	</ul>
</div>
</body>
</html>

Hur du än gör, så får du en pixel för mycket med padding-left: 7px... men du kan antingen minska det värdet till 6px (och justera margin-left på container så att du får en pixel över på var sida om ytterbilderna) eller att helt enkelt ändra dimensionerna så att de är delbara ;)

Detta fungerade kanon i IE men i FF får jag en margin-left på 48px. Alltså den första bilden förskjuts alldeles för mycket i FF?

jarvkloMedlem sedan juli 20013 378 inlägg
#7

??? vilken FF då ? (se bifogad bild)

/Red - Är det fler som har problem?
Testa: http://member.webforum.nu/2241/mages_lista.html

mages_bilder.jpg
maqeMedlem sedan dec. 2003824 inlägg
#8

jarvklo skrev:

??? vilken FF då ? (se bifogad bild)

/Red - Är det fler som har problem?
Testa: http://member.webforum.nu/2241/mages_lista.html

Jag har version 1.0.1.

Bifogar en bild på hur det ser ut i min webbläsare. det grå som syns över är en bild som listan skall gå kant i kant med och det gör den i IE sen ser man på högerkanten ur det försvinner ut över bakgrunden

lista.jpg
jarvkloMedlem sedan juli 20013 378 inlägg
#9

... och du har ingen annan CSS-stil som skulle kunna påverka marginalen t.ex. genom att den "ärvs med" från någon omgivande tagg ?

Lägg upp en länk så tror jag vi kan lösa det ;)

maqeMedlem sedan dec. 2003824 inlägg
#10

Tyvärr har jag ingen möjlighet att lägga upp en länk till sidan för tillfället. Det känns som att det är den marginalen som blir automatiskt när man skapar en lista.
såhär ser min style ut nu när jag anpassat måtten för att den ska passa in exakt under min bild

#startpagelist ,#startpagelist li {list-style-type:none;}
#startpagelist li {display:inline;float:left;padding-left:7px;width:135px;}
#startpagelist img {
	width:135px; 
	display:block;
	margin-bottom:7px;
}

#startpagelist a {font-weight:bold;}
#startpagelist {margin-left:-8px;margin-top:7px;margin-right:0;margin-bottom:7px; width:568px;}

Detta ser korrekt ut i IE och det är inga arv som påverkar

maqeMedlem sedan dec. 2003824 inlägg
#11

Va en enkel sak som behövdes ... padding-left:0; på ul och li satt jag ...

#startpagelist ,#startpagelist li {list-style-type:none;[B]padding-left:0;[/B]}
#startpagelist li {display:inline;float:left;padding-left:7px;width:135px;}
#startpagelist img {
	width:135px; 
	display:block;
	margin-bottom:7px;
}

#startpagelist a {font-weight:bold;}
#startpagelist {margin-left:-8px;margin-top:7px;margin-right:0;margin-bottom:7px; width:568px;}
273 ms totalt · 3 externa anrop · v20260731065814-full.86db40fa
130 ms — hämta forumlista (db)
134 ms — hämta statistik (db)
137 ms — hämta tråd, inlägg och bilagor (db)