[CSS] voor dummies - deel 12

Index

» digital corner

» development

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