[CSS] voor dummies - deel 12

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  dinsdag 24 maart 2009 @ 12:36:39 #2
136730 PiRANiA
All thinking men are atheists.
pi_67353595
.forumpost{
tvp:true;
}
Dag Google!
pi_67353608
quote:
Op dinsdag 24 maart 2009 12:23 schreef Nashje het volgende:

Ben weer aanbeland bij een nieuw raadsel. Zal vast mogelijk zijn, maar weet niet hoe... Een zoeksysteem binnen je site, die niet gaat zoeken in tables oid, nee, stuk tekst waarop je hebt gezocht wordt geselecteerd op de site. Dus zonder PHP ofzo.
Off-topic hier, maar dat zou met JS kunnen. Vraag me wel af waarom, want dat gaat fucking zwaar zijn (client op de achtergrond alle pagina's binnen laten trekken en kijken of je zoekstring erin voorkomt).
  dinsdag 24 maart 2009 @ 13:04:00 #4
181657 LordNemephis
computer says no
pi_67354416
quote:
Op dinsdag 24 maart 2009 12:37 schreef Roy_T het volgende:

[..]

Off-topic hier, maar dat zou met JS kunnen. Vraag me wel af waarom, want dat gaat fucking zwaar zijn (client op de achtergrond alle pagina's binnen laten trekken en kijken of je zoekstring erin voorkomt).
Inderdaad, zou toch een databeest gebruiken daarvoor.
Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.
pi_67355452
quote:
Op dinsdag 24 maart 2009 12:34 schreef Roy_T het volgende:
Off-topic hier, maar dat zou met JS kunnen. Vraag me wel af waarom, want dat gaat fucking zwaar zijn (client op de achtergrond alle pagina's binnen laten trekken en kijken of je zoekstring erin voorkomt).
Alle pagina's? Ik wil gewoon de inhoud van één pagina doorzoeken, dus hoeven niet meerdere pagina's te worden doorzocht.
pi_67357746
Ah, ik dacht dat je echt een site-wide zoekmachine zocht Maar dan nog zou ik het niet client-side doen
pi_67357848
Hoe zou je het dan doen? Er wordt verder nog niets in een database geschreven of uberhaupt gedaan.
pi_67358051
Beginnen met wél in een database schrijven Het probleem met client-side is dat je alleen door de content wilt zoeken, en niet door de hele code (neem ik aan). Je zult dan in je script aan moeten geven binnen welke elementen je wél wilt zoeken en dit vervolgens doen met een regex ofzo. Het kan wel, maar het is een pokkewerk, terwijl een database hiervoor gemaakt is (bijv. door een FULLTEXT index te gebruiken in MySQL). Maar hoe je het ook doet, het heeft nooit iets met [CSS] voor dummies - deel 12 te maken
  dinsdag 24 maart 2009 @ 14:50:29 #9
165924 msnk
AliceWonder <3
pi_67358113
quote:
Op dinsdag 24 maart 2009 12:36 schreef PiRANiA het volgende:
.forumpost{
tvp:true;
}
AFC AJAX
pi_67358197
quote:
Op dinsdag 24 maart 2009 13:31 schreef Nashje het volgende:

[..]

Alle pagina's? Ik wil gewoon de inhoud van één pagina doorzoeken, dus hoeven niet meerdere pagina's te worden doorzocht.
ik had er ooit een javascriptje voor... nog in de tijd van Netscape4/explorer4 deed dat het ook...
de vraag is echter eerder of je dat wil, browsers bieden zelf een veel betere eigen standaard functionaliteit voor : CTRL-F en dan heeft het eerder weinig zin om zelf met brakke scriptjes goed functionerende browser-functionaliteiten te 'simuleren'.

edit: was niet eens zo moeilijk te vinden:
http://javascript.internet.com/miscellaneous/search-the-page.html
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_67359248
Hmm okay.

[quote]Op dinsdag 24 maart 2009 14:52 schreef RM-rf het volgende:

[..]%

[ Bericht 37% gewijzigd door Nashje op 24-03-2009 15:55:41 ]
pi_67359845
quote:
Op dinsdag 24 maart 2009 15:23 schreef Nashje het volgende:
Verbinding onderbroken

De verbinding met de server werd geherinitialiseerd tijdens het laden van de pagina.
pi_67359916
Hmm Fok doet raar, krijg m'n bericht niet geedit.
pi_67374881
Weet iemand of er al een fix / work around voor dit probleem:
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postId=3821&productId=1

Zou erg fijn zijn
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_67374953
De workaround die ik eerder gaf: een div met die achtergrond ter grootte van de textarea, textarea erin renderen met background: transparent.
pi_67391570
Ja, maar dus nog geen andere workaround dus.. heb je ook nog een link naar artikel van die workaround?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_67391906
Nee, want ik heb hem zelf verzonnen en er geen artikel over geschreven Maar zo moeilijk is het niet toch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		<div class="textarea_wrap"><textarea>bla</textarea></div>

div.textarea_wrap,
textarea {
   width: 200px;
   height: 200px;
}

div.textarea_wrap {
   background: url(bg.gif);
}

textarea {
   background: transparent;
}
pi_67392332
Ik zou er dan toch eens een artikeltje aan wijden want er is blijkbaar veel vraag naar krijg deze vraag vaker per MSN en zeg dan altijd dat het onmogelijk is
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_67392566
Dat is het ook, strict gezien: je hebt een extra semantisch gezien nutteloos element nodig
pi_67394409
Hmm, ik heb een ul li lijstje. En daardoor gaat dus de tekst in een lijstje staan, die wat naar rechts verschuift, as usually bij een li item. Is er een mogelijkheid dat ik deze ruimte weg kan schoppen en wel alles strak naar links kan plaatsen?
pi_67395309
quote:
Op woensdag 25 maart 2009 15:18 schreef Nashje het volgende:
Hmm, ik heb een ul li lijstje. En daardoor gaat dus de tekst in een lijstje staan, die wat naar rechts verschuift, as usually bij een li item. Is er een mogelijkheid dat ik deze ruimte weg kan schoppen en wel alles strak naar links kan plaatsen?
Iets met de margin/padding doen. Als je alles links wilt hebben zonder list-style (bolletjes) is het simpel ("margin: 0; padding: 0; list-style: none" op de <ul>), anders moet je even opzoeken hoe de verschillende browsers zich gedragen; de ene gebruikt namelijk padding en de andere margin voor hun default rendering.
pi_67418536
als het mogelijk is gebruik dan:

padding:0;
margin:0;

Niet perfect,maar werkt wel!
Vooral dat wat hier boven staat.
pi_67418776
quote:
Op woensdag 25 maart 2009 14:27 schreef Roy_T het volgende:
Dat is het ook, strict gezien: je hebt een extra semantisch gezien nutteloos element nodig
Nou zie het eerder als een fout van de browser op zich, je zou een achtergrond toch gewoon fixed moeten kunnen plaatsen
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_67555811
'k hoop dat ik hier aan het goede adres ben.

Ik heb een vlak (div) met daarin een lijstje met namen (li). Daarnaast is gewoon ruimte. In die ruimte zou ik graag een foto willen laten door middel van een mouse-over. Iemand een ideetje?
pi_67561134
quote:
Op maandag 30 maart 2009 19:47 schreef hello_moto1992 het volgende:
'k hoop dat ik hier aan het goede adres ben.

Ik heb een vlak (div) met daarin een lijstje met namen (li). Daarnaast is gewoon ruimte. In die ruimte zou ik graag een foto willen laten door middel van een mouse-over. Iemand een ideetje?
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:

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



en dan de CSS-code

1
2
3
4
5
6
7
8
9
10
11
12		UL {
  position: relative; /* positioning in normale flow, maar zodat de afbeelding erbinnen gepositioneerd kan worden */
  width: 100%;
}
UL LI A IMG {
  display: none; /* verberg afbeelding */
  position: absolute; / positioneer afbeelding */
  top: 10px; right: 10px;
}
UL LI A:hover IMG {
  display: block ; /* toon afbeelding bij hover */
}


[ Bericht 0% gewijzigd door RM-rf op 31-03-2009 01:44:19 ]
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_67561238
Maar dan zonder die hoofdletters voor ELEMENTEN in je CSS
pi_67566276
quote:
Op maandag 30 maart 2009 22:14 schreef Roy_T het volgende:
Maar dan zonder die hoofdletters voor ELEMENTEN in je CSS
wat bedoel je daarmee?
dat is gewoon een kwestie van coding conventies en het gebruik van full-caps in CSS om elementen aan te geven is nu juist zeer wijd verbreid (omdat meestal classnames sowieso undercast zijn en id-selectors enkel met een hofodletteer beginnen kun je goed het onderscheid aangeven daarmee)

we hebben het hier over HTML en niet case-sensitive XML of dat nutteloze XHTML (dat sowieso een doodlopend pad geworden is op het WWW)

er stond wel een foutje in mn code... ik had .hover staan ipv :hover, dus een dubbele punt
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
  dinsdag 31 maart 2009 @ 02:11:54 #28
230788 n8n
Pragmatisch
pi_67566416
Er wordt naar mijn weten bij namen van elementen, id's en classes altijd aangeraden alles met onderkast letters te schrijven. Dat staat naar mijn opinie ook een stuk netter.

tevens TerugVindCss
“Specialization is for insects”.—Robert Heinlein
pi_67567537
quote:
Op dinsdag 31 maart 2009 01:54 schreef RM-rf het volgende:

wat bedoel je daarmee?
dat is gewoon een kwestie van coding conventies en het gebruik van full-caps in CSS om elementen aan te geven is nu juist zeer wijd verbreid (omdat meestal classnames sowieso undercast zijn en id-selectors enkel met een hofodletteer beginnen kun je goed het onderscheid aangeven daarmee)
Het is juist een conventie om nooit caps te gebruiken. Ik ken tenminste niemand die het doet (en ik ken best veel front-enders ).
pi_67570060
quote:
Op dinsdag 31 maart 2009 08:13 schreef Roy_T het volgende:

[..]

Het is juist een conventie om nooit caps te gebruiken. Ik ken tenminste niemand die het doet (en ik ken best veel front-enders ).
tech is er geen enkele plicht ... ik heb die gewoonte al heel lang en in de CSS1 spec wordt het ook heel consequent toegepast : http://www.w3.org/TR/CSS1/#contextual-selectors ... in de CSS2 specificatie ook: http://www.w3.org/TR/CSS2/selector.html#type-selectors (in latere versies van de CSS-specificatie staat soms een mengeling, vreemd genoeg worden soms kapitalen voor elementen gebruikt en soms undercast... er staat wel in dat CSS zelf en selectoren case-insensitive zijn)

Het grootste voordeel voor mij is de duidelijke afscheiding tussen verschillende soort selectoren..
zelf prefereer ik ook zoveel mogelijk via element-selectoren te definieren en pas als dat niet lukt terug te vallen op classnames en/of id's als selectoren ...

ik neem aan dat je ook erkent dat er geen geldige reden is het niet te doen behalve dan een persoonlijke voorkeur.
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
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.
pi_67671953
Roy_T: kun je mij uit de band helpen.

het wil namelijk nog steeds niet lukken m.b.t. mijn poll

http://htmlpoll.testertje.nl/pollview.php?code=97ec6f2b (fout)
http://htmlpoll.testertje.nl/pollview.php?code=97ec6f2b&no=true (goed)

het probleem zit um in de CSS van mijn site zelf, en het komt door dit element
#content ul {margin-left: 1.8em;}

alleen geef ik aan in mijn CSS code, dat ik daar geen margin wil gebruiken.
1
2
3
4
5
6
7
8		.htmlPollContainer ul { 
    background: gray; 
    height: 40px; 
    margin: 10px 0px 0px 0px; 
    padding: 10px 5px 5px 10px; 
    clear:both;
    left:0;
} 


nu snap ik dus niet waarom deze toch nog de margin-left: gebruikt :{ anyone?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  vrijdag 3 april 2009 @ 12:04:43 #62
33189 RM-rf
1/998001
pi_67672260
quote:
Op vrijdag 3 april 2009 11:56 schreef Chandler het volgende:
Roy_T: kun je mij uit de band helpen.

het wil namelijk nog steeds niet lukken m.b.t. mijn poll

http://htmlpoll.testertje.nl/pollview.php?code=97ec6f2b (fout)
http://htmlpoll.testertje.nl/pollview.php?code=97ec6f2b&no=true (goed)

het probleem zit um in de CSS van mijn site zelf, en het komt door dit element
#content ul {margin-left: 1.8em;}

alleen geef ik aan in mijn CSS code, dat ik daar geen margin wil gebruiken.
[ code verwijderd ]

nu snap ik dus niet waarom deze toch nog de margin-left: gebruikt :{ anyone?
vermoedelijk omdat de 'cascading' waarde een hogere waarde toewijst aan een propertie die toegekend wordt adhv een ID-selector:

(de term 'cascading' in CSS staat voor 'overlappen'... mbhv CSS kun je elementen 'overlappende' waardes toewijzen die dan aan kinderen doorgegeven 'kunnen 'worden)


er zijn verschillende methodes dit te voorkomen... bv de selector zelf wat uitgebreider maken:
1#content .htmlPollContainer ul { margin-left: 0; }


of, meestal een beetje meer 'quick-and-dirty', het toewijzen van de waarde '!important':
1.htmlPollContainer ul { margin-left: 0 !important; }


ik zou je wel aanraden te kijken of het probleem niet deels kan onstaatn door een té gefragmentariseerd gebruik van selectoren in je CSS ... of het 'opschonen' hiervan dit al niet kan voorkomen.
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_67673177
!important deed het! maaruh dat hoef ik dan toch niet voor alle elementen op te geven? want deze poll moet er in iedere site goed uit zien, zonder dirty hacks te gebruiken want deze poll wil ik gaan gebruiken voor heel veel andere sites en daarvan kan ik de CSS niet beinvloeden!
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  vrijdag 3 april 2009 @ 12:50:48 #64
33189 RM-rf
1/998001
pi_67673729
quote:
Op vrijdag 3 april 2009 12:34 schreef Chandler het volgende:
!important deed het! maaruh dat hoef ik dan toch niet voor alle elementen op te geven? want deze poll moet er in iedere site goed uit zien, zonder dirty hacks te gebruiken want deze poll wil ik gaan gebruiken voor heel veel andere sites en daarvan kan ik de CSS niet beinvloeden!
!important is een beetje een lelijke overrule declaratietje dat je per propertie waarde zelf kunt aangeven (stamt oorspronkleijk vanuit het idee dat stylesheets zowel vanuit de aanbiederskant geleverd kunnen worden alswel gebruikers zelf ook lokaal hun eigen stylesheets kunnen verwenden: 'important' was een poging om bepaalde waarde's te definieren als 'niet te overrrullen')

je moet het iddee per proertie-waarde paar moeten aangeven. maar als je bv de selector juist kiest hoeft dat weinig te doen...
echter, bedenk wel dat ik je aanraad hier niet te makkelijk op terug te vallen en eerder te overwegen je CSS op te ruimen, en een betere structuur aan te brengen in hoe overlappend je welke waarde toewijst:

zeker als je iets maakt dat zeer generiek en breed inzetbaar zal moeten zijn, heeft dat veel meer nut dan enkel een lokaal 'plakbandje' als oplossing ergens op te plakken.
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
  vrijdag 3 april 2009 @ 12:56:16 #65
230788 n8n
Pragmatisch
pi_67673905
ipv !important schrijf ik in zo'n geval meestal de selector volledig uit, elementen en namen van id's en classes hebben een 'waarde', hoe hoger de waarde, des te hoger de prioriteit voor de inhoud. html body div ul#menu li a:hover weegt zodoende bijvoorbeeld veel zwaarder dan #menu a:hover.
“Specialization is for insects”.—Robert Heinlein
pi_67674585
@RM-fr; het probleem is dus dat mijn polls in welke site dan maar ook geplaatst kunnen worden bv

via iframes, javascript, php get etc.

Vooral met de laatste heb ik dan een probleem aangezien deze dan juist die style gaat gebruiken die de website gebruikt... hier moet ik dus een workaround op vinden. en is die !important best handig
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_67675275
Hmmz, is er een alternatief voor padding?

Ik wil tekst flink wat van de kant laten pushen, omdat er een plaatje voor staat. Nu geef ik dus een flinke padding op, en staat alles scheef, dat corrigeer ik weer door de width te verkleinen. Maar in IE zorgt padding niet voor een verschuiving, en in FF wel. Dus als ik de width verander, is het in FF wel goed, maar in IE gaat ie ook daadwerkelijk op die width reageren.
pi_67676078
Overigens ziet FF een h1 wel, en IE niet. Ook handig als je iets goed wil zetten in een kolom mbv padding. Dat zal namelijk nooit kloppen, omdat h1 sowieso al voor ruimte zorgt.
pi_67677368
Maak eens een testcase Nashje en zet die online Padding werkt prima in IE namelijk, dus het ligt aan jou
pi_67677802
Menu zoals het is:




Na een padding-top: 10px krijg ik dit in FF:



En na die padding krijg ik dit in IE:



Ik probeer dat te corrigeren door de toegevoegde padding pixels, van de height af te halen. Resultaat in FF:



En in IE:




Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		.menu {
width: 1004px;
height: 39px;
float: left;
background: #ffffff;
}

.menuhome {
margin-right: 1px;
width: 200px;
height: 29px;
float: left;
background: #b8b8b8;
text-align: center;
font: 12px Arial, Helvetica, sans-serif;
color: #fff;
padding-top: 10px;
}


Naast de menuhome zijn er dus ook nog menuzakelijk etc. Maar ik ben nu alleen menuhome aan het uittesten.
pi_67678078
Welk doctype gebruik je in je HTML? Mijn gok: geen. En dan krijg je dit

Goed doctype gebruiken, en ze doen allemaal hezelfde (padding wordt dan zoals in FF bij de height geteld, dus daar moet je mee rekenen).
pi_67679766
Roy_T

Echt, je bent een held. Niet eens dit menu, maar voor mijn submenu gebruikte ik een javascriptje, en die werkte ook niet. In de HTML-versie wel (!!), en toen ik alles ging omzetten naar php dmv includes werkte het niet meer. Doctype dus.... Ik ben blij . Nu even dat menu testen.
pi_67679842
pi_67858759
Wazijg. Ik heb al m'n a menuitems een styling gegeven, en dan neemt ie de styling over van de a die ik voor de content heb ingesteld .
pi_67860979
Hmm oke. Maar snap even niet hoe je de a's dan niet-conflicterend kan maken.
pi_67861932
Laat de relevante CSS eens zien
pi_67864680
Haha, ik heb het gefixed. Vraag me niet hoe, maar het werkt. En geeft geen fouten.
pi_68266008
edit; is inmiddels al gelukt..

[ Bericht 83% gewijzigd door Nashje op 22-04-2009 12:24:01 ]
  vrijdag 24 april 2009 @ 16:59:47 #80
198417 Lastpost
Rotterdammert!
pi_68342130
Hier ook even een vraagje op css-noob gebied.

Ik was heerlijk aan het kloten met wat divs om de layout te krijgen die ik graag wilde en ik ben een eind gekomen qua indeling, enkel wil het rechtse 'tekst' divje (geen breedte opgegeven) binnen m'n hoofd-div niet náast m'n linker div-je blijven staan die wel een vaste breedte heeft.

Dus qua indeling is het zo:

div pagina (100% breedte)
div zijmenu (links gefloat, vaste breedte)
div blok (tekstmenu, geen vaste breedte, moet gewoon de overgebleven ruimte invullen aan de rechterzijde)

Iemand enig idee hoe je dit voor elkaar krijgt, nu pakt ie dus gewoon automatisch (rechtermenu blok) de 100% breedte omdat er niets is opgegeven en zodoende gooit ie 'm onder het zijmenu op de volledige breedte van de div pagina.
Procenten aangeven zorgt er wel voor dat ie daar past, enkel veranderd dan de afstand bij verschillende resoluties en dat wil ik dus niet.
https://topbabe.nl
pi_68342667
De makkelijkste manier is om het menu te floaten en het content blok een linker-margin mee te geven die een waarde heeft die gelijk is aan (of iets breder is dan) de breedte van het menu.
  vrijdag 24 april 2009 @ 20:49:37 #82
39952 Hukkie
Wanna bang heads with me
pi_68348910
Ik ben een absolute noob op css gebied en daarom loop ik tegen een probleempje aan. Ik ben bezig om een nieuwe site te bouwen en daarvoor wil ik css gebruiken, ben me dus aan het inlezen en aan het oefenen met css. Maar mijn probleem is dat ik een interne stylesheet wil omzetten naar een externe. Dit omdat ik achteraf nog wat pagina's wil toevoegen aan mn site en dat niet per pagina wil doen.

Het gaat om Deze.

Kan het uiteindelijk ook wel zelf uitvissen, maar dat duurt momenteel te lang want ik wil graag nu verder met mn site, en op WW3Schools ea wordt ik niet veel wijzer.

Is er iemand die een snelle link heeft om dit te doen?
Mijn dank is groot.
There are no Saviours, there are no Kings, the Power lies in your head
DeviantArt
  vrijdag 24 april 2009 @ 21:03:24 #83
198417 Lastpost
Rotterdammert!
pi_68349464
Je hebt geen header bestand of iets in die trend?
Gewoon je gehele style opslaan in een bestandje (willekeurigenaam.css) en deze includen in je header en/of het head-gedeelte van de pagina's zelf indien je geen header hebt.

<link rel="stylesheet" type="text/css" href="linknaarstylesheet/stylesheet.css" />
Bovenstaand toevoegen in het head-gedeelte en dan kun je de gekozen elementen uit je stylesheet ook gewoon aanroepen zonder probleem.
Als dat niet is wat je bedoelde hoor ik het natuurlijk graag.
Hiermee kun je de boel natuurlijk ook extern benaderen/gebruiken, gewoon met het complete http://www.linkje.nl/stylesheet.css erin.
https://topbabe.nl
  vrijdag 24 april 2009 @ 21:15:02 #84
39952 Hukkie
Wanna bang heads with me
pi_68349915
Probleem is dus dat ik (nog) niet weet welke elementen ik mee moet nemen in de externe stylesheet. Met als gevolg dat als ik de stylesheet aanroep, er biezonder weinig gebeurt.
There are no Saviours, there are no Kings, the Power lies in your head
DeviantArt
pi_68356489
quote:
Op vrijdag 24 april 2009 21:15 schreef Hukkie het volgende:
Probleem is dus dat ik (nog) niet weet welke elementen ik mee moet nemen in de externe stylesheet. Met als gevolg dat als ik de stylesheet aanroep, er biezonder weinig gebeurt.
Dus? Je kunt je stylesheet later gewoon aanpassen, waarna de aanpassingen op iedere pagina zichtbaar zijn (waar je de stylesheet include).
pi_68374077
Welke lettertypes mag je allemaal gebruiken? Ik gebruik vaak de verdana family, maar welke mag je nog meer gebruiken.
  zaterdag 25 april 2009 @ 20:07:59 #87
198417 Lastpost
Rotterdammert!
pi_68374225
quote:
Op zaterdag 25 april 2009 20:03 schreef Flaccid het volgende:
Welke lettertypes mag je allemaal gebruiken? Ik gebruik vaak de verdana family, maar welke mag je nog meer gebruiken.
http://www.w3.org/Style/Examples/007/fonts
Overigens gebruik ik zelf een optie om via een php-bestandje de tekst om te zetten naar het lettertype dat ik zelf mooi vind.
Font opslaan op je server, daarheen verwijzen en de kleur (enz.) bepalen in het php bestandje en dan de boel aanroepen.
Logischerwijs enkel voor bepaalde locaties, gaat anders nogal ten kosten van de snelheid van je website.
https://topbabe.nl
pi_68375234
quote:
Op zaterdag 25 april 2009 20:03 schreef Flaccid het volgende:
Welke lettertypes mag je allemaal gebruiken? Ik gebruik vaak de verdana family, maar welke mag je nog meer gebruiken.
http://en.wikipedia.org/wiki/Web-safe_fonts
pi_68375261
quote:
Op zaterdag 25 april 2009 20:07 schreef Lastpost het volgende:

Overigens gebruik ik zelf een optie om via een php-bestandje de tekst om te zetten naar het lettertype dat ik zelf mooi vind.
Font opslaan op je server, daarheen verwijzen en de kleur (enz.) bepalen in het php bestandje en dan de boel aanroepen.
Logischerwijs enkel voor bepaalde locaties, gaat anders nogal ten kosten van de snelheid van je website.
Tip van de dag: doe het client side met typeface.js of cufón.
pi_68456798
Vraag:

Ik heb een list-item menu. Werkt in Mozilla perfec.t Ziet er strak uit, maar in IE duwt ie het eerste lijstje naar het 2e menu kopje. Hoe kan ik dit fixen?

1
2
3
4
5
6
7
8
9
10		<ul id="nav">
<li>Menu

<ul>
<li>Item1</li>
<li>Item2</li>
</ul>

</li>
</ul>


CSS:
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		#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav li {
float: left;
width: auto;
}

#nav ul {
position: absolute;
width: 175px;
left: -1000px;
background: #fff;
margin-top: 27px;
opacity: 0.80;
filter: alpha(opacity=80);
-moz-opacity: 0.80; 

font: 12px Verdana, Geneva, sans-serif;
color: #006699;
line-height: 17px;
padding: 10px;
}

#nav ul a, a:active, a:visited {
color: #006699;
text-decoration: none;
}

#nav ul a:hover {
text-decoration: underline;
}

#nav li:hover ul {
left: auto;
} 
pi_68460895
URL?
pi_68465160
Hmm is op de een of andere manier gelukt.

Roy heb jij verstand van maskerdivs?
  dinsdag 28 april 2009 @ 18:11:23 #93
87680 Mirel
Mirel wil een bongophone.
pi_68468350
edit: in het php topic geplaatst

[ Bericht 83% gewijzigd door Mirel op 28-04-2009 18:35:08 ]
When all else fails, you always have delusion.
pi_68469848
quote:
Op dinsdag 28 april 2009 16:45 schreef Nashje het volgende:

Roy heb jij verstand van maskerdivs?
Van wat Ik loop al aardig wat jaren mee in dit wereldje, maar wat is dat in hemelsnaam?
  dinsdag 28 april 2009 @ 19:01:27 #95
87680 Mirel
Mirel wil een bongophone.
pi_68470083
divs met een masker
When all else fails, you always have delusion.
pi_68471985
Goh, echt?
  dinsdag 28 april 2009 @ 19:52:43 #97
198417 Lastpost
Rotterdammert!
pi_68472078
quote:
Op dinsdag 28 april 2009 18:54 schreef Roy_T het volgende:

[..]

Van wat Ik loop al aardig wat jaren mee in dit wereldje, maar wat is dat in hemelsnaam?
Hehe.
Ik heb ook geen idee wat hiermee bedoeld wordt, gebruik zelf weleens div's om zodoende zaken te maskeren (bijvoorbeeld het youtube logo in embedded filmpjes)
https://topbabe.nl
pi_68487275
Oke .

Een maskerdiv is toch een div die je over een andere div kan zetten? Stel ik heb een vierkant plaatje en die verander ik vaak, maar de hoeken moeten wel steeds afgerond zijn en ik heb geen zin om dat elke keer te moeten fixen. Dan gebruik ik een maskerdiv zodat die hoek bij wat voor plaatje dan ook afgerond is. Dat terwijl er dus eigenlijk een vierkant plaatje staat.
pi_68490219
quote:
Op dinsdag 28 april 2009 14:50 schreef Roy_T het volgende:
URL?
Hmm werkt toch weer niet . Kak.

Kun jij je PM inbox aanzetten? Kan ik je ff een linkje passen.
pi_68497358
quote:
Op woensdag 29 april 2009 08:58 schreef Nashje het volgende:

Een maskerdiv is toch een div die je over een andere div kan zetten?
Geen idee, het is geen industrieterm iig

Maar ja, ik heb uiteraard ervaring met het principe (maar dan niet per definitie met div's, soms heb je andere elementen beschikbaar).
pi_68501133
quote:
Op woensdag 29 april 2009 14:01 schreef Roy_T het volgende:

[..]

Geen idee, het is geen industrieterm iig

Maar ja, ik heb uiteraard ervaring met het principe (maar dan niet per definitie met div's, soms heb je andere elementen beschikbaar).
Hmm oke. Welke andere elementen? En is dit mbv css moeilijk te maken? Of is het gewoon slechts div in div gooien en zorgen voor een stukje transparante achtergrond?
pi_68505156
Ja, dat is de manier. Maar het is heel afhankelijk van de situatie en hoe je HTML eruit ziet.
pi_68716591


vraagje hoe los je het op dat de losse helften links en rechts naar beneden doorgaan?
ik krijg het niet voor elkaar. height: 100%; is het niet. en een vast aantal pixels kan niet want de midden inhoud kan verschillen van lengte.

Opgelost:

float: absolute;
margin-left:130px;


[ Bericht 23% gewijzigd door cablegunmaster op 06-05-2009 02:24:30 ]
Redacted
pi_68718141
quote:
Op woensdag 6 mei 2009 01:37 schreef cablegunmaster het volgende:
[ afbeelding ]

vraagje hoe los je het op dat de losse helften links en rechts naar beneden doorgaan?
ik krijg het niet voor elkaar. height: 100%; is het niet. en een vast aantal pixels kan niet want de midden inhoud kan verschillen van lengte.
Zoek eens op faux columns.
quote:
Opgelost:

float: absolute;
margin-left:130px;
"absolute" is geen geldige waarde voor "float". Je hebt de keuze uit "left", "right", "none" en "inherit". Heel leuk dat het werkt, maar er is geen enkele garantie dat je een cross-browser oplossing hebt.
fokstok.nl
pi_68774011
quote:
Op woensdag 29 april 2009 17:36 schreef Roy_T het volgende:
Ja, dat is de manier. Maar het is heel afhankelijk van de situatie en hoe je HTML eruit ziet.
Het is inmiddels gelukt. Best wel wreed geworden .

Ik nu heb een mooi dropdown menutje. Ziet er strak uit in FF, maar in IE is het minder mooi... Heb geen flauw idee waar het aan kan liggen.

Menu is hier te vinden.
  zaterdag 16 mei 2009 @ 11:19:10 #106
34663 SpeedyGJ
Zo snel als de bliksem O+
pi_69081910
Is het mogelijk om in .css het menu te beheren?
Heb nogal een lijst van 32 html bestanden, en het wordt een gedoe als ik dit 1 voor 1 moet aanpassen omdat er iets veranders moet worden of iets toe te voegen.
Doe mee met het voorspellen van het weer!
Weekvoorspelling -- Week 1
Maandvoorspelling februari.
Jaarvoorspelling 2024 --- Jaarvoorspelling 2025!
  zaterdag 16 mei 2009 @ 11:28:12 #107
230788 n8n
Pragmatisch
pi_69082083
quote:
Op donderdag 7 mei 2009 15:26 schreef Nashje het volgende:

[..]

Het is inmiddels gelukt. Best wel wreed geworden .

Ik nu heb een mooi dropdown menutje. Ziet er strak uit in FF, maar in IE is het minder mooi... Heb geen flauw idee waar het aan kan liggen.

Menu is hier te vinden.
In Safari & Opera ziet het er prima uit, het ligt dus (zoals meestal) in ieder geval aan IE, verder zou ik de afbeeldingen in het menu met de css regelen daar de afbeeldingen ('>'-pijlen) geen onderdeel van de content maar van de opmaak zijn, de site laadt tevens weer wat sneller.

edit, voorbeeld voor de pijlen:
1
2
3		ul#nav li ul li {
list-style: url(../images/menu_bullet.jpg) inside;
}
quote:
Op zaterdag 16 mei 2009 11:19 schreef SpeedyGJ het volgende:
Is het mogelijk om in .css het menu te beheren?
Heb nogal een lijst van 32 html bestanden, en het wordt een gedoe als ik dit 1 voor 1 moet aanpassen omdat er iets veranders moet worden of iets toe te voegen.
Gewoon met een externe .css, en met hele basic php kan je ook de html centraal houden voor als je dat aan moet passen, scheelt bakken met werk.

[ Bericht 2% gewijzigd door n8n op 16-05-2009 11:36:34 ]
“Specialization is for insects”.—Robert Heinlein
  zaterdag 16 mei 2009 @ 12:26:59 #108
34663 SpeedyGJ
Zo snel als de bliksem O+
pi_69083623
Ik heb dit gedaan echter gebeurd er maar weinig.
Klik hier

Ik heb eerst een test pagina gemaakt voor ik de hele website ombouw.
Doe mee met het voorspellen van het weer!
Weekvoorspelling -- Week 1
Maandvoorspelling februari.
Jaarvoorspelling 2024 --- Jaarvoorspelling 2025!
pi_69083708
quote:
Op zaterdag 16 mei 2009 12:26 schreef SpeedyGJ het volgende:
Ik heb dit gedaan echter gebeurd er maar weinig.
Klik hier

Ik heb eerst een test pagina gemaakt voor ik de hele website ombouw.
MIsschien is het handig om test.html te hernoemen naar test.php
fokstok.nl
  zaterdag 16 mei 2009 @ 13:02:09 #110
34663 SpeedyGJ
Zo snel als de bliksem O+
pi_69084499
Helemaal vergeten!
Het werkt, echter krijg ik de text er niet in.

<div class="column_two_section">
<h1>Welkom op de website van Weerstation Holwerd</h1>
<div class="post_info">

Dit staat dus in de header.php
Daarna zou er dus dit moeten komen staan:
<a href="images/ligging.jpg" rel="lightbox"title=""><img src="images/ligging.jpg" width="150" height="100" alt="" /></a><br>
De pijltjes geven aan waar het weerstation staat.

________________
Wat doe ik nu fout? of wat moet er nog gebeuren?
Doe mee met het voorspellen van het weer!
Weekvoorspelling -- Week 1
Maandvoorspelling februari.
Jaarvoorspelling 2024 --- Jaarvoorspelling 2025!
  zaterdag 16 mei 2009 @ 13:20:07 #111
252113 jemoeder125
En je vader!
pi_69084936
http://www.weerstation-holwerd.nl/test.php wat is er precies mis mee?
  zaterdag 16 mei 2009 @ 13:28:20 #112
34663 SpeedyGJ
Zo snel als de bliksem O+
pi_69085128
De inhoud staat er niet, iig hier niet. Normaal zou je dit moeten zien:
Klik hier
Doe mee met het voorspellen van het weer!
Weekvoorspelling -- Week 1
Maandvoorspelling februari.
Jaarvoorspelling 2024 --- Jaarvoorspelling 2025!
  zaterdag 16 mei 2009 @ 13:31:46 #113
252113 jemoeder125
En je vader!
pi_69085210
Mja de inhoud staat er wel, maar op de verkeerde plek. Maar in de broncode staat'ie ook op de verkeerde plek. Je doet dus serverside nog iets fout.

-edit-
wel eens van wordpress gehoord trouwens?
  zaterdag 16 mei 2009 @ 13:39:52 #114
34663 SpeedyGJ
Zo snel als de bliksem O+
pi_69085410
Yup maar is deze skin daar ook in te krijgen dan?
Ik heb een tijdje met PHP Fusion gedraaid, toch als je kijkt naar de hackers die de website plat gooien, geeft me niet echt een lekker gevoel daarom dus html.

Euhm voor de rest lijkt alles goed te staan, hij verdubbelt alleen die content, beetje vreemd gezien deze helemaal niet dubbel staat.
Doe mee met het voorspellen van het weer!
Weekvoorspelling -- Week 1
Maandvoorspelling februari.
Jaarvoorspelling 2024 --- Jaarvoorspelling 2025!
  zaterdag 16 mei 2009 @ 14:08:25 #115
252113 jemoeder125
En je vader!
pi_69086129
quote:
Op zaterdag 16 mei 2009 @ 13:39 schreef SpeedyGJ het volgende:
Yup maar is deze skin daar ook in te krijgen dan?
Ik heb een tijdje met PHP Fusion gedraaid, toch als je kijkt naar de hackers die de website plat gooien, geeft me niet echt een lekker gevoel daarom dus html.

Euhm voor de rest lijkt alles goed te staan, hij verdubbelt alleen die content, beetje vreemd gezien deze helemaal niet dubbel staat.
In de bron zie ik het gewoon twee keer staan.

En ja alles is te maken.
  zaterdag 16 mei 2009 @ 19:57:35 #116
34663 SpeedyGJ
Zo snel als de bliksem O+
pi_69094599
Edit:

Dubbel is opgelost, probleem is nu dat ik de onderstaande waar de text inkomt onderaan staat. Deze vak moet dus gewoon naast het menu staan.

test.php
<?php include("header.php"); ?>
<div id="content_column_two">

<div class="column_two_section">
<h1>Test</h1>
<div class="post_info">
Test
<div class="post_comment">
<br><a href="#"><span class="comment">Geplaatst op 30 April 2009</span></a>
</div>
</div>


</div>

</div> <!-- end of column two -->
<?php include("footer.php"); ?>

In de header staat de rest.."zie broncode"
http://www.weerstation-holwerd.nl/header.php

[ Bericht 86% gewijzigd door SpeedyGJ op 16-05-2009 20:14:50 ]
Doe mee met het voorspellen van het weer!
Weekvoorspelling -- Week 1
Maandvoorspelling februari.
Jaarvoorspelling 2024 --- Jaarvoorspelling 2025!
  zaterdag 16 mei 2009 @ 20:23:59 #117
252113 jemoeder125
En je vader!
pi_69095428
dit heeft totaal geen zin zo. Ten eerste heeft dit niets met css te maken. Ten tweede, zolang we niet kunnen zien wat je scripts doen, kunnen we je ook niet helpen.

Als het alleen om simpele includes gaan, ligt het gewoon aan je HTML-opbouw.
pi_69122947
Hoe kan je een bepaalde div hiden alleen in IE6?

met javascript iets van if brwoser=ie6 {getelementbyid.divnaamblaat.display=none}
pi_69125776
quote:
Op zondag 17 mei 2009 17:25 schreef Flaccid het volgende:
Hoe kan je een bepaalde div hiden alleen in IE6?

met javascript iets van if brwoser=ie6 {getelementbyid.divnaamblaat.display=none}
Conditional comments gebruiken.

1
2
3		<!--[if lte IE 6]>
   ** IE6 stylesheet laden **
<![endif]-->
fokstok.nl
pi_69127652
quote:
Op zondag 17 mei 2009 18:56 schreef Light het volgende:

[..]

Conditional comments gebruiken.
[ code verwijderd ]
Is dit css, t is toch geen javascript?
pi_69128606
quote:
Op zondag 17 mei 2009 19:48 schreef Flaccid het volgende:

[..]

Is dit css, t is toch geen javascript?
HTML.
シ
pi_69130067
quote:
Op zondag 17 mei 2009 20:14 schreef Chanty87 het volgende:

[..]

HTML.
Hij doet het al
  maandag 18 mei 2009 @ 11:27:03 #123
87680 Mirel
Mirel wil een bongophone.
pi_69144961
http://www.presikharmonie.nl/index.php?option=com_eventlist&view=categoryevents&id=1&Itemid=39 (joomla site, eventlist component alleen, geen module)

Er staan een aantal stippellijnen in de tabel onderaan, en ik heb geen idee waar ik dat kan veranderen. Ik zie nergens dotted staan als ik ctrl-f in het bestand eventlist.css, en ook niet in de template.css. Iemand die dit kent van het Eventlist component?
When all else fails, you always have delusion.
pi_69145374
quote:
Op maandag 18 mei 2009 11:27 schreef Mirel het volgende:

Er staan een aantal stippellijnen in de tabel onderaan, en ik heb geen idee waar ik dat kan veranderen.
Zoek eens op "url(../images/dot.gif)" En installeer Firebug, dan had je het zo gevonden.
pi_69146851
Firebug? Webdeveloper Toolbar
シ
  maandag 18 mei 2009 @ 13:00:06 #126
87680 Mirel
Mirel wil een bongophone.
pi_69148034
Ja ik heb Opera dragonding, Firefox firebug, en webdeveloper voor IE. ik dacht gewoon dat het een echte lijn was ipv een afbeelding
When all else fails, you always have delusion.
pi_69151924
quote:
Op maandag 18 mei 2009 12:26 schreef Chanty87 het volgende:
Firebug? Webdeveloper Toolbar
Die ook, maar die kan echt niet tippen aan Firebug. Daarmee had ik dit iig niet in 30 seconden gevonden.
pi_69155968
quote:
Op maandag 18 mei 2009 14:55 schreef Roy_T het volgende:

[..]

Die ook, maar die kan echt niet tippen aan Firebug. Daarmee had ik dit iig niet in 30 seconden gevonden.
CSS > View Style Information > selecteer de cel van de tabel met de stippellijn. 5 sec.
シ
  maandag 18 mei 2009 @ 17:06:02 #129
39952 Hukkie
Wanna bang heads with me
pi_69156261
Ik heb de volgende code:
quote:
Body {
width:750px;
margin:0 auto;
margin-top:15px;
}

#header {
width:750px;
height:150px;
background-color:#ffffff;
border: 2px solid #CCCCCC;
font-weight: bold;
color: #666666;
background: url(Pics/FP-moving-gif2.gif) no-repeat center center ;

}

Nu wil ik het plaatje dus bepaalde afmetingen geven, zodat ie netjes in de header past.
Maar als ik die maten invoer dan worden de afmetingen van de header aangepast en niet die van het plaatje. Weet iemand wat ik fout doe?
There are no Saviours, there are no Kings, the Power lies in your head
DeviantArt
  maandag 18 mei 2009 @ 17:16:09 #130
230788 n8n
Pragmatisch
pi_69156606
quote:
Op maandag 18 mei 2009 17:06 schreef Hukkie het volgende:
Ik heb de volgende code:
[..]

Nu wil ik het plaatje dus bepaalde afmetingen geven, zodat ie netjes in de header past.
Maar als ik die maten invoer dan worden de afmetingen van de header aangepast en niet die van het plaatje. Weet iemand wat ik fout doe?
Met css kan je (nog) niet de afmetingen van een achtergrondafbeelding bepalen, je zult dus de afbeelding zelf aan moeten passen naar de juiste afmetingen.

1
2
3
4		Body { 
width:750px;
margin: 15px auto 0;
}


Volgens mij werkt dit trouwens ook, scheelt weer een regel.
“Specialization is for insects”.—Robert Heinlein
  maandag 18 mei 2009 @ 17:20:12 #131
39952 Hukkie
Wanna bang heads with me
pi_69156758
quote:
Op maandag 18 mei 2009 17:16 schreef n8n het volgende:

[..]

Met css kan je (nog) niet de afmetingen van een achtergrondafbeelding bepalen, je zult dus de afbeelding zelf aan moeten passen naar de juiste afmetingen.
[ code verwijderd ]

Volgens mij werkt dit trouwens ook, scheelt weer een regel.
Jawel hoor dat gaat prima, als ik van een los plaatje de afmetingen ingeef dan gaat dat prima, alleen dus niet bij het plaatje wat ik in de header wil zetten.
There are no Saviours, there are no Kings, the Power lies in your head
DeviantArt
pi_69156964
quote:
Op maandag 18 mei 2009 17:20 schreef Hukkie het volgende:

[..]

Jawel hoor dat gaat prima, als ik van een los plaatje de afmetingen ingeef dan gaat dat prima, alleen dus niet bij het plaatje wat ik in de header wil zetten.
Omdat dat in je header een background is dus dan kan dat (nog) niet.
シ
  maandag 18 mei 2009 @ 17:31:20 #133
39952 Hukkie
Wanna bang heads with me
pi_69157139
quote:
Op maandag 18 mei 2009 17:25 schreef Chanty87 het volgende:
Omdat dat in je header een background is dus dan kan dat (nog) niet.
Maar what about deze methode?
quote:
div#afbeelding{
background: #D3E6CF url(../_img/para.jpg) no-repeat 0 0;
height: 300px;
width: 225px;
border: 5px solid #618059;
}
Zou moeten werken, maar ik krijg het niet aan de praat , vandaar dat ik het op bovenstaande manier probeer.
Als ik dit in de header zet dan is het hele plaatje weg.

Of werkt dat in zijn geheel niet voor headers?
There are no Saviours, there are no Kings, the Power lies in your head
DeviantArt
pi_69157849
quote:
Op maandag 18 mei 2009 17:31 schreef Hukkie het volgende:

[..]

Maar what about deze methode?
[..]
Dat is positionering Met CSS2 is het niet mogelijk om achtergronden te schalen. Je zult toch echt zelf het plaatje moeten verkleinen
シ
  maandag 18 mei 2009 @ 18:06:30 #135
39952 Hukkie
Wanna bang heads with me
pi_69158238
Oke, dank voor de info, ff photoshop opstarten dan.
There are no Saviours, there are no Kings, the Power lies in your head
DeviantArt
pi_69253393
Ik wil children options in een select box een indent geven. Dit gaat niet met padding(-left) of margin(-left). Hoe kan ik dit doen in IE? Firefox doet het wel gewoon..
Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..
pi_69254515
quote:
Op donderdag 21 mei 2009 10:32 schreef markiemark het volgende:
Ik wil children options in een select box een indent geven. Dit gaat niet met padding(-left) of margin(-left). Hoe kan ik dit doen in IE? Firefox doet het wel gewoon..
Hetzelfde geldt eigenlijk voor optgroup, die blijft in IE maar bold en italic.

Hier mijn CSS
1
2
3		optgroup{background-color:#09F; color:#000; font-weight: bold; font-style:normal;}
option.option_category_0 {background-color:#09F; color:#000;}
option.option_category_1 {padding-left: 25px;}
Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..
pi_69254761
quote:
Op donderdag 21 mei 2009 10:32 schreef markiemark het volgende:
Ik wil children options in een select box een indent geven. Dit gaat niet met padding(-left) of margin(-left). Hoe kan ik dit doen in IE? Firefox doet het wel gewoon..
Een beetje zoals hier onder aan de pagina (Selecteer forum)? Daar zit de padding met & nbsp; in de html-code.
fokstok.nl
pi_69255018
quote:
Op donderdag 21 mei 2009 11:14 schreef markiemark het volgende:

[..]

Hetzelfde geldt eigenlijk voor optgroup, die blijft in IE maar bold en italic.

Hier mijn CSS
[ code verwijderd ]
Als ik deze pagina bekijk, kan het nog wel eens lastig worden om een <option> of een <optgroup> te stylen. Je hebt ook te maken met browsers die alles zelf bepalen. Er valt natuurlijk ook wel wat voor te zeggen dat een standaardcomponent van het besturingssysteem altijd op dezelfde manier wordt getoond, en dat het dus geen browserding is.
fokstok.nl
pi_69374189
Wat is nou de meest makkelijke en beste manier om de a van een class te stijlen? Ik heb steeds het probleem dat de link uiteindelijk een andere a overneemt.

Voorbeeldje:
h1 is gestyled
.test a, a:active, a:visited en a:hover zijn gestyled

In <div class="test"> wil ik dus niet dat die daar de h1 gaat gebruiken. Dit gebeurt uiteindelijk wel. Hoe kan ik de classes apart stijlen zodat dat wel lukt?
pi_69374736
Code graag, want hier kan niemand iets van maken Nashje
pi_69374788
Er hoeft ook niets van te worden gemaakt. Gaat gewoon om een stukje uitleg.

Hoe stijl jij jouw links in een div?
  maandag 25 mei 2009 @ 10:34:11 #143
198417 Lastpost
Rotterdammert!
pi_69375334
quote:
Op maandag 25 mei 2009 10:16 schreef Nashje het volgende:
Er hoeft ook niets van te worden gemaakt. Gaat gewoon om een stukje uitleg.

Hoe stijl jij jouw links in een div?
Ik doe het meestal zo:
Pak de standaard a/h1/hr/ul enz. en die geef ik een basiskleur/afmeting/border en alle andere ongein die je kunt bedenken.
Daarbuiten heb ik nog datzelfde verhaal voor bepaalde delen op de site waarbij die zaken afwijken van de rest van de site en daarbij werk ik dan weer met de div-verwijzing voor de a/h1 enz. enz.

body, img, h1, h2, h3, p, hr, ul
a:link, a:visited, a:active, a:hover enz.

En dan bijvoorbeeld voor mijn div MenuInhoud (onderdeel van een 'grotere' div) die een andere h1 opmaak heeft dan de standaard h1 die eerder in de stylesheet staat:
.MenuInhoud h1 { font-size: 1.3em; }
.MenuInhoud a { color:#000000 ;text-decoration:none; }

En zo weer verder.
Vast niet de makkelijkste en/of beste manier, ben ook maar beginner.
https://topbabe.nl
pi_69376464
quote:
Op maandag 25 mei 2009 10:16 schreef Nashje het volgende:
Er hoeft ook niets van te worden gemaakt. Gaat gewoon om een stukje uitleg.
Ik snap niets van wat jouw h1 ermee te maken heeft
quote:
Hoe stijl jij jouw links in een div?
div.classname a {
...
}

pi_69605725
Hoe krijg ik de footer helemaal onder de pagina op http://www.yeuxmarrons.com/ (in Firefox) en op http://www.yeuxmarrons.com/theme/disney/ ? Ik heb de verschillende onderdelen met DIV'jes onderverdeeld maar de footer begint zelfs al tussen de bovenste menuopties. (globalnav)

De CSS staat hier http://www.yeuxmarrons.com/new/yeuxmarrons.css
De wijze houdt zich op de achtergrond, in werkelijkheid staat hij vooraan
  maandag 1 juni 2009 @ 18:17:18 #146
252113 jemoeder125
En je vader!
pi_69608699
quote:
Op maandag 1 juni 2009 @ 16:32 schreef tim2308 het volgende:
Hoe krijg ik de footer helemaal onder de pagina op http://www.yeuxmarrons.com/ (in Firefox) en op http://www.yeuxmarrons.com/theme/disney/ ? Ik heb de verschillende onderdelen met DIV'jes onderverdeeld maar de footer begint zelfs al tussen de bovenste menuopties. (globalnav)

De CSS staat hier http://www.yeuxmarrons.com/new/yeuxmarrons.css
gewoon de float clearen?
pi_69608944
Dank je he! Het werkt. p {clear: both;} aan de css toegevoegd en een lege <p></p> boven de footer gezet. (gevonden op http://www.flashfocus.nl/forum/archive/index.php/t-43103.html , onderaan)

Ook nog een handige site lijkt me:http://css.maxdesign.com.au/floatutorial/
De wijze houdt zich op de achtergrond, in werkelijkheid staat hij vooraan
  maandag 1 juni 2009 @ 21:25:54 #148
252113 jemoeder125
En je vader!
pi_69615667
waarom niet gewoon op de footer zelf dan?

grofweg alle P-tags clearen kan ook ongewenste effecten hebben...
pi_69619935
Een lege <p>, dat is lekker semantisch correct zullen we zeggen Hang die clear idd gewoon aan de footer en klaar.

Met alle respect, de meeste mensen op FlashFocus hebben geen totaal benul van wat ze doen in HTML & CSS. Die moeten het gewoon bij Flash houden.
pi_69620808
quote:
Op maandag 1 juni 2009 21:25 schreef jemoeder125 het volgende:
waarom niet gewoon op de footer zelf dan?
Dat lijkt me idd beter.
quote:
grofweg alle P-tags clearen kan ook ongewenste effecten hebben...
Ik kan me ook niet echt voorstellen dat het nodig is. Als je iets heb dat je voor alle P-tags wilt instellen, dan zijn het margins en paddings. Font-dingen stel je op een hoger niveau in (html of body) en dan ben je eigenlijk al klaar.
fokstok.nl
pi_69624304
Merci heren, ook het clear in de footer zetten werkt ook. Je moet het allemaal net weten, ik spreek ook krom spaans. het werkt, je krijgt wat je wilt (cq. mijn gasten krijgen wat ze willen) maar mooi is het niet. Zo ook mijn kennis van CSS. Nogmaals bedankt...
De wijze houdt zich op de achtergrond, in werkelijkheid staat hij vooraan
pi_69788993
1px Offset

Ik heb nu iets irritants. Ik heb een bg, die gecentered word door background-position:center (het is in de body, zodat ik een height: 100% heb). Ook heb ik een top van een vlak, met rounded corners, gecentered doormiddel van margin: 0 auto; . Als ik mijn firefox/ie/w/ever (het komt overal voor) resize, laat het ding 2 situaties zien. De goede:


en dan de slechte, als ik mijn venster resize:


Hoe ga ik dit tegen?
pi_69789030
ik neem aan dat je bovenste ding uit 1 plaatje bestaat ? je kan een min-length of min-width instellen
zodat hij niet kleiner word dan dat plaatje wat je boven aan hebt gebruikt
1min-width: 800px;


dit ter behoeve aan de breedte kijk hoe breed het plaatje is en stel het in ?

hierdoor heb je altijd de gewenste grootte is het beweegbaar in de breedte als het langer word.
maar houd het een absolute waarde aan als het kleiner is dan 800px.

vertel het me als het zo is opgelost

[ Bericht 50% gewijzigd door cablegunmaster op 07-06-2009 11:38:54 ]
Redacted
pi_69789380
quote:
Op zondag 7 juni 2009 11:27 schreef cablegunmaster het volgende:
ik neem aan dat je bovenste ding uit 1 plaatje bestaat ? je kan een min-length of min-width instellen
zodat hij niet kleiner word dan dat plaatje wat je boven aan hebt gebruikt
[ code verwijderd ]

dit ter behoeve aan de breedte kijk hoe breed het plaatje is en stel het in ?

hierdoor heb je altijd de gewenste grootte is het beweegbaar in de breedte als het langer word.
maar houd het een absolute waarde aan als het kleiner is dan 800px.

vertel het me als het zo is opgelost
Dat is t probleem niet denk ik. Zelfs als het scherm groot zat is doet het een beetje raar. Demo op http://joristimes.nl/kutje/
pi_69789500
quote:
Op zondag 7 juni 2009 11:45 schreef Flaccid het volgende:

[..]

Dat is t probleem niet denk ik. Zelfs als het scherm groot zat is doet het een beetje raar. Demo op http://joristimes.nl/kutje/
merk er niks van in FF
*test in IE *
Redacted
pi_69789702
quote:
Op zondag 7 juni 2009 11:51 schreef cablegunmaster het volgende:

[..]

merk er niks van in FF
*test in IE *
Huh? Tijdens dat je je schermpje resizen zie ik mijn top ding niet align met mn body bg
pi_69790030
quote:
Op zondag 7 juni 2009 12:01 schreef Flaccid het volgende:

[..]

Huh? Tijdens dat je je schermpje resizen zie ik mijn top ding niet align met mn body bg
/* ignore 2 plaatjes kunnen niet in 1 div class
weet ik , probeer de top en middle eens in 1 div te doen ?
je kan het makkelijk in 1 css gedeelte maken
*/

Oplossing 1:
https://developer.mozilla.org/en/CSS/-moz-border-radius


zie voorbeeld
je kan het makkelijk zelf na maken


Oplossing 2:
maar om het probleem in IE op te lossen eens kijken

wat ik meestal doe is :
container maken Deze zet je in het midden neer en daar komt je webpagina in
1
2
3
4
5
6		<div class ="container">
<div class="contenttop">
</div>
<div class="body">
</div>
</div>


De CSS:
Container : in het midden centreren
Contenttop: (zit al in het midden door container) + plaatje
body: plaatje

?

[ Bericht 12% gewijzigd door cablegunmaster op 07-06-2009 12:25:59 ]
Redacted
pi_69790228
quote:
Op zondag 7 juni 2009 12:14 schreef cablegunmaster het volgende:

[..]

weet ik , probeer de top en middle eens in 1 div te doen ?
je kan het makkelijk in 1 css gedeelte maken


https://developer.mozilla.org/en/CSS/-moz-border-radius


zie voorbeeld
je kan het makkelijk zelf na maken
Met middle bedoel je het witte vlak? Dat zit vast aan de body, vanwege 100% height.
pi_69790272
quote:
Op zondag 7 juni 2009 12:23 schreef Flaccid het volgende:

[..]

Met middle bedoel je het witte vlak? Dat zit vast aan de body, vanwege 100% height.
negeer dat maar even, je hebt 2 verschillende plaatjes , dan komt dat niet goed uit.
oplossing 1:
borders recreeren met kleuren en stylen en er een randje aangeven met CSS
oplossing 2:
je vak in een container stoppen (andere klasse)
en de container centreren. en in de container alle andere divs instoppen.
Redacted
pi_69790384
quote:
Op zondag 7 juni 2009 12:24 schreef cablegunmaster het volgende:

[..]

negeer dat maar even, je hebt 2 verschillende plaatjes , dan komt dat niet goed uit.
oplossing 1:
borders recreeren met kleuren en stylen en er een randje aangeven met CSS
oplossing 2:
je vak in een container stoppen (andere klasse)
en de container centreren. en in de container alle andere divs instoppen. ^O^
Dat 2e komt in de buurt. van wat ik wil, maar nog niet helemaal. Ik heb besloten om de onderkant ook maar een randje te geven, zodat de 100% height niet per sé hoeft. Nog een kort css vraagje:

Ik heb nu deze code, ik dacht slim te zijn:
1
2
3
4
5
6
7
8
9
10
11
12
13
14		#contentend{
margin: 0 auto;
width: 800px;
height: 17px;
background-repeat:no-repeat;
}

#top{
background-image:url(img/contenttop.png);
}

#bottom{
background-image:url(img/contentbottom.png)
}

En dat ik dan de bovenste div 2 id's gaf, maar dat kan niet ofwel? Hoe moet het dan?
pi_69790426
quote:
Op zondag 7 juni 2009 12:28 schreef Flaccid het volgende:

[..]

Dat 2e komt in de buurt. van wat ik wil, maar nog niet helemaal. Ik heb besloten om de onderkant ook maar een randje te geven, zodat de 100% height niet per sé hoeft. Nog een kort css vraagje:

Ik heb nu deze code, ik dacht slim te zijn:
[ code verwijderd ]

En dat ik dan de bovenste div 2 id's gaf, maar dat kan niet ofwel? Hoe moet het dan?
welke html code gebruikte je?
kun je verduidelijken wat je bedoelt?

want Classes kun je herhaalt gebruiken en ID's niet
Redacted
pi_69790572
quote:
Op zondag 7 juni 2009 12:30 schreef cablegunmaster het volgende:

[..]

welke html code gebruikte je?
kun je verduidelijken wat je bedoelt?

want Classes kun je herhaalt gebruiken en ID's niet
Dat dus. Classes werken nu:)
pi_69847207
http://cablegunmaster.nl/test/index.html

Eigen vraag ik heb 2 plaatjes hoe krijg je het wit gedeelte er tussen weg ?
ik kan de spatie / wit nsb gedoe niet vinden.
Redacted
pi_69847328
quote:
Op maandag 8 juni 2009 23:31 schreef cablegunmaster het volgende:
http://cablegunmaster.nl/test/index.html

Eigen vraag ik heb 2 plaatjes hoe krijg je het wit gedeelte er tussen weg :P ?
ik kan de spatie / wit nsb gedoe niet vinden. :o
Verander
1
2		            <a href="" ><img src="knop_1_test.png" alt ="HOME" ></a>
            <a href="" ><img src="knop_2_test.png" alt ="OVER MIJ"></a>


eens door
1            <a href="" ><img src="knop_1_test.png" alt ="HOME" ></a><a href="" ><img src="knop_2_test.png" alt ="OVER MIJ"></a>
fokstok.nl
pi_69847384
quote:
Op maandag 8 juni 2009 23:34 schreef Light het volgende:

[..]

Verander
[ code verwijderd ]

eens door
[ code verwijderd ]
met zijn 2en zo'n beginners fout niet kunnen uitvogelen
ik hem al helpen met zijn css voor de border
hij creert natuurlijk een wit spatie en na 1 witspatie negeert hij de komende .


Hartelijk bedankt, iets om te lachen gevonden .
Redacted
pi_70389320
2 dingen.

1: Waarom is dit geen centraal topic? Ik moet m elke keer uit MyAt halen :(

2: Een simpel vraagje.

Ik heb een lijstje met tabs (een horizontal list)
SPOILER
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
En wat HTML code.
SPOILER
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
Nu wil ik bij de active geen background-image hebben aan de onderkant. Een class meegeven met background-image: none werkt niet. Wat doe ik verkeerd?
pi_70389927
quote:
Op vrijdag 26 juni 2009 11:10 schreef Flaccid het volgende:

Nu wil ik bij de active geen background-image hebben aan de onderkant. Een class meegeven met background-image: none werkt niet. Wat doe ik verkeerd?
Probeer "background: transparent" eens? En anders even in Firebug kijken wat er mis gaat; iets met erven of specificity dan
pi_70390424
quote:
Op vrijdag 26 juni 2009 11:26 schreef Roy_T het volgende:

[..]

Probeer "background: transparent" eens? En anders even in Firebug kijken wat er mis gaat; iets met erven of specificity dan
Background color werkt ook niet. Het gaat hier om een gevalletje volgorde. Is nu opgelost.
  vrijdag 26 juni 2009 @ 13:18:57 #169
134533 donroyco
dus niet Donroyco
pi_70393761
tvp.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_70551417
Weet iemand of ik dmv een div een foutmelding aan een embed kan geven als de bezoeker geen Java heeft geinstalleerd?
pi_70553813
dmv een div een foutmelding aan een embed geven...

Verklaar u nader!
—o—
pi_70553951
quote:
Op woensdag 1 juli 2009 16:33 schreef Nashje het volgende:
Weet iemand of ik dmv een div een foutmelding aan een embed kan geven als de bezoeker geen Java heeft geinstalleerd?
onmogelijk ik denk dat je dan toch even je hoofd moet krabben en afvragen of je CSS wel snapt .

Het is een opmaaktaal. geen waarchuwings taal of programmeertaal waarin je voorwaardes kan stellen die niet met de opmaak te maken hebben.

Css bemoeit zich niet met java of javascript
Redacted
pi_70604537
quote:
Op woensdag 1 juli 2009 17:51 schreef cablegunmaster het volgende:

[..]

onmogelijk ik denk dat je dan toch even je hoofd moet krabben en afvragen of je CSS wel snapt .

Het is een opmaaktaal. geen waarchuwings taal of programmeertaal waarin je voorwaardes kan stellen die niet met de opmaak te maken hebben.

Css bemoeit zich niet met java of javascript
. Dat zeg ik toch ook niet.

Op een van mijn andere sites gebruik ik een div om te laten zien als de bezoeker geen Flash gebruikt.
  vrijdag 3 juli 2009 @ 10:50:55 #174
33189 RM-rf
1/998001
pi_70605051
quote:
Op vrijdag 3 juli 2009 10:34 schreef Nashje het volgende:

[..]

. Dat zeg ik toch ook niet.

Op een van mijn andere sites gebruik ik een div om te laten zien als de bezoeker geen Flash gebruikt.
dat heeft echter niks met CSS te maken...
maar is gewoon een eigenschap van HTML-rendering door je browser...


zo rendert bv een browser content die in een <NOSCRIPT> tag staat wél als iemand bv geen javascript heeft aanstaan...
tevens is het zo dat alle infor binnen een OBJECT (embed is geen HTML standaard tag) gebruikt wordt als een useragent de object-content zelf niet renderen kan en is specifiek bedoeld om informatie te geven aan UA#s die ddit dan als alternatieve content tonen (als het ware zoals een ALT-tag eigenlijk bedoeld is )
http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.3.1
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_70605091
quote:
Op vrijdag 3 juli 2009 10:50 schreef RM-rf het volgende:

[..]

dat heeft echter niks met CSS te maken...
Dat zeg ik ook niet. Ik heb het over een div.

Er was/is geen topic over HTML.
  vrijdag 3 juli 2009 @ 11:27:15 #176
33189 RM-rf
1/998001
pi_70606345
quote:
Op vrijdag 3 juli 2009 10:52 schreef Nashje het volgende:

[..]

Dat zeg ik ook niet. Ik heb het over een div.

Er was/is geen topic over HTML.
Zou het dan geen idee zijn om gewoon zelf een topic op te starten met zulk een vraag ... in plaats die vraag te platsen in een ander 'groot-vragen-topic' waar die eigenlijk geheel niet hoort (sowieso is dat al snel een nadeel van zulke grote vragen-topics, dat mensen niet zelf meer een topic durven op te starten met een legitiem vragje)

Overigemns, ik heb je vraag beantwoord maar snap niet waarom jij over een div begint als je het eigenlijk over een embed/object hebt... een div is een hele andere tag die er verder niks mee te maken heeft en dus er ook niks meer te zoeken heeft...

wil je bepaalde content enkel tonen als een zekere extren aangeroepe embedded content niet gerenderd kan worden, kun je die als inhoud binnn een OBJECT plaatsen, of als je zo nodig de proprietaire EMBED wilt gebruiken, bestat daarvoor een NOEMBED tag:
http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/embed.html (waarschuwing, verouderd e site, ik zou hun tip om geen object te gebruiken niet al te serieus nemen, dat is jaren en jaren terug geschreven)
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_70830203
Is er een manier waarop ik dit effect: http://www.htmlcodetutorial.com/tables/index_famsupp_179.html met CSS kan bereiken?
Trotse poster van het 37000000ste bericht ^O^
pi_70833745
quote:
Op donderdag 9 juli 2009 22:21 schreef daReaper het volgende:
Is er een manier waarop ik dit effect: http://www.htmlcodetutorial.com/tables/index_famsupp_179.html met CSS kan bereiken?
Je kunt cellen gewoon borders geven, dus: ja.
pi_70847030
quote:
Op donderdag 9 juli 2009 22:21 schreef daReaper het volgende:
Is er een manier waarop ik dit effect: http://www.htmlcodetutorial.com/tables/index_famsupp_179.html met CSS kan bereiken?
Elke cell een apparte class geven en dan border-top uitzetten etc...
pi_70873533
quote:
Op vrijdag 10 juli 2009 13:40 schreef Flaccid het volgende:

[..]

Elke cell een apparte class geven en dan border-top uitzetten etc...
Probleem is dat ik alleen controle heb over de CSS, niet over de HTML-output... Hoeveel manieren blijven er dan nog over?
Trotse poster van het 37000000ste bericht ^O^
pi_70873938
quote:
Op zaterdag 11 juli 2009 12:47 schreef daReaper het volgende:

[..]

Probleem is dat ik alleen controle heb over de CSS, niet over de HTML-output... Hoeveel manieren blijven er dan nog over?
Dus hoe de tabel in elkaar zit heb jij totaal geen controle over? Slechts een css ding? mmm, lastig. Probeer dit eens:

1
2
3		table{
border: none;
}
pi_70873979
quote:
Op zaterdag 11 juli 2009 12:47 schreef daReaper het volgende:

[..]

Probleem is dat ik alleen controle heb over de CSS, niet over de HTML-output... Hoeveel manieren blijven er dan nog over?
Dan zou je alle cellen een border (boven + links) kunnen geven. Vervolgens de cellen in de eerste rij geen border boven, en de eerste cel per rij geen border links.

1
2
3
4
5
6
7
8
9
10
11		table tbody tr td {
    border: 0;
    border-top: 1px solid red;
    border-left: 1px solid red;
}
table tbody tr:first-child td {
    border-top: 0;
}
table tbody tr td:first-child {
    border-left: 0;
}


Niet getest. Sowieso gaat het niet werken in IE6, die ondersteunt :first-child niet.
fokstok.nl
pi_70875144
quote:
Op zaterdag 11 juli 2009 13:04 schreef Light het volgende:

[..]

Dan zou je alle cellen een border (boven + links) kunnen geven. Vervolgens de cellen in de eerste rij geen border boven, en de eerste cel per rij geen border links.
[ code verwijderd ]

Niet getest. Sowieso gaat het niet werken in IE6, die ondersteunt :first-child niet.
tof! Werkt in elk geval prima in IE7 en Moz, bedankt
Trotse poster van het 37000000ste bericht ^O^
  maandag 13 juli 2009 @ 14:25:09 #184
179307 Saboo
Hoi ik zit op fok
pi_70933501
hoi, ik ben een totale noob met CSS, maar ik dacht 'leuk laat ik eens een website maken' ... Gaat vrij makkelijk tot nog toe, alleen heb ik 1 probleempje wat wsl een heel stom iets is.

de HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		<body>
<div id="main_container">
<div id="box1">box1</div>

<div id="Menu">
<div id="box2">box2</div>
<div id="box3">box3</div>
<div id="box4">box4</div>
</div>

<div id="box5">box5 dit is een test</div>
</div>


</body>


De CSS

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		a {
   font-size: 16px;
   color: #CCF;
}
a:link {
   text-decoration: none;
}
a:visited {
   text-decoration: none;
   color: #CCC;
}
a:hover {
   text-decoration: none;
}
a:active {
   text-decoration: none;
}
body{
margin: 0;
text-align: center;
}

div#main_container{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}

div#box1{
float:left;
width: 213px;
height: 600px;
background:url(sitebasis%20copy.jpg);
}

div#box2{
position:relative;
float:none;
width: 156px;
height: 118px;
background-color:#6F0;
}

div#box3{
position:relative;
float:none;
width: 156px;
height: 142px;
background-color:#933;
}

div#box4{
position:relative;
float:none;
width: 156px;
height: 340px;
background-color:#00F;
}

div#box5{
position:relative;
left: 369px;
width: 384px;
height: 600px;
background-color:#C9C;
}

div#Menu{
position:relative;
float:left;
width: 384px;
height: 600px;
}


Het kan vast beter enzo, maar ik vond het zo vrij makkelijk gaan... Het probleem is echter dat de text van box 5, niet in de box zelf zit maar er onder. Wsl iets heel stoms :o
Wie o wie kan mij helpen?

bij voorbaat heel veel dank!
pi_70933828
Je wilt box 5 naast het menu hebben? Dan moet je box5 ook een float: left; geven Als ie er dan nog onder gaat dan is de container te klein.

float: none; en position: relative; kunnen weg trouwens.

1
2
3
4
5
6
7
8
9
10
11		<div id="main_container">
<div id="box1">box1</div>

<div id="Menu">
<div id="box2">box2</div>
<div id="box3">box3</div>
<div id="box4">box4</div>
</div>

<div id="box5">box5 dit is een test</div>
</div>


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		a {
   font-size: 16px;
   color: #CCF;
}

a:link {
   text-decoration: none;
}

a:visited {
   text-decoration: none;
   color: #CCC;
}

a:hover {
   text-decoration: none;
}

a:active {
   text-decoration: none;
}

body {
   margin: 0;
   text-align: center;
}

div#main_container {
   margin: 0 auto 0 auto;
   width: 750px;
   text-align: left;
}

div#box1 {
   float:left;
   width: 200px;
   height: 600px;
   background:url(sitebasis%20copy.jpg);
}

div#box2 {
   width: 150px;
   height: 118px;
   background-color:#66FF00;
}

div#box3 {
   width: 150px;
   height: 142px;
   background-color:#993333;
}

div#box4 {
   width: 150px;
   height: 340px;
   background-color:#0000FF;
}

div#box5 {
   float: left;
   width: 400px;
   height: 600px;
   background-color:#CC99CC;
}

div#Menu {
   float:left;
   width: 150px;
   height: 600px;
}


Levert dit op:



[ Bericht 20% gewijzigd door Chanty87 op 13-07-2009 14:44:24 ]
シ
  maandag 13 juli 2009 @ 14:55:02 #186
179307 Saboo
Hoi ik zit op fok
pi_70934337
zo is hij beter idd

Hartstikke bedankt!
pi_70966409
Ik ben sinds kort ( paar dagen ) ook bezig met DIVjes, maar ik zit nu met een probleem.
Ik wil graag dat mijn DIVjes meeschijven als er tekst in staat, maar wat er nu gebeurt is dat alle tekst als het ware gewoon doorloopt.
Nu heb ik dit kunnen oplossen door gebruik te maken van overflow: hidden;
Maar dit is in mijn ogen niet de oplossing, het moet toch mogelijk zijn dat alles gewoon met de tekst meeschuift?

de 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117		@charset "utf-8";

body {
 font-family: Arial, serif;  font-size: 10pt;
 
}
A:visited {text-decoration: none; color: white}
A:link {text-decoration: none; color: white}
A:active {text-decoration: none; color: white}
A:hover {text-decoration: underline; color: lightgreen;}


.big-main {
    position: absolute;
    background-image: url(bg.jpg);
    background-repeat:repeat-x;
    height: 100%;
    width: 100%;
}

.topmain {

position:relative;
height:178px;
width:802px;
background-image: url('images/header.png');
border:thin #CCCCCC solid;
}

.menu {

position:relative;
border:thin #CCCCCC solid;
background-color:#1A1A1A;
font: Verdana;
height:37px;
width:802px;
background-image: url('images/menu/menubg.png');
background-repeat:repeat-x;
color: white;
text-align: right;

}

.menuheader {

  border:thin #CCCCCC solid;
  color: white;
  height: 28px;
  background-color:#1A1A1A;
  background-image: url('images/menu/menuheader.png');
  background-repeat:repeat-x;
  
}
.menuitem {
 
  color: white;
  text-align: left;
  height: 26px;
  background-color:#1A1A1A;
  background-image: url('images/menu/menuitem.png');
  background-repeat:repeat-x;
  
}

.contentitemheader {
 
  color: white;
  text-align: center;
  height: 26px;
  background-color:#1A1A1A;
  background-image: url('images/menu/menuitem.png');
  background-repeat:repeat-x;
  
}
.contentitem {
 
  color: white;
  text-align: left;
  height: 26px;
  background-color:#1A1A1A;

}


#container { 
    width:802px;
    height: 80%;
    margin: 0; 
} 
#div1 { 
    background: #000000; 
    width: 32%; 

    float: left; 
    border:thin #CCCCCC solid;
background-color:#1A1A1A;
} 

#div2 { 
    background: #555555; 
    width: 65%; 
    height: 80%;
    float: right; 
    border:thin #CCCCCC solid;
    background-color:#1A1A1A;
    overflow:hidden; 

} 

#div3 { 
    background: #000000; 
    width: 32%; 
    float: left; 
    border:thin #CCCCCC solid;
    background-color:#1A1A1A;
} 


Als iemand op andere punten nog fouten ziet, of dingen die beter kunnen dan sta ik daar ook altijd open voor.
pi_70971169
quote:
Op dinsdag 14 juli 2009 14:20 schreef DirkZz het volgende:

Maar dit is in mijn ogen niet de oplossing, het moet toch mogelijk zijn dat alles gewoon met de tekst meeschuift?
Geen height definiëren
pi_70972314
quote:
Op dinsdag 14 juli 2009 16:23 schreef Roy_T het volgende:

[..]

Geen height definiëren
Had ik ook geprobeert, dan gaat div#3 flippen, en er onder staan.

1. Zonder height ingesteld:
http://i26.tinypic.com/4pv8z5.png

2. met height ingesteld:
http://i28.tinypic.com/19l9xj.png
pi_70973297
quote:
Op dinsdag 14 juli 2009 @ 16:54 schreef DirkZz het volgende:

[..]

Had ik ook geprobeert, dan gaat div#3 flippen, en er onder staan.

1. Zonder height ingesteld:
http://i26.tinypic.com/4pv8z5.png

2. met height ingesteld:
http://i28.tinypic.com/19l9xj.png
Alles wat onder elkaar moet doe je samen nesten in een div.

Is semantischer ook.
—o—
pi_70973643
^ Yup, dus die 2 blokken links in één div stoppen en die een float: left; geven.
シ
pi_70973667
1
2
3
4
5
6
7
8
9
10		<div id="container"> 
    <div id="div1">
    <div class=menuheader><b>Karting menu</b></div>
      <div class=menuitem>Menu items uit database</div>


<div id="div3">
          <div class=menuheader><b>Autocross menu</b></div>
            <div class=menuitem>Menu items uit database</div>
          </div></div>


Heb het nu zo, maar nu verschijnt het 2e menu, in het eerste menu.
pi_70973699
Heb je de floats van div1 en div3 weggehaald?
シ
pi_70973733
quote:
Op dinsdag 14 juli 2009 @ 17:37 schreef DirkZz het volgende:

[ code verwijderd ]

Heb het nu zo, maar nu verschijnt het 2e menu, in het eerste menu.
Kijk eens naar de post hierboven van Chanty87 (met paint), en pak het op zo'n manier aan.


1
2
3
4
5
6
7
8		<div #wrapper>
  <div #linkerkolom>
    <div #boven></div>
    <div #onder></div>
  </div>
  <div #rechterkolom>
  </div>
</div>



schematis is dit de structuur die je nodig hebt.
—o—
pi_70973786
Als ik dat doe heft het geen nut, dan staat echt alles door mekaar.

edit:

@hierboven

Ik zal er naar kijken.
pi_70973843
Deze post bedoelt DD neem ik aan
シ
pi_70973996
weg

[ Bericht 84% gewijzigd door DirkZz op 14-07-2009 18:22:16 ]
pi_70975041
Dit is wat ik nu heb:
http://i32.tinypic.com/x9lps.png
http://i30.tinypic.com/2upwvmg.png

Maar het buigt allemaal nog steeds niet mee.
pi_70976275
Ja je hebt nog steeds een vaste hoogte op de rechterkolom staan zo te zien.

Komop zeg een beetje trial-and-error kan geen kwaad! Je kunt niets verneuken wat ctrl-z niet op kan lossen!
—o—
pi_70977816
dan verschuift de hele boel weer.
pi_70977876
CSS:
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		#container { 
    width:802px;
    height: 80%;
    margin: 0; 
    } 
#div1 { 
    background: #000000; 
    width: 32%; 
    float:left;
    border:thin #CCCCCC solid;
    background-color:#1A1A1A;
    } 

#div2 { 
    background: #000000; 
    width: 32%; 
    float:left;
    border:thin #CCCCCC solid;
    background-color:#1A1A1A;
    }

#div3 { 
    background: #555555; 
    width: 65%; 
    height: 80%;
    float: right;
    border:thin #CCCCCC solid;
    background-color:#1A1A1A;
    }



HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		<div id="container" >
      <div id="div3"><div class=menuheader>
        <div class=contentitemheader>test</div>
          <div class=contentitem></div>
       </div></div>
  <div id="Menu">
      <div id="div1">
        <div class=menuheader><b>Karting menu</b></div>
          <div class=menuitem>Menu items uit database</div>
          <br>
          </div>
      <div id="div2">
         <div class=menuheader><b>Autocross menu</b></div>
          <div class=menuitem>Menu items uit database</div>
          </div>
       </div>   
      </div>
pi_70978161
Waarom staat je content nou dan ineens weer vóór je menu?
—o—
pi_70978238
Ohja sorry, ik was allang aan het trial en erroren.
Zal het weer even terug zetten.
pi_70978286
doe eens
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		<div id="container" >
  <div id="Menu">
      <div id="div1">
        <div class=menuheader><b>Karting menu</b></div>
          <div class=menuitem>Menu items uit database</div>
          <br>
          </div>
      <div id="div2">
         <div class=menuheader><b>Autocross menu</b></div>
          <div class=menuitem>Menu items uit database</div>
          </div>
       </div>   
      <div id="div3"><div class=menuheader>
        <div class=contentitemheader>test</div>
          <div class=contentitem></div>
       </div></div>

      </div>

1
2		#menu {float: left; width: 32%; background:red;}
#div3 {width:65%; background:green;}

en verder niets.
Niet getest maar kan haast niet fout gaan.
—o—
pi_70978784
"en verder niets"

Maak eens een testcase, anders kom je nergens.
—o—
pi_70978869
Ja, dat werkt goed.
pi_70979358
Ben hem overnieuw aan het opbouwen, alleen krijg ook RSI kramp ofzo.
Zit al te lang achter de pc :p, ik kijk morgen weer even verder.

Bedankt voor de hulp Doppendoosch en Chanty87
  FOK!-Schrikkelbaas dinsdag 14 juli 2009 @ 22:54:06 #209
1972 Swetsenegger
Egocentrische Narcist
pi_70984318
waarom past webkit (safari en chrome) een background image met position bottom in de <col> tag toe op elke regel en niet, zoals het hoort, op de volledige kolom. En belangrijker... is er een workaround voor?
 | FOK! Schrikkelbaasch
pi_71114738
edit: opgelost.

[ Bericht 97% gewijzigd door DirkZz op 19-07-2009 12:48:14 ]
  woensdag 22 juli 2009 @ 01:16:40 #211
241594 iBolt
Lighting
pi_71202671
Vraagje...

Ik heb een div.

.abc{
padding:10px 7px;
border:1px solid #e8e8e8;
font-size:12px;
color:#777;
font-style:italic;
text-align:center;
background-color:#f3f3f3
}

<div class="abc">
<img scr=".../plaatje.jpg" />
</div>

Nu is het zo dat mijn div zich over de hele breedte uitstrekt ik wil echter dat hij zo breed wordt als het plaatje... hoe doe ik dit?

[ Bericht 0% gewijzigd door iBolt op 22-07-2009 02:11:22 ]
pi_71202891
Geen div gebruiken maar een span.

Maar:
a) waarom uberhaupt een extra element om de afbeelding heen? sorry zitten nog wat paddings in zie ik
b) beetje onoverzichtelijk om je classes namen te geven die ook standaard HTML-elementen zijn lijkt me...
—o—
  woensdag 22 juli 2009 @ 02:11:04 #213
241594 iBolt
Lighting
pi_71203279
quote:
Op woensdag 22 juli 2009 01:32 schreef doppendoosch het volgende:
Geen div gebruiken maar een span.

Maar:
a) waarom uberhaupt een extra element om de afbeelding heen? sorry zitten nog wat paddings in zie ik
b) beetje onoverzichtelijk om je classes namen te geven die ook standaard HTML-elementen zijn lijkt me...
ja sorry class heet ook niet a maar had gewoon even snel getypt + copy past :p
pi_71204217
quote:
Op woensdag 22 juli 2009 01:32 schreef doppendoosch het volgende:
Geen div gebruiken maar een span.

Maar:
waarom uberhaupt een extra element om de afbeelding heen? sorry zitten nog wat paddings in zie ik
Die paddings zijn geen reden om een extra element om een img te zetten. Een img is gewoon een element en kun je als zodanig aanpassen, inclusief margin, padding achtergrondkleur en zelfs achtergrondafbeelding.
fokstok.nl
  woensdag 22 juli 2009 @ 11:08:20 #215
241594 iBolt
Lighting
pi_71207937
quote:
Op woensdag 22 juli 2009 07:18 schreef Light het volgende:

[..]

Die paddings zijn geen reden om een extra element om een img te zetten. Een img is gewoon een element en kun je als zodanig aanpassen, inclusief margin, padding achtergrondkleur en zelfs achtergrondafbeelding.
Klopt maar die box moet niet perse om een img kunnen ook andere elemente zijn video, tabel...

Span werkt trouwens niet

zal even me code geven....
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19		.wp-caption{ 
   padding:10px 7px; 
   border:1px solid #e8e8e8; 
   font-size:12px; 
   color:#777; 
   font-style:italic; 
   text-align:center; 
   background-color:#f3f3f3 
}
p.wp-caption-text{ 
   margin:10px 0 0 0 !important; 
   padding:0; 
   line-height:14px !important; 
}
.aligncenter, div.aligncenter{ 
   display:block; 
   margin-left:auto; 
   margin-right:auto; 
}


en bijvoorbeeld dan dit als input...

1
2
3
4		<div class="wp-caption aligncenter">
<img data-src="http://psplessen.hewejosplace.nl/Betty_Boop_plaatje.jpg" style="visibility:hidden;" />
<p class="wp-caption-text">Betty Boop</p>
</div>


[ Bericht 27% gewijzigd door iBolt op 22-07-2009 11:25:57 ]
pi_71208464
quote:
Op woensdag 22 juli 2009 @ 11:08 schreef iBolt het volgende:

[..]

Klopt maar die box moet niet perse om een img kunnen ook andere elemente zijn video, tabel...
En die kun je geen class geven omdat....?

-edit-
quote:
Op woensdag 22 juli 2009 @ 11:08 schreef iBolt het volgende:

[..]
Span werkt trouwens niet

zal even me code geven....
[ code verwijderd ]

en bijvoorbeeld dan dit als input...
[ code verwijderd ]
Nee allicht, als je die span display:block geeft heb je die heel effectief omgetoverd in een div
—o—
  woensdag 22 juli 2009 @ 12:11:00 #217
241594 iBolt
Lighting
pi_71210025
quote:
Op woensdag 22 juli 2009 11:26 schreef doppendoosch het volgende:

[..]

En die kun je geen class geven omdat....?

-edit-
[..]

Nee allicht, als je die span display:block geeft heb je die heel effectief omgetoverd in een div
Ja sorry ik ben noob met css iig heb nu weggehaald en doet het half... enigste wat ontbreekt is dat de span niet zo hoog wordt als het plaatje... hij trekt dus alleen een box om het onderste deel van 't plaatje...
pi_71216821
Heeft iemand hier ervaring mee? http://code.google.com/p/ie7-js/

Werkt het een beetje? Ik heb geen IE6, dus ik kan het helaas niet testen...
Trotse poster van het 37000000ste bericht ^O^
pi_71217120
Geen idee of het een beetje werkt, maar ik heb nogal mijn twijfels of je een script van 90KB moet willen toevoegen aan je site, om een paar incompatibility-fixes te doen die je met een klein beetje speurwerk ook wel zelf op kunt lossen.
—o—
pi_71217266
quote:
Op woensdag 22 juli 2009 15:37 schreef doppendoosch het volgende:
Geen idee of het een beetje werkt, maar ik heb nogal mijn twijfels of je een script van 90KB moet willen toevoegen aan je site, om een paar incompatibility-fixes te doen die je met een klein beetje speurwerk ook wel zelf op kunt lossen.
Ik snap alleen niet hoe ik mijn sites in IE6 moet testen als ik Vista draai. Die Virtual Machines lijken niet te werken op Vista...
Trotse poster van het 37000000ste bericht ^O^
pi_71217423
http://www.my-debugbar.com/wiki/IETester/HomePage
http://browsershots.org/

Verder zou ik er ook met zo'n scriptje niet zonder meer vanuit gaan dat je die browsers niet meer hoeft te testen.
—o—
pi_71217907
quote:
Op woensdag 22 juli 2009 15:44 schreef doppendoosch het volgende:
http://www.my-debugbar.com/wiki/IETester/HomePage
http://browsershots.org/

Verder zou ik er ook met zo'n scriptje niet zonder meer vanuit gaan dat je die browsers niet meer hoeft te testen.
Die IETester ziet er wel goed uit.. Zijn de resultaten ervan betrouwbaar?
Het lijkt weinig uit te maken of ik het script waar ik het net over had ingeschakeld heb of niet. Wat wel op viel is dat de volgende syntax wél werkt door het script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14		table tr td {
  border-top: 1px solid #888;
  border-left: 1px solid #888;
  padding: 5px;
  width: 25%;
  text-align: left;
  vertical-align: bottom;
}
table tr:first-child td {
  border-top: 0;
}
table tr td:first-child {
  border-left: 0;
}


om een tabel te maken met alleen aan de binnenkant borders.

Selectors werken dus, waardoor je veel geavanceerdere CSS-technieken kan gaan gebruiken

edit: Voor IE5.5 maakt het wel een wereld van verschil, zie ik nu. Pagina ziet er veel meer uit zoals in Mozilla

[ Bericht 3% gewijzigd door daReaper op 22-07-2009 16:39:44 ]
Trotse poster van het 37000000ste bericht ^O^
pi_71218697
quote:
Op woensdag 22 juli 2009 15:41 schreef daReaper het volgende:

Ik snap alleen niet hoe ik mijn sites in IE6 moet testen als ik Vista draai. Die Virtual Machines lijken niet te werken op Vista...
http://finalbuilds.edskes.net/iecollection.htm
pi_71220857
quote:
Op woensdag 22 juli 2009 16:42 schreef Chanty87 het volgende:
http://mashable.com/2009/07/16/ie6-must-die/
http://www.techcrunch.com(...)internet-explorer-6/
http://www.techcrunch.com(...)ie6-support-goodbye/


Voor mijn eigen site wil ik best IE6 bannen, maar dit is voor een klant die een webshop in rusland wil draaien, en daar is internet nog niet overal zo ver ontwikkeld, dus zijn er nog een hoop IE6-gebruikers, die dan dus geen klant zullen zijn.
Trotse poster van het 37000000ste bericht ^O^
pi_71221537
Wat dacht je van een paar linkjes naar IE8 of Firefox? Doe ik ook We kunnen niet voor eeuwig IE6 ondersteunen omdat sommigen nog in 2001 leven en te lui zijn om te updaten. Ik heb net voor het eerst een "nieuwe generatie" theme gemaakt voor Wordpress en het is heerlijk om niet constant IE6 in je achterhoofd te hoeven houden en achteraf PNG hacks, ie6fixes.css e.d. te moeten implementeren
シ
pi_71221789
quote:
Op woensdag 22 juli 2009 17:33 schreef Chanty87 het volgende:
Wat dacht je van een paar linkjes naar IE8 of Firefox? Doe ik ook We kunnen niet voor eeuwig IE6 ondersteunen omdat sommigen nog in 2001 leven en te lui zijn om te updaten. Ik heb net voor het eerst een "nieuwe generatie" theme gemaakt voor Wordpress en het is heerlijk om niet constant IE6 in je achterhoofd te hoeven houden en achteraf PNG hacks, ie6fixes.css e.d. te moeten implementeren
De klant is koning, en als de koning lui is, dan moet ik me als winkelier daar maar op aanpassen
Trotse poster van het 37000000ste bericht ^O^
pi_71222239
Youtube, Digg en 37signals dachten er ook zo over Maar prima hoor, jouw keuze Ik verspil mijn tijd niet meer aan IE6 (tenzij de klant echt zeker weten IE6 support wil voor een extra bedrag). Zeker niet nu de grote sites er ook mee kappen. Hoe meer designers/developers de ondersteuning laten vallen des te sneller we van die kutbrowser af zijn.
シ
pi_71240695
quote:
Op woensdag 22 juli 2009 17:13 schreef daReaper het volgende:

Voor mijn eigen site wil ik best IE6 bannen, maar dit is voor een klant die een webshop in rusland wil draaien, en daar is internet nog niet overal zo ver ontwikkeld, dus zijn er nog een hoop IE6-gebruikers, die dan dus geen klant zullen zijn.
Er zit een verschil tussen een site niet laten werken in IE6 en er iets anders uit laten zien in IE6. Nu is jouw geval wellicht anders, maar standaard zorg ik ervoor dat een site werkt in IE6. Ik vertel mijn klant vantevoren dat de site er misschien in details anders uit ziet (door het gebrek aan :last-child krijgt de laatste rij in een tabel tóch een randje eronder, etc). Wil je het pixel perfect in IE6: prima. Maar dan gaan we daar wel eerst een begroting voor maken
pi_71240779
quote:
Op woensdag 22 juli 2009 17:33 schreef Chanty87 het volgende:
Wat dacht je van een paar linkjes naar IE8 of Firefox? Doe ik ook We kunnen niet voor eeuwig IE6 ondersteunen omdat sommigen nog in 2001 leven en te lui zijn om te updaten.
Da's niet echt waar, recent onderzoek toont aan dat van de IE6 gebruikers slechts ongeveer 14% thuisgebruikers zijn. De overige 86% zijn mensen die het op hun werk moeten gebruiken, en die kunnen niet upgraden. Dat die bedrijven niet upgraden, daar hebben ze een goede reden voor: ze hebben 8 jaar geleden web apps laten bouwen door prutsers, die alleen in IE6 werken. Als ze moeten kiezen tussen YouTube goed tonen, of hun app die een ton gekost heeft laten werken, dan is de keuze snel gemaakt. Zolang de pruts apps niet uitgefaseerd zijn blijft een groot deel van werkend Nederland IE6 gebruiken.
pi_71242335
quote:
Op donderdag 23 juli 2009 09:19 schreef Roy_T het volgende:

[..]

Er zit een verschil tussen een site niet laten werken in IE6 en er iets anders uit laten zien in IE6. Nu is jouw geval wellicht anders, maar standaard zorg ik ervoor dat een site werkt in IE6. Ik vertel mijn klant vantevoren dat de site er misschien in details anders uit ziet (door het gebrek aan :last-child krijgt de laatste rij in een tabel tóch een randje eronder, etc). Wil je het pixel perfect in IE6: prima. Maar dan gaan we daar wel eerst een begroting voor maken
Ahja, zoals het er nu uit ziet in IE6 ben ik op zich tevreden, hoewel het inderdaad niet perfect is. en :last-child werkt door dat script dus wèl
Trotse poster van het 37000000ste bericht ^O^
pi_71246137
quote:
Op donderdag 23 juli 2009 10:27 schreef daReaper het volgende:

Ahja, zoals het er nu uit ziet in IE6 ben ik op zich tevreden, hoewel het inderdaad niet perfect is. en :last-child werkt door dat script dus wèl
Nee, :last-child werkt niet, maar dat zie je niet omdat dat script het gedrag van :last-child nadoet Maar dan ben je nu opeens afhankelijk van JavaScript, of dat nou echt een beter alternatief is, daar kun je over discussiëren
pi_71246833
quote:
Op donderdag 23 juli 2009 09:19 schreef Roy_T het volgende:

(door het gebrek aan :last-child krijgt de laatste rij in een tabel tóch een randje eronder, etc). Wil je het pixel perfect in IE6: prima. Maar dan gaan we daar wel eerst een begroting voor maken
:last-child werkt ook niet in IE7, voor zover ik weet. En meeestal kun je het met :first-child ook wel oplossen (maar ook die werkt niet in IE6).
fokstok.nl
pi_71247094
quote:
Op donderdag 23 juli 2009 09:23 schreef Roy_T het volgende:

[..]

Da's niet echt waar, recent onderzoek toont aan dat van de IE6 gebruikers slechts ongeveer 14% thuisgebruikers zijn. De overige 86% zijn mensen die het op hun werk moeten gebruiken, en die kunnen niet upgraden. Dat die bedrijven niet upgraden, daar hebben ze een goede reden voor: ze hebben 8 jaar geleden web apps laten bouwen door prutsers, die alleen in IE6 werken. Als ze moeten kiezen tussen YouTube goed tonen, of hun app die een ton gekost heeft laten werken, dan is de keuze snel gemaakt. Zolang de pruts apps niet uitgefaseerd zijn blijft een groot deel van werkend Nederland IE6 gebruiken.
Ik heb het ook niet alleen over thuisgebruikers Door die bedrijven blijft het web constant steken. Het is de hoogste tijd om na 8 jaar IE6 met de volgende generatie te gaan werken ipv vernieuwing in de weg te blijven zitten omdat ze hun prutsapps niet willen updaten. Zolang iedere designer/developer IE6 blijft ondersteunen zal er nooit geupgradet worden omdat die noodzaak er niet is en dus sluit ik me maar al te graag aan bij YT, Digg en 37signals
シ
pi_71255332
quote:
Op donderdag 23 juli 2009 12:40 schreef Light het volgende:

:last-child werkt ook niet in IE7, voor zover ik weet
Jawel hoor :nth-child niet.
pi_71255538
quote:
Op donderdag 23 juli 2009 12:47 schreef Chanty87 het volgende:

Ik heb het ook niet alleen over thuisgebruikers Door die bedrijven blijft het web constant steken. Het is de hoogste tijd om na 8 jaar IE6 met de volgende generatie te gaan werken ipv vernieuwing in de weg te blijven zitten omdat ze hun prutsapps niet willen updaten. Zolang iedere designer/developer IE6 blijft ondersteunen zal er nooit geupgradet worden omdat die noodzaak er niet is en dus sluit ik me maar al te graag aan bij YT, Digg en 37signals
Van de bedrijven die je noemt is 37signals de enige die winst boekt uit verkopen van een dienst, en die hebben echt andere klanten dan de bedrijven die een paar ton aan een web app uitgeven. Dat is iets anders dan max 99$ voor Basecamp.

Ik ben het helemaal met je eens dat IE6 er zo snel mogelijk uit moet, en dat iedereen (ook bedrijven) zou moeten upgraden. Maar dat neemt niet weg dat ik heel goed begrijp waarom een TNT of een Rabobank dat niet doen. Een groot deel van hun processen valt stil als ze upgraden naar een browser waar hun apps niet mee werken. Het is, zeker nu, een stuk voordeliger om dan maar IE6 te houden ipv veel geld uit te geven aan nieuwe apps.
pi_71256172
quote:
Op donderdag 23 juli 2009 16:52 schreef Roy_T het volgende:

[..]

Jawel hoor :) :nth-child niet.
:last-child ook niet. Is trouwens een css3 ding, net als :nth-child.

Ik heb het getest met onderstaande html/css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>
<style type="text/css">
#test {
   color: red;
}
#test :last-child {
   color: green;
}
</style>
</head>
<body>
<div id="test">
   <p>Child 1</p>
   <p>Child 2</p>
   <p>Child 3</p>
</div>
</body>
</html>
fokstok.nl
pi_71266026
quote:
Op donderdag 23 juli 2009 17:14 schreef Light het volgende:

:last-child ook niet. Is trouwens een css3 ding, net als :nth-child.
Je hebt gelijk. Ik was in de war met :first-child (wat weer CSS 2.1 is en wél werkt in IE7).
  zondag 26 juli 2009 @ 22:22:43 #239
85919 Likkende_Lassie
Doe eens wat aan je ondertitel
pi_71350942
Ik kom niet uit het volgende:

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		<div class="topsteden">
   <div class="cities">
      <div class="city" id="1">
         <div class="image"><img src="/images/amsterdam.jpg" alt="Amsterdam" width="80" /></div>
         <div class="title"><a href="#">Amsterdam</a></div>
         <div class="rating"><img src="/images/star.png" alt="nvt" /></div>
         <div class="text">Amsterdam is de hoofdstad van Nederland en mag aanspraak maken op de titel "Wereldstad". Vele verschillende kanten van Nederland zie je hier in een stad. Oude gebouwen, moderne architectuur, natuur, musea en nog veel meer. <a href="#" style="font-size: 10px;" class="border"><i>(lees verder...)</i></a></div>
      </div>
      <div class="city" id="2">
         <div class="image"><img src="/images/den_haag.jpg" alt="Den Haag" width="80" /></div>
         <div class="title"><a href="#">Den Haag</a></div>
         <div class="rating"><img src="/images/star.png" alt="nvt" /></div>
         <div class="text">bsdfgh fdfg dsfgvbsdasdf lablabla</div>
      </div>
</div>


CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		/* topsteden */
.topsteden {}
.topsteden .menu { text-align: center;}
.topsteden .cities {position: relative; top: 15px;}
.topsteden .cities .city {position: relative; top: 10px; padding: 10px; height: 95px;}
.topsteden .cities .city .image {
   position: relative;
   float: left;
   width: 85px;
   height: 85px;
   border:1px solid gray;
   padding-left: 5px;
   padding-top: 5px;
   left: 5px;
}
.topsteden .cities .city .title {position: relative; left: 13px; float:left; font-weight: bold;}
.topsteden .cities .city .rating {position: relative; left: 130px;}
.topsteden .cities .city .text {position: absolute; left: 110px; top: 20px;font-size: 10px;}


Is mijn opbouw (css) goed zo? want ik heb het idee als ik in .topsteden .cities { } padding: 5px; doe, dat die voor alle andere ook geldt?
pi_71351252
Voor welke anderen?

Je HTML is verder redelijk ruk overigens Divitis is net zo erg als tabellen Waarom .text ipv <p>, waarom .title ipv <hn>?
pi_71351448
tvp
  zondag 26 juli 2009 @ 22:43:19 #242
85919 Likkende_Lassie
Doe eens wat aan je ondertitel
pi_71351633
quote:
Op zondag 26 juli 2009 22:33 schreef Roy_T het volgende:
Voor welke anderen?

Je HTML is verder redelijk ruk overigens Divitis is net zo erg als tabellen Waarom .text ipv <p>, waarom .title ipv <hn>?
Voor topsteden .cities .city en topsteden .cities .city .images etc. bijvoorbeeld
Je hebt idd gelijkt betreffende die .text en .title :0
pi_71352767
quote:
Op zondag 26 juli 2009 22:43 schreef Likkende_Lassie het volgende:

[..]

Voor topsteden .cities .city en topsteden .cities .city .images etc. bijvoorbeeld
Je hebt idd gelijkt betreffende die .text en .title :0
Je bedoelt dat .cities een lijst met steden is en .city een losse stad? Waarom dan niet <ul> en <li> gebruiken? Die zijn speciaal voor lijsten gemaakt
fokstok.nl
pi_71357965
Als je in ".topsteden .cities {position: relative; top: 15px;}" padding toevoegt, dan heeft dat alleen effect op de div met class="cities".
  maandag 27 juli 2009 @ 10:41:48 #245
85919 Likkende_Lassie
Doe eens wat aan je ondertitel
pi_71358713
quote:
Op maandag 27 juli 2009 10:03 schreef Roy_T het volgende:
Als je in ".topsteden .cities {position: relative; top: 15px;}" padding toevoegt, dan heeft dat alleen effect op de div met class="cities".
En niet op de gehele div .topsteden?
pi_71359193
quote:
Op maandag 27 juli 2009 10:41 schreef Likkende_Lassie het volgende:

[..]

En niet op de gehele div .topsteden?
Nee. Alleen op de div .cities in de div .topsteden.
fokstok.nl
pi_71359338
quote:
Op maandag 27 juli 2009 10:41 schreef Likkende_Lassie het volgende:

En niet op de gehele div .topsteden?
Nee. Je bent niet in de war met margin ofzo? Niet dat het daarvoor wel geldt, maar dan is het op het eerste gezicht moeilijker om te zien of de ruimte door padding op de ouder of margin op het kind komt.
  dinsdag 28 juli 2009 @ 16:05:35 #248
241594 iBolt
Lighting
pi_71399196
Ander dingetje... Ik heb zeg maar zo'n collapse/expand gevalletje wat er ongeveer zo uitziet...

1
2
3
4		<a href="#" onclick"toggle('id1')">Collapse 1</a><div id="id1" style="display:none;">Blaat 1</div>
<a href="#" onclick"toggle('id2')">Collapse 2</a><div id="id2" style="display:none;">Blaat 2</div>
<a href="#" onclick"toggle('id3')">Collapse 3</a><div id="id3" style="display:none;">Blaat 3</div>
<a href="#" onclick"toggle('id4')">Collapse 3</a><div id="id4" style="display:none;">Blaat 4</div>

Nu werkt het allemaal fijn alleen zit er zeg maar nu zo'n lelijke ruimte ruimte, witregel, tussen me links... en die wil ik weghebben... padding en margin veranderen helpt niet (als div weg is is witregel ook weg ofcourse)
pi_71399822
quote:
Op dinsdag 28 juli 2009 16:05 schreef iBolt het volgende:
Ander dingetje... Ik heb zeg maar zo'n collapse/expand gevalletje wat er ongeveer zo uitziet...
[ code verwijderd ]

Nu werkt het allemaal fijn alleen zit er zeg maar nu zo'n lelijke ruimte ruimte, witregel, tussen me links... en die wil ik weghebben... padding en margin veranderen helpt niet (als div weg is is witregel ook weg ofcourse)
Lineheight aanpassen?
pi_71400882
quote:
Op dinsdag 28 juli 2009 16:05 schreef iBolt het volgende:
Ander dingetje... Ik heb zeg maar zo'n collapse/expand gevalletje wat er ongeveer zo uitziet...
[ code verwijderd ]

Nu werkt het allemaal fijn alleen zit er zeg maar nu zo'n lelijke ruimte ruimte, witregel, tussen me links... en die wil ik weghebben... padding en margin veranderen helpt niet (als div weg is is witregel ook weg ofcourse)
Wat wil je bereiken? Op het moment dat er geen div aan staat, is er ook geen witruimte en staan ze gewoon achter elkaar. Als er een div aan staat, dan staat er ook inhoud in neem ik aan?
pi_71536908
Hallo Fokkertjes,

Ik ben hier bezig met een simpele website voor een radioprogramma, en zoals altijd gooit IE roet in het eten. De bedoeling is om een plaatje te floaten naar left en een menubalk daarnaast te laten zien. Daaronder dan weer een blokje met playlist en de gewone tekst.

Firefox laat het vrolijk zien, IE8 ook, IE7 waagt zich er niet aan. Het menu wordt naar beneden gedrukt, waardoor de hele layout naar de kloten gaat.Het is vast een heel dom foutje ergens die heel simpel is op te lossen, maar ik kan er niet opkomen.

De pagina staat op http://www.marktreffer.nl. Het ballonnenmannetje moet dus floaten, de rest ernaast.

Help
I'm sorry, you must be confusing me with someone who gives a shit.
pi_71537096
Ik zou bij het menu ook float: left; zetten.
fokstok.nl
pi_71537466
Dan verneukt Firefox hem ook, komt de tekst naast de ballon te staan en het menu onder de ballon.

Heb het nu opgelost door alle content behalve die ballon in een float:left te zetten en dan wat correctie met margins, dan werkt 'ie wel weer.
I'm sorry, you must be confusing me with someone who gives a shit.
pi_71563381
Ik heb ook weer eens een probleempje. Ik wil iets te maken met rounded corners. Dat is op zich goed mogelijk, er zijn 1001 manieren om dat te doen. Probleem is alleen dat het vlak met de rounded corners half over een foto en/of flashanimatie komt, en ik dus geen vaste achtergrondkleur aan de buitenkant kan gebruiken.

Het moet ook werken in IE7, dus het zal iets moeten worden met plaatjes. Iemand een idee hoe ik dat het beste kan aanpakken, zonder dat er 10.000 div's nodig zijn?
fokstok.nl
pi_71565062
Dat kan simpelweg niet, tenzij je hele rare dingen gaat doen met tig div's inderdaad. Screw IE, of pas het ontwerp aan. Sommige zaken kunnen nu eenmaal niet op een zinnige manier.
pi_71565407
Ik was er al bang voor. Dat wordt dus veel div's gebruiken. Ontwerp aanpassen is geen optie en IE laten vallen ook niet. Daar vindt de klant niet goed. Helaas.
fokstok.nl
pi_71568015
quote:
Op maandag 3 augustus 2009 15:13 schreef Light het volgende:
Ik was er al bang voor. Dat wordt dus veel div's gebruiken. Ontwerp aanpassen is geen optie en IE laten vallen ook niet. Daar vindt de klant niet goed. Helaas.
Je kunt ook als internetprofessional zeggen dat er geen (fatsoenlijke) oplossing is
pi_71568301
quote:
Op maandag 3 augustus 2009 16:50 schreef Roy_T het volgende:

[..]

Je kunt ook als internetprofessional zeggen dat er geen (fatsoenlijke) oplossing is
Als er geen oplossing is, dan zeggen we dat ook wel
fokstok.nl
pi_71568474
quote:
Op maandag 3 augustus 2009 17:01 schreef Light het volgende:

Als er geen oplossing is, dan zeggen we dat ook wel
Dit is een mooie kandidaat ervoor Het is alleen te doen door te prutsen
pi_71622756
Kun je het niet gewoon doen met PNG's met transparante achtergrond?
I'm sorry, you must be confusing me with someone who gives a shit.
pi_71623073
quote:
Op woensdag 5 augustus 2009 14:07 schreef Tunafish het volgende:
Kun je het niet gewoon doen met PNG's met transparante achtergrond?
Ja, met de buitenrand transparant. Dat kan inderdaad, en zo heb ik het ook opgelost. Nadeel is dat ik dan 8 div's nodig heb waar ik normaal met 1 had toegekund.
fokstok.nl
pi_71623121
quote:
Op maandag 3 augustus 2009 17:09 schreef Roy_T het volgende:

[..]

Dit is een mooie kandidaat ervoor Het is alleen te doen door te prutsen
Nee. Het is te doen, dus gaan we de klant niet lastig vallen met het feit dat het wat ingewikkelder is dan normaal.
fokstok.nl
pi_71640620
quote:
Op woensdag 5 augustus 2009 14:20 schreef Light het volgende:

Nee. Het is te doen, dus gaan we de klant niet lastig vallen met het feit dat het wat ingewikkelder is dan normaal.
Ik zou iig een klant geen oplossing verkopen die 8 extra div's omvat. Wij doen het gewoon niet. maar ieder zijn werkwijze
  donderdag 20 augustus 2009 @ 19:55:26 #264
258901 Stockton
Billy Barracuda
pi_72051109
Vraag: Ik ben met de header bezig in een container:
quote:
#container {
width: 941px;
background: #FFF url(images/repeat.png) repeat-y;
text-align: left;
margin: 0 auto;
}

#headerleft{
width: 452px;
background-image: url(images/header.png);
height: 273px;
float: left;
}

#headerright{
float: right;
height: 273px;
width: 489px;
}
Headerright en HEaderleft zijn samen de gehele header, maar dit is apart langs elkaar omdat Headerleft één grote afbeelding bevat, en headerright aparte afbeeldingen die samen het menu vormen.
Nu is het eigenlijk simpel gezegt dat header right breder moet worden, breder dan de container. Een paar afbeeldingen steken er namelijk uit (mooi effect), en daarom moet breder.

Moet ik nu de container later laten beginnen, of kan ik het door enig of andere manier dat een afbeelding over de toegestaande breedte kan?

Ben zelf niet zo met CSS, daarom deze vraag. Via google krijg je wel honderden sites, maar niet echt een goede.

Alvast bedankt!
GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS
pi_72054816
quote:
Op donderdag 20 augustus 2009 19:55 schreef Stockton het volgende:
Vraag: Ik ben met de header bezig in een container:
[..]

Headerright en HEaderleft zijn samen de gehele header, maar dit is apart langs elkaar omdat Headerleft één grote afbeelding bevat, en headerright aparte afbeeldingen die samen het menu vormen.
Nu is het eigenlijk simpel gezegt dat header right breder moet worden, breder dan de container. Een paar afbeeldingen steken er namelijk uit (mooi effect), en daarom moet breder.

Moet ik nu de container later laten beginnen, of kan ik het door enig of andere manier dat een afbeelding over de toegestaande breedte kan?

Ben zelf niet zo met CSS, daarom deze vraag. Via google krijg je wel honderden sites, maar niet echt een goede.

Alvast bedankt!
Is het geen oplossing de container breder te maken? Anders kun je ook nog #headerleft een negatieve margin-left geven, en #headerright een negatieve margin-right.
fokstok.nl
pi_72066000
De container breder maken inderdaad, en de header ook.

Eventuele content daaronder zou je in een tweede smallere container kunnen zetten.
pi_72122375
Ik heb in de loop der jaren een aantal standaard dingen geleerd, een div in het midden uitlijnen kan dmv margin: 0 auto, maar hoe krijg ik een footer ook alweer minimaal tot de onderkant van de pagina?
  maandag 24 augustus 2009 @ 21:05:55 #268
87680 Mirel
Mirel wil een bongophone.
pi_72122476
asdsawqeasdfe

[ Bericht 63% gewijzigd door Mirel op 24-08-2009 21:22:17 ]
When all else fails, you always have delusion.
  maandag 24 augustus 2009 @ 21:34:51 #269
267127 de_DDoSwachter
F5 F5 F5 F5 F5 F5 F5 F5 F5 F5
pi_72123417
quote:
Op maandag 24 augustus 2009 @ 21:02 schreef Flaccid het volgende:
Ik heb in de loop der jaren een aantal standaard dingen geleerd, een div in het midden uitlijnen kan dmv margin: 0 auto, maar hoe krijg ik een footer ook alweer minimaal tot de onderkant van de pagina?
Da's voor meerder uitleg vatbaar...

Wil je een fixed footer onderaan? zoja: position:fixex, en wat hacks voor IE.
Wil je een layout met 100% hoogte? min-height:100%, evt. wat combi's met faux columns, en de nodige IE-hacks.

http://www.google.nl/search?q=css+100%25+height
http://www.google.nl/search?q=css+fixed+footer
pi_72133354
Heb nu 4 floats, maar die blijven niet binnen 1 div. Hoe kan ik dat toch goed hebben?
pi_72134751
quote:
Op dinsdag 25 augustus 2009 10:23 schreef Flaccid het volgende:
Heb nu 4 floats, maar die blijven niet binnen 1 div. Hoe kan ik dat toch goed hebben?
Wat wil je, dat de parent mee schaalt met de div's die erin gefloat worden, of bedoel je iets anders?
  dinsdag 25 augustus 2009 @ 11:42:21 #272
267127 de_DDoSwachter
F5 F5 F5 F5 F5 F5 F5 F5 F5 F5
pi_72135262
quote:
Op dinsdag 25 augustus 2009 10:23 schreef Flaccid het volgende:
Heb nu 4 floats, maar die blijven niet binnen 1 div. Hoe kan ik dat toch goed hebben?
90% kans dat je er een element met clear:both onder moet gooien. Zo niet dan zul je toch wat meer moeite moeten doen om je probleem uit te leggen.
pi_72137426
quote:
Op dinsdag 25 augustus 2009 11:42 schreef de_DDoSwachter het volgende:

90% kans dat je er een element met clear:both onder moet gooien
Of gewoon de parent div overflow:auto geven, en geen overbodige elementen toevoegen
pi_72137484
Clear:both heeft gewerkt thanks
  woensdag 26 augustus 2009 @ 20:31:49 #275
258901 Stockton
Billy Barracuda
pi_72181864
quote:
Op donderdag 20 augustus 2009 21:28 schreef Light het volgende:

[..]

Is het geen oplossing de container breder te maken? Anders kun je ook nog #headerleft een negatieve margin-left geven, en #headerright een negatieve margin-right.
De container breder maken was niet echt een optie, omdat me gehele layout dan weer moest veranderen.
Ik heb het uitstekende gedeelte van de afbeelding afgeknipt, en die in een Div gezet en de div de plek van links boven gegeven. De afbeelding lijkt nu één, maar is eigenlijk uit twee delen.

Toch iedereen bedankt voor de hulp
GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS
pi_72246880
quote:
Op donderdag 27 augustus 2009 22:33 schreef raaavi het volgende:
[ afbeelding ]

hier staat dus hoe ik een background img toevoeg.
maar wat nou als ik hem

1. niet herhalend
2. links midden uitgelijnd wil hebben

Hoe moet dat ?
  vrijdag 28 augustus 2009 @ 23:16:22 #277
82814 BBQ-kip
never say no to panda!
pi_72247116
quote:
Op vrijdag 28 augustus 2009 23:09 schreef raaavi het volgende:

[..]


Je "moet" nog even wat foto's neerplempen in je studentenkamer-topic
Kip, het meest veelzijjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdige stukje kaas, panda!
pi_72247156
quote:
Op vrijdag 28 augustus 2009 23:16 schreef BBQ-kip het volgende:

[..]

Je "moet" nog even wat foto's neerplempen in je studentenkamer-topic
was net me camera aan het aansluiten
  vrijdag 28 augustus 2009 @ 23:18:23 #279
82814 BBQ-kip
never say no to panda!
pi_72247189
quote:
Op vrijdag 28 augustus 2009 23:17 schreef raaavi het volgende:

[..]

was net me camera aan het aansluiten
Ah top
Kip, het meest veelzijjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdige stukje kaas, panda!
pi_72247377
quote:
Op vrijdag 28 augustus 2009 23:09 schreef raaavi het volgende:

[..]
Het is niet zo moeilijk als het misschien lijkt.

Er staat nu:
1background: url(/wp/wp-content/themes/atahualpa342/images/backgr.gif) repeat top left;


Als je dat verandert in
1background: url(/wp/wp-content/themes/atahualpa342/images/backgr.gif) no-repeat center left;

dan ben je er al. Moet je nog wel zorgen dat je het goede plaatje selecteert natuurlijk.
fokstok.nl
pi_72248178
quote:
Op vrijdag 28 augustus 2009 23:24 schreef Light het volgende:

[..]

Het is niet zo moeilijk als het misschien lijkt.

Er staat nu:
[ code verwijderd ]

Als je dat verandert in
[ code verwijderd ]

dan ben je er al. Moet je nog wel zorgen dat je het goede plaatje selecteert natuurlijk.
Ah geweldig, ik denk dat ik me toch maar moet gaan verdiepen in CSS. altijd handig bij die CMS's als je wilt editen

  FOK!-Schrikkelbaas maandag 31 augustus 2009 @ 21:48:36 #282
1972 Swetsenegger
Egocentrische Narcist
pi_72323199
1
2
3
4
5
6
7
8
9
10
11		<span style="display:block;text-align:right;height:30px;line-height:30px;">
Naam
<form style="padding:0;margin:0;" action="inloggen" method="post"> 
<input type="hidden" name="location" value=/klantGegevens.php />
<input type="submit" name="uitloggen" value="Uitloggen" />
</form>
<a href="cart" style="text-decoration:none;color:black">0 artikelen: <img src="image/cart.png" alt="winkelwagen" height="30px" width="20px" style="border:0;padding:0;vertical-align:middle" /></a>
    
<input type="text" size="20" style="background:url(image/searchbg.png) repeat-x;padding:0;border:1px solid #888" value="zoeken" />
<img src="image/search.png" alt="zoeken" height="30px" width="30px" style="padding:0;vertical-align:middle" />
</span>

Na de </form> krijg ik een newline waardoor de rest een regel eronder gepositioneerd wordt terwijl ik het naast elkaar wil. Iemand een simpele tip?
 | FOK! Schrikkelbaasch
pi_72323583
</form> ergens anders neerzetten?
—o—
  FOK!-Schrikkelbaas maandag 31 augustus 2009 @ 21:59:44 #284
1972 Swetsenegger
Egocentrische Narcist
pi_72323753


display:inline; in de form style does the trick.
 | FOK! Schrikkelbaasch
pi_72484804
Ben ik weer


Ik ben even een simpel html sitetje in elkaar aan het zetten voor mn school.
Vind het intranet van de HU maar moeilijk,, dus wil ik voor mn klas een beveiligde site in elkaar zetten.

http://i26.tinypic.com/adj51v.jpg

Hoe kan ik ervoor zorgen dat het middelste stuk zich automatisch uitrekt tot 100%, zelfs als er geen tekst in staat?

Dus dan heb je standaard, ongeacht de inhoud een witte balk in het midden:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16		<div id="container">
  <div id="header">
    <h1>Communicatie Management - D12 <a name="Atop"></a></h1>
  <!-- end #header --></div>
  <div id="mainContent">
    <h1> <a href="#sites">Sites</a> - <a href="#bestanden">Bestanden</a> </h1>
    <br />
<em>(Nieuwste bovenaan)</em>
    
   <!-- end #mainContent --></div>
  <div id="footer">
    <p><a href="#top">Top</a></p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>


1
2
3
4
5
6		<?php
.oneColElsCtrHdr #mainContent {
    padding: 0 20px; 
    background: #FFFFFF;
}
?>


[ Bericht 21% gewijzigd door raaavi op 06-09-2009 14:03:37 ]
pi_72485334
quote:
Op zondag 6 september 2009 13:53 schreef raaavi het volgende:

Hoe kan ik ervoor zorgen dat het middelste stuk zich automatisch uitrekt tot 100%, zelfs als er geen tekst in staat?
min-height: 100%; ook al wil je eigenlijk helemaal niet dat die balk 100% hoog is
pi_72485701
quote:
Op zondag 6 september 2009 14:11 schreef Roy_T het volgende:

[..]

min-height: 100%; ook al wil je eigenlijk helemaal niet dat die balk 100% hoog is
werkt niet


**ik los het wel anders op

Nevermind
pi_72519602
Weet iemand een oplossing voor het probleem dat hier beschreven staat? http://www.codingforums.com/showthread.php?t=151562

Ik zit namelijk met precies hetzelfde probleem. In IE staan ze netjes naast elkaar, maar in FF3, Opera en Chrome staat de submit-button ongeveer 3 pixels hoger dan het text-veld.
Trotse poster van het 37000000ste bericht ^O^
pi_72615260
Weet iemand hoe ik een container tot onder kan laten doorlopen? Wat voor height moet ik deze meegeven? En wat moet ik met de heights doen van de divs die er in staan?

Dank alvast .
pi_72615411
Als je eerst eens uitlegt wat je wil? "container tot onder laten doorlopen" is nou niet echt een industrieterm ofzo
pi_72636781
Opbouw:

menu
div1 div3
div2 div3
footer

Alles staat in een container. De footer staat al vast onderaan. Als div2 óf heel div3 (contentdiv) veel tekst heeft moet de container automatisch meegaan. Deze moet dus géén vaste height krijgen. Hoe kan ik dit realiseren? Heb de html, body op 100% staan en de container ook 100% gegeven.. Maar als er dan meer tekst in staat dan in het beeld past loopt de container niet mee door. Footer overigens ook niet.

edit: hier de code, wel net zo makkelijk:
CSS

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		html, body {
background: url(images/achtergrond.jpg) center repeat-x;
background-color: #4a4a4a;
margin: 0px;
padding: 0px;
font: 12px Arial, Helvetica, sans-serif;
height: 100%;
}

.menubalk {
background: #2e3235;
width: 100%;
height: 50px;
float: left;
color: #fff;
font: 13px Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
}

.container {
background: url(images/achtergrond_content.png) repeat-y;
margin: 0 auto;
width: 976px;
height: 100%;
}

.links {
width: 303px;
float: left;
}

.plaatje {
background: url(images/foto.jpg);
width: 303px;
height: 239px;
float: left;
margin-left: 17px;
}

.logo {
background: url(images/logo.jpg);
width: 303px;
height: 143px;
float: left;
margin-left: 17px;
}

.tekst {
width: 303px;
float: left;
margin-left: 17px;
}

.content {
width: 673px;
}

.footer {
background: #2e3235;
float: left;
width: 945px;
height: 44px;
margin-left: 16px;
position: absolute;
bottom: 0;
}


HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		<div class="menubalk">
   <div class="menu">
   <ul>
    <li><a href="#">Een</a></li>
    <li><a href="#">Twee</a></li>
    </ul>
    </div>
</div>
<div class="container">
    <div class="links">
       <div class="plaatje"></div>
        <div class="logo"></div>
        <div class="tekst">asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />
    <div class="content">
    </div>
</div>
<div class="footer"></div>


[ Bericht 42% gewijzigd door Nashje op 11-09-2009 11:21:31 ]
  maandag 14 september 2009 @ 02:48:52 #292
134533 donroyco
dus niet Donroyco
pi_72720953
-edit-

[ Bericht 96% gewijzigd door donroyco op 14-09-2009 03:38:23 ]
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_72800900
quote:
Op vrijdag 11 september 2009 10:36 schreef Nashje het volgende:
Opbouw:

menu
div1 div3
div2 div3
footer

Alles staat in een container. De footer staat al vast onderaan. Als div2 óf heel div3 (contentdiv) veel tekst heeft moet de container automatisch meegaan. Deze moet dus géén vaste height krijgen. Hoe kan ik dit realiseren? Heb de html, body op 100% staan en de container ook 100% gegeven.. Maar als er dan meer tekst in staat dan in het beeld past loopt de container niet mee door. Footer overigens ook niet.

edit: hier de code, wel net zo makkelijk:
CSS
[ code verwijderd ]

HTML
[ code verwijderd ]
Zou niet wetn hoe 't moet :P maar misschien heb je hier wat aan... staat wat css code voor verschillende type layouts. http://matthewjamestaylor(...)olumn-liquid-layouts

Een vraagje van mij kant...

1
2
3
4
5
6
7
8
9
10
11
12
13
14		tr:hover.tblhover {
   background-color: #ccc
}

<table>
   <tr class="tblhover">
      <td>cell 1</td>
      <td>cell 2</td>
   </tr>
   <tr class="tblhover">
      <td>cell 3</td>
      <td>cell 4</td>
   </tr>
</table>


Ik vroeg me af kan ik me css zo veranderen dat ik in feite i.p.v. 't bovenstaande ook dit zou kunnen doen

1
2
3
4
5
6
7
8
9
10		<table class="tblhover">
   <tr>
      <td>cell 1</td>
      <td>cell 2</td>
   </tr>
   <tr>
      <td>cell 3</td>
      <td>cell 4</td>
   </tr>
</table>
pi_72803451
Zelfs áls je CSS werkt, dan is dit netter:

1
2
3		tr.tblhover:hover {
   background-color: #ccc
}


En als je het wilt zoals je aangeeft:

1
2
3		table.tblhover tr:hover {
   background-color: #ccc
}
pi_73019769
Ik heb een pagina met 2 kolommen:

kolom HOOFD en kolom RECHTS

in kolom hoofd zitten óók twee kolommen, maar alléén op de voorpagina van de site. op alle andere pagina's is er maar 1 kolom. Kolom CONTENT en kolom FRONTPAGE

De hele pagina is 960px breed. Kolom RECHTS is 200px breed met 20px margin. Kolom FRONTPAGE is 430px breed.

Hoe zorg ik er nou voor dat kolom CONTENT de restruimte opvult. Oftewel, als er wel een frontpage is, is de breedte (automatisch) 310px en als er geen frontpage is, is de breedte 740px breed?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		<div id="RECHTS"></div>
<div id="HOOFD">
  <div id="FRONTPAGE"></div>
  <div id="CONTENT"></div>
</div>

[code]
#HOOFD {
  width: 740px;
}
#RECHTS {
  float: right;
  width: 200px;
  margin-left: 20px;
}
#CONTENT {
  ???
}
#FRONTPAGE {
  float: right;
  width: 430px;
}
Trotse poster van het 37000000ste bericht ^O^
pi_73020666
quote:
Op dinsdag 22 september 2009 @ 21:25 schreef daReaper het volgende:


Hoe zorg ik er nou voor dat kolom CONTENT de restruimte opvult. Oftewel, als er wel een frontpage is, is de breedte (automatisch) 310px en als er geen frontpage is, is de breedte 740px breed?
[ code verwijderd ]
Waarom zou je in hemelsnaam die div #frontpage gebruiken op pagina's waar je hem niet nodig hebt
—o—
pi_73021042
quote:
Op dinsdag 22 september 2009 21:25 schreef daReaper het volgende:
Ik heb een pagina met 2 kolommen:

kolom HOOFD en kolom RECHTS

in kolom hoofd zitten óók twee kolommen, maar alléén op de voorpagina van de site. op alle andere pagina's is er maar 1 kolom. Kolom CONTENT en kolom FRONTPAGE

De hele pagina is 960px breed. Kolom RECHTS is 200px breed met 20px margin. Kolom FRONTPAGE is 430px breed.

Hoe zorg ik er nou voor dat kolom CONTENT de restruimte opvult. Oftewel, als er wel een frontpage is, is de breedte (automatisch) 310px en als er geen frontpage is, is de breedte 740px breed?
[ code verwijderd ]
Gewoon in je stylesheet zetten dat die div #content 740px breed moet zijn. En bij de frontpage een extra stylesheet laden (na de gewone stylesheet) met daarin de breedte van #frontpage (430px) en #content (310px).
fokstok.nl
pi_73021246
quote:
Op dinsdag 22 september 2009 21:46 schreef doppendoosch het volgende:

[..]

Waarom zou je in hemelsnaam die div #frontpage gebruiken op pagina's waar je hem niet nodig hebt
nja die div wordt ook niet geladen bij andere pags dan de frontpage, was ik er even vergeten bij te zetten
Trotse poster van het 37000000ste bericht ^O^
pi_73021962
quote:
Op dinsdag 22 september 2009 21:54 schreef Light het volgende:

[..]

Gewoon in je stylesheet zetten dat die div #content 740px breed moet zijn. En bij de frontpage een extra stylesheet laden (na de gewone stylesheet) met daarin de breedte van #frontpage (430px) en #content (310px).
Heb het maar zo opgelost. Hoopte eigenlijk dat er een echte css oplossing zou zijn, maar zo werkt het ook
Trotse poster van het 37000000ste bericht ^O^
pi_73024935
quote:
Op dinsdag 22 september 2009 21:54 schreef Light het volgende:

En bij de frontpage een extra stylesheet laden (na de gewone stylesheet) met daarin de breedte van #frontpage (430px) en #content (310px).
Beetje overkill om daar een extra HTTP-request voor te doen. Dat kan prima in 1 stylesheet.
pi_73025355
quote:
Op dinsdag 22 september 2009 23:29 schreef Roy_T het volgende:

[..]

Beetje overkill om daar een extra HTTP-request voor te doen. Dat kan prima in 1 stylesheet.
Je kunt in een stylesheet niet iets opnemen als een breedte afhankelijk van of een ander element wel of niet aanwezig is. Dan zou je met een andere naam moeten werken voor de smallere div. En dan kan ook weer andere complicaties hebben waardoor je de stylesheet dan veel groter moet maken. Maar dat ligt ook aan de stylesheet en de verdere opbouw van de site.


Verder in [CSS] voor dummies - deel 13
fokstok.nl
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')