[CSS] voor dummies - deel 11

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
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.
 | FOK! Schrikkelbaasch
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.
 | FOK! Schrikkelbaasch
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.
 | FOK! Schrikkelbaasch
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.
 | FOK! Schrikkelbaasch
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)?
Nee.
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>
Nee.
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?
シ
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - deel 11
Index

» digital corner

» development

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