Jak szeroki container'a w css ?

Question

Witam mam problem nie wiem jakąszerokość wybrać dla pojemnika ? :)

mam ustawione:

width: 100%;

Niby wszystko ok ale gdy zrobiłem takie coś :

http://scr.hu/2xhj/m6iip

gdy zmniejszam przeglądarke jedno na drugie najeżdza

z góry dziękuje za odpowiedż

Pozdrawiam :)

Answer 1

Z containerem jest wszystko w porządku, może te divy w nim mają na sztywno ustawiony rozmiar.

Comments

Jeżeli chodzi o divy html:

<div id="napis">
<font color="white">
<div style="text-align: center;"><h1>Strona główna</h1></div>
</font></div>
<div id="tlo"></div>

<div id="dmenu">
<font color="white">
<div style="text-align: center;"><h1>Menu</h1></div>
</font></div>

css:

#napis
{
background-color: #3299CC;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
height: 40px;
width: 800px;
}
#tlo
{
background-color: white;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
height: 510px;
width: 800px;
}
#dmenu
{
background-color: #3299CC;
margin-top: -550px;
margin-left: auto;
margin-right: 300px;
height: 40px;
width: 200px;
}

---

Zamień wszędzie piksele na procenty a twoja strona stanie się dużo bardziej "responsywna" i wrażliwa na rozdzielczość przeglądarki. Poza tym skoro divy obok siebie, gdzie tu

float:left;

???

---

No tak zrobiłem sobie przerwę od mirosława i mam tego skutki :) Dzięki za odpowiedź i Pozdrawiam :)

---

Robić stronkę WWW i nie obejrzeć odcinków Zelenta to kardynalny błąd, tam są wytłumaczone podstawowe rzeczy.

Answer 2

Nie widzę kodu, więc ciężko wróżyć z fusów…

Zgaduje, że problem leży w typie pozycjonowania obu elementów. Zainteresuj się parametrami float oraz display:inline-block

Comments

Kurczę o kodzie nie pomyslałem :)

ale jaki kod css czy html ? :)

---

CSS.

Komentarz wymaga 12 znaków, więc sztucznie je wepchnąłem tym stwierdzeniem :)

Answer 3

W CSS3 jest możliwość zdefiniowania wielkości każdego elementu jako część wysokości/szerokości ekranu:

10vh - 10% wysokości ekranu

vw - część szerokości

vmin - wybiera tę mniejszą

vmax - wybiera tę większą

Efekt możesz zobaczyć na przykład na stronie http://musicgame.blutu.pl/pl.html

Przy tekście radzę stosować vmin, chociaż przy dziwnych rozdzielczościach mogą pojawić się małe problemy

Zrób tak:

#container
{
  width:100%;
  height:100%;
}

.option  
{
width:     20vw;
height:    7vh;
font-size: 4vmin;
}

 

Answer 4

Dodaj do containera takie coś:

min-width: ?px;

? - długość menu + strony głównej

Answer 5

Polecam zrobić to w pixelach. Pojemnik ustawiam zawsze na 1000px albo na 1200 px

Comments

W pikselach stronka nie jest ani trochę dostosowywana do okna przeglądarki, więc jest to słabe. Polecam stronkę w procentach (dla mniej zaawansowanych bo dla bardziej to jest taki framework o którym Zelent wspominał) np. pojemnik na 100% szerokości, przez to osoba która ma rozdzialke 1024x768 sobie komfortowo obejrzy stronę a także osoba która ma FHD 1920x1080 także nie będzie mieć problemu z oglądaniem bo strona zrobiona w procentach zmniejszy się zależnie od rozdzielczości.

---

Znam kreatora tematu. I wiem na jakim jest poziomie :) Wiec moja rada była jak najbardziej celna