CSS strul

3 svar · 533 visningar · startad av Gimbo 28 juli 2010

GimboMedlem sedan dec. 20001 626 inlägg

Frågan28 juli 2010 12:52#1

Hej,
har en meny som jag bygger på nedan vis problemet är att diven som menyn ligger i verkar reservera en höjd vilket medför att content som jag har under menyn pressas ner, och sidan ser väldigt konstig ut, för när jag tar bort menyn så ser innehållet bra ut, men så fort jag lägger in menyn så trycks innehållet ner, någon som har några ideer?

<div id="menu-top">
	<ul>
		<li><a href="index.html" title="Hem"><span>Hem</span></a></li>
		<li><a href="galleri.html" title="Galleri"><span>Galleri</span></a></li>
		<li><a href="#" title="Links"><span>Länk</span></a></li>
		<li><a href="#" title="Links"><span>Länk</span></a></li>
		<li><a href="#" title="Links"><span>Länk</span></a></li>
		<li><a href="#" title="Links"><span>Länk</span></a></li>
	</ul>
</div><!--menu-top-->

och med följande css

#menu-top ul {
	margin: 95px 20px;
	padding: 1em 0 0 0;
	list-style: none;
	font-size: 85%;
	float: left;
	height: 40px;
}

#menu-top li {
	display: inline;
	float: left;
}

#menu-top a {
	float: left;
	background:url(images/menuleft.png) no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
	line-height: 1.5em;
}

#menu-top a span {
	background: transparent url(images/menuright.png) no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#5b8fbe;
	display: block;
	float: left;
	cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */
}

 #menu-top a:hover { background-position:0% -42px; }
 #menu-top a:hover span {	background-position:100% -42px; }

Danne VMedlem sedan aug. 20068 090 inlägg

28 juli 2010 13:43#2

Du har ju t.ex. en marginal på 95px mellan själva menyn och divven den ligger i.

Men för att förstå och felsöka så att det blir rätt räcker det ofta inte med att du bara ger oss delar av kod och delar av stilmallen. Dels är det enklare att förstå om man ser sidan i skarpt läge, så en länk till sidan uppskattas. Dessutom har vi ingen aning om vad du använder för DTD, vilket kan vara avgörande.

Det hjälper också en hel del om du talar om vilken/vilka webbläsare (+ version) och vilken plattform (Mac? Win?) + version du har kollat i.

GimboMedlem sedan dec. 20001 626 inlägg

29 juli 2010 07:38#3

Fick det att fungera tack vare att du sa att jag har 95px mellan divarna jag trodde jag hade 95px från toppen av webbläsaren vilket jag ville ha så ändrade classen till:

#menu-top ul {
	[b]margin-top: 95px;
	margin-left: 20px;[/b]
	padding: 1em 0 0 0;
	list-style: none;
	font-size: 85%;
	float: left;
	height: 10px;
}

och nu ser det bättre ut, tack för hjälpen

Danne VMedlem sedan aug. 20068 090 inlägg

29 juli 2010 08:49#4

Gimbo skrev:

Fick det att fungera tack vare att du sa att jag har 95px mellan divarna jag trodde jag hade 95px från toppen av webbläsaren vilket jag ville ha så ändrade classen till:
#menu-top ul {
	[b]margin-top: 95px;
	margin-left: 20px;[/b]
	padding: 1em 0 0 0;
	list-style: none;
	font-size: 85%;
	float: left;
	height: 10px;
}
och nu ser det bättre ut, tack för hjälpen

Va bra!
Markera gärna tråden som löst (längst till höger ovanför mitt inlägg).