<hr> met CSS

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

J V

J V

13/12/2007 23:12:00
Quote Anchor link
Ik weet dat je je HR met css kunt stylen.
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
 
PHP hulp

PHP hulp

05/11/2024 16:33:29
 
Onbekend Onbekend

Onbekend Onbekend

13/12/2007 23:16:00
Quote Anchor link
Kun je even met [url=] werken? Kan je vraag niet lezen.
Gewijzigd op 01/01/1970 01:00:00 door Onbekend Onbekend
 
Terence Hersbach

Terence Hersbach

13/12/2007 23:17:00
Quote Anchor link
margin:0px; gebruiken denk ik

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
 
Onbekend Onbekend

Onbekend Onbekend

13/12/2007 23:21:00
Quote Anchor link
Met de html atributen kun je hem normaal opmaken, geen css voor nodig denk ik. Nogmaals: heb je vraag maar half gelezen xD

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
 
J V

J V

13/12/2007 23:26:00
Quote Anchor link
Margin en padding hebben geen nut. Die hoogte ook niet, hij blijft gewoon 1 px hoog met een ruimte boven en onder de HR lijn.
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.
 
Onbekend Onbekend

Onbekend Onbekend

13/12/2007 23:32:00
Quote Anchor link
je link rekt de layout uit en er staat text onder de banner, ik typte: [.url=]klik hier[./url]

Lees even mijn edit.
 
J V

J V

13/12/2007 23:39:00
Quote Anchor link
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.

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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
div.hr {
height: 1px;
background-color: #ffffdb;
}

hr {
display: none;
}

Zo word nu mijn html code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<div class="footer"><div class="hr"><hr></div>        
<p>&copy; 2007 Woonwerkwinkel 'de Dussel'</p>
</div>


bron: klik
Gewijzigd op 01/01/1970 01:00:00 door J V
 
Joren de Wit

Joren de Wit

13/12/2007 23:40:00
Quote Anchor link
Is het niet veel makkelijker om je footer een border-top mee te geven?
 
Onbekend Onbekend

Onbekend Onbekend

13/12/2007 23:42:00
Quote Anchor link
Ja dacht ik ook aan, maar wil je even kijken ofzoiets het met noshade ook werkt voor mijn welzijn?
 
J V

J V

13/12/2007 23:45:00
Quote Anchor link
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.
 
J V

J V

13/12/2007 23:46:00
Quote Anchor link
Jordy schreef op 13.12.2007 23:45:
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
 
Joren de Wit

Joren de Wit

13/12/2007 23:56:00
Quote Anchor link
@Jordy: zeker dat het toevoegen van een border-top aan .footer werkt. Voeg het volgende regeltje maar eens toe:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
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
 
Onbekend Onbekend

Onbekend Onbekend

14/12/2007 00:01:00
Quote Anchor link
is je site nou zo lelijk of komt het omdat ik op ipod er naar kijk?

En waarom zou boorder-top niet werken? Try firebug 4 ff
 
J V

J V

14/12/2007 00:05:00
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
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
 
Joren de Wit

Joren de Wit

14/12/2007 00:09:00
Quote Anchor link
Opgelost toch? Ik zou persoonlijk voor de border-top gaan, waarom een extra div toevoegen terwijl je die niet nodig hebt?
 
J V

J V

14/12/2007 00:17:00
Quote Anchor link
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
 
Joren de Wit

Joren de Wit

14/12/2007 00:23:00
Quote Anchor link
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...
 
J V

J V

14/12/2007 00:29:00
Quote Anchor link
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...

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)
 
Joren de Wit

Joren de Wit

14/12/2007 00:30:00
Quote Anchor link
Oke, succes in ieder geval ;)
 
Niek Weevers

Niek Weevers

14/12/2007 11:53:00
Quote Anchor link
Hier wel een mooi artikel over het stylen van de hr.
Ook voor verschillende browsers
 
J V

J V

14/12/2007 11:56:00
Quote Anchor link
Niek schreef op 14.12.2007 11:53:

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
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.