Ajutor cu cross-browser CSS positioning

Forumul Softpedia > Professional Zone > Webmaster Corner > Web Design / Flash / Graphix

r4zv4n
19th September 2005, 16:13


Este primul meu post pe acest forum, așa că, în primul rând.. bună ziua ! biggrin.gif

Problema mea este că am de făcut un layout la care vreau să folosesc CSS positioning în loc de tables.

Layout'ul ar trebui să arate cam ca în poza următoare (macheta layout'ului, făcută în PS - 200 Kb - 1024x768):



Am facut un exercițiu de așezare folosind CSS care a ieșit *aproape* bine pe M$IE și cam aiurea pe Firefox și Opera.

Postez codul:

re-laid.html
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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="re-laid.css" />
</head>
<body>
<div id="TopStripe">
<div id="BottomStripe" align="center">
<div align="center" id="DummyContainer">
<div id="Header" align="center">
head<br />
head<br />
head<br />
head<br />
head<br />
head<br />
head<br />
head<br />
head<br />
</div><!-- end Header -->
<div id="Floater">
float<br />
float<br />
float<br />
float<br />
float<br />
float<br />
float<br />
float<br />
float<br />
float<br />
float<br />
float<br />
float<br />
</div><!-- end Floater -->
<div id="Content" align="center">
content
</div><!-- end Content -->
<div id="Footer" align="center">
footer
</div><!-- end Footer -->
<div id="Copyrights" align="center">
copyrights
</div><!-- end Copyrights -->
</div><!-- end DummyContainer -->
</div><!-- end BottomStripe -->
</div><!-- end TopStripe -->
</body>
</html>


re-laid.css
CODE
@charset "iso-8859-1";
/* CSS Document */

HTML, BODY {
height: 100%;
width: 100%;
}
BODY {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#BottomStripe {
background-image:url(../img/bg_Gray_Under.gif);
background-repeat:repeat-x;
background-position:bottom;
width:100%;
position:absolute;
/*height:auto;
min-height:100%;
text-align: center; /* for centering the other divs */
}
#TopStripe {
background-image:url(../img/bg_Gray_Under.gif);
background-repeat:repeat-x;
width: 100%;
height:100%;
}
* BODY #BottomStripe {
height: 100%;
}
#Centerer {
width: 600px;
}
#Header {
background-color:#FFCC33;
width: 600px;
z-index: 98;
}
#Content {
background-color:#FFFFCC;
width: 600px;
height: 100%;
z-index: 98;
float:left;
clear: both;
}
#DummyContainer {
height:100%;
width: 600px;
}
#Footer {
background-color:#FF6633;
width: 600px;
z-index: 98;
float: left;
clear: both;
}
#Copyrights {
width: 600px;
float: left;
clear: both;
}
#Floater {
background-color: #CCCCCC;
width: 200px;
z-index:99;
position: relative;
margin-right: 10px;
margin-top: -60px;
margin-bottom: 10px;
margin-left: -60px;
float: right;
}

/* Rules to override M$IE */
HTML>BODY>#TopStripe>#BottomStripe>#DummyContainer #Footer {
float: none;
clear: none;
}
HTML>BODY>#TopStripe>#BottomStripe>#DummyContainer #Copyrights {
float: none;
clear: none;
}
HTML>BODY>#TopStripe>#BottomStripe>#DummyContainer #Content {
float: none;
clear: none;
}



Spun că arată *aproape* bine pe M$IE pentru că eu aș vrea să fie afișat după cum urmează:

- dacă ceea ce am în DIV'ul #Content (cel galben din centru - conținutul efectiv al paginii) nu umple pagina, aș vrea ca acesta să se extindă suficient cât să umple view-port'ul, dar în așa fel încât ultimul rând de pe pagină să fie cel de "copyrights" si banda roșie de footer să fie deasupra benzii gri de fundal.

- dacă ceea ce am în DIV'ul #Content umple / depășește pagina, banda gri să fie împinsă în așa fel încât să fi așezată tot sub banda roșie de footer și rândul cu "copyrights".

Sau, cu alte cuvinte, aș vrea (a se vedea poza imediat următoare) ca headerul să fie tot timpul header și footerul să fie tot timpul footer (lipit de sfârșitul paginii).



Dacă aveți timp, aruncați o privire cu M$IE și Firefox / Opera și dacă aveți și mai mult timp, ajutați-mă cu o indicație / soluție / orice, că deja simt că o iau razna..

Mulțumesc anticipat smile.gif
danburzo
19th September 2005, 17:44
in primul rand nu ti se aplica declaratiile din CSS pentru HTML si BODY fiindca sunt cu majuscule... XHTML necesita toate tagurile in lowecase... edit: ma rog, vad ca nu prea face nici o diferenta... dar ca idee smile.gif
revin dupa ce arunc o privire pe cod. wink.gif
 
danburzo
19th September 2005, 18:16
codul curatat:
CODE
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {
    margin:0;
    padding:0;
}

body {
    text-align:center;
}

#wrapper {
    width:600px;
    margin:0 auto;
    text-align:left;
}

#header {
    background:#f00;
    padding-right:170px;
}

#floater {
    position:relative;
    background:#0f0;
    float:right;
    width:150px;
    top:-60px;
    right:10px;
}

#content {
    background:#00f;
    padding-right:170px;
}
</style>
</head>

<body>
    <div id="wrapper">
 <div id="header">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla magna lorem, pulvinar id, pretium ut, tristique a, ligula. Quisque scelerisque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla magna lorem, pulvinar id, pretium ut, tristique a, ligula. Quisque scelerisque.
 </div>
 <div id="floater">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla magna lorem, pulvinar id, pretium ut, tristique a, ligula. Quisque scelerisque. Vestibulum varius pulvinar dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas egestas. Sed quam magna, blandit a, commodo eget, porta eget, lorem. In tempus sapien eget orci. Phasellus sit amet odio id dui aliquam consequat.
 </div>
 <div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla magna lorem, pulvinar id, pretium ut, tristique a, ligula. Quisque scelerisque. Vestibulum varius pulvinar dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas egestas. Sed quam magna, blandit a, commodo eget, porta eget, lorem. In tempus sapien eget orci. Phasellus sit amet odio id dui aliquam consequat. Ut ornare, pede vitae scelerisque elementum, nunc massa vulputate lectus, ac vestibulum mauris mi malesuada nulla. Integer a augue a nibh malesuada luctus. Nullam et elit fermentum turpis consectetuer volutpat. In mauris sapien, pretium in, ornare vitae, consectetuer ac, lorem. Proin accumsan erat non nisi. Pellentesque turpis. Cras ut lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
     Etiam in sem. Nulla laoreet libero at tellus. Sed fermentum justo ut neque. Nullam eleifend libero ac metus. Morbi ultrices enim ut mauris. Curabitur a metus nec augue rutrum mattis. Vestibulum hendrerit. Curabitur felis mauris, viverra ut, hendrerit eget, laoreet eu, urna. Cras convallis. Suspendisse erat urna, pretium at, volutpat non, gravida id, erat. Ut adipiscing elementum ipsum. Aliquam vitae turpis. Sed et lectus non neque rhoncus pulvinar. Maecenas quis massa. Donec et lectus. Cras ac mi ac justo rutrum nonummy. Morbi quis tortor.
 </div>
    </div>
</body>
</html>

referitor la footer (sper ca am inteles ceea ce trebuia):
http://www.alistapart.com/articles/footers
Reclama
A minute ago
In curand... autoevolution.ro

Teste, stiri, ghiduri, jurnale, forum si multe altele!
Aceasta este o versiune simplificată a paginii originale. Pentru a vizita versiunea originala click aici.