---
title: "Spanna meny rad över hela"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/182737-spanna-meny-rad-över-hela"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "sugarbombshell"
published: "2010-03-11T09:56:42.000Z"
updated: "2010-03-13T09:57:50.000Z"
replies: 7
views: 946
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/182737-spanna-meny-rad-över-hela"
---

# Spanna meny rad över hela

## #1 — sugarbombshell, 2010-03-11T09:56Z

Jag vill att min menyrad gjord i css med <http://purecssmenu.com/> ska spanna över hela innehållet.. det vill säga från kant till kant.
Se bifogat Photoshop montage.

Jag har provat att lägga det som en bakgrund i td taggen men det funkar inte.  

Sidan finns på [byggas.se](http://www.byggas.se)

Nu når den ju inte hela vägen ut.

Här är koden för header.php
 

```
 <tr>
    <td><img src="img/top.png" width="800" height="30" /></td>
  </tr>
  <tr>
    <td><img src="img/top2.png" width="800" height="112" /></td>
  </tr>
  <tr >
    <td><ul class="pureCssMenu pureCssMenum0">
  <li class="pureCssMenui0"><a class="pureCssMenui0" href="index.php">Startsidan</a></li>
	<li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Kök<![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="epoq.php">Epoq     </a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="ikea.php">IKEA</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui0"><a class="pureCssMenui0" href="malning.php">Målning</a></li>
	<li class="pureCssMenui0"><a class="pureCssMenui0" href="utfordaarbeten.php">Utförda arbeten</a></li>
	<li class="pureCssMenui0"><a class="pureCssMenui0" href="kontaktform.php">Kontakt</a></li>
	<li class="pureCssMenui0"><a class="pureCssMenui0" href="omoss.php">Om oss</a></li>
  
    </ul></td>
  </tr>
```

Och såhär ser css koden ut:

```
body {
	background-image: url(img/bg.gif);
	margin:0px; 
	padding:0px;
	border:none;
	}

.bodytable {width: 800px;
border:none;
margin:0px; 
padding:0px;
}

.tcons {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
}
	
.tconsbold {	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
}

.tconsitalic {	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
}

A:link, a:visited { color: #7EA822; }
	

.heading {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
}
.tcons {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	color: #000000;
	text-decoration: none;
}

.liten {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: normal;
	color: #fff;
	text-decoration: none;
	}

<!-- Start PureCSSMenu.com STYLE -->

#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 2px 2px 0px;
	background-color:#fff;
	background-repeat:repeat;
	border-color:#808080;
	border-width:1px;
	border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
	display:block;
	zoom:1;
	height:21px;
	float: left;
}
ul.pureCssMenu ul{
	width:47.25px;
}
ul.pureCssMenu li{
	display:block;
	margin:2px 0px 0px 2px;
	font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	background-color:#FFFFFF;
	border-width:1px;
	border-color:#fff;
	border-style:solid;
	text-align:center;
	text-decoration:none;
	padding:2px 5px 5px 10px;
	_padding-left:0;
	font:11px Verdana;
	color: #000;
	text-decoration:none;
	cursor:default;
}
ul.pureCssMenu span{
	overflow:hidden;
}
ul.pureCssMenu li {
	float:left;
}
ul.pureCssMenu ul li {
	float:none;
}
ul.pureCssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.pureCssMenu li.sep{
	text-align:left;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.pureCssMenu li.sep span{
	float:none;	padding-right:0;
	width:3px;
	height:100%;
	display:inline-block;
	background-color:#808080;	background-image:none;}
ul.pureCssMenu ul li.sep span{
	width:100%;
	height:3px;
}
ul.pureCssMenu li:hover{
	position:relative;
}
ul.pureCssMenu li:hover>a{
	background-color:#DBF0F9;
	border-color:#45ADE4;
	border-style:solid;
	font:11px Verdana;
	color: #444;
	text-decoration:none;
}
ul.pureCssMenu li a:hover{
	position:relative;
	background-color:#DBF0F9;
	border-color:#45ADE4;
	border-style:solid;
	font:11px Verdana;
	color: #444;
	text-decoration:none;
}
ul.pureCssMenu li.dis a {
	color: #557D4F !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def  {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
	display:block;
	background-image:url(./images/arrv_white.gif);
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:9px;}
ul.pureCssMenu ul span{background-image:url(./images/arr_black.gif)}
ul.pureCssMenu ul li:hover > a span{	background-image:url(./images/arr_white.gif);}
ul.pureCssMenu table a:hover span{background-image:url(./images/arr_white.gif)}
ul.pureCssMenu li.pureCssMenui0 {
width:110px;
height:23px;
}
ul.pureCssMenu li a.pureCssMenui0{
height:100%;
background-image:url(./images/btn3.jpg);
border-width:0px;
font:normal 11px Tahoma;
color:#fff;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
background-image:url(./images/btn4.jpg);
font:normal 11px Tahoma;
color:#eee;
}
 ul.pureCssMenum0 {
background-color:transparent;
border-width:0px;
	padding:0px 0px 0px 0px;
}
 ul.pureCssMenum0>li>a {
padding:8px 10px 0px 10px;
}
 ul.pureCssMenum0 a {
padding:8px 10px 0px 10px;
}
 ul.pureCssMenum0 ul a {
padding:2px 5px 5px 10px;
}
 ul.pureCssMenum0>li {
margin:0px 0px 0px 0px;
}
 ul.pureCssMenum0 li {
margin:0px 0px 0px 0px;
}
 ul.pureCssMenum0 li li {
margin:2px 0px 0px 2px;
}

<!-- End PureCSSMenu.com STYLE -->
```

Bilagor:

- [meny.png](https://www.webforum.nu/a/21434.png)

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

## #2 — rhdf, 2010-03-12T16:49Z

sätt width på den där första ul till 100% så borde den täcka hela området

(Sen borde du kanske fundera på att bygga layouten med div och css utan att blanda in en massa tabeller för layout)

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

## #3 — Nate.A, 2010-03-12T17:13Z

Din ul går hela vägen över sidan men har ingen bakgrundsbild och syns därför inte. Prova att lägga till det här i din css...

```
ul.pureCssMenum0 { background: transparent url(/images/btn3.jpg) repeat-x; }
```

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

## #4 — sugarbombshell, 2010-03-12T18:32Z

rhdf - Sidan är byggd åt en tidigare kund, kostade för mycket tid att designa om den med divs. Tabell är för tabulär data, håller med dig.
Width på 100% gav endast vit bakgrund, fattar inte varför.

```
  <tr>
    <td><img src="img/top.png" width="800" height="30" /></td>
  </tr>
  <tr>
    <td><img src="img/top2.png" width="800" height="112" /></td>
  </tr>
  <tr >
    <td><ul class="pureCssMenu pureCssMenum0" style="width:100%">
  <li class="pureCssMenui0"><a class="pureCssMenui0" href="index.php">Startsidan</a></li>
	<li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Kök<![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="epoq.php">Epoq     </a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="ikea.php">IKEA</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui0"><a class="pureCssMenui0" href="malning.php">Målning</a></li>
	<li class="pureCssMenui0"><a class="pureCssMenui0" href="utfordaarbeten.php">Utförda arbeten</a></li>
	<li class="pureCssMenui0"><a class="pureCssMenui0" href="kontaktform.php">Kontakt</a></li>
	<li class="pureCssMenui0"><a class="pureCssMenui0" href="omoss.php">Om oss</a></li>
  
    </ul></td>
  </tr>
```

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

## #5 — sugarbombshell, 2010-03-12T18:34Z

Nate.A

Det funkade tyvärr inte.

```
 ul.pureCssMenum0 {
background-color:transparent url(./images/btn3.jpg) repeat-x;
border-width:0px;
padding:0px 0px 0px 0px;

}
```

Problemet är fortfarande olöst. Båda svaren på formateringsförslagen ligger uppe på hemsidan[byggas.se](http://www.byggas.se)

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

## #6 — Danne V, 2010-03-12T19:32Z

Kolla den här tråden, där Jarvklo levererade en snygg lösning. <http://www.webforum.nu/showthread.php?t=177967>

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

## #7 — Nate.A, 2010-03-12T23:38Z

Jag var lite snabb förra gången, jag försöker igen:

```
ul.pureCssMenum0 { background: #000 url(/images/btn3.jpg); width:100%; height:31px }
```

Är osäker på hur det fungerar i IE men i Firefox ska det fungera.

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

## #8 — sugarbombshell, 2010-03-13T09:57Z

Jag gjorde typ den lösningen. Ändrade höjden och la en den som bg i td tagen.

Kram o tack :)

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/182737-spanna-meny-rad-över-hela