CSS Centering
Ik wil een logo in het midden van het scherm hebben (alleen horizontaal gecentreerd) en er een menu omheen.
Het probleem is dat het allemaal in een ul staat:
<ul>
<li>hoi</li>
<li>menu</li>
<li>Dit is een menu, en dit is veel langer</li>
<li><img src="logo" /></li>
<li>deze kant is korter</li>
</ul>
Hoe kan ik nou zorgen dat het logo in het midden komt te staan? want nu is de hele text gecentreerd, waardoor het logo meer naar rechts komt te staan..
Gr,
Niek
html, body {
background-image: url('logo.gif');
background-repeat: no-repeat;
background-position: center top;
}
<ul>
<li>hoi</li>
<li>menu</li>
</ul>
<img src="#" />
<ul>
...
</li>
maar nu ziet het er zo uit:
Code (php)
1
2
3
2
3
menu menu menu
IMAGE
menu menu menu
IMAGE
menu menu menu
maar zo moet t zijn:
Code (php)
1
menu menu menu IMAGE menu menu menu
Iemand? (a)
Code (php)
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
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
<body>
<div id="container">
<ul>
<li>hoi</li>
<li>menu</li>
</ul>
<img src="#" />
<ul>
<li>hoi</li>
<li>menu</li>
</ul>
</div>
</body>
**CSS**
body{
text-align:center; /* IE */
}
#container{
margin:0 auto; /* Overige browsers*/
text-algin:left; /* Weer even goed zetten */
width:150px;
}
img{
float:left; /* Om ze naast elkaar te krijgen*/
width:50px;
}
ul{
float:left: /* Om ze naast elkaar te krijgen*/
width:50px;
}
<div id="container">
<ul>
<li>hoi</li>
<li>menu</li>
</ul>
<img src="#" />
<ul>
<li>hoi</li>
<li>menu</li>
</ul>
</div>
</body>
**CSS**
body{
text-align:center; /* IE */
}
#container{
margin:0 auto; /* Overige browsers*/
text-algin:left; /* Weer even goed zetten */
width:150px;
}
img{
float:left; /* Om ze naast elkaar te krijgen*/
width:50px;
}
ul{
float:left: /* Om ze naast elkaar te krijgen*/
width:50px;
}
Gewijzigd op 01/01/1970 01:00:00 door Crazyme
menu menu menu IMAGE menu menu menu
zo dus
Niek schreef op 25.07.2007 11:47:
mjha, maar hoe kan ik dan het menu aan de linker kant daarvan doen, en het andere menu aan de rechterkant, op 1 lijn?
menu menu menu IMAGE menu menu menu
zo dus
menu menu menu IMAGE menu menu menu
zo dus
ik heb even mijn bericht aangepast. Zo moet je dat dus doen.
Code (php)
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
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
<body>
<div id="container">
<ul>
<li>hoi</li>
<li>menu</li>
</ul>
<div id="pic-midden">
<img src="#" />
</div>
<ul>
<li>hoi</li>
<li>menu</li>
</ul>
</div>
</body>
**CSS**
body{
text-align:center; /* IE */
}
#container{
margin:0 auto; /* Overige browsers*/
text-algin:left; /* Weer even goed zetten */
width:150px;
}
#pic-midden{
float:left; /* Om ze naast elkaar te krijgen*/
width:50px;
text-align:center; /* Om je pic te centreren*/
}
ul{
float:left: /* Om ze naast elkaar te krijgen*/
width:50px;
}
<div id="container">
<ul>
<li>hoi</li>
<li>menu</li>
</ul>
<div id="pic-midden">
<img src="#" />
</div>
<ul>
<li>hoi</li>
<li>menu</li>
</ul>
</div>
</body>
**CSS**
body{
text-align:center; /* IE */
}
#container{
margin:0 auto; /* Overige browsers*/
text-algin:left; /* Weer even goed zetten */
width:150px;
}
#pic-midden{
float:left; /* Om ze naast elkaar te krijgen*/
width:50px;
text-align:center; /* Om je pic te centreren*/
}
ul{
float:left: /* Om ze naast elkaar te krijgen*/
width:50px;
}
Code (php)
1
2
3
2
3
dit:
menu menu menu
IMAGE menu menu menu
menu menu menu
IMAGE menu menu menu
Gewijzigd op 01/01/1970 01:00:00 door Lord Niek
Code (php)
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>
hoi
</title>
<style type="text/css">
body {
text-align: center;
}
ul {
list-type: none;
float: left;
}
ul,li {
display: inline;
}
li {
width: 100px;
float: left;
}
img {
margin: 0 auto;
text-align: center;
float: left;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li>menu
</li>
<li>menu
</li>
<li>menu
</li>
<li>menu
</li>
</ul><img src=
"logo.gif"
alt="XXXXXXXX" title="nog meer X-jes =D xD">
<ul>
<li>menu
</li>
<li>menu
</li>
</ul>
</div>
</body>
</html>
<html>
<head>
<title>
hoi
</title>
<style type="text/css">
body {
text-align: center;
}
ul {
list-type: none;
float: left;
}
ul,li {
display: inline;
}
li {
width: 100px;
float: left;
}
img {
margin: 0 auto;
text-align: center;
float: left;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li>menu
</li>
<li>menu
</li>
<li>menu
</li>
<li>menu
</li>
</ul><img src=
"logo.gif"
alt="XXXXXXXX" title="nog meer X-jes =D xD">
<ul>
<li>menu
</li>
<li>menu
</li>
</ul>
</div>
</body>
</html>
Dat is wat ik nu heb, verder kom ik niet. Nu staan ze wel naast elkaar, zoals ik bedoel, alleen nu moet het plaatje nog in het midden. Dus het plaatje moet in het midden van de pagina staan. Dus eigenlijk moet nu heel het boeltje naar rechts geschoven worden. Maar het moet wel liquid blijven. Weet iemand hoe?