Układ strony .css

[LucKy_skiLL 0]

Mam problemem z .css mojej strony, posiadam różne ustawienia divów w zależności od rozdzielczości monitora, u Mnie jest dobrze, ale jak na stronie wejdzie kolega z inną rozdzielczością to divy nachodzą na niektóre rzeczy.

 

 

Live demo: http://amxhelp.pl

 

 

Kod .css

 

/* ----------========== Ogólne ustawienia ==========---------- */
body { background:#0a0a0a url(img/tlo.png) repeat 0 0;color:#fff;margin:0;overflow-y:scroll; font-family: Tahoma,Arial,Verdana,sans-serif; font-size:12px; color:#FFFFFF; }
a { text-decoration: none; }

/* ----------========== Logo ==========---------- */

#header { background:url(img/logo.png) no-repeat center top;height:198;margin-left:auto;margin-right:auto;width:100%; }
#pole { background:#414141;border:1px #1A1A1A solid;color:#FFF;font-size:14px;height:17px;margin-right:0px;margin-top:0px;width:135px; }

/* ----------========== Menu ==========---------- */

#menu { background:#252525 url(img/menu.png) repeat-x; height:49px; color:#D4D4D4; font-weight:bold; }
#menu a { color:#FFF; }
#menu div.menu-item { float:left; text-align: center; padding:17px 14px 0px; height:32px; background:none; border:0; cursor:pointer; }
#menu div.tooltip { position:absolute; overflow:visible; margin-top:5px; padding:8px; border:1px solid #585858; background-color:#3F3F3F; color:#FFF; filter:alpha(opacity=80); opacity:0.80; z-index:1000; font-size:10px; display:none; text-align:center; width:90px; height:15px; text-transform:uppercase; }

/* ----------========== Środek strony ==========---------- */

#tlo{ border:1px solid #474747; background:#343434; padding:20px; margin-top:15px;}
#srodek { width: 635px; float:left; overflow: hidden; margin-top:-250px; margin-left: 250px; }

/* ----------========== Stopka ==========---------- */

#footer { height:138px; background:#04A5C8 url(img/footer.png) repeat-x; position:absolute; }
#footer a,a:hover,a:visited { color:#EEEEEE; }
.footer { width:1135px; margin:auto; padding-top:27px; color:#EEEEEE;; }
.footer-right { padding-top:7px; padding-right:8px; line-height:18px; text-align:right; font-size:11px; }

/* ----------========== Przywitanie / Data ==========---------- */

#welcome { margin-top:-482px; padding-left:30px; position: absolute;}
#data { margin-top:-482px; padding-left:828px; position: absolute;}

/* ----------========== Tabelka kodów SMS ==========---------- */

.smsy { width:600px; margin-left: auto; margin-right: auto; border: 2px solid #13badb; -moz-border-radius: 5px; border-radius: 5px; font-weight: normal; font-size:12px; }
.smsy td { padding: 5px; text-align: center; border:1px dotted #13badb; }
.smsyt { padding: 5px; text-align: center; font-weight: bold; font-size:11px; background-color:#D4ECFA; background-image:url(img/smsyt.gif); }

/* ----------========== Logowanie / Panel admina / Panel użytkownika ==========---------- */

#panel { float:right; width:240px; margin-top:-244px; }
.panel  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/panel.png) no-repeat; background-position:0 6px; }
.edytuj { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/edytuj.png) no-repeat; background-position:0 6px; }
.wiadomosc { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/wiadomosc.png) no-repeat; background-position:0 6px; }
.ustawienia { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/ustawienia.png) no-repeat; background-position:0 6px; }
.portfel { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/portfel.png) no-repeat; background-position:0 6px; }
.wyloguj { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/wyloguj.png) no-repeat; background-position:0 6px; }

.konto  { float:left; background:url(img/button_1.png) no-repeat; width:100px; height:27px; border: 0px; cursor: pointer; }
.zaloguj  { background:url(img/button_2.png) no-repeat; width:98px; height:27px; border: 0px; cursor: pointer; }

/* ----------========== Portfel / Wiadomości ==========---------- */

.portfel_menu div { width:200px; border-bottom:1px dashed #cecece; }
.portfel_menu a { display:inline; width:200px; padding:6px; text-align:left; text-decoration:none; color:#0091D4; border-bottom:1px solid #0091D4; }
.portfel_menu a:hover { text-decoration:none; border-bottom:3px solid #0091D4; }
.portfel_menu .wplata { font-weight:bold; text-decoration:none; }
.portfel_portfel .portfel { font-weight:bold; font-size:140%; color:#0091D4; text-decoration:none; padding:10px; }

/* ----------========== Boczne menu ==========---------- */

#uslugi { float:center; width:240px; margin-left: 10px; }
#subpages  { width:228px; background:#017EA2; border:1px solid #68C5D9; border-width:0px 1px; }
#subpages a { color:#FFFFF; }
.subpages-content { padding:10px 15px; background:url(img/subpages-top.gif) repeat-x; min-height:90px; }
.subpage  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/blue-dot.png) no-repeat; background-position:0 6px; }
.subpages-bottom  { width:230px; height:14px; background:url(img/subpages-bottom.gif) no-repeat; }
.subpage-content  { line-height:18px; padding-top:10px; }

.home  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/home.png) no-repeat; background-position:0 6px; }
.kontakt  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/kontakt.png) no-repeat; background-position:0 6px; }
.vip  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/vip.png) no-repeat; background-position:0 6px; }
.premium  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/premium.png) no-repeat; background-position:0 6px; }
.ogloszenia  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/ogloszenia.png) no-repeat; background-position:0 6px; }
.regulamin  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/regulamin.png) no-repeat; background-position:0 6px; }
.slot { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/slot.png) no-repeat; background-position:0 6px; }

/* ----------========== Pasek "Gdzie jestes" ==========---------- */

#content  { float:left; padding-left:287px; width:600px; margin-top:0px; }
.path  { float:left; margin-left:-25px; height:23px; width:577px; padding:10px 10px 10px 25px; background:url(img/path-bg.gif) repeat-x; font-size:11px; color:#737373; }
.path-right { float:left; height:33px; width:11px; background:url(img/path-right.gif) no-repeat; }

/* ----------========== Tło pod przyciski ==========---------- */

div.demo { font-size: 80%; padding:12px; font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; }
div.demo h3.docs { clear:left; font-size:12px; font-weight:normal; padding:0 0 1em; margin:0; }

[SaVaGe123 21]

#srodek: 50%; zmieniaj sobie rozdzielczość i pracuj. Stopka wkleja się w tekst, wystaje za ekran. Chaos.

[Artix 34]

Mam monitor 1024x768 no i rzeczywiście coś jest nie tak - wystarczyło dwukrotnie oddalić stronę i jest ok.

[kaszub1136 109]

Zmniejsz tę stopkę bo tylko zawala miejsce. Wyśrodkuj jakoś treść strony aby wszystko się jakoś trzymało w pionie a nie że logo jest na środku i niby wyznacza krawędzie strony a jednak treść ucieka na lewo.

[PapaSmerf 497]

Poczytaj sobie lepiej o responsive design i media queries. Pod różnymi rozdzielczościami robi Ci się tam jeden wielki burdel.

[LucKy_skiLL 0]

Problem w tym, że ja robiłem to "pod siebie" i u Mnie wyląda tak: http://ss-host.pl/images/1ele.png nie mam pojęcia jak to naprawić.

[PapaSmerf 497]

Problem w tym, że ja robiłem to "pod siebie" i u Mnie wyląda tak: http://ss-host.pl/images/1ele.png nie mam pojęcia jak to naprawić.

Ale to nie ma co się dziwić, że robi Ci się burdel.

 

To jest cały CSS? Jeśli tak, to wszędzie masz stały rozmiary elementów ergo masz dostosowane pod jedną szerokość kontenera, którym to u Ciebie jest okno przeglądarki. Tak się stron nie pisze. Albo stały rozmiar w kontenerze, albo responsywność. U mnie np. na 1280x1024 prawa strona się rozwala, na 1900x1200 wygląda jeszcze zabawniej.

[SaVaGe123 21]

Jak nie umiesz inaczej to zrób na stały kontener 1024px i wycentruj stronę. Zmień sobie rozdzielczość i popatrz jak to ci wygląda. Jakiej przeglądarki używasz ?

[Smoog 47]

Polecam Ci ustawić rozmiary w % a nie w stałych rozmiarach. A jeśli już chcesz koniecznie stała szerokość to ustaw główny kontener na 1000 px i resztę w środku dopasuj i powinien się mieścić na każdym ekranie. Problemem mogą być tylko urządzenia mobilne dlatego polecam wielkości w %.