| |
Vorheriges Thema:
Nächstes Thema: |
| Autor |
Nachricht |
puitoN
Gast
|
 Verfasst am: 24.11.2006 20:30:36 Titel: divs positionieren |
 |
|
Hallo
Ich bin dabei meine Homepage komplett mit divs (also ohne Tabellen) zu designen. Leider hab ich aber da ein kleines (grosses?) Problem:
http://blog.ch-suter.ch/
-> das "NAVIGATION GOES HERE" Element sollte eigentlich als zweite Spalte neben die schwarze Box!
Ich kopiere hier mal den Code von der CSS- und der HTML-Datei hin, denn im Browser wird der Code sehr hässlich (ohne Zeilenumbrüche dargestellt [wieso??]).
HTML (gekürzt)
| Code: |
<body>
<div="top">BANNER GOES HERE</div>
<div id="topmenu">
<ul id="topmenu">
...
</ul>
</div>
<div id="body">CONTENT GOES HERE</div>
<div id="menu">NAVIGATION GOES HERE</div>
<div id="bottom"> � 2006 Christoph Suter</div>
</body>
|
CSS (gekürzt)
| Code: |
body {
padding-top: 10%;
padding-left: 10%;
padding-right: 10%;
}
td {
border: solid;
}
li.topmenu {
display: inline;
padding-right:10px;
}
ul#topmenu {
display: inline;
}
div#top {
width: 100%;
height: 20%;
top: 0%;
bottom: 80%;
background-color: #000000;
left: 0%;
right: 0%;
}
div#topmenu {
width: 100%;
height: 8%;
top: 20%;
bottom: 72%;
background-color: blue;
left: 0%;
right: 0%;
}
div#body {
width: 70%;
height: 64%;
left: 0%;
right: 30%;
bottom: 8%;
top: 28%;
background-color: black;
}
div#menu {
position: absolute;
width: 30%;
left: 70%;
right: 0%;
bottom: 8%;
top: 28%;
background-color: #CC0000;
}
div#bottom {
width: 100%;
height: 8%;
bottom: 0%;
top: 92%;
left: 0%;
right: 0%;
background-color: #990000;
}
|
Könnt ihr mir bitte helfen, und sagen, was ich tun muss, damit das DIV mit der ID=menu dort steht, wo ich es will[/code] |
|
| Nach oben |
|
 |
admin
Site Admin
Anmeldungsdatum: 16.01.2005
Beiträge: 323
Wohnort: Berlin
|
| Verfasst am: 24.11.2006 21:32:11 Titel: |
|
|
sorry, puitoN, hab beim löschen der spamer deinen account ausversehen mit gelöscht. bitte einfach nochmal neu anlegen.
dafür kriegste von mir auch die antwort zu deinem problem:
| Code: |
<html>
<head>
<style type="text/css">
<!--
body {
padding-top: 10%;
padding-left: 10%;
padding-right: 10%;
}
td {
border: solid;
}
li.topmenu {
display: inline;
padding-right:10px;
}
ul#topmenu {
display: inline;
}
div#top {
width: 100%;
height: 20%;
top: 0%;
bottom: 80%;
background-color: #000000;
left: 0%;
right: 0%;
}
div#topmenu {
width: 100%;
height: 8%;
top: 20%;
bottom: 72%;
background-color: blue;
left: 0%;
right: 0%;
}
div#c{position:relative; width:100%}
div#body {
width: 70%;
height: 64%;
left: 0%;
right: 30%;
bottom: 8%;
top: 28%;
background-color: black;
}
div#menu {
position: absolute;
width: 30%;
left: 70%;
right: 0%;
bottom: 8%;
top: 0;
background-color: #CC0000;
}
div#bottom {
width: 100%;
height: 8%;
bottom: 0%;
top: 92%;
left: 0%;
right: 0%;
background-color: #990000;
}
-->
</style>
</head>
<body>
<div="top">BANNER GOES HERE</div>
<div id="topmenu">
<ul id="topmenu">
...
</ul>
</div>
<div id="c">
<div id="body">CONTENT GOES HERE</div>
<div id="menu">NAVIGATION GOES HERE</div>
</div>
<div id="bottom"> ? 2006 Christoph Suter</div>
</body>
</html> |
|
|
| Nach oben |
|
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
|
|
FAQ
Suchen
Mitgliederliste
Benutzergruppen
Registrieren
Profil
Einloggen, um private Nachrichten zu lesen
Login
