[CSS]Ambetante padding die niet goed is
Hey,
Ik ben al druk in de weer geweest met het voorbereiden van mijn nieuwe site. Zonder Paint gedoe :). Waarvoor mijn prestatie. Echter loop ik tegen het volgende probleem. Iedere keer als ik een <br> - <p> of wat dan ook toevoeg krijg ik last van ruimte's die niet weg te krijgen zijn. (weg wel maar niet echt OK)
Dit is de link
http://www.wouter.php-design.be/Nieuwdesign/
Nu zie je dat ik in het menu (links) een blauw vlekje heb.
Ik heb al gezocht om het weg te krijgen maar tevergeefs. Ik moet nog meer ruimte tussen hebben.
Kan iemand me helpen ?
http://www.wouter.php-design.be/Nieuwdesign/css.css
MVG
Scroll even verder, er is een nieuw probleem opgekomen.
Ik ben al druk in de weer geweest met het voorbereiden van mijn nieuwe site. Zonder Paint gedoe :). Waarvoor mijn prestatie. Echter loop ik tegen het volgende probleem. Iedere keer als ik een <br> - <p> of wat dan ook toevoeg krijg ik last van ruimte's die niet weg te krijgen zijn. (weg wel maar niet echt OK)
Dit is de link
http://www.wouter.php-design.be/Nieuwdesign/
Nu zie je dat ik in het menu (links) een blauw vlekje heb.
Ik heb al gezocht om het weg te krijgen maar tevergeefs. Ik moet nog meer ruimte tussen hebben.
Kan iemand me helpen ?
http://www.wouter.php-design.be/Nieuwdesign/css.css
MVG
Scroll even verder, er is een nieuw probleem opgekomen.
Gewijzigd op 01/01/1970 01:00:00 door Wouter K
Hey hello :-)
Misschien is dit iets voor je? http://developer.yahoo.com/yui/reset/
Standaard hebben browsers hun eigen implementatie van margins/paddings, om dit een beetje onder de duim te krijgen kun je, als een van de vele oplossingen, dit reset.css als stylesheet gebruiken.
Misschien is dit iets voor je? http://developer.yahoo.com/yui/reset/
Standaard hebben browsers hun eigen implementatie van margins/paddings, om dit een beetje onder de duim te krijgen kun je, als een van de vele oplossingen, dit reset.css als stylesheet gebruiken.
Graag wat uitleg ?.
Grtz.
Grtz.
Browsers, a'la IE6, IE7, Firefox etc. hebben ieders hun eigen style opgemaakt voor bepaalde elementen. Ik zeg niet dat elke browser dat doet, maar sommigen doen dat dus wel. Om toch een touw om dat probleem te kunnen knopen zou je een algemeen stylesheet kunnen importeren die alle geimplementeerde stylen override en een eigen default waarde geeft (0px for the win!). Wat je dan doet is:
Ik weet niet zeker of dit een oplossing is voor jouw probleem, maar volgens mij ligt het aan standaard margin/paddings van jouw browser. Dit is een oplossing om dat te kunnen verhelpen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
@import url('css/reset.css');
@import url('css/jou_stylesheet.css');
</style>
<!-- etc! -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
@import url('css/reset.css');
@import url('css/jou_stylesheet.css');
</style>
<!-- etc! -->
Ik weet niet zeker of dit een oplossing is voor jouw probleem, maar volgens mij ligt het aan standaard margin/paddings van jouw browser. Dit is een oplossing om dat te kunnen verhelpen.
Ik had het wel op iets anders gegokt. Maar toch bedankt ik test het zeker eens uit.
Iemand soms nog een idee? In geval dit niet werkt.
mvg
Iemand soms nog een idee? In geval dit niet werkt.
mvg
Edit:
1. dit ver..... mijn site volledig.
1. dit ver..... mijn site volledig.
Gewijzigd op 01/01/1970 01:00:00 door Wouter K
Je logintop geef je alleen:
#logintop {
background:#FFFFFF
}
bij #loginonder haal je alle styles weg.
#logintop {
background:#FFFFFF
}
bij #loginonder haal je alle styles weg.
#logintop{
background: url('logintop.gif');
width: 200px;
height: 30px;
background-color: #FFFFFF;
}
#loginonder{
background: url('loginbottom.gif');
width: 200px;
height: 30px;
background-color: #FFFFFF;
}
Euhm ? Validator erdoor gehaalt of dergelijke Jan ,?
background: url('logintop.gif');
width: 200px;
height: 30px;
background-color: #FFFFFF;
}
#loginonder{
background: url('loginbottom.gif');
width: 200px;
height: 30px;
background-color: #FFFFFF;
}
Euhm ? Validator erdoor gehaalt of dergelijke Jan ,?
je kunt ook gewoon de hoeveelheid padding aangeven in je css door
padding: waardepx waardepx waardepx waardepx;
en in plaats van waarde uiteraard de hoeveelheid pixels.
mocht je het niet weten, de eerste waarde is voor boven, dan rechts, dan onder en dan links (klokje rond dus)
hoop dat dit helpt.
en trouwens, je kan je css een stuk opschonen ook. note's toevoegen, algemene opmaak zoals lettertype in body, div ed zetten...
groetjes
padding: waardepx waardepx waardepx waardepx;
en in plaats van waarde uiteraard de hoeveelheid pixels.
mocht je het niet weten, de eerste waarde is voor boven, dan rechts, dan onder en dan links (klokje rond dus)
hoop dat dit helpt.
en trouwens, je kan je css een stuk opschonen ook. note's toevoegen, algemene opmaak zoals lettertype in body, div ed zetten...
groetjes
Ik weet niet egt zeker of je dit bedoelt maar met firebug kun je zien dat je de
<br /> buiten de div "link" hebt miss werkt het als je hem erin zet? of gaat het om dat andere blauwe stuk?
<br /> buiten de div "link" hebt miss werkt het als je hem erin zet? of gaat het om dat andere blauwe stuk?
'wouter:
#logintop{
background: url('logintop.gif');
width: 200px;
height: 30px;
background-color: #FFFFFF;
}
#loginonder{
background: url('loginbottom.gif');
width: 200px;
height: 30px;
background-color: #FFFFFF;
}
Euhm ? Validator erdoor gehaalt of dergelijke Jan ,?
background: url('logintop.gif');
width: 200px;
height: 30px;
background-color: #FFFFFF;
}
#loginonder{
background: url('loginbottom.gif');
width: 200px;
height: 30px;
background-color: #FFFFFF;
}
Euhm ? Validator erdoor gehaalt of dergelijke Jan ,?
Nee gekopieerd uit de FireBug extensie.
Met die van Jorn kwam ik dus wel op het juiste resultaat dat ik wil. Maar is het niet netjes om dit toch via css te regelen ? Nu staat hij immers wel correct..
Aanvoeging op Jan. -> Firebug geeft mij toch meer eigenschappen dan de jouwe ?
Aanvoeging op Jan. -> Firebug geeft mij toch meer eigenschappen dan de jouwe ?
Gebruik anders div's met class=spacer waarbij je in je css de exacte hoogte in percentages of pixels aan kan passen. Zit je niet zo vast aan die exactie enters of <p>.
Zelf Weten. Wist je dat je voor het opvullen van ruimtes in DIV een slecht cijfer krijgt ?.
Ok, Jongens probleem is weg.
Nu mijn volgend probleem = In mijn form zie je in IE een groot probleem met margin padding , en ik zou niet weten waar het ligt ?.
Kan iemand me helpen ?
Grtz
http://www.wouter.php-design.be/Nieuwdesign/
http://www.wouter.php-design.be/Nieuwdesign/css.css
Nu mijn volgend probleem = In mijn form zie je in IE een groot probleem met margin padding , en ik zou niet weten waar het ligt ?.
Kan iemand me helpen ?
Grtz
http://www.wouter.php-design.be/Nieuwdesign/
http://www.wouter.php-design.be/Nieuwdesign/css.css
Gewijzigd op 01/01/1970 01:00:00 door Wouter K
bump
Bump...
Ik zal eens kijken ...
Edit:
IE zal weer met de line-height liggen te klooien. Probeer maar eens line-height: 12px. Overigens gebruik je nu p tags waar je eigenlijk labels zou moeten gebruiken.
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Liefdevolle bump voor jan ;)
(aan de rest zie PM jan naar mij :p )
@Jan : Ik ben niet vertrouwd met labels.
(aan de rest zie PM jan naar mij :p )
@Jan : Ik ben niet vertrouwd met labels.
Gewijzigd op 01/01/1970 01:00:00 door Wouter K
Het ziet er nu zo uit bij je:
maar het zou zo moeten:
Code (php)
1
2
2
<p class="formlogin">Gebruikersnaam :</p>
<input class="input" type="text" name="Gebruikersnaam" value=""/>
<input class="input" type="text" name="Gebruikersnaam" value=""/>
maar het zou zo moeten:
Hoi.
Ik heb al 1 ding kunnen goed krijgen dankzij jan.
Dit is het onderste stuk zoals jullie kunnen zien is ok enkel aan de bovenkant van de login is in IE5->7(8) nog steeds een kleine margin.
De site is nog steeds de vinden op.
http://www.wouter.php-design.be/Nieuwdesign/
en de css
http://www.wouter.php-design.be/Nieuwdesign/css.css
Hoop op een spoedig antwoord.
Grtz
Ik heb al 1 ding kunnen goed krijgen dankzij jan.
Dit is het onderste stuk zoals jullie kunnen zien is ok enkel aan de bovenkant van de login is in IE5->7(8) nog steeds een kleine margin.
De site is nog steeds de vinden op.
http://www.wouter.php-design.be/Nieuwdesign/
en de css
http://www.wouter.php-design.be/Nieuwdesign/css.css
Hoop op een spoedig antwoord.
Grtz
Ik heb weer even een voorbeeld voor je gemaakt: redesign lay-out Wouter
Let vooral op de CSS; die kon een stuk simpeler.
Let vooral op de CSS; die kon een stuk simpeler.




