[CSS] voor dummies - deel 12

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
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^
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')