Virusscanner tips?
Resizing main div en sidebar
Ik ben een noob en heb een probleem waarvan ik het antwoord niet heb kunnen vinden met google.
Hetgeen wat ik probeer te bereiken is dat de "main div" kan worden gebruikt op meerdere pagina's, dat betekend dat de main div een width van 100% heeft maar ook terug kan schalen als de sidebar er naast word gezet in HTML. (althans dat is de bedoeling).
Het probleem is dat ik voor de layout van de website een margin nodig heb tussen de sidebar en de main div. Als ik een margin right in de sidebar zet, verzet dit alleen de content in the main div maar niet de div zelf. En als ik de margin left gebruik in de main div verschuift de div naar beneden omdat de breedte niet breder dan 100% kan zijn.
Heeft iemand een oplossing voor deze noob? Of is dit niet mogelijk met css/html.
CSS
Code (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
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
body {
font-size: 10px;
}
* {
margin: 0;
padding: 0;
}
p {
padding: .5em;
font-size: 1.2em;
}
#pageWrapper {
background: #999;
width: 79em;
margin: 1em auto;
}
#sidebar {
float: left;
width: 17em;
height: 40em;
margin: 0 0 .5em .5em;
padding: .5em;
}
#main {
min-height:30em;
margin: 0 0 .5em 0;
padding:2em;
}
#subNav,#adminMenu,#userForm {
background: #fff;
width: 17em;
height: 10em;
margin: 0 0 .5em 0;
}
font-size: 10px;
}
* {
margin: 0;
padding: 0;
}
p {
padding: .5em;
font-size: 1.2em;
}
#pageWrapper {
background: #999;
width: 79em;
margin: 1em auto;
}
#sidebar {
float: left;
width: 17em;
height: 40em;
margin: 0 0 .5em .5em;
padding: .5em;
}
#main {
min-height:30em;
margin: 0 0 .5em 0;
padding:2em;
}
#subNav,#adminMenu,#userForm {
background: #fff;
width: 17em;
height: 10em;
margin: 0 0 .5em 0;
}
HTML
Code (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
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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/style.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pageWrapper">
<div id="sidebar">
<div id="subNav">
<p>#subNav</p>
</div>
<div id="adminMenu">
<p>#adminMenu</p>
</div>
<div id="userForm">
<p>#userForm</p>
</div>
<p>#sidebar</p>
</div>
<div id="main">
<p>#main </p>
</div>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/style.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pageWrapper">
<div id="sidebar">
<div id="subNav">
<p>#subNav</p>
</div>
<div id="adminMenu">
<p>#adminMenu</p>
</div>
<div id="userForm">
<p>#userForm</p>
</div>
<p>#sidebar</p>
</div>
<div id="main">
<p>#main </p>
</div>
</div>
</body>
</html>
Graag volgende keren je code tussen de code-tags zetten aub.
[/modedit]
Gewijzigd op 27/06/2014 18:48:03 door Nick Dijkstra
