Hey tweakers,
Ik heb een probleem met het positioneren van links binnen div's.
Ik heb een webpagina die bestaat uit 5 <div>'s verdeeld in 2 andere <div>'s met een achtergrond afbeelding. (die op elkaar aan moeten sluiten).
De pagina moet gecentreerd zijn en daarom heb ik de 2 <div>'s (die samen 5 andere <div>'s bevatten) in 1 container div geplaatst.
De container div heb ik de grootte van de gehele pagina gegeven (1024 x 768)
de container heb ik 2 marges meegegeven: left: auto en right: auto
Bij 4 van de 5 losse <div>'s heb ik bij ieder weer een div geplaast met daarin een <a href>
Tot zo ver klopt alles! alleen de links staan (logisch) links boven in de <div>'s
Probleem:
De 4 divs die de <a href> bevatten wil ik heel precies positioneren door marges te gebruiken.
maar als ik dat doe. Dan verschuiven alle 4 divs naar beneden op een of andere manier buiten de container!
weten jullie hoe ik dit moet oplossen? ik heb al geprobeerd om de links in <p> te zetten in plaats van <div> maar dan krijgt elke <div> waar de <p> in staat een "enter".
voor de duidelijkheid de CSS en de HTML code's:
CSS:
HTML:
Ik wil diegene die de moeite hebben genomen dit bericht door te nemen heel erg bedanken!
Groeten,
Aego
Ik heb een probleem met het positioneren van links binnen div's.
Ik heb een webpagina die bestaat uit 5 <div>'s verdeeld in 2 andere <div>'s met een achtergrond afbeelding. (die op elkaar aan moeten sluiten).
De pagina moet gecentreerd zijn en daarom heb ik de 2 <div>'s (die samen 5 andere <div>'s bevatten) in 1 container div geplaatst.
De container div heb ik de grootte van de gehele pagina gegeven (1024 x 768)
de container heb ik 2 marges meegegeven: left: auto en right: auto
Bij 4 van de 5 losse <div>'s heb ik bij ieder weer een div geplaast met daarin een <a href>
Tot zo ver klopt alles! alleen de links staan (logisch) links boven in de <div>'s
Probleem:
De 4 divs die de <a href> bevatten wil ik heel precies positioneren door marges te gebruiken.
maar als ik dat doe. Dan verschuiven alle 4 divs naar beneden op een of andere manier buiten de container!
weten jullie hoe ik dit moet oplossen? ik heb al geprobeerd om de links in <p> te zetten in plaats van <div> maar dan krijgt elke <div> waar de <p> in staat een "enter".
voor de duidelijkheid de CSS en de HTML code's:
CSS:
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
| div#container
{
width: 1024px;
height: 768px;
margin-left: auto;
margin-right: auto;
}
div#right_column
{
float: right;
width: 312px;
height: 768px;
}
div#home
{
background: url("images/home.jpg");
height: 197px;
width: 312px;
}
div#about_me
{
background-image: url("images/about_me.jpg");
height: 169px;
}
div#portfolio
{
background-image: url("images/portfolio.jpg");
height: 176px;
}
div#contact_me
{
background-image: url("images/contact_me.jpg");
height: 226px;
}
div#left_column
{
float: left;
background: url("images/content_left.jpg");
width: 712px;
height: 768px;
}
div#home_link
{
margin-left: 100px;
margin-top: 50px;
} |
HTML:
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
| <body>
<div id="container"><!-- opening container -->
<!-- linker kolom -->
<div id="left_column">
</div>
<!-- rechter kolom -->
<div id="right_column">
<div id="home">
<div id="home_link"><a href="home.html">Home</a></div>
</div>
<div id="about_me">
<div id="about_me_link"><a href="about_me.html">About me</a></div>
</div>
<div id="portfolio">
<div id="portfolio_link"><a href="portfolio.html">Portfolio</a></div>
</div>
<div id="contact_me">
<div id="contact_me_link"><a href="contact_me.html">Contact me</a></div>
</div>
</div>
</div><!-- afsluiting container -->
</body>
</html> |
Ik wil diegene die de moeite hebben genomen dit bericht door te nemen heel erg bedanken!
Groeten,
Aego
:strip_exif()/u/92704/AthlonX2.gif?f=community)
/u/102549/gimp_logo_icon.png?f=community){kind=icon}
/u/129382/crop5f6f24af0ae5d.png?f=community)
:strip_exif()/u/22119/ch.gif?f=community)
/u/102105/crop56f481fe1f74f.png?f=community)
