---
title: "hjälp med editera horizontell meny"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/138987-hjälp-med-editera-horizontell-meny"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "ptr_lks"
published: "2005-12-08T07:01:25.000Z"
updated: "2005-12-08T10:47:37.000Z"
replies: 17
views: 851
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/138987-hjälp-med-editera-horizontell-meny"
---

# hjälp med editera horizontell meny

## #1 — ptr_lks, 2005-12-08T07:01Z

Jag har en div med meny där jag har 9 länkar.

1. de 9 länkarna vill jag ha på samma rad
2. hur kan jag justera bredden på de enskilda länkarna?

Bilagor:

- [meny.txt](https://www.webforum.nu/a/8747.txt)

Permalänk: https://www.webforum.nu/p/138987

## #2 — tanten, 2005-12-08T07:59Z

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

Permalänk: https://www.webforum.nu/p/1723287

## #3 — ptr_lks, 2005-12-08T08:08Z

> **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

Permalänk: https://www.webforum.nu/p/1723289

## #4 — tanten, 2005-12-08T08:17Z

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. :-)

Permalänk: https://www.webforum.nu/p/1723294

## #5 — nidron, 2005-12-08T08:18Z

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 \*/

Permalänk: https://www.webforum.nu/p/1723295

## #6 — ptr_lks, 2005-12-08T09:15Z

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

Bilagor:

- [menu_tanten.txt](https://www.webforum.nu/a/8750.txt)
- [meny_nidron.txt](https://www.webforum.nu/a/8751.txt)
- [ie_nidron.GIF](https://www.webforum.nu/a/8752.gif)
- [tanten_ie.GIF](https://www.webforum.nu/a/8753.gif)
- [ff_nidron.GIF](https://www.webforum.nu/a/8754.gif)

Permalänk: https://www.webforum.nu/p/1723311

## #7 — webbebba, 2005-12-08T09:44Z

.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 )

Permalänk: https://www.webforum.nu/p/1723325

## #8 — tanten, 2005-12-08T09:48Z

I min skrev jag att du skulle ta bort vidden helt, den har du kvar...:-)

Permalänk: https://www.webforum.nu/p/1723326

## #9 — ptr_lks, 2005-12-08T09:57Z

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

Bilagor:

- [reviderat.txt](https://www.webforum.nu/a/8755.txt)

Permalänk: https://www.webforum.nu/p/1723329

## #10 — nidron, 2005-12-08T10:03Z

> **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 .

Permalänk: https://www.webforum.nu/p/1723332

## #11 — ptr_lks, 2005-12-08T10:11Z

> **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](http://www.polisenbasket-p93.se/mall.asp) 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

Permalänk: https://www.webforum.nu/p/1723333

## #12 — ptr_lks, 2005-12-08T10:23Z

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

Permalänk: https://www.webforum.nu/p/1723335

## #13 — webbebba, 2005-12-08T10:26Z

```
<!-- #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&auml;ningstider</a></li>
<li><a href="galleri.htm">Galleri</a></li>
<li><a href="ink1.htm">L&auml;nkar</a></li>
<li><a href="gbok.asp">G&auml;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 &nbsp;&nbsp;<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...........

Permalänk: https://www.webforum.nu/p/1723338

## #14 — tanten, 2005-12-08T10:27Z

.menu a {
margin: 0 10px;
height: 20px;
display: inline;
text-align: center;
text-decoration: none;
color: white;
background: #283a86;
}

Permalänk: https://www.webforum.nu/p/1723339

## #15 — ptr_lks, 2005-12-08T10:28Z

> **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

Permalänk: https://www.webforum.nu/p/1723341

## #16 — ptr_lks, 2005-12-08T10:43Z

> **webbebba skrev:**
>
> \[du får väl prova...........

tack och bock..
snyggt, det enda "fel" är att "coachens sida" hamnar på 2 rader

Permalänk: https://www.webforum.nu/p/1723347

## #17 — tanten, 2005-12-08T10:44Z

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.

Permalänk: https://www.webforum.nu/p/1723348

## #18 — ptr_lks, 2005-12-08T10:47Z

> **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](http://www.polisenbasket-p93.se/mall_visa2.asp)

Permalänk: https://www.webforum.nu/p/1723349

---

Tråden på webben: https://www.webforum.nu/amne/html-css/138987-hjälp-med-editera-horizontell-meny