[CSS] voor dummies - deel 12

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_67571257
quote:
Op dinsdag 31 maart 2009 10:11 schreef RM-rf het volgende:

ik neem aan dat je ook erkent dat er geen geldige reden is het niet te doen behalve dan een persoonlijke voorkeur.
Klopt, voorkeur en conventie. Ik moedig mensen over het algemeen aan om de conventies zoveel mogelijk te volgen, maar da's ook persoonlijk.
pi_67579773
quote:
Op maandag 30 maart 2009 22:11 schreef RM-rf het volgende:

[..]

je wil een lijst, dat is dus altijd een UL of OL... géén DIV (die tag kies je als je gen andere optie hebt)


wat je wilt is gewoon heel simpel te doen door datgene wat je nu verteld in code op te schrijven:
[ code verwijderd ]

en dan de CSS-code
[ code verwijderd ]


Dit werkt prima, bedankt . Maar de foto komt nu steeds ten hoogte van de naam. Kan die foto ook op een vaste plaats?
pi_67581005
quote:
Op dinsdag 31 maart 2009 15:09 schreef hello_moto1992 het volgende:

[..]

Dit werkt prima, bedankt . Maar de foto komt nu steeds ten hoogte van de naam. Kan die foto ook op een vaste plaats?
ja hoor... daarvoor kun je de positionering verder met behulp van CSS 'stylen'....

wil je dat 'fine-tunen' kun je bv de elementen (UL, LI of de IMG ) 'border: 1px solid green;' (of andere kleuren) toewijzen zodat je precies ziet hoe groot elemente precies zijn en waar ze precies staan..
de IMG's worden nu op basis van de breedte van de UL gepositioneerd (doordat dit het bovenliggende element met een 'position' is) relatief afhankelijk van de 'top' en rechterzijde...

dat is echter allemaal via CSS aan te passen/ te stylen.
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_67586472
Halp please! Ik heb een lijst genest in een div van ~200px. In die lijst staat weleens een lange link en die wordt in Firefox gewoon netjes afgebroken zodat het in de div blijft. In IE7 echter niet Die laat de link gewoon uit de div lopen zonder het af te breken. Valt dit te fixen?
シ
pi_67602241
Ik heb een poll gemaakt middels html/css, echter krijg ik de footer niet precies op de juiste plek en heb werkelijk geen idee waarom deze naar rechts verspringt.

Ik heb al clear:both geprobeerd,margins, padding,left, etc maar niets werkt.

voorbeeld


Live voorbeeld:
http://htmlpoll.testertje.nl/pollview.php?code=6a6fa00b

HTML code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		        <div id="poll">
            <h1 id="poll-header">1234567890123</h1>
            <dl id="poll-content">
            <dt><a href="http://htmlpoll.testertje.nl/vote/6a6fa00b-1.html">dit is een test vraag</a></dt>
            <dd class="bar" style="width: 0%;">%</dd>
            <dd class="votes">0 x</dd>
            <dt><a href="http://htmlpoll.testertje.nl/vote/6a6fa00b-2.html">dit is een 123 vraag</a></dt>
            <dd class="bar" style="width: 0%;">%</dd>
            <dd class="votes">0 x</dd>
            </dl>
            <br style="clear:both;" />
            <ul id="poll-footer">
                <li id="votes">Aantal stemmen: 0</li>
                <li id="views">Keer bekeken: 13</li>
                <li id="advertisement">Maak ook een gratis poll op <a href="http://www.htmlpoll.nl">htmlpoll.nl</a></li>
            </ul>
        </div>


Css 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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87		#poll { 
    width: 400px; 
    border: 2px solid black; 
} 

/* header */ 
#poll-header { 
    background: gray; 
    height: 40px; 
    color: #FFF; 
    margin: 0px 0px 10px 0px; 
    padding:10px 0px 0px 10px;     
    font-size: 24px; 
    float:none; 
} 

/* content */ 

#poll-content { 
    padding:0; 
    margin:0; 
} 

#poll-contenta, 
#poll-content a:link, 
#poll-content a:active {   
    color: gray; 
    text-decoration: none; 
} 

#poll-content a:hover { 
    text-decoration: underline; 
} 

#poll-content dt { 
    clear: both; 
} 
    
#poll-content dd.bar { 
    text-indent: -90000px; 
    background: #000; 
    float: left; 
    height: 18px; 
    line-height: 0;
    width: 300px; 
} 
#poll-content dd.votes { 
    float: right;   
    padding-right: 10px;     
} 

/* footer */ 
#poll-footer { 
    background: gray; 
    height: 55px; 
    margin: 0; 
    padding: 10px 5px 5px 10px; 
    clear:both;
    left:0;
} 

#poll-footer li {
    list-style-type: none;
}

#poll-footer a, 
#poll-footer a:link, 
#poll-footer a:active {   
    color: white; 
    text-decoration: none; 
} 


#poll-footer #votes 
{ 
    float: left; 
} 

#poll-footer #views { 
    float: right; 
    text-align: right; 
} 

#poll-footer #advertisement { 
    clear: both; 
    margin-top: 10px; 
} 


Hopelijk kan iemand mij vertellen wat ik fout doe!
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_67602356
Wat op die URL staat lijkt nog niet bijna op je screenshot?
pi_67605489
Hoe kan ik een container automatisch laten meerekken met de content? Content is bijvoorbeeld op de home-pagina minder groot dan op de info-pagina.
pi_67606818
@Roy_T: klopt idd, zat een ( te veel in de CSS import
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_67607687
quote:
Op woensdag 1 april 2009 11:04 schreef Nashje het volgende:
Hoe kan ik een container automatisch laten meerekken met de content? Content is bijvoorbeeld op de home-pagina minder groot dan op de info-pagina.
Een div bedoel je? Gewoon geen height geven
pi_67608156
quote:
Op woensdag 1 april 2009 12:08 schreef Roy_T het volgende:

[..]

Een div bedoel je? Gewoon geen height geven
Ja dat had ik al geprobeerd. Zal het even schetsen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		home pagina

<div class="container">
   <div class="content">
      <div class="welkom"></div>
   </div>
</div>

info pagina

<div class="container">
   <div class="submenu"></div>
   <div class="content">
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
   </div>
</div>


Home pagina is een klein stukje tekst. Op de info pagina heb ik dus 3 divs, maar daardoor wordt het een stuk langer dan op de home pagina. Nu moet de container dus automatisch naar beneden gaan door die 3 divs.
pi_67608850
Dat doet 'ie ook standaard, tenzij je zaken uit de natuurlijke flow gehaald hebt met "float" bijvoorbeeld.
pi_67609479
Dat doet ie standaard als je hem geen height geeft dus?

Ik gebruik inderdaad floats.. Dus dit is niet te fixen wanneer je floats gebruikt?
pi_67609944
@Roy_T; ik heb het voorbeeld, nu moet de output wel duidelijk zijn met de padding/margin fout
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_67610171
quote:
Op woensdag 1 april 2009 13:05 schreef Nashje het volgende:
Dat doet ie standaard als je hem geen height geeft dus?

Ik gebruik inderdaad floats.. Dus dit is niet te fixen wanneer je floats gebruikt?
Je kunt het eens proberen door géén height te gebruiken, en "overflow: auto" op je container te zetten.
pi_67612307
Je bent een held . Ik was al bezig om alles opnieuw te gaan maken, fucking hell zeg. Was al bang dat dat niet kon als je floats gebruikt.

Enige fucked up probleem is nu dat Bill Gates met zijne IE zegt dat het toch niet helemaal de bedoeling is . JEZUS, ik word gek van die browserbattles .
pi_67613315
Hmm ik heb een discussie met m'n collega over positions of floats. Ik gebruik áltijd floats om alles neer te zetten, en hij gaat voor positions. Is er ergens een brede uitleg te vinden over wat nu het beste is?
pi_67614814
Als je je container kunt floaten zonder de boel te breken, dan kun je die overflow weghalen en werkt het in iedere browser.

Over float of position: kwestie van smaak denk ik. Ik gebruik ook altijd float, omdat er dan tenminste een flow in zit en elementen kunnen schalen. Als je position gebruikt is dat imo vaak een stuk lastiger.
pi_67615234
1
2
3
4
5
6
7
8
9
10		#contentmid ul li a img {
  display: none; /* verberg afbeelding */
  position: fixed; / positioneer afbeelding */
position:fixed;
top:30px;
right:50px;
}
#contentmid ul li a:hover img {
  display: block ; /* toon afbeelding bij hover */
} 


Dit heb ik nu dus. Zoals je ziet staat er bij top: 30px; en right: 50px;. Maar als ik dit zie op mijn website is het helemaal buiten de DIV waarin ik het wil hebben. De inhoud staat dus in contentmid, waar ik de afbeelding ook graag wil hebben. Iemand een idee ?
pi_67615901
quote:
Op woensdag 1 april 2009 15:42 schreef Roy_T het volgende:
Als je je container kunt floaten zonder de boel te breken, dan kun je die overflow weghalen en werkt het in iedere browser.
Die overflow weghalen heeft wel goede gevolgen ja . Super. Alleen in IE is het nog een bende.

Om mijn container (waar alles in staat) te centeren gebruik ik::
body, html { margin: 0px, padding: 0px } en in de .container { margin: 0 auto; }

FF doet het goed, IE niet. En als ik een nieuw html bestandje aanmaak met alleen deze 2 dingen, en dus verder geen divs of elementen, staat ie wel gecentreerd !
pi_67616434
quote:
Op woensdag 1 april 2009 15:52 schreef hello_moto1992 het volgende:

Maar als ik dit zie op mijn website is het helemaal buiten de DIV waarin ik het wil hebben. De inhoud staat dus in contentmid, waar ik de afbeelding ook graag wil hebben. Iemand een idee ?
"position: relative" op het element zitten ten opzicht van wat je wilt positioneren.
pi_67617465
Hmm.... Ik heb een aantal includes:
1
2
3
4
5
6
7
8
9
10
11		<?php 
include ("top.php");
?>

<?php
include ("home.php");
?>

<?php
include ("bottom.php");
?>


Heb er een css aan gehangen, die dus de boel al automatisch centreert. In FF doet ie het prima, in IE niet. Zet ik boven de eerste include een <center> en sluit ik die onderaan af, centreert ie wel alles in IE :').

Sjonge jonge.
pi_67617737
Oplossing gevonden voor de geinteresseerden:

1
2
3
4
5
6
7
8		body {
text-align: center; /* for IE */
}

#container {
margin: 0 auto;   /* align for good browsers */
text-align: left; /* counter the body center */
}
pi_67617822
quote:
Op woensdag 1 april 2009 16:22 schreef Roy_T het volgende:

[..]

"position: relative" op het element zitten ten opzicht van wat je wilt positioneren.
Sorry, maar ik snap het even niet .

Ik heb een div, genaamd contentmid. Daarin staat dus die lijst met namen.

HTML:
1
2
3
4
5		<ul>
   <li><a href="#">Naam Eén<img align="right" src="plaatje naam1.jpg"></a></li>
   <li><a href="#">Naam Twee<img align="right" src="plaatje naam2.jpg"></a></li>
   <li><a href="#">Naam Drie<img align="right" src="img/defqon.jpg"></a></li>
</ul>


CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		#contentmid ul li a img {
  display: none; /* verberg afbeelding */
  position: fixed; / positioneer afbeelding */
position:fixed;
top:30px;
right:50px;
}
#contentmid ul li a:hover img {
  display: block ; /* toon afbeelding bij hover */
}

#contentmid {
padding-left:25px;
padding-right:25px;
padding-bottom:25px;
padding-top:5px;
margin-left:5px;
}


EDIT:

Nog een vraagje:
Is het ook mogelijk dat de foto 'vast' blijft staan na een klik?

[ Bericht 4% gewijzigd door hello_moto1992 op 01-04-2009 17:36:39 ]
pi_67618865
quote:
Op woensdag 1 april 2009 16:09 schreef Nashje het volgende:

[..]

Die overflow weghalen heeft wel goede gevolgen ja . Super. Alleen in IE is het nog een bende.
Bug gevonden!!! Ligt waarschijnlijk aan paddings. Morgen even uitdokteren. Voel me wel al een stuk relaxer, hehe.
pi_67638048
Gaat goed. Nog een vraagje:

Hoe kan ik deze 2 vakken centreren in de container? Ik kan de margin-pixels wel uitrekenen, maar dat is zo'n gepiel...

pi_67639923
Hoe centreren? Dat plaatje maakt niet echt iets duidelijk
pi_67654148
De 2 vakken moeten zoveel mogelijk in het midden van de container komen te staan. Tussen de 2 vakken moet een margin van ongeveer 20 pixels komen... Snaps?
  donderdag 2 april 2009 @ 19:28:51 #58
164509 Banzaiaap
Tony Rocky Horror
pi_67654533
quote:
Op donderdag 2 april 2009 19:18 schreef Nashje het volgende:
De 2 vakken moeten zoveel mogelijk in het midden van de container komen te staan. Tussen de 2 vakken moet een margin van ongeveer 20 pixels komen... Snaps?
Mja, als je de exacte formaten weet, zou ik gewoon floaten en margins gebruiken.
pi_67656794
Ja, zo zou ik het ook doen.
pi_67671700
Oke dus toch wel. Dank u.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - deel 12
Index

» digital corner

» development

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