Bilder och div

[telin]

Jag håller på med en hemsida. Jag använder mig av notepad++ och jag har inte lagt upp sidan än. Men när jag förhandsgranskar sidan så hamnar bilderna under varandra och inte jämte varandra som i exemplet på denna sidan:

http://www.w3schools.com/css/css_image_gallery.asp

Vad tror ni det är för fel? Jag har testat att ta bort float och ändrat värden. Men jag vet inte varför det inte blir rätt. Jag har mer än fyra bilder om det påverkar resultatet.

Telin

[voigtann1]

Välkommen till wF

postar din kod så underlättar det än att sitta och gissa vad du har missat

[telin]

CSS koden:

div.img
{
	margin:			2px;	
	width:			auto;
	height:			auto;
	border:			1px solid #ffffff;
	text-align:		center;
	float:			left;
}

div.img img
{
	display:		inline;
	margin:			3px;
}

di.img a:hover img
{
	border:			1px solid #ffffff;
}

div.desc
{
	text-align:		center;
	font-weight:	normal;
	width:			120px;
	margin:			2px;
}

HTML:

<div class="img">
							<a target="_blank" href="klematis_big.htm"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Klematis" width="110" height="90" /></a><div class="desc">Drömmar</div></div>
					<div class="img">
							<a target="_blank" href="klematis2_big.htm"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Klematis" width="110" height="90" /></a><div class="desc">Finska pinnar</div></div>
					<div class="img">
							<a target="_blank" href="klematis3_big.htm"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Klematis" width="110" height="90" /></a><div class="desc">Hallongrottor</div></div>
					<div class="img">
							<a target="_blank" href="klematis4_big.htm"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Klematis" width="110" height="90" /></a><div class="desc">Schackrutor</div></div></br>
					<div class="img">
							<a target="_blank" href="klematis_big.htm"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Klematis" width="110" height="90" /></a><div class="desc">Bondkakor</div></div>
					<div class="img">
							<a target="_blank" href="klematis2_big.htm"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Klematis" width="110" height="90" /></a><div class="desc">Chokladsnittar</div></div>
					<div class="img">
							<a target="_blank" href="klematis3_big.htm"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Klematis" width="110" height="90" /></a><div class="desc">Wienerstänger</div></div>
					<div class="img">
							<a target="_blank" href="klematis4_big.htm"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Klematis" width="110" height="90" /></a><div class="desc">Kolakakor</div></div>

[voigtann1]

du har skrivit fel i css selektorn (di skall vara div) sen är en radbrytning <br> eller XHTML <br/> inte </br> (sen räcker det inte bara med en radbrytning eftersom du floatar dina element)

vilken doctype kör du? om du kör en doctype (använd html5) http://jsfiddle.net/voigtan/TqV8a/

[nitro2k01]

Troligen får du inte koden att köras alls. Exempelvis kan du ha glömt attributet type="text/css" om du använder en style-tagg för att definiera stilmallen.

<style> <- fel
<style type="text/css"> <- rätt

[voigtann1]

nitro2k01 skrev:

Troligen får du inte koden att köras alls. Exempelvis kan du ha glömt attributet type="text/css" om du använder en style-tagg för att definiera stilmallen.

<style> <- fel
<style type="text/css"> <- rätt

vad jag vet så är det inte ett krav (även om man borde göra det) http://voigt.se/sandbox/wf/style.html ser ut att fungera (inte testat i opera)

[telin]

Jag använder doctype html5. Har ändrat det som var fel, bilderna visas fortfarande lodrätt och inte vågrätt. <style type> har jag haft rätt från början. Bilderna visas men som sagt under varandra och inte jämte.

[voigtann1]

Hur breda är dina bilder? Hur ser hela dokumentet ut? Är CSS koden i en fil?

[telin]

Jag har använt samma bild på alla bara för att testa. Den är 539x541 px, 68 kb. CSS är i en separat fil. Infogar allt nedan:


CSS:
* { margin: 0; padding: 0; }

header, footer, container
{
display: block;
}

html
{
background: url(Backgroundblau.png);
background-repeat: repeat;
}

#container
{
margin: auto;
padding-bottom: 1em;
width: 850px;
font-family: Calibri, Arial, sans-serif;
background: white;
box-shadow: 0 0 25px #333;
-moz-box-shadow: 0 0 25px #333;
border-left: 1px solid grey;
border-right: 1px solid grey;
}

#contentText
{
margin: 4em 4em 5em 3em;
padding-bottom: 1,5em;
}

#contentText>h1
{
font-weight: bold;
font-size: 1,5em;
color: orange;
}

#contentText>h2
{
font-weight: bold;
font-size: 1em;
color: grey;
}

#sideBar
{
width: 200px;
float: left;
position: left;
height: 100%;
padding-right: 30px;
padding-top: 5px;
}

header.pageHeader
{
padding-top: 30px;
width: 850px;
height: 220px;
background: beige;
font-size: 2em;
}

footer.pageFooter
{
background: white;
width: 850px;
margin: auto;
padding: 15px 0px 15px 0px;
font-family: Calibri;
font-size: 15px;
}

div.img
{
margin: 2px;
width: auto;
height: auto;
border: 1px solid #ffffff;
text-align: center;
float: left;
}

div.img img
{
display: inline;
margin: 3px;
}

div.img a:hover img
{
border: 1px solid #000000;
}

div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}

HTML:


<!DOCTYPE html>
<html>
<head>
<title>Swedish Baking Recipes | Kafferep.com </title>

<link rel="stylesheet" type="text/css" href="test-layout.css" />
<style type="text/css" />

<meta http-equiv="Content-Language" content="en"/>
<meta name="Description" content="Swedish baking recipes. Cookies, buns, pastrys, cakes and more!"/>
<meta name="Keywords" content=" Swedish, recipes, buns, pastrys, cookie, cookies, cake, princesscake"/>

</head>

<body>

<div id="container">

<header class="pageHeader">

<center><p>KAFFEREP</p></center>

</header>

<section id="sideBar">

<script type="text/javascript"><!--
google_ad_client = "ca-pub-5265886524843455";
/* Kafferep sidebar */
google_ad_slot = "1250353860";
google_ad_width = 200;
google_ad_height = 200;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

<script type="text/javascript"><!--
google_ad_client = "ca-pub-5265886524843455";
/* Kafferep sidebar */
google_ad_slot = "1250353860";
google_ad_width = 200;
google_ad_height = 200;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

<script type="text/javascript"><!--
google_ad_client = "ca-pub-5265886524843455";
/* Kafferep sidebar */
google_ad_slot = "1250353860";
google_ad_width = 200;
google_ad_height = 200;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</section>

<section id="contentText">

<h1>Recipes</h1>
<br>
<h1>Cookies</h1>
<hr>
<br>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\dreams-drommar.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Drömmar" width="110" height="90" /></a><div class="desc">Drömmar</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\finnishsticks-finskapinnar.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Finska pinnar" width="110" height="90" /></a><div class="desc">Finska pinnar</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\raspberrycaves-hallongrottor.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Hallongrottr" width="110" height="90" /></a><div class="desc">Hallongrottor</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\chessquares-schackrutor.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Schackrutor" width="110" height="90" /></a><div class="desc">Schackrutor</div></div>
<br>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\farmercookies-bondkakor.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Bondkakor" width="110" height="90" /></a><div class="desc">Bondkakor</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\chocolateslices-chokladsnittar.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Chokladsnittar" width="110" height="90" /></a><div class="desc">Chokladsnittar</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\wienercanapes-wienerstanger.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Wienerstänger" width="110" height="90" /></a><div class="desc">Wienerstänger</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\caramelcookies-kolakakor.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Kolakakor" width="110" height="90" /></a><div class="desc">Kolakakor</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\cinnamonslices-kanelsnittar.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Kanelsnittar" width="110" height="90" /></a><div class="desc">Kanelsnittar</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\almondcube-mandelkubb.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Mandelkubbar" width="110" height="90" /></a><div class="desc">Mandelkubbar</div></div>
<br><br>

<h1>Buns and cakes</h1>
<hr>
<p>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\spongecake-sockerkaka.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Sockerkaka" width="110" height="90" /></a><div class="desc">Sockerkaka</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\sandcake-sandkaka.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Sandkaka" width="110" height="90" /></a><div class="desc">Sandkaka</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\softgingerbread-mjukpepparkaka.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Mjuk pepparkaka" width="110" height="90" /></a><div class="desc">Mjuk pepparkaka</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\tigercake-tigerkaka.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Tigerkaka" width="110" height="90" /></a><div class="desc">Tigerkaka</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\sugarbun-sockerbulle.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Sockerbullar" width="110" height="90" /></a><div class="desc">Sockerbullar</div></div>
<br>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\semla-semlor.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Semlor" width="110" height="90" /></a><div class="desc">Semlor</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\ambrosiacake-ambrosiakaka.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Ambrosiakaka" width="110" height="90" /></a><div class="desc">Ambrosiakaka</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\loveyummy-karleksmums.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Kärleksmums" width="110" height="90" /></a><div class="desc">Kärleksmums</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\applecake-appelkaka.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Äppelkaka" width="110" height="90" /></a><div class="desc">Äppelkaka</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\swissroll-rulltarta.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Rulltårta" width="110" height="90" /></a><div class="desc">Rulltårta</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\cinnamonbun-kanelbulle.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Kanelbullar" width="110" height="90" /></a><div class="desc">Kanelbullar</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\toscacake-toscatarta.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Toscatårta" width="110" height="90" /></a><div class="desc">Toscatårta</div></div>

</p><br><br>

<h1>Pastry</h1>
<hr>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\mazarin-mazariner.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Mazariner" width="110" height="90" /></a><div class="desc">Mazariner</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\hoovers-dammsugare.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Dammsugare" width="110" height="90" /></a><div class="desc">Dammsugare</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\biskvi-biskvier.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Biskvier" width="110" height="90" /></a><div class="desc">Biskvier</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\arrackballs-arraksbollar.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Arraksbollar" width="110" height="90" /></a><div class="desc">Arraksbollar</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\chocolateballs-chokladbollar.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Chokladbollar" width="110" height="90" /></a><div class="desc">Chokladbollar</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\vanillahearts-vaniljhjartan.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Vaniljhjärtan" width="110" height="90" /></a><div class="desc">Vaniljhjärtan</div></div>
<br><br>

<h1>Cakes</h1>
<hr>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\princesscake-prinsesstarta.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Prinsesstårta" width="110" height="90" /></a><div class="desc">Prinsesstårta</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\creamcake-graddtarta.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Gräddtårta" width="110" height="90" /></a><div class="desc">Gräddtårta</div></div>
<div class="img">
<a target="_blank" href="C:\Program\Notepad++\kafferep\recipes\strawberrycake-jordgubbstarta.html"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Jordgubbstårta" width="110" height="90" /></a><div class="desc">Jordgubbstårta</div></div>

</section>

<footer class="pageFooter">
<center>&#169 Kafferep.com 2012 </center>

</footer>

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

[voigtann1]

<style type="text/css" /> är fel, ta bort den


men annars är dom på vänster sida: http://voigt.se/sandbox/wf/telin/

du bör nog kolla igenom din HTML struktur. undvik flera h1 att lägga in en br för en radbrytning direkt efter en rubrik känns som du lika väl kan fixa det i din CSS, samma sak med <hr> du kan ju ha en border-bottom på din h1(hX) för att lösa det och du få mindre HTML kod.

Sen bör du undvika att skala om bilder, varför skall man ladda ner en ~5ggr större bild än vad du presentera?

[telin]

Nu har jag fortfarande problem. Jag har lagt upp sidan men bilderna visas inte horisontellt som jag vill. Vad kan jag göra för att fixa problemet? http://kafferep.com/recipes.html

[telin]

Dessutom vill bilden inte visas, testat massa grejer för att få fram den men den vill inte

[voigtann1]

bilderna finns inte på http://kafferep.com/images/ics.JPG
var laddar du upp bilderna?

och din CSS körs inte heller .img har ingen stil... men det skall den kanske inte heller ha, vet inte men du har inte bifogat någon mer CSS fil i den filen och ingen av de två CSS filer du ladda in har något med att göra om .img blocken

[drew]

Bilden finns på http://kafferep.com/images/ics.jpg men innehåller fel. FTP'ad i ASCII mode?

[telin]

vad ska jag göra för att få bilderna att visas horisontellt? jag ska pröva ladda upp bilderna igen och se om det är problemet med att de inte visas.

[voigtann1]

telin skrev:

vad ska jag göra för att få bilderna att visas horisontellt?

Lägg in den CSS du har postat i en av dina CSS filer.

[telin]

Nu har jag en massa andra problem istället. Bilderna ligger som de ska men nu är h1 helt fel. har försökt med position, align, float.... vad ska jag göra för att få den där den ska vara?

[voigtann1]

ha en div runt alla dina <div class="img"> och antingen kör du en overflow: hidden på den eller kör du en så kallad clearfix för det:

http://nicolasgallagher.com/micro-clearfix-hack/

[joser]

telin skrev:

Nu har jag en massa andra problem istället. Bilderna ligger som de ska men nu är h1 helt fel. har försökt med position, align, float.... vad ska jag göra för att få den där den ska vara?

Om jag fattar frågan och du inte redan har fått till det, men det ser inte ut så på din onlineversion 2012-09-02:

Minsta möjliga fix är en clear left på kategorirubrikerna, testa det. Glöm inte att byta till H2 på dem i din HTML också, H2 eftersom alla är underrubriker till H1 Recipes.

#contentText h2{
		font-weight: bold;
		font-size: 1em;
		color: gray; /* stavfel */
		clear: left; /* lägger h2 på ny rad */
}
.pageFooter{
	clear:left; /* placerar footer under sista float och expanderar container-diven */
}

Men, mer avancerat, recepten är ju listade i en lista av kategorier. En semantiskt mer korrekt lösning för t.ex. ett galleri av bilder än den du hittat på "w3schools" är oftast just en lista. Det du hittar på "w3schools" kan du se som exempel på vad css kan göra.

Så, du har en lista av listor. Säg till om vill ha hjälp att byta till listor.

[telin]

Tack för svaren. clear: left, löste mitt problem men skapade ett annat. Bilderna och rubrikerna hamnar under min sidebar. Enkel lösning?

[joser]

Låter som du har float left på sidebar. Det är ok.

För att lösa det enkelt, testa det råd voigtann1 gav ovan: overflow hidden på contentText:

#contentText{
	margin: 4em 4em 5em 3em;
	padding-bottom: 1,5em;
	overflow: hidden; /* måste omsluta allt, så långt utrymmet räcker */
}

[joser]

Om du anser problemet löst, det har gått tio dar nu, så föreslår jag att du väljer en post som lösning så tråden blir markerad löst.

Blir det nya frågor om din sida så starta en ny tråd med en ny beskrivande rubrik!