[CSS] voor dummies - deel 10

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  FOK!-Schrikkelbaas dinsdag 25 november 2008 @ 21:05:00 #51
1972 Swetsenegger
Egocentrische Narcist
pi_63518948
quote:
Op dinsdag 25 november 2008 21:02 schreef mcDavid het volgende:
Dat worden ze wel, maar met die float haal je ze uit de natuurlijke float, waardoor de overige elementen geen rekening meer houden met de grootte.

Zet er een divje onder met clear:both, dan dwingt die de container om er weer omheen te gaan staan.
Ik heb nu de floats in een wrap gezet met een min height en dat lijkt ook te werken... Maar vreemd dat je ook moet 'clearen' als er na je floats geen divs meer komen.
 | FOK! Schrikkelbaasch
pi_63519065
dat werkt inderdaad, totdat de content van de div's die je gefloat hebt hoger wordt dan die minimum height. Dan zit je weer met het zelfde probleem.

En eigenlijk, als je er over nadenkt... dan zit er wel wat in. Of het handig is is een tweede.

Anyway gewoon <div style="clear:both"></div> eronder en klaar.

Mocht er een footer onder komen, kun je die er ook voor gebruiken.
  FOK!-Schrikkelbaas dinsdag 25 november 2008 @ 21:14:06 #53
1972 Swetsenegger
Egocentrische Narcist
pi_63519206
quote:
Op dinsdag 25 november 2008 21:09 schreef mcDavid het volgende:
dat werkt inderdaad, totdat de content van de div's die je gefloat hebt hoger wordt dan die minimum height. Dan zit je weer met het zelfde probleem.
Dat vreesde ik al...
quote:
En eigenlijk, als je er over nadenkt... dan zit er wel wat in. Of het handig is is een tweede.
Wat dan?
quote:
Anyway gewoon <div style="clear:both"></div> eronder en klaar.

Mocht er een footer onder komen, kun je die er ook voor gebruiken.
Die komt er wellicht onder dus dat gaan we maar doen.
 | FOK! Schrikkelbaasch
  donderdag 27 november 2008 @ 20:01:10 #54
164509 Banzaiaap
Tony Rocky Horror
pi_63574412
Heb weer een leuk probleem? Mja, probleem.. ik probeer mn code zo netjes mogelijk te houden, maar heb geen idee hoe.. Heb namelijk een content div die over de nav bar heen moet vallen, maar 2 verschillende achtergronden moet hebben. 1 achtergrond voor de gradient aan de bovenkant van de main-content div en eentje voor de dubbele border. (Ik weet het omslachtig, maar het MOET kunnen )

Tot zover heb ik het al mooi weten te krijgen, van bovenaf gezien dan: http://test.banzaidesign.nl/

Moet dus uiteindelijk zo gaan worden:
  vrijdag 28 november 2008 @ 11:29:41 #55
141104 Patje1987
Madre me quiero un frikandel.
pi_63590258
quote:
Op donderdag 27 november 2008 20:01 schreef Banzaiaap het volgende:
Heb weer een leuk probleem? Mja, probleem.. ik probeer mn code zo netjes mogelijk te houden, maar heb geen idee hoe.. Heb namelijk een content div die over de nav bar heen moet vallen, maar 2 verschillende achtergronden moet hebben. 1 achtergrond voor de gradient aan de bovenkant van de main-content div en eentje voor de dubbele border. (Ik weet het omslachtig, maar het MOET kunnen )

Tot zover heb ik het al mooi weten te krijgen, van bovenaf gezien dan: http://test.banzaidesign.nl/

Moet dus uiteindelijk zo gaan worden:
[ afbeelding ]
Ik zou de body een achtergrond geven, en dan repeaten natuurlijk. Daarna en wrapper maken met bovenin een header div zonder achtergrond, waar je navigatie inkomt, en dan daaronder een div met je content en die een achtergrond geven (van de content).
Wij vormen tezamen gezellig een schaar.
Sportief zijn wij allen en voor elkaar.
Ons doel en ons streven is vriendschap en vree
Aan ons de victorie aan RKC!
pi_63601968
tvp
  woensdag 3 december 2008 @ 23:23:56 #57
87680 Mirel
Mirel wil een bongophone.
pi_63741924

Ik wil er eentje rechts hebben, maar hoe moet je het opdelen? Momenteel zijn de rode in een div en ze zijn apart ook een div, en de blauwe in een div. Heb float left in de rechter gegooid, en die komt rechts te staan, maar dan tussen de andere 2 in.


Hoe moet ik het nou opdelen dat ie wél zoals in de paint komt?
When all else fails, you always have delusion.
pi_63743004
Je HTML en CSS posten zou handig zijn Of liever nog: ergens online zetten.
  donderdag 4 december 2008 @ 00:09:36 #59
87680 Mirel
Mirel wil een bongophone.
pi_63743187
HTML
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		<!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=utf-8" />
<title>Matrozenkoor Apeldoorn</title>
   <link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
    <div id="header">
        <h1></h1>
           <p>slogan hier</p>
    </div> <!--einde header-->   
    <div id="inhoud">
    
       <div id="rij1">    
            <div id="welkom">
            <h3 id="welkombalk">Welkom!</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
         Sed posuere, purus nec mollis vulputate, lacus arcu bibendum augue, 
         ac blandit nunc diam ac massa. Mauris in purus at odio fringilla viverra. 
         Vestibulum et tellus sed massa pellentesque laoreet. Suspendisse eget nisi 
         sit amet elit semper ullamcorper.</p>   
            </div>
            
            <div id="agenda">
            <h3 id="agendabalk">Agenda</h3>
         <p>1 december optreden
         2 december optreden
         3 december optreden</p>
            </div>
       </div> <!--einde rij1-->
        
        <div id="rij2">    
           <div id="laatstenieuws">
            <h3 id="laatstenieuwsbalk">Het laatste nieuws</h3>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
         Sed posuere, purus nec mollis vulputate, lacus arcu bibendum augue, 
         ac blandit nunc diam ac massa. Mauris in purus at odio fringilla viverra. 
         Vestibulum et tellus sed massa pellentesque laoreet. Suspendisse eget nisi 
         sit amet elit semper ullamcorper.</p>   
            </div>   
       </div> <!--einde rij2-->
        
    </div> <!--einde inhoud-->   
</div> <!--einde container-->
</body>
</html>

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90		html {

}

body {
background: url(images/strookheader.jpg) repeat-x;
font-size: 90%;
font-family: verdana, calibri, tahoma;
line-height: 1.6em;
text-align: center;
color: #444444;
}

ul,li, img, body, html { 
margin: 0; padding: 0;
}

a {
text-decoration: none;
color: #00d256;
}

a:hover {
text-decoration: underline;
}

a img (
border: none;
}

h3 {
background: url(images/strookitem.jpg) repeat-x;
font-size: 12px;
font-family: verdana, calibri, tahoma;
color: #FAFAFA;
margin: 0;
padding: -.2em .5em;
text-align: left;
text-transform: lowercase;
font-weight: normal;
}

.fr {
float: right;
}

.fl {
float: left;
}

#container {
text-align: left;
width: 866px;
margin: 0 auto;
}

#header {
background: url(images/header.jpg) no-repeat;
width: 866px;
height: 195px;
}

#inhoud {
padding: 0 1em;
}

#inhoud div {
overflow: hidden;
}

#rij1, #rij2 {
margin-bottom: 2em;
}

#rij1 div,
#rij2 div, {
border: 1px solid #ababab;
}

#rij1 #welkombalk {
height: 50x;
margin: 0;
padding: 0;
}


#agenda {
float: right;
width: 200px;
}

div namen spreken voor zich
When all else fails, you always have delusion.
  donderdag 4 december 2008 @ 08:34:33 #60
74548 Jo0Lz
Lick the box!
pi_63746921
Volgens mij moet je dat blok dat je aan de zijkant wilt hebben, buiten de "inhoud" div, maar in de "container" div zetten. Ik kan het niet zien, kun je het ergens online zetten?
(Ik heb je source wel gezien, maar mis natuurlijk de plaatjes in de opmaak.)
Yes we can! | I didn't fail, it's just postponed success.
  donderdag 4 december 2008 @ 09:12:45 #61
87680 Mirel
Mirel wil een bongophone.
pi_63747456
http://www.mirelmasic.nl/website/

De andere 2 apart dus, bínnen hun div, en de agenda los apart.

Ik zal dit eens proberen

[ Bericht 55% gewijzigd door Mirel op 04-12-2008 09:30:12 ]
When all else fails, you always have delusion.
  donderdag 4 december 2008 @ 10:02:53 #62
87680 Mirel
Mirel wil een bongophone.
pi_63748293
Ok dat is dus gelukt, maar ik heb moeite met waarop ik de float nou moet doen.

#welkom en #laatstenieuws zijn de linker 2, en het gedoe eromheen is de #inhoud, maar tot zover hoef ik niet in de #inhoud te kloten.
#agenda is de rechter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		#welkom {
float: left;
width: 300px;
border: 1px solid #ababab;
}

#laatstenieuws {
float: right;
width: 300px;
border: 1px solid #ababab;
}


#agenda {
width: 200px;
border: 1px solid #ababab;
}


Ze komen wel naast elkaar, maar telkens net niet goed.

Het is misschien beter als ik 2 divs heb, ín de linker div zitten laatstenieuws en welkom, en ín de rechter zit agenda.
When all else fails, you always have delusion.
  donderdag 4 december 2008 @ 10:05:01 #63
141104 Patje1987
Madre me quiero un frikandel.
pi_63748352
quote:
Op donderdag 4 december 2008 10:02 schreef Mirel het volgende:
Ok dat is dus gelukt, maar ik heb moeite met waarop ik de float nou moet doen.

#welkom en #laatstenieuws zijn de linker 2, en het gedoe eromheen is de #inhoud, maar tot zover hoef ik niet in de #inhoud te kloten.
#agenda is de rechter.
[ code verwijderd ]

Ze komen wel naast elkaar, maar telkens net niet goed.

Het is misschien beter als ik 2 divs heb, ín de linker div zitten laatstenieuws en welkom, en ín de rechter zit agenda.
Je geeft zelf het antwoord al, gewoon 2 divs maken. In de linker welkom en laatste nieuws en in de rechter je agenda.
Wij vormen tezamen gezellig een schaar.
Sportief zijn wij allen en voor elkaar.
Ons doel en ons streven is vriendschap en vree
Aan ons de victorie aan RKC!
  donderdag 4 december 2008 @ 10:08:13 #64
87680 Mirel
Mirel wil een bongophone.
pi_63748429
Jeujjjj dat werkte.
When all else fails, you always have delusion.
  donderdag 4 december 2008 @ 10:13:04 #65
87680 Mirel
Mirel wil een bongophone.
pi_63748539
Nou snap ik dus écht hoe je met divs moet werken.
When all else fails, you always have delusion.
  donderdag 4 december 2008 @ 10:16:24 #66
141104 Patje1987
Madre me quiero un frikandel.
pi_63748619
quote:
Op donderdag 4 december 2008 10:08 schreef Mirel het volgende:
Jeujjjj dat werkte.
Laat eens zien wat je hebt gemaakt
Wij vormen tezamen gezellig een schaar.
Sportief zijn wij allen en voor elkaar.
Ons doel en ons streven is vriendschap en vree
Aan ons de victorie aan RKC!
  donderdag 4 december 2008 @ 10:28:48 #67
87680 Mirel
Mirel wil een bongophone.
pi_63748914
http://www.mirelmasic.nl/website/ (IE werkt ie alleen nog) Kan iemand kijken of het in firefox ook werkt? Heb namelijk alleen Opera en IE.
When all else fails, you always have delusion.
  donderdag 4 december 2008 @ 13:04:47 #68
141104 Patje1987
Madre me quiero un frikandel.
pi_63752866
Hij werkt totaal niet in firefox.
Wij vormen tezamen gezellig een schaar.
Sportief zijn wij allen en voor elkaar.
Ons doel en ons streven is vriendschap en vree
Aan ons de victorie aan RKC!
  donderdag 4 december 2008 @ 13:25:25 #69
87680 Mirel
Mirel wil een bongophone.
pi_63753439
Waar kan dat aan liggen? :/
When all else fails, you always have delusion.
  donderdag 4 december 2008 @ 13:57:34 #70
74548 Jo0Lz
Lick the box!
pi_63754384
quote:
Op donderdag 4 december 2008 13:25 schreef Mirel het volgende:
Waar kan dat aan liggen? :/
FireBug zegt dat je stylesheet ophoud voor het a img gedeelte.
In IE 7 en in Safari neemt hij de css wel mee, maar in opera en FF niet?
Zie niets bijzonders in de code, zou het zo niet weten...
Yes we can! | I didn't fail, it's just postponed success.
  donderdag 4 december 2008 @ 14:13:21 #71
141104 Patje1987
Madre me quiero un frikandel.
pi_63754861
quote:
Op donderdag 4 december 2008 13:57 schreef Jo0Lz het volgende:

[..]

FireBug zegt dat je stylesheet ophoud voor het a img gedeelte.
In IE 7 en in Safari neemt hij de css wel mee, maar in opera en FF niet?
Zie niets bijzonders in de code, zou het zo niet weten...
Hij hoeft iig niet die h3 een ID te geven omdat ie al gedefineerd wordt in de CSS zelf.
Wij vormen tezamen gezellig een schaar.
Sportief zijn wij allen en voor elkaar.
Ons doel en ons streven is vriendschap en vree
Aan ons de victorie aan RKC!
pi_63774553
quote:
Op donderdag 4 december 2008 13:25 schreef Mirel het volgende:
Waar kan dat aan liggen? :/
Er staat in ieder geval nog een fout in je css. Padding mag namelijk niet negatief zijn (margin mag dat wel).
fokstok.nl
pi_63801974
vraagje, benieuwd of het mogelijk is:

ik wil de standaard tekst die ik opgeef in een text veld (input type=text) grijzig laten zijn.. ( dit lukt wel)
echter zodra er tekst wordt ingetikt wil ik dat deze zwart is
dus een kleur verandering bij het invoeren van "eigen" tekst..
is dat mogelijk met CSS of moet ik hier javascript voor gaan inzetten?
pi_63802011
Volgens mij kan dat met de psuedo-class ":focus"


1textarea:focus {color:#000}


zoiets dus..

[ Bericht 40% gewijzigd door mcDavid op 06-12-2008 11:54:03 (verkeerde psuedo class :P) ]
pi_63802151
quote:
Op zaterdag 6 december 2008 11:47 schreef mcDavid het volgende:
Volgens mij kan dat met de psuedo-class ":focus"
[ code verwijderd ]

zoiets dus..
thnx

werkt weer niet in IE.. (8 in compatibilty mode), daar ga ik iig verder naar zoeken, heb nu een houvast
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - deel 10
Index

» digital corner

» development

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