| Autor |
Nachricht |
smartyarts
Threadersteller
Dabei seit: 05.08.2005
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Mi 26.04.2006 12:41
Titel Probleme mit Layout Positionierung |
  |
|
Ich möchte gerne folgendes Layout realisieren:
| Header (100% Seitenbreite ) |
| Content (800 px Breit und seitenzentriert) |
Im Content 1. Spalte mit 380px width und daneben (40px Abstand) 2. Spalte ebenfalls mit 380px width.
Im 5px Margin zu den oberen beiden Spalten:
| Footer (800 px Breit und seitenzentriert) |
Leider scheitere ich an der Umsetzung des Footers, denn ich weiß nicht wie ich den Footer mit CSS positionieren soll, so dass er zentriert mit 800px width unter den Content erscheint.
Bisher habe ich es nur bis zu den beiden Spalten vom Layout her geschafft:
| Code: |
<div id="header"><img src="img/bar_logo+buttons.jpg" width="800" height="185" /></div>
<div class="container">
<div id="content">
<div class="hl">Test it Baby all day long!</div>
<div class="leftcol">Test it Baby all day long!</div>
<div class="rightcol">Test it Baby all day long!</div>
</div>
</div>
|
Dazu der CSS Code:
| Code: |
body {
margin: 0;
font-weight: normal;
font-size: 10pt;
line-height: 12pt;
font-family:"Trebuchet MS", Verdana, sans-serif;
color:#000000;
background-color:#FFFFFF;
}
#header {
margin: 0;
height: 185px;
background-image: url(../img/bg_img.gif);
background-repeat: repeat-x;
text-align:center;
}
#content {
position:absolute;
width: 800px;
}
div.leftcol {
position:absolute;
margin-top: 5px;
width: 380px;
}
div.rightcol {
position:absolute;
margin-left: 420px;
margin-top: 5px;
width: 380px;
}
div.container {
position:relative;
margin: 0 auto;
width: 800px;
}
div.hl {
border-width: 1px;
border-style: solid;
border-color: #dadada;
padding: 2pt;
}
#footer {
position:absolute;
top: 5px;
width: 800px;
text-align:center;
font-weight: normal;
font-size: 9pt;
line-height: 10pt;
font-family:"Trebuchet MS", Verdana, sans-serif;
color:#b5b5b5;
}
|
Sobald ich aber die Div id="footer" runter packe, wird es nie so angezeigt wie o.g.
Gibt es überhaupt eine Möglichkeit dies ohne Tabellen mit CSS umzusetzen?
Für jede Hilfe danke ich schon mal im voraus!
|
|
| |
  |
 |
fuchsbau
Dabei seit: 15.08.2005
Ort: .//root
Alter: 40
Geschlecht:
|
Verfasst Mi 26.04.2006 13:52
Titel
|
|
|
na weil das mit dem relative/absolute müll is.
so würd ichs machen, weiß nicht, ob ich jetzt alles berücksichtigt hab...
- den border natürlich immer auf 0 setzen, ist jetzt nur zum angucken, klar, ne?!
- der spaltencleaner is nur vorsichtshalber ^^
xhtml:
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3c.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="contentr">rechts</div>
<div class="contentl">links</div>
</div>
<div class="footer">footer</div>
</body>
</html> |
css:
| Code: | body { margin: 0; padding: 0; }
.header { width: 100%; height: 185px; margin: 0; padding: 0; border: 1px solid; }
.content { width: 800px; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; padding: 0; border: 1px solid; }
.contentl { width: 380px; margin-left: 0; margin-right: 40px; margin-top: 0; margin-bottom: 0 padding: 0; border: 1px solid; }
.contentr { width: 380px; margin: 0; padding: 0; float: right; border: 1px solid; }
.spaltencleaner { clear: both; height: 1px; margin: 0; padding: 0; }
.footer { width: 800px; margin-left: auto; margin-right: auto; margin-top: 5px; margin-bottom: 0; padding: 0; border: 1px solid; } |
nich?
Zuletzt bearbeitet von fuchsbau am Mi 26.04.2006 13:54, insgesamt 3-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
smartyarts
Threadersteller
Dabei seit: 05.08.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 26.04.2006 14:18
Titel Danke! |
|
|
Cool, danke für deine Mühe. Habe bisher immer alles mit Tabellen und transparent.gif gelayoutet. Gut das man das alles mit CSS machen kann! Dachte schon ich wäre in einer Sackgasse gelandet...
Grüße
smartyarts
|
|
| |
|
|
fuchsbau
Dabei seit: 15.08.2005
Ort: .//root
Alter: 40
Geschlecht:
|
Verfasst Mi 26.04.2006 15:00
Titel
|
|
|
keine angst, die sackgassen wirst du auch noch zur genüge finden.  so geht's mir jedenfalls hehe
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[CSS] Probleme mit DIV-Positionierung
Probleme mit Div-Positionierung...
CSS Probleme mit der positionierung in IE 6 und kleiner.
[DIV] Probleme mit Positionierung (überlappen)
Probleme mit Layout - div im layout height="100%"
Layout Probleme
|
|
Willkommen auf dem Portal für Mediengestalter
