[ dmilijasevic @ 28.02.2011. 20:45 ] @
imam problem sa layerom content koji mi prelazi donji layer copyright, npr.
kako da namestim i da li postoji mogucnost, da kako se povecava height content layer-a da se copyright layer tako automatski
ispusta...odnosto da se height layer-a wrapper povecava.


evo i koda...
Code (html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.wrapper {
     background-color: #CCC;
     width: 800px;
     border: 1px solid blaack;
     position: relative;
     margin-top: 0px;
     margin-right: auto;
     margin-bottom: 0px;
     margin-left: auto;
}
.topspacer {
     background-color: darkred;
     height: 30px;
     width: 800px;
     position: relative;
     margin-top: 0px;
     margin-right: auto;
     margin-bottom: 0px;
     margin-left: auto;
}
.header {
     height: 200px;
     width: 800px;
     border: 1px solid black;
     position: relative;
     clip: rect(0px,auto,0px,auto);
}
.spacer2 {
     background-color: darkred;
     height: 30px;
     width: 800px;
     margin-top: 0px;
     margin-right: auto;
     margin-bottom: 0px;
     margin-left: auto;
     position: relative;
}
.navigation {
     width: 200px;
     margin-top: 0px;
     margin-right: auto;
     margin-bottom: 0px;
     margin-left: 0px;
     border: 1px solid black;
     position: relative;
}
.banners {
     background-color: black;
     width: 200px;
     margin-top: 0px;
     margin-right: auto;
     margin-bottom: 0px;
     margin-left: 0px;
     position: relative;
}
.copyright {
     background-color: black;
     height: 30px;
     width: 800px;
     margin-top: 0px;
     margin-right: auto;
     margin-bottom: 0px;
     margin-left: auto;
     position: relative;
}
.content {
     background-color: #FFC;
     width: 600px;
     border:1px solid black;
     position: absolute;
     left: 200px;
     top: 260px;
     height: 200px;
}
</style>
</head>

<body>
<div class="wrapper">
  <div class="topspacer"></div>
  <div class="header"></div>
  <div class="spacer2"></div>
  <div class="navigation">
        <p>nav1</p>
        <p>nav2</p>
        <p>nav2</p>
          </div>
                <div class="content"></div>
     <div class="banners">
     banner</div>
  <div class="copyright">Content for  class "copyright" Goes Here</div>
</div>
</body>
</html>
 



mod: dodati [code][/code] tagovi

[Ovu poruku je menjao Aleksandar Ružičić dana 01.03.2011. u 00:49 GMT+1]
[ snake_master @ 28.02.2011. 21:10 ] @
Pogledao sam tvoj kod.

Imas apsolutno pozicioniran content div, zato ne mozes da postignes ono sto hoces. Ceo kod ti je los.

Ako mozes postavi sliku gde koji elemenat treba da bude postavljen, pa cu ti uraditi, a ti posle pogledaj kod da imas predstavu gde gresis...

ne treba ti ovo margin: 0 auto 0 0; to ti ne znaci nista, ili margin ima svoje vrednosti ili je margin: 0 auto; (koristis za centriranje elemenata koji imaju svoj width)

[ dmilijasevic @ 28.02.2011. 22:42 ] @
trebalo bi da izgleda ovako:

http://img7.imageshack.us/i/primers.jpg/

koliko mi je uspelo da pronadjem na netu, trebalo bi u wrapper-u da mi bude navigacija, prostor ispod navigacije i
content...ako ne gresim..ali mi onda opet problem kako ceo sajt da centriram, ili to da u body zadam?
[ Ljubiša Begović @ 01.03.2011. 02:12 ] @
Evo uradio sam ti, ovaj layout ti radi u FF, Chrome, Opera, IE8, uključujući i IE 6 i 7.
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body { margin:0;padding:0; }
.wrapper {
background-color: #CCC;
width: 800px;
margin:0 auto;
}
.topspacer {
background-color: darkred;
height: 30px;
width: 800px;
margin:0 auto;
}
.header {
height: 100px;
width: 800px;
}
.spacer2 {
background-color: darkred;
height: 30px;
width: 800px;
margin: 0 auto;
}
.maincontent {
margin: 0 auto;
background: #ffc;
width:800px;
float: left;
}
.leftsidebar {
background:purple;
float:left;
width:200px;
}
.navigation {
width: 200px;
background: purple;
}
.navigation p { margin:0; padding:0; }
.banners {
background-color: blue;
width: 200px;
}
.content {
background-color: #FFC;
width: 600px;
float:right;
}
.copyright {
background-color: black;
height: 30px;
width: 800px;
margin:0 auto;
color:#fff;
float:left;
}
</style>
</head>

<body>
<div class="wrapper">

<div class="topspacer">spacer</div>

<div class="header">header</div>

<div class="spacer2">spacer 2</div>

<div class="maincontent">

<div class="leftsidebar">
    <div class="navigation">
    <p>navigation</p><p>navigation</p><p>navigation</p><p>navigation</p><p>navigation</p>
    </div>
    <div class="banners">banner<br />banner<br />banner<br /></div>
</div>

<div class="content">content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content
</div>

</div>
<div class="copyright">Content for class "copyright" Goes Here</div>
</div>

</body>
</html>
[ dmilijasevic @ 01.03.2011. 10:20 ] @
hvala!!!

to znaci da ono pozicioniranje je totalno bespotrebno?
[ Ljubiša Begović @ 01.03.2011. 15:59 ] @
Sajt možeš organizovati na više načina. To što sam ti uradio je jedan od njih, neko drugi bi to nešto drugačije uradio, verovatno. Ja pozicioniranje (naročito apsolutno) koristim samo kad moram i gde treba, za layout ne koristim. U toku rada sam uočiš šta je za tebe najprihvatljivije a da radi u većini browser-a. Moj cilj je da to bude što jednostavnije.