divs naast en onder elkaar

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Louis Deconinck

Louis Deconinck

08/02/2014 09:19:48
Quote Anchor link
Hoe kan ik er voor zorgen dat de content div (dat met #yolo) onder het topmenu komt. Nu blijft deze namelijk hangen onder het sidemenu. Ik had het reeds al opgelost met een negatieve margin, maar dit zou ik liever niet doen, aangezien de inhoud in de sidebar variabel is en ik dan ook telkens de margin moet aanpassen. Bestaat er een andere manier om dit op te lossen?

Afbeelding

index.html:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!DOCTYPE HTML>
<html>
<head>
<title>Be Geek - Unleash the geek within!</title>
<link href='style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="alles">

<div id="headmenu">
<div id="head">
<div id="fulltitle">
<a href="http://verwarmigontluchten.eu/begeek-shop">
<div id="title"><h1>Be Geek</h1></div>
<div id="subtitle"><h2>Unleash the geek within!</h2></div></a>
</div>

<div id="topmenu">
<ul><li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Vragen</a></li>
<li><a href="#">Contact</a></li></ul>
</div>
</div>

<div id="sidemenu">
<h3>Winkelwagentje</h3>
<h3>Vind een cadeau</h3>
<h3>Social media</h3>
<h3>Waarom bij ons kopen</h3>
<h3>Filter</h3>
</div>

</div>

<div id="content">

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


style.css:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
@import url(http://fonts.googleapis.com/css?family=Ceviche+One);
@import url(http://fonts.googleapis.com/css?family=Press+Start+2P);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
text-align: center;
font-family: 'Open Sans', sans-serif;
background-color: #ecf0f1;
}

#alles {
width: 1280px;
margin: 0 auto;
text-align: left;
}

a {
text-decoration: none;
}

#title {
font-family: 'Ceviche One', cursive;
color: #308b8a;
font-size: 48px;
padding: 0px 0px 0px 55px;
margin: -85px 0px 0px 0px;
}

#subtitle {
font-family: 'Ceviche One', cursive;
color: #205b5a;
padding: 0px 0px 0px 35px;
font-size: 24px;
margin: -85px 0px 0px 0px;
}

#fulltitle {
float: left;
width: 400px;
}

#topmenu {
overflow: hidden;
float: left;
margin: 70px 0px 0px 0px;
background-color: #cf7475;
border-radius: 15px 0px 0px 0px;
}

#topmenu li {
text-decoration: none;
font-family: 'Press Start 2P', cursive;
position:relative;
float: left;
list-style: none;
margin-left: -10px;
padding: 0px 20px 10px 20px;
}

#topmenu li a {
color: #ffffff;
}

#topmenu li a:hover {
color: #308b8a;
}

#sidemenu {
width: 300px;
overflow: hidden;
float: left;
padding: 0px 0px 0px 20px;
border-radius: 15px 15px 15px 0px;
background-color: #b43e3f;
}

#sidemenu h3 {
font-family: 'Ceviche One', cursive;
color: #ffffff;
font-size: 28px;
}

#headmenu {
overflow: hidden;
width: 1280px;
}

#content {
width: 850px;
background-color: #ffffff;
margin: 0px 0px 0px 0px;
border-radius: 15px 0px 0px 0px;
padding: 15px;
}
Gewijzigd op 08/02/2014 10:46:14 door Louis Deconinck
 
PHP hulp

PHP hulp

16/04/2024 10:25:57
 
Milo S

Milo S

08/02/2014 11:43:26
Quote Anchor link
Persoonlijk zou ik dan al beginnen met het anders opbouwen van de HTML code. Als je dat namelijk doet kun je met enkel een breedte, hoogte en float alles al snel op de juiste plek krijgen.

Het Logo, Het Topmenu in een soort van container en dan het sidemenu daarnaast plaatsen.

Mag ik je een tip geven over het algehele plaatje? Probeer consistent te zijn met benamingen, of Engels of Nederlands. Verder maakt inspringen alles een stuk overzichtelijker.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<div class="wrapper">

    <div>
        <img src="logo.png" alt="">
        
        <ul class="topmenu">
            <li><a href="">Sample</a></li>
            <li><a href="">Sample</a></li>
            <li><a href="">Sample</a></li>
            <li><a href="">Sample</a></li>
        </ul>
        
        <div class="yolo">
            Hier de zogenaamde Yolo division.
        </div>
    </div>
    
    <ul class="sidemenu">
        <li><a href="">Sample</a></li>
        <li><a href="">Sample</a></li>
        <li><a href="">Sample</a></li>
        <li><a href="">Sample</a></li>
    </ul>
    
</div>
Gewijzigd op 08/02/2014 11:45:09 door Milo S
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.