L LOOlau Medlem sedan jan. 2004 99 inlägg Frågan 28 juli 2004 07:51 #1 Hej..
Har ett problem där en div jag använder som spacer mellan en knapp menu gjord på css:ade div:ar får en oönskad marginal under sig...
.css
.spacer
{
height:2px;
width: 147px;
padding:0px 0px 0xp 0xp;
margin: 5px 0px 0px 5px;
border-top: 1px solid #A0A0A0;
background-color:green;
}
.rm-nav a:visited
{
margin: 0px 0px 0px 0px;
color:white;
text-align: center;
font-size:18px;
font-weight: 900;
}
div.rm-nav
{
width: 141px;
margin: 0px 5px 0px 5px;
text-align: center;
background-color: #FF9900;
padding: 3px 3px 3px 3px;
}
div.rm-nav a
{
color: white; text-decoration: none;
text-decoration: none;
display: block;
width: 141px;
font-size: 18px;
font-weight: bold;
text-align: center;
background-color: #FF9900;
}
div.rm-nav a:hover
{
font-size:18;
color: #A0A0A0; text-decoration: none;
background-color: #FF9900;
}
.php
echo "<div style='margin:0px 0px 0px 0px; padding:0px 0px 0px 0xp;'>";
echo "<div class='spacer'></div>";
echo "<div class='rm-nav'>";
echo"<a href='?calender'>KALENDER</a>";
echo "</div>";
echo "<div class='spacer'></div>";
echo "<div class='rm-nav'>";
echo "<a href='?servecis'>TJÄNSTER</a>";
echo "</div>";
echo "<div class='spacer'></div>";
echo "<div class='rm-nav'>";
echo "<a href='?contact'>KONTAKT</a>";
echo "</div>";
echo "<div class='spacer'></div>";
// osv......
echo "</div>";
Kan tyvärr inte ge ut adressen till sidan, men det blir en marginal under strecket, som om div:en (.spacer) skulle vara högre än dom 2px jag satt den till..
Tacksam för hjälp..
/LOOalu
Y yohpops Medlem sedan feb. 2001 1 198 inlägg Du har stavat fel till px, det står xp i .spacer.
L LOOlau Medlem sedan jan. 2004 99 inlägg Ah oj... Ändrat det nu, men felet kvarstår fortfarande i IE
I Insider Medlem sedan jan. 2000 978 inlägg Testa att lägga till
.spacer {
clear:both
}
Det står även xp längst upp till höger i PHP-koden. Det funkar ju att bara skriva 'padding:0' också.
/Red När jag tänker efter så borde inte clear:both göra nån skillnad, så den kan du ta bort om det mot all förmodan inte hjälpte.
L LOOlau Medlem sedan jan. 2004 99 inlägg Funkar ej...
Utan width så ser den i stort sett ur som jag vill ha den bortsett från att den är kortare än jag vill ha den...
L LOOlau Medlem sedan jan. 2004 99 inlägg Detta funkar utmärkt i både IE och Mozilla, men så fort jag sätter en width (width:1px;) så får jag en felaktig höjd på div:en...
.spacer
{
margin: 5px 0px 5px 5px;
background-color:green;
border-top: 1px solid #A0A0A0;
padding:0px 0px 0xp 0px;
}
I Insider Medlem sedan jan. 2000 978 inlägg Kan du inte skippa spacer och bara ha en bakgrunsfärg som är grön?
När det gäller menyer så är detta exempel ett mycket smidigare sätt:http://css.maxdesign.com.au/listamatic/vertical08.htm
Den är väldigt enkel att modifiera efter det utseende du vill ha.
L LOOlau Medlem sedan jan. 2004 99 inlägg Bakgrundsfärgen ska inte vara grön... Det är bordern jag är ute efter... Vill ha en knapp ett litet mellanrum sen ett streck mellanrum knapp osv...
J jarvklo Medlem sedan juli 2001 3 378 inlägg Hmm..
MSIE buggar sig en del med margins/paddings på block i block...
Hittade denna nyligen, kanske den hjälper: http://www.communitymx.com/abstract.cfm?cid=CB7B3
I Insider Medlem sedan jan. 2000 978 inlägg Testa att klistra in denna koden i ett nytt html-dokument. Koden funkar i IE6, men jag har ingen aning hur det blir i Moxilla....
Här kan du fylla på med hur många <li> som helst... Varje <li> blir en knapp.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style>
<!--
#navcontainer { width: 160px; }
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
li{
border-top: 2px solid #f00;
margin-bottom:3px
}
#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #036;
border-top: 3px solid #eee;
}
#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #369;
color: #fff;
}
#navlist {
position:relative;
top:-5px; /*3px+2px som är de två ramarna*/
}
#navcontainer {
position:absolute;
overflow:hidden;
}
-->
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
<li><a href="#">Item six</a></li>
</ul>
</div>
</body>
</html>
Det går kanske att snygga upp CSS:en lite grann, men jag ändrade på exemplet jag länkade till ovan.
