Έχω φτιάξει λοιπόν το εξής html αρχείο
Spoiler: show
- Κώδικας: Επιλογή όλων
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-7" >
<title>Untitled</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="logo"><a href="/" ><img src="images/logo.gif" alt="Logo image.Click here for home."/></a>
</div>
<div id="topright">
This is my top right module position.
</div>
<div id="header">
<h3>Slideshow</h3>
</div>
<div id="topmenu">
<ul>
<li><a href="#">Αρχική</a></li>
<li><a href="#">Επικοινωνία</a></li>
</ul>
</div>
<div id="midone">
<h3>Sidebar1</h3>
<p>This is my first middle module position</p>
</div>
<div id="midtwo">
<h3>Sidebar2</h3>
<p>This is my second middle module position</p>
</div>
<div id="main">
<h3>Main Content</h3>
<p>This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.This is my main content area.</p>
</div>
<div id="bottomleft">
<h3>Bottom1</h3>
<p>This is my bottom-left module position</p>
</div>
<div id="bottomright">
<h3>Bottom2</h3>
<p>This is my bottom-right module position</p>
</div>
<div id="footer">
<h3>Footer</h3>
<p>This is my footer</p>
</div>
</div>
</body>
</html>
και το css
Spoiler: show
- Κώδικας: Επιλογή όλων
body {
margin: 0;
padding: 0;
text-align: center;
}
#container {
background-color: pink;
margin: 1% auto;
width: 90%;
text-align: left;
}
#logo {
background-color: yellow;
margin-right: 40%;
padding-top: 10px;
padding-left: 10px;
}
#topright {
background-color: white;
float: right;
margin-top: -3%;
padding: 1% 0 1% 1%;
}
#header {
background-color: green;
width: 70%;
margin: 0 auto;
}
#topmenu {
background-color: gray;
padding: 1% 1% 1% 1%;
}
#midone {
background-color: blue;
float: right;
margin-top: 10%;
margin-left: 75%;
padding: 1% 1% 1% 1%;
}
#midtwo {
background-color: red;
float: right;
margin-top: 15%;
margin-left: 75%;
padding: 1% 1% 1% 1%;
}
#main {
background-color: teal;
margin-right: 25%;
padding-left: 2%;
}
#bottomleft {
background-color: aqua;
margin-left: 10%;
margin-right: 55%;
}
#bottomright {
background-color: olive;
margin-left: 55%;
margin-right: 10%;
margin-top: -79px;
}
#footer {
background-color: orange;
text-align: center;
font-size: 0.7em;
}
αλλά το κείμενο στο #main μου βγαίνει πολύ χαμηλά. Πως μπορώ να το διορθώσω; Επίσης νομίζω ότι κάτι δεν έχω κάνει καλά με την θέση "bottom-right". Γενικά αν δείτε ότι έχω κι άλλα λάθη προτείνετε μου κι άλλες λύσεις μιας και τώρα ξεκίνησα να ασχολούμαι με html-css.
.
