Ciao a tutti ragazzi, allora, sto sviluppando un layout XHTML e CSS, ecco i rispettivi codici:
HTML
CSS (CSS 2)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Simple layout by PKS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="title">
Simple layout</p></div>
<div id="boxcont">
<div id="box1">
Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text</p></div>
<div id="box2">
Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text</p></div>
</div>
</div>
<div id="back">
<div id="container2">
<div id="left">
<div class="left_title">Simple</div>
<div class="left_center">
<ul>[*]Test[*]Test[*]Test[*]Test[/list]
</div>
<div class="left_bottom"></div>
<div class="left_title">Simple</div>
<div class="left_center">
<ul>[*]Test[*]Test[*]Test[*]Test[/list]
</div>
<div class="left_bottom"></div>
</div>
<div id="right">
<div class="right_title">Simple Title</div>
<div class="right_center">Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text
</div>
<div class="right_bottom"></div>
<div class="right_title">Simple Title</div>
<div class="right_center">Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text
</div>
<div class="right_bottom"></div>
</div>
</div>
<div id="footer">Ciao</div>
</div>
</div>
</body>
</html>
(Non posto le immagini di sfondo tanto non servono... In sostanza il codice e' valido come XHTML Strict e CSS 2, si vede bene su IE ma su firefox ci sono alcuni probemi:* {font-family: Arial, Verdana, sans-serif; font-size: 9pt;}
html, body {margin: 0; padding: 0;}
div#container {width: 700px; margin: auto; padding: 0;}
/* Header */
div#header {width: 700px; height: 252px; margin: 0; padding: 0; background-image: url(layout/header.gif); background-repeat: no-repeat;}
div#title {position: relative; top: 60px; left: 350px;}
div#title p {font-size: 30px; font-weight: bold;}
div#boxcont {margin: 98px 0 0 35px; width: 626px;}
div#box1 {float: left; padding: 5px; margin: 0; width: 293px; height: 102px; text-indent: 10px;}
div#box2 {float: right; padding: 5px; margin: 0; width: 291px; height: 102px;}
div#box1, div#box2 p {font-weight: bold;}
/* Content */
div#back {margin: 0; padding: 8px 0 0 0; width: 700px; background-image: url(layout/back_cont.gif); background-repeat: repeat-y;}
div#container2 {margin: 0 8px 0 34px; padding: 0; width: 631px; height: auto;}
div#left {float: left; padding: 0; width:143px;}
div.left_title {margin: 0; padding: 8px 0 0 0; width: 143px; height: 22px; background-image: url(layout/left_title.gif); background-repeat: no-repeat; text-align: center; font-weight: bold;}
div.left_center {margin: 0; padding: 6px; background-image: url(layout/left_center.gif); background-repeat: repeat-y; font-weight: bold;}
div.left_center ul {margin: 0; padding: 0; list-style: none; text-align: center;}
div.left_bottom {margin: 0; padding: 0; height:18px; background-image: url(layout/left_bottom.gif); background-repeat: no-repeat;}
div#right {float: right; padding: 0; width: 481px;}
div.right_title {margin: 0; padding: 8px 0 0 0; width: 481px; height: 23px; background-image: url(layout/right_title.gif); background-repeat: no-repeat; font-weight: bold; text-align: center;}
div.right_center {margin: 0; padding: 4px 6px 4px 6px; background-image: url(layout/right_center.gif); background-repeat: repeat-y;}
div.right_bottom {width: 481px; margin: 0; padding: 0; background-image: url(layout/right_bottom.gif); background-repeat: no-repeat; height:10px;}
div#footer {clear: both; width: 100%; font-size:8pt; text-align: center;}
L'header e' troppo grande, quindi mi rimane un po' di spazio vuoto sopra (l'immagine di sfondo e' grande quanto l'header) e c'e' una scroll bar orizzontale che non so a cosa serva, ho provato di tutto ma non va niente, aiutatemi!
Rispondi quotando
