Zaloguj się

**Kartofelek** · 25-01-2011, 15:39

opcja 1)

<div position:relative width:900 margin:0 auto>
<div position:absolute></div>
</div>

opcja 2

<div position:absolute; left:50%; width:900px; margin-left:-450px;>
</div>

Nie kłóćcie się ;]

Pluto · (Ten post był ostatnio modyfikowany: 25-01-2011, 15:59 przez Pluto.)

HTML

Kod:
<!DOCTYPE html>

<html lang="$ContentLocale">

  <head>

        <% base_tag %>

        <title><% if MetaTitle %>$MetaTitle<% else %>$Title<% end_if %> &raquo; $SiteConfig.Title</title>

        $MetaTags(false)

        <link rel="shortcut icon" href="/favicon.ico" />

        <% require themedCSS(layout) %> 

        <% require themedCSS(typography) %> 

        <% require themedCSS(form) %> 

        <!--[if IE 6]>

            <style type="text/css">

             @import url(themes/blackcandy/css/ie6.css);

            </style> 

        <![endif]-->

    </head>

<body>

<div id=background_1>

        <a><img src="themes/web/images/background_1.png"</a>

</div>

<div class=logo>

            <a href="home/" title="Zapraszam do zapoznania się z moja stroną."><img src="themes/web/images/logo_1.png"></a>

        </div>

<div id=nav>

    <a><img src="themes/web/images/menu_1.png"></a>

</div>

<div class=menu>

</div>

<div id=box_1>

    <a><img src="themes/web/images/box_1.png"></a>

</div>

<div id=box_2>

    <a><img src="themes/web/images/box_2.png"></a>

</div>

<div class=przycisk_l>

    <a><img src="themes/web/images/przycisk_l.png"></a>

</div>

<div class=przycisk_p>

    <a><img src="themes/web/images/przycisk_p.png"></a>

</div>

$Layout

</body>

</html>

CSS

Kod:
/*       CSS RESET          */

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, header, footer, section, aside, nav, article, figure, time, legend {margin: 0; padding: 0; border: 0; outline: 0; font-family: Steinem, Lucida, Arial, sans-serif; font-size:100%; vertical-align: baseline;}

:focus {outline: 0;}

body {background:  #191919;  font-size: 14px; color: #333333; line-height: 18px;}

ol, ul {list-style: none;}  

table {border-collapse: collapse; border-spacing: 0;} 

caption, th, td {text-align: left; font-weight: normal;} 

blockquote:before, blockquote:after, q:before, q:after {content: "";}

blockquote, q {quotes: "" "";}

header, footer, section, aside, nav, article, figure, time, legend {display:block;}

@font-face {

    font-family: Steinem;

    src: url('../font/STEINEMU.ttf');

}

.clear {clear: both;}

.clear2 {clear: none;}

/* CSS SCHEMAT

-------------------------------------------- */

@import url(reset.css);

#background_1 { margin:0 0 0 300px; width: 1020px; height: 1020px; position:absolute ;top:0; }

.logo {width:661px ; height:110px;  margin: 30px 0 0 330px  ; position:relative;}

#nav { width:1030px; height:130px;  position:relative ;  margin: 20px 0 0 294px;}     

#ul { top:0}                                                    

#box_1 {float:left; clear: both; width:965px; height:230px ;margin: 0 0 0 330px  ;position:relative ; top:;}

#box_2 { width:965px; height:430px ;padding: 0 0 0 330px ;position: relative ; top:; }

.przycisk_l { width:50px; height:50px; position:absolute ;margin: 150px 0 0 1150px ; } 

.przycisk_p { width:50px; height:50px; position:absolute; margin: 150px 0 0 1200px; }

/* COMMENTS

---------------------------------------- */

#CommentHolder ul {

    list-style: none;

    margin: 20px 0;

}

#PageComments li {

    margin: 5px 0;

    padding: 1px;

    width: 88%;

}

    #PageComments li.odd {

        background: #E8F6FF url(../images/commentBg.png) no-repeat 1% 10%;

        padding-left: 40px;

        padding-right: 10px;

        border-bottom: 2px solid #BCE4FE;

    }

    #PageComments li.even {

        background: #fff url(../images/commentBgAlt.png) no-repeat 99% 10%;

        padding-right: 40px;

        padding-left: 10px;

    }

        #PageComments li.odd p.info {

            color: #3AA0C3;

        }

        .actionLinks li {

           display: inline;

           border-right: 1px solid #ddd;

        }

            .actionLinks li a {

                padding-right: 3px;

                font-size: 10px;

            }

               .actionLinks li.last {

                  border-right: none;

               }

.commentrss {

    background: transparent url(../images/feed-icon-14x14.png) no-repeat;

    padding-left: 20px;

    font-size: 1.1em;

    line-height: 1.6em;

}

#PageCommentsPagination p {

    text-align: center;

    font-size: 1.2em;

}

#PageComments p {

    font-size: 1em;

    margin: 8px 0;

}

    #PageComments p.info {

        color: #999;

        margin: 0px;

        padding: 0;

        line-height: 1em;

        font-size: 0.9em;

    }

#PageCommentInterface_Form_PostCommentForm_action_postcomment {

    margin-bottom: 20px;

}

/* SEARCH RESULTS STYLES

------------------------------------------------ */

ul#SearchResults {

    margin: 10px 0;

}

    ul#SearchResults li {

        list-style: none;

        margin: 5px 0;

        font-size: 1em;

    }

/* SEARCH FORM 

-----------------------------------------------*/

#SearchForm_SearchForm {

    float: right;

    width: 240px;

    margin: 5px;

}

    #SearchForm_SearchForm .middleColumn {

        float: left;

        width: 164px;

        margin: 0 5px 0 0;

        padding: 2px;

        background-color: #51a9df;

    }

        #SearchForm_SearchForm .middleColumn input.text {

            width: 160px;

            border: none;

            color: #666;

        }

    #SearchForm_SearchForm #SearchForm_SearchForm_action_results {

        float: left;

        margin-top: 2px;

    }

/* MESSAGEBOXS

--------------------------------------------- */

.message {

    margin: 15px;

    padding: 5px;

    width: 92%;

    color: #979908;

    border: 4px solid #F7F8B4;

    background: #FFFFEA;

}

span.middleColumn .message {

    margin: 4px 0 0 3px;

}

.required {

    margin: 4px 0 0 3px;

    padding: 5px;

    width: 92%;

    color: #DC1313;

    border: 4px solid #FF7373;

    background: #FED0D0;

}

p#Remember label {

    margin: -24px 0 0 20px;

    text-align: left;

}

.entry {

    border-bottom: 1px solid #eee;

}

.typography #Content p.authorDate {

    color: #444;

    margin-top: -15px;

    }

/* UNSUBSCRIBE NEWSLETTER

------------------------------------------------ */

#Unsubscribe_MailingListForm_MailingListForm{

    min-height:100px;

}

    #Unsubscribe_MailingListForm_MailingListForm p{

        margin:0 !important;

        padding:10px;

    }

        #Unsubscribe_MailingListForm_MailingListForm p label{

            display: inline;

        }

    #Unsubscribe_MailingListForm_MailingListForm label{

        margin:0;

    }

1680x1050
http://img408.imageshack.us/i/forum1hb.png/

1024x768
http://img521.imageshack.us/f/forum2fi.png/

Lepiej już opisać nie umiem.

Ancik · 25-01-2011, 16:20

Nie rozumiem w czym problem, na obu screenach wygląda tak samo?

Pozdrawiam.

Pluto · (Ten post był ostatnio modyfikowany: 25-01-2011, 16:24 przez Pluto.)

AHA

Panie programista, zobacz, że na ss 1024x768 po prawej stronie jest 300px pusty pasek a po prawej go nie ma. Chcę, żeby tego nie było bo nie wygląda to schludnie.

Ancik · (Ten post był ostatnio modyfikowany: 25-01-2011, 17:51 przez Ancik.)

Cytat:Panie programista, zobacz, że na ss 1024x768 po prawej stronie jest 300px pusty pasek a po prawej go nie ma.

Ok i nie chodzi o to, że się po prostu czepiam.
Ty chcesz wyśrodkowac tą stronę czy co? Bo nawet w większej rozdzielczości zajmuje dziwną pozycję w przeglądarce.

Edit. Ten kod to w ogóle jest porażka. 330 pikselowy margines wychodzi Ci dlatego, że wszystkim diwom nadajesz margin 330px z lewej strony, a divy te nie są zawarte w żadnym innym kontenerze prócz body. Dlatego jest 330 pikselowy odstęp od lewej strony okna przeglądarki.

PS. Co ten margines ma na celu? Chciałeś wyśrodkowac w ten sposób stronę? Jeżeli tak, to usuń te wszystkie margin-left: 330px, włóż cały obecny szkielet strony w jednego diva i nazwij go np. .wrapper. Następnie nadaj mu odpowiednią szerokośc i margines z lewej i prawej na auto.

Pozdrawiam.

Pluto · 25-01-2011, 17:46

Opisujecie żeby dać position:absolute tylko, że wtedy tworzy sie ten 300px pasek po lewej stronie. Chcę, żeby ta strona wyglądała tak samo na każdej rozdzielczości. Czyli, że jak dam sobie 1024x768 to nie będzie potrzeby przesuwania dolnym sówakiem. Po prostu chcę, żęby sie nie tworzyły zbędne pixele.

nst · 25-01-2011, 17:49

Wrzuć wszystko do jednego kontenera i nadaj mu margines :auto;

Ancik · 25-01-2011, 17:51

Powyżej napisałem Ci już rozwiązanie.

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie