[CSS] Får inte img elementen brevid varandra i figure.
Hej,
Jag har försökt nu en hel del och jag kan inte veta vad jag gör för fel, det är som så att alla mina img blockelement blir staplade på varandra (Se bild) men jag vill ha dom som så att två skall vara brevid varandra och dom andra två skall vara nedanför varandra - men jag hittar inte vad jag gör för fel.
Någon som kan hjälpa mig?
Hur det ser ut nu, jag vill inte ha det så här som sagt
CSS koden
@charset "UTF-8";
html { /* påverkar allt inom taggen html */
background-color: white; /* bestämmer bakgrundsfärg */
margin: 0.5%; /*hur stort mellanrum det skall vara mellan kanterna på sidan och själva ramen kring webbläsaren */
}
body { /* Alla inställningar för allt som är synligt på sidan dvs inom elementet body */
margin: 0,5%; /* Bestämmer hur långt från sidorna på sidan allt skall vara med denna så tar vi bort den ev. inbygda margin som vissa webbläsare har, sätter man den på auto
tillsammans med max-width så blir den centrerad*/
font-family: sans-serif; /* Teckensnittet som sätts för hela sidan */
}
h1 { /*Bestämmer vad som skall hända alla element med h1 */
text-align: center; /* Centrerar rubriken */
}
p.main { /*Bestämmer vad som skall hända alla element med p */
text-align: center; /* Centrerar rubriken */
}
.picture { /*bestämmer inställningar för alla med class picture*/
width: 20%; /*Minskar ned bilden på bredden till 20% av usprungliga storleken */
height: 20%; /*Minskar ned bilden på höjden till 20% av usprungliga storleken */
}
figure { /*är en "container" precis som te.x div taggen, men denna är mer anpassad för bilder m.m, och med denna så kan jag justera webbläsaren hur jag vill på storleken och ändå så
kommer texten vara under bilderna */
float: right; /* Bestämmer hur allt skall flyta kring bilden */
margin-left: 25%; /* BEstämmer hur långt från vänster sida som div-taggen skall vara placerad */
margin-right: 10%; /* BEstämmer hur långt från höger sida som div-taggen skall vara placerad */
padding: 0.5em 8em; /* Bestämmer hur innehållet på div taggen skall vara placerad. */
margin-top: 5%; /* BEstämmer hur långt från toppen som div-taggen skall vara placerad */
}
figure img:hover { /*Bestämmer vad som händer för alla blockelement img som ligger i elemetet div om man för musen över dom */
border: inset red 0.2em; /*Inställningar för ramen, vilken stil jag valde inset då ser det ut som att bilden sjunker ned i sidan, vilken färg och hur tjock strecket skall vara */
/*Jag är osäker på vad han menar i boken med avvikan färg, men jag ställde färgen till röd iaf. */
}
figure p { /*Bestämmer hur blockelemetet p skall se ut inne i elemetet figure. */
margin-top: 0%; /*Bestämmer hur långt från toppen texten skall vara */
margin-bottom: 2%; /*Bestämmer hur stort mellan rum det skall vara på botten / nederkant*/
}
HTML koden
<!DOCTYPE html>
<html lang="sv"> <!-- berättar att html dokumentet är på svenska -->
<head>
<meta charset="UTF-8"> <!-- berättar att vi ska köra med teckenkoden utf-8 så att våra åäö och andra tecken ser bra ut -->
<title>Inlämning 4</title> <!-- Titlen på sidan som bla syns genom sökmotrer men även uppe vid tabbarna på webbläsaren -->
<link rel="stylesheet" href="css/inlamning4.css" /> <!-- infogar CSS mallen -->
</head>
<body>
<h1>Mitt lilla fotoalbum</h1> <!-- skapar en rubrik -->
<p class="main">cccccc</p><!-- textstycke -->
<figure>
<a href="img/1.jpg"><img class="picture" src="img/1.jpg" alt="En bildlänk"></a> <!-- infogar en bild på sidan som fungerar som en länk -->
<p>test1</p>
<a href="img/2.jpg"><img class="picture" src="img/2.jpg" alt="En bildlänk"></a>
<p>test2</p>
<a href="img/3.jpg"><img class="picture" src="img/3.jpg" alt="En bildlänk"></a>
<p>test3</p>
<a href="img/4.jpg"><img class="picture" src="img/4.jpg" alt="En bildlänk"></a>
<p>test4</p>
</figure>
</body>
</html>
Supermicro X9SRI-F | Xeon E5-2690 v2 | 128GB 1600MHz RDIMM | Dell Perc H200 (9211-8i IT) | Windows Server 2016 DataCenter med Hyper-V
