WN - När är för stort och för litet

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - När är för stort och för litet (https://www.wn.se/forum/showthread.php?t=1059434)

När är för stort och för litet

Jag har ett designproblem på min hemsida. Jag har en bild ovanför en rubrik och när jag lägger in mellan rubriken och bilden blir avståendet för stort och när jag skriver så blir avståendet för litet.

Finns det någon annan kod som liknar som gör avståendet lite mindre? Kan man skriva något som typ (just denna kod finns ju inte, men kanske finns någon liknande?

Du kan lösa det med taggar som margin/padding. t.ex.

.bild-rubrik {margin-bottom: 20px;}

http://www.w3schools.com/cssref/play...om&preval=10px

Citat:

Ursprungligen postat av Network (Inlägg 20478971)

Du kan lösa det med taggar som margin/padding. t.ex.

.bild-rubrik {margin-bottom: 20px;}

http://www.w3schools.com/cssref/play...om&preval=10px

Kan jag även skriva följande: <h1 margin-top: 20px>

??

Hur gör jag om jag vill definera H1 taggen så att den lämnar ett tomt utrymme ovanför men inte nedanför?

Citat:

Ursprungligen postat av bird200 (Inlägg 20478974)

Kan jag även skriva följande: <h1 margin-top: 20px>

??

Hur gör jag om jag vill definera H1 taggen så att den lämnar ett tomt utrymme ovanför men inte nedanför?

HTML-kod:

<h1 style="margin: 20px 0 0 0;">

Första värdet är top, andra right, tredje bottom och fjärde och sista är left.

Det är dock oftast bättre att lägga till en klass såhär:

HTML-kod:

<h1 class="margin-top">

Och sen ha det här i en CSS-fil:

Kod:

.margin-top 

{

    margin: 20px 0 0 0;

}

Citat:

Ursprungligen postat av bird200 (Inlägg 20478968)

I princip så skall man aldrig använda . Varför inte undrar du... Jo för att börja basic, en sjysst markup bygger man upp såhär:

Kod:

<h1>Rubrik</h1>

<p>Detta är det första stycket, och genom att omsluta text med p-taggen så får jag ett snyggt upplägg på min markup.</p>

<p>Detta är det andra stycket, här vill jag citera något och då vill jag tvinga fram en ny rad<br />

- XHTML är bra, säger folk på sta'n.</p>

Sedan fixar du marginaler & padding i din css-mall:

Kod:

h1 { margin-bottom: 10px; }

p { margin-top: 2px; margin-bottom: 10px; padding-bottom: 5px; }

Du kan även (istället / som komplement till att lägga stilarna i din css-mall) använda style-taggen på markup-elementet:

Kod:

<h1 style="margin-bottom: 10px;">Rubrik</h1>

<p style="margin-top: 2px; margin-bottom: 10px; padding-bottom: 5px;">Detta är det första stycket, och genom att...</p>

Genom att anävnda ...... för att dela upp din text i stycken istället för att köra och man kan väl enkelt säga att det är så (x)html är tänkt att användas. Även Word funkar så nuförtiden. Tycker du enter så får du inte en radbrytning utan ett nytt stycke.

Så för att svara på din fråga, skulle du vilja öka avstånded mellan t.ex. en rubrik och en bild så kan du göra enligt följande:

Kod:

<h1 style="margin-bottom: 10px;">Rubrik</h1>

<img src="/min/bild.jpg" alt="Min Bild" style="margin-top: 20px; " />

Där kan du pilla på margin-top och margin-bottom så det passar dig. Detta sätt är mycket bättre för webbläsaren och så mycket mer logiskt för dig när du väl har gått över till det sättet att jobba. :)