17 svar · 848 visningar · startad av ptr_lks
Jag har en div med meny där jag har 9 länkar.
.menu a {
margin-right:2em; (eller vad du nu vill ha för vidd emellan länkarna)
height: 20px;
display: block;
text-decoration: none;
color: #fff;
background: #283a86;
}
tanten skrev:
.menu a {
margin-right:2em; (eller vad du nu vill ha för vidd emellan länkarna)
height: 20px;
display: block;
text-decoration: none;
color: #fff;
background: #283a86;
}
tack, men jag får inte till det hela...
nu får jag istället menyn på 2 rader...
Har tyvärr ingen möjlighet att slänga upp sidan online
Det är det som är lite av poängen med em som fontstorlek. Att folk ska kunna förstora menytexten. Om du ändrar din webläsares textstorlek så ser du skillnaden.
Ändra till px i stället om du tycker det är bättre. :-)
Jag skulle nog ändra till:
.menu li {
display:inline; /* Istället för float:left; */
..../* fortsättning av din övriga css */
och:
.menu a {
padding-left:10px; /* Eller valfritt värde */
padding-right:10px;
/* Ta bort display:block; som gör länkarna till block-element */
..../* fortsättning av din övriga css */
Ingen av lösningarna fungerar tyvärr.
För att vara säker på att jag har förstått respektive förslag, så bifogar jag koderna + skärmdump
.menu a kan du ändra "width" till t ex 80 px, sedan får du nog ändra "height" i #menu ul till ca 30 px ( men undvik helst pixlar och ta em eller % istället )
I min skrev jag att du skulle ta bort vidden helt, den har du kvar...:-)
får ändå inte till det*river håret*
som ni ser, så blir det inte bra i i IE (ej centrerad + ej inline)
i FF bättre, men inte hellt bra
ptr_lks skrev:
får ändå inte till det*river håret*
bl i IE blir det inte inline, utan undervarandra
Om det blir under varandra beror det väl på display:block; istället för inline.
Vad blev det för fel när du använde "nidrons kod"? Förstår nog inte riktigt vad du vill göra längre =o)
Om du vill centrera menyn horisontellt, släng in en text-align: center; i #menu ul .
nidron skrev:
Vad blev det för fel när du använde "nidrons kod"? Förstår nog inte riktigt vad du vill göra längre =o)
Jag vill ha det som på denna sida fast med ytterligare en länk längst till höger
Felet med "nidrons kod" är i IE (titta på skärm-dumpen) - länkarna i 2 rader
nu har jag ändrat till
display:inline;
#menu ul {
text-align: center;
}
nu är problemet att hela #container är "align:left" i IE, men som det skall dvs centrerad i FF
<!-- #include virtual="/includes/dbkoppling.asp" -->
<!-- #include virtual="/includes/koll_inloggning.asp" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titel</title>
<style type="text/css">
*{margin:0; padding:0;}
html,body{
height: 100%;
background-color:#000066;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000033;
text-align:center;
}
#container {
width: 742px;
min-height: 95%;
margin:0 auto;
background-color:#FFFFFF;
}
#header {
height:auto;
background-color:#FFF;
}
#header h1 {
text-align:center;
color: #000066;
padding: 0 0 3px 0;
}
#menu{
width: 100%;
background-color: #283a86;
font-size:90%;
}
#menu ul {
margin: 0;
height: 30px;
padding: 0;
list-style-type: none;
width: 100%; /* precision for Opera */
}
.menu li {
float: left;
width: auto;
height: 20px;
}
.menu a {
margin: 0 0px;
width: 80px;
height: 20px;
display: block;
text-align: center;
border: 0px solid gray;
text-decoration: none;
color: white;
background: #283a86;
}
#lenk{
width: 95%;
padding-top: 15px;
padding-bottom: 30px;
margin-right: auto;
margin-left: auto;
text-align: left;
}
#visa{
width: 95%;
padding-top: 15px;
padding-bottom: 30px;
margin-right: auto;
margin-left: auto;
text-align: left;
}
#lenk p, #lenk ul{
text-align:center;
}
#lenk li{
text-align:center;
}
#sidotext{width: 50%;
float:left;
background-color:#FFFFFF;
margin: 30px 0 0 200px;}
#sidotext p{color:#000000; text-align:left; padding:5px;}
.menu a:hover {
background: #283a86;
color: #ff0;
border: 0;
}
#content img{
border: none;
}
.menu a:active {
background: #ff0;
color: #006;
border: 0;
}
#content {
width: 100%;
text-align:left;
padding: 0 0 0 0;
}
#content h2{
text-align:center;
color:#fc0
}
#content a:link {color:#000; text-decoration: underline; font-size:120%;}
#content a:visited {color:#000; text-decoration: underline; font-size:120%;}
#content a:active {color:#000; text-decoration: underline; font-size:120%;}
#content a:hover {color:#006; text-decoration: none; font-size:120%;}
#fot {
width: 742px;
margin-right: auto;
margin-left: auto;
background-color:#006;
}
#fot p {
text-align:center;
color:#FFF;
padding: 5px 0 0 0;
}
.link {
font-size: 120%;
text-align:center;
padding:25px 0 0 0;}
.meddelande {
font-size: 90%;
font-weight: bold;
font-style:italic;
text-align:left;}
.av {
font-weight:bold;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><img src="loggo.jpg" alt="loggo" />
<h1>Pojkar p93´s hemsida</h1>
</div>
<div id="menu">
<ul class="menu">
<li><a href="index.html">Hem</a></li>
<li><a href="trupp.htm">Truppen</a></li>
<li><a href="coach.asp">Coachens sida</a></li>
<li><a href="matcher.htm">Matcher</a></li>
<li><a href="tid.htm">Träningstider</a></li>
<li><a href="galleri.htm">Galleri</a></li>
<li><a href="ink1.htm">Länkar</a></li>
<li><a href="gbok.asp">Gästbok</a></li>
<li><a href="chatt.asp">Chatten</a></li>
</ul>
</div>
<div id="content">
<div id="visa">
</div>
</div></div>
<div id="fot"><p>Webmaster: Peter <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.polisenbasket-p93.se/mall_visa.asp" target="_blank"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.polisenbasket-p93.se%2Fmall_visa.asp" target="_blank"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></p>
</div>
</body>
</html>
du får väl prova...........
.menu a {
margin: 0 10px;
height: 20px;
display: inline;
text-align: center;
text-decoration: none;
color: white;
background: #283a86;
}
tanten skrev:
.menu a {
margin: 0 10px;
height: 20px;
display: inline;
text-align: center;
text-decoration: none;
color: white;
background: #283a86;
}
de olika länkarna är ihoptryckta i både IE & FF
och ocentrerad i IE
webbebba skrev:
[du får väl prova...........
tack och bock..
snyggt, det enda "fel" är att "coachens sida" hamnar på 2 rader
På min dator ser det helt ok ut i alla webläsare, så nu vet jag inte...
Har du gjort någon annan ändring i koden än den sida du visade däruppe förut http://www.polisenbasket-p93.se/mall.asp för det är med den som jag gjorde ändringen.
tanten skrev:
På min dator ser det helt ok ut i alla webläsare, så nu vet jag inte...
Har du gjort någon annan ändring i koden än den sida du visade däruppe förut http://www.polisenbasket-p93.se/mall.asp för det är med den som jag gjorde ändringen.
kommer inte riktigt ihåg, och har tyvärr ingen möjlighet att kolla här på jobbet.
Men den senaste sidan som är uppe