Skocz do zawartości
LucKy_skiLL

Układ strony .css

Polecane posty

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; }

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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.

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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.

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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 ?

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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 %.

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się


×