Jag vill positionera en menylista 270px åt höger räknat från mitten av sidan, vad jag försökt hittills är någonting åt det här hållet.
#menywrapper {
width: 100%;
height: 155px;
margin: 0;
padding: 0;
text-align: center;
}
#meny {
margin-left: 270px;
}
Det fungerar hyffsat, den flyttas för det första inte så långt som jag vill(men den flyttas från mitten verkar det som), och texten i listan blir ju också centrerad. Skriver jag text-align: left på DIV:en som listan ligger i så hamnar den ju 270px från vänster på sidan istället för mitten.
Någon som vet hur jag kan lösa det?
jofaweMedlem sedan mars 20062 194 inlägg testa
position: absolute;
left: 50%;
Det funkar för mig iallafall!
Kolla källkoden här för exempel:
http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm
Inte riktigt så jag menar. Bifogar en bild här som kanske förklarar bättre hur det är jag vill ha det.
Kom på nu att jag kanske kan lägga en annan DIV i mitten som sträcker sig 270px åt vardera håll som jag kan lägga meny-DIV:en mot.
Men jag skulle gärna vilja veta om det går att fixa så som jag tänkt från början.
Edit:
Tror inte att mitt andra förslag fungerar så bra heller eftersom man inte kan flyta DIV:ar mot absoluta objekt.
Tar man margin-left: auto; och margin-right: auto istället för att placera det absolut så puttas menyn ner en rad istället. Eller kan man få det att få det att fungera på något sådant vis ändå?
Nu har jag gjort en temporär lösning med "Faux Absolute Positioning". Men eftersom att det inte fungerar riktigt som jag vill (menyn följer inte med hur långt som helst på det ställe den ska vara när man förminskar fönstret), så vore jag jättetacksam för andra tips på hur man skulle kunna åstadkomma det jag vill göra.
Danne VMedlem sedan aug. 20068 090 inlägg Gör #menywrapper relativt positionerad, kanske margin left/right som auto (beroende på resten av markupen).
Sen gör du #meny absolute positionerad, left 270.
OT: Om man skriver "wrapper" och använder engelska id-namn, så kan det vara idé att skriva "menu" istället för "meny".
Vad jag än testar så är det alltid någonting som inte blir som jag vill.
Är jag helt korkad eller är det verkligen så svårt att få en DIV att ligga 270px till höger om topcenter-punkten hur man än förminskar/förstorar webbläsarfönstret?
OT: Om man skriver "wrapper" och använder engelska id-namn, så kan det vara idé att skriva "menu" istället för "meny".
Ja absolut, anledningen var att jag testade en massa olika sätt och då döpte DIV:arna till diverse logiska och ologiska namn. :)
Danne VMedlem sedan aug. 20068 090 inlägg Du får nog ge oss ALL kod inklusive ALL CSS för att nån ska kunna lösa problemet. Det är antagligen något som du inte nämner som inverkar på resultatet.
Jag har provat så många olika sätt nu som jag trott skulle fungera så egentligen vet jag inte riktigt vilken kod jag ska visa här, men jag kan ta den här som exempel.
<!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-SE" lang="sv-SE">
<head>
<title>En sida</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="menywrapper">
<div id="meny">
<ul>
<li><a href="#">Val1</a></li>
<li><a href="#">Val2</a></li>
<li><a href="#">Val3</a></li>
<li><a href="#">Val4</a></li>
<li><a href="#">Val5</a></li>
<li><a href="#">Val6</a></li>
<li><a href="#">Val7</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS:
body {
font: 10px verdana, sans-serif;
color: #fff;
margin: 0;
padding: 0;
background-image:url(logo.jpg);
background-position: center top;
background-repeat:no-repeat;
background-color: #036;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 12px;
}
p {
font-size: 11px;
color: #fff;
line-height: 15px;
}
a:link { color: #fff; text-decoration: underline;}
a:visited { color: #fff; text-decoration: underline;}
a:active { color: #fff; text-decoration: underline;}
a:hover { color: #fff; text-decoration: none;}
img {
border: 0;
}
#meny ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#meny ul li {
text-align: left;
line-height: 20px;
}
#meny ul li a {
text-decoration: none;
color: #fff;
font-size: 14px;
}
#meny ul li a:hover {
text-decoration: underline;
}
#menywrapper {
position: relative;
width: 100%;
height: 155px;
margin: 0 auto 0 auto;
padding: 0;
text-align: center;
}
#meny {
position: absolute;
margin-left: 270px;
height: 155px;
}
Jag behöver inte nödvändigtvis använda just det där sättet. Finns det bara något lätt sätt att sätta en DIV 270px till höger från mitten så tar jag det.
#menywrapper {
position: relative;
}
#meny {
position: absolute;
left: 50%;
}
#meny ul {
margin: 0 0 0 270px;
padding: 0;
list-style: none;
}
kanske?
Tack så hemskt mycket! Självklart kan man göra så, det fungerade utmärkt, precis som jag vill ha det. :)
Tack än en gång! :bire
