Uitlijnen van het menu
Ik zit met een probleem. Het menu wat ik wil maken krijg ik niet goed uitgelijnd.
Het ziet er nu zo uit: http://i45.tinypic.com/2621cmp.jpg
En het zou er zo uit moeten zien: http://i45.tinypic.com/2mgqb7r.jpg
Dit is de html:
Quote:
<div class="menuback">
<div id="menu">
<ul>
<li><a href="/">Tekst1</a></li>
<li><a href="/">Tekst2</a></li>
<li><a href="/">Tekst3</a></li>
<li><a href="/">Tekst4</a></li>
<li><a href="/">Tekst5</a></li>
<li><a href="/">Tekst6</a></li>
<li><a href="/">Tekst7</a></li>
<li><a href="/">Tekst8</a></li>
<li><a href="/">Tekst9</a></li>
<li><a href="/">Tekst10</a></li>
<li><a href="/">Tekst11</a></li>
<li><a href="/">Tekst12</a></li>
<li><a href="/">Tekst13</a></li>
<li><a href="/">Tekst14</a></li>
<li><a href="/">Tekst15</a></li>
<li><a href="/">Tekst16</a></li>
<li><a href="/">Tekst17</a></li>
<li><a href="/">Tekst18</a></li>
</ul>
</div>
</div>
<div id="menu">
<ul>
<li><a href="/">Tekst1</a></li>
<li><a href="/">Tekst2</a></li>
<li><a href="/">Tekst3</a></li>
<li><a href="/">Tekst4</a></li>
<li><a href="/">Tekst5</a></li>
<li><a href="/">Tekst6</a></li>
<li><a href="/">Tekst7</a></li>
<li><a href="/">Tekst8</a></li>
<li><a href="/">Tekst9</a></li>
<li><a href="/">Tekst10</a></li>
<li><a href="/">Tekst11</a></li>
<li><a href="/">Tekst12</a></li>
<li><a href="/">Tekst13</a></li>
<li><a href="/">Tekst14</a></li>
<li><a href="/">Tekst15</a></li>
<li><a href="/">Tekst16</a></li>
<li><a href="/">Tekst17</a></li>
<li><a href="/">Tekst18</a></li>
</ul>
</div>
</div>
Quote:
.menuback
{
background-color: white;
height: 161px;
width: 809px;
float: left;
}
#menu ul {
list-style-type: none;
}
#menu ul li {
display: inline;
margin: 0px 2px 2px 0px;
/*border: solid 1px blue;*/
}
#menu ul li a {
padding: 0px 100px 0px 0px;
/*border: solid 1px blue;*/
background-color: #dddfdf;
font-size: 15px;
font-family: kozuka gothic pro h;
color: black;
}
#menu a:hover {
background-color: #d3d3d3;
}
{
background-color: white;
height: 161px;
width: 809px;
float: left;
}
#menu ul {
list-style-type: none;
}
#menu ul li {
display: inline;
margin: 0px 2px 2px 0px;
/*border: solid 1px blue;*/
}
#menu ul li a {
padding: 0px 100px 0px 0px;
/*border: solid 1px blue;*/
background-color: #dddfdf;
font-size: 15px;
font-family: kozuka gothic pro h;
color: black;
}
#menu a:hover {
background-color: #d3d3d3;
}
Heb het gewoon letterlijk zo van internet geplukt.
Gewijzigd op 21/07/2012 13:35:19 door Ruben Fonteijne
Heb je een online voorbeeld?
En wordt je CSS uberhaupt wel meegenomen? Want daar lijkt mij het fout te gaan.
En je zou je padding iets groter moeten zetten op #menu ul li a.
Beter kan je het trouwens gewoon zo benoemen: #menu a. Minder foutgevoelig als je later weer eens een <ol> wil gaan gebruiken oid.
En haal die tabel weg!
Maar goed, je wilt natuurlijk een stoplap. Je kunt je <a>'s op display: block zetten.
En wat je doet met die tabellen en <ul> en dan <li> is echt onzin. Waar heb je die troep vandaan? Voor 20 knoppen gebruik je nu al belachelijk veel code (de <ul> en <li> kunnen zelfs gewoon weg)
Gewijzigd op 21/07/2012 13:31:33 door Eddy E
Kan alleen nergens een fout vinden?
Heb met de codes van Eddy het nu wel goed gekregen, maar wil graag dat het hele blokje klikbaar is, niet alleen de tekst die erin komt. Is dat mogelijk?
Maar lukt kopiëren niet?
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
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
<div class="menuback">
<div id="menu">
<ul>
<li><a href="/alm/" title="Ag2r">Tekst1</a></li>
<li><a href="/alm/" title="Astana">Tekst2</a></li>
<li><a href="/alm/" title="BMC">Tekst3</a></li>
<li><a href="/alm/" title="Euskaltel">Tekst4</a></li>
<li><a href="/alm/" title="FDJ">Tekst5</a></li>
<li><a href="/alm/" title="Home">Tekst6</a></li>
<li><a href="/alm/" title="Home">Tekst7</a></li>
<li><a href="/alm/" title="Home">Tekst8</a></li>
<li><a href="/alm/" title="Home">Tekst9</a></li>
<li><a href="/alm/" title="Home">Tekst10</a></li>
<li><a href="/alm/" title="Home">Tekst11</a></li>
<li><a href="/alm/" title="Home">Tekst12</a></li>
<li><a href="/alm/" title="Home">Tekst13</a></li>
<li><a href="/alm/" title="Home">Tekst14</a></li>
<li><a href="/alm/" title="Home">Tekst15</a></li>
<li><a href="/alm/" title="Home">Tekst16</a></li>
<li class="two_columns"><a href="/alm/" title="Home">Tekst17</a></li>
<li class="two_columns"><a href="/alm/" title="Home">Tekst18</a></li>
</ul>
</div>
</div>
.menuback
{
background-color: white;
height: 161px;
width: 809px;
float: left;
}
#menu ul {
list-style-type: none;
}
#menu ul li {
display: block;
}
#menu ul li a {
font-size: 15px;
font-family: kozuka gothic pro h;
color: black;
}
/* Gewijzigd */
#menu ul li a:hover
{
background-color: #d3d3d3;
}
/* dit heb ik toegevoegd */
#menu ul li
{
float: left;
text-align: center;
}
#menu ul li.two_columns a
{
width: 280px; /* 2*width*/
}
#menu ul li a
{
text-decoration: none;
display: block;
color: #777;
font-size: 90%;
height: 100%;
width: 140px;
background-color: #dddfdf;
padding: 5px;
box-sizing: border-box;
border: 1px solid #fff;
}
<div id="menu">
<ul>
<li><a href="/alm/" title="Ag2r">Tekst1</a></li>
<li><a href="/alm/" title="Astana">Tekst2</a></li>
<li><a href="/alm/" title="BMC">Tekst3</a></li>
<li><a href="/alm/" title="Euskaltel">Tekst4</a></li>
<li><a href="/alm/" title="FDJ">Tekst5</a></li>
<li><a href="/alm/" title="Home">Tekst6</a></li>
<li><a href="/alm/" title="Home">Tekst7</a></li>
<li><a href="/alm/" title="Home">Tekst8</a></li>
<li><a href="/alm/" title="Home">Tekst9</a></li>
<li><a href="/alm/" title="Home">Tekst10</a></li>
<li><a href="/alm/" title="Home">Tekst11</a></li>
<li><a href="/alm/" title="Home">Tekst12</a></li>
<li><a href="/alm/" title="Home">Tekst13</a></li>
<li><a href="/alm/" title="Home">Tekst14</a></li>
<li><a href="/alm/" title="Home">Tekst15</a></li>
<li><a href="/alm/" title="Home">Tekst16</a></li>
<li class="two_columns"><a href="/alm/" title="Home">Tekst17</a></li>
<li class="two_columns"><a href="/alm/" title="Home">Tekst18</a></li>
</ul>
</div>
</div>
.menuback
{
background-color: white;
height: 161px;
width: 809px;
float: left;
}
#menu ul {
list-style-type: none;
}
#menu ul li {
display: block;
}
#menu ul li a {
font-size: 15px;
font-family: kozuka gothic pro h;
color: black;
}
/* Gewijzigd */
#menu ul li a:hover
{
background-color: #d3d3d3;
}
/* dit heb ik toegevoegd */
#menu ul li
{
float: left;
text-align: center;
}
#menu ul li.two_columns a
{
width: 280px; /* 2*width*/
}
#menu ul li a
{
text-decoration: none;
display: block;
color: #777;
font-size: 90%;
height: 100%;
width: 140px;
background-color: #dddfdf;
padding: 5px;
box-sizing: border-box;
border: 1px solid #fff;
}
Gewijzigd op 21/07/2012 14:18:26 door Eddy E
Het is de bedoeling dat het menu boven het zwarte lijntje blijft en binnen het witte vlak.
Toevoeging op 21/07/2012 14:40:04:
Het is me gelukt. Kunnen jullie me dan ook nog vertellen hoe ik de tekst precies in het midden zet? Van links naar rechts staat ie in het midden, maar van boven naar beneden niet helemaal.
http://i49.tinypic.com/2eyhrvr.jpg
http://jsfiddle.net/42GnR/7/
Edit: en dan heb je meteen dat het hele vlakje een link wordt en niet alleen de tekst.
Gewijzigd op 21/07/2012 14:42:16 door Jan Koehoorn
Code (php)
1
2
2
<li><a href="tekst1.html" title="tekst 1">Tekst1</a></li>
<li><a href="tekst2.html" title="tekst 2">Tekst2</a></li>
<li><a href="tekst2.html" title="tekst 2">Tekst2</a></li>
Ga je het met php doen kan je de pagina's includen.
Wil je echt static html maken dan moet je alles bij elkaar zetten.
Of met frames gaan werken, maar dat is niet aan te raden..