Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien
Toon posts:

Hoe krijg ik een tabel onder een andere?

Pagina: 1
Acties:

vrijdag 10 januari 2014 08:34

Acties:
  • TeGek
  • Registratie: Oktober 2007
  • Laatst online: 19-09 11:50

TeGek

Engineer in hart en nieren.

Topicstarter
Afbeeldingslocatie: http://hulpnu.nl/screenshot.png

Ik heb momenteel 5 tabellen, ik wil dat tabel 2 onder tabel 1 komt, zodat als ik nieuwe tabellen toevoeg deze weer onder de andere tabellen komen

Wat ik al heb geprobeerd:
  • clear: left; - Dit zorgt ervoor dat de tabel op de juiste plek komt, echter schuiven alle tabellen dan naar beneden naar het niveau van de laagste tabel
  • display: block; - geen effect
  • tabellen allemaal wat groter maken tot het scherm vullend is, daarna tabel 2 op de 5de plek gezet. Hierbij komt hij wel op de goede plek maar op een nieuwe regel(dus een groot stuk ruimte tussen te tabellen)
Ik ben zelf geen web-devver en ben dit hobbymatig aan het doen, dus een duidelijke uitleg met voorbeelden zou mij al enorm vooruit helpen :+
de CSS:
Cascading Stylesheet:
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

body
{
 font-family: Arial,Helvetica,sans-serif;
 font-size: 12px;
}


table { border-collapse:separate; border-spacing: 10px 2px; }
th, td { border-bottom: 1px solid gainsboro; }


.colL { vertical-align:text-top; text-align: left; }
.colM { vertical-align:text-top; text-align: center; }
.colR { vertical-align:text-top; text-align: right; }


#offlineagents
{
 float:left;
 height:250px;
 width:280px;
 border:1px solid gray;
 overflow:auto;
 padding:2px;
 margin:2px;
box-shadow: 1px 1px 1px #999;
border-radius: 15px;
}

#onoff
{
 float:left;
height:50px
 width:180px;
 border:1px solid gray;
 overflow:auto;
 padding:2px;
 margin:2px;
box-shadow: 1px 1px 1px #999;
border-radius: 15px;

}
#tickets
{
 float:left;
height:100px;
 width:135px;
 border:1px solid gray;
 overflow:auto;
 padding:2px;
 margin:2px;
box-shadow: 1px 1px 1px #999;
border-radius: 15px;
}
#Telefonie
{
 float:left;
/* height:200px; */
 width:180px;
 border:1px solid gray;
 overflow:auto;
 padding:2px;
 margin:2px;
clear: left;
box-shadow: 1px 1px 1px #999;
border-radius: 15px;
}
#Dagen
{
 float:left;
/* height:200px; */
 width:180px;
 border:1px solid gray;
 overflow:auto;
 padding:2px;
 margin:2px;
clear: left;
box-shadow: 1px 1px 1px #999;
border-radius: 15px;
}

#lowdisk
{
 float:left;
 width:450px;
 height:250px;
 border:1px solid gray;
 overflow:auto;
 padding:2px;
 margin:2px;
box-shadow: 1px 1px 1px #999;
border-radius: 15px;
}

#alarms
{
 float:left;
 width:550px;
 height:250px;
 border:1px solid gray;
 overflow:auto;
 padding:2px;
 margin:2px;
box-shadow: 1px 1px 1px #999;
border-radius: 15px;
}


#offlinelist
{
border:0;
width:inherited;
height:inherited;
}


#lowdisklist
{
border:0;
width:inherited;
height:inherited;

}


#topbox
{
 border:1px solid gray;
 clear:both;
 overflow:hidden;
 background:#f0f0f0;
}

#header
{
 float:left; 
 width:79%;
 overflow:hidden;
 font-family: Arial,Helvetica,sans-serif;
 font-size: 36px;
 color: #3f3f3f;
 text-align: center;
}

#dtime
{
 float:right;
 width:15%;
 overflow:hidden;
 font-family: Arial,Helvetica,sans-serif;
 font-size: 18px;
 color: #3f3f3f;
 text-align: center;
}


#heading
{
 font-family: Arial,Helvetica,sans-serif;
 font-size: 18px;
 color: #009933;
}


De HTML:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>NOC Chart Netwerk</title>
<link rel="stylesheet" type="text/css" href="mytech.css">
</head>
<body onload="refresh();">
<script src="jquery-1.9.1.min.js"></script>


<div id="topbox">

  <div id="header">
  <img src="logo.png" alt="My NOC" align="left">
  </div>
  <div id="dtime" name="dtime">
  </div>
</div>

<div id="onoff" name="onoff">
</div>

<div id="tickets" name="tickets">
</div>


<div id="alarms" name="alarms">
</div>
<div id="offlineagents" name="offlineagents">
</div>


<div id="lowdisk" name="lowdisk">
</div>

PoSh Fan? Automation? RMM? blog - op zoek naar een nieuwe job? kijk dan hier.

vrijdag 10 januari 2014 08:36

Acties:
  • Sebazzz
  • Registratie: September 2006
  • Laatst online: 22-11 18:52

Sebazzz

3dp

Door de float heeft display:block geen effect. Probeer daar eens naar te kijken.

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

vrijdag 10 januari 2014 09:23

Acties:
  • TeGek
  • Registratie: Oktober 2007
  • Laatst online: 19-09 11:50

TeGek

Engineer in hart en nieren.

Topicstarter
Dank! dat heeft sowieso al een stukje geholpen! ik heb nu een extra table toegevoegd om mijn probleem proberen te verduidelijken

nieuwe screenshot:
Afbeeldingslocatie: http://hulpnu.nl/screenshot2.png
nieuwe CSS:

Cascading Stylesheet:
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

body
{
 font-family: Arial,Helvetica,sans-serif;
 font-size: 12px;
}


table { border-collapse:separate; border-spacing: 10px 2px; }
th, td { border-bottom: 1px solid gainsboro; }


.colL { vertical-align:text-top; text-align: left; }
.colM { vertical-align:text-top; text-align: center; }
.colR { vertical-align:text-top; text-align: right; }


#offlineagents
{
 float:left;
 height:250px;
 width:280px;
 border:1px solid gray;
 overflow:auto;
 padding:2px;
 margin:2px;
box-shadow: 1px 1px 1px #999;
border-radius: 15px;
}

#onoff
{
display:block;
height:70px;
 width:135px;
 border:1px solid gray;
 overflow:auto;
 padding:2px;
 margin:2px;
box-shadow: 1px 1px 1px #999;
border-radius: 15px;
}
#tickets
{
display:block;
height:100px;
 width:135px;
 border:1px solid gray;
 overflow:auto;
 padding:2px;
 margin:2px;
box-shadow: 1px 1px 1px #999;
border-radius: 15px;
}
#tel
{
display:block;
 float:left;
height:100px;
 width:135px;
 border:1px solid gray;
 overflow:auto;
 padding:2px;
 margin:2px;
clear: left;
box-shadow: 1px 1px 1px #999;
border-radius: 15px;
}
#dagen
{
 float:left;
/* height:200px; */
 width:180px;
 border:1px solid gray;
 overflow:auto;
 padding:2px;
 margin:2px;
clear: left;
box-shadow: 1px 1px 1px #999;
border-radius: 15px;
}

#lowdisk
{
 float:left;
 width:450px;
 height:250px;
 border:1px solid gray;
 overflow:auto;
 padding:2px;
 margin:2px;
box-shadow: 1px 1px 1px #999;
border-radius: 15px;
}

#alarms
{
 float:left;
 width:550px;
 height:250px;
 border:1px solid gray;
 overflow:auto;
 padding:2px;
 margin:2px;
box-shadow: 1px 1px 1px #999;
border-radius: 15px;
}


#offlinelist
{
border:0;
width:inherited;
height:inherited;
}


#lowdisklist
{
border:0;
width:inherited;
height:inherited;

}


#topbox
{
 border:1px solid gray;
 clear:both;
 overflow:hidden;
 background:#f0f0f0;
}

#header
{
 float:left; 
 width:79%;
 overflow:hidden;
 font-family: Arial,Helvetica,sans-serif;
 font-size: 36px;
 color: #3f3f3f;
 text-align: center;
}

#dtime
{
 float:right;
 width:15%;
 overflow:hidden;
 font-family: Arial,Helvetica,sans-serif;
 font-size: 18px;
 color: #3f3f3f;
 text-align: center;
}


#heading
{
 font-family: Arial,Helvetica,sans-serif;
 font-size: 18px;
 color: #009933;
}

PoSh Fan? Automation? RMM? blog - op zoek naar een nieuwe job? kijk dan hier.

vrijdag 10 januari 2014 10:58

Acties:
  • TeGek
  • Registratie: Oktober 2007
  • Laatst online: 19-09 11:50

TeGek

Engineer in hart en nieren.

Topicstarter
Opgelost!

De side-bar in een aparte div gedaan, hierop float: left toegepast, bij de losse blokken weggehaald.

PoSh Fan? Automation? RMM? blog - op zoek naar een nieuwe job? kijk dan hier.

vrijdag 10 januari 2014 11:10

Acties:
  • Zoefff
  • Registratie: September 2001
  • Laatst online: 20-11 21:54

Zoefff

❤ 

Ehm, heb je enig idee waar je mee bezig bent? :P

Als je het echt leuk vind om hier hobbymatig mee aan de slag te gaan dan zou je er goed aan doen om wat meer over de basis van CSS te lezen. De code hierboven bevat zo veel overbodige regels dat het haast niet anders kan dan dat je hier op een later moment van gaat balen, of dat simpele problemen hierdoor onnodig complex worden.

Concepten die je vooralsnog lijkt te missen zijn b.v. de standaard inheriting van bepaalde properties, het verschil tussen id's en classes en de standaard properties van bepaalde elementen.

Hoewel ik nu wel een paar dingen weglaat is je code hierboven in essentie samen te vatten tot dit voorbeeld:

HTML:
1
2
3
4
5
6
7
8
9
10
11

<div class="box-column">
    <div class="box">Do</div>

    <div class="box">Re</div>
</div>

<div class="box">Mi</div>

<div class="box" id="tickets">Fa</div>

<div class="box">Sol</div>


Cascading Stylesheet:
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

/* Zaken zoals font-family, size en kleur worden standaard overgeerfd. Je hoeft dit dus maar 1 keer op b.v. de body te definieren */
body {
    font-family: Arial, Helvetica, "sans-serif";
    font-size: 12px;
}

/* Defnieer de standaard layout van een blok één keer in een class die je kan hergebruiken voor alle blokken */
.box {
    float: left;
    border: 1px solid grey;
    padding: 2px;
    margin: 2px;
    box-shadow: 1px 1px 1px #999;
    border-radius: 15px;

    height: 250px;
    width: 280px;
}

/* Eventuele uitzonderingen (b.v. afmetingen) kan je dan voor ieder blok specifiek aangeven */
#tickets {
    width: 100px;
}

/* Jouw probleem los je op door de boxes die je boven elkaar wil hebben in een kolom te zetten */
.box-column {
    float: left;
}

/* Alle boxes in die kolom hebben geen float meer nodig, dus kan je zo in 1 keer weg halen */
.box-column .box {
    float: none;
    height: 121px;
}


Het resultaat is hetzelfde, maar de code veel korter, leesbaarder en daardoor eenvoudiger te begrijpen :)


Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

zaterdag 11 januari 2014 12:15

Acties:
  • geert1
  • Registratie: Maart 2006
  • Laatst online: 19-11 12:18

geert1

De reactie van Zoeff hierboven bevat waardevolle info voor je. Ik zou dat willen aanvullen met wat leesmateriaal: Als je meer wilt weten van html en css, en deze werkzaamheden voor jezelf begrijpelijker en leuker wilt maken, dan raad ik je aan om de basistraining van Shaw Lowe te doorlopen, en daarna de geavanceerde training. Eigenlijk zou iedereen in het webdesign-forum hiermee gebaat zijn :)
Pagina: 1
Reageer

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq