CSS Centering

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Lord Niek

Lord Niek

25/07/2007 10:03:00
Quote Anchor link
Hi,

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

PHP hulp

28/03/2024 16:55:15
 
Arjan Kapteijn

Arjan Kapteijn

25/07/2007 10:50:00
Quote Anchor link
Ken die image toe als background van je html,body.

html, body {
background-image: url('logo.gif');
background-repeat: no-repeat;
background-position: center top;
}
 
Lord Niek

Lord Niek

25/07/2007 10:52:00
Quote Anchor link
hmm, dat kan ik ook nog gewoon doen naturlijk...
 
Lord Niek

Lord Niek

25/07/2007 11:31:00
Quote Anchor link
Ik heb eht nu anders gedaan, nu heb ik dit:

<ul>
<li>hoi</li>
<li>menu</li>
</ul>
<img src="#" />
<ul>
...
</li>

maar nu ziet het er zo uit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
menu menu menu
IMAGE
menu menu menu

maar zo moet t zijn:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
menu menu menu IMAGE menu menu menu


Iemand? (a)
 
Crazyme

Crazyme

25/07/2007 11:40:00
Quote Anchor link
Ik zou het zo doen:

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
<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;
}
Gewijzigd op 01/01/1970 01:00:00 door Crazyme
 
Lord Niek

Lord Niek

25/07/2007 11:47:00
Quote Anchor link
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
 
Crazyme

Crazyme

25/07/2007 11:49:00
Quote Anchor link
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


ik heb even mijn bericht aangepast. Zo moet je dat dus doen.
 
Lord Niek

Lord Niek

25/07/2007 11:52:00
Quote Anchor link
Hmm, dan werkt t wel, dan staat alles naast elkaar, alleen veel te ver naar links! het image moet nog wel in het midden blijven.
 
Crazyme

Crazyme

25/07/2007 11:55:00
Quote Anchor link
dan doe je het zo:

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
<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;
}
 
Lord Niek

Lord Niek

25/07/2007 12:01:00
Quote Anchor link
Maar afhankelijk van de browser, zal iedere menu iets groter of kleiner zijn. Dus een width toepassen gaat denk ik ook niet goed, is er geen 'liquid' manier?
 
Crazyme

Crazyme

25/07/2007 12:10:00
Quote Anchor link
ik denk dat je de breedte ook wel achterwegen kan laten...
 
Lord Niek

Lord Niek

25/07/2007 12:13:00
Quote Anchor link
nee, als ik de breedte achterwegen laat, krijg ik
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
dit:
                                              menu menu menu
IMAGE                                    menu menu menu
Gewijzigd op 01/01/1970 01:00:00 door Lord Niek
 
Lord Niek

Lord Niek

25/07/2007 12:51:00
Quote Anchor link
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
<!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>


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?
 



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.