Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] div obok diva
Forum PHP.pl > Forum > Przedszkole
Stjudent
4.10.2012, 21:15:03
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. Jeśli chodzi o divy to, div middle, jest po to żeby umieścić tło na całym środku, div gornaBelka i dolnaBelka sa po to, żeby umieścic belki z zaokrąglonymi rogami, div content1 grupuje gornabelke, content(tu jest zawartość właściwa) i dolnaBelke, div RightBox ma być boxem po prawej stronie od content1
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 czemu to nie chce zadziałaćquestionmark.gifsnitch.gif
b4rt3kk
4.10.2012, 21:22:23
Prawdopodobnie (bo nie chce mi się tego analizować wszystkiego, strasznie zagmatwane) jeden div nie mieści się obok drugiego, przeszkadzają mu marginesy, dlatego znajduje się nieco niżej. Ogólnie rzecz biorąc kontener je opakowujący jest zbyt wąski by je pomieścić obok siebie. Spróbuj nadać content1 width stałą np. 300px. Tak dla próby.
Stjudent
4.10.2012, 22:25:49
Cytat(b4rt3kk @ 4.10.2012, 22:22:23 ) *
Prawdopodobnie (bo nie chce mi się tego analizować wszystkiego, strasznie zagmatwane) jeden div nie mieści się obok drugiego, przeszkadzają mu marginesy, dlatego znajduje się nieco niżej. Ogólnie rzecz biorąc kontener je opakowujący jest zbyt wąski by je pomieścić obok siebie. Spróbuj nadać content1 width stałą np. 300px. Tak dla próby.


Próbowałem tego wcześniej, po zmianie szerokości content1, wszystko zostaje zmniejszone (wtedy trochę widać, że ten rightBox się nie mieści), tylko dziwi mnie fakt, że po zmianie z szerokosci w procentach na szerokość w pikselach, zmianie ulega też rightBox, który nie należy do tego diva.
b4rt3kk
4.10.2012, 23:13:47
Wszystko rozbija się o złe dopasowanie, jeden div nie mieści się obok drugiego.
szalek01
4.10.2012, 23:18:55 
[PHP] pobierz, plaintext 
  1. <div class="belkaDolna" /></div>
[PHP] pobierz, plaintext
Stjudent
4.10.2012, 23:21:39
Cytat(b4rt3kk @ 5.10.2012, 00:13:47 ) *
Wszystko rozbija się o złe dopasowanie, jeden div nie mieści się obok drugiego.


faktycznie, chociaż też problem był w <div class="dolnaBelka" />, bo po zmianie na <div class="dolnaBelka" ></div>, teoretycznie jest ok. Tylko teoretycznie bo z niewiadomych mi przyczyn, do diva content1 jest dodany po prawej stronie wielki margines (jakies 100px). Nijak nie mogę się go pozbyć - ustawiałem już margin na 0, padding na 0. Jestem pewny, że to on bo po wstawieniu obramowania na niego to właśnie taki większy kawałek się obramował.
Jeśli zmieniam jego (content1) szerokość, to wtedy ucina mi divy, które są w środku content1. Nie ogarniam dlaczego tak się dzieje :/
szalek01
4.10.2012, 23:47:27
Wystaw tego html + css gdzieś na sieć, tak by każdy mógł sobie firebugiem sprawdzić co tam masz.
Nie chodzi mi o cały twój projekt tylko o tpl.
Stjudent
5.10.2012, 11:25:58
Cytat(szalek01 @ 5.10.2012, 00:47:27 ) *
Wystaw tego html + css gdzieś na sieć, tak by każdy mógł sobie firebugiem sprawdzić co tam masz.
Nie chodzi mi o cały twój projekt tylko o tpl.



Z tym może być problem w tym momencie, bo strona jest javova, a nie kojarzę, aby gdzieś były darmowe hostingi. Mogę ewentualnie dać dostęp do teamviewer'a na priv i w tedy na localhoście mógłbyś sobie sprawdzić... chociaż z doświadczenia wiem, ze to chodzi dosyć powoli przez tv, system linux zainstalowany.
Shido
5.10.2012, 13:54:00
Powyciągaj tylko z niego tego HTMLa, CSSa i obrazki - tak by uzyskać czystą stronę bez javy. Bo może okazać się, że to ci właśnie java coś psuje.

U mnie (po dodaniu tylko kolorów tak by cokolwiek było widać w CSS) ten kod działa:
[HTML] pobierz, plaintext 
  1. <body>
  2. 	<div class="page">                 
  3. 		<jsp:include page="/template/banner.jsp" />    
  4. 		<c:import url="/MenuServ" />
  5.  
  6. 		<div class="middle">
  7. 			<div class="content1">
  8. 				<div class="belkaGorna"></div>
  9. 				<div class="content">
  10. 					<decorator:body />
  11. 				</div>
  12. 				<div class="belkaDolna"></div>
  13. 			</div>
  14. 			<div class="rightBox" ></div>
  15. 		</div>
  16.  
  17. 		<jsp:include page="/template/footer.jsp" />
  18. 	</div>                            
  19. </body>
[HTML] pobierz, plaintext
Stjudent
5.10.2012, 15:30:05
Zrobilem tak jak radziles, w sumie nie pomyślałem o tym, bez javy dalej jest tak samo.
Link: http://emtekatest.cba.pl/

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ć,

Shido próbowałem z Twoim rozwiązaniem i niestety tam także jest ten content1 szeroki.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.