ugrás a tartalomhoz

"float: középre" nem megy :)

Pepita · 2012. Okt. 26. (P), 16.08
Sziasztok!

Bocs a címért, de nem jövök rá a dolog nyitjára, pedig valószínűsítem, hogy igen egyszerű a megoldás. Az alábbi menüt a <div id="main_nav"> - nál "fogva" középre szeretném igazítani <div id="across_2"> - n belül. (Később szintén across_2 gyermekeként lehet, hogy egy-két <p>valami</p> bekerülhet.

A HTML:
<!DOCTYPE html>

<html lang="hu">
<head>
    <title>float probléma</title>
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    <link rel="stylesheet" type="text/css" href="main.css" />
    <script language="javascript" type="text/javascript" src="jquery_1_4.js"></script>
</head>

<body>

<!-- Header cuccok -->

    <div id="across_2">
            <div id="main_nav">
                <ul>
                    <li><a href="menu.html">Címlap</a></li>
                    <li><a href="menu.html">Aktuális</a>
                    <ul>
                        <li><a href="#">Menü 2.1</a></li>
                        <li><a href="#">Menü 2.2</a></li>
                        <li><a href="#">Menü 2.3</a></li>
                    </ul></li>
                    <li><a href="#">Menü 3.</a>
                    <ul>
                        <li><a href="#">Menü 3.1</a></li>
                        <li><a href="#">Menü 3.2</a></li>
                        <li><a href="#">Menü 3.3</a></li>
                    </ul></li>
                    <li><a href="#">Menü 4.</a></li>
                    <li><a href="#">Menü 5.</a></li>
                    <li><a href="#">Menü 6.</a></li>
                    <li><a href="#">Menü 7.</a></li>
                </ul>
            </div>
    </div>

<!-- article (left-box és content) -->
<!-- footer -->

<script language="javascript" type="text/javascript">
<!--
    // Menüt középre:
    $("#main_nav").css("left", (($("#across_2").width()-$("#main_nav").width())/2) + "px");
-->
</script>
</body>
</html>
CSS:
body {
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: rgb(251,247,235);
  font-family: "georgia", serif;
}

#across_2 {
  z-index: 110;
  width: 100%;
  min-height: 32px;
  height: auto;
  margin: 0;
  padding: 0;
  background-color: rgb(22,112,201);
  text-align: center;
  clear: both;
}

#main_nav {
  z-index: 120;
  position: absolute;
  padding: 0;
  margin: 0;
}
#main_nav ul {
  padding: 0;
  margin: 0;
  line-height: 32px;
}
#main_nav li {
  position: relative;
  list-style-type: none;
  list-style-image: none;
  float: left;
  background: none;
}
#main_nav a {
  background: red url("gomb_10.png") no-repeat;
  padding: 0px;
  width: 120px;
  height: 32px;
  font-size: 16px;
  display: block;
  font-family: "times new roman", times, serif;
  color: #049;
  text-align: center;
  text-decoration: none;
}
#main_nav a:hover {
  background: pink url("gomb_11.png") no-repeat;
  color: #169;
  font-weight: bold;
  outline: none;
  border: none;
}
#main_nav ul ul {
  position: absolute;
  visibility: hidden;
  top: 32px;
  left: -2px;
  border: 2px dashed rgb(13,106,201);
  border-top: none;
  background-color: rgb(103,174,245);
  z-index: 100;
  margin: 0;
  padding: 0;
}
#main_nav ul li:hover ul {
  visibility: visible;
}
Amit tudtam, kivettem belőle, többi gyakorlatilag valós (a piros és rózsaszín háttér kivétel).

Próbálkoztam szélességekkel, text-align-al, margin: 0 auto-val és még sorolhatnám, de nem sikerült (pedig én mindent jól csináltam :)).

Kérlek segítsetek ki egy kis korrepetálással, ha egy mód van rá, nem szeretném ezt a gagyi js/jquery - ráncigálást ott hagyni!

Fontos, hogy IE8 is "játszik", ill. cross-browser legyen. (Inkább CSS2.)

A segítséget - útmutatást előre is köszönöm!

Pepita.
 
1

Absolute nélkül

bamegakapa · 2012. Okt. 26. (P), 17.01
Ha nem ragaszkodsz a position: absolute-hoz valami okból, akkor ez működhet:

#across_2 {  
  text-align: center;  
}  

#main_nav {  
  display: inline-block;
}
jsFiddle demó

Hála az inline-blocknak, az elem felveszi a gyermekek méretét (akárcsak a position: absolute vagy a float esetén), tehát nem törekszik a szülő szélességének kitöltésére, mint egy alap block elem.

Az inline működés miatt könnyedén középre rendezhető.

Az inline-blockot támogatja az IE8, IE7-ben is működésre bírható egy kisebb hekkel.
3

Dehogy ragaszkodom position: absolute-hoz!

Pepita · 2012. Okt. 26. (P), 19.01
Csak a jquery miatt kellett...

Köszönöm szépen a megoldást, így jó lesz (IE7- nem szempont, "nekik" mehet balra).
Kísérleteztem inline-block -al is, de valószínűleg bent maradt az absolute, vagy vmi mást rontottam el...
5

Az inline-block problémája a

tgr · 2012. Okt. 27. (Szo), 10.52
Az inline-block problémája a (viszonylag elhanyagolható) kompatibilitási problémákon túl az, hogy a html tag körüli szóközöket nem mindig nyeli le, amitől pici, de csúnya elcsúszások lesznek.

A legegyszerűbb megoldás blokk vízszintesen középre pozicionálására a margin: 0 auto.
6

szélesség

Poetro · 2012. Okt. 27. (Szo), 11.35
Már ha tudod az elem szélességét, mert annak meghatározása nélkül nem fog menni, és a fenti esetben ez a szélesség nem ismert.
7

Nodeviszont

bamegakapa · 2012. Okt. 27. (Szo), 11.44
De valamilyen módszerrel rá kell vegyed ezt a divet, hogy a gyermekei szélességét vegye fel, mivel nem akarod megadni a pontos szélességét (különben persze reflexből mehet a marginos megoldás). Enélkül nem tudnád középre pozícionálni, mivel 100% szélességű lenne.

A "valamilyen módszer"-t kifejtettem, biztos van más is, nekem az a három jutott eszembe hirtelen. A float és az absolute position nem igazán praktikus itt, ezért maradtam az inline-blocknál. A flexbox meg egyelőre nem megoldás, ha széles böngésző-támogatásra vágysz.

De én is szívesen nézegetek további működő megoldásokat, mert tanulni remek és mindig van mit.
9

De a példában a gyereke egy

tgr · 2012. Okt. 28. (V), 07.59
De a példában a gyereke egy blokk, tehát úgyis 100%-os szélessége lesz, ha nem adsz meg neki kézzel (mint ahogy az a fiddle-ben is látszik). Plusz ha a menüd floatolt elemeket tartalmaz, akkor eleve nem is lehet saját szélessége.
12

De műxik

Pepita · 2012. Okt. 28. (V), 22.41
Nem egészen értem, ezzel a #main_nav { display: inline-block; } -al működik. A <li>-k floatoltak, bennük az <a>-k fix szélességűek (mármint a desktop verzióban). Szerintem itt nincs gond, bár még csak IE és FF alatt néztem. (Ezekben nem problémáznak a whitespace karakterek sem, de azt (is) még majd meg kell nézzem több böngészőn is.)
13

Lehet elbeszélünk egymás mellett

bamegakapa · 2012. Okt. 29. (H), 10.59
A menüd hiába tartalmaz bármilyen elemeket, ha önmaga block elem és nincs rajta alkalmazva sem float sem abszolút pozíció. Lesz saját szélessége, méghozzá a szülő 100%-a.
2

Firebug

Práger Ádám · 2012. Okt. 26. (P), 17.02
Használd a firebugot, vagy másik inspectort. Érdemes megjegyezni, hogy a div alapból 100% széles (mivel block elem), de ha épp nem ugrik be, akkor ezek egyből mutatják...

+1 az inline-block megoldásra
4

Firebug

Pepita · 2012. Okt. 26. (P), 19.05
Köszi a tippet, de tudod a bölcsiből már elballagtam, nem a WL-en kezdem egy probléma megoldását, hanem ide hozom azt, amit néha nem sikerül megoldanom...
Önmagában a div szélessége nem oldotta meg a problémát, mint ahogy a témaindítóban is írtam.
8

Ne vedd a szívedre

bamegakapa · 2012. Okt. 27. (Szo), 11.46
Mivel lehet, hogy később mások is rátalálnak erre a topikra hasonló problémával, ezért nem baj, ha olyat is leír, amit te már tudhatsz.
10

Block

Práger Ádám · 2012. Okt. 28. (V), 13.27
Ezzel nem azt akartam mondani, hogy változtasd a szélességet, hanem azt, hogy vedd észre, hogy 100% széles, vedd észre, hogy nem te akartad, hogy annyi legyen... ebből már tudod, hogy block elem, változtasd meg. :)
11

Hosszú

Pepita · 2012. Okt. 28. (V), 22.33
Jó-jó, hosszú lenne ezt kiragozni. Nem az volt a gondom, hogy block-e, inline-block-ot is próbáltam, csak rosszul. Sebaj, a "firebug-reklám" elfér...