Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [css] div obok diva, Jak to zrobić?
Stjudent
post 4.10.2012, 21:15:03
Post #1





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 24.05.2012

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 9)
b4rt3kk
post 4.10.2012, 21:22:23
Post #2





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

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.


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
Stjudent
post 4.10.2012, 22:25:49
Post #3





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 24.05.2012

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
b4rt3kk
post 4.10.2012, 23:13:47
Post #4





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

Wszystko rozbija się o złe dopasowanie, jeden div nie mieści się obok drugiego.


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
szalek01
post 4.10.2012, 23:18:55
Post #5





Grupa: Zarejestrowani
Postów: 129
Pomógł: 17
Dołączył: 17.09.2012

Ostrzeżenie: (0%)
----- 

[PHP] pobierz, plaintext 
  1. <div class="belkaDolna" /></div>
[PHP] pobierz, plaintext


--------------------
PDO nie gryzie....
Go to the top of the page
+Quote Post
Stjudent
post 4.10.2012, 23:21:39
Post #6





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 24.05.2012

Ostrzeżenie: (0%)
-----

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 :/
Go to the top of the page
+Quote Post
szalek01
post 4.10.2012, 23:47:27
Post #7





Grupa: Zarejestrowani
Postów: 129
Pomógł: 17
Dołączył: 17.09.2012

Ostrzeżenie: (0%)
-----

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.


--------------------
PDO nie gryzie....
Go to the top of the page
+Quote Post
Stjudent
post 5.10.2012, 11:25:58
Post #8





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 24.05.2012

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
Shido
post 5.10.2012, 13:54:00
Post #9





Grupa: Zarejestrowani
Postów: 121
Pomógł: 22
Dołączył: 22.06.2012

Ostrzeżenie: (0%)
-----

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


Ten post edytował Shido 5.10.2012, 13:54:27


--------------------
Sorka za błędy ort. jak coś dajcie znać na PW to popoprawiam.
Go to the top of the page
+Quote Post
Stjudent
post 5.10.2012, 15:30:05
Post #10





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 24.05.2012

Ostrzeżenie: (0%)
-----

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.

Ten post edytował Stjudent 5.10.2012, 15:35:05
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 10:36
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn