[CSS] voor dummies - deel 12

Index

» digital corner

» development

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