Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Wyśrodkowanie menu
Forum PHP.pl > Forum > Przedszkole
kosa351
11.11.2010, 13:33:04
Witam,
pomoże mi ktoś wyśrodkować to menu?
http://www.dynamicdrive.com/style/csslibra...k-pointer-menu/
avi
11.11.2010, 13:34:20
A kod mamy zgadywać?
kosa351
11.11.2010, 13:45:55
kod menu podany w linku, ale mogę przekleić

html
Kod
<div id="pointermenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/" id="selected">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
<li><a href="http://www.dynamicdrive.com/contact.htm">Contact</a></li>
<li><a href="#" id="rightcorner"> </a></li>
</ul>
</div>
<br style="clear: left" />


css
Kod
body {
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 14px;
    height: auto;
    background-image:url(images/patterns.jpg);
    background-repeat:repeat;
    color: #000;
    margin:0px;
    }

#main {
    margin: 0 auto;
    width:100%;
    text-align: left;
}

#pointermenu{
border-top: 7px solid black; /*optional border across top*/
margin: 0;
padding: 0;
}

#pointermenu ul{
margin: 0;
margin-left: 15px; /*menu offset from left edge of window*/
float: left;
padding-left: 8px;
font: bold 13px Verdana;
background-color: black;
background: black url(media/leftround.gif) bottom left no-repeat; /*optional left round corner*/
}

* html #pointermenu ul{ /*IE6 only rule. Decrease ul left margin and add 1em bottom margin*/
margin-bottom: 1em;
margin-left: 7px; /*menu offset from left edge of window in IE*/
}

#pointermenu ul li{
display: inline;
}


#pointermenu ul li a{
float: left;
color: white;
font-weight: bold;
padding: 2px 11px 7px 7px;
text-decoration: none;
background: url(media/pointer.gif) bottom center no-repeat;
}

#pointermenu ul li a:visited{
color: white;
}


#pointermenu ul li a:hover, #pointermenu ul li a#selected{ /*hover and selected link*/
color: white;
background-color: darkred;
}

#pointermenu ul li a#rightcorner{
padding-right: 0;
padding-left: 2px;
background: url(media/rightround.gif) bottom right no-repeat; /*optional right round corner*/
}
avi
11.11.2010, 13:54:32
css
Cytat
body {
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
height: auto;
background-image:url(images/patterns.jpg);
background-repeat:repeat;
color: #000;
margin:0px;
}

#main {
margin: 0 auto;
width:100%;
text-align: left;
}
#menu1 {
float: center
}

#pointermenu{
border-top: 7px solid black; /*optional border across top*/
margin: 0;
padding: 0;
}

#pointermenu ul{
margin: 0;
margin-left: 15px; /*menu offset from left edge of window*/
float: left;
padding-left: 8px;
font: bold 13px Verdana;
background-color: black;
background: black url(media/leftround.gif) bottom left no-repeat; /*optional left round corner*/
}

* html #pointermenu ul{ /*IE6 only rule. Decrease ul left margin and add 1em bottom margin*/
margin-bottom: 1em;
margin-left: 7px; /*menu offset from left edge of window in IE*/
}

#pointermenu ul li{
display: inline;
}


#pointermenu ul li a{
float: left;
color: white;
font-weight: bold;
padding: 2px 11px 7px 7px;
text-decoration: none;
background: url(media/pointer.gif) bottom center no-repeat;
}

#pointermenu ul li a:visited{
color: white;
}


#pointermenu ul li a:hover, #pointermenu ul li a#selected{ /*hover and selected link*/
color: white;
background-color: darkred;
}

#pointermenu ul li a#rightcorner{
padding-right: 0;
padding-left: 2px;
background: url(media/rightround.gif) bottom right no-repeat; /*optional right round corner*/
}


html
Cytat
<div id="menu1"><div id="pointermenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/" id="selected">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
<li><a href="http://www.dynamicdrive.com/contact.htm">Contact</a></li>
<li><a href="#" id="rightcorner"> </a></li>
</ul>
</div>
<br style="clear: left" /></div>

Powinno działać, a w linku podałeś stronę...
# a dobra nie widziałem tego kodu tam, sorki
kosa351
11.11.2010, 14:06:18
obecny kod i efekt -> http://test.adamusiak.com/anna/

Kod
<body>
        <div id="main">
            
            <div class="top">
            <p>test</p>
            </div>
            
            <div id="menu1"><div id="pointermenu">
            <ul>
            <li><a href="http://www.dynamicdrive.com">Home</a></li>
            <li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
            <li><a href="http://www.dynamicdrive.com/style/" id="selected">CSS</a></li>
            <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
            <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
            <li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
            <li><a href="http://www.dynamicdrive.com/contact.htm">Contact</a></li>
            <li><a href="#" id="rightcorner"> </a></li>
            </ul>
            </div>
            <br style="clear: left" /></div>
            
            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vestibulum dolor tortor. Nunc euismod euismod gravida. Pellentesque venenatis, libero vitae malesuada cursus, nulla tortor hendrerit sem, id ornare arcu lectus vel tortor. . </p>
            </div>
            
            <div class="footer">
            </div>
            
        </div>
    </body>


css
Kod
body {
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 14px;
    height: auto;
    background-image:url(images/patterns.jpg);
    background-repeat:repeat;
    color: #000;
    margin:0px;
    }
    
img {
    border: 0px;
}


#main {
    margin: 0 auto;
    width:100%;
    text-align: left;
}

.top {
    height: 100px;
    width:100%;
    width:auto;
    background-color:#000000;
}

#menu1 {
    float: center
}

#pointermenu{
    border-top: 7px solid black; /*optional border across top*/
    margin: 0;
    padding: 0;
}

#pointermenu ul{
    margin: 0;
    margin-left: 15px; /*menu offset from left edge of window*/
    float: left;
    padding-left: 8px;
    font: bold 13px Verdana;
    background-color: black;
    background: black url(media/leftround.gif) bottom left no-repeat; /*optional left round corner*/
}

* html #pointermenu ul{ /*IE6 only rule. Decrease ul left margin and add 1em bottom margin*/
    margin-bottom: 1em;
    margin-left: 7px; /*menu offset from left edge of window in IE*/
}

#pointermenu ul li{
    display: inline;
}


#pointermenu ul li a{
    float: left;
    color: white;
    font-weight: bold;
    padding: 2px 11px 7px 7px;
    text-decoration: none;
    background: url(media/pointer.gif) bottom center no-repeat;
}

#pointermenu ul li a:visited{
    color: white;
}


#pointermenu ul li a:hover, #pointermenu ul li a#selected{ /*hover and selected link*/
    color: white;
    background-color: darkred;
}

#pointermenu ul li a#rightcorner{
    padding-right: 0;
    padding-left: 2px;
    background: url(media/rightround.gif) bottom right no-repeat; /*optional right round corner*/
}

#content {
    margin: 0 auto;
    width:70%;
    text-align: left;
    border: dotted #000 2px;
    background-color:#FFFFFF;
    
}

#footer {
    
}

avi
11.11.2010, 14:33:50
diva nie zamknąłeś.
krzysztof_kf
11.11.2010, 14:38:55
Usuń z selektora menu1 zawartość float: center;

dodaj do niego 


[CSS] pobierz, plaintext 
  1. #menu1 {
  2. width: 100%;
  3. margin: 0 auto;
  4. }
[CSS] pobierz, plaintext


pozdro .
kosa351
12.11.2010, 12:37:36
hejka, dzięki za podpowiedzi, ale nadal nie działa :/

Kod
<div id="main">
            
            <div class="top">
                <p>test</p>
            </div>
            
            <div id="menu1">
            <div id="pointermenu">
            <ul>
            <li><a href="http://www.dynamicdrive.com">Home</a></li>
            <li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
            <li><a href="http://www.dynamicdrive.com/style/" id="selected">CSS</a></li>
            <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
            <li><a href="#" id="rightcorner"> </a></li>
            </ul>
            </div>
            <br style="clear: left" />
            </div>
            
            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vestibulum dolor tortor. Nunc euismod euismod gravida. Pellentesque venenatis, libero vitae malesuada cursus, nulla tortor hendrerit sem, id ornare arcu lectus vel tortor. </p>
            </div>
            
            <div class="footer">
            </div>
            
        </div>


Kod
body {
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 14px;
    height: auto;
    background-image:url(images/patterns.jpg);
    background-repeat:repeat;
    color: #000;
    margin:0px;
    }
    
img {
    border: 0px;
}


#main {
    margin: 0 auto;
    width:100%;
}

.top {
    height: 100px;
    width:100%;
    width:auto;
    background-color:#000000;
}


#menu1 {
width: 100%;
margin: 0 auto;
}

#pointermenu{
    border-top: 7px solid black; /*optional border across top*/
    margin: 0;
    padding: 0;
}

#pointermenu ul{
    margin: 0;
    margin-left: 15px; /*menu offset from left edge of window*/
    float: left;
    padding-left: 8px;
    font: bold 13px Verdana;
    background-color: black;
    background: black url(media/leftround.gif) bottom left no-repeat; /*optional left round corner*/
}

* html #pointermenu ul{ /*IE6 only rule. Decrease ul left margin and add 1em bottom margin*/
    margin-bottom: 1em;
    margin-left: 7px; /*menu offset from left edge of window in IE*/
}

#pointermenu ul li{
    display: inline;
}


#pointermenu ul li a{
    float: left;
    color: white;
    font-weight: bold;
    padding: 2px 11px 7px 7px;
    text-decoration: none;
    background: url(media/pointer.gif) bottom center no-repeat;
}

#pointermenu ul li a:visited{
    color: white;
}


#pointermenu ul li a:hover, #pointermenu ul li a#selected{ /*hover and selected link*/
    color: white;
    background-color: darkred;
}

#pointermenu ul li a#rightcorner{
    padding-right: 0;
    padding-left: 2px;
    background: url(media/rightround.gif) bottom right no-repeat; /*optional right round corner*/
}

#content {
    margin: 0 auto;
    width:70%;
    text-align: left;
    border: dotted #000 2px;
    background-color:#FFFFFF;
    
}

#footer {
    
}
smagul
12.11.2010, 13:12:51
listy się nie da wyśrodkować.
wyśrodkuj element nadrzędny czyli:
[HTML] pobierz, plaintext 
  1. #pointermenu{
  2. width: 50%;
  3. margin: 0 auto
  4. }
[HTML] pobierz, plaintext


Jeśli docelowo twoja strona ma mieć jakąś stałą szerokość (np. 900px) to pointermenu będzie miało 450 px i musisz sobie wyliczyć ile musisz ustawić marginesu lewego by menu było dokładnie po środku. Przynajmniej ja bym tak zrobił.

P.S IE nie wie co to margin: 0 auto, więc w menu1 musisz dać text-align: center; i sprawdź czy coś innego przez to się nie rozjedzie.
kosa351
12.11.2010, 14:28:27
smagul dzięki za rozjaśnienie, ale strona docelowo ma nie mieć stałej szerokości, zależy od rozdzielczości przeglądającego.
Znalazłem pomocne informacje tutaj http://matthewjamestaylor.com/blog/beautif...browser-support
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.