05. CSS

Text i två spalter

2013-02-03 13:37 #0 av: IdaL

När man gör hemsidor så kan man ibland vilja dela in texterna i två spalter istället för löpande text. I denna artiklen går jag igenom enklaste sätt i CSS för att åstadkomma detta.

För att kunna ha två spalter brevid varandra med en bestämd bred så måste man först skapa en stor box och sedan skapa två mindre "under-boxar". Detta gör man med hjälp av CSS.

CSS koderna vi kommer använda ser ut såhär:

#container {
width: 680px;
background-color: #000000;
height: auto;
display: block; }

#container .left {
width: 300px;
background-color: #FFFFFF;
float: left;
margin: 10px;
padding: 10px; }

#container .right {
width: 300px;
background-color: #FFFFFF;
float: left;
margin: 10px;
padding: 10px; }

#container:after {
content: "."; 
display: block;
height: 0; 
clear: both;
visibility: hidden; }

Där står följande element för:
#container - detta är huvudboxen, här kommer alltså de två små boxarna ligga.
.left / .right - detta är de två små boxarna, en för höger och en för vänster. dom har bägge float left eftersom att dom då kommer lägga sig till vänster och brevid varandra.
#container:after - detta är ett avslutande element som anger att inget mer kommer va med i denna boxen. Den är dock dold och kommer inte att visas.

Nu har vi CSS koden färdig det kommer alltså bli två boxar med en fast bredd brevid varandra. Jag har satt padding och margin på dom så boxen kommer hamna 10px in från kanten av den stora boxen och texten i boxarna kommer ha padding 10 px från kanten i dom små boxarna. Jag satte ingen bestämd höjd på boxarna utan dom kommer ändras utefter hur mycket texter man skriver i dom små boxarna.

Nu ska vi bara skriva HTML koden som ser ut såhär:

<div id="container">
<div class="left">Text</div>
<div class="right">text</div>
</div>

Svårare än så är det inte. När vi sedan sparar koden så kommer den se ut såhär:
Boxen

Skulle vi skriva lite mer i den ena boxen så kommer det se ut såhär:

Anmäl
2013-02-03 21:17 #1 av: Mimmi

Skulle snarare säga att CSS-kolumner är det enklaste sättet att med hjälp av CSS skapa spalter i dagsläget: http://css-tricks.com/snippets/css/multiple-columns/

Dock har detta inte jättebra webbläsarstöd i nuläget, ändå värt att nämna tycker jag!

Anmäl
2013-02-03 21:42 #2 av: IdaL

#1 Absolut värt att nämna! Sen är det ju såklart upp till var och en, vad man själv tycker är enklast. Jag kan nog föredra box-i-box systemet som jag presentar till just min hemsida men som sagt, det beror ju lite på vad man kodar för hemsida och vad man själv är bekvämast med.

Anmäl
2013-02-05 02:12 #3 av: thenameless

Det var kul att prova i alla fall. Jag har altid använt table innan.

Anmäl
2013-02-22 23:10 #4 av: thenameless

jag provade och det blev rätt bra men hela sidan blev vänsterställd kan man väl kalla det? 

  1. Vart sätter jag "center" om jag vill att kolumnerna skall hamna i mitten, till vänster, höger av skärmen?
  2. Jag kan ju göra som jag gör med det mesta andra och byta ut width:680 px mot 100% och sen 50%  på containers men finns något bättre mer "accepterat" vis?"

Anmäl

Bli medlem på iFokus

För att kunna delta i diskussionen måste du bli medlem på iFokus. Det går snabbt, enkelt, och kostar ingenting. Medlemskapet ger dig tillgång till över 300 sajter.