Heading utan mellanrum till stycke..

Hej!
Är ingen direkt hejare på CSS direkt. Har en fråga:

1. På rubrikerna på min sida så har jag ex Heading 3 i min CSS. Dock så händer det att jag ej vill ha mellanrum mellan rubrik och stycketext. (Heading3 och stycketext). Kör jag en <br> så blir det heading3 på även stycketexten och det vill jag ej. :-). Kör jag <p> så blir det mellanrum jag ej vill ha. Hur löser jag det här på bästa sätt?

h3
{
  padding:0px;
}

En bra idé är att först "avmarginalisera" alla element som typiskt får olika marginal i olika webbläsare, plus en del andra. Då är dom nollade från början:

h1, h2, h3, h4, h5, h6, p, form, ul, li, img, input {
margin:0px;
padding:0px 
}

Sen kan man fibbla med varje element lite lättare. Vill du ge OLIKA h3-taggar OLIKA marginaler, så ge dom olika klasser:

.enaStilen {
margin-bottom:10px;
}
.andraStilen {
margin-bottom:20px;
}

Likaså med p-taggarna. Ge dom olika klasser beroende på hur du vill ha marginalerna.

Förresten, använder du Dreamweaver? I så fall; Om du är i "design view" och trycker "enter", så blir det en ny h3-tagg skrev du. Det spelar ingen roll. Skriv färdigt ändå. Sen markerar du texten du vill göra om till en <p>, högerklickar och väljer "paragraph format -> paragraph"

Danne V:
Jo använder Dreamweaver.
Står jag på högersida om rubriken heading 3 och trycker Enter så blir det avstånd <p>(2 radmatningar). Vill ej ha avståndet som <p> ger.

Trycker jag Shift enter om jag står på höger sida om rubriken så blir stycketexten också heading 3. Vill ej ha avståndet men när jag tycker shift enter så får ju som sagt stycketexten också heading 3. Det vill jag ej.

Ska jag köra en <p> och fixa avståndet i CSS-mallen?

Har fuskat genom att ej ha heading3 på rubrikerna ovan stycketexterna och istället angivit font-taggar på sidan som är röd färg och kört shift enter efter rubriken(<br>) för slippa avståndet. Då funkar det men jag vill inte fuska genom lägga in font-taggar på sidan.

Mvh

Kalle M skrev:

Danne V:
Jo använder Dreamweaver.
Står jag på högersida om rubriken heading 3 och trycker Enter så blir det avstånd <p>(2 radmatningar). Vill ej ha avståndet som <p> ger.

Trycker jag Shift enter om jag står på höger sida om rubriken så blir stycketexten också heading 3. Vill ej ha avståndet men när jag tycker shift enter så får ju som sagt stycketexten också heading 3. Det vill jag ej.

Ska jag köra en <p> och fixa avståndet i CSS-mallen?

Har fuskat genom att ej ha heading3 på rubrikerna ovan stycketexterna och istället angivit font-taggar på sidan som är röd färg och kört shift enter efter rubriken(<br>) för slippa avståndet. Då funkar det men jag vill inte fuska genom lägga in font-taggar på sidan.

Mvh

Först ska vi reda ut ett vanligt missförstånd:
Glöm allt vad "radmatningar" heter tills vidare. Det är lätt att tänka "skrivmaskin" eller låta ögat bestämma vad som händer. Ögat har nämligen fel. Det är den underliggande koden det handlar om.

<p> betyder ny paragraf (eller nytt "stycke" på svenska). Alla webbläsare och Dreamweaver lägger automatiskt in ett avstånd till föregående och efterkommande element vilket ser ut som "2 radmatningar". Det är det inte. Det är inga radmatningar alls - bara marginaler. Genom att använda den där generella stilen med 0px för en massa taggar, så eliminerade vi det. Men vi kan lika gärna ta bort p:et ur den stilen och skapa en särskild stil för alla paragrafer, t.ex.

p {
margin-top: 5px;
margin-bottom:0px
}

eller vad man nu vill ha.

Om användaren har en annan storlek på sina fonter eller nån annan inställning än vad du har i dina webbläsare, så kommer texten att flyta fint för honom. Radbrytning kommer att ske där det passar osv.

<br /> eller <br> är däremot en "riktig" radbrytning och görs INNE i en p-tag, eller h-tag (eller nån annanstans där du har text). Nackdelen är att texten ALLTID kommer att brytas där. Har en användare en annan storlek på fonten, så kan det bli helt knäppa brytningar (öka föntstorleken i din webbläsare och se!).

Så JA. Du ska använda <p> (alltså bara trycka Enter utan Shift) och justera avståndet i stilmallen. Se exemplet ovan. Ta bort "p" ur den raddan med flera element som jag nollade och skapa en egen stil för taggen som i rutan ovan.