padding in css

Door Leen Strijk op 28-05-2006 12:27

1.061 views

Ik heb een box in css gemaakt
De achtergrond is layou maar een stukje met text moet veel kleiner zijn.
Dit wil ik met padding bereiken.
Nu wil het wel in explorer maar niet in firefox.
Daar loopt de tekst gewoon door de padding heen en in explorer niet.
Weet iemand raad voor mij?

div#rightmenu {
background-image: url(achtergrond/background_04.gif);
height: 553px;
width: 326px;
left: 624px;
top: 160px;
position: absolute;
padding-top: 110px;
padding-left: 20px;
padding-right: 110px;
padding-bottom: 340px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #A8C208;
}

R Roland Baas

28-05-2006 14:15

Als ik deze css bekijk zie ik dat de breedte en hoogte verschillen van elkaar. dit komt omdat FF padding bij de width en height optelt.

Om het dus in FF correct te krijgen moet je de padding - de height en width doen:

width: 326

padding-right: 110
padding-left: 20
--------- +
130

with min complete padding: 326 - 130 = 196

om het in FF en IE goed te krijgen gebruik ik meestal de

!important (zie google)

hoop dat dit t is wat je bedoelde! groet Roland.

b bart van der veen

28-05-2006 14:22

weer een slachtoffer van het box model zoek ook ff op css hacks

L Leen Strijk

28-05-2006 14:30

Ik moest het even een aantal keren lezen voor ik hem vatte.
Je bedoelde dat ik de width = 196 moet maken.

Maar dan is hij FF wel goed maar in IE weer niet.

Ik begrijp nou niet wat jij gebruik om het in allebei goed te krijgen.

@bart, ik zal even kijken

L Leen Strijk

28-05-2006 14:54

Is het niet makkelijke om een box op een box te zetten?

div#box1=groot ---en is bedoeld voor de achtergrond.

div#box2 = klein ---en hier kan dan de tekst gezet worden op de positie die je wil.
Ik neem aan dat je dan met z-index de kleine box zichtbaar kan maken.

L Leo

28-05-2006 14:59

!important is voor IE bedoelt, deze moet je dus even erbij zetten ;)

L Leen Strijk

28-05-2006 15:22

Ja nu heb ik hem.

Absoluut helemaal nieuw voor mij, die css hacks e.d.

Bedankt.

L Leo

28-05-2006 15:23

Snap wat je bedoelt, ik moet er ook nog mee aan de slag :! Vrijdag dus...

L Leen Strijk

28-05-2006 15:46

Maar deze !important kan je dus vaker inzetten.
Als je zoals ik eerst test in FF en het blijkt in IE niet goed te zijn.
Even !important er bij en klaar ben je.

Zeker weer te simpel gedacht natuurlijk:-(
Maar dat is voor later zorg.

Eerst biedt het perspectief voor mij.

R Roland Baas

28-05-2006 21:26

achter important kwam ik ook laatst pas.

ik gebruikte daarvoor :



html>body #divnaam {
	
}

wat overigens wel handig is als je heel veel moet veranderen. deze tag leest FF maar IE niet =)

L Leen Strijk

28-05-2006 21:44

Dit zou in mijn geval niet lukken denk ik.

Ik heb nl. 4 boxen met 4 achtergroden die mijn hele layout vormen.

Voor de kop, het menu was het niet zo'n punt maar de vierde wilde ik een klein tekst gedeelte in maken die ook niet gecentreerd was t.o.v. de box dan. wel de layout.

Maar die !important werkt perfect.

Reageren

Inloggen om te reageren