"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>
<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>
<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>

<!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;
}

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.

■

HTML, CSS, JavaScript, Ajax

csirip

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;
}


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

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés