ugrás a tartalomhoz

Két div egymás mellett

Pred · 2006. Ápr. 26. (Sze), 17.49
Sziasztok!

A problémám az lenne, hogy két résznek az oldalon egynás mellett kéne lennie, viszont nem meghatározható, hogy az oldal tetejétől mikor mennyire vannak... Ebben kérem segítségeteket.

A fent említett kódrászlet következő:
  1. <div class='content'>  
  2.  <div class='smallBox_left'>  
  3.   Ez a bal oldali rész  
  4.  </div>  
  5.   
  6.  <div class='smallBox_right'>  
  7.   Ezt kéne a bal mellé rakni valahogy.  
  8.   A position: relative; tulajdonsággal az a baj, hogy nem  
  9.   adott a bal oldali elem magassága, ezért nem adhatok meg fix negatív   
  10.   helyet.  
  11.  </div>  
  12. </div>  
Szóval ezt a két divet kéne egymás mellé pakolni valahogy...
position: absolute kizárva
JS-n nem szeretnék ide rakni
Táblázat nélkül szeretném megoldani, de nagyon nem akarja az igazságot...

Előre is köszönöm
‹ CSS-ben beállított egyedi <LI> el van csúszva a szöveghez képest CSS Tableless - Szétesés... ›
 ■
1

kis kiegészítés

Pred · 2006. Ápr. 26. (Sze), 17.58
a position: absolute azért nem jó, mert van még alatta tartalom és ennek nem ismert a magassága
2

Float?

-zsolti- · 2006. Ápr. 26. (Sze), 17.58
  1. .smallBox_left {  
  2.   width: 100px;  
  3.   float: left;  
  4. }  
  5. .smallBox_right {  
  6.   width: 200px;  
  7.   float: left;  
  8. }  
3

float

Skullkid · 2006. Ápr. 26. (Sze), 18.00
A smallBox_left osztálynak adj egy
  1. float: left;  
, a smallBox_right osztálynek pedig egy
  1. float: right;  
értéket.
4

majdnem jó :D

Pred · 2006. Ápr. 26. (Sze), 18.12
Köszi

A probléma egyik része megoldva.. a floatra én i gondoltam, de csak a jobb oldalinak adtam meg a float:right -ot, ezért nem akarta az igazságot :D

Egymás mellett vannak, viszont nem egy magasak :( és az alattuk lévő div-re rácsúszik a nagyobb az előző kettő közül :(
5

Olvass vissza.

Jano · 2006. Ápr. 26. (Sze), 18.33
Olvass vissza pár topikot talán a legtöbbször felmerülő probléma.
6

megtürtént :)

Pred · 2006. Ápr. 26. (Sze), 18.54
thx...

megtörtént :D

több helyről össteszedve sikeresen megoldódott a gondom :D
7

Megoldva!

Pred · 2006. Ápr. 27. (Cs), 14.08
Sziasztok!

Végül sikerült rendberakni a div-eket.. Köszönöm mindenkinek a segítséget!


Íme a CSS hozzá:
  1. /* style.css fájl részlete: */  
  2. div.smallBox {  
  3.  width: 290px;  
  4.     border: 0px;  
  5.     padding-top: 10px;  
  6. }  
  7.   
  8. div.largeBox {  
  9.  width: 593;  
  10.     border: 0px;  
  11.     padding-top: 10px;  
  12. }  
  13.   
  14. div.boxTitle {  
  15.     width: 100%;  
  16.     font-size: 9pt;  
  17.     font-weight: bold;  
  18.     color: rgb(230,232,235);  
  19.     font-family: Verdana, Arial, Helvetica, sans-serif;  
  20.     text-align: center;   
  21. }  
  22.   
  23. div.boxContent {  
  24.  background: rgb(230,232,235);  
  25.     width: 100%;  
  26.     padding-top: 10px;  
  27. }  
  28.   
  29.   
  30. #smallBoxTitle {  
  31.     background: transparent url(smallBoxTitle.gif) bottom center no-repeat;  
  32.     height: 17px;  
  33.     margin: 0px;  
  34. }  
  35.   
  36. #largeBoxTitle {  
  37.  background-repeat: none;  
  38.     background-position: center;  
  39.     background: url('largeBoxTitle.gif') transparent;  
  40. }  
  41.   
  42. #leftBox {  
  43.  float: left;  
  44. }  
  45.   
  46. #rightBox {  
  47.  float: right;  
  48. }  
  49.   
  50. #clearPos {  
  51.  clear: both;  
  52. }  
És a HTML (ez lehet egy DIV-en belül is, vagy simán a body-ban. Nekem működik. Az eredménye remélhetőleg egy héten belül látható lesz, addig is szíves türelmeteket kérem):
  1. <div class='smallBox' id='leftBox'>  
  2.  <div class='boxTitle' id='smallBoxTitle'>Bal oldali doboz címe</div>  
  3.  <div class='boxContent'>  
  4.   Bal doboz tartalma  
  5.  </div>  
  6. </div>  
  7.   
  8. <div class='smallBox' id='rightBox'>  
  9.  <div class='boxTitle' id='smallBoxTitle'>Jobb oldal címe</div>  
  10.  <div class='boxContent'>  
  11.   Jobb oldal tartalma  
  12.  </div>  
  13. </div>  
  14.           
  15. <div class='largeBox' id='clearPos'>  
  16.  <div class='boxTitle' id='largeBoxTitle'>Alsó doboz címe  
  17.  </div>  
  18.  <div class='boxContent'>  
  19.   Alsó doboz tartalma  
  20.  </div>  
  21. </div>  
Megjegyzés (reagálás Felhő e-mailjére, amit épp most olvastam el):
Kedves weblabor szerkesztők! Attól, hogy valaki feltesz egy kérdést, majd segítenek neki és látja a megoldáshoz vezető utat, nem azt jelenti, hogy azonnal meg is oldja (pl előadásra, órára kell mennie, esetleg elhívják valahova). Mindemellett nem feltételezendő, hogy adott ember nem fogja megosztani a többiekkel a végeredményt, ha úgy látja, hogy használható!

Ezzel nem akarok senkit megsérteni, ha mégis megtettem, kérem alásan.. Elnézést tőle..

Ezúton is mindenkitől elnézést kérek, hogy 20 órával a téma felvetése után oldottam meg a problémámat és, hogy csak tesztelés után bocsátom közkinccsé.
8

tulspirázottnak érzem ezt

Hodicska Gergely · 2006. Ápr. 27. (Cs), 14.56
Ezúton is mindenkitől elnézést kérek, hogy 20 órával a téma felvetése után oldottam meg a problémámat és, hogy csak tesztelés után bocsátom közkinccsé.

Szerinted ez volt a gond?

Ezt írtad:
megtörtént :D
több helyről össteszedve sikeresen megoldódott a gondom :D

Ez szerinted mennyire sugall befejzettséget, és mennyiben azt: "hogy még dolgozom a megoldáson, és ha meglesz, akkor persze megosztom itt veletek"?


Felhő
9

megadom magam

Pred · 2006. Ápr. 27. (Cs), 15.10
valóban rosszul fogalmaztam!

az általad idézett szöveg valóban azt sugallja, hogy kész. Abban a tekintetben az is volt, hogy a 3 rész megfelelő helyre került, de valami rettenetes megjelenéssel (gyak összefolytak), ezért ma délután, mikor végeztem a sulival meg neki is álltam kicsit csinosítani.. szvsz nem tom kinek mennyire tetszik, de jobb, mint a tegnapi állapot.

még 1x elnézést mindenkitől!