Δημοσιεύτηκε: 17 Φεβ 2012, 22:19
Μπερδέυτηκα λίγο. Στο παράδειγμα που έιχες κάνει εσύ ηταν μια χαρά έτσι? Εμένα όλο μου φαίνόταν. Εννοώ αυτό με τα μωβ κόκκινα χρώματα...
Προσπάθησε να παίξεις με τα DIV και θα το καταλάβεις πως πάει. Πάντως δεν υπάρχει στανταρ ένας τρόπος για να το κάνεις αυτό. Τσέκαρε και αυτό: http://www.cs.uoi.gr/~billys/ μπορεί να σου δώσει καμια ιδέα. Ορίστε και το CSS μου
- Κώδικας: Επιλογή όλων
<!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" />
<!-- <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> -->
<link href='style.css' rel='stylesheet' type='text/css' />
<title>Hotel</title>
</head>
<body>
<div id="header">
Header
</div>
<div id="nav">
nav
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</body>
</html>
- Κώδικας: Επιλογή όλων
html, body {
height:100%;
background-color:#b0c4de;
margin: 0;
padding: 0;
}
div {
border:1px solid black;
}
#header{
width:auto;
height:5em;
background-color:#0D70AE;
}
#nav{
float : left;
width: 10em;
height: 100%;
background-color:#8A0D51
}
#content {
height: 100%;
background-color:#AE3EA5;
}
#footer {
clear : both;
width: 100%;
height: 50px;
background-color:#86AA6A;
margin-top: -50px; position: relative;
}
Προσπάθησε να παίξεις με τα DIV και θα το καταλάβεις πως πάει. Πάντως δεν υπάρχει στανταρ ένας τρόπος για να το κάνεις αυτό. Τσέκαρε και αυτό: http://www.cs.uoi.gr/~billys/ μπορεί να σου δώσει καμια ιδέα. Ορίστε και το CSS μου
- Κώδικας: Επιλογή όλων
/*********************************************************************
------------------------- MY CSS ---------------------------
by vasilis tzivaras
*********************************************************************/
/*************** MAIN CONTENT ***************/
body {
background: black;
/*color: #4B4B4B;*/
/*font-family: 'Comic Sans Ms';*/
}
#main {
/*background-image: url('../images/main_bg.jpg');*/
}
/*********************************************
main -> {header, content, footer}
*********************************************/
#header {
/*height: 150px;*/
background: white;
float: center;
}
#content {
font-family: 'Comic Sans MS';
text-align: left;
background: url('../images/content_bg.png');
width: 837px;
color: white;
overflow: hidden;
margin: 40px auto 0 auto;
padding: 40px 24px 20px 37px;
border-style: ridge;
border-width: 3px;
border-color: #7A1E1E;
float: center;
}
#footer {
width: 100%;
height: 33px;
color: white;
font-family: 'Comic Sans MS';
text-align: center;
text-transform: uppercase;
padding: 24px 0 0 0;*/
}
/*********************************************
header -> *header_background*{welcome, menubar}
*********************************************/
/* text-align: value each div manually*/
#welcome {
height:220px;
width: 1200px;
float: center;
font-family: 'Comic Sans MS';
color: white;
overflow: hidden;
margin: 5px auto 0px auto;
padding: 5px 5px 5px 5px;
/*background: white;*/
}
#header_background {
background-image: url('../images/header_bg.png');
}
#menubar {
height: 38px;
text-align: center;
background-image: url('../images/menubar.png');
/*margin-top: 15px;*/
/*margin-bottom: 15px;*/
}
/*********************************************
welcome -> {picture, welcome_title, info}
*********************************************/
#picture {
background-image: url('../images/logo_red.png');
height: 180px;
width: 188px;
margin: 4px 0px 4px 4;
float: left;
/*background-color: grey;*/
}
#welcome_title {
height: 210px;
width: 642px;
margin: 4px 20px 4px 20px;
float: left;
/*background: green;*/
text-shadow: 8px 6px 8px #FF0000;
font-family: "Comic Sans Ms";
text-align: center;
font-size: 42px;
}
#info {
height: 210px;
width: 300px;
float: right;
margin: 4px 4px 4px 0px;
/*background: blue;*/
font-family: Consolas;
/*color: white; */
}
/*********************************************
CSS classes
*********************************************/
.music_title {
color: white;
}
.selected {
color: #860808;
text-decoration: none;
word-spacing: 20px;
font-family: 'Comic Sans MS';
font-size: 26px;
}
.content_tag {
height: 250px;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #860808;
margin-bottom: 30px;
/*background: green;*/
}
.post_title {
/*background: purple;*/
}
.post_image {
float: left;
/*background: red;*/
width: 160px;
height: 180px;
margin: 0 2 5 5;
}
.post_text {
/*background: blue;*/
float: right;
width: 650px;
height: 180px;
margin: 0 2 5 5;
}
/*********************************************
Headers
*********************************************/
h2 {
font: normal 175% 'Comic Sans MS';
color: #B81D1D;
margin: 0 0 5px 0;
padding: 15px 0 6px 0;
}
/*********************************************
Other
*********************************************/
ul {
list-style-type: none;
width: 100%;
padding: 0;
margin: 0;
}
li {
display: inline;
}
a {
color: #992F2F;
text-decoration: none;
}
a:hover {
color: white;
/*background: #C25454; */
/*text-decoration: underline;*/
}