---
title: "Mariginaler"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/182950-mariginaler"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "mackanz"
published: "2010-03-24T19:43:28.000Z"
updated: "2010-04-03T10:31:08.000Z"
replies: 39
views: 2057
page: 1
pages: 2
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/182950-mariginaler"
---

# Mariginaler

_Sida 1 av 2._

## #1 — mackanz, 2010-03-24T19:43Z

Jag har gett mig i kast med att fixa en hemsida med css efter konstens alla regler

Dock undrar jag lite över marginaler. Har testat fram och tillbaka men får det inte att se ut som jag vill.

<http://www.hogtryck.ax/2010/>

Det jag vill är att topbilden och knapparna under håller ihop.

Jag har testat det mesta med marginaler och padding på den topboxen.

vad ska jag göra???

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

## #2 — Fuel, 2010-03-24T23:23Z

display:block på bilden

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

## #3 — voigtann1, 2010-03-25T07:34Z

en sak du kan tänkta på att div:en inte behöver ha en bredd på 100%, det har den redan (tänker på din #header)

om du skall koda xhtml så skall du inte heller ha stora bokstäver på några av dina element + alla element skall avslutas (tänker på din \<br\> element).

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

## #4 — mackanz, 2010-03-25T11:34Z

Okej rättar den sig efter den som jag satt till 780px??

Tackar voigtann1 då vet jag. Jag har ju mest använt färdiga templates förut men tänkte att man måste ju försöka få lite förståelse för hur det funkar och kunna skapa  något eget.

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

## #5 — voigtann1, 2010-03-25T12:13Z

Om du har en wrapper som är 780px så alla block element som är barn till det element kommer bli 780px (100% av ens förälder)

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

## #6 — mackanz, 2010-03-25T19:11Z

Fuel: Hur menar du med display:block jag testade göra en class för bilderna i menyn som jag satte display block på men det hjälpte inte. Då blev dom staplade på varandra.
Jag vill ju sammanfoga hela toppen så det som ser ut som en hel bild.
Antar att det finns fler element till diplaytaggen.

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

## #7 — Compusa, 2010-03-25T19:58Z

Sedan kan du även passa på att validera din sida!
<http://validator.w3.org/check?uri=http%3A%2F%2Fwww.hogtryck.ax%2F2010%2F&charset=%28detect+automatically%29&doctype=Inline&group=0>

(Vid skrivande stund har du 99 fel så du har lite att göra)

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

## #8 — mackanz, 2010-03-25T20:01Z

Jo jag vet där med valideringen men alla är vi barn i början eller???
Just nu koncentrerar jag mig på att få sidan att se ut som den ska.
Eller i alla fall på en grundmall som jag kan använda mig utav.
Sen får jag beta av valideringen.

*Edit: Validation Output: 38 Errors*

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

## #9 — nidron, 2010-03-25T20:55Z

> **[mackanz skrev:](https://www.webforum.nu/p/1501255)**
>
> Fuel: Hur menar du med display:block jag testade göra en class för bilderna i menyn som jag satte display block på men det hjälpte inte. Då blev dom staplade på varandra.
> Jag vill ju sammanfoga hela toppen så det som ser ut som en hel bild.
> Antar att det finns fler element till diplaytaggen.

display:block fipplar bort mellanrummet mellan header-bilden och menyn :)
För att hålla ihop bilderna i menyn kan du sätta:

```
#header a {
display:block;
float:left;
}
```

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

## #10 — mackanz, 2010-03-25T21:29Z

nidron: Tackar tackar. Nu ser det ju nästan ut så som jag vill ha det
Nu håller jag med valideringen av sidan. 
Det är ju skitkul detta :)

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

## #11 — Compusa, 2010-03-25T21:35Z

> **[mackanz skrev:](https://www.webforum.nu/p/1501260)**
>
> Jo jag vet där med valideringen men alla är vi barn i början eller???
> Just nu koncentrerar jag mig på att få sidan att se ut som den ska.
> Eller i alla fall på en grundmall som jag kan använda mig utav.
> Sen får jag beta av valideringen.
>
> *Edit: Validation Output: 38 Errors*

Absolut, tänkte mest det kunde vara bra som hjälpmedel då du skrev att du skulle göra det enligt konstens alla regler.

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

## #12 — mackanz, 2010-03-25T21:42Z

compusa: Ja jag tänkte vara ordentlig av mig. Och nu förstår jag mer och mer hur allt hänger ihop, och hur man bör göra och inte göra.

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

## #13 — nidron, 2010-03-25T21:45Z

> **[mackanz skrev:](https://www.webforum.nu/p/1501267)**
>
> nidron: Tackar tackar. Nu ser det ju nästan ut så som jag vill ha det

np  :)

> **[mackanz skrev:](https://www.webforum.nu/p/1501267)**
>
> Nu håller jag med valideringen av sidan.

Håller med Compusa, att kontrollera att sidan validerar med jämna mellanrum kan minimera antalet utseende-fel, åtminstone i IE :)

> **[mackanz skrev:](https://www.webforum.nu/p/1501267)**
>
> Det är ju skitkul detta

Oh, I know  :birp

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

## #14 — mackanz, 2010-03-25T21:53Z

Nu validerar den rätt hos mig i alla fall :)

> This document was successfully checked as XHTML 1.0 Strict!

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

## #15 — tanten, 2010-03-26T08:46Z

Lite funderingar för att du ska komma en bit till i css-tänket...
En sak är att försöka få bort så mycket som möjligt av "design" i koden.
Och jag tycker att din logga hör dit.
Dessutom tror jag att du kommer få lite svårt med att utveckla din meny om du har den i header-diven.
Så mitt förslag blir att du delar upp det i en header-div och en meny-div. Och då kan din header bli så här:
 

```php
#header{
 position:relative; 
 height:131px; 
 background:url(bilder/top.gif) no-repeat  ; 
 width:100%;
 margin: 0px;
 padding: 0px;
}
```

För att sedan få din meny där du vill ha den utan mellanrum ska det räcka med att lägga till

```php
#menu  img {
float:left;
}
```

Jag gissar att du väldigt sällan kommer vilja ha border på dina bilder så i stället för att ha en class på varje bild så kan du lägga till 

```php
img {
border: 0px;
}
```

```
<div id="header">
</div>
<div id="menu">
<a href="index.asp"><img src="knapp_start.gif" alt="Startsidan" /></a>
osv...
</div>
```

Om du sedan börjar fundera på att ha menyn i en lista och ha hover-effekter så kan du fortsätta med att plocka bort bilder i html-koden och ha dem som bakgrundsbilder i css-filen... och då som classer.

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

## #16 — mackanz, 2010-03-26T09:09Z

Hejsan!
Tack för dina åsikter och förslag.

Ang bilder så kommer jag att vilja ha olika klasser för bilder eftersom jag kommer att ha ramar på en del bilder. Därför kommer jag ha lite olika klasser för bilder.

Ang menyn måste den se ut så där eftersom det är ett speciellt typsnitt i menyn. Därför måste den bestå av bilder.
Men skall fundera på att splitta upp headern och lägga menyn för sig som du skriver.

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

## #17 — tanten, 2010-03-26T10:11Z

Att använda classer på bilder är ofta onödigt...
Låt oss säga att du har ett galleri på dansbandsbilder...
och du vill ha en border på dem.
Det enklaste då är att lägga alla bilderna i en div... vi kallar den gallery
och då skapar vi ramen runt varje bild där med 
\#gallery img{border 1px solid #000;}
Här kan man då också lägga in marginaler och padding och float m.m. utan att behöva lägga till något i html-koden.
För att få bort border bara i menyn så kan du lägga till #header eller  #menu  framför den jag skrev som img så kan du radera classen i html-filen.

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

## #18 — mackanz, 2010-03-26T10:23Z

Aha nu förstår jag nog. 
Man gör en class som t,ex ofattar något i en viss div.

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

## #19 — tanten, 2010-03-26T10:54Z

Ja fast 
\#gallery img{border 1px solid #000;}
är ingen class.

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

## #20 — Fuel, 2010-03-26T13:17Z

> **[mackanz skrev:](https://www.webforum.nu/p/1501292)**
>
> Aha nu förstår jag nog. 
> Man gör en class som t,ex ofattar något i en viss div.

ID är ett unikt id till ett element & kan bara användas på 1 element på samma sida
CLASS kan du använda på flera element på samma sida

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/182950-mariginaler  
Nästa sida: https://www.webforum.nu/amne/html-css/182950-mariginaler/page2.md