problem sa layer-ima

problem sa layer-ima 28.02.2011. u 21:45 · pre 190 meseci #1

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}

Re: problem sa layer-ima 28.02.2011. u 22:10 · pre 190 meseci #2

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)

Re: problem sa layer-ima 28.02.2011. u 23:42 · pre 190 meseci #3

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?

Re: problem sa layer-ima 01.03.2011. u 03:12 · pre 190 meseci #4

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>

Re: problem sa layer-ima 01.03.2011. u 11:20 · pre 190 meseci #5

hvala!!!

to znaci da ono pozicioniranje je totalno bespotrebno?

Re: problem sa layer-ima 01.03.2011. u 16:59 · pre 190 meseci #6

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.

Forum kao aplikacija na telefonu

Srodne teme