css pozicioniranje

css pozicioniranje 18.10.2006. u 01:28 · pre 243 meseca #1

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>

Re: css pozicioniranje 18.10.2006. u 10:40 · pre 243 meseca #2

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>

Re: css pozicioniranje 18.10.2006. u 18:53 · pre 243 meseca #3

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.

Re: css pozicioniranje 18.10.2006. u 20:24 · pre 243 meseca #4

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.

Re: css pozicioniranje 19.10.2006. u 00:50 · pre 243 meseca #5

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?

Re: css pozicioniranje 19.10.2006. u 10:09 · pre 243 meseca #6

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.

Re: css pozicioniranje 19.10.2006. u 17:16 · pre 243 meseca #7

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> ....................

Re: css pozicioniranje 20.10.2006. u 17:48 · pre 243 meseca #8

Mozes postat css koji ti radi probleme I dali je IE6 (verovatno) taj koji ne radi?

Potpis

If we want to discover, we first have to be willing to get lost!

Re: css pozicioniranje 20.10.2006. u 18:54 · pre 243 meseca #9

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%

Re: css pozicioniranje 20.10.2006. u 21:37 · pre 243 meseca #10

Nemam pojma gde je catch!! :)

Potpis

If we want to discover, we first have to be willing to get lost!

Re: css pozicioniranje 21.10.2006. u 09:34 · pre 243 meseca #11

Mislim da će raditi ako umesto 60% budeš stavio npr 59.9%.

Re: css pozicioniranje 09.02.2007. u 11:24 · pre 240 meseci #12

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

Potpis

http://www.cicevac-razanj.com, http://www.opstinaparacin.info
http://blog.tag-web-design.net, http://www.smestajubanji.com

primer.zip13.59k

Re: css pozicioniranje 31.03.2008. u 03:08 · pre 226 meseci #13

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 !!!

Potpis

http://www.behance.net/MiselTekinder

Re: css pozicioniranje 31.03.2008. u 03:37 · pre 226 meseci #14

Upisi u #footer sledeci stvar:

clear:both;

Ovo bi trebalo u vecini slucajeva da ti zavrsi posao.

Potpis

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ć

Forum kao aplikacija na telefonu

Srodne teme