Toon posts:

[Div] twee divs naast elkaar en een div onder.

Pagina: 1
Acties:
  • 117 views sinds 30-01-2008
  • Reageer

woensdag 30 juni 2004 15:13

Acties:
  • DutchTux
  • Registratie: April 2003
  • Laatst online: 01-04-2025

DutchTux

Plaatjeloos

Topicstarter
Ik heb nu een tijdje zitten te zoeken op dit forum en op internet.
Wat ik eigenlijk wil is dat ik een soort venster kan krijgen net als bij explorer van WinXP heb. Alleen met het gebruik van DIV

Ik heb het wel voor elkaar een beetje alleen zit ik met de knop die rechts van de titelbalk zit.
het zit er zeg maar net onder de titel bij de content in plaats van in de titel.

hier heb ik de code:

html code:
code:
1
2
3
4
5
6
7
8
9
10

<div class="optfield">
<div class="opttitle">[img]"gfx/restore.png"[/img]&nbsp;
Restore Database</div><div class="optright">[img]"gfx/hide.png"[/img]</div>
<div class="optcont">
woei woei woei woei woei woei<br>
woei woei woei woei woei woei<br>
woei woei woei woei woei woei<br>
woei woei woei woei woei woei<br>
</div>
</div>


css code:
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

.optfield {
    margin: 1px;
    border: 1px solid #000000;
}
.opttitle {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #003366;
    padding-left: 4px;
}
.optcont {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: #0066CC;
    padding: 4px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #000000;
    color: #FFFFFF;
}
.optright {
    background-color: #003366;
    text-align: right;
    padding-right: 5px;
    width: 32px;
    float: right;
    option: fixed;
}
.optbutton {
    border: 0px;
}


Weet iemand hoe ik dit goed kan oplossen?

[ Voor 9% gewijzigd door DutchTux op 30-06-2004 15:14 ]

A random guy with a Computer.

woensdag 30 juni 2004 15:24

Acties:
  • Vae Victis
  • Registratie: April 2001
  • Laatst online: 00:14

Vae Victis

Dark Lord of the Sith

Gebruik eens een:
position:absolute;
En 3x een:
position:relative;
En 3x een:
float:left;
+ 1x een
clear:left;

Waar je ze neer moet zetten mag je zelf uitzoeken.
Zoek ook eens op die attributen, kom je genoeg tegen waar je wat aan hebt. ;)

woensdag 30 juni 2004 15:33

Acties:
  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Waarom absoluut positioneren :?

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

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
    .optfield {
            margin: 1px;
            border: 1px solid black;
            background-color: #003366;
            width: 98%;
    }
    .opttitle {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            font-weight: bold;
            color: #FFFFFF;
            padding-left: 4px;
            float: left;
    }

    .optright {
            text-align: left;
            padding-right: 5px;
            width: 32px;
            float:right;
    }

    .optcont {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            background-color: #0066CC;
            padding: 4px;
            border-top-width: 1px;
            border-top-style: solid;
            border-top-color: #000000;
            color: #FFFFFF;
            width: 100%;
    }

    .optbutton {
            border: 0;
    }
</style>
</head>

<body>
<div class="optfield">
 <span class="opttitle">[img]"gfx/restore.png"[/img]&nbsp;Restore Database</span>
 <span class="optright">[img]"gfx/hide.png"[/img]</span>
 <div class="optcont">woei woei woei woei woei woei<br>
  woei woei woei woei woei woei<br>
  woei woei woei woei woei woei<br>
  woei woei woei woei woei woei<br>
 </div>
</div>

</body>
</html>


Ziet er trouwens niet uit in Mozilla :P

[ Voor 48% gewijzigd door BtM909 op 30-06-2004 15:35 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 30 juni 2004 15:49

Acties:
  • DutchTux
  • Registratie: April 2003
  • Laatst online: 01-04-2025

DutchTux

Plaatjeloos

Topicstarter
Hier heb je de hele template maar dan zonder plaatjes (Zit nog aan het wachten op me hosting provider :S)

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
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Database Backup</title>
<style>
.toolbar {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    background-color: #000066;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-bottom-style: solid;
    border-top-color: #000000;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;
    padding-left: 48px;
}
body {
    background-color: #003399;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    margin: 0px;
}
.toplogo {
    position: absolute;
    left: 8px;
    top: 8px;
}
.toolbutton {
    vertical-align: middle;
    border: 0px;
}
.prgfield {
    left: 5%;
    width: 90%;
    position: Absolute;
    margin: 5px;
    padding: 5px;
}
.optfield {
    margin: 1px;
    border: 1px solid #000000;
}
.opttitle {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #003366;
    padding-left: 4px;
}
.optcont {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: #0066CC;
    padding: 4px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #000000;
    color: #FFFFFF;
}
.optright {
    background-color: #003366;
    text-align: right;
    padding-right: 5px;
    width: 32px;
    float: right;
    option: fixed;
}
.optbutton { 
    border: 0px;
}
</style>
</head>
<body>
<div class="toolbar">
ProgramApplication version 0.1&nbsp;
<a href="">
[img]"gfx/backup.png"[/img]
</A>&nbsp;
<a href="">
[img]"gfx/restore.png"[/img]
</a>&nbsp;
<a href="">
[img]"gfx/logs.png"[/img]
</a>&nbsp;
&nbsp;
<a href="">
[img]"gfx/options.png"[/img]
</a>&nbsp;
</div>
[img]"gfx/backuplogo.png"[/img]

<div class="prgfield">

<div class="optfield">
<div class="opttitle">[img]"gfx/backup.png"[/img]&nbsp;Backup Database</div>
<div class="optright">[img]"gfx/hide.png"[/img]</div>
<div class="optcont">
woei woei woei woei woei woei<br>
woei woei woei woei woei woei<br>
woei woei woei woei woei woei<br>
woei woei woei woei woei woei<br>
</div>
</div>
<br>
<div class="optfield">
<div class="opttitle">[img]"gfx/restore.png"[/img]&nbsp;Restore Database</div>
<div class="optright">[img]"gfx/hide.png"[/img]
</div>
<div class="optcont">
woei woei woei woei woei woei<br>
woei woei woei woei woei woei<br>
woei woei woei woei woei woei<br>
woei woei woei woei woei woei<br>
</div>
</div>
<br>
<div class="optfield">
<div class="opttitle">[img]"gfx/logs.png"[/img]&nbsp;Logs</div>
<div class="optright">[img]"gfx/hide.png"[/img]</div>
<div class="optcont">
woei woei woei woei woei woei<br>
woei woei woei woei woei woei<br>
woei woei woei woei woei woei<br>
woei woei woei woei woei woei<br>
</div>
</div>
<br>
<div class="optfield">
<div class="opttitle">[img]"gfx/options.png"[/img]&nbsp;Options</div><div class="optright">
[img]"gfx/hide.png"[/img]</div>
<div class="optcont">
woei woei woei woei woei woei<br>
woei woei woei woei woei woei<br>
woei woei woei woei woei woei<br>
woei woei woei woei woei woei<br>
</div>
</div>

</div>
</body>
</html>


maar het ziet er nog redelijk uit

en de stylesheet zit eigenlijk in een aparte file.

hmmm..je ziet niet de weggelaten plaatjes :(

[ Voor 21% gewijzigd door DutchTux op 30-06-2004 15:53 . Reden: effe de bericht better er laten uitzetten... ]

A random guy with a Computer.

Reageer