Strona na urządzenia mobilne

Question

Witam. Chciałbym, żeby strona, której kod HTML i CSS podam poniżej miała taki sam układ strony na urządzeniach mobilnych, czyli http://pics.tinypic.pl/i/00726/7t56nei6mq4r.png jednak nie wiem jak się do tego zabrać. Na urządzeniach moblinych wygląda to mniej więcej tak: http://pics.tinypic.pl/i/00726/w146nddguryq.png poprostu content idzie pod nav.

O to kod HTML

sory, ale podam w zip, bo ograniczenie znaków :D

http://www.mediafire.com/download/2p8aqhzue0hcp9r/index.zip

Kod CSS:

#page
    {
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

#logoa
    {
        background-color: black;
        padding: 15px;
        width: 170px;
    }
    
#logob
    {
        background-color: black;
        color: white;
        text-align: center;
        padding: 15px;
        width: 800px;
    }
    
#logo
    {
        display: flex;
    }
    
#container
    {
        display: flex;
    }
    
#nav
    {
        background-color: gray;
        padding: 5px;
        min-height: 620px;
        width: 240px;
        padding-top: 30px;
    }

#content
    {
        width: 825px;
        background-color: white;
        min-height: 620px;
        padding: 15px;
    }
    
#footer
    {
        background-color: black;
        text-align: center;
        padding: 15px;
        color: white;
    }
    
img
    {
        display: block;
        margin: 0 auto;
        padding-left: 30px;
    }
    
a
    {
        text-decoration: none;
        color: blue;
    }
    
h4
    {
        margin-top: 0;
        margin-bottom: 0;
    }
    
ul.linki, ul.linki li.linki
{
    margin: 0;
    padding: 0;
}

ul.linki
{
    width: 200px;
}

ul.linki a:link, ul.linki a:visited
{
    display: block;
    width: 186px;
    text-decoration: none;
    background-color: #ccc;
    color: #000;
    padding: 5px;
    border: 2px outset #ccc;
}

ul.linki a:hover
{
    border-style: inset;
    padding: 7px 3px 3px 7px;
}

ul.nav, ul.nav li.nav
{
    margin: 0;
    padding: 0;
}

ul.nav
{
    width: 200px;
}

ul.nav a:link, ul.nav a:visited
{
    display: block;
    width: 186px;
    text-decoration: none;
    background-color: white;
    color: green;
    padding: 5px;
    border: 2px outset black;
}

ul.nav a:hover
{
    border-style: inset;
    padding: 7px 3px 3px 7px;
}

ul.home, ul.home li.home
{
    margin: 0;
    padding: 0;
}

ul.home
{
    width: 200px;
}

ul.home a:link, ul.home a:visited
{
    display: block;
    width: 186px;
    text-decoration: none;
    background-color: #906030;
    color: black;
    padding: 5px;
    border: 2px outset black;
}

ul.home a:hover
{
    border-style: inset;
    padding: 7px 3px 3px 7px;
}

 

Answer 1

Poczytaj o tym http://kodcss.pl/kurs-css/lekcje/dzial-1/css3-media-queries

Comments

Ja dodam pytanie od siebie, czy to co wysłałeś to tworzenie storn responsywnych?

---

Można dla każdej rozdzielczości podać style np dla smartfonów inne  a dla  pc inne style

---

Gdyby była to strona responsywna to bym tutaj tego problemu nie pisał ;)

---

Spróbuję z media queries, ale jak macie inne propozycje to czekam :P

---

Pytałem się odnośnie linku czy tam jest na temat tworzenia stron responsywnych bo chciałbym się tego nauczyć w niedalekiej przyszłości, a nie bardzo wiem jak się je wykonuje nadal :)

---

Aaa, ok, chyba to się do tego odnosi, choć pewny nie jestem ;)

---

https://www.youtube.com/playlist?list=PLpcSpRrAaOaqsnCdAcHPC5Dob5cjC3-Dh

przerobisz 2 pierwsze filmiki i umiesz robić proste strony responsywne :)

---

Ok,dzięki za link.

---

@PreZmyK

Tutorial dobry, ale nie potrafię sobie poradzić w moim wypadku, poprostu wiadomości z tutka nie potrafię przenieść na mój kod, gubię się.

---

Pod filmem masz link do strony z kursu. Pobierz ją i przeanalizuj kod.

Answer 2

Witaj a nie lepiej dla Ciebie byłoby dla małych rodzielczosci wprowadzić Menu rozwijalne wiesz takie z Hamburger icon

Comments

Hmm, nie bardzo wiem o co chodzi, rozwiniesz myśl? :)

Answer 3

Próbowałem użyć @media all {} ale nie wiem cz dobrze. W moim wypadku ma to wyglądać tak?

@media all

{

#page
    {
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

...

 

ul.home a:hover
{
    border-style: inset;
    padding: 7px 3px 3px 7px;
}

}

Jest to prawidłowo wykonane?

Comments

@media all{}  nic nie da bo odnosi się do wszystkich rozdzielczości. 

Chodzi raczej o 

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width:960px){
        /* styles for browsers larger than 960px; */
    }

    @media only screen and (min-width:1440px){
        /* styles for browsers larger than 1440px; */
    }

    @media only screen and (min-width:2000px){
        /* for sumo sized (mac) screens */
    }

    @media only screen and (max-device-width:480px){
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }

    @media only screen and (device-width:768px){
       /* default iPad screens */
    }

    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

i wtedy w każdym @media możesz zdefioniować inne reguły dla różnych rozdzielczości

---

(źródło przykładu: http://stackoverflow.com/a/13550716/1832058)

Answer 4

Dobra, użyłem @media w taki sposób:

@media (min-width: 1000px) {

.container {width:1000px;}

}

@media (max-width: 1100px) and (min-width: 1000px) {

.container {width:950px;}

}

@media (max-width: 1000px) and (min-width: 800px) {

.container {width:750px;}

}

@media (max-width: 800px) and (min-width: 500px) {

.container {width:450px;}

}

@media (max-width: 500px) {

.container {width:300px;}

}

I niby wszystko działa, ale nie na wszystkich urządzeniach. Teraz mam pytanie, jak zamiast px wstawić np. cale, albo jak to obliczyć względem ekranów telefonów?