Just nu i M3-nätverket
Gå till innehåll
Badtant

centrera element som är floatat?

Rekommendera Poster

Hej!

 

Jag håller på skapa ett gäng knappar med hjälp av sliding doors-tekniken.

http://www2.hemsida.net/badtant/a/buttons.html

 

I den övre grå boxen så försöker jag centrera knappen men lyckas inte eftersom knappan är floatad left (sliding doors verkar funka så). Någon som vet hur jag kan få centreringen att funka?

 

Med andra ord: Hur kan jag centrera en div som har okänd bredd?

 

Mvh

/N

 

[inlägget ändrat 2007-06-27 13:43:21 av Badtant]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

jag skulle gjort att mouseover-knappen är samma bild som icke-mouseover. och då endast använda position för att byta utseende på knappen, på detta sätt blir det inga laddningstider vid mouseover.

 

i den grå divven får du sätta text-align: center;

 

för att centrera ett element med bestämd bredd kan man använda

margin: 0px auto;

 

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

smart att byta position på knappen! ska kolla på det!

 

men centreringsmetoden du nämner är just för ett element med känd bredd. min knapp kan anta vilken bredd som helst och då funkar inte detta.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Att använda både centrering och float:left känns lite som en motsägelse? Det kan väl inte både vara centrerat OCH flytandes till vänster? Eller har jag missat nåt?

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Ett objekt kan inte vara placerat som båda men man kan använda det på samma object för att påverka olika delar i objektet.

T ex float:left placerar objektet till vänster och text-align:center påverkar ev text som ligger i objektet.

Om man har ett annat objekt(x) inom det första objektet(som är float:left) och sätter float:right på det(x) så blir det objektet flyttat till höger i det första objektet men ev text i objektet x blir centrerat i objektet x.

 

Så man kan säga att text-align-värdet ärvs av underliggande objekt(x).

 

Någon som förstod vad jag försökte förklara :)

(För övrigt så orkade jag inte kolla igenom koden för menyn för det verkade vara rätt mycket kod.)

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Närå, ta nedanstående kod t.ex. Där har jag skapat en horisontell meny utav en lista med hjälp av floating. Runt menyn så ligger en div och jag vill ha menyn centrerad i denna. Fullt logiskt men vetefasen hur man får till det då bredden på menyn är okänd.

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
list-style:none;
margin:0;
padding:0;
}
li {
float:left;
padding:5px;
background:#ccc;
margin-right:1px;
}
</style>
</head>
<body>
<div style="text-align:center">

<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>

</div>
</body>
</html>

 

[inlägget ändrat 2007-06-28 10:45:42 av Badtant]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Om du inte använder float på li utan använder display:block; så blir det nog som du vill.

Sen om det passar rätt för övrigt i behållaren vet jag inte men då får du väl justera till det.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

om jag kör display:block istället så blir det ju inte en horisontell meny utan en vertikal. alltså inte alls som jag vill.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Ok :)

Funkar ju faktiskt men nu har vi kommit bort från ämnet. Exemplet med menyn är inte det jag jobbar på för tillfället utan bara en demonstration av problemet. Jag måste använda floats men vill ändå kunna centrera.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Varför är du tvungen till det?

Har, som sagt innan i en annan tråd, inte tid att vara i forumet just för tillfälligt men jag hoppas någon annan har tid att hjälpa dig med menyen.

Tänk bara på att float bestämmer var i det omslutande elementet som objektet ska vara placerat. Så det kan inte vara både och.

Läget är liksom förutbestämt.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Jo men då har du ju float:left på LI och centrerar sedan hela listan.

 

Att kapsla in de flytande elementen i ett annat element och sedan centrera det borde fungera, gör det inte det? Eller är det där du får problem eftersom det omgivande elementet måste ges en storlek?

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Det är bredden på det omgivande elementet som bestämmer hur dessa flytande element ska hanteras, hur många som ska rymmas på samma "rad" o s v.

 

Det låter som ett feltänk nånstans?

 

Men jag undrar samma sak, varför måste de vara "float"?

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Precis, för att jag ska kunna centrera det med margin:0 auto så måste den omslutande diven ha en bestämd bredd. Bredden kan jag i mitt fall inte förutbestämma och däri ligger problemet.

 

Anledningen till att jag måste ha float är att jag använder sliding doors för att skapa knapparna. Jag vet inget annat sätt att göra dem på.

[inlägget ändrat 2007-06-28 13:00:03 av Badtant]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Att döma av den CSS de använder verkar de vara rätt olika. Har du provat emd varianten från alistapart?

 

"We’re going to nest several floated elements within another containing floated element. We do this so that the outer parent float completely wraps around the floats inside."

 

Det verkar vara vad du söker? Då borde "outer parent" kunna centreras alt. kapslas in i ännu ett nytt element?

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

OK, då tar vi exemplet med listan igen enligt detta:

"We’re going to nest several floated elements within another containing floated element. We do this so that the outer parent float completely wraps around the floats inside."

 

Jag har floatade li inuti en floatad ul. Jag kan floate ul till höger och vänster utan problem. Men, hur får jag den att bli centrerad?

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
ul {
float:left;
list-style:none;
margin:0;
padding:0;
border:1px solid #000;
}
li {
float:left;
padding:5px;
background:#ccc;
margin-right:1px;
}
</style>
</head>
<body>
<div>

<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>

</div>
</body>
</html>

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

[log]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
html,
body {text-align: center; width: 100%;}
#wrapper { width: 800px; text-align:center; margin:0 auto; border: 1px solid #ddd;}
ul {
width: 300px;
list-style:none;
margin:0 auto;
padding:0;
border:1px solid #000;
text-align: center;
}
li {
float:left;
padding:5px;
background:#ccc;
margin-right:1px;
}
</style>
</head>
<body>
<div id="wrapper">

<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>

</div>
</body>
</html>

[/log]

 

Tror du måste sätta en fast bredd på UL.

Jag tog bort float: left på UL också, den gör inget eftersom inget element kommer efter UL

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×
×
  • Skapa nytt...