---
title: "försa försökter med CSS layout"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/138461-försa-försökter-med-css-layout"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "ptr_lks"
published: "2005-11-29T09:04:32.000Z"
updated: "2005-12-02T16:13:44.000Z"
replies: 116
views: 2435
page: 1
pages: 6
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/138461-försa-försökter-med-css-layout"
---

# försa försökter med CSS layout

_Sida 1 av 6._

## #1 — ptr_lks, 2005-11-29T09:04Z

Hej,
har gjort mitt första försök med 3 raders layout i CSS. Får inte till det, så hoppas på er hjälp  :) 

1. ett hack för att det skall se lika bra ut i ie/ff/netscape
2. minska a på ie.gif
3. minska b på ie.gif
4. få .menu innanför ramen (centrera)
5. positionering av h3
6. positionering av brödtext
7. minska e på ffochNetscape.gif
8. öka lite f på ffochNetscape.gif

gärna med en liten förklaring, så att även jag lär mig lite  :stud

Bilagor:

- [ie.GIF](https://www.webforum.nu/a/8628.gif)
- [csslayout.txt](https://www.webforum.nu/a/8629.txt)
- [ffochNetscape.GIF](https://www.webforum.nu/a/8630.gif)

Permalänk: https://www.webforum.nu/p/138461

## #2 — mozilla, 2005-11-29T09:32Z

Ett tips som både fungerar bra och är väldigt lärorikt är att plocka bort del för del från sidan och se vad som händer, sedan lägger du tillbaka bitar som du tror behövs och så håller du på så ett tag. Du får då bättre inblick i vad koden gör och förhoppningsvis så får du en fungerande hemsida tillslut :)

Försökte kolla igenom din kod, men det var ju bara ett virrvarr och jag gissar på att det är mycket copy-paste?

Permalänk: https://www.webforum.nu/p/1719458

## #3 — ptr_lks, 2005-11-29T09:34Z

> **mozilla skrev:**
>
> Ett tips som både fungerar bra och är väldigt lärorikt är att plocka bort del för del från sidan och se vad som händer, sedan lägger du tillbaka bitar som du tror behövs och så håller du på så ett tag. Du får då bättre inblick i vad koden gör och förhoppningsvis så får du en fungerande hemsida tillslut :)

det är så jag har gjort..

> **mozilla skrev:**
>
> Försökte kolla igenom din kod, men det var ju bara ett virrvarr och jag gissar på att det är mycket copy-paste?

Vad menar du med virvarr??

Permalänk: https://www.webforum.nu/p/1719460

## #4 — tanten, 2005-11-29T09:49Z

Det enklaste är att helt enkelt flytta upp raden div content högst upp och låta den omsluta hela sidan.
så här:
\<body\>
\<div id="Content"\>
\<div id="header"\>\<img src="spifbanner.jpg" alt="logga" /\>
\<h1\>Pojkar p93\`s sida i h1\</h1\>\</div\>
 \<ul class="menu"\>
\<li\>\<a href="index.html"\>Hem\</a\>\</li\>
\<li\>\<a href="trupp.htm"\>Truppen\</a\>\</li\>
\<li\>\<a href="coach.asp"\>Coachens sida\</a\>\</li\>
\<li\>\<a href="matcher.htm"\>Matcher\</a\>\</li\>
\<li\>\<a href="tid.htm"\>Tr&auml;ningstider\</a\>\</li\>
\<li\>\<a href="galleri.htm"\>Galleri\</a\>\</li\>
\<li\>\<a href="ink1.htm"\>L&auml;nkar\</a\>\</li\>
\<li\>\<a href="gbok.asp"\>G&auml;stbok\</a\>\</li\>
\</ul\>
\<h3\>Innehållet kommer här med h3\</h3\>
\<p\>brödtext\</p\>
\</div\>
\</body\>
\</html\>
Sedan får du ändra border och sådant som du vill ha det.
Tänk på att h1- h6 bör komma efter varandra som rubriker och att du inte hoppar över h2.

Permalänk: https://www.webforum.nu/p/1719466

## #5 — mozilla, 2005-11-29T09:51Z

> **ptr_lks skrev:**
>
> Vad menar du med virvarr??

Mycket css men lite kod :OO   :e

Permalänk: https://www.webforum.nu/p/1719468

## #6 — ptr_lks, 2005-11-29T10:04Z

> **tanten skrev:**
>
> Det enklaste är att helt enkelt flytta upp raden div content högst upp och låta den omsluta hela sidan.
> så här:
> \<body\>
> \<div id="Content"\>
> \<div id="header"\>\<img src="spifbanner.jpg" alt="logga" /\>
> \<h1\>Pojkar p93\`s sida i h1\</h1\>\</div\>
>  \<ul class="menu"\>
> \<li\>\<a href="index.html"\>Hem\</a\>\</li\>
> \<li\>\<a href="trupp.htm"\>Truppen\</a\>\</li\>
> \<li\>\<a href="coach.asp"\>Coachens sida\</a\>\</li\>
> \<li\>\<a href="matcher.htm"\>Matcher\</a\>\</li\>
> \<li\>\<a href="tid.htm"\>Tr&auml;ningstider\</a\>\</li\>
> \<li\>\<a href="galleri.htm"\>Galleri\</a\>\</li\>
> \<li\>\<a href="ink1.htm"\>L&auml;nkar\</a\>\</li\>
> \<li\>\<a href="gbok.asp"\>G&auml;stbok\</a\>\</li\>
> \</ul\>
> \<h3\>Innehållet kommer här med h3\</h3\>
> \<p\>brödtext\</p\>
> \</div\>
> \</body\>
> \</html\>
> Sedan får du ändra border och sådant som du vill ha det.
> Tänk på att h1- h6 bör komma efter varandra som rubriker och att du inte hoppar över h2.

tack tanten, det är bättre men ser fortfarande mysko ut i FF och Netscape

Bilagor:

- [ff.gif](https://www.webforum.nu/a/8631.gif)

Permalänk: https://www.webforum.nu/p/1719473

## #7 — tanten, 2005-11-29T10:35Z

Ja det förstår jag. Det var därför jag sa att du skulle fixa med de andra värdena.
Du kanske dessutom bör ha menyn i en egen div.
Det är lite svårt att se resultatet för min del eftersom jag inte har dina bilder.
Men om du tänker dig att content är den diven som du ska ha allt det andra i så kan du i stället för exakta mått på innehållet börja testa med hur stor % av t.ex headern ska vara. Ingenting får ju vara bredare än vad contenten är och då är det ganska fiffigt att räkna med % och så länge du inte vill ha med kolumner så är det lätt.
Ska du göra en riktigt tillgänglig sida så kan du även ange % på contenten. Sätter du bredden på contenten till t.ex 80% och centrerar den så kommer den alltid att visas så oavsett om någon ser den i mobil eller på en jättestor bildskärm.
Så allt som du nu gör är att räkna från contentes sidor och inte från bodyns.

Permalänk: https://www.webforum.nu/p/1719483

## #8 — ptr_lks, 2005-11-29T10:59Z

Nu har jag gjort som tanten och mozilla rekomenderade, och började om från scratch, [byggt på](http://www.polisenbasket-p93.se/test1.html) 

- anvånt mig utav 

  ```
  height:auto;
  ```

   verkar funka, men är det rätt också?

Bilagor:

- [css_kod.txt](https://www.webforum.nu/a/8632.txt)

Permalänk: https://www.webforum.nu/p/1719492

## #9 — tanten, 2005-11-29T11:10Z

Såg inte att du skickat en ny bild. Är ju ny för dagen här och har inte vant mig vid dessa funktioner.
Din header är ju lika bred som din content + att du har padding 15px på den, så egentligen räcker det med att du raderar padding eller sätter padding-left på 0, eller som jag skrev förut sätt width:en på 100%.
Men detta hade du kanske redan upptäckt...

Permalänk: https://www.webforum.nu/p/1719496

## #10 — tanten, 2005-11-29T11:27Z

Det jag ser är att du nog ska göra en "box" till för texten. Om du sätter in en div där så kan du använda många p, nu har du angivit att den ska vara 230px från toppen och då kommer det bli väldigt långa avstånd mellan styckena. Testa med ett \<p\>till så får du se vad jag menar.

Permalänk: https://www.webforum.nu/p/1719503

## #11 — ptr_lks, 2005-11-29T11:35Z

> **tanten skrev:**
>
> Det jag ser är att du nog ska göra en "box" till för texten. Om du sätter in en div där så kan du använda många p, nu har du angivit att den ska vara 230px från toppen och då kommer det bli väldigt långa avstånd mellan styckena. Testa med ett \<p\>till så får du se vad jag menar.

har redan kommit på med en box till...
skall strax visa, men måste jobba lite först  :)

Permalänk: https://www.webforum.nu/p/1719504

## #12 — ptr_lks, 2005-11-29T12:04Z

Nu börjar det närma sig [utseende jag vill ha](http://www.polisenbasket-p93.se/test2.html)...
Men:

1. hur kan jag få bort det liilla mellanrummet i efter menyn - se fel.gif
2. jag skulle vilja ha en gul-border - se bilden. Hur kan jag få det?
3. övrga texten är skriven i p-tagg. Den villjag också kunna flytta

 
Tacksam med hjälp med dessa punkter

Permalänk: https://www.webforum.nu/p/1719513

## #13 — tanten, 2005-11-29T12:57Z

Eftersom din meny är exakt i måtten xsom inte stämmer med dina mått på li så måste du göra en div att lägga in menyn i och ha samma bakgrundsfärg som resten
Lägg till
\#menu{
	width: 100%;
	background-color: #283a86;
}
Och byt ut
\<div class="menu"\>
mot \<div id="menu"\>

Hinner inte mer nu, återkommer senare ...

Permalänk: https://www.webforum.nu/p/1719531

## #14 — ptr_lks, 2005-11-29T13:02Z

> **tanten skrev:**
>
> Eftersom din meny är exakt i måtten xsom inte stämmer med dina mått på li så måste du göra en div att lägga in menyn i och ha samma bakgrundsfärg som resten
> Lägg till
> \#menu{
> 	width: 100%;
> 	background-color: #283a86;
> }
> Och byt ut
> \<div class="menu"\>
> mot \<div id="menu"\>
> 
> Hinner inte mer nu, återkommer senare ...

fungerar tyvärr endast i IE

Permalänk: https://www.webforum.nu/p/1719533

## #15 — fiddler, 2005-11-29T13:38Z

Välkommen till wF tanten! :bire Hoppas du kommer att trivas!

Ser att ptr_lks hamnat i goda händer. ;)

Permalänk: https://www.webforum.nu/p/1719550

## #16 — ptr_lks, 2005-11-29T13:39Z

mmm... kanon bra hjälp  :bire

Permalänk: https://www.webforum.nu/p/1719551

## #17 — webbebba, 2005-11-29T14:09Z

Nu börjar det likna något, så bra  :)  Du kanske skulle ändra text-align:center; i p{} till text-align:left:

Permalänk: https://www.webforum.nu/p/1719566

## #18 — tanten, 2005-11-29T15:14Z

Nu vet jag inte riktigt vad du gjort.
Du får bara ha de olika id:ena en gång per sida. Varför tog du bort class="menu"?
Så \<div id="menu"\> finns en gång för mycket...:-) och sådant accepterar inte FF

Ett tips som kanske inte helt handlar om detta men som är en väldigt stor hjälp. 
Validera sidan, ta länken och klistra in den någonstans på sidan och validera sedan ofta. Oftast ligger felen i att man glömt något och nu när du gör xhtml-sida så finns det inga genvägar att fuska sig förbi som man kan i html.

Så tycker jag du ska byta ut doctypen. Ska du starta upp en helt ny sida så är det lika bra att sikta högt.
Lägg in den här i stället...
\<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"\>
\<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="Sv"\>

Stöter du på problem så vet du att jag finns:-)

Här är länken till din sidas validering

<http://validator.w3.org/check?verbose=1&uri=http%3A//www.polisenbasket-p93.se/test2.html>

Vad är det för gul border du pratar om?

p taggarna är bland det viktigaste du har på en sida. Dem ska du kunna floata runt bilder, ha kanter runt, placera bredvid varandra med mera med mera, så försök undvik att ha p ensamt, som jag skrev tidigare skapa en div och lägg in  p taggarna i.
till exempel
Ta dessa rader, klistra in dem och lek med dem...

\<div id ="text"\>\<p\>Du får inte använda stora bokstäver i taggarna!\</p\>
\<p\> Matcher på lördag!\</p\>\</div\>
\<div id="sidotext"\>\<p\> Så kan vi ha lite bakgrundsfärg på den här texten...\</p\>

Lägg in detta på sidan och detta i Stylesheeten

\#text{ width: 30%; float: left; border: 1px solid #FF6347;}
\#sidotext{width: 20%; float:left; background-color:#000;}
\#sidotext p{color:#fff; text-align:left;}

För att detta ska funka så måste du radera
ditt p i stylesheeten  och 
lägga in dessa rader i body i stället

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000033;

Så undvik att koda med hack. Strunta i dem som kör med IE5... Du kommer bara få problem med dem snart när webläsarna kommer ut med nya versioner.

Hoppas jag skrivit rätt nu... Har inte kontrollerat det.

Permalänk: https://www.webforum.nu/p/1719592

## #19 — ptr_lks, 2005-11-29T15:26Z

Tack du är en riktig pärla  :birp 

> **tanten skrev:**
>
> Nu vet jag inte riktigt vad du gjort.
> Du får bara ha de olika id:ena en gång per sida. Varför tog du bort class="menu"?
> Så \<div id="menu"\> finns en gång för mycket...:-) och sådant accepterar inte FF

jag har väl bara en \<div id="menu"\> ? den andra är väl \<ul id="menu"\>

> Validera sidan, ta länken och klistra in den någonstans på sidan och validera sedan ofta

hur menar du?
Förrästen:
varför har du med "float"? vilka fördelar ser du med float?

Permalänk: https://www.webforum.nu/p/1719599

## #20 — ptr_lks, 2005-11-29T15:36Z

även fast jag ändrade tillbaka, så går inte menyn ända ut i FF och Netscape

Permalänk: https://www.webforum.nu/p/1719602

---

Tråden på webben: https://www.webforum.nu/amne/html-css/138461-försa-försökter-med-css-layout  
Nästa sida: https://www.webforum.nu/amne/html-css/138461-försa-försökter-med-css-layout/page2.md