Rozjeżdżające się elementy strony

Dla specjalistów Webmastering
#1

Nie wiem dlaczego ale pod niektórymi przeglądarkami czy takimi rozdzielczościami monitorów na mojej stronie nieco rozjeżdżają się elementy. Których normalnie nie ma na np: rozdzielczości 1024 na 768 jest normalnie a na 1440x900 menu górne się rozjeżdża i kilka innych elementów . Domyślam się że coś mogłem namieszać w kodzie i trzeba by było usztywnić nieco wartości aby tak się nie działo. Dla mnie to trudne ale może ktoś wie co może powodować takie problemy i jakie wartości pozamieniać żeby działało normalnie.

Rozjeżdżą się wiele podstron ale zależy mi jedynie na indexie jeśli z nim mi pomożecie z resztą sobie poradzę…

Tu proszę sprawdzać kod źródłowy: http://www.gametronik.pl

A to cały plik style.css

* { margin:0; padding:0;}

body { background:url(images/body-bg.gif) left 3px #28262b; font-family:Arial, Helvetica, sans-serif; font-size:100%; line-height:.875em; color:#89888c; }


input, textarea { font-family:Arial, Helvetica, sans-serif; font-size:1em;}


#page1 #content .col-1 {width:280px; margin-right:10px; margin-bottom:5px;}


.coll { float: left; width:280px; }

.colr{ float: right; width:280px; }

.col-1, .col-2{ margin-bottom:5px; width:280px; display:block; }

.col-1 .box9, .col-2 .box9 { width:280px; }


.wsb {

  background-color:#2E2C30;

    color:#999999;

    border:1px solid #999999;

    width:110px;

    height:18px;

    font-family: Curier New,Arial,sans-serif;

    padding-top:4px;

    padding-left:4px;

}


.downmen

img:hover {border:1px solid #FFD200;}

img {border:1px solid #fff;}


.komimage {

    float: right;

    width: 100px;

    background: #000 url('images/komimage.png') top left no-repeat;

    text-align: center;

}


.komimage span { float: right; margin-right: 4px; }


.strnox {

    float: right;

    width: 249px;

    height: 30px;

    background: #000 url('str_g/pak.png') top left no-repeat;

    text-align: left;

    display: block;

    margin-right: 9px;


}

.strnox span {margin:8px 0 0 5px;display:inline-block;}


.strnox1 {

    float: right;

    width: 249px;

    height: 30px;

    background: #000 url('str_g/pak1.png') top left no-repeat;

    text-align: left;

    display: block;

    margin-right: 9px;

}

.strnox1 span {margin:8px 0 0 5px;display:inline-block;}


.pdzb {

    float: right;

    width: 271px;

    height: 8px;

    background: #38363A top left no-repeat;

    text-align: left;

    display: block;

    margin-right: 9px;

}




.dzb {

    float: right;

    width: 271px;

    height: 30px;

    background: #38363A url('str_g/dzb.png') top left no-repeat;

    text-align: left;

    display: block;

    margin-right: 9px;

}

.dzb span {margin:-2px 0 0 9px;display:inline-block;}


.dzb1 {

    float: right;

    width: 271px;

    height: 25px;

    background: #38363A url('str_g/dzb.png') top left no-repeat;

    text-align: left;

    display: block;

    margin-right: 9px;

}

.dzb1 span {margin:-3px 0 0 9px;display:inline-block;}


.dzb2 {

    float: right;

    width: 276px;

    height: 30px;

    background: #38363A url('str_g/dzb1.png') top left no-repeat;

    text-align: left;

    display: block;

    margin-right: 9px;

    margin-top: 8px;

}

.dzb2 span {margin:-3px 0 0 9px;display:inline-block;}



.dzb3 {

    float: right;

    width: 280px;

    height: 30px;

    background: #38363A url('str_g/dzb1.png') top left no-repeat;

    text-align: left;

    display: block;

    margin-right: 9px;

    margin-top: 8px;

}

.dzb3 span {margin:-3px 0 0 9px;display:inline-block;}



.dzb4 {

    float: right;

    width: 271px;

    height: 30px;

    background: #38363A url('str_g/dzb1.png') top left no-repeat;

    text-align: left;

    display: block;

    margin-right: 9px;

}

.dzb4 span {margin:-2px 0 0 9px;display:inline-block;}


.flashimage {

    width: 77px; height: 85px;

    background: #38363A url('images/flashimage.png') 0 0 no-repeat;

    text-align: center;


}


.flashimage img { margin-top:7px;}


.fleft { float:left;}

.fright { float:right;}

.clear { clear:both;}


.alignright { text-align:right;}

.aligncenter { text-align:center;}


.wrapper, block { width:100%; overflow:hidden;}

.container { width:100%;}


p { margin-bottom:14px;}


.tail-top { background:url(images/tail-top.jpg) left top repeat-x;}


blank {

width:100px;

height:100px;

background:#1b1714 url('images/abcd.jpg');

border:1px solid #555038;

}


gk1 {

float: left;

}


gk2 {

float: left;

margin-left: 50px;

}



#lewa {

float: left;

}

#prawa {

float: left;

margin-left: 90px;

}


#lewa_fl {

float: left;

}

#prawa_fl {

float: left;

margin-left: 90px;

}



/*==================forms====================*/

input, select { vertical-align:middle; font-weight:normal;}

img {border:0; vertical-align:top; text-align:left;}


#search-form .search-input { background:url(images/search-input.gif) no-repeat left top; padding:4px 3px 5px 3px; width:162px; border:0; margin-right:2px; color:#89888c;}


.form { height:26px;}

.form input {width:273px; height:18px; background:#1b1714; border:1px solid #555038;}

textarea { width:403px; height:128px; background:#1b1714; overflow:auto; border:1px solid #555038;}


/*==================list====================*/

ul { list-style:none;}


#top-menu { width:100%; overflow:hidden;}

#top-menu li { margin-left:-2px; float:left;}

#top-menu li a { display:block; font-size:1.1em; color:#CCCCCC; text-decoration:none; text-transform:uppercase; font-weight:bold; background:url(images/divider.gif) no-repeat left top; width:122px; text-align:center; line-height:38px;}

#top-menu li a:hover { background:#111; background:url(images/mainmenu2.png) left top repeat-x; color:white;}


#site-nav li { display:inline;}

#site-nav li a { display:block; background:url(images/site-menu-bg.png) no-repeat left top; width:210px; height:28px; font-size:1.1em; color:#e8e8e8; text-transform:uppercase; text-indent:18px; text-decoration:none; line-height:27px; margin-top:3px;}

#site-nav li a:hover { text-decoration:underline;}


#login-form .input { width:110px; padding:4px 4px 4px 5px; background:url(images/login-input.gif) no-repeat left top; border:0; color:#969299; margin-right:2px;}

#login-form div { height:25px;}


#brim .input { width:110px; padding:4px 4px 4px 5px; background:url(images/login-input.gif) no-repeat left top; border:0; color:#969299; margin-right:2px;}

#brim div { height:25px;}


.list1 { margin-bottom:8px;}

.list1 li { background:url(images/png_point.png) left top; //background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/png_point.png', sizingMethod='scale',enabled=true); width:100%; margin-bottom:2px;}

.list1 li p { padding:17px 18px 26px 24px; margin:0;}

.list1 li p.alt { padding-bottom:24px;}

.list1 li span.alt { padding-bottom:0;}

.list1 li p.alignright { padding:10px 10px 20px 0; text-align:right;}

.list1 li p a { color:#89888c; text-decoration:none; display:block;}

.list1 li p a:hover { color:#fff; text-decoration:underline;}

.list1 li span { display:block; background:url(images/marker.gif) no-repeat left 3px; padding:0 0 10px 15px; margin-left:-15px; }

.list1 li strong { color:#FFD200

; font-weight:normal;}

.list1 li em { color:#3787A8; font-style:normal;}

.list1 li em a {color:#3787A8;}


.list2 li { background:url(images/line-hor.gif) left bottom repeat-x; padding-bottom:19px; margin-bottom:10px; width:100%; overflow:hidden; color:#000;}

.list2 li img.fleft { margin:0 8px 0 0;}

.list2 li img { margin-right:2px;}

.list2 li span { color:#000; display:block; padding-bottom:8px;}

.list2 li span.alt { padding-bottom:0;}

.list2 li em { color:#fff; font-style:normal;}

.list2 li a.link2 { color:#d2dc3f; text-decoration:underline;}

.list2 li a.link2:hover { text-decoration:none;}

.list2 li a.link3 { color:#f39a11;}


.list3 li { background:url(images/line-hor1.gif) left bottom repeat-x; padding-bottom:22px; margin-bottom:10px; width:100%; overflow:hidden;}

.list3 li img.fleft { margin:0 13px 0 10px;}

.list3 li span { color:#000; display:block; padding-bottom:8px;}


.list4 { padding:0 0 0 9px;}

.list4 dt { font-size:1.2em; color:#b0ba1a; padding-bottom:4px;}

.list4 dd { padding-bottom:16px;}

.list4 dd a {color:#89888c; text-decoration:underline;}

.list4 dd a:hover { text-decoration:none;}


.list5 li { left bottom repeat-x; padding-bottom:5px; margin-bottom:0px; width:100%; overflow:hidden;}

.list5 li img.fleft { margin:0 10px 0 5px;}

.list5 li span { color:#000; display:block; padding-bottom:8px;}


.list6 { padding:0 0 0 4px;}

.list6 img { margin-right:8px; }

.list6 dt { font-size:1.2em; color:#b0ba1a; padding-bottom:4px;}

.list6 dd { padding-bottom:16px;}

.list6 dd a {color:#89888c; text-decoration:underline;}

.list6 dd a:hover { text-decoration:none;}


/*==================other====================*/

.img-indent { margin:0 20px 0 0; float:left;}

.img-box { width:100%; overflow:hidden; padding-bottom:20px;}

.img-box img { float:left; margin:0 20px 0 0;}


.p2 { margin-bottom:6px;}


.quick-links { color:#d2dc3f; text-align:center; line-height:1.9em;}

.quick-links a { color:#c1c1c1; text-transform:uppercase;}


/*==================txt, links, lines, titles====================*/

a {color:#3787A8; text-decoration:none;}

a:hover { text-decoration:underline;}


h1 { font-size:3em; color:#fff; line-height:1em; letter-spacing:-1px;}

h1 a { color:#fff; text-decoration:none;}

h1 a:hover { text-decoration:none;}

h1 span { font-size:10px; color:#b3b0b4; display:block; position:relative; margin-top:-3px; letter-spacing:0;}

h2 { font-size:1.6em; color:#d6d5d6; margin-bottom:11px;}

h3 { color:white; font-size:1.6em; line-height:1em;}

h4 { font-size:1.2em; font-weight:normal; color:#89888C; padding:8px 0 5px 0}

h4 a {color:#FFD200; text-decoration:none;}

h4 a:hover { color:#fff;}

h5 { font-size:1.2em; color:#d2dc3f; font-weight:normal; padding:7px 0 0 0;}

h5 a { color:#3787A8; text-decoration:none; font-weight:bold;}

h5 a:hover { text-decoration:underline;}


.extra-link { float:right;}

.extra-link em { font-style:normal;}

.extra-link .left { background:url(images/link1-left.gif) no-repeat left top; display:block; float:left;}

.extra-link .right { background:url(images/link1-right.gif) no-repeat right top; height:20px; display:block; float:left; height:21px; padding:0 15px 0 10px;}

.extra-link a { background:url(images/link1-bg.gif) left top repeat-x; text-transform:uppercase; text-decoration:none; color:#e5e5e5; height:20px; display:inline-block; line-height:0px; cursor:pointer; letter-spacing:-1px; padding-right:2px;}

.extra-link a:hover { color:#3787A8;}


.title-box { background:url(images/title-bg.gif) left top repeat-x; width:100%; margin-bottom:3px;}

.title-box .left { background:url(images/title-left.gif) no-repeat left top;}

.title-box .right { background:url(images/title-right.gif) no-repeat right top; height:40px;}

.title-box h2 {padding:13px 0 0 20px; margin:0;}


.title-box2 { background:url(images/title-bg.gif) left top repeat-x; width:100%; margin-bottom:0px;}

.title-box2 .left { background:url(images/title-left.gif) no-repeat left top;}

.title-box2 .right { background:url(images/title-right.gif) no-repeat right top; height:30px;}

.title-box2 h2 {padding:8px 0 0 20px; margin:0;}


.top-game-box { width:100%; overflow:hidden;}

.top-game-box h1 { padding:0 0 9px 11px; float:left;}

.top-game-box .rating { float:right; padding:9px 18px 0 0; color:#b3b0b4;}

.top-game-box .rating img { margin-left:2px;}

.top-game-box .rating p { margin-bottom:11px;}

.top-game-box .rating span { color:#d8d6d8;}



/*==================boxes====================*/

.box { background:url(images/box-bg.gif) left top repeat-x #38363a; width:100%; margin-bottom:17px;}

.box .border-top {background:url(images/border-top.gif) repeat-x top;}

.box .border-bot {background:url(images/border-bot.gif) repeat-x bottom;}

.box .border-left {background:url(images/border-left.gif) repeat-y left;}

.box .border-right {background:url(images/border-right.gif) repeat-y right;}

.box .left-top-corner {background:url(images/left-top-corner.gif) no-repeat left top;}

.box .right-top-corner {background:url(images/right-top-corner.gif) no-repeat right top;}

.box .left-bot-corner {background:url(images/left-bot-corner.gif) no-repeat left bottom;}

.box .right-bot-corner {background:url(images/right-bot-corner.gif) no-repeat right bottom; }

.box .inner { padding:13px 0 20px 10px;}


.box1 { background:url(images/box1-bg.gif) left top repeat-x #343236; width:100%;}

.box1 .border-bot {background:url(images/border-bot1.gif) repeat-x bottom;}

.box1 .border-left {background:url(images/border-left1.gif) repeat-y left;}

.box1 .border-right {background:url(images/border-right1.gif) repeat-y right;}

.box1 .left-top-corner {background:url(images/left-top-corner1.gif) no-repeat left top;}

.box1 .right-top-corner {background:url(images/right-top-corner1.gif) no-repeat right top;}

.box1 .left-bot-corner {background:url(images/border-bot1.gif) no-repeat left bottom; }

.box1 .inner { padding:13px 0 20px 10px;}

.box1 .inner1 { padding:13px 20px 20px 10px;}

.box1 h3 { background:url(images/line-hor2.gif) left bottom repeat-x; padding:0 0 16px 9px; margin-bottom:10px; color:#9999;}


.box2 { background:url(images/box2-bg.gif) left top repeat-x #3f3d40; width:100%; margin-bottom:7px;}

.box2 .border-bot {background:url(images/border-bot2.gif) repeat-x bottom;}

.box2 .border-left {background:url(images/border-left2.gif) repeat-y left;}

.box2 .border-right {background:url(images/border-right2.gif) repeat-y right;}

.box2 .left-top-corner {background:url(images/left-top-corner2.gif) no-repeat left top;}

.box2 .right-top-corner {background:url(images/right-top-corner2.gif) no-repeat right top;}

.box2 .left-bot-corner {background:url(images/left-bot-corner2.gif) no-repeat left bottom; }

.box2 .right-bot-corner {background:url(images/right-bot-corner2.gif) no-repeat right bottom; }

.box2 .inner { padding:16px 8px 12px 7px;}


.box3 { background:url(images/box3-bg.gif) left top repeat-x #38363a; width:100%; margin-bottom:7px;}

.box3 .border-bot {background:url(images/border-bot3.gif) repeat-x bottom;}

.box3 .border-left {background:url(images/border-left3.gif) repeat-y left;}

.box3 .border-right {background:url(images/border-right3.gif) repeat-y right;}

.box3 .left-top-corner {background:url(images/left-top-corner3.gif) no-repeat left top;}

.box3 .right-top-corner {background:url(images/right-top-corner3.gif) no-repeat right top;}

.box3 .left-bot-corner {background:url(images/left-bot-corner3.gif) no-repeat left bottom; }

.box3 .inner { padding:10px 6px 10px 10px;}


.box13 { background:url(images/box3-bg.gif) left top repeat-x #38363a; width:100%; margin-bottom:10px;}

.box13 .border-bot {background:url(images/border-bot3.gif) repeat-x bottom;}

.box13 .border-left {background:url(images/border-left3.gif) repeat-y left;}

.box13 .border-right {background:url(images/border-right3.gif) repeat-y right;}

.box13 .left-top-corner {background:url(images/left-top-corner3.gif) no-repeat left top;}

.box13 .right-top-corner {background:url(images/right-top-corner3.gif) no-repeat right top;}

.box13 .left-bot-corner {background:url(images/left-bot-corner3.gif) no-repeat left bottom; }

.box13 .inner { padding:6px 6px 0px 10px;}


.box4 { background:url(images/box4-bg.gif) left top repeat-x #565457; width:100%;}

.box4 .border-bot {background:url(images/border-bot4.gif) repeat-x bottom;}

.box4 .border-left {background:url(images/border-left4.gif) repeat-y left;}

.box4 .border-right {background:url(images/border-right4.gif) repeat-y right;}

.box4 .left-top-corner {background:url(images/left-top-corner4.gif) no-repeat left top;}

.box4 .right-top-corner {background:url(images/right-top-corner4.gif) no-repeat right top;}

.box4 .left-bot-corner {background:url(images/left-bot-corner4.gif no-repeat left bottom; }

.box4 .right-bot-corner {background:url(images/right-bot-corner4.gif) no-repeat right bottom; }

.box4 .inner { padding:20px 10px 10px 10px;}

.box4 h3 { background:url(images/line-hor.gif) left bottom repeat-x; padding:0 0 16px 9px; margin-bottom:10px;}


.box5 { background:url(images/box5-bg.gif) left top repeat-x #171718; width:100%; color:#89888c;}

.box5 .left-top-corner {background:url(images/left-top-corner5.gif) no-repeat left top;}

.box5 .right-top-corner {background:url(images/right-top-corner5.gif) no-repeat right top;}

.box5 .left-bot-corner {background:url(images/left-bot-corner5.gif) no-repeat left bottom; }

.box5 .right-bot-corner {background:url(images/right-bot-corner5.gif) no-repeat right bottom; }

.box5 .inner { padding:20px 10px 10px 10px;}

.box5 h3 { background:url(images/line-hor1.gif) left bottom repeat-x; padding:0 0 16px 9px; margin-bottom:10px; color:#3787A8;}


.box6 {background:url(images/png_point.png) left top; //background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/png_point.png', sizingMethod='scale',enabled=true); width:100%;}

.box6 .inner { padding:17px 20px 21px 24px;}


.box7 { background:url(images/box4-bg.gif) left top repeat-x #565457; width:100%;}

.box7 .border-bot {background:url(images/border-bot4.gif) repeat-x bottom;}

.box7 .border-left {background:url(images/border-left4.gif) repeat-y left;}

.box7 .border-right {background:url(images/border-right4.gif) repeat-y right;}

.box7 .left-top-corner {background:url(images/leftlog.png) no-repeat left top;}

.box7 .right-top-corner {background:url(images/rightlog.png) no-repeat right top;}

.box7 .left-bot-corner {background:url(images/leftlog.png) no-repeat left bottom; }

.box7 .right-bot-corner {background:url(images/rightlog4.png) no-repeat right bottom; }

.box7 .inner { padding:20px 10px 10px 10px;}

.box7 h3 { background:url() left bottom repeat-x; padding:0 0 0px 0px; margin-bottom:10px; color:#fffff;}


.box8 { background:url(images/komentlo.png) left top repeat-x #171718; width:100%; color:#89888c;}

.box8 .left-top-corner {background:url(images/left-top-corner5.gif) no-repeat left top;}

.box8 .right-top-corner {background:url(images/right-top-corner5.gif) no-repeat right top;}

.box8 .left-bot-corner {background:url(images/left-bot-corner5.gif) no-repeat left bottom; }

.box8 .right-bot-corner {background:url(images/right-bot-corner5.gif) no-repeat right bottom; }

.box8 .inner { padding:20px 10px 10px 10px;}

.box8 h3 { background:url(images/line-hor1.gif) left bottom repeat-x; padding:0 0 16px 9px; margin-bottom:10px; color:#3787A8;}


.box9 { background:url(images/box5-bg.gif) left top repeat-x #171718; width:100%; color:#89888c;}

.box9 .left-top-corner {background:url(images/left-top-corner5.gif) no-repeat left top;}

.box9 .right-top-corner {background:url(images/right-top-corner5.gif) no-repeat right top;}

.box9 .left-bot-corner {background:url (images/left-bot-corner5.gif) no-repeat left bottom; }

.box9 .right-bot-corner {background:url(images/right-bot-corner5.gif) no-repeat right bottom; }

.box9 .inner { padding:8px 5px 5px 5px;}

.box9 h3 { left bottom repeat-x; padding:5 0 8px 5px; margin-bottom:5px; color:#3787A8;}


.box10 

.box10 .border-bot 

.box10 .border-left 

.box10 .border-right 

.box10 .left-top-corner 

.box10 .right-top-corner 

.box10 .left-bot-corner 

.box10 .inner { padding:6px 6px 0px 10px;}


.footer-box { background:url(images/footer-bg.gif) left top repeat-x; width:100%;}

.footer-box .left { background:url(images/footer-left.gif) left top repeat-x;}

.footer-box .right { background:url(images/footer-right.gif) no-repeat right top; height:46px;}

.footer-box p { margin:0; padding:13px 20px 0 0; text-align:right; text-transform:uppercase;}


/*header*/

#header .row-1 { height:105px;}

#header .row-1 .fleft { padding:5px 0 0 40px;}

#header .row-1 .fright { padding:45px 28px 0 0;}

#header .row-2 { height:38px; background:url(images/mainmenu.png) left top repeat-x; margin:0 9px;}



/*content*/

#content { padding:20px 9px 18px 9px;}


/*footer*/

#footer { padding:0 9px 0 9px; color:#7c7b7d;}

#footer a {color:#7c7b7d;}


/*==========================================*/
#2

Pokaż jakieś zdjęcie jak to ma wyglądać.

Jeżeli to menu ma być pod logiem (a na to wskazuje budowa strony) to do diva o class=“row-1” dopisz overflow:auto (można też by użyć clear:both dla niego bądź dla diva o class=“row-2” ).

#3

U mnie jest normalnie i powinno wyglądać tak :

http://img24.imageshack.us/img24/5120/56131435.jpg

Jak w skrypcie nadać określoną szerokość body bo to też na pewno by się przydało ?

#4

W pliku style.css znajdź i wywal //background:none; oraz to popraw

.box4 .left-bot-corner {background:url(images/left-bot-corner4.gif no-repeat left bottom; }
#5

Po pierwsze: proponuję tworzenie stron W PIERWSZEJ kolejności pod Firefox’a/Opere/Google Chrome/Safari - nigdy pod IE

Zobacz jak to wygląda pod Firefoksem to sie przerazisz.

Po drugie:

miedzy

i
wstaw

po trzecie:

dodaj styl na element który ma przechowywać obrazek w headerze, a najlepiej stwórz styl np. a:link#header_img, a:hover#header_img, a:visited#header_img … i nadaj mu styl: display: block; i nadaj mu jakieś margin-top: 5px; i margin-left: 50px;

po czwarte:

to samo z boksem przechowującym formularz szukania, tylko operujesz margin-top i margin-right;

po piąte:

zmien deklaracje linku w menu: z #top-menu li a na #top-menu li a, #top-menu li a:link, #top-menu li a:visited - cześć przeglądarek lubi konkretne określenie że chodzi o linki

po szóste:

na div ID=“content” zmien szerokość i ustaw margin: 0 auto; - wg mnie powinno byc: width: 840px; margin: 0 auto;

tyczy to się także headera i footera - nie wiem czemu nie mają ustawionej konkretnej szerokości :confused:

PZDR

#6

mrbungle też na początku myślałem o braku clear/overflow (choć w formie jaka Ty podałeś to tylko dodatkowe zaśmiecanie kodu) ale kloc221 w pliku style.css ma poważny błąd, który pod ff blokuje dalsze poprawne wyświetlanie stylów. Wystarczy że zamknie ten nawias i usunie te dziwne wpisy z // i wszystko powinno się samo ustawić no chyba, że ma więcej takich błędów tam (bo pod operą strona działa).

#7

Zrobiłem wszystko co napisał M@rio…

Lecimy dalej od czego by tu zacząć ?

#8

Ten błąd nie był związany z rozdzielczością (bo opera nie miała problemów z tą stroną). Poprawiłeś to co napisałem i u mnie strona wyświetla się już poprawnie w ff. A skoro reszta się poprawnie wyświetla to jak dla mnie sensu poprawiać czegokolwiek nie ma (no chyba że coś się sypie pod innymi przeglądarkami).

#9

No ale skoro to co opisał mi mrbungle są jakimiś błędami to warto było by to także naprawić ? Tylko właśnie jak i od czego zacząć ?

#10

Będę się odwoływał do wpisów powyżej

Po drugie:

Problem nie istnieje ale dla pewności możesz dodać to co napisałem w pierwszym poście.

po czwarte

Problem nie istnieje. Element ten ma nadane padding ale wcześniej było to niewczytywane przez ten błąd z nawiasem.

po piąte:

Bez różnicy jak zostawisz.

po szóste

Bo przybierają szerokość głównego boxa, normalny zabieg.

#11

Nie przejrzałem dokładnie kodu CSS, bo używałem firebuga, który wiadomo jak interpretuje. Jeśli ta naprawa niweluje me poprawiki to spoko - nie ma nad czym dywagować.

jednak co do deklaracji :

#top-menu li a, #top-menu li a:link, #top-menu li a:visited

bym wszedł w polemikę, bo ostatnio nawet miałem CSS poprawny składniowo, ale inaczej reagował niz powinien, mimo, że miał zadeklarowane “teoretycznie” prawidłowo. Chodzi tutaj szczególnie i kompozycje typu tag a.klasa itp + z właściwościami typu: background-color, color i ogolnie background. Wiec wybacz, ale będę obstawiał przy swoim. Chyba, że ma tu znaczenie struktura dokumentu HTML i ma znaczenie wersja FF (używałem wtedy 3.5.7).

Jak wspomniałem, kolejne zmiany dotyczyły błędnego CSS… więc po co to namiętne wyliczanie z Twojej strony? To było w stylu “zobacz jaki jestem…” no właśnie… ehhhhhhhhh

#12

Te wyliczenia były dla kloc221 aby uświadomić mu iż (w moim odczuciu) problemu/błędu nie ma, bądź samoistnie się naprawił (po zamknięciu tego nawiasu) a nie aby kogoś zgnoić.

#13

Dobra strona już chodzi pod wysokimi rozdzielczościami ale teraz jest problem z działaniem pod niższe kumpel mi doniósł że np na 17 calowym monitorze na rozdzielczości 1024 na 768 coś na stronie się psuje i wszystko sie nieco rozciąga a środek zjeżdża pod menu z lewej. Nie interesują mnie proste błędy które za bardzo nim nie zmieniają ale w kodzie musi tkwić coś poważniejszego.

kod strony: www.gametronik.pl

style.css : www.gametronik.pl/style.css

layout.css www.gametronik.pl/layout.css

#14

To moze przepuść stronę przez walidatora i to samo z CSS? tak bedziesz wiedział w czym jest problem?

Tak teraz patrzę i widzę, że należało by krok po kroku przewałkowac, bo wywaliło 51 errorów… pamietaj, że kolejne mogą być efektem pojawienia poprzednich.

nie wiedziałem, że CSS validator jest po polsku :smiley:

http://jigsaw.w3.org/css-validator/vali … lang=pl-PL

#15

Z tego co widzę strona sypie się pod ie6 (nie wiem jak nowsze). W kodzie strony odnajdź to

i przenieś wszystko pomiędzy tag i dopisz

Czyli całość powinna tak wyglądać

W folderze bade stwórz plik style_ie.css i dopisz do niego

#featured {padding-right:187px;}

Oczywiście nazwa i położenie tego pliku jest dowolne.Powinno pomóc.

Ale mogą. Wrzuć wszystko do validatora i popraw błędy jakie Ci wskaże.

#16

ie7 i ie8 wyświetlają dobrze… o dziwo.

zrób jak mario@ napisał + validator HTML i CSS

#17

No dobra kawałek kodu poprawiłem kilka elementów wywaliłem wszystko na stronie działa i zostały mi dwa błędy w css których nie umiem poprawić. Jak je naprawić i co dalej ??

http://jigsaw.w3.org/css-validator/vali … lang=pl-PL

#18

W .body - algin:center czy center:center - w css nie istnieją

klasa .list5 li -> left bottom repeat-x; wywal to

A wrzucając do validatora cały css dochodzą dodatkowo

plik layout.css -> -< wywal to

co do takiej informacji - Właściwość behavior nie istnieje : url(“iepngfix.htc”) url(“iepngfix.htc”), jakbyś sprawdził całość, wynika ona z tego iż użyłeś czegoś czego validator ustawiony na css2.1 nie rozumie (przy css3 “błędu” nie będzie).

Teraz wypada poprawić błędy w składni xhtml.

#19

A jak wrzucić do tego valiatora stronę ? Index mogę nie koniecznie poprawiać bo jutro albo po jutrze zamienię go na nowy index który jest w pliku http://www.gametronik.pl/nexindex.php

#20

http://validator.w3.org/