mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 05:51 Benutzername: Passwort: Auto-Login

Thema: Tabellenloses Layout - Horizontal 100% vertikal zentriert vom 11.02.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Tabellenloses Layout - Horizontal 100% vertikal zentriert
Autor Nachricht
scavenger
Threadersteller

Dabei seit: 20.11.2002
Ort: -
Alter: 41
Geschlecht: Männlich
Verfasst So 11.02.2007 12:58
Titel

Tabellenloses Layout - Horizontal 100% vertikal zentriert

Antworten mit Zitat Zum Seitenanfang

Hi,
ich möchte für einen Freund von mir eine Homepage erstellen und versuche mich erstmals mit tabellenlosem Layout per CSS.

im Groben und Ganzen hab ichs schon hinbekommen - hab aber noch je nach browser ein paar Probleme...

Die Seite soll eine feste Größe haben und horizontal und vertikal zentriert sein. Zudem möchte ich aber noch gerne einen Hintergrund, der über 100% der Breite geht und nur Vertikal zentriert ist.

Aber am besten seht ihr euch das selber mal an:
http://www.4cg.de/apd/adcando/website.html

Meine Probleme:
Opera:
- minimaler Horizontaler Scrollbalken
- beim scrollen scrollt die komplette seite ein stück nach oben und unten

Firefox 2:
- minimaler Horizontaler Scrollbalken
- Footer landet irgendwie über dem Content

Internet Explorer:
- footer schließt nicht bündig ab
- eigentliche Seite ist nicht zentriert

meine CSS sieht so aus:
Code:
body {
  background-color: #1E2F4F;
  font-size: 12px;
  font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
  color:#564b47; 
  padding:0px;
  margin:0px;
}
#rahmen {
   position:absolute;
   height:550px;
   width:100%;
   top: 50%;
   text-align: left;
   padding: 0px;
   border: 1px solid #38609B;
   margin-top: -275px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   background-image: url(../bilder/bg.gif);
}

#inhalt {
   text-align: left;
   vertical-align: middle;
   width: 940px;
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
   padding: 0px;
}

#header {
   text-align: left;
   vertical-align: middle;
   width: 940px;
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
   padding: 0px;
   background-image: url(../bilder/head.gif);
   height: 75px;
}

#navi {
   text-align: left;
   vertical-align: middle;
   width: 940px;
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
   padding: 0px;
   height: 35px;
   background-image: url(../bilder/navi_bg.gif);
}

#subnavi {
   text-align: left;
   vertical-align: middle;
   width: 940px;
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
   padding: 0px;
   height: 15px;
}

#content_left {
   text-align: left;
   vertical-align: middle;
   width: 335px;
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
   padding: 0px;
   height: 395px;
   float: left;
}

#content_right {
   text-align: left;
   vertical-align: middle;
   width: 605px;
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
   padding: 0px;
   height: 395px;
   float: left;
   overflow: auto;
}

#footer {
   text-align: center;
   vertical-align: middle;
   width: 940px;
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
   padding: 0px;
   height: 30px;
   background-image: url(../bilder/footer.gif);
   color: #FFFFFF;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 9px;
}


p, h1 {
margin: 0px;
padding: 10px;
}
h1 {
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #564b47;
background-color: #90897a;
}

a {
color: #ff66cc;
font-size: 11px;
background-color:transparent;
text-decoration: none;
}



ich wollte schon fast aufgeben und es doch wieder mit Tabellen machen aber vielleicht könnt ihr mir ja weiterhelfen.
THX
  View user's profile Private Nachricht senden
schattenjaeger

Dabei seit: 03.11.2005
Ort: Kiel
Alter: 34
Geschlecht: Männlich
Verfasst So 11.02.2007 14:33
Titel

Antworten mit Zitat Zum Seitenanfang

schau mal in den Quellcode meiner Page
  View user's profile Private Nachricht senden
Anzeige
Anzeige
scavenger
Threadersteller

Dabei seit: 20.11.2002
Ort: -
Alter: 41
Geschlecht: Männlich
Verfasst So 11.02.2007 14:40
Titel

Antworten mit Zitat Zum Seitenanfang

werd ich mal machen. Ich hab nach ewigen rumprobieren auch wieder mal was erreicht.

Der einzige Browser, der noch zicken macht ist (wie solls anders sein) der IE:

http://www.4cg.de/apd/adcando/website.html (aktualisiert)

der Footer ist immer noch nicht bündig - aber ich komm nicht drauf warum *Schnief*
  View user's profile Private Nachricht senden
 
Ähnliche Themen Tabellenloses Layout - Die ersten Schritte...
[CSS] Zentrieren vertikal und horizontal
container horizontal und vertikal ausrichten.
DIV vertikal 100% je Auflösung und horizontal in Relation
Javascript Code von vertikal auf horizontal
Dreamweaver - Horizontal und vertikal ausrichten
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.