Poravnanje div-ova

[hamferus]

Evo prvi put se pošteno igram s html-om i naišo sam za mene(trenutačno) nerješiv problem. Unutar glavne tabele imam redove(tr) heder, red boje(neznam kaj će mi to tu al nek bude zasad), red za google banner i sad je na redu red za menu,sadršaj i još jednu reklamu na desnoj strani. Unutar tog 4. <tr>-a napravio sam <td> s tri<div>-a: 1.menu, 2. sadržaj, 3. reklama ali nisu mi dobro pozicionirani. Menu je na ljevoj strani dok sadržaj(2) je u sradini ali u visini je ispod menua(1), dok reklama(3) je isto dobro pozicioniran u nizu ali po visini se nalazi ispod sadržaja(2).

evo tu možete vidjet kako to izgleda:

PRIMJER

a ovdje je kod od tod reda

Code:

<tr>
    <td>
        <div>
            <table  cellspacing="0" cellpadding="0" border="0">
                <tbody>
                    <tr>
                        <b>
                            <a class="menulink" href="index.html">Home Page</a>
                        </b>
                    </tr>
                    <tr height="25" valign="middle" align="center">
                        <b>
                            <a class="menulink" href="index.html">Outdoor</a>
                        </b>
                    </tr>
                    <tr height="25" valign="middle" align="center">
                        <b>
                            <a class="menulink" href="index.html">Crusing</a>
                        </b>
                    </tr>
                    <tr height="25" valign="middle" align="center">
                        <b>
                            <a class="menulink" href="index.html">Special Offers</a>
                        </b>
                    </tr>
                    <tr height="25" valign="middle" align="center">
                        <b>
                            <a class="menulink" href="index.html">Friends</a>
                        </b>
                    </tr>
                                    
                </tbody>
            </table>
        </div>


        <div align="center">
            <table width="480" height="300" border ="1">
                <tbody>
                    <tr>
                    </tr>
                </tbody>
            </table>
        </div>


        <div align="right">
            <table width="120" height="600" border ="1">
                <tbody>
                    <tr>
                    </tr>
                </tbody>
            </table>
        </div>
                            
    </td>
</tr>

baš i nije ljepo formatirano(pokušo sam al nisam uspio

Moje pitanje je kako da je ta tri <div>-a dobijem u istu ravninu?

I zašto mi u menu-u tekst nije u sredini?

Code:

a.menulink {
        
        display:block;
        width: 120;
        height: 25;
        text-align: center;
        font-family:Arial;
        background-color:#01679a;
        color:#ffffff;
        text-decoration: none;
        border: solid 1px #ffffff;
        
}

[Gogy]

hamferus Wrote:... i sad je na redu red za menu,sadršaj i još jednu reklamu na desnoj strani. Unutar tog 4. <tr>-a napravio sam <td> s tri<div>-a: 1.menu, 2. sadržaj, 3. reklama ali nisu mi dobro pozicionirani. Menu je na ljevoj strani dok sadržaj(2) je u sradini ali u visini je ispod menua(1), dok reklama(3) je isto dobro pozicioniran u nizu ali po visini se nalazi ispod sadržaja(2).

Moje pitanje je kako da je ta tri <div>-a dobijem u istu ravninu?

Koristi float na div-ovima.

Za menu float: left; za sredinu odnosno sadržaj float: left; a za onaj na kraju float: right;

hamferus Wrote:I zašto mi u menu-u tekst nije u sredini?

Code:

a.menulink {
        
        display:block;
        width: 120;
        height: 25;
        text-align: center;
        font-family:Arial;
        background-color:#01679a;
        color:#ffffff;
        text-decoration: none;
        border: solid 1px #ffffff;
        
}

Je, u sredini je...

[hamferus]

Gogy Wrote:Koristi float na div-ovima.

Za menu float: left; za sredinu odnosno sadržaj float: left; a za onaj na kraju float: right;

To je donekle pomoglo. Sad su sadržaj i desni u ravnini al sadržaj se nalazi ispod menu-a.

Gogy Wrote:Je, u sredini je...

Da piše da je u sredini al kad gledaš onda se nalazi na gornjoj polovici pravokutnika.

Promjene možeš pogledat na linku iz prvog posta.


EDIT: zanemari prvi dio jer sam zaboravio zatvorit div tag kad sam isprobavo, dok problem s tekstom ostaje.

[Puž]

Misim da sam skužio kaj te mući. Ovak... Svaki TR tag mora imati u sebi TD tag. Toćnije, svaka HTML tablica mora imati unutar svakog TR taga TD tag. TR tag definira redak tablice u kojemu se sa TD tagom definira čelija. Sad, prva greška (koja nema veze sa pitanjem) ti je ta što kod ovog koda

Code:

<div style="float:left;">
    <table  border="0">
        <tbody>
            <tr height="25" valign="middle" align="center" >
                <b>
                <a class="menulink" href="index.html">Home Page</a>
                </b>
            </tr>
            <tr height="25" valign="middle" align="center">
                <b>
                <a class="menulink" href="index.html">Outdoor</a>
                </b>
            </tr>
            <tr height="25" valign="middle"align="center" >
                <b>
                <a class="menulink" href="index.html">Crusing</a>
                </b>
            </tr>
            <tr height="25" valign="middle" align="center">
                <b>
                <a class="menulink" href="index.html">Special Offers</a>
                </b>
            </tr>
            <tr height="25" valign="middle" align="center">
                <b>
                <a class="menulink" href="index.html">Friends</a>
                </b>
            </tr>
        
        </tbody>
    </table>
</div>

ti TR tagovi nemaju child elemente TD.

Problem ti se javlja kod druga dva div-a.

Code:

<div style="float:left;">
   <table  width="400" height="300"border ="1">
      <tbody>
         <tr>
         </tr>
      </tbody>
    </table>
</div>

<div style="float:right;">
   <table width="120" height="600" border ="1">
      <tbody>
         <tr>
         </tr>
      </tbody>
   </table>
</div>

Moraš definirati unutar TR tagova TD tagove koji će označavati čelije. Čelije po default su najmeštene tako da prikazju sadržaj po vertikalnom centru što je glavni problem kod tvog pitanja.

Ovo češ riješiš tako što češ definirati atribut valign TD taga na "top" tako da će ti se sadržaj čelija prikazati upravo na vrhu, a ne na sredini što kod tebe izgelda kao da je drugi div ispod prvog a treći ispod drugog.

Code:

<div style="float:left;">
   <table  width="400" height="300"border ="1">
      <tbody>
         <tr>
            <td valign="top">Ak sam dobro skužio tu je problem:Neki tekst je prije bio dolje</td>
         </tr>
      </tbody>
    </table>
</div>

<div style="float:right;">
   <table width="120" height="600" border ="1">
      <tbody>
         <tr>
            <td valign="top">Ovaj tekst je bio još više dolje</td>
         </tr>
      </tbody>
   </table>
</div>

P.S. Nevezano uz pitanje da velim, mislim da ti div elementi netrebaju unutar ovog koda kad ti se dizajn nalazi unutar tablice. Preporučal bi ti da koristiš ili samo tablice ili div elemente. Ovo ti je samo komplikacija kad margine, horizontalno poravnavanje teksta il takve stvari moš raditi unutar TD-a kao isto kao i kod DIV-a.

[Gogy]

Puž Wrote:Preporučal bi ti da koristiš ili samo tablice ili div elemente.

Slažem se u potpunosti s ovim

Puž Wrote:horizontalno poravnavanje teksta il takve stvari moš raditi unutar TD-a kao isto kao i kod DIV-a.

Ne možeš baš sve... npr. kod DIV-ova ne pali valign nego se mora sa paddingom...

Hamferus Wrote:I zašto mi u menu-u tekst nije u sredini?

Aha, sad sam skužio ovo što misliš u sredini. Ja sam mislio da misliš na vertikalno (što je u sredini), ali tebe pati što nije horizontalno u sredini.

To se događa zato što je font manji od visine ćelije. To poravnaš paddingom, npr. padding-top: 3px;

No, ovo nije najsretnije rješenje za menu. Sa tablicama samo kompliciraš. Menu napravi "čistokrvno" pomoću HTML liste i CSS-a s kojim ćeš urediti izgled te liste odnosno menu-a. Puno manje HTML-a, čistiji kod.

Evo na Tutorijali.Net imaš tutorijale kako se izarđuje menu pomoću liste i CSS-a (doduše ovdje je objašnjeno za horizontalno ali samo makneš display:inline; i bit će vertikalna lista.

Evo taj tutorijal podjeljen na tri dijela:
Izrada horizontalnog menija pomoću liste - 1.dio
Izrada horizontalnog menija pomoću liste - 2.dio
Izrada horizontalnog menija pomoću liste - 3.dio

[hamferus]

@puž: za prvi put da radim ovak nekaj dobro je i ispremješano(tabel i div), al ubuduće ću radit ili jedno ili druga(ma možda i ovu cijelu napravim ispočetka). Nažalost fulo si moj problem. Al hvala na objašnjenju.

@Gogy: Evo ovo mi je flailo(-top:3px) jer sam ja uvijek pisal padding:1px. Tutače koje si mi dal sam već proučio i izvlačio neke stvari iz njih, dok menu je sad ovakav jer bi trebala ić slikica na početku(moraju se napravit ili nać), al bumo vidli kako bu se sve razvijalo.

A di da tebi dam reputaciju?

[Gogy]

Sebi sam isključio reputaciju xD Meni je dovoljno što sudjeluješ na forumu i što pomažeš drugima. To mi je najveće hvala