<hr> met CSS
Dat snap ik dan allemaal wel, maar IE doet het natuurlijk weer anders als FF.
In FF zie je mooi een soort van scheidingslijn tussen de content en de footer. Dit wil ik ook in IE, maar in IE hou je een ruimte boven en onder de HR lijn.
Ook als ik de hoogte 1px geef, zonder borders etc. Op internet kon ik niet goed vinden wat ik wilde, want daar wilde ze het juist andersom hebben. Dus dat FF het net zoals IE zou doen.
Ik hoop dat iemand hiermee kan helpen.
Of is dit bijv niet mogelijk en moet ik met een div en een plaatje gaan werken?
Klik
Dit is de link van de site.
-edit-
De links die ik hieronder allemaal geplaatst heb kunnen niet meer kloppen bij mijn comments, omdat ik ze gewijzigd heb.
Gewijzigd op 01/01/1970 01:00:00 door J V
Gewijzigd op 01/01/1970 01:00:00 door Onbekend Onbekend
edit:
of misschien ook erbij zetten:
line-height:1px;
padding:0px;
border:0px solid;
Gewijzigd op 01/01/1970 01:00:00 door Terence Hersbach
dit keer stond er geen reclame. Heb je als html eigenschap noshade al toegevoegd? Mss werkt dat.
Gewijzigd op 01/01/1970 01:00:00 door Onbekend Onbekend
Als ik de border 0px meegeef, dan zie je in FF helemaal niets meer want in FF bestaat de HR lijn uit een border en in IE blijft hij gewoon staan, want daar trekken ze een lijn die dus uit line-height bestaat.
@tommy, ik weet juist niet wat jij bedoeld. Ik ben over je link gegaan, maar je wilt me blijkbaar iets duidelijk maken wat ik niet snap.
Lees even mijn edit.
Tommy schreef op 13.12.2007 23:32:
je link rekt de layout uit en er staat text onder de banner, ik typte: [.url=]klik hier[./url]
Lees even mijn edit.
Lees even mijn edit.
Oh oke, sorry. Ik check altijd even of mijn link niet te lang is, maar ik zag niets bij mij. Misverstandje dan.
-edit again-
Ik zie nu pas wat je bedoeld, of ik hem klikbaar wilde maken net zoals hieronder. Ik ben blond dus het kwartje valt af en toe met een parachuutje. Sorry :$
Maar ik heb het opgelost.
Het schijnt zo te zijn dat je de HR in een div moet plaatsen.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
div.hr {
height: 1px;
background-color: #ffffdb;
}
hr {
display: none;
}
height: 1px;
background-color: #ffffdb;
}
hr {
display: none;
}
Zo word nu mijn html code:
Code (php)
1
2
3
2
3
<div class="footer"><div class="hr"><hr></div>
<p>© 2007 Woonwerkwinkel 'de Dussel'</p>
</div>
<p>© 2007 Woonwerkwinkel 'de Dussel'</p>
</div>
bron: klik
Gewijzigd op 01/01/1970 01:00:00 door J V
Blanche schreef op 13.12.2007 23:40:
Is het niet veel makkelijker om je footer een border-top mee te geven?
Dit heb ik al geprobeerd, maar dan laat hij niets zien bij mij. Hij laat dan dus helemaal geen lijn meer zien.
Nu zie ik zoals ik het op de manier hierboven gedaan heb, dat het nog steeds niet helemaal zo is zoals ik het wil.
Hij moet er net zo uit zien zoals in FF, dat lijkt dus net alsof de content daar ophoud en er iets nieuws begint.
Ik weet alleen niet hoe je zoiets zou moeten maken.
Jordy schreef op 13.12.2007 23:45:
Dit heb ik al geprobeerd, maar dan laat hij niets zien bij mij. Hij laat dan dus helemaal geen lijn meer zien.
Nu zie ik zoals ik het op de manier hierboven gedaan heb, dat het nog steeds niet helemaal zo is zoals ik het wil.
Hij moet er net zo uit zien zoals in FF, dat lijkt dus net alsof de content daar ophoud en er iets nieuws begint.
Ik weet alleen niet hoe je zoiets zou moeten maken.
Blanche schreef op 13.12.2007 23:40:
Is het niet veel makkelijker om je footer een border-top mee te geven?
Dit heb ik al geprobeerd, maar dan laat hij niets zien bij mij. Hij laat dan dus helemaal geen lijn meer zien.
Nu zie ik zoals ik het op de manier hierboven gedaan heb, dat het nog steeds niet helemaal zo is zoals ik het wil.
Hij moet er net zo uit zien zoals in FF, dat lijkt dus net alsof de content daar ophoud en er iets nieuws begint.
Ik weet alleen niet hoe je zoiets zou moeten maken.
@ tommy, ga ik gelijk even doen!
Nou ik heb het even getest, maar in IE blijft er nog steeds een ruimte boven hangen. Ik weet niet waarom dat nou zo is.
klik
klik hier voor de oude situatie om te zien hoe ik het wil hebben in FF
Mods sorry voor de bump, dit ging per ongeluk. Had het even niet door.
Gewijzigd op 01/01/1970 01:00:00 door J V
Code (php)
1
border-top: 1px solid black;
Haal dan wel even die <hr> weg om het duidelijk te kunnen zien...
ps. Het probleem zit hem echter in de margin-bottom die je aan #content meegeeft. Die staat op 40px, maar zo hoog is je footer niet. Voeg dus ook nog eens deze regel aan .footer toe:
Code (php)
1
height: 40px;
Volgens mij moet dit je probleem oplossen. Je wilt waarschijnlijk je footer iets meer padding geven zodat de tekst beter uitkomt...
Gewijzigd op 01/01/1970 01:00:00 door Joren de Wit
En waarom zou boorder-top niet werken? Try firebug 4 ff
Blanche schreef op 13.12.2007 23:56:
@Jordy: zeker dat het toevoegen van een border-top aan .footer werkt. Voeg het volgende regeltje maar eens toe:
Haal dan wel even die <hr> weg om het duidelijk te kunnen zien...
ps. Het probleem zit hem echter in de margin-bottom die je aan #content meegeeft. Die staat op 40px, maar zo hoog is je footer niet. Voeg dus ook nog eens deze regel aan .footer toe:
Volgens mij moet dit je probleem oplossen. Je wilt waarschijnlijk je footer iets meer padding geven zodat de tekst beter uitkomt...
Code (php)
1
border-top: 1px solid black;
Haal dan wel even die <hr> weg om het duidelijk te kunnen zien...
ps. Het probleem zit hem echter in de margin-bottom die je aan #content meegeeft. Die staat op 40px, maar zo hoog is je footer niet. Voeg dus ook nog eens deze regel aan .footer toe:
Code (php)
1
height: 40px;
Volgens mij moet dit je probleem oplossen. Je wilt waarschijnlijk je footer iets meer padding geven zodat de tekst beter uitkomt...
klik voor border-top
klik voor hr in div geplaast (waarvan ik dacht dit is de oplossing)
@ tommy, ligt aan je ipod. Ik heb de site zo gemaakt dat als me site met een klein scherm op 768 weergeven. En bij elke grotere scherm op 960px. Zit je scherm daartussen, dan schaalt hij mee. Ik verwacht niet dat mensen op een ipod touch mijn site gaan bekijken :P. Hij klopt dus wel gewoon in andere browsers en die kleuren heb ik meegegeven om duidelijk te maken wat waar komt.
Als ik margin bottom toevoeg, is hij in IE weer met dat kleine stukje ruimte erboven en in FF ziet hij de margin niet. Als ik padding gebruik ziet hij het wel.
Deze is met margin bottom van 40 px en een footer van 40px
Gewijzigd op 01/01/1970 01:00:00 door J V
Blanche schreef op 14.12.2007 00:09:
Opgelost toch? Ik zou persoonlijk voor de border-top gaan, waarom een extra div toevoegen terwijl je die niet nodig hebt?
Daar heb je helemaal gelijk in, maar hoe krijg ik die border dan net zo als in FF of is dit onmogelijk? (ben wel pietje precies sorry)
Kijk hierboven even voor het probleem met margin.
Gewijzigd op 01/01/1970 01:00:00 door J V
Natuurlijk kun je die border een ander kleurtje geven, of zelfs een afbeelding gebruiken als je dat wilt. Dat is helemaal aan jezelf. Die 1px solid black was natuurlijk enkel een voorbeeldje...
Blanche schreef op 14.12.2007 00:23:
Ik zie maar heel weinig verschil tussen FF en IE bij het gebruik van die border-top?
Natuurlijk kun je die border een ander kleurtje geven, of zelfs een afbeelding gebruiken als je dat wilt. Dat is helemaal aan jezelf. Die 1px solid black was natuurlijk enkel een voorbeeldje...
Natuurlijk kun je die border een ander kleurtje geven, of zelfs een afbeelding gebruiken als je dat wilt. Dat is helemaal aan jezelf. Die 1px solid black was natuurlijk enkel een voorbeeldje...
Ja dat weet ik, maar ik ga wel klooien met die border top, om ervoor te zorgen dat die border er hetzelfde uit gaat zien als de HR lijn in FF.
Tot morgen want ik ga slapen. (over 6 uur me nest alweer uit)
Niek schreef op 14.12.2007 11:53:
Hier wel een mooi artikel over het stylen van de hr.
Ook voor verschillende browsers
Ook voor verschillende browsers
Bedankt voor de link :), maar deze had ik ook al gevonden. Door deze site had ik de hr in een div gezet.
Kijk maar naar de laatste opmerking daar. Hr met display none en de div een hoote meegeven.
Evengoed bedankt.
-edit-
Zelfs op die site zie je dat er meer ruimte tussen de letters boven en onder de HR zitten in IE dan in FF. Ik denk dat je hier niets aan kunt doen, dat IE gewoon een HR zo maakt en je daar niets aan kunt veranderen.
Ik ga proberen die border zo te maken dat hij er net zo uitziet als een standaard HR in FF.
Mocht ik problemen hebben meld ik ze uiteraard hierzo ;)
Gewijzigd op 01/01/1970 01:00:00 door J V