+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [css] Div obok diva (/thread-css-div-obok-diva)
[css] Div obok diva - Mtk - 05-10-2012
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?:>
RE: [css] Div obok diva - camelrafal - 05-10-2012
daj rightbox'a przed content1
RE: [css] Div obok diva - Kartofelek - 05-10-2012
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"
RE: [css] Div obok diva - Mtk - 05-10-2012
(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ć,
RE: [css] Div obok diva - camelrafal - 05-10-2012
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
RE: [css] Div obok diva - Mtk - 06-10-2012
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ę
genialne rady i na pewno je zapamiętam 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
RE: [css] Div obok diva - camelrafal - 06-10-2012
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
RE: [css] Div obok diva - Mtk - 07-10-2012
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
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