"float: középre" nem megy :)
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
A HTML:CSS: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,
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.
■ 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>
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;
}
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.
Absolute nélkül
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.
Dehogy ragaszkodom position: absolute-hoz!
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...
Az inline-block problémája a
A legegyszerűbb megoldás blokk vízszintesen középre pozicionálására a margin: 0 auto.
szélesség
Nodeviszont
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.
De a példában a gyereke egy
De műxik
#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.)Lehet elbeszélünk egymás mellett
Firebug
+1 az inline-block megoldásra
Firebug
Önmagában a div szélessége nem oldotta meg a problémát, mint ahogy a témaindítóban is írtam.
Ne vedd a szívedre
Block
Hosszú