Hello,
zrobiłem sobie menu na stronie jako poziomo zorientowaną listę
nieuporządkowaną. Mam taki kod:

<div id="page-navigation">
<ul class="page-navigation-menu">
<li class="page-navigation-menu-element">
<a href="/welcome" class="nav-link">Start</a>
</li>
<li class="page-navigation-menu-element">
<a href="/surveys" class="nav-link">New survey</a>
</li>
<li class="page-navigation-menu-element">
<a href="/profile" class="nav-link">Profile</a>
</li>
<li class="page-navigation-menu-element">
<a href="help.html" class="nav-link nav-link-last">Help</a>
</li>
</ul>
</div>

i takiego cssa:

html {
height: 100%;
margin: 0px;
padding: 0px;
}

.nav-link {
display: inline-block;
height: 20px;
text-decoration: none;
width: 8em;
}

.nav-link:hover {
}


.nav-link-last {
border-right: 1px solid white;
}

#page-navigation {
max-height: 40px;
text-align: center;
}

.page-navigation-menu {
clear: both;
display: inline-block;
margin: 0px;
list-style: none;
padding: 0px;
}

.page-navigation-menu-element {
background-color: red;
display: inline-block;
font-size: 1.2em;
}

I mam taki problem, że page-navigation-menu-element nie przylegają do
siebie, jest między nimi przerwa. Oglądam na Opera 11 na Windows XP Pro.

Może ktoś ma pomysł, co jest nie tak i jak temu zaradzić? Dzięki.

--
Pozdrawiam
Zbyszek Malec

do góry

W dniu 2010-12-22 02:03, Zbigniew Malec pisze:
> .page-navigation-menu-element {
> background-color: red;
> display: inline-block;
> font-size: 1.2em;
> }

.page-navigation-menu {
clear:both;
margin:0;
padding:0;
overflow:hidden;
}

.page-navigation-menu-element{
background-color: red;
float:left;
list-style:none;
font-size: 1.2em;
}
.page-navigation-menu-element a{
float:left;
}

--
Peter

do góry

On Wed, 22 Dec 2010 02:34:10 +0100, Peter May wrote:

> .page-navigation-menu {
> clear:both;
> margin:0;
> padding:0;
> overflow:hidden;
> }
>
> .page-navigation-menu-element{
> background-color: red;
> float:left;
> list-style:none;
> font-size: 1.2em;
> }
> .page-navigation-menu-element a{
> float:left;
> }

Przerwy zniknęły, ale menu się przesuneło na lewo, a ja bym chciał je mieć
po środku. Ten float jest tutaj konieczny? I skąd się biorą te przerwy?

--
Pozdrawiam
Zbyszek Malec

do góry

W dniu 2010-12-22 02:47, Zbigniew Malec pisze:
> On Wed, 22 Dec 2010 02:34:10 +0100, Peter May wrote:
>
>> .page-navigation-menu {
>> clear:both;
>> margin:0;
>> padding:0;
>> overflow:hidden;
>> }
>>
>> .page-navigation-menu-element{
>> background-color: red;
>> float:left;
>> list-style:none;
>> font-size: 1.2em;
>> }
>> .page-navigation-menu-element a{
>> float:left;
>> }
>
> Przerwy zniknęły, ale menu się przesuneło na lewo, a ja bym chciał je mieć
> po środku. Ten float jest tutaj konieczny? I skąd się biorą te przerwy?

.page-navigation-menu {
margin:0 auto;
}

--
Peter

do góry

On Wed, 22 Dec 2010 03:22:15 +0100, Peter May wrote:

> .page-navigation-menu {
> margin:0 auto;
> }

Musiałem jeszcze określić szerokość page-navigation-menu, bo inaczej
marginesy się źle układały. Dzięki.

--
Pozdrawiam
Zbyszek Malec

do góry

W dniu 2010-12-22 21:25, Zbigniew Malec pisze:
> On Wed, 22 Dec 2010 03:22:15 +0100, Peter May wrote:
>
>> .page-navigation-menu {
>> margin:0 auto;
>> }
>
> Musiałem jeszcze określić szerokość page-navigation-menu, bo inaczej
> marginesy się źle układały. Dzięki.

A, tak. Zapomniałem o szerokości.

--
Peter

do góry