Układ storny na DIV-ach Opcje

[mos]

Witajcie
Chciałbym osiągnąć efekt:

Wszystko jest pięknie i ładnie do momentu gdy jestem w miejscu zaznaczonym pomarańczową ramką

boxy które są poniżej 'wjeżdżają' na zawartość u góry strony - co jest efektem nieodpuszczalnym. Prosiłbym Was o podanie pomocnej dłoni.
Bo powoli wychodzę z siebie. Z góry dziękuję 'pomagającym' :-)

ps. czy na forum jest zwyczaj witania się z userami? szukałem ale się nie udało - nie chcąc robić jeśli takowy istnieje, proszę podeślijcie wraz z odpowiedzią na moje pytanie

[Damonsson]

Pożyczyłem moją magiczną kulę sąsiadowi...będziesz niestety musiał wkleić swój kod...a jeszcze lepiej pokazać to online jak wygląda.

Witam <3, ale nie ma osobnego wątku do przywitania się, z tego co wiem.

[JoShiMa]

Między pomarańczową ramką a tymi dolnymi divami powinno być:

[HTML] pobierz, plaintext 
<hr style="clear:both; visibility: hidden;">
[HTML] pobierz, plaintext 

Powodzenia

[mos]

Między pomarańczową ramką a tymi dolnymi divami powinno być:

[HTML] pobierz, plaintext 
<hr style="clear:both; visibility: hidden;">
[HTML] pobierz, plaintext 

Powodzenia

o.. i to jest rozwiązanie problemu :-) Dzięki serdeczne!
Natomiast pozwólcie że zapytam, czy nie można 'zorganizować' tego za pomocą float-ów i czystego CSS-a (tzn bez wstawiania tej linii)?
te dwa główne boxy w ramce są
- niebieski:

[PHP] pobierz, plaintext 
#left_box {
    width: 500px;
    height: 300px;
    border: solid 1px orange;
    float: left;
}
[PHP] pobierz, plaintext 

- szary:

[PHP] pobierz, plaintext 
#right_box {
    width: 370px;
    height: auto;
    border: solid 1px #000000;
    height: 200px;
}
[PHP] pobierz, plaintext 

Damonsson - moja kula się niestety potłukła stąd pytanie 'w ciemno' ;-)

Ten post edytował mos 10.01.2011, 21:35:14

[Damonsson]

Chyba projektujesz dla NASA, że taka tajność kodu i udostępniasz co najwyżej 2 id ;P

Dajesz powiedzmy w body {width: 870px} ,czyli robisz "pojemnik"
a później do boxów {float:left} i jeżeli kolejny przekroczy te 870px pojemnika, to spadnie w dół.
Ewentualnie możesz pokombinować z {clear:both} dodawanym do samych boxów, bez dodatkowego <hr>

[JoShiMa]

o.. i to jest rozwiązanie problemu :-) Dzięki serdeczne!
Natomiast pozwólcie że zapytam, czy nie można 'zorganizować' tego za pomocą float-ów i czystego CSS-a (tzn bez wstawiania tej linii)?

Dwa dolne boksy możesz wsadzić do jednego dodatkowego, któremu dasz clear:both

Float właśnie działa tak, że objekt jest "latający" inne objekty, które nie mają float zachowują się tak jak by go nie było i włażą pod niego. Dopiero ustawienie jakiegoś elementu z clear:botch powoduje, że kolejne będą ustawiać się pod spodem. No oczywiście dopóki znów nie użyjesz float Tak to już jest z tymi pudełkami

[mos]

Damonsson oj tam,do NASA daleka droga ;-)
wkleiłem to co 'istotne' wg mnie - żadnej tajemnicy kodu nie ma,bo i po co. Ogólnie zarys jest taki - póki co - header, dwa boxy + stopka.
Polecacie wszystko pakować w mniejsze 'pudełka'?

html:

[HTML] pobierz, plaintext 
<div id="main_page">
    <div id="header">      
    </div>
    <div id="left_box"> 
    </div>
    <div id="right_box">
    </div>        
<div id="footer">         
    </div>
</div>
[HTML] pobierz, plaintext 

css:

[PHP] pobierz, plaintext 
#header {
    margin-top: 0px;
    height: 25px;
    background-color: #808080;
    color: darkorange; 
}
 
#footer {
   margin-top: 10px;
    height: 35px;
    width: auto;
    border: solid 1px red;
      position:relative;
}
 
#main_page {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    height: auto;
    width: 880px;
    text-align: center;
}
 
#left_box {
    width: 500px;
    height: 300px;
    border: solid 1px orange;
    float: left;
}
 
#right_box {
  float: right;
    width: 370px;
    height: auto;
    border: solid 1px #000000;
    height: 200px;
}
[PHP] pobierz, plaintext 

zasadniczo problem dotyczył FF bo IE 8.x oraz Opera 9.x 'robiły co chciałem' ;-) Wartości height dla boxów są czysto orientacyjne, bo treść będzie zasysana z bazy. Jakaś jeszcze jedna rzecz była, ale uciekło mi... hmm...

edyta mówi: już wiem... mam coś takiego:

[PHP] pobierz, plaintext 
* {
   text-align: center;
}
[PHP] pobierz, plaintext 

tylko ze względu na IE który nie chce mi wyśrodkować div-a (#main_page). można to objeść?

Ten post edytował mos 10.01.2011, 22:31:51