---
title: "Positioneringsproblem av horisontell list meny"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/179355-positioneringsproblem-av-horisontell-list-meny"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Pedda"
published: "2009-07-10T21:08:32.000Z"
updated: "2009-07-12T12:47:24.000Z"
replies: 13
views: 1802
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/179355-positioneringsproblem-av-horisontell-list-meny"
---

# Positioneringsproblem av horisontell list meny

## #1 — Pedda, 2009-07-10T21:08Z

Hur får man egentligen en horisontell lista att skippa indrag mm?
Svårt att förklara så jag bifogar en bild istället så ni kanske förstår.
CSS:

```
#wrapper {
	width: 800px;
	text-align: center;
	margin: 0 auto;
}
.firstnavlist {
	clear: both;
	float: left;
	margin: 0;
	padding: 0;
	text-align: left;
}
#menu ul{ 
	float: left; 
	margin-left: 0; 
	padding-left: 0; 
	width: 100%; 
	display: block;
}
#menu li {
	display: inline; 
	margin: 0;
	padding: 0;
	float: left;
}
```

index sida:

```
<div id="wrapper">
	<!-- TOPBAR -->
	<div id="topbar">
	  ... logo mm här
    </div>
    <!-- MENY -->
    <div class="firstnavlist">
      <ul id="menu">
          <li>... några li här</li>
      </ul>
    </div>
</div>
```

Bilagor:

- [200907-138_menyfel.png](https://www.webforum.nu/a/20513.png)

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

## #2 — rhdf, 2009-07-10T22:03Z

snabbaste lösningen:
man lägger in en reset-css överst i sin egen css som "nollställer" alla defaultvärden på margins mm  <http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/>

sen har du lite lustigheter i din kod
1 #menu ul{ tolkas som en UL i ett omgivande element som heter menu
korrekt är väl i såfall ul#menu, men det bör gå lika bra med bara #menu

2 \<div class="firstnavlist"\> varför klass här? har du flera firstnavlist?

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

## #3 — tanten, 2009-07-11T03:33Z

```
<div id="menu">
      <ul>
          <li>... några li här</li>
      </ul>
    </div>
```

döp om .firstnavlist till

```php
#menu{
	clear: both;
	float: left;
	margin: 0;
	padding: 0;
	text-align: left;
}
```

**Edit** Förlåt rhdf, ser nu att du skrev samma lösning...

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

## #4 — tanten, 2009-07-11T08:00Z

såg din skiss på kolla min hemsida
Har en mycket liknande meny som du kanske kan få någon idé från. 

```
#menu #current{color:#000;background:url(bilder/bild.jpg) #fff  left;}
#menu a{padding:8px 40px;border-right:1px solid #000;display:block;color:#fff;background: #4169e1;text-decoration:none;text-align:center;text-transform:uppercase;font-size:100%;}
#menu a:hover{color: #000;background: #eee8aa url(bilder/bild.jpg) left;}
#menu li{float:left;width:auto;height:auto;}
#menu ul{padding:0%;width:auto;list-style-type:none;}
```

och

```
<div id="menu">
      <ul>
          <li><a href="#">Hem</a></li>
			 <li><a id="current" href="#">undersökningar</a></li>
			 <li><a href="#">Kontakta oss</a></li>
      </ul>
    </div>
```

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

## #5 — Pedda, 2009-07-11T09:51Z

klassen firstnavlist hängde kvar från att jag byggde menyn på ett annat sätt tidigare.

Har ändrat nu efter era förslag och nu hamnar den till vänster som den ska, men fortfarande för långt ner.

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

## #6 — tanten, 2009-07-11T10:02Z

Om du fortfarnde får ett avstånd om du lägger till

```
div,ul,li,a{margin:0;padding:0;}
img{border:none;margin:0;padding:0;}
```

Så får du visa hur du får dit dina bilder.

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

## #7 — Pedda, 2009-07-11T10:17Z

Såg nu att jag bara satt margin-left och padding-left till 0 på min ul, så det var jag som hade klavtat mig.
Nu funkar det som det ska.

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

## #8 — Pedda, 2009-07-11T10:57Z

> **[Pedda skrev:](https://www.webforum.nu/p/1473435)**
>
> Nu funkar det som det ska.

Det var visst inte riktigt sant.

I IE hamnar menyn 1px längre ner. Har ni något tips på vad det är som kan göra det?

CSS:

```
body, html {
	background-attachment: scroll;
	background-color: #FFFFFF;
	background-image: url(gfx/body_bg.png);
	background-repeat: repeat-x;
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 0.9em;
}
#topbar {
	float: left;
	margin: 0;
	padding: 0;
}
#wrapper {
	width: 760px;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}
#contact {
	color: #FFFFFF;
	text-align: right;
	padding-top: 20px;
	margin: 0 auto;	
}
#menu {
	clear: both;
	float: left;
	margin: 0;
	padding: 0;
	text-align: left;
}
#menu ul{ 
	float: left; 
	margin: 0; 
	padding: 0; 
	width: 100%; 
	list-style: none;
}
#menu li {	
	margin: 0;
	padding: 0;
	float: left;
}
```

HTML:

```
<!-- WRAPPER -->
<div id="wrapper">
	<!-- TOPBAR -->
	<div id="topbar">
	  <img src="gfx/logo.png" alt="Logo" width="294" height="110" />
    </div>
    <div id="contact">
    	KONTAKT<br />
        08-555 555
    </div>
    <!-- MENU -->
    <div id="menu">
      <ul>
          <li>... några li här</li>
      </ul>
    </div>
</div>
</body>
</html>
```

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

## #9 — tanten, 2009-07-11T11:17Z

Har du testat det jag skrev i mitt sista inlägg för att nollställa alla webläsare?

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

## #10 — Pedda, 2009-07-11T12:57Z

> **[tanten skrev:](https://www.webforum.nu/p/1473440)**
>
> Har du testat det jag skrev i mitt sista inlägg för att nollställa alla webläsare?

Har testat det.

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

## #11 — tanten, 2009-07-11T14:05Z

Jag testade din kod och jag hittar ingen extrapixel någonstans när jag färglade dina divar.
Visar du all kod?

Jag hade ett kommatecken för mycket i mitt förra förslag, ändrats nu.

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

## #12 — rhdf, 2009-07-11T14:33Z

testa att lägga in den reset-css jag länkade till 
Den har löst en hel del konstigheter för mig. Den nollställer egentligen ingenting utan sätter bestämda värden på en massa element (sen att det råkar bli 0 är en annan sak)

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

## #13 — tanten, 2009-07-11T15:13Z

Och fungerar inte det heller så sätt samma höjd på din #topbar som det är på din bild, dvs height:110px;.
Eller lägg in din bild i \<p\>\</p\>

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

## #14 — Pedda, 2009-07-12T12:47Z

Gjorde så att jag minskade höjden på loggan och satta höjden på topbar till 110px, då funkar det även i IE.

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/179355-positioneringsproblem-av-horisontell-list-meny