Uitlijnen van het menu

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

Ruben Fonteijne

Ruben Fonteijne

21/07/2012 12:07:22
Quote Anchor link
Goeiemorgen,

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>

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


Heb het gewoon letterlijk zo van internet geplukt.
Gewijzigd op 21/07/2012 13:35:19 door Ruben Fonteijne
 
PHP hulp

PHP hulp

18/11/2024 10:53:31
 
Eddy E

Eddy E

21/07/2012 12:53:50
Quote Anchor link
Ja, dat is duidelijk.
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.
 
Ruben Fonteijne

Ruben Fonteijne

21/07/2012 13:04:41
Quote Anchor link
Heb helaas geen online voorbeeld. CSS wordt wel gewoon meegenomen, want als ik padding verander, verandert dat ook in de preview.
 
Eddy E

Eddy E

21/07/2012 13:16:18
Quote Anchor link
Fix je HTML eerst eens normaal.
En haal die tabel weg!
 
Jan Koehoorn

Jan Koehoorn

21/07/2012 13:17:25
Quote Anchor link
Sorry, maar deze code is echt heel slordig. Tabellen en lijsten door elkaar gebruiken is nooit nodig.

Maar goed, je wilt natuurlijk een stoplap. Je kunt je <a>'s op display: block zetten.
 
Eddy E

Eddy E

21/07/2012 13:30:24
Quote Anchor link
Nou, ik had er even zin in: http://jsfiddle.net/42GnR/2/


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
 
Ruben Fonteijne

Ruben Fonteijne

21/07/2012 13:39:33
Quote Anchor link
Wow bedankt Eddy! Probleem is nu dat ik het niet kan opslaan. Reason: Some characters cannot be mapped using "Cp1252" character encoding. Either change the encoding or remove the characters which are not supported by de "Cp1252" character encoding.

Kan alleen nergens een fout vinden?
 
Wouter J

Wouter J

21/07/2012 13:43:28
Quote Anchor link
Ruben, dat komt omdat jsfiddle wat vreemde character toevoegt. Je moet het dus helaas over gaan typen.
 
Ruben Fonteijne

Ruben Fonteijne

21/07/2012 13:45:06
Quote Anchor link
Vandaar. Bedankt voor de hulp!
 
Wouter J

Wouter J

21/07/2012 13:51:02
Quote Anchor link
Ik zou hier trouwens gewoon een grid systeem voor gaan gebruiken.
 
Ruben Fonteijne

Ruben Fonteijne

21/07/2012 14:00:49
Quote Anchor link
@Wouter J en wat is dat precies? Sorry, heb er niet heel veel verstand van.

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?
 
Wouter J

Wouter J

21/07/2012 14:08:30
Quote Anchor link
Ja, de anchor (<a>) display: block; maken en 100% hoog en 100% breedt
 
Eddy E

Eddy E

21/07/2012 14:15:07
Quote Anchor link
Heb het even samengevoegd: http://jsfiddle.net/42GnR/5/

Maar lukt kopiëren niet?

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
<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;    
}
Gewijzigd op 21/07/2012 14:18:26 door Eddy E
 
Ruben Fonteijne

Ruben Fonteijne

21/07/2012 14:25:17
Quote Anchor link
Nu springt ie heel raar weg. Resultaat: http://tinypic.com/r/2cmka4l/6

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
 
Jan Koehoorn

Jan Koehoorn

21/07/2012 14:40:36
Quote Anchor link
De CSS kan veel simpeler. Voorbeeldje:
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
 
Ruben Fonteijne

Ruben Fonteijne

21/07/2012 14:51:48
Quote Anchor link
Dat is inmiddels gelukt. Het gaat er nu nog om dat de tekst precies in het midden van het vakje komt te staan.
 
Jan Koehoorn

Jan Koehoorn

21/07/2012 15:05:38
 
Ruben Fonteijne

Ruben Fonteijne

21/07/2012 15:15:49
Quote Anchor link
Bedankt, Jan! Ik ga jullie toch nog 1x lastig vallen. De header en het menu staan nu goed, maar hoe link ik de pagina's met het menu? Dus als ik op tekst 1 klik, dat ik onder het menu pagina tekst1.html krijg. Als ik dan weer op tekst 2 klik, dat ik dan tekst2.html zie. Een tutorial op kan ik niet vinden..
 
Bart V B

Bart V B

21/07/2012 15:19:59
Quote Anchor link
Dat is toch niet zo moeilijk??

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
<li><a href="tekst1.html" title="tekst 1">Tekst1</a></li>
 <li><a href="tekst2.html" title="tekst 2">Tekst2</a></li>
 
Ruben Fonteijne

Ruben Fonteijne

21/07/2012 15:25:25
Quote Anchor link
Ja dat snap ik, maar ik wil graag een vaste header/menu. Alleen de onderkant moet dus veranderen. Of moet ik dan gewoon de header en het menu bij elke pagina toevoegen?
 
Bart V B

Bart V B

21/07/2012 15:27:25
Quote Anchor link
Dat hangt er vanaf wat je wil.
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..
 

Pagina: 1 2 volgende »



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.