Темплейт ???

Emperator

Registered
Можете л ида ми направите такъв темплейт че аз нз как се правят :( но да не е стаблици а с <div...></div>

temp.jpg
 
style.css
Код:
body {
width: 800px;
margin: 50 auto;
}

.logo {
height: 50px;
background: red;
border: 2px solid black;
}

.ad {
height: 100px;
background: green;
margin-top: 10px;
border: 2px solid black;
}

.content {
width: 480px;
float: left;
min-height: 414px;
background: yellow;
margin-top: 10px;
border: 2px solid black;
}

.righttop {
width: 298px;
float: right;
min-height: 200px;
background: orange;
margin-top: 10px;
border: 2px solid black;
}

.rightbottom {
width: 298px;
float: right;
min-height: 200px;
background: brown;
margin-top: 10px;
border: 2px solid black;
}

.footer {
height: 50px;
background: blue;
margin-top: 438px;
border: 2px solid black;
}

index.html
Код:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="style.css" type="text/css">

<title>asd</title>

</head>
<body>
<div class="logo">sadas</div>
<div class="ad">sadas</div>
<div class="content">sadas</div>
<div class="righttop">sadas</div>
<div class="rightbottom">sadas</div>
<div class="footer">sadas</div>
</body>
</html>

Demo!
 
без тия празни места и това жълто и оганжевото и това поид него трябва и те да са в един голям div както е на pic :)
 
style.css
Код:
                           body {
width: 800px;
margin: 50 auto;
}

#logo {
height: 50px;
background: red;
border: 2px solid black;
}

#search {
height: 50px;
background: grey;
border-left: 2px solid black;
border-right: 2px solid black;
}

#ad {
height: 100px;
background: green;
border: 2px solid black;
}

#wrapper {
padding: 9px;
border: 1px solid red;
min-height: 405px;
}

#content {
width: 490px;
float: left;
min-height: 400px;
background: yellow;
border: 2px solid black;
}

#righttop {
width: 284px;
float: right;
min-height: 200px;
background: orange;
border-top: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
}

#rightbottom {
width: 284px;
float: right;
min-height: 198px;
background: brown;
border-right: 2px solid black;
border-bottom: 2px solid black;
}

#footer {
clear: both;
height: 50px;
background: blue;

border: 2px solid black;
}
index.html
Код:
 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="stylen.css" type="text/css">

<title>asd</title>

</head>
<body>
<div id="logo">sadas</div>
<div id="search">sadas</div>
<div id="ad">sadas</div>
<div id="wrapper">
<div id="content">sadas</div>

<div id="righttop">sadas</div>
<div id="rightbottom">sadas</div>
</div>
<div id="footer">sadas</div>
</body>
</html>
Demo!
 
skatebord каза:
style.css
Код:
                           body {
width: 800px;
margin: 50 auto;
}

#logo {
height: 50px;
background: red;
border: 2px solid black;
}

#search {
height: 50px;
background: grey;
border-left: 2px solid black;
border-right: 2px solid black;
}

#ad {
height: 100px;
background: green;
border: 2px solid black;
}

#wrapper {
padding: 9px;
border: 1px solid red;
min-height: 405px;
}

#content {
width: 490px;
float: left;
min-height: 400px;
background: yellow;
border: 2px solid black;
}

#righttop {
width: 284px;
float: right;
min-height: 200px;
background: orange;
border-top: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
}

#rightbottom {
width: 284px;
float: right;
min-height: 198px;
background: brown;
border-right: 2px solid black;
border-bottom: 2px solid black;
}

#footer {
clear: both;
height: 50px;
background: blue;

border: 2px solid black;
}
index.html
Код:
 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="stylen.css" type="text/css">

<title>asd</title>

</head>
<body>
<div id="logo">sadas</div>
<div id="search">sadas</div>
<div id="ad">sadas</div>
<div id="wrapper">
<div id="content">sadas</div>

<div id="righttop">sadas</div>
<div id="rightbottom">sadas</div>
</div>
<div id="footer">sadas</div>
</body>
</html>
Demo!

Това е по-добре +1
 

Back
Горе