webForumDet fria alternativet
Logga in / Bli medlem

Spanna meny rad över hela

HTML & CSSur HTML, XHTML & CSS

7 svar · 937 visningar · startad av sugarbombshell

sugarbombshellMedlem sedan nov. 200843 inlägg
#1

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

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 -->
meny.png
rhdfMedlem sedan okt. 2007446 inlägg
#2

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)

Nate.AMedlem sedan mars 2006296 inlägg
#3

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; }
sugarbombshellMedlem sedan nov. 200843 inlägg
#4

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>
sugarbombshellMedlem sedan nov. 200843 inlägg
#5

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å hemsidanbyggas.se

Danne VMedlem sedan aug. 20068 090 inlägg
#6

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

Nate.AMedlem sedan mars 2006296 inlägg
#7

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.

sugarbombshellMedlem sedan nov. 200843 inlägg
#8

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

Kram o tack :)

139 ms totalt · 3 externa anrop · v20260731065814-full.94fcd635
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
136 ms — hämta tråd, inlägg och bilagor (db)