[CSS] voor dummies - deel 11

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_66048232
quote:
Op vrijdag 13 februari 2009 17:11 schreef Nashje het volgende:

Hmm had ik gedaan. Hij gaat wel tot onder door inderdaad, maar nu te ver naar onder zodat je moet scrollen. Dat komt waarschijnlijk omdat ie ruimte heeft overgeslagen bovenaan (hij begon onder de header).
Juist

Het is 100% van de viewport, dus als er nog iets boven staat dan telt dat ook mee.
quote:
Op vrijdag 13 februari 2009 17:06 schreef Nashje het volgende:
Ik wil dat omdat ik heel het beeld wil gebruiken. Zowel in Firefox als IE moet dat goed zijn.
Waarom? Wat wil je visueel bereiken? Nogmaals, er zijn vaak andere oplossingen die hetzelfde visuele effect geven. Plaatje misschien?
pi_66049962
Ik voel een faux column aankomen .
pi_66051909
Ik ook, of iig iets van dien aard
pi_66054146
quote:
Op zaterdag 14 februari 2009 09:53 schreef Roy_T het volgende:

[..]

Juist

Het is 100% van de viewport, dus als er nog iets boven staat dan telt dat ook mee.
[..]

Waarom? Wat wil je visueel bereiken? Nogmaals, er zijn vaak andere oplossingen die hetzelfde visuele effect geven. Plaatje misschien?
Omdat dat dat bij het idee van de site hoort . Maar een plaatje is wel een verdomd goed idee ja . Verticaal laten repeaten, voila.
pi_66054366
quote:
Op zaterdag 14 februari 2009 14:36 schreef Nashje het volgende:

Omdat dat dat bij het idee van de site hoort .
Ben je altijd zo van de non-antwoorden? De vraag was niet waarom je iets er op een bepaalde manier uit wilt laten zien, maar waarom je het per se met een div van 100% hoogte wilt doen
quote:
Maar een plaatje is wel een verdomd goed idee ja . Verticaal laten repeaten, voila.
Juistem
pi_66055188
Nee het is niet zo dat ik per se wil ofzo. Maar dat leek me de meest makkelijke manier.
pi_66057039
Zeg. Vraagje!
Wanneer gebruiken jullie een class en wanneer een id?
Ik ga eigenlijk altijd voor een class, behalve als ik iets met JS wil gaan doen, dan hang ik de css aan het id (logisch, denk ik).
Ik zie echter ook volop sites waarbij de css er uitziet als een hekjesparade, alleen maar id's dus. Ik snap het nut er niet zo van, maar misschien is het er wel. Ben wel benieuwd hoe iedereen werkt eigenlijk, wie weet (ik!) kan ik er nog wat van leren!
  FOK!-Schrikkelbaas zaterdag 14 februari 2009 @ 16:32:31 #108
1972 Swetsenegger
Egocentrische Narcist
pi_66057149
Nou ik heb wel gemerkt dat ID's soms anders reageren dan classes. En ik heb geen idee waarom. Ik heb nu geen concreet voorbeeld, is iets waar ik wel eens tegen aangelopen ben.

Ik gebruik eigenlijk ook altijd classes.
Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!
pi_66057209
quote:
Op zaterdag 14 februari 2009 16:32 schreef Swetsenegger het volgende:
Nou ik heb wel gemerkt dat ID's soms anders reageren dan classes. En ik heb geen idee waarom. Ik heb nu geen concreet voorbeeld, is iets waar ik wel eens tegen aangelopen ben.

Ik gebruik eigenlijk ook altijd classes.
classes worden overruled door ID's, ook al staat de class lager in de CSS. Dus anders reageren doet het zeker .

Verder mag een ID uiteraard maar 1x per htmlletje voorkomen, en een class oneindig.
pi_66057222
De werkelijke regel is dat een een id uniek is en dus maar 1 keer kan worden gebruikt, geloof ik.

Ik gebruik zelf meestal id's. Aangeleerd .
  FOK!-Schrikkelbaas zaterdag 14 februari 2009 @ 16:46:17 #111
1972 Swetsenegger
Egocentrische Narcist
pi_66057476
quote:
Op zaterdag 14 februari 2009 16:34 schreef veldmuis het volgende:

[..]

classes worden overruled door ID's, ook al staat de class lager in de CSS. Dus anders reageren doet het zeker .

Verder mag een ID uiteraard maar 1x per htmlletje voorkomen, en een class oneindig.
Nee ik bedoel dus ook in style gedrag. Dus een layer die onverklaarbaar lager geplaatst wordt bv als hij in een ID staat tov een class.
Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!
pi_66057598
quote:
Op zaterdag 14 februari 2009 16:46 schreef Swetsenegger het volgende:

[..]

Nee ik bedoel dus ook in style gedrag. Dus een layer die onverklaarbaar lager geplaatst wordt bv als hij in een ID staat tov een class.
Da's mij nog nooit opgevallen. Dus een voorbeeld zou leuk zijn
fokstok.nl
  FOK!-Schrikkelbaas zaterdag 14 februari 2009 @ 16:52:32 #113
1972 Swetsenegger
Egocentrische Narcist
pi_66057621
quote:
Op zaterdag 14 februari 2009 16:51 schreef Light het volgende:

[..]

Da's mij nog nooit opgevallen. Dus een voorbeeld zou leuk zijn
Als ik er weer eens tegenaanloop zal ik het laten zien. Wat ik me ervan herinner ging het met relatief positioneren fout. Maakte ik van de ID een class werkte het zoals verwacht.
Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!
pi_66058225
Dat heb ik ook nog nooit meegemaakt. Ben benieuwd!
  FOK!-Schrikkelbaas zaterdag 14 februari 2009 @ 19:31:43 #115
1972 Swetsenegger
Egocentrische Narcist
pi_66062520
Ik heb ht al 2 keer gehad. Wellicht zegt het meer over mij dan over css, maar ik weet nog dat ik me scheel heb gezocht.
Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!
pi_66065987
quote:
Op zaterdag 14 februari 2009 16:28 schreef veldmuis het volgende:
Zeg. Vraagje!
Wanneer gebruiken jullie een class en wanneer een id?
Ik ga eigenlijk altijd voor een class, behalve als ik iets met JS wil gaan doen, dan hang ik de css aan het id (logisch, denk ik).
Ik zie echter ook volop sites waarbij de css er uitziet als een hekjesparade, alleen maar id's dus. Ik snap het nut er niet zo van, maar misschien is het er wel. Ben wel benieuwd hoe iedereen werkt eigenlijk, wie weet (ik!) kan ik er nog wat van leren!
Ik gebruik tegenwoordig alleen classes als ik weet dat ik hetzelfde element meerdere keren gebruik op een pagina
シ
pi_66066705
quote:
Op zaterdag 14 februari 2009 21:07 schreef Chanty87 het volgende:

[..]

Ik gebruik tegenwoordig alleen classes als ik weet dat ik hetzelfde element meerdere keren gebruik op een pagina
Gewoon voor je eigen overzicht? (max) 1x voorkomen = id, anders class?

Hm. Dat klinkt wel als een handige methode. .
pi_66070053
Het is niet zo dat een ID altijd voorrang heeft boven een class: het heeft alles te maken met specificity.

Zelf gebruik ik ID's voor unieke elementen (#header, #footer, #menu, etc) en classes voor terugkerende elementen (.blogpost, etc). En uiteraard ID's om iets te kunnen referencen in JS.

Als iets niet "belangrijk" is, dan gebruik ik geen ID maar een class (bijvoorbeeld <a class="cancel"> als het een link moet zijn met speciale styling (als een afbeelding met "cancel" erin bijvoorbeeld). Classes gebruik ik ook om info in te zetten waar de CSS niets mee doet, maar JS wel bijvoorbeeld (meer als meta data dus, sort of).

Gebruik ze allebij wel bewust zo min mogelijk; een <ul id="menu"> bijvoorbeeld, met daaronder zoveel mogelijk de HTML elementen referencen (#menu li a etc etc).
quote:
Op zaterdag 14 februari 2009 16:46 schreef Swetsenegger het volgende:

Nee ik bedoel dus ook in style gedrag. Dus een layer die onverklaarbaar lager geplaatst wordt bv als hij in een ID staat tov een class.
Dat is geen known bug iig voor zover ik weet
pi_66110447
Het is te merken dat ik al een tijdje niet heb gespeeld met CSS . Ik ben er na 3 kwartier achter gekomen waarom m'n backgroundimage niet werd getoond. M'n style.css staat in de map css, en ik moest dus eerst uit die map komen om het plaatje in de map image te laten kunnen tonen.

Bleh .
pi_66110518
quote:
Op maandag 16 februari 2009 09:29 schreef Nashje het volgende:
Het is te merken dat ik al een tijdje niet heb gespeeld met CSS . Ik ben er na 3 kwartier achter gekomen waarom m'n backgroundimage niet werd getoond. M'n style.css staat in de map css, en ik moest dus eerst uit die map komen om het plaatje in de map image te laten kunnen tonen.


Paden zijn inderdaad (gelukkig) relatief t.o.v. de locatie van een stylesheet
pi_66121548
Vraagje. Ik wil 4 divjes. Linksboven logo, daaronder menutje. Rechts naast het logo een div en daaronder (dus langs het menu) weer een div. Maar m'n bovenste rechterdiv begint pas op menu hoogte.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27		#logo {
width: 270px;
height: 105px;
border: 1px solid;
background: url(logo.png);
}

#menu {
float: left;
width: 270px;
height: 400px;
border: 1px solid;
}

#search {
float: left;
width: 900px;
height: 200px;
border: 1px solid;
}

#content {
float: left;
width: 900px;
height: 200px;
border: 1px solid;
}


1
2
3
4		   <div id="logo"><img src="images/logo1.png" /></div>
   <div id="menu"></div>
   <div id="search">asdf</div>
   <div id="content">adsf</div>
  Nerd met benen maandag 16 februari 2009 @ 15:36:11 #122
18073 miss_bleu
pi_66121779
Kan je uittekenen wat je nou precies wilt? Want ik heb het nu 5 keer gelezen en snap er geen drol van
pi_66122034
Ik heb het uitgetekend ....

pi_66122035
Ik snap het denk ik .

Denk in kolommen. Dit is normaal gedrag van de float. Als je om de dingen die naast of boven elkaar staan een containerdiv zet is je probleem over.
pi_66122087
quote:
Op maandag 16 februari 2009 15:42 schreef veldmuis het volgende:
Ik snap het denk ik .

Denk in kolommen. Dit is normaal gedrag van de float. Als je om de dingen die naast of boven elkaar staan een containerdiv zet is je probleem over.
Oh toch wel.. Was al van plan om een leftrow en rightrow te maken, maar toch een containertje dus. Even proberen.
pi_66122271
Ik heb een containerdiv gemaakt, maar doet het nog steeds niet..

1
2
3
4
5		#container {
border: 1px solid;
width: 1200px;
height: 600px;
}


1
2
3
4
5
6		<div id="container">
   <div id="logo"><img src="images/logo1.png" /></div>
   <div id="menu"></div>
   <div id="search">asdf</div>
   <div id="content">adsf</div>
</div>
pi_66122362
Dat klopt. Dit maakt geen drol uit :P.

Nogmaals, denken in kolommen.

1
2		[=1=] [=3=]
[=2=] [=4=]


a. Als 1 en 2 altijd dezelfde breedte hebben, die in een div zetten.
b. Als 1 en 3 altijd dezelfde hoogte hebben, die in een div zetten (maar dan laat je die niet floaten)

Als a en b waar zijn mag je zelf kiezen :P.
pi_66122700
a is waar, heb ik gedaan, maar wat moet ik dan met 3 en 4 doen?
pi_66122723
quote:
Op maandag 16 februari 2009 15:43 schreef Nashje het volgende:

Was al van plan om een leftrow en rightrow te maken, maar toch een containertje dus. Even proberen.
Zolang je ze maar niet die namen geeft (leftrow, rightrow)
pi_66122790
quote:
Op maandag 16 februari 2009 16:00 schreef Nashje het volgende:
a is waar, heb ik gedaan, maar wat moet ik dan met 3 en 4 doen?
Je kan er een containertje omheen zetten. Container dan een vaste breedte meegeven, en de divs in die container erven die dan wel.
pi_66122930
quote:
Op maandag 16 februari 2009 16:02 schreef veldmuis het volgende:

[..]

Je kan er een containertje omheen zetten. Container dan een vaste breedte meegeven, en de divs in die container erven die dan wel.
Gelukt . Ik had al een container gemaakt voor 3 en 4 en gefloat naar left, maar deed het niet. Toen ik de container van 1 en 2 naar left had gefloat, deed ie het wel. Dank dank.
pi_66122993
Yup. Een container met floatende elementen erin moet je zelf ook laten floaten. Het is iets met de manier waarop floatende divs met niet-floatende divs 'communiceren'.
pi_66157986
Heb een vraagje, ben een formulier aan het maken voor een vragen lijst.

Nu heb ik voor de 4 woonplaatsen een selectie vakje gemaakt.
Hieronder heb ik een vraag in welke woon wijk de mensen wonen.

Nu wil ik dat als mensen bijvoorbeeld Apeldoorn aangeven de volgende vraag alleen de wijken van Apeldoorn worden getoond. En als mensen Deventer aangeven dat dan alleen de wijken van Deventer komen.
quote:
Welke plaats woont u?:
<br />
<input type="radio" id="Apeldoorn" name="gender" value="man"> <label for="man">Apeldoorn</label>
<input type="radio" id="Deventer" name="gender" value="vrouw"> <label for="vrouw">Deventer</label>
<input type="radio" id="Zuthpen" name="gender" value="vrouw"> <label for="vrouw">Zuthpen</label>
<input type="radio" id="Buitengebied" name="gender" value="man"> <label for="man">Buitengebied</label>

<div class="place">
<div class="field">

<div class="place">
<div class="field">
<text> In welke wijk woont u?
</text>
<select name="Woonwijk">
<option value="Woonwijk">De Parken</option>
<option selected value="Woonwijk">Centrum</option>
<option value="Woonwijk">De Maten</option>
<option value="Woonwijk">Berg & Bos</option>
<option value="Woonwijk">Zuidbroek</option>
<option value="Woonwijk">Osseveld</option>
<option value="Woonwijk">Woudhuis</option>
<option value="Woonwijk">Welgelegen</option>
<option value="Woonwijk">Orden </option>
<option value="Woonwijk">Zevenhuizen</option>
<option value="Woonwijk">Kerstschoten </option>
<option value="Woonwijk">Zuid</option>

</select>
</form>
</div>
pi_66159691
Wat is je vraag? Dat iemand een scriptje voor je schrijft (er is een JS topic trouwens)?

Het lijkt me overigens sterk dat al die wijken een value "woonwijk" moeten hebben en de steden stiekem geslachten zijn

Tip: Als je echt helemaal niets weet van HTML én niet zelfredzaam genoeg bent om de absolute basis uit te willen zoeken, begin er dan aub niet aan
pi_66190004
quote:
Op dinsdag 17 februari 2009 14:36 schreef Roy_T het volgende:
Het lijkt me overigens sterk dat al die wijken een value "woonwijk" moeten hebben en de steden stiekem geslachten zijn
.
pi_66194625
Het is gelukt mensen
pi_66202963
Post je code eens, ik ben benieuwd wat voor creatieve oplossingen hebt bedacht. Misschien een <fix-this> tag of <magic>-tag(uiteraard niet afgesloten)?
Bleuh.
pi_66270745
Ondanks dat ik mezelf toch als een redelijk competente CSS'er beschouw heb ik nu toch een probleempje :P
Ik probeer een container DIV de hoogte van het scherm aan te laten nemen, dat lukt, maar als de inhoud van de pagina langer wordt dan het scherm houdt de achtergrondkleur ook op. Opzich logisch natuurlijk. Zowel op html en body heb ik een height van 100% toegepast (min-height: 100%; maakt geen verschil).

Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24		html {
   height: 100%;
   margin: 0;
}

body {
   background-color: #EFF8FD;
   height: 100%;
   
   font-family: arial, tahoma, verdana, sans-serif;
   font-size: 12px;
}

div#page
{
   width: 960px;
   height: 100%;
   background-color: white;
   
   position: absolute;
   left: 50%;
   top: 0px;
   margin-left: -480px;
}


Ik ben al genoeg javascript-achtige oplossingen tegengekomen, maar dit moet afaik met CSS op te lossen zijn..
pi_66271262
Zou moeten werken met min-height. Maar waarom wil je het per se zo doen? Kun je die kleur niet gewoon aan de body geven, of anders faux columns gebruiken?
pi_66271368
quote:
Op vrijdag 20 februari 2009 11:36 schreef Intrepidity het volgende:
Ik ben al genoeg javascript-achtige oplossingen tegengekomen, maar dit moet afaik met CSS op te lossen zijn..
Volgens mij werkt dit gewoon?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21		<style type="text/css">
html {
   height: 100%;
   margin: 0;
}

body {
   background-color: #EFF8FD;
   height: 100%;   
   font-family: arial, tahoma, verdana, sans-serif;
   font-size: 12px;
}

div#page
{
   width: 960px;
   min-height: 100%;
   background-color: white;
  margin:0 auto; [b]iets mooier dan left:50; margin-left:-480px ;)[/b]
}
</style>
Bleuh.
pi_66271793
Helaas werkt dat niet gewoon:


Volgensmij kan ik met de bodytag toch geen specifiek gebied een witte achtergrond geven? Het gaat dus om een box van 960 pixels breed horizontaal gecentreerd, volgensmij kan ik dat effect niet in de body bereiken tenzij ik met een witte afbeelding ga lopen klooien..

Dat van die margin: 0 auto; is uiteraard een goede tip, maar daarmee gaat vrijwel de hele layout (een aantal delen zijn absoluut gepositioneerd) naar de klote, het lijkt alsof de elementen binnen de div #page dan niet meer binnen de box willen vallen.. maar dat zoek ik later wel even uit nevermind, al gefixed met een position: relative in #page

[ Bericht 17% gewijzigd door Intrepidity op 20-02-2009 12:09:21 ]
pi_66274762
quote:
Op vrijdag 20 februari 2009 12:02 schreef Intrepidity het volgende:

Het gaat dus om een box van 960 pixels breed horizontaal gecentreerd, volgensmij kan ik dat effect niet in de body bereiken tenzij ik met een witte afbeelding ga lopen klooien..
Volledig geaccepteerde manier
pi_66275741
Kan wel wezen, maar er zal vast een oplossing door middel van CSS zijn die ook voldoet.. Dat heb ik liever dan een extra afbeelding, scheelt weer een request per pageview..
pi_66276955
Far future expiry headers enzo... 1 request per jaar

Het is een bitch om cross browser te hebben doen wat je wilt, dat is waarom niemand het op die manier probeert. Maar be my guest
pi_66344919
http://trinitati.nl/agenda.php

hoe kan ik 1 TD ruimte forceren? dat hij langer word ondanks dat de pagina dat zelf niet is.

met medewerking kropt zichzelf op maar hoe los ik dit op?
Redacted
pi_66346064
Ik zie niet wat je bedoelt?
pi_66346636
quote:
Op zondag 22 februari 2009 17:28 schreef veldmuis het volgende:
Ik zie niet wat je bedoelt?
nou je hebt 1 TD veld en die moet altijd 200 px breed zijn ongeacht de inhoud
maar als ik korte woorden als inhoud hebt
bv.

dan kropt de tabel op.
en krijg
je irritante
regels
ipv " dan kropt de tabel op en krijg je irritante regels"

Hoe pak ik dit aan ?
Redacted
pi_66353456
Een width aan de betreffende TD geven
pi_66353815
quote:
Op zondag 22 februari 2009 21:21 schreef Roy_T het volgende:
Een width aan de betreffende TD geven
maar dat werkt niet
want dan gaat hij alleen uitrekken als de beeldschermresolutie groter is.
ik wou hem constant hebben en de rest niet.

bvb

tabel
cel 1 cel 2 cel 3
blablabla<witruimte><witruimte> blablablabal blablablablabl

ipv
cel 1 cel 2 cel 3
blablabla blablalba blablabla
blablabal


eigenlijk 1 vaste lengte van een cel. en de rest variabele.
Redacted
pi_66356691
Width: 100% op de table, en een vaste width op 1 cell zou gewoon moeten werken. Of ik snap nog steeds niet wat je wilt
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')