Jak wyrównać to menu do środka?

j_t_r · 3 Września 2009

Witam,

Mam takie menu w CSS:

plik css:

body {
font: bold 11px/1.5em Verdana;
}

h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin:0;
padding:0;
}

hr {
border:none;
border-top:1px solid #CCCCCC;
height:1px;
margin-bottom:25px;
}

#tabs {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}

#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}

#tabs li {
display:inline;
margin:0;
padding:0;
}

#tabs a {
float:left;
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

#tabs a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}

/* End IE5-Mac hack */
#tabs a:hover span {
color:#FFF;
}

#tabs a:hover {
background-position:0% -42px;
}

#tabs a:hover span {
background-position:100% -42px;
}

wywołanie w html:

<div id="tabs">
 <ul>
<li><a href="https://www.costam/"><span>nazwa linka 1</span></a></li>
<li><a href="https://www.costam/"><span>nazwa linka 2</span></a></li>
 </ul>
</div>

To menu zaczyna rysować się od lewej strony (z małym marginesem). Jak przerobić ten kod, aby guziki wyrównane były do środka strony?

Próbowałem pozamieniać "left" na "center" ale wszystko sie rozsypuje.

pozdrawiam,

slawek22 · 3 Września 2009

Elementy blokowe umieszczane w elementach inline to kiepski pomysł :angry:

Sposób 1. Zamiana elementów menu na inline (wszystkich) i

ul, ul * {text-align: center;}

Sposób 2. Przypisanie ul szerokości i margin: auto

j_t_r · 3 Września 2009

Jeszcze żebym wiedział co i gdzie zmienić

Czy mógłbyś wkleić kod ze zmianami o których pisałeś?

Dlaczego inline to kiepski pomysł?

slawek22 · 3 Września 2009

Daj adres strony.

Dlaczego inline to kiepski pomysł?

Elementy blokowe w inline. Inline nie ma wysokości i się ogólnie powinno stosować do tekstu. Inline powinno być w elemencie blokowym a nie na odwrót.

j_t_r · 3 Września 2009

Menu wziąłem z free-css.com

Na przykład to:

https://89.161.156.35/menucss/

Menu jest wyrównane do lewej (lewy margines 50px). Chciałbym aby było wyrównane do środka. Moje próby na chybił/trafił nie przyniosły żadnego wyniku.

wiszbon · 3 Września 2009

Sprobuj dać w tabs margin:auto; powinno Ci wyśrodkować menu.

j_t_r · 3 Września 2009

Niestety nie pomaga.

yavaho · 3 Września 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<style>
#tabs {width:100%; text-align:center;}
#tabs ul {margin:auto; list-style:none;}
#tabs li {display:inline; background:#eee; padding:10px; margin:10px;}
</style>
</head>
<body>
<div id="tabs">
 <ul>
<li><a href="#">nazwa linka 1</a></li>
<li><a href="#">nazwa linka 2</a></li>
 </ul>
</div>
</body>
</html>

slawek22 · 3 Września 2009

<style>#tabs ul {width: 750px; margin: auto;}</style>

j_t_r · 3 Września 2009

#tabs {width:100%; text-align:center;}
#tabs ul {margin:auto; list-style:none;}

#tabs li {display:inline; background:#eee; padding:10px; margin:10px;}

Plik jako całość działa, ale jak próbuję tylko te powyższe wpisy zaaplikować do swojego to brak efektu wypośrodkowania. A zależy mi na wyglądzie graficznym menu takim jak w moim linku.

@slawek22

To tworzy jakby blok o szerokości 750px i w nim układa guziki. Przy odpowiedniej ilości guzików efekt jest poprawny, ale gdy guzików jest mniej to widać, że równają się one do lewej w tym bloku. Mi zależy, żeby niezależnie od ilości pozycji menu równane były do środka i na 100% szerokości ekranu.

slawek22 · 5 Września 2009

Niestety, żeby to się tak dopasowywało trzeba byłoby napisać to menu od nowa. Można też to zrobić za pomocą javascript i offsetWidth.

Beata_S · 6 Września 2009

Po pierwsze. Trzeba dodać zapis: text-align: center; - będzie to wyglądać tak:

#tabs {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
text-align: center;/* TO DODAĆ: */
}

Po drugie. Trzeba poza tym dodać kolor czcionki do #tabs a Trzeba ponadto usunąć float:left; Będzie to wyglądało tak:

#tabs a {
color: white; 
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

j_t_r · 9 Września 2009

@Beata

Wprowadziłem zmiany i tak to wygląda:

https://89.161.156.35/menucss2/

Beata_S · 9 Września 2009

hahahahahahha Nie przejmuj się, coś tam trzeba poprawić jeszcze. Na Twojej stronie, którą tu sobie ściągnęłam na dysk, wyglądało OK, ale ja jeszcze miałam tą Twoją stronę bez belek. Dodałeś belki i coś się tam jeszcze pokomplikowało. Odpiszę Ci potem, bo teraz mam coś do załatwienia. Będzie OK, cudów nie ma.

Beata_S · 9 Września 2009

Tak wygląda teraz Twoje menu: klik

A oto zrzut:

W zasadzie chodziło o to, by dodać zapis display: inline-block; do #tabs a Widziałam to menu oryginalne, znalazłam w necie i ono jest zrobione trochę po bałaganiarsku tam. Obrazki stanowiące tło dla przycisków są niedobrze zrobione. Jeden to wąski pasek na 4px przeznaczony dla a, drugi szeroki na 175px przeznaczony na a:hover. To jest do kitu. Oba obrazki powinny być wąziuteńkie i powtórzone na szerokość przycisku poleceniem repeat-x. Ja ucięłam ten szeroki obrazek i ma teraz 3 px. Poza tym obydwa te obrazki są za wysokie, nie wydaje mi się byś chciał mieć przyciski wysokie na 84px. Skróciłam je do 60px, ale są jeszcze zbyt wysokie, moim zdaniem. Tam w oryginalnym kodzie na dole są te obrazki co prawda pozycjonowane, ale po bałaganiarsku i po co? One są za duże i za ciężkie. Musisz się zdecydować, jakiej wysokości mają być Twoje przyciski i nadać obrazkom taką właśnie wysokość. A szerokość 3 albo 4 piksele wystarczą. One będą się powtarzać dzięki poleceniu repeat-x. Dlatego Ci to polecenie do css wstawiłam zamiast tam takich top left itp. Jeśli nie umiesz obrazków przyciąć to mogę Ci to zrobić, napisz tylko wymiary.

Jeszcze taka sprawa, że usunęłam całkowicie wszystko co dotyczy span jak również w html sam span. On tam robi tylko zamieszanie. Jeśli chcesz mieć ten span koniecznie to Ci go wstawię z powrotem, ale po co?

Oto kod:

html:

<div id="tabs">
 <ul>
<li><a href="https://www.free-css.com/">CSS Books</a></li>
<li><a href="https://www.free-css.com/">CSS Menus</a></li>
<li><a href="https://www.free-css.com/">CSS Tutorials</a></li>
<li><a href="https://www.free-css.com/">CSS Reference</a></li>
<li><a rel="nofollow" target="_blank" href="https://www.exploding-boy.com/" title="explodingboy">explodingboy</a></li>
 </ul>
</div>

css:

#tabs {
float:left;
width:100%;
background:#000;
font-size:93%;
text-align: center;
}

#tabs ul {
margin:0;
padding:10px 10px 10px 50px;
list-style:none;	
}

#tabs li {
display:inline;
margin:0;
padding:0;
}

#tabs a {
color: white;
background:url("tableft.gif") repeat-x;
margin:0;
padding:0 0 0 4px;	
text-decoration:none;	
width: 120px;
height: 30px;
display: inline-block;
line-height: 27px;	
}

#tabs a:hover{
background: url(tabright.gif) repeat-x;
color: yellow;
}

Oczywiście tam sobie popraw kolor w a:hover, bo chyba nie chcesz mieć czcionki żółtej

Zaloguj się

Jak wyrównać to menu do środka?

Rekomendowane odpowiedzi

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Zarchiwizowany

Ostatnio przeglądający 0 użytkowników

Polecamy

Współpracują z nami

Powiadomienie o plikach cookie