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

centrera element som är floatat?


Badtant

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]

Länk till kommentar
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;

 

 

Länk till kommentar
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.

 

Länk till kommentar
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?

 

Länk till kommentar
Dela på andra webbplatser

Micke_skane

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.)

 

Länk till kommentar
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]

Länk till kommentar
Dela på andra webbplatser

Micke_skane

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.

 

Länk till kommentar
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.

 

Länk till kommentar
Dela på andra webbplatser

Micke_skane

Nä, så klart.

Det var det jag tänkte att det Inte skulle vara men jag skrev det ändå... utan inline menar jag :)

 

Länk till kommentar
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.

 

Länk till kommentar
Dela på andra webbplatser

Micke_skane

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.

 

Länk till kommentar
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?

 

Länk till kommentar
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"?

 

Länk till kommentar
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]

Länk till kommentar
Dela på andra webbplatser

Micke_skane
Jag vet inget annat sätt att göra dem på.

Du kan ju Googla på:

sliding doors css align center

 

Länk till kommentar
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?

 

Länk till kommentar
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>

 

Länk till kommentar
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

 

Länk till kommentar
Dela på andra webbplatser

kan tyvärr inte ange någon bredd då den kan vara lite vad som helst så då faller lösningen.

 

Länk till kommentar
Dela på andra webbplatser

Micke_skane

Poäng för att du delar med dig av en lösning som andra kan ha nytta av.

 

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...