Permalänk

CSS, font problem

Håller på med ne hemsida och försöker få den att visa Arial Narrow som font.

Här är koden:

p1{ color: #FFF; font-family: "Arial Narrow", Arial, sans-serif; font-size: 16px;}

Det funkar i Chrome men i Firefox så envisas den med att visa Arial bold och i EI så visar den endast Arial med svart färg :S Förstår ingenting. Någon av er som gör?

Visa signatur

| MacBook Pro 2016 Touch Bar 15" |

| 16GB Ram DDR4 2133 MHz | i5 6500k | RX 480 4GB | ASUS Z170-A | Fractal Design XL | Corsair TX650W |

CITERA FÖR SVAR

Permalänk
Medlem

Vad står p1 för?

Pröva istället

p { color: #FFF; font-family: "Arial Narrow", Arial, sans-serif; font-size: 16px; }

alternativt

.p1 om det är en klass

<p class="p1">TEXT HÄR</p> .p1 { color: #FFF; font-family: "Arial Narrow", Arial, sans-serif; font-size: 16px; }

Visa signatur

Phenom II X6 1055t @ 3,5GHz
Sleeva.se »

Permalänk

Jag trodde att man kunde döpa om till te.x. p1,p2,p3 ext. funkar i alla fall att ändra properties och sånt då.

Skriver såklart i HTML såhär då

<p1>TEXT</p1>

Problemet är att när jag skriver något och bara har taggen

<p></p>

så hoppar hela min div ner ett steg. Det som är ännu mer konstigt är att om jag sätter en border på div:en jag placerar texten i då hoppar den inte ner :/

Om jag t.ex. lägger den i div:en navbox som i sin tur ligger i div:en main så hoppar den ner ett snäpp, ungefär som om man skulle trycka enter en gång.

HTML kod:

<div id="main"> ---Massa andra divvar med avslutande taggar på allihopa. <div id="navbox"> TEXT </div> </div>

CSS kod:

#main{ width: 880px; border: 2px solid #000; height: 100%; margin-left: auto; margin-right: auto; background-image: url(images/bg.png); background-repeat: no-repeat; background-color: #FFF; } #navbox{ height: 160px; width: 880px; background-image: url(images/navboxbg.png); background-repeat: no-repeat; }

Visa signatur

| MacBook Pro 2016 Touch Bar 15" |

| 16GB Ram DDR4 2133 MHz | i5 6500k | RX 480 4GB | ASUS Z170-A | Fractal Design XL | Corsair TX650W |

CITERA FÖR SVAR

Permalänk
Medlem

p1, p2, p3 osv är vad jag vet inte giltiga html-taggar. Blir fonten rätt om du definierar en p class?

Gör ett snabbt test

p.test { font-family: "Arial Narrow", sans-serif; color: #000; font-size: 30px; }

Och sen vart som helst på sidan

<p class="test">TEXTTEXTTEXT</p>

Jag får ingen bra bild över sidan uppbyggnad, är det möjligt att länka hela sidan med all kod?

En RESET CSS är också ett måste att använda, då återställs alla standardinställningar som kan skifta mellan olika webbläsare.
http://meyerweb.com/eric/tools/css/reset/

Visa signatur

Phenom II X6 1055t @ 3,5GHz
Sleeva.se »

Permalänk

Blir samma sak som med bara <p> tagg. Hela Div:en flyttas ner ett snäpp.

Däremot som jag använder <p1> så flyttas dne inte ner, jag har samma problem med webbläsarna oberoende vilken tagg jag använder.

Vart placerar jag in RESET CSS?

Här är mock-upen på sidan: http://www.megaupload.com/?d=0UUSDBDL

Visa signatur

| MacBook Pro 2016 Touch Bar 15" |

| 16GB Ram DDR4 2133 MHz | i5 6500k | RX 480 4GB | ASUS Z170-A | Fractal Design XL | Corsair TX650W |

CITERA FÖR SVAR

Permalänk
Medlem

Du måste sätta margin å padding till noll för p taggen.

Visa signatur

Kan din dator göra det här?

Permalänk

Åhh! :/ tack så mycket! var länge sen jag höll på med det här, behöver lite påminnelse på vissa saker.

Men fortfarande 2 frågor;

Hur funkar RESET CSS?
och
Varför visas fonten olika på olika webbläsare för?

EDIT: Hittade svar på varför fonten såg olika ut. Skrev såhär:

font-family: "Arial Narrow", Arial, sans-serif; font-stretch: condensed;

istället för såhär:

font-family: "Arial Narrow", Arial, sans-serif;

Firefox känner tydligen inte till "Arial Narrow" utan bara font-stretch: condensed; koden.

Visa signatur

| MacBook Pro 2016 Touch Bar 15" |

| 16GB Ram DDR4 2133 MHz | i5 6500k | RX 480 4GB | ASUS Z170-A | Fractal Design XL | Corsair TX650W |

CITERA FÖR SVAR

Permalänk
Medlem

Prövade själv lite snabbt med bara din kod (inte font-stretched) och både FF5 & IE9 kände av Arial Narrow rätt. Jobbigt med så många olika webbläsare :'(

Reset CSS inkluderar du i din vanliga css-fil. Antingen genom @import url("reset.css"); eller genom att helt enkelt klistra in all kod rakt upp och ner.

Vad Reset CSS gör är att nollställa alla marginaler, fonter osv osv. Så att till exempel H1, H2 osv inte är olika storlekar förrens du har sagt att de ska vara det. Dessutom får man bort marginaler från BODY & <p> som vissa webbläsare lägger till ett par pixlar.

Visa signatur

Phenom II X6 1055t @ 3,5GHz
Sleeva.se »