Varför dyker inte kolumner upp?(html&css)
[code]
<!DOCTYPE HTML>
<html>
<head>
<title>Modul 2 - uppgift 2</title>
<meta charset = "UTF-8" />
<!--Det är alltså stil.css som du ska skicka in som länkas till i kommande rad -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--Nedan följer en artikel ur studieguiden om CSS - artikeln har en tillhörande bild samt en informationsruta med en länk som tips för vidare läsning.
SOm ni kan se används lite taggar som har namn som section, header och article. Detta är namngiva div-taggar som är en nyhet i HTML5 för att kunna skapa mer semantiskt innehåll..
Är det förvirrande så tänk att exempelvis att taggen section kan vara en div='avdelning' och article kan vara div="content" exempelvis.
Så här ser denna layout ut:
header
article (som en content-wrapper)
section (ett blogginlägg)
header
img (bild)
p (brödtext)
footer
section
header
img (bild)
p (brödtext)
footer
aside
footer (med copyrighttext)
För att specifikt styla h2 taggen som finns i article-taggen kan man i CSS skriva:
article header h2 {stil}
Man beskriver alltså ett träd och att ovanstående stil endast gäller h2-rubriker innanför en header tagg som i sin tur bara finns innanför en article tagg.
-->
<div id="wrapper">
<div id="container">
<div id="header">
<header><h1>Smakprov ur studieguiden för webbutveckling 2</h1></header>
</div>
<!-- Här kommer huvudinnehållet. Section kan ses som div='content' exempelvis -->
<div id="main wrapper">
<article>
<section>
<div id="left colum">
<header><h2>Om CSS</h2></header>
<p>Vad CSS kan användas till har vi lärt oss i föregående kurs men vi kommer arbeta vidare med stilmallar i denna studieguide eftersom det är ett sätt att styra utseendet
på hemsidan som ska användas. Inga hemsidor görs idag utan att använda just stilmallar och allt eftersom nya versioner av CSS släpps så förbättras möjligheterna och utbudet av funktioner som erbjuds.</p>
<p>Den senaste versionen av CSS är då CSS3 och för att vi fullt ut ska kunna utnyttja denna version ska vi alltså använda HTML5. Glöm dock inte att webbdesign utvecklas hela tiden och det som är sanning idag behöver inte vara sanning imorgon</p>
<p class="linktext">Här är en <a href="https://sv.wikipedia.org/wiki/Cascading_Style_Sheets"> artikel om CSS</a> på Wikipedia</p>
<footer>Skrivet av Oscar Antbring den 12 juni 2013</footer>
</div>
</section>
<div id="right colum">
<section>
<header><h2>Om märkspråk</h2></header>
<p>Märkspråk – eller markup language – är ett sätt att med hjälp av olika textkoder ge direktiv till ett program (i vårt fall då en webbläsare) hur ett dokument ska presenteras och vilka funktioner som ska finnas. Som vi kommer ihåg från första kursen så finns flera olika sådana textkoder att använda – eller taggar som vi ofta kallar dem för. Det kan vara en tagg för att berätta för webbläsaren att vi vill presentera en hyperlänk, eller att vi ska presentera en bild exempelvis. Naturligtvis måste webbläsaren veta vad de olika koderna – eller taggarna – betyder. Det är därför som olika märkspråk (och versioner) finns och från föregående kurs kommer vi ihåg HTML 4.01 samt XHTML. Vilket märkspråk som används ska vi specificera i dokumentet så att webbläsaren vet vilka taggar som kan användas och vad de betyder</p>
<p>När vi skapar en hemsida så specificerar vi en så kallad DOCTYPE som beskriver vilket typ av dokument som webbläsaren kan förvänta sig. Vi säger helt enkelt till webbläsaren – ”detta dokument är av typen HTML5, och då kan du förvänta dig dessa taggar och struktur”. Naturligtvis måste webbläsaren ha stöd för HTML5 så att programmet vet vad som ska göras med taggarna och deras egenskaper.Det är därför det är så viktigt att vi validerar koden så att vår kod stämmer överens med vad webbläsaren förväntar sig utifrån typen av dokument. Vi kommer återkomma till just validering av koden i sista modulen även om det redan tagits upp i första kursen – validera gärna kontinuerligt koden genom hela utvecklingsarbetet.</p>
<p class="linktext">Här är en <a href="https://sv.wikipedia.org/wiki/HTML5"> artikel om HTML5</a> på Wikipedia</p>
<footer>Skrivet av Oscar Antbring den 11 juni 2013</footer>
</section>
</div>
</article>
<!-- Här kommer en sidokolumn. Denna bör ligga bredvid article alltså men får man det inte att fungera så går det ha den under också -->
<aside>
<h1>Bildgalleri</h1>
<img src="images/html5.png " alt="html5">
<img src="images/css.png" alt="css3">
</aside>
<div id="footer">
<footer>©Hermods</footer>
</div>
</div>
</div>
</div>
</body>
</html>
[code]
Här är css koden än så länge
[code]
#wrapper{
width: 1500px;
margin: 0 auto;
background: #FFF;
}
#header{
height: 100px;
margin-bottom: 10px;
background: #CEC3B7;
}
#container{
width: 900px;
padding: 10px;
margin: 0 auto;
background: #C6B6A3;
}
#footer{
background: #CEC3B7;
margin-top: 10px;
}
#main wrapper{
background: CEC3B7;
}
#left colum{
width: 440px;
background: #FFF;
float: left;
}
#right colum{
width: 440px;
background: #FFF;
float: left;
}
[code]
Jag vill att mina två stycken ska ligga bredvid varandra i kolumner men det dyker ej upp.
