Forum PHP.pl > [CSS] Problem z poziomą listą

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Problem z poziomą listą

mczlowiek

25.03.2009, 13:42:55

mamt aki oto problem, za choinke lista nie chce wyświetlić się w poziomie

Kod

#wiecej {background-color: #ddd;
    border-width: 1px 0;
    border-style: solid;
    border-color: gray;
    padding: 3px 5%;
    margin: 0;
}


#wiecej  ul {
                list-style-image:none;
                list-style-position:outside;
                list-style-type:none;
                margin:12px 0 0;
                padding:0;
                width:500px;
                display:inline;
                clear:left;
                float:left;
                margin-left:12px;
            }


#wiecej li {
                background:transparent url(images/lista/bullet_5x5.gif) no-repeat scroll left 9px;
                clear:left;
                display:inline;
                float:left;
                margin-left:12px;
                }

[HTML] pobierz, plaintext 
<ul id="wiecej">
                                <li>Wszystko</li>
                                <li>Typy</li>
                                <li>Zapowiedzi</li>
                                <li>Kontuzje</li>
                                <li>Transfery</li>
                            </ul>
?>
[HTML] pobierz, plaintext

Lista wyświetla mi się w pionie, nawet odpowiednich odległości nie zachowuje, dlaczego? kombinuje i kombinuje i nic z tego...

zzeus

25.03.2009, 14:12:35

id masz przypisane do ul więc spróbuj tak

Kod

#wiecej{
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:12px 0 0;
padding:0;
width:500px;
display:inline;
clear:left;
float:left;
margin-left:12px;
}

#wiecej li {
background:transparent url(images/lista/bullet_5x5.gif) no-repeat scroll left 9px;
clear:left;
display:inline;
float:left;
margin-left:12px;
}

nmts

25.03.2009, 14:22:11

Kod

#wiecej {
background-color: #ddd;
border-width: 1px 0;
border-style: solid;
border-color: gray;
padding: 3px 5%;
margin: 0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:12px 0 0;
padding:0;
width:500px;
display:inline;
clear:left;
float:left;
margin-left:12px;
}

#wiecej li {
background:transparent url(images/lista/bullet_5x5.gif) no-repeat scroll left 9px;
clear:left;
display:inline;
margin-left:12px;
}

nie potrzebne float:left dla li.

mczlowiek

27.03.2009, 08:20:01

Problemy są teraz 2:
1) dlaczego liste poziomą nie wyświetla w div'ie "subc", tylko poza nim, mimo, że znajduje się w jego "ramionach" w kodzie?

[PHP] pobierz, plaintext 
<?php
<div class="subc">
                            Filtruj wiadomości:            
                            <ul id="wiecej">
                                <li>Wszystko</li>
                                <li>Typy</li>
                                <li>Zapowiedzi</li>
                                <li>Kontuzje</li>
                                <li>Transfery</li>
                            </ul>
</div><!--subc-->
?>
[PHP] pobierz, plaintext

styl dla subc

[PHP] pobierz, plaintext 
<?php
.subc{ padding:10 10 10 10; background: white; border:1px solid #D2D2D2;margin-bottom:10px;}
?>
[PHP] pobierz, plaintext

2. jak ten czerwony kwadracik podnieść troszkę do góry aby nie był na samym dole, chcę go po prostu wyśrodkować

INFO - div subc - to ten biały "prostokącik"

K4mil94

27.03.2009, 08:26:46

Daj sobie tylko padding-left: 10px; a ten padding: 10 10 10 10; wywal.

piotrooo89

27.03.2009, 08:29:19

pokaż jak stylujesz liste.

mczlowiek

27.03.2009, 08:29:26

nie ma tego, cały kod zamieściłem

lista:

[PHP] pobierz, plaintext 
<?php
#wiecej {
margin: 0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 0 0 0;
padding:0;
display:inline;
clear:left;
float:left;
}
 
#wiecej li {
background:transparent url(images/lista/bullet_5x5.gif) no-repeat scroll left 9px;
clear:left;
display:inline;
margin-right:20px;
padding-left:12px;
}
 
#wiecej a {
    color:#5C5C5C;
    font-family:Arial,sans-serif;
    font-size:11px;
    text-decoration:none;
    }
?>
[PHP] pobierz, plaintext

2. punkt drugi zrobiony, jescze tylko punkt 1.

K4mil94

27.03.2009, 08:31:52

Cytat(piotrooo89 @ 27.03.2009, 08:29:19 )

pokaż jak stylujesz liste.

list-style: none;

Pozatym to padding daje w dół tekst.

piotrooo89

27.03.2009, 08:37:37

dodaj do .subc overflow: hidden;

mczlowiek

27.03.2009, 08:39:26

ja tą listę umieścic we wspomnianym wcześniej divie, gdyż mimo iz w kodzie znajduje sie w nim to wychodzi poza niego

Cytat(piotrooo89 @ 27.03.2009, 08:37:37 )

dodaj do .subc overflow: hidden;

Dziękuje, wszystko oki!

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.