Zaloguj się

Mtk · 05-10-2012, 02:39

Chciałbym umieścić diva obok diva. A dokładniej chodzi o to, by rightBox był obok content1. RightBox ma być po prawej, a content1 po lewej, walcze z tym już drugi dzień i nie mogę sobie poradzić, próbowałem już z ustawianiem display:inline;, float:left in w obu divach, z clear:both, ale bez skutku
Obecnie to wygląda tak http://postimage.org/image/6hnv6027t/
css code

Kod:
@CHARSET "UTF-8";

body{

    font: normal 100% Helvetica, Arial, sans-serif;

    background-color:#4F4F4F;

    color: #000;

    font-size: 12px;    

}

img{

    width:100%;

}

.page{

    margin: 0 auto;

    max-width: 83em;

    background-image: url("../img/strona_tlo.jpg");

    background-position: center;

    background-repeat: repeat-y;

}

.banner{

    width:100%;

    background-image: url("../img/banner_tlo.jpg");

    background-position:center;

    background-repeat:no-repeat;

    min-height:30px;

    height:130px;

}

.bannerText{

    margin-left: 0.5em;

    padding-top: 3em;

    font-size: 2em;

}

.menu{

    width:100%;

    font-size:1.25em;

    background-image:url("../img/menu_tlo.png");

    background-position:center;

    background-repeat: repeat-y;

}

a{

    margin: auto 0.5em;

    text-decoration: none;

    color: #000;

}

a:VISITED{

    text-decoration: none;

    color: #000;

}

a:HOVER{

    color: #555;

    text-decoration: underline;

}

.middle{

    min-height:300px;

    min-width:300px;

    max-width: 83em;

    background-image: url("../img/tloPage.png");

    background-position: center;

    background-repeat: repeat-y;

}

.content1{

    width:85.5%;

    float:left;

}

.belkaGorna{

    margin-top: 2em;

    margin-left:2em;

    height:25px;

    width:85.5%;

    background-image: url("../img/content1.png");

    background-repeat: no-repeat;

    background-position: left;

    float:left;

}

.content{

    margin-left: 2em;

    min-height:20em;

    float:left;

    width:85.5%;

    background-image: url("../img/content2.png");

    background-position: left;

    background-repeat: repeat-y;

    }

.contentHeader{

    margin-left:1em;

    font-size: 1.5em;

    font-family: Georgia,serif;

}

.belkaDolna{

    margin-left:2em;

    margin-bottom:2em;

    min-height:25px;

    float:left;

    width:85.5%;

    background-image: url("../img/content3.png");

    background-position: left;

    background-repeat: no-repeat;

}

.rightBox{

    float:right;

    min-height:10em;

    width:12.5%;

    background-image: url("../img/rb2.png");

    background-repeat: repeat-y;

    background-position: center;

}

.rightBoxheader{

    text-align: left;

    width:100%;

    background-image: url("../img/rb1.png");

    background-repeat: no-repeat;

    background-position: center;

}

.rightBoxTitle{

    font-size: 1.2em;

    margin: 0 0 0 10px;

    text-decoration: underline;

}

.footer{

    clear:both;

    height:100px;

    width:100%;

    background-image:url("../img/stopka_tlo.png");

    background-position: center;

    background-repeat: no-repeat;

}

.footerText{

    text-align:center;

    margin: 0 auto;

    font-size: 0.9em;

    height:6em;

    line-height: 4em;

    vertical-align: middle;

    font-weight: normal;

    color:#111;

    }

html code:

Kod:
<body>

<div class="page">                 

        <jsp:include page="/template/banner.jsp" />    

        <c:import url="/MenuServ" />

        <div class="middle">

        <div class="content1">

        <div class="belkaGorna"></div>

        <div class="content">

        <decorator:body />

        </div>

        <div class="belkaDolna" />

        </div>

        <div class="rightBox" ></div>

        </div>

        <jsp:include page="/template/footer.jsp" />

        </div>                            

</body>

Jakieś pomysły?:>

camelrafal · 05-10-2012, 03:54

daj rightbox'a przed content1

**Kartofelek** · 05-10-2012, 15:01

Nie. Nie dawaj Smile

W takich prostych przypadkach (jak i w większości) html nie powinien być uzależniony od css.

http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

Wpisz sobie w google "css 2 column layout"

Mtk · (Ten post był ostatnio modyfikowany: 05-10-2012, 21:33 przez Mtk.)

(05-10-2012, 15:01)Kartofelek napisał(a): Nie. Nie dawaj
W takich prostych przypadkach (jak i w większości) html nie powinien być uzależniony od css.

http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

Wpisz sobie w google "css 2 column layout"

Okazało się, że div content1 jest szeroki. Z prawej strony ma dowalony margines koło 100pikseli, próbowałem już mu ustawiac margin i padding na 0, ale dalej to jest. Próbowałem szerokość zmniejszyć, ale wtedy ucina mi content-właściwy.

jakieś pomysły?:>

Wrzuciłem kod html, css i obrazki na serwer darmowy:
Link: [url="http://emtekatest.cba.pl/"]http://emtekatest.cba.pl/[/url]

obramowany div to właśnie content1, jak widać jest strasznie duży prawy margines od krawędzi obrazka tła do krawędzi obramowania.

Box po prawej ma ustawioną tutaj szerokość ręcznie, tylko po to by się tam zmieścić,

camelrafal · (Ten post był ostatnio modyfikowany: 05-10-2012, 22:32 przez camelrafal.)

ale o co ci chodzi??

nie potrzebna ci belka górna ani belka dolna jak możesz zrobić jeden element i zaokrąglić mu rogi border-radius:20px;
ustawić border:1px solid; i na to samo wyjdzie

masz jednego diva content1 który ma szerokość 71em i drugiego w nim zawartego który ma szerokość 85% (z 71em) szerokości tego pierwszego i dlatego ci powstaje jakby margines

pousuwaj te wszytkie bordery marginesy ustaw szerokość contenta1 na 85% i rightboxa na 15%
potem ustaw szerokość content na 100% i zobacz co sie stanie

dodatkowo zrezygnuj z tego tła które ma określoną szerokość a wstaw co najwyżej samopowtarzające się tło kwadracik/teksturę lub na potrzeby nauki korzystaj z czystych kolorów aby widzieć co się dzieje na stronie

Mtk · (Ten post był ostatnio modyfikowany: 06-10-2012, 04:23 przez Mtk.)

Wielkie dzięki ! Nie wiedziałem o możliwości zaokrąglania rogów cssem - genialna sprawa. Zmniejszenie obrazka tła rozumiem ma na celu zaoszczędzenie megabajtów, dlatego też tak zrobię Smile

genialne rady i na pewno je zapamiętam Smile

A mógłbyś mi powiedzieć czemu nie korzystać z marginesów ? W sumie, marginesy i padding traktuje jako jedną z podstaw cssa (podawanych w % lub em), i nie wyobrażam sobie pozycjonowania nagłówków/paragrafów/div'ów bez marginesów i paddingu?

pozdrawiam

camelrafal · (Ten post był ostatnio modyfikowany: 06-10-2012, 15:55 przez camelrafal.)

nie chodzi mi o to żebyś nie korzystał z nich w ogóle
chodziło mi o to abyś je wywalił tylko na chwile żeby nie przeszkadzały ci w konstrukcji
bo jak ustawisz szerokość w procentach 85% i 15% to wszystko ładnie pasuje, jest ułożone obok siebie i nie ma miejsca na żadne dodatkowe piksele bo przestrzeń jest wykorzystana w 100%, czyli jak dodasz już chociaż 1px marginesu wszystko się zburzy tylko w tym konkretnym przypadku
aby zastosować margines i aby nie niszczyć konstrukcji możesz dodać nowego diva w środku tego którego szerokość jest podana w % i w nim , w tym nowym divie dopiero ustawić odpowiedni margines i odstępy od brzegu

ja nie jestem co prawda zwolennikiem ustawiania procentowego, wole mieć podane konkretne szerokości no ale jeżeli chcesz na procentach to musisz usunąć marginesy i stworzyć nowe divy w środku juz z marginesami

Mtk · 07-10-2012, 01:54

Staram się zrobić stronkę coś a la fluid layout, czyli trochę niezależną od rozdzielczości, jakbym robil wszystko w konkretnych wartościach to może nie byłoby problemu Wink

Po za tym stąd też wartości były w em lub w %, bo chce, żeby wszystko się zmniejszało w miarę możliwości.

Dzięki za rady, temat chyba do zamknięcia

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