Kom ihåg mig?
Home Menu

Menu


När <br><br> är för stort och <br> för litet

Ämnesverktyg Visningsalternativ
Oläst 2013-10-12, 11:44 #1
bird200 bird200 är inte uppkopplad
Medlem
 
Reg.datum: Nov 2003
Inlägg: 166
bird200 bird200 är inte uppkopplad
Medlem
 
Reg.datum: Nov 2003
Inlägg: 166
Standard När <br><br> är för stort och <br> 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 <br><br> mellan rubriken och bilden blir avståendet för stort och när jag skriver <br> så blir avståendet för litet.

Finns det någon annan kod som liknar <br><br> som gör avståendet lite mindre? Kan man skriva något som typ <br size="70%"><br size="70%"> (just denna kod finns ju inte, men kanske finns någon liknande?
bird200 är inte uppkopplad   Svara med citatSvara med citat
Oläst 2013-10-12, 12:10 #2
Networks avatar
Network Network är inte uppkopplad
Mycket flitig postare
 
Reg.datum: Jul 2008
Inlägg: 569
Network Network är inte uppkopplad
Mycket flitig postare
Networks avatar
 
Reg.datum: Jul 2008
Inlägg: 569
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
Network är inte uppkopplad   Svara med citatSvara med citat
Oläst 2013-10-12, 13:26 #3
bird200 bird200 är inte uppkopplad
Medlem
 
Reg.datum: Nov 2003
Inlägg: 166
bird200 bird200 är inte uppkopplad
Medlem
 
Reg.datum: Nov 2003
Inlägg: 166
Citat:
Ursprungligen postat av Network Visa inlägg
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?
bird200 är inte uppkopplad   Svara med citatSvara med citat
Oläst 2013-10-12, 13:45 #4
pelmereds avatar
pelmered pelmered är inte uppkopplad
Har WN som tidsfördriv
 
Reg.datum: May 2010
Inlägg: 1 342
pelmered pelmered är inte uppkopplad
Har WN som tidsfördriv
pelmereds avatar
 
Reg.datum: May 2010
Inlägg: 1 342
Citat:
Ursprungligen postat av bird200 Visa inlägg
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;
}

Senast redigerad av pelmered den 2013-10-12 klockan 13:50
pelmered är inte uppkopplad   Svara med citatSvara med citat
Oläst 2013-10-13, 20:21 #5
coredevs avatar
coredev coredev är inte uppkopplad
Bara ett inlägg till!
 
Reg.datum: Sep 2007
Inlägg: 1 554
coredev coredev är inte uppkopplad
Bara ett inlägg till!
coredevs avatar
 
Reg.datum: Sep 2007
Inlägg: 1 554
Citat:
Ursprungligen postat av bird200 Visa inlägg
Jag har ett designproblem på min hemsida. Jag har en bild ovanför en rubrik och när jag lägger in <br><br> mellan rubriken och bilden blir avståendet för stort och när jag skriver <br> så blir avståendet för litet.

Finns det någon annan kod som liknar <br><br> som gör avståendet lite mindre? Kan man skriva något som typ <br size="70%"><br size="70%"> (just denna kod finns ju inte, men kanske finns någon liknande?
I princip så skall man aldrig använda <br /><br />. 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 <p>...</p><p>...</p> för att dela upp din text i stycken istället för att köra <br /><br /> 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.

Senast redigerad av coredev den 2013-10-13 klockan 20:26
coredev är inte uppkopplad   Svara med citatSvara med citat
Svara


Aktiva användare som för närvarande tittar på det här ämnet: 2 (0 medlemmar och 2 gäster)
 

Regler för att posta
Du får inte posta nya ämnen
Du får inte posta svar
Du får inte posta bifogade filer
Du får inte redigera dina inlägg

BB-kod är
Smilies är
[IMG]-kod är
HTML-kod är av

Forumhopp


Alla tider är GMT +2. Klockan är nu 03:35.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson
 
Copyright © 2017