[CSS] voor dummies - deel 11

Hoi, ik ben net begonnen aan een nieuw siteje en loop tegen een probleem aan. Op http://chessatwork.leadhoster.com/ zie je dat het siteje goed wordt weergegeven in IE (hiermee bedoel ik: de tekst positioneert zich 'langs' het menu) maar in Firefox schuift de tekst onder het menu.

Mijn CSS code ziet er als volgt uit:

body {
margin:0px;
padding:0px;background-color:#B59292;
}
.boven{ background-color:#B59292;}
.zwart{ background-color:#000000; border-bottom:
#000000; border-bottom-style:solid;margin:0px;
padding:0px;}
.tekst{margin-top:50px; padding-left:25px; float:left;}

#menu {
font-family: Arial;
width: 150px;
padding: 0px; margin-top:50px; margin-left:15px; float:left;
}

#menu h1 {
display: block;
background-color:#666666;
font-size: 16px;
padding: 5px 0px 5px 5px;
border: 1px solid #000000;
color: #ffffff;
margin: 0px;
width:147px;
}

#menu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}

#menu ul li {
margin: 0px;
padding: 0px;
}

#menu ul li a {
font-size: 14px;
display: block;
border-bottom: 1px dashed #bbbbbb;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #000000;
width:150px;
}

#menu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}

Ik vermoed dat dit een vrij bekend probleem is en hoop dat er iemand weet hoe ik dit kan oplossen? Kan deze persoon mij ook de logica achter de oplossing uitleggen? Of eventueel doorverwijzen? Alvast bedankt

Het viel me op dat het menubalkje hier op fok meegaat. Ik ben nu ook bezig met een site waar me dat wel handig lijkt. Na ff de code bestudeerd te hebben bleek een simpele position:fixed; het te doen. Maarrrr mijn menu begint pas zo'n 150px vanaf de bovenkant. Ik wil dus dat ie blijft plakken aan de bovenkant zodra die dmv scrollen gepasseerd wordt.
Weet iemand hoe ik dit kan klaarspelen?

quote:

Op maandag 23 februari 2009 16:37 schreef Buonissimo het volgende:
Hoi, ik ben net begonnen aan een nieuw siteje en loop tegen een probleem aan. Op http://chessatwork.leadhoster.com/ zie je dat het siteje goed wordt weergegeven in IE (hiermee bedoel ik: de tekst positioneert zich 'langs' het menu) maar in Firefox schuift de tekst onder het menu.

Mijn CSS code ziet er als volgt uit:

[knip]
Ik vermoed dat dit een vrij bekend probleem is en hoop dat er iemand weet hoe ik dit kan oplossen? Kan deze persoon mij ook de logica achter de oplossing uitleggen? Of eventueel doorverwijzen? Alvast bedankt

Je .tekst moet een breedte hebben, in feite geeft FF het goed weer

quote:

Op maandag 23 februari 2009 16:56 schreef ikJur het volgende:
Het viel me op dat het menubalkje hier op fok meegaat. Ik ben nu ook bezig met een site waar me dat wel handig lijkt. Na ff de code bestudeerd te hebben bleek een simpele position:fixed; het te doen. Maarrrr mijn menu begint pas zo'n 150px vanaf de bovenkant. Ik wil dus dat ie blijft plakken aan de bovenkant zodra die dmv scrollen gepasseerd wordt.
Weet iemand hoe ik dit kan klaarspelen?

Heeft je body of de parent-div van je menu-div geen padding of margin?

quote:

Op maandag 23 februari 2009 17:17 schreef Chanty87 het volgende:

Heeft je body of de parent-div van je menu-div geen padding of margin?

(is trouwens een ul ipv een div maar dat maakt geen verschil) het menu staat in een container div die een heeft een margin: 10px auto; om te centreren, hier kan ik dus vrij weinig aan veranderen.

misschien werkt: html { margin: 100px auto;} #header { margin: 0 auto; margin-top: -100px; } #menu { position: fixed; top: 0px;)

Dus dat je de viewport 100px naar beneden verplaatst, de header (of wat anders) 100 in de min zet, en zodoende het menu of de 'nieuwe' bovenkant van de pagina plaatst. Negatieve waarden worden volgens mij niet meegenomen bij het scrollen.

quote:

Op maandag 23 februari 2009 17:27 schreef ikJur het volgende:

[..]

(is trouwens een ul ipv een div maar dat maakt geen verschil) het menu staat in een container div die een heeft een margin: 10px auto; om te centreren, hier kan ik dus vrij weinig aan veranderen.

En als je die ul nou uit de container haalt?

wacht ik ga t zooitje even online zetten dat praat wat makkelijker

@n8n
een snelle test werkte niet maar wellicht werkt het.

(ff in code voor google)
daar zie je het menu zoals je ziet een stukje van de bovenkant van de pagina. zodra het menu de top raakt zeg maar wil ik dat ie blijft plakken. Ook als je weer terug scrolled moet ie terug naar z'n originele plek.

de site is trouwens van m'n moeder die heeft een trimsalon :p

de manier van n8n moet misschien wel werken alleen kan ik niet zomaar een margin op de html geven omdat ik op de body een border-top heb (dat blauwe streepje bovenaan.

border-top op de html

edit, nuffsaid dat werkt alleen met een padding
misschien dan html { border-top } body { margin: 100px auto; } enz...

quote:

Op maandag 23 februari 2009 18:00 schreef n8n het volgende:
border-top op de html

edit, nuffsaid dat werkt alleen met een padding
misschien dan html { border-top } body { margin: 100px auto; } enz...

het werkt niet zodra ik top:0; geef blijft ie aan de bovenkant hangen. top overruled alles gewoon.
ik denk dat ik naar een javascript oplossing moet kijken. iets met jquery ofzo.

Ik ben op zoek naar een script waarbij tekst veranderd als je er over heen gaat met de muis.

Dus je hebt een afbeelding en daar heb ik tekst op staan. Nu wil ik dus dat als je met de muis over de tekst gaat dat de tekst veranderd, en dus niet het plaatje.. Ik krijg niets gevonden met google.

CSS:


HTML:


Heb het niet getest, maar dit zou moeten werken. Wel kans dat je verspringende elementen krijgt, maar dan zou je ".element" een vaste hoogte/breedte moeten geven.

Daarnaast moet je nog wel even een Javascriptje voor IE6 maken, aangezien die geen hover ondersteunt op elementen die geen <a> zijn.

De inhoud van de tekst of de opmaak?

quote:

Op woensdag 25 februari 2009 14:13 schreef PimD het volgende:
CSS:
[ code verwijderd ]

HTML:
[ code verwijderd ]

Heb het niet getest, maar dit zou moeten werken. Wel kans dat je verspringende elementen krijgt, maar dan zou je ".element" een vaste hoogte/breedte moeten geven.

Daarnaast moet je nog wel even een Javascriptje voor IE6 maken, aangezien die geen hover ondersteunt op elementen die geen <a> zijn.

Helemaal top . Dank je.

Wat mij betreft zou je dit gewoon met JavaScript moeten doen; het is gedrag en geen styling.

quote:

Op woensdag 25 februari 2009 14:29 schreef Roy_T het volgende:
Wat mij betreft zou je dit gewoon met JavaScript moeten doen; het is gedrag en geen styling.

in 1998 ja tegenwoordig zijn hovers het best met css te fixen

lama

[ Bericht 99% gewijzigd door ikJur op 25-02-2009 15:26:59 ]

quote:

Op woensdag 25 februari 2009 14:34 schreef ikJur het volgende:

in 1998 ja tegenwoordig zijn hovers het best met css te fixen

Dat weet ik lolbroek, ik vraag me alleen of of je dit (het vervangen van een tekst in deze context) door CSS moet laten doen. Scheiding van structuur, gedrag en presentatie enzo. Semantiek, etc. Je kent het wel.

quote:

Op woensdag 25 februari 2009 14:46 schreef Roy_T het volgende:

[..]

Dat weet ik lolbroek, ik vraag me alleen of of je dit (het vervangen van een tekst in deze context) door CSS moet laten doen. Scheiding van structuur, gedrag en presentatie enzo. Semantiek, etc. Je kent het wel.

ja eigenlijk heb je wel gelijk in deze context. zeker omdat het met css toch niet gaat werken in ie6.

Als het nou het uitklappen van een menu is (zoals suckerfish), dan zou ik CSS prima vinden (icm JS voor IE6), omdat het dan gaat om het tonen van data. Hier gaat het echter om het bewerken van data, vandaar

quote:

Op woensdag 25 februari 2009 15:47 schreef Roy_T het volgende:
Als het nou het uitklappen van een menu is (zoals suckerfish), dan zou ik CSS prima vinden (icm JS voor IE6), omdat het dan gaat om het tonen van data. Hier gaat het echter om het bewerken van data, vandaar

ja jquery leent zich erg goed voor het verwijderen of tonen van attributes.

Bijvoorbeeld, of een willekeurig andere library

quote:

Op woensdag 25 februari 2009 14:29 schreef Roy_T het volgende:
Wat mij betreft zou je dit gewoon met JavaScript moeten doen; het is gedrag en geen styling.

Mwah... aan de ene kant ben ik het met je eens dat content/gedrag/structuur/etc zo gescheiden mogelijk moet blijven, maar als iets met CSS simpel op te lossen is vind ik het ook weer onzin om het dan met Javascript te gaan doen...

Sowieso, een :hover is dan toch ook gedrag? Een hover op een link waarbij je de kleur aanpast of de text-decoration weg haalt doe je ook niet met Javascript... Maar je hebt op zich gelijk dat het voor het tónen van data wel zou 'mogen', maar het echt aanpassen van de tekst zelf is inderdaad minder mooi om het zo te doen.

quote:

Op woensdag 25 februari 2009 16:25 schreef PimD het volgende:

Sowieso, een :hover is dan toch ook gedrag? Een hover op een link waarbij je de kleur aanpast of de text-decoration weg haalt doe je ook niet met Javascript...

Dan heb je het over de weergave van een element, dus de fysieke kenmerken. Dat is imo iets anders dan de daadwerkelijke inhoud. En los daarvan zou je het imo dat echt met puur CSS moeten doen (met de content property), en niet op bovenstaande manier. Zo verneuk je je structuur (HTML) namelijk ook nog eens

Weet iemand wat ik hier fout doe

<A HREF="#" onmouseover="document.but.src='menu/categorieenhover.gif'" onmouseout="document.but.src='menu/categorieen.gif'">
<IMG SRC="menu/categorieen.gif" NAME="but" BORDER="0" ALT="...">
</A>