Dlaczego ten element nie jest responsywny?

Cześć,

Zastanawiam sie dlaczego element header oraz h1 dostosowuja sie do ekranu a ul > li juz nie.
Fragment kodu css

 

header {
height: 150px;
background: #CC66FF;
overflow: auto;
margin-bottom: 1%;
margin-top: 2%;
border-radius: 5px;
}
header h1 {
height: 30%;
float: left;
margin-left: 1%;
}
header ul {
;
margin-top: 9%;
}
ul li {
float: left;
list-style-type: none;
background: #666;
width: 8%;
padding: 0.5%;
color: white;
border-right: 2px solid #CC66FF;
border-radius: 5px;
}

Użytkownik Kage edytował ten post 29 stycznia 2015 - 17:39

Chcesz uzyskac taki efekt: http://jsfiddle.net/m9y4ktus/1/ ?

<header>
   <h1>Nazwa</h1>
        
        <ul>
            <li>Jeden</li>
            <li>Dwa</li>
        </ul>        
    </header>

Poza tym u mnie wyświetla sie to blokowo. 
 
 
http://jsfiddle.net/m9y4ktus/3/
 

Użytkownik Kage edytował ten post 29 stycznia 2015 - 19:51

Nie odpowiedziałeś mi na pytanie, ale olać to.

jak używasz width w procentach wewnątrz jakiegoś bloku, a w tym przypadku header, wtedy <li> posiada 8% szerokości header'a, a nie całego okna. Weź skasuj width z elementu LI wtedy zobaczysz różnice... 

Nie, taki efekt już uzyskałem, na twoim też ucieka.
Po skasowaniu width z li nie widze różnicy w zachowaniu ul>li, nadal ucieka. 
 

Chętnie bym spróbował pomóc, ale tak na sucho bez demka to dupa blada. Mam słabą wyobraźnię.

Wklej to co masz na jakieś jsfiddle i napisz co z tym jest nie tak.

Jest 3 posty wyżej.

Juz to troche pozmienialem wywaliłem height z header gdzie bylo 150px, I wywalilem czesc marginesow, teraz lepiej to sie zachowuje, tylko nie moge ustawic dolnego odstępu dla ul.

http://jsfiddle.net/m9y4ktus/5/ 

 

Użytkownik Kage edytował ten post 30 stycznia 2015 - 19:30

Jest 3 posty wyżej.

 

Juz to troche pozmienialem wywaliłem height z header gdzie bylo 150px, I wywalilem czesc marginesow, teraz lepiej to sie zachowuje, tylko nie moge ustawic dolnego odstępu dla ul.

http://jsfiddle.net/m9y4ktus/5/ 

 

Zobacz, czy może teraz nieco lepiej: http://jsfiddle.net/m9y4ktus/6/

Tak lepiej, dzieki.

Widze ze zmieniłes header ul -> content: ""; co to robi? 

display: table a wyswietla jak w inline 

No i jeszcze w Ul LI paddingi w pixelach. 
 

@kage https://developer.mo...Web/CSS/content
 

Dziwne ale w demówce u Zonic'a nie widzę content: '';

Dziwne ale w demówce u Zonic'a nie widzę content: '';

header ul {
	padding-left: 10px;
    display: table;
    content: "";
}

Linia 62

Racja. Chyba CTRL + F mi szwankuje  Mimo wszystko content dla ul ? stosuje się je raczej do before, after.

Racja. Chyba CTRL + F mi szwankuje  Mimo wszystko content dla ul ? stosuje się je raczej do before, after.

Ten content się tam przez przypadek wkradł. Nie jest potrzebny.