mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 09.12.2016 20:42 Benutzername: Passwort: Auto-Login

Thema: [CSS] Seite horizontal zentrieren vom 07.12.2005


Neues Thema eröffnen   Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] Seite horizontal zentrieren
Seite: 1, 2, 3  Weiter
Autor Nachricht
elPadre
Threadersteller

Dabei seit: 07.12.2005
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 07.12.2005 17:39
Titel

[CSS] Seite horizontal zentrieren

Antworten mit Zitat Zum Seitenanfang

Hallo Leute ich hoffe ihr könnt mir helfen:


Mein Problem liegt darin das ich meien Seite Zentriere (horizontal) möchte .

Die dachte ich wie es auch erst den anschein gemacht hat funktioniert in dem ich den body:
<body style="text-align: center"> center zuweise IE alles klar nur jetzt habe ich es im Firefox Probiert
und der mag das gleich garnicht.

1.Frage Welche möglichkeit habe ich noch meine komplette Seite in dem root div Center zu Positionieren.
2.Frage Wie nehme ich optimal die Positionierung meiner <div id="box"> vor das es nicht nur im Internet Explorer sondern auch im Firefox richtig funktioniert ?

Danke für eure Hilfe anbei der Komplette Code.

Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Berchtesgadener Land Tourismus GmbH - Berchtesgaden, Bad Reichenhall, Laufen</title>
<link rel="stylesheet" type="text/css" href="./css/struktur.css">
<link rel="stylesheet" type="text/css" href="./css/strukturstyle.css">
<script language="JavaScript" src="./javascript/meta.js"></script>
</head>
<body style="text-align: center">
<body align="center"></body>
<div id="root">
<!----------kopf---------->
<div id="top01"></div>
<!----------kopf---------->
<!----------navi---------->

    <div id="navia1"><a href="" class="metaa" onMouseOver="javascript:Roll('ma01',1)" onMouseOut="javascript:Roll('ma01',0)"><img id="ma01" name="ma01" src="./style/bu_angebote_do.gif" onload="Rollover(this,'bu_angebote_up.gif')" border="0" alt="Wir über uns" title="Wir über uns"></a></div>
    <div id="navia2"><a href="" class="metaa" onMouseOver="javascript:Roll('ma02',1)" onMouseOut="javascript:Roll('ma02',0)"><img id="ma02" name="ma02" src="./style/bu_natur_do.gif" onload="Rollover(this,'bu_natur_up.gif')" border="0" alt="Die Kritierien" title="Die Kritierien"></a></div>
    <div id="navia3"><a href="" class="metaa" onMouseOver="javascript:Roll('ma03',1)" onMouseOut="javascript:Roll('ma03',0)"><img id="ma03" name="ma03" src="./style/bu_sport_do.gif" onload="Rollover(this,'bu_sport_up.gif')" border="0" alt="Die Vermieterakademie" title="Die Vermieterakademie"></a></div>
    <div id="navia4"><a href="" class="metaa" onMouseOver="javascript:Roll('ma04',1)" onMouseOut="javascript:Roll('ma04',0)"><img id="ma04" name="ma04" src="./style/bu_gesundheit_do.gif" onload="Rollover(this,'bu_gesundheit_up.gif')" border="0" alt="Gastgeber werden" title="Gastgeber werden"></a></div>
    <div id="navia5"><a href="" class="metaa" onMouseOver="javascript:Roll('ma05',1)" onMouseOut="javascript:Roll('ma05',0)"><img id="ma05" name="ma05" src="./style/bu_kultur_do.gif" onload="Rollover(this,'bu_kultur_up.gif')" border="0" alt="Initiatoren" title="Initiatoren"></a></div>
    <div id="navia6"><a href="" class="metaa" onMouseOver="javascript:Roll('ma06',1)" onMouseOut="javascript:Roll('ma06',0)"><img id="ma06" name="ma06" src="./style/bu_sport_do.gif" onload="Rollover(this,'bu_sport_up.gif')" border="0" alt="Partner" title="Partner"></a></div>
    <div id="navia7"><a href="" class="metaa" onMouseOver="javascript:Roll('ma07',1)" onMouseOut="javascript:Roll('ma07',0)"><img id="ma07" name="ma07" src="./style/bu_gesundheit_do.gif" onload="Rollover(this,'bu_gesundheit_up.gif')" border="0" alt="Kontakt" title="Kontakt"></a></div>
    <div id="navia8"><a href="" class="metaa" onMouseOver="javascript:Roll('ma08',1)" onMouseOut="javascript:Roll('ma08',0)"><img id="ma08" name="ma08" src="./style/bu_kultur_do.gif" onload="Rollover(this,'bu_kultur_up.gif')" border="0" alt="Impressum" title="Impressum"></a></div>

<!----------navi---------->

<!----------image bereich---------->
<div id="image"></div>
<!----------image bereich---------->

<!----------mittlerer bereich---------->
<div id="content">
 <div id="box"><br><br><br>sdfgdsfg</div>
</div>
<!----------mittlerer bereich---------->

<!----------fussbereich---------->
<div id="footer1">footer1</div>
<div id="footer2">footer2</div>
<!----------fussbereich---------->
</div>
</body>
</html>


Code:
/*
###############################################
### Seitenstruktur Website ALPINE GASTGEBER ###
###############################################
*/

/*----------KOPFBEREICH----------*/
#root{
   width:780px;
    height:208px;
    background:#FF7F00;
}
    #top01  {background:#CC3300; clear: both; width:780px; height:23px;}
   #navia1 {background:#000000; float: left; width:70px; height:20px;}
    #navia2 {background:#000033; float: left; width:70px; height:30px;}
    #navia3 {background:#000066; float: left; width:70px; height:30px;}
    #navia4 {background:#000099; float: left; width:70px; height:30px;}
    #navia5 {background:#0000CC; float: left; width:70px; height:30px;}
    #navia6 {background:#0000FF; float: left; width:70px; height:30px;}
   #navia7 {background:#330000; float: left; width:70px; height:30px;}
   #navia8 {background:#330033; float: left; width:70px; height:30px;}
    #image  {background:#00CC00; clear: both; width:780px; height:135px;}




/*----------MITTLERER BEREICH----------*/
#content     {background:#FFFF66; float: left; width:780px; height:300px;  z-index:1;}
#box        {background-color:#FF6600; position:relative; top:-30px; left:280px; height:200px; width:190px;  z-index:2;}

/*----------FUSSBEREICH----------*/
#footer1  {background:#CC3399; clear: both; width:780px; height:60px;}
#footer2  {background:#CC0000; clear: both; width:780px; height:25px;}


Zuletzt bearbeitet von shakadi am Mi 21.12.2005 20:57, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
gtz

Dabei seit: 15.04.2002
Ort: -
Alter: 41
Geschlecht: Männlich
Verfasst Mi 07.12.2005 17:47
Titel

Antworten mit Zitat Zum Seitenanfang

Code:

body{
   text-align: center;
}

#container{
   position: relative;
   margin-left: auto;
   margin-right: auto;
}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
helo

Dabei seit: 06.12.2005
Ort: innerorts
Alter: -
Geschlecht: Männlich
Verfasst Mi 07.12.2005 18:19
Titel

Antworten mit Zitat Zum Seitenanfang

#div {
position: absolute;
width: 770px;
left: 50px;
margin-left: -385px;
}
  View user's profile Private Nachricht senden
chrikle

Dabei seit: 02.05.2002
Ort: NRW
Alter: 40
Geschlecht: Männlich
Verfasst Mi 07.12.2005 18:26
Titel

Antworten mit Zitat Zum Seitenanfang

helo hat geschrieben:
#div {
position: absolute;
width: 770px;
left: 50px;
margin-left: -385px;
}


Minus-Werte sind aber häßlich, wenn das Browserfenster
kleiner als die Fläche ist.

Nur mal so Lächel

Gruß
Chris
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
helo

Dabei seit: 06.12.2005
Ort: innerorts
Alter: -
Geschlecht: Männlich
Verfasst Mi 07.12.2005 20:28
Titel

Antworten mit Zitat Zum Seitenanfang

@chrikle

wie klein soll das fenster denn noch sein?

bei 770 passts doch allemal.

oder was meinst du?
  View user's profile Private Nachricht senden
chrikle

Dabei seit: 02.05.2002
Ort: NRW
Alter: 40
Geschlecht: Männlich
Verfasst Do 08.12.2005 06:50
Titel

Antworten mit Zitat Zum Seitenanfang

Moin!

Bastelst du die Seite nur für Dich?

Oder für das breit gefächerte Publikum?

Es gibt tatsächlich noch welche mit 15'-Monitoren
(hab ich vor kurzem noch selbst erlebt).

Und dann auch noch welche, die das Browserfenster
nur halb so groß öffnen, wie es der Bildschirm eigentlich zuläßt.

Und wenn du dann Minus-Werte anwendest, läuft dein
Inhalt links und rechts aus dem Browser-Fenster.

Ich würd dir gtz Methode empfehlen. Da stößt
der Inhalt dann einfach am Fenster, und es erscheinen
Scrollleisten.

Aber das nur mal so als Tipp Lächel

Gruß
Chris
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
helo

Dabei seit: 06.12.2005
Ort: innerorts
Alter: -
Geschlecht: Männlich
Verfasst Do 08.12.2005 12:17
Titel

Antworten mit Zitat Zum Seitenanfang

Zitat:
Es gibt tatsächlich noch welche mit 15'-Monitoren
(hab ich vor kurzem noch selbst erlebt).


klar.
es gibt auch noch welche mit schrankwand eiche rustikal im wohnzimmer.
(hab ich vor kurzem noch selbst erlebt).


soll man jetzt auch noch 4.78 berücksichtigen? Lächel

die masse hat sich in den letzten 5 jahren einen rechner&monitor zugelegt.
so schlecht sind deren voraussetzungen nicht mehr. und die masse hat auch nicht 4 fenster gleichzeitig auf
und 8x600 wohl längst nicht mehr

und meint man, man müsse sich eine seite im minifenster, viell. auf 640x480 - toolbars, -status, - etc.
ansehen, dann selbst schuld. dann kann mans auch gleich lassen.


Wir haben übrigens auch fast 2006!
Aber das nur mal so als Tipp Lächel

gruß
helo
  View user's profile Private Nachricht senden
funkydj

Dabei seit: 27.10.2005
Ort: gummersbach
Alter: 37
Geschlecht: Männlich
Verfasst Do 08.12.2005 13:25
Titel

Antworten mit Zitat Zum Seitenanfang

Du glaubst gar nicht wieviele noch mit nem 14 Zoll Röhrenmonitor im Internet surfen! Das sollte man nicht unterschätzen!
Im Zweifelsfalle kann man ja mit Javascript die Auflösung abfragen und die optimal angepasste Seite aufrufen!

Von der Auflösung muss man zusätzlich auch noch Menü- und Scrollleisten abziehen, also ist der Sichtbare Bereich für Webseiten schonmal viel kleiner als die Auflösung.
  View user's profile Private Nachricht senden
 
Ähnliche Themen [CSS] Textnavigation horizontal zentrieren
[CSS] Zentrieren vertikal und horizontal
[CSS] Fixen Container horizontal und vertical zentrieren
[CSS] feste Spalten - Seite soll horizontal scrollen
Seite zentrieren
css display bei horizontal
Neues Thema eröffnen   Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Seite: 1, 2, 3  Weiter
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.