/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
CSS dropdown menu med forskellig fontstørr~
Fra : Birgitte Sørensen


Dato : 18-10-11 21:18

Jeg anvender en css menu som er fin og enkel, men ville gerne
have at menuunderpunkterne var med en mindre font. Kan det lade
sig gøre?

Menuen:

i html:

<ul id="menu">
<li><a href="index.html">Accueil</a></li>
<li><a href="tableaux-2.html">Tableaux</a>
<ul>
<li><a href="tableaux.html">Messages Personnel</a></li>
<li><a href="tableaux-3.html">Portraits I</a></li>
   <li><a href="tableaux-5.html">Portraits II</a></li>
<li><a href="tableaux-4.html">Portraits III</a></li>
</ul>
</li>
<li><a href="sculptures-1.html">Sculptures</a>
<ul>
<li><a href="sculptures-2">Portraits</a></li>
</ul>
</li>
<li><a href="artiste.html">L'artiste</a></li>
<li><a href="actualite.html">Actualité</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

i css style sheet:


ul {
font-family: times new roman;
font-size: 21px;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
padding-left: 21px;
padding-right: 21px;
}
li ul { display: none;
      }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
font-size: 21px;
border-top: 0px solid #ffffff;
padding: 10x 10px 10px 10px;
background: #5f5f5f;
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover { color: #c0c0c0; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 21px;
}
li:hover a { color: #c0c0c0; }
li:hover li a:hover { color: #c0c0c0; }

Venligste hilsner
Birgitte


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Karl Erik Christense~ (18-10-2011)
Kommentar
Fra : Karl Erik Christense~


Dato : 18-10-11 21:37

On 18-10-2011 22:18, Birgitte Sørensen wrote:
> Jeg anvender en css menu som er fin og enkel, men ville gerne
> have at menuunderpunkterne var med en mindre font. Kan det lade
> sig gøre?
>
> Menuen:
>
> i html:
>
> <ul id="menu">
> <li><a href="index.html">Accueil</a></li>
> <li><a href="tableaux-2.html">Tableaux</a>
> <ul>
> <li><a href="tableaux.html">Messages Personnel</a></li>
> <li><a href="tableaux-3.html">Portraits I</a></li>
>    <li><a href="tableaux-5.html">Portraits II</a></li>
> <li><a href="tableaux-4.html">Portraits III</a></li>
> </ul>
> </li>
> <li><a href="sculptures-1.html">Sculptures</a>
> <ul>
> <li><a href="sculptures-2">Portraits</a></li>
> </ul>
> </li>
> <li><a href="artiste.html">L'artiste</a></li>
> <li><a href="actualite.html">Actualité</a></li>
> <li><a href="contact.html">Contact</a></li>
> </ul>
>
> i css style sheet:
>
>
> ul {
> font-family: times new roman;
> font-size: 21px;
> list-style: none;
> }
> ul li {
> display: block;
> position: relative;
> float: left;
> padding-left: 21px;
> padding-right: 21px;
> }
> li ul { display: none;
>       }
> ul li a {
> display: block;
> text-decoration: none;
> color: #ffffff;
> font-size: 21px;
> border-top: 0px solid #ffffff;
> padding: 10x 10px 10px 10px;
> background: #5f5f5f;
> margin-left: 0px;
> white-space: nowrap;
> }
> ul li a:hover { color: #c0c0c0; }
> li:hover ul {
> display: block;
> position: absolute;
> }
> li:hover li {
> float: none;
> font-size: 21px;
> }
> li:hover a { color: #c0c0c0; }
> li:hover li a:hover { color: #c0c0c0; }
>
> Venligste hilsner
> Birgitte
>

Ser du de steder hvor der i din css-fil står font-size?

Prøv at sætte et lavere tal ind der

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://produceret-i.dk/ - Køb danske produkter
http://webdesign.ranunkelvej.com - Artikler om webdesign

Birgitte Sørensen (18-10-2011)
Kommentar
Fra : Birgitte Sørensen


Dato : 18-10-11 21:43


> Ser du de steder hvor der i din css-fil står font-size?
>
> Prøv at sætte et lavere tal ind der
>
> Karl Erik.
>
> --
> http://dmwebdesign.dk - DM i Webdesign
> http://produceret-i.dk/ - Køb danske produkter
> http://webdesign.ranunkelvej.com - Artikler om webdesign
Har jeg gjort og ændret font størrelse og type generelt, men jeg
kan ikke få forskellig størrelse på overmenu og undermenu...

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Karl Erik Christense~ (18-10-2011)
Kommentar
Fra : Karl Erik Christense~


Dato : 18-10-11 21:44

On 18-10-2011 22:36, Karl Erik Christensen wrote:

> Ser du de steder hvor der i din css-fil står font-size?
>
> Prøv at sætte et lavere tal ind der
>
> Karl Erik.
>

Du bør sætte #menu foran - f.eks.

#menu ul {

#menu ul li {

osv.

Derved undgår du at andre ul lister styles på samme måde.

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://produceret-i.dk/ - Køb danske produkter
http://webdesign.ranunkelvej.com - Artikler om webdesign

Ib K. Jensen (18-10-2011)
Kommentar
Fra : Ib K. Jensen


Dato : 18-10-11 21:41

Den 18-10-2011 22:18, Birgitte Sørensen skrev:
> Jeg anvender en css menu som er fin og enkel, men ville gerne
> have at menuunderpunkterne var med en mindre font. Kan det lade
> sig gøre?
>
> Menuen:

> i css style sheet:
> ul {
> font-family: times new roman;
> font-size: 21px; <---
> list-style: none;
> }
> ul li {
> display: block;
> position: relative;
> float: left;
> padding-left: 21px;
> padding-right: 21px;
> }
> li ul { display: none;
>       }
> ul li a {
> display: block;
> text-decoration: none;
> color: #ffffff;
> font-size: 21px; <---
> border-top: 0px solid #ffffff;
> padding: 10x 10px 10px 10px;
> background: #5f5f5f;
> margin-left: 0px;
> white-space: nowrap;
> }
> ul li a:hover { color: #c0c0c0; }
> li:hover ul {
> display: block;
> position: absolute;
> }
> li:hover li {
> float: none;
> font-size: 21px; <---
> }
> li:hover a { color: #c0c0c0; }
> li:hover li a:hover { color: #c0c0c0; }

Et forsøg var at slette de font-størrelser du har angivet, markeret med <--

Og erstatte dem med en class

fx

li.stor {font-size: 21px;}
li.lille {font-size: 16px;}

og indsætte dem der hvor du har brug for dem.


Med venlig hilsen
Ib


--
Ib K. Jensen :: www.ibkjensen.org
Only a Genealogist regards a step backwards as progress.

Dennis Munding (19-10-2011)
Kommentar
Fra : Dennis Munding


Dato : 19-10-11 00:16

Hej Birgitte

"Birgitte Sørensen" skrev...
> Jeg anvender en css menu som er fin og enkel, men ville gerne
> have at menuunderpunkterne var med en mindre font. Kan det lade
> sig gøre?

Ja!

HTML:
<ul id="menu">
<li><a href="index.html">Accueil</a></li>
<li><a href="tableaux-2.html">Tableaux</a>
<ul class="sub"> <--------------------------------------- ÆNDRET
<li><a href="tableaux.html">Messages Personnel</a></li>
<li><a href="tableaux-3.html">Portraits I</a></li>
<li><a href="tableaux-5.html">Portraits II</a></li>
<li><a href="tableaux-4.html">Portraits III</a></li>
</ul>
</li>
<li><a href="sculptures-1.html">Sculptures</a>
<ul class="sub"> <--------------------------------------- ÆNDRET
<li><a href="sculptures-2">Portraits</a></li>
</ul>
</li>
<li><a href="artiste.html">L'artiste</a></li>
<li><a href="actualite.html">Actualité</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

CSS: (Jeg har tilladt mig at rydde en smule op i din kode og optimere den en
anelse...)
ul#menu {
font-family:'Times New Roman', serif;
font-size:21px;
list-style:none;
}
ul#menu li {
display:block;
position:relative;
float:left;
padding-left:21px;
padding-right:21px;
}
ul#menu li ul {display:none;}
ul#menu li a {
display:block;
text-decoration:none;
color:#fff;
border-top:none;
padding:10px;
background:#5f5f5f;
margin-left:0;
white-space:nowrap;
}
ul#menu li:hover ul.sub {
display:block;
position:absolute;
font-size:17px;
}
ul#menu li:hover li {float:none;}
li:hover a, li:hover li a:hover, ul#menu li a:hover {
color:#c0c0c0;
}


Med venlig hilsen
--
Dennis Munding
a.k.a. The Eye - Member of the PosseGrim Squad
http://pgsquad.com/
"When you hear the wind - you're already dead..."


Birgitte Sørensen (19-10-2011)
Kommentar
Fra : Birgitte Sørensen


Dato : 19-10-11 11:54

Dennis Munding wrote in dk.edb.internet.webdesign.html:
> Hej Birgitte
>
> "Birgitte Sørensen" skrev...
> > Jeg anvender en css menu som er fin og enkel, men ville gerne
> > have at menuunderpunkterne var med en mindre font. Kan det lade
> > sig gøre?
>
> Ja!
>
> HTML:
> <ul id="menu">
> <li><a href="index.html">Accueil</a></li>
> <li><a href="tableaux-2.html">Tableaux</a>
> <ul class="sub"> <--------------------------------------- ÆNDRET
> <li><a href="tableaux.html">Messages Personnel</a></li>
> <li><a href="tableaux-3.html">Portraits I</a></li>
> <li><a href="tableaux-5.html">Portraits II</a></li>
> <li><a href="tableaux-4.html">Portraits III</a></li>
> </ul>
> </li>
> <li><a href="sculptures-1.html">Sculptures</a>
> <ul class="sub"> <--------------------------------------- ÆNDRET
> <li><a href="sculptures-2">Portraits</a></li>
> </ul>
> </li>
> <li><a href="artiste.html">L'artiste</a></li>
> <li><a href="actualite.html">Actualité</a></li>
> <li><a href="contact.html">Contact</a></li>
> </ul>
>
> CSS: (Jeg har tilladt mig at rydde en smule op i din kode og optimere den en
> anelse...)
> ul#menu {
> font-family:'Times New Roman', serif;
> font-size:21px;
> list-style:none;
> }
> ul#menu li {
> display:block;
> position:relative;
> float:left;
> padding-left:21px;
> padding-right:21px;
> }
> ul#menu li ul {display:none;}
> ul#menu li a {
> display:block;
> text-decoration:none;
> color:#fff;
> border-top:none;
> padding:10px;
> background:#5f5f5f;
> margin-left:0;
> white-space:nowrap;
> }
> ul#menu li:hover ul.sub {
> display:block;
> position:absolute;
> font-size:17px;
> }
> ul#menu li:hover li {float:none;}
> li:hover a, li:hover li a:hover, ul#menu li a:hover {
> color:#c0c0c0;
> }
>
>
> Med venlig hilsen
> --
> Dennis Munding
> a.k.a. The Eye - Member of the PosseGrim Squad
> http://pgsquad.com/
> "When you hear the wind - you're already dead..."
>

Tusind tak Dennis - det blev supergodt!!!

Venlige hilsner
Birgitte


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408914
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste