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

css pozicioniranje

[es] :: Web dizajn i CSS :: css pozicioniranje

[ Pregleda: 4303 | Odgovora: 13 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

glavince
Ohrid/Macedonia

Član broj: 66412
Poruke: 246
62.162.91.*

Sajt: ohridnews.com


Profil

icon css pozicioniranje18.10.2006. u 00:28 - pre 212 meseci
Poceo sam uciti CSS pozicioniranje. Na netu ima puno tutorijala, ali nekako bas ne mogu da se snadzem sa "<div> <span> <ul> <li> ..."
Dali neko moze da mi prepravi sledeci kod ali bez tablice. Koliko da shvatim u cemu je fora.
Code:

<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr align="center" bgcolor="#FF00FF">
    <td colspan="3">header</td>
  </tr>
  <tr>
    <td width="20%" bgcolor="#FFFF66">A</td>
      <td width="60%">
        <table width="100%"  border="0" cellspacing="0" cellpadding="0">
            <tr>
                  <td colspan="2" align="center" bgcolor="#CC6600">B1</td>
            </tr>
            <tr>
                  <td colspan="2" align="center" bgcolor="#CC6666">B2</td>
            </tr>
            <tr>
                  <td width="50%" align="center" bgcolor="#CC3399">B3-1</td>
                <td width="50%" align="center" bgcolor="#CC0066">B3-2</td>
            </tr>
          </table>
    </td>
    <td width="20%" bgcolor="#66FFFF">C</td>
  </tr>
  <tr align="center" bgcolor="#9999FF">
    <td colspan="3">footer</td>
  </tr>
</table>
 
Odgovor na temu

jablan

Član broj: 8286
Poruke: 4541



+710 Profil

icon Re: css pozicioniranje18.10.2006. u 09:40 - pre 212 meseci
Npr.
Code:

<html>
<head>
<style>
div { /*border:1px solid black*/ }
#a {width:20%;float:left;background-color:#ffe}
#b {width:59%;float:left;background-color:#fef}
#c {width:20%;float:left;background-color:#eff}
#b1 {background-color:#eef}
#b2 {background-color:#eee}
#b31 {width:50%; float:left;background-color:#fee}
#b32 {width:50%; float:left;background-color:#efe}

#footer {clear:both }
</style>
</head>
<body>
<div>header</div>
<div id="a">A</div>
<div id="b">
    <div id="b1">B1</div>
    <div id="b2">B2</div>
    <div id="b31">B31</div>
    <div id="b32">B32</div>
</div>
<div id="c">C</div>
<div id="footer">footer</div>
</body>
</html>
 
Odgovor na temu

glavince
Ohrid/Macedonia

Član broj: 66412
Poruke: 246
62.162.91.*

Sajt: ohridnews.com


Profil

icon Re: css pozicioniranje18.10.2006. u 17:53 - pre 212 meseci
Tkanks.
Nesto slicno sam i ja radio ali nisam mogo da spustim header na svoje mesto.
Caka je bila u "clear:both;"
Promenio sam :
#b {width:59%;float:left;background-color:#fef}
sa
#b {width:60%;float:left;background-color:#fef}
Opera i Firefox su OK dok u IE taj 1% ispada visak. Pitam se gde ide taj 1%?
Pokusao sam sledece:
Code:

#header {background-color:#0033FF;}
#a {width:20%; left:0;background-color:#9999FF; position:absolute;}
#b {width:60%; left:20%;background-color:#009966; position:absolute;}
#c {width:20%; left:80%;background-color:#CCFF66; position:absolute;}
#b1 {background-color:#00CCFF}
#b2 {background-color:#99FF33}
#b31 {width:50%; left:0;background-color:#FFFF33; position:absolute;}
#b32 {width:50%; left:50%;background-color:#0033CC; position:absolute;}
#footer {background-color:#FFCCFF; clear:both; position:relative;}

Ovako je sve na svoje mesto sem:
<div id="footer">footer</div>
Nikako ne mogu da ga spustim dole gde mu je mesto.
 
Odgovor na temu

jablan

Član broj: 8286
Poruke: 4541



+710 Profil

icon Re: css pozicioniranje18.10.2006. u 19:24 - pre 212 meseci
Nemoj koristiti position:absolute ako ne znaš tačno šta radiš.

http://www.quirksmode.org/css/position.html

O čemu se radi?

Citat:
Since the absolutely positioned element is taken out of the normal flow, the normal document flow behaves as if the element is not there: it closes up the space it would take.

Drugim rečima, postavivši absolute, ti si određene DIV-ove izbacio iz rasporeda i footer ih onda ne konstatuje, već se lepi odmah iza prethodnog elementa koji nije apsolutno pozicioniran, a to je u tvom slučaju header.

[Ovu poruku je menjao jablan dana 18.10.2006. u 20:40 GMT+1]
 
Odgovor na temu

glavince
Ohrid/Macedonia

Član broj: 66412
Poruke: 246
62.162.91.*

Sajt: ohridnews.com


Profil

icon Re: css pozicioniranje18.10.2006. u 23:50 - pre 212 meseci
Citat:

Drugim rečima, postavivši absolute, ti si određene DIV-ove izbacio iz rasporeda i footer ih onda ne konstatuje, već se lepi odmah iza prethodnog elementa koji nije apsolutno pozicioniran, a to je u tvom slučaju header.

Shvatio sam da je u ovom slucaju potrebno koristiti float. Ali ipak me zabrinjava taj 1% u IE.
20% + 60% + 20% == 100%
Nema nikakve logike. dali postoji neka caka da se to resi?
 
Odgovor na temu

jablan

Član broj: 8286
Poruke: 4541



+710 Profil

icon Re: css pozicioniranje19.10.2006. u 09:09 - pre 212 meseci
Ja nisam potpuno siguran kako se to rešava, možda će se javiti neko ko jeste. U međuvremenu pogledaj http://blog.html.it/layoutgala/ možeš sigurno da pokupiš par fazona.
 
Odgovor na temu

glavince
Ohrid/Macedonia

Član broj: 66412
Poruke: 246
62.162.243.*

Sajt: ohridnews.com


Profil

icon Re: css pozicioniranje19.10.2006. u 16:16 - pre 212 meseci
Ovaj IE mi stvarno ide na zivce.
Proucio sam neke nacine da se to izbegne taj 1%.
Evo jedan.
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{margin:0;padding:0}
#header{ background-color:#FFFF00;text-align:center;}
#korpaB{float:left;width:100%}
#A{background:#B9CAFF;float:left;width:20%;margin-left:-100%}
#C{background:#FF8539;float:left;width:20%;margin-left:-20%}
#B{background-color:#33FF66;margin: 0 0 0 20%}
#korpaB1 {width:60%; margin-left:20%}
#B1-1{background-color:#993399; float:left; width:50%;}
#B1-2{background-color:#FF99CC; float:left; width:50%;}
#footer{background: #333;color: #FFF; text-align:center; clear:left; width:100%}
</style>
</head>
<body>
    <div id="header">header</div>
    <div id="korpaB">
        <div id="B">B</div>
            <div id="korpaB1">
                <div id="B1-1">B1-1</div>
                <div id="B1-2">B1-2</div>
            </div>
    </div>
    <div id="A">A</div>
    <div id="C">C</div>
    <div id="footer">footer</div>
</body>
</html>

Ali mislim da ce ovo vise da iskomplicira dalji rad.
Ako neko ima bolje resenje ili mislenje neka ga postavi tu.
Ili da nastavim sa 100% sigurnim <table><tr><td> ....................
 
Odgovor na temu

pajac
Slovenija

Član broj: 17163
Poruke: 66
*.dial-up.dsl.siol.net.



Profil

icon Re: css pozicioniranje20.10.2006. u 16:48 - pre 212 meseci
Mozes postat css koji ti radi probleme I dali je IE6 (verovatno) taj koji ne radi?
If we want to discover, we first have to be willing to get lost!
 
Odgovor na temu

glavince
Ohrid/Macedonia

Član broj: 66412
Poruke: 246
62.162.91.*

Sajt: ohridnews.com


Profil

icon Re: css pozicioniranje20.10.2006. u 17:54 - pre 212 meseci
Ovaj kod radi:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style type="text/css">
#a {float:left;width: 10%; background-color:#00FF00;}
#b {float:left;width: 80%; background-color:#9999CC;}
#c {float:left;width: 10%; background-color:#FFFF33;}
</style>
<body>
   <div id="a">a</div>
   <div id="b">b</div>
   <div id="c">c</div>
</body>
</html>

A ovaj ne radi
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style type="text/css">
#a {float:left;width: 20%; background-color:#00FF00;}
#b {float:left;width: 60%; background-color:#9999CC;}
#c {float:left;width: 20%; background-color:#FFFF33;}
</style>
<body>
   <div id="a">a</div>
   <div id="b">b</div>
   <div id="c">c</div>
</body>
</html>

Stvarno nemogu da shvatim:
10% + 80% + 10% = 100% i 20% + 60% + 20% = 100%
 
Odgovor na temu

pajac
Slovenija

Član broj: 17163
Poruke: 66
*.dial-up.dsl.siol.net.



Profil

icon Re: css pozicioniranje20.10.2006. u 20:37 - pre 212 meseci
Nemam pojma gde je catch!! :)
If we want to discover, we first have to be willing to get lost!
 
Odgovor na temu

jablan

Član broj: 8286
Poruke: 4541



+710 Profil

icon Re: css pozicioniranje21.10.2006. u 08:34 - pre 212 meseci
Mislim da će raditi ako umesto 60% budeš stavio npr 59.9%.
 
Odgovor na temu

maric1
maric dragan
Krusevac - Vitosevac

Član broj: 44931
Poruke: 738
212.62.39.*

Sajt: www.tag-web-design.net


+2 Profil

icon Re: css pozicioniranje09.02.2007. u 10:24 - pre 208 meseci
imam jedno pitanje nikako da uspem uz pomoc css-a da pozicioniram da mi div footer uvek bude na kraju diva contant tj da zavisi od sardzaja koji imam na strani

evo primera u prilogu ako moze neko da pomogne
Prikačeni fajlovi
 
Odgovor na temu

Zeberdee
Misel Tekinder
Freelance Web Designer/Front-End
Developer
Niš

Član broj: 177025
Poruke: 59

Sajt: www.behance.net/MiselTeki..


+4 Profil

icon Re: css pozicioniranje31.03.2008. u 02:08 - pre 194 meseci
Probaj da sa ovog saita skinesh gotov layout i po njemu da se orijentishesh ...
http://www.code-sucks.com/css%20layouts/
Veruj mi reshicesh problem garant !!!
 
Odgovor na temu

bantes9
Beograd

Član broj: 119554
Poruke: 1058
77.46.246.*



+39 Profil

icon Re: css pozicioniranje31.03.2008. u 02:37 - pre 194 meseci
Upisi u #footer sledeci stvar:

clear:both;


Ovo bi trebalo u vecini slucajeva da ti zavrsi posao.


Mrav radi, tegli, i od njega nije postalo ništa,
a majmun se zezao po drveću i od njega je postao čovek.

Brana Crnčević
 
Odgovor na temu

[es] :: Web dizajn i CSS :: css pozicioniranje

[ Pregleda: 4303 | Odgovora: 13 ] > FB > Twit

Postavi temu Odgovori

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