mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 08.12.2016 23:11 Benutzername: Passwort: Auto-Login

Thema: Probleme mit Layout Positionierung vom 26.04.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Probleme mit Layout Positionierung
Autor Nachricht
smartyarts
Threadersteller

Dabei seit: 05.08.2005
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 26.04.2006 11:41
Titel

Probleme mit Layout Positionierung

Antworten mit Zitat Zum Seitenanfang

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!
  View user's profile Private Nachricht senden
fuchsbau

Dabei seit: 15.08.2005
Ort: .//root
Alter: 33
Geschlecht: Männlich
Verfasst Mi 26.04.2006 12:52
Titel

Antworten mit Zitat Zum Seitenanfang

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 12:54, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
smartyarts
Threadersteller

Dabei seit: 05.08.2005
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 26.04.2006 13:18
Titel

Danke!

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
fuchsbau

Dabei seit: 15.08.2005
Ort: .//root
Alter: 33
Geschlecht: Männlich
Verfasst Mi 26.04.2006 14:00
Titel

Antworten mit Zitat Zum Seitenanfang

keine angst, die sackgassen wirst du auch noch zur genüge finden. *zwinker* so geht's mir jedenfalls hehe
  View user's profile Private Nachricht senden
 
Ähnliche Themen Probleme mit Div-Positionierung...
[DIV] Probleme mit Positionierung (überlappen)
CSS Probleme mit der positionierung in IE 6 und kleiner.
[CSS] Probleme mit DIV-Positionierung
Probleme mit Layout - div im layout height="100%"
Layout Probleme
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.