[CSS] voor dummies - deel 11

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_66378003
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
http://blog.netmax-webdesign.be
pi_66378627
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?
0023
pi_66379330
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?
シ
pi_66379665
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.
0023
  maandag 23 februari 2009 @ 17:38:53 #155
230788 n8n
Pragmatisch
pi_66380027
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.
“Specialization is for insects”.—Robert Heinlein
pi_66380151
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?
シ
pi_66380360
wacht ik ga t zooitje even online zetten dat praat wat makkelijker

@n8n
een snelle test werkte niet maar wellicht werkt het.
0023
pi_66380611
1http://trimsalonpluto.nl/2/info/ 
(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.
0023
  maandag 23 februari 2009 @ 18:00:05 #159
230788 n8n
Pragmatisch
pi_66380700
border-top op de html

edit, nuffsaid dat werkt alleen met een padding
misschien dan html { border-top } body { margin: 100px auto; } enz...
“Specialization is for insects”.—Robert Heinlein
pi_66381190
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.
0023
pi_66444856
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.
pi_66445016
CSS:
1
2
3
4
5
6
7
8
9
10
11		span.element span.tekst2 {
    display:none;
}

span.element:hover span.tekst1 {
    display:none;
}

span.element:hover span.tekst2 {
     display:block;
}


HTML:
1
2
3
4		<span class="element">
   <span class="tekst1">Dit is tekst 1</span>
   <span class="tekst2">Dit is tekst 2</span>
</span>


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.
Bleuh.
  woensdag 25 februari 2009 @ 14:13:45 #163
230788 n8n
Pragmatisch
pi_66445038
De inhoud van de tekst of de opmaak?
“Specialization is for insects”.—Robert Heinlein
pi_66445566
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.
pi_66445665
Wat mij betreft zou je dit gewoon met JavaScript moeten doen; het is gedrag en geen styling.
pi_66445860
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
0023
pi_66445899
lama

[ Bericht 99% gewijzigd door ikJur op 25-02-2009 15:26:59 ]
0023
pi_66446358
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.
pi_66448562
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.
0023
pi_66448754
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
pi_66449372
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.
0023
pi_66449530
Bijvoorbeeld, of een willekeurig andere library
pi_66450296
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.
Bleuh.
pi_66450837
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
pi_66478450
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>
pi_66479120
Ja, je gebruikt geen CSS.

Is het een item in een menu ofzo?
pi_66479285
Ja staat in een li, die dan weer in de class menu staat...

Maar dit zou toch sowieso zonder css moeten werken?
pi_66479932
Laat maar... is al gelukt. Oplossing:

<a href="#"><img src="menu/categorieen.gif" border="0" onmouseover="javascript:this.src='menu/categorieenhover.gif';" onmouseout="javascript:this.src='menu/categorieen.gif';"/></a>
  donderdag 26 februari 2009 @ 14:49:39 #179
230788 n8n
Pragmatisch
pi_66481210
Waarom zou je dit met javascript oplossen?
“Specialization is for insects”.—Robert Heinlein
pi_66481801
quote:
Op donderdag 26 februari 2009 13:58 schreef Nashje het volgende:
Ja staat in een li, die dan weer in de class menu staat...

Maar dit zou toch sowieso zonder css moeten werken?
Dat het werkt, wil niet zeggen dat het goed is

Als het gaat om een plaatje als menu item wat veranderd als je er overheen gaat zou ik dit doen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20		HTML

<ul>
    <li><a href="link" class="category_name">Naam van categorie</a></li>
</ul>


CSS

a.category_name {
    width: #px;
    height: #px;
    display: block;
    text-indent: -9999px;
    background: url(plaatje.gif);
}

a.category_name:hover {
    background: url(plaatje_over.gif);
}


Voordeel: het ziet eruit hoe jij wilt, het werkt zonder JS én is semantisch correct (en dus toegankelijk). Google bijvoorbeeld ziet gewoon de link, en grafische user agents de afbeelding.
pi_66482395
En als het veel links zijn zou ik de normale en de hover in één afbeelding zetten en de a:hover een background-position:bottom meegeven bijvoorbeeld. De ul krijgt dan een class mee uiteraard.

Nja, you snep
pi_66482550
quote:
Op donderdag 26 februari 2009 15:06 schreef Roy_T het volgende:

[..]

Dat het werkt, wil niet zeggen dat het goed is

Als het gaat om een plaatje als menu item wat veranderd als je er overheen gaat zou ik dit doen:
[ code verwijderd ]

Voordeel: het ziet eruit hoe jij wilt, het werkt zonder JS én is semantisch correct (en dus toegankelijk). Google bijvoorbeeld ziet gewoon de link, en grafische user agents de afbeelding.
Je hoeft opzich niet eens 2 plaatjes te gebruiken, gewoon het eerste plaatje boven, tweede onder en in de css oplossen met de background position

Edit: durr spuit 11
シ
  donderdag 26 februari 2009 @ 15:25:34 #183
230788 n8n
Pragmatisch
pi_66482578
quote:
Op donderdag 26 februari 2009 15:20 schreef veldmuis het volgende:
En als het veel links zijn zou ik de normale en de hover in één afbeelding zetten en de a:hover een background-position:bottom meegeven bijvoorbeeld. De li krijgt dan een class mee uiteraard.

Nja, you snep
Dit kan ook met alle knoppen in 1 afbeelding, scheelt requests naar de server en net zo belangrijk, de afbeelding is pre-loaded dus je hebt geen geflikker bij :hover als gevolg.
“Specialization is for insects”.—Robert Heinlein
pi_66482582
Als het veel links zijn, zeg 10, dan zou je om het te optimaliseren alle 20 states in één afbeelding kunnen proppen en gebruik maken van background-position (oftewel: CSS sprites). Leek me iets te ingewikkeld voor Nashje, met alle respect . Vandaar dat ik het niet noemde.

edit: wat n8n ook zegt dus
pi_66482997
I snep .

Maar als je al die links in 1 plaatje ramt en gaat werken met background-position is het dan niet één groot gevecht tussen Firefox en IE? Die ervaring heb ik nl. met positions.
pi_66483950
Hoe krijg ik nu btw een horizontaal menu? display: inline heb ik, maar dan staat de hele meuk nog op elkaar. Een padding-right aan de a meegeven komt ook niet super uit.
pi_66484158
n.a.v. dit topic: Website dilemma waaruit blijkt dat frames niet echt meer de bedoeling zijn, wordt div als alternatief gegeven.
Kun je in een div ook tekst tonen die in een ander htmlletje staat? Het voordeel van frames vond ik altijd dat je je website dus mooi op kon delen in een header.html, menu.html en body.html.
zoals het potje thuis poept, poept het nergens
_-*-_-*_-*-_-*_-*-_-*_-*-_-*_-*-_-*_-*-_-*_-*-_-*
ACWW NWFC id: 2921-2609-9160 nick: tbone Town: Finetown
Fiets
pi_66484298
quote:
Op donderdag 26 februari 2009 16:04 schreef kareltje_de_grote het volgende:
n.a.v. dit topic: Website dilemma waaruit blijkt dat frames niet echt meer de bedoeling zijn, wordt div als alternatief gegeven.
Kun je in een div ook tekst tonen die in een ander htmlletje staat?
Volgens mij niet. Ik snap niet waarom ze divs als alternatief voor frames zien . Frames zijn pagina's die je oproept en toont, divs zijn toch veel anders .
quote:
Op donderdag 26 februari 2009 16:04 schreef kareltje_de_grote het volgende:
Het voordeel van frames vond ik altijd dat je je website dus mooi op kon delen in een header.html, menu.html en body.html.
Nog mooier is om op te delen mbv includes (php).
pi_66484347
quote:
Op donderdag 26 februari 2009 15:37 schreef Nashje het volgende:

Maar als je al die links in 1 plaatje ramt en gaat werken met background-position is het dan niet één groot gevecht tussen Firefox en IE? Die ervaring heb ik nl. met positions.
Background-position werkt in mijn ervaring in alle browsers gelijk. Wat ging er bij jou mis dan?
pi_66484431
quote:
Op donderdag 26 februari 2009 16:09 schreef Roy_T het volgende:

[..]

Background-position werkt in mijn ervaring in alle browsers gelijk. Wat ging er bij jou mis dan?
Divs die gingen zweven en niet vast stonden. Ik had sowieso moeite om divs vast te zetten met positions, vandaar dat ik tegenwoordig alleen maar met floats werk.
pi_66484661
quote:
Op donderdag 26 februari 2009 16:04 schreef kareltje_de_grote het volgende:
n.a.v. dit topic: Website dilemma waaruit blijkt dat frames niet echt meer de bedoeling zijn, wordt div als alternatief gegeven.
Kun je in een div ook tekst tonen die in een ander htmlletje staat? Het voordeel van frames vond ik altijd dat je je website dus mooi op kon delen in een header.html, menu.html en body.html.
frames zijn gewoon een beetje verouderd, mensen komen op loze pagina's uit via zoekmachines e.d en nog tal van andere nadelen die er aan kleven. Als ik simpele statische websites maak doe ik het gewoon met php includes.

include header.php
hier nog eventueel individuele scripts voor op een pagina
</head>
include menu.php
<content>
include footer.php

zoiets :p
0023
pi_66484733
Hahh, tnx ik ga eens naar die includes kijken.
zoals het potje thuis poept, poept het nergens
_-*-_-*_-*-_-*_-*-_-*_-*-_-*_-*-_-*_-*-_-*_-*-_-*
ACWW NWFC id: 2921-2609-9160 nick: tbone Town: Finetown
Fiets
pi_66484820
quote:
Op donderdag 26 februari 2009 16:19 schreef kareltje_de_grote het volgende:
Hahh, tnx ik ga eens naar die includes kijken.
ja tis echt easy je hoeft eigenlijk niet eens echt php te kennen.
0023
pi_66485007
quote:
Op donderdag 26 februari 2009 16:20 schreef ikJur het volgende:

[..]

ja tis echt easy je hoeft eigenlijk niet eens echt php te kennen.
Dat ken ik dan ook niet
zoals het potje thuis poept, poept het nergens
_-*-_-*_-*-_-*_-*-_-*_-*-_-*_-*-_-*_-*-_-*_-*-_-*
ACWW NWFC id: 2921-2609-9160 nick: tbone Town: Finetown
Fiets
pi_66488241
quote:
Op donderdag 26 februari 2009 16:11 schreef Nashje het volgende:

[..]

Divs die gingen zweven en niet vast stonden. Ik had sowieso moeite om divs vast te zetten met positions, vandaar dat ik tegenwoordig alleen maar met floats werk.
Een background-position heeft niets met een floatende en zwevende div te maken hoor .
pi_66488746
quote:
Op donderdag 26 februari 2009 16:08 schreef Nashje het volgende:

[..]

Volgens mij niet. Ik snap niet waarom ze divs als alternatief voor frames zien . Frames zijn pagina's die je oproept en toont, divs zijn toch veel anders .
[..]

Nog mooier is om op te delen mbv includes (php).
nee


Frames is het opdelen van 1 pagina in verschillende pagina's
Divs kan precies hetzelfde doen alleen dan in 1 pagina zonder verschillende pagina's te gebruiken

zie mijn link (cablegunmaster.nl ) als voorbeeld

ja een div's kan je ook includen en stukjes tekst kun je ook includen
Redacted
pi_66488768
quote:
Op donderdag 26 februari 2009 16:25 schreef kareltje_de_grote het volgende:

[..]

Dat ken ik dan ook niet
ok je noemt je pagina php ipv html

<?php
include 'blablabla.php';
?>

en dan heb je een stukje pagina erin gezet in een andere pagina
Redacted
pi_66504644
quote:
Op donderdag 26 februari 2009 16:11 schreef Nashje het volgende:

Divs die gingen zweven en niet vast stonden. Ik had sowieso moeite om divs vast te zetten met positions, vandaar dat ik tegenwoordig alleen maar met floats werk.
Jij hebt het over "position", ik over "background-position". Dat is wel even iets totaal anders
pi_66510160
Hmm, weet iemand hoe ik vanuit mn style sheet text (link) uit een list kan verwijderen, zonder dat ik ook de afbeelding verwijder?
1
2
3		#divname a {
font-size: 0%; 
}

Werkt niet in IE en Chrome omdat ik dan nog kleine stipjes zie. In FF gaat dit wel netjes.

Display none werkt niet, omdat in de link een afbeelding staat welke dan ook weg is (ik wil alleen dat de tekst weg gaat :) ).

XHTML kant is niet aan te passen, het gaat om een standaard snippet binnen het cms..
pi_66510271
Misschien #divname "position: relative" geven, en de afbeelding met "position: absolute" en een z-index (indien nodig) over de tekst plaatsen?
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies - deel 11
Index

» digital corner

» development

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')