Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

4 stupca razlicite visine jedan ispod drugog - kako

[es] :: Web dizajn i CSS :: 4 stupca razlicite visine jedan ispod drugog - kako

[ Pregleda: 2898 | Odgovora: 5 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

bddljt

Član broj: 81689
Poruke: 42
93.138.1.*



Profil

icon 4 stupca razlicite visine jedan ispod drugog - kako04.10.2008. u 17:19 - pre 188 meseci
kako divovima mogu dobiti 4 stupca, s tim da je prvi stupac visok npr.100px, drugi stupac da ima 2 diva (jedn ispod drugog i da je svaki visok 50px), isto tako i treći i četvrti stupac da ima dva diva jedan ispod drugog visine 50 px
Prikačeni fajlovi
 
Odgovor na temu

Nikola Poša
Backend (PHP) developer
Beograd

Član broj: 173839
Poruke: 1616
*.adsl-3.sezampro.yu.



+33 Profil

icon Re: 4 stupca razlicite visine jedan ispod drugog - kako04.10.2008. u 19:45 - pre 188 meseci
Evo napravio sam na brzinu neshto, fajl je u prilogu pa pogledaj... CSS sam pisao u liniji tag-a, ti ga naravno, po svojim potrebama, smesti u neki eksterni fajl.
Prikačeni fajlovi
 
Odgovor na temu

bddljt

Član broj: 81689
Poruke: 42
*.adsl.net.t-com.hr.



Profil

icon Re: 4 stupca razlicite visine jedan ispod drugog - kako04.10.2008. u 20:28 - pre 188 meseci
puno hvala.

a jel bi ovo bilo ispravno kada bi zelio dodati trecu kocku u npr drugom stupcu, tj povecavam visinu glavnog diva, a svaki sljedeci dolje mi je float : left- jel to ok?



<div style = "float: left; width: 200px; height: 600px;">
<div style = "float: top; width: 200px; height: 200px; background-color: orange;"></div>
<div style = "float: left; width: 200px; height: 200px; background-color: grey;"></div>
<div style = "float: left; width: 200px; height: 200px; background-color: blue;"></div>
</div>









 
Odgovor na temu

bddljt

Član broj: 81689
Poruke: 42
93.138.1.*



Profil

icon Re: 4 stupca razlicite visine jedan ispod drugog - kako04.10.2008. u 20:46 - pre 188 meseci
da, i dreamweaver mi javi da float TOP nije standardna vrijednost za CSS
 
Odgovor na temu

Nikola Poša
Backend (PHP) developer
Beograd

Član broj: 173839
Poruke: 1616
*.adsl-3.sezampro.yu.



+33 Profil

icon Re: 4 stupca razlicite visine jedan ispod drugog - kako04.10.2008. u 21:44 - pre 188 meseci
Citat:
bddljt: jel to ok?

Naravno. U principu, ne morash uopshte da koristish float: top;, u ovom sluchaju, mozhesh uvek da koristih left.

btw Ceo taj kod mozhesh da napishesh i npr. ovako:
Code:

<html>
        <head>
            <style type = "text/css">
            #levi {
                float: left; 
                width: 150px; 
                height: 400px; 
                background-color: green;
                        }
                 
            #srednji {
                float: left; 
                width: 200px; 
                height: 400px;
                }
                 
            #desni {
                float: left; 
                width: 400px; 
                height: 400px;
            }
                 
            .box {
                float: left; 
                width: 200px; 
                height: 200px;
            }             
                </style>
        </head>
    
    <body>
    
        <div id = "levi"></div>
        <div id = "srednji">
            <div class = "box" style = "background-color: orange;"></div>
            <div class = "box" style = "background-color: grey;"></div>
        </div>
        <div id = "srednji">
            <div class = "box" style = "background-color: black;"></div>
            <div class = "box" style = "background-color: green;"></div>
        </div>
        <div id = "desni">
            <div class = "box" style = "width: 400px; background-color: gray;"></div>
            <div class = "box" style = "width: 400px; background-color: orange;"></div>
        </div>
    
    </body>
</html>

Poshto dosta elemenata ima neke zajednichke karakteristike, za njih mozhesh da definishesh stil(#), ili klasu(.), i posle da te stilove i klase pozivash u tim div-ovima. Za one div-ove u kojima se neshto razlikuje, u ovom sluchaju boja pozadine, treba samo da dopishesh u liniji tag-a tu razliku, odnosno, u ovom sluchaju, npr. background-color: green;.

Naravno, ceo taj CSS kod mozhesh (a i preporuchljivo je) da smestish u eksterni .css fajl, pa da ga u html-u pozivash preko <link rel="stylesheet" href="stil.css" type="text/css" />.
 
Odgovor na temu

bddljt

Član broj: 81689
Poruke: 42
*.adsl.net.t-com.hr.



Profil

icon Re: 4 stupca razlicite visine jedan ispod drugog - kako05.10.2008. u 12:09 - pre 188 meseci
ima li neko svojstvo da postignem isti razmak kod pregleda u mozili i exploreru.
U exploreru je dobar razmak a u mozili nije


html
Code:

<div class="stupac2" id="stupac2">
    <div class="kocka2aHeader" id="kocka2aNaslov"></div>
    <div class="kockaSadrzaj" id="kocka2aSadrzaj">fsfsdfsdfsdfsdfsad dfsadfs fsdfsdfsdfsdfsdfsdf dsdfsdfsdfsdfsdf</div>
    <div class="kocka3aHeader" id="kocka2bNaslov"></div>
  <div class="kockaSadrzaj" id="kocka2bSadrzaj"></div>
  <div class="kocka3aHeader" id="kocka2cNaslov"></div>
  <div class="kockaSadrzaj" id="kocka2cSadrzaj"></div>
  <div class="kocka3aHeader" id="kocka2dNaslov"></div>
  <div class="kockaSadrzaj" id="kocka2dSadrzaj"></div>
</div> 
        <div class="stupac3" id="stupac3">
          <div class="kocka3aHeader" id="stupac3aNaslov"></div>
            <div class="kockaSadrzaj" id="stupac3aSadrzaj"></div>
            <div class="kocka2aHeader" id="stupac3bNaslov"></div>
            <div class="kockaSadrzaj" id="stupac3bSadržaj"></div>
            <div class="kocka2aHeader" id="stupac3cNaslov"></div>
            <div class="kockaSadrzaj" id="stupac3cSadržaj"></div>
            <div class="kocka2aHeader" id="stupac3dNaslov"></div>
            <div class="kockaSadrzaj" id="stupac3dSadržaj"></div>
           
</div>
        <div class="stupac4" id="stupac4">
          <div class="kocka2aHeader" id="stupac4aNaslov"></div>
            <div class="kockaSadrzajStupac4" id="stupac4aSadrzaj"></div>
            <div class="kocka2aHeader" id="stupac4bNaslov"></div>
            <div class="kockaSadrzajStupac4" id="stupac4bSadržaj"></div>
             <div class="kocka2aHeader" id="stupac4cNaslov"></div>
            <div class="kockaSadrzajStupac4" id="stupac4cSadržaj"></div>
             <div class="kocka2aHeader" id="stupac4dNaslov"></div>
            <div class="kockaSadrzajStupac4" id="stupac4dSadržaj"></div>
</div>




css

Code:

.stupac1 {
    float: left;
    height: 650px;
    width: 150px;
    background-color: #FFFFFF;
    margin-top: 3px;
    margin-right: 0px;
    margin-bottom: 3px;
    margin-left: 1px;
    text-align: left;
}
.stupac2 {
    background-color: #FFFFFF;
    height: 1200px;
    width: 200px;
    float: left;
    padding: 1px;
    margin-top: 0px;
}
.kocka2a {
    float: top;
    height: 200px;
    width: 200px;
    background-image: url(images/Background/bgzaKocke.gif);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #EC6D2A;
    border: 1px dotted #EBF3FF;
    padding-left: 12px;
}
.kocka2aHeader {
    background-image: url(images/Background/Untitled-2.gif);
    background-repeat: no-repeat;
    height: 20px;
    width: 200px;
    float: left;
    margin-right: 3px;
    margin-left: 3px;
    margin-top: 3px;
    text-align: left;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    vertical-align: middle;
}
.kocka3aHeader {
    background-image: url(images/Background/Untitled-3.gif);
    background-repeat: no-repeat;
    height: 20px;
    width: 200px;
    float: left;
    margin-right: 3px;
    margin-left: 3px;
    margin-top: 3px;
}

.kocka2b {
    background-color: #CC9999;
    float: left;
    height: 200px;
    width: 200px;
}
.kocka2c {
    background-color: #66CC99;
    float: left;
    height: 200px;
    width: 200px;
}
.stupac3 {
    float: left;
    height: 1200px;
    width: 200px;
}
.stupac3a {
    float: top;
    height: 200px;
    width: 200px;
    background-color: #996633;
}
.stupac3b {
    background-color: #33CCFF;
    float: left;
    height: 200px;
    width: 200px;
}
.stupac4 {
    float: left;
    height: 1200px;
    width: 350px;
}
.kockaSadrzajStupac4 {
    height: 200px;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #999999;
    padding: 0px;
    text-align: justify;
    vertical-align: middle;
    background-image: url(images/Background/BgdZaKucice.jpg);
    background-repeat: repeat-x;
    float: left;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: dotted;
    border-right-style: dotted;
    border-bottom-style: dotted;
    border-left-style: dotted;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 3px;
    margin-left: 3px;
}

.stupac4a {
    background-color: #99CC66;
    float: top;
    height: 200px;
    width: 100%;
}
.stupac4b {
    background-color: #9999FF;
    float: left;
    height: 200px;
    width: 100%;
}
.glavni {
    width: 950px;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-image: none;
    height: 100%;
    }
.header {
    background-image: url(images/Background/screenshotslices/images/ScreenShot015_01.jpg);
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    height: 250px;
    width: 950px;
    vertical-align: middle;
}


.kockaStup1 {
    background-color: #0033CC;
    height: 200px;
    width: 220px;
}

.reklamevodoravno {
    margin: 0px;
    padding: 0px;
    height: 91px;
    width: 100%;
}
.navigacijaSoth {
    height: 26px;
    width: 100%;
    background-color: #ec7227;
}



.body {
    font-family:arial,helvetica,sans-serif;
    color:#888;
    font-size:small;
    text-align:center;
    background-image:url(images/Background/z-background2b.jpg);
    background-repeat:repeat-y;
    background-position:center top;
    width: 100%;
    padding: 0px;
    margin: 0px;
    height: 100%;
}
.footer {
    clear: both;
    float: left;
    height: 105px;
    width: 950px;
    background-image: url(images/Background/screenshotslices/images/ScreenShot015_03.jpg);
    margin: 0px;
    padding: 5px;
}
.kockaSadrzaj {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #999999;
    padding: 0px;
    height: 200px;
    width: 198px;
    text-align: justify;
    vertical-align: middle;
    background-image: url(images/Background/BgdZaKucice.jpg);
    background-repeat: repeat-x;
    float: left;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: dotted;
    border-right-style: dotted;
    border-bottom-style: dotted;
    border-left-style: dotted;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
    margin-top: 0px;
    margin-right: 3px;
    margin-bottom: 3px;
    margin-left: 3px;
}
.kockaSadrzaj2 {
    color: #999999;
    background-image: url(images/Background/BgdZaKucice.jpg);
    border: 1px dotted #C6DEFB;
    margin: 1px;
    padding: 1px;
}
.kruzicNaslov {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #EC6D2A;
    background-color: #ACCDFB;
    background-image: url(images/Background/kruzic.gif);
    background-repeat: no-repeat;
}
.tekstSkrol {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #375276;
    background-color: #FFFFFF;
    padding: 1px;
    overflow: auto;
    height: 400px;
    width: 320px;
    margin: 1px;
    text-align: justify;
}


[Ovu poruku je menjao Aleksandar Ružičić dana 07.10.2008. u 13:42 GMT+1]
Prikačeni fajlovi
 
Odgovor na temu

[es] :: Web dizajn i CSS :: 4 stupca razlicite visine jedan ispod drugog - kako

[ Pregleda: 2898 | Odgovora: 5 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.