Webseite in DIV-Container

Mano · 22.07.2007, 18:15

Hallo,
ich habe meine Layoutseite in die gesamten Includes für Menü, Header und Content sind von Tabellenstruktur in Container umgewandelt.

Leider gibt es hierbei einige Probleme. Ich nutze ein Dreispaltiges Layout wie auf folgender Seite:
http://de.selfhtml.org/css/layouts/anzeige/3spaltig.htm

Nun möchte ich in eine Spalte einen Background einbinden, der sich so oft wiederholt wie der größte Spaltencontainer. Außerdem funktioniert im Firefox die Eigenschaft text-align: center nicht. Hat jemand hierzu Ideen?

nikosch · 22.07.2007, 18:24

Deine Ausführungen sind etwas vage. Auch ein Verweis auf Deinen Versuch wäre hilfreich.

Zitat:

Zitat von Mano

der sich so oft wiederholt wie der größte Spaltencontainer

> Unverständlich

Zitat:

Zitat von Mano

Außerdem funktioniert im Firefox die Eigenschaft text-align: center nicht.

> Doch schon. Kommt nur drauf an, was man tun möchte.

Vielleicht hilft Dir das weiter:
http://www.thestyleworks.de/tut-art/layout_div.shtml
Schau Dir auch das Bsp. mit den floats an.

Mano · 22.07.2007, 18:55

Ich kann euch leider die Seite nicht zeigen, da es sich um einen Internen Bereich handelt auf dem vertrauliche Daten hinterlegt sind. Aus dem Grund anbei der Quelltext und ein Bild.

http://img525.imageshack.us/my.php?i...youtdivrz5.gif

Code:

<center>
<div style="width:790px;">

<div id="site_header"></div>

<div id="site_content">

  <div id="site_content_left" align="center">###MENUE###</div>
  <div id="site_content_right" align="center">##CONTENT###</div>
  <div id="site_content_middle"></div>
  <br style="clear:both; line-height: 0px;">  

</div>

<div id="site_footer">&copy; Copyright 2004 - <?php echo date("Y"); ?></div>

</div>
</center>

Code:

#site_header {
  margin-top:12px;
  margin-bottom:6px;
  background-color: #FFFFFF;
  text-align: right;
}

#site_image {
  background-color: #FFFFFF;
}

#site_content {
  height: auto;
  background-color: #FFFFFF;
  text-align: center;
  margin:0px auto;
  padding:0px auto;
}

#site_content_left {
  text-align: center;
  margin:0px auto;
  padding:0px auto;
  width:165px;
  float:left;
  background-color: #FFFFFF;
  border:1px solid #000000;
}

#site_content_middle {
  width:25px;
  position:relative;
  margin:0px auto; 
  float:left;
  background-image: url(images/bg_trenner.gif);
  background-repeat: repeat-y; 
  background-position: 100%; 
}

#site_content_right {
  text-align: center;
  width:600px;
  float:right;
  background-color: #FFFFFF;
  border:1px solid #000000;
}

#site_footer {
  margin-top:10px;
  margin-bottom:12px;
  background-color: #FFFFFF;
}

PsychoEagle · 23.07.2007, 11:43

Also zu deinem Zentrierproblem:

Horizontales Zentrieren

Aber anscheinend liegt es bei dir daran, dass du das "falsche" zentrieren willst. Du hast ganz am Anfang ein Div mit 790px.

Eventuell versteh ich dich auch falsch, aber hier mit dem funktioniert es (zumindestens falls ich dich richtig verstanden habe

)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Test</title>
    <style type="text/css">
    	#site_width {
    	  width:                790px;
    	  margin:               auto;
    	  padding:              10px;
    	  border:               1px solid #000000;
    	}
      #site_header {
        margin:               12px 0px 6px 0px;
        text-align:           right;
        background-color:     #FFFFFF;
        border:               1px solid #000000;
      }
      
      #site_content {
        margin:               0px auto;
        padding:              0px auto;
        height:               auto;
        text-align:           center;
        background-color:     #FFFFFF;
        border:               1px solid #000000;
      }
      
      #site_content_left {
        float:                left;
        margin:               0px 10px;
        width:                165px;
        text-align:           center;
        background-color:     #FFFFFF;
        border:               1px solid #000000;
      }
      
      #site_content_middle {
        float:                left;
        width:                25px;
        background-image:     url(images/bg_trenner.gif);
        background-repeat:    repeat-y;
        background-position:  100%;
        border:               1px solid #000000;
      }
      
      #site_content_right {
        float:                right;
        margin:               0px 10px;
        width:                550px;
        text-align:           center;
        background-color:     #FFFFFF;
        border:               1px solid #000000;
      }
      
      #site_footer {
        margin:               10px 0px 12px 0px;
        text-align:           center;
        background-color:     #FFFFFF;
        border:               1px solid #000000;
      }
    </style>
  </head>
  <body>
    <div id="site_width">
      <div id="site_header"></div>
      <div id="site_content">
        <div id="site_content_left" align="center">###MENUE###</div>
        <div id="site_content_middle"></div>
        <div id="site_content_right" align="center">##CONTENT###</div>
        <div style="clear:both;"></div>
      </div>
      <div id="site_footer">&copy; Copyright 2004 - <?php echo date("Y"); ?></div>
    </div>
  </body>
</html>

Ansonsten bitte genaue Problemschilderung

text-align:center funzt bei mir auch.

Grüße
Da Psy

Mano · 26.07.2007, 11:36

gut das werde ich mal ausprobieren ...

Allerdings behebe ich dadurch das geschilderte Problem mit dem content_middle nicht. Dort wird die Grafik unter dem Menü angezeigt und auch nicht in voller Höhe zwischen left und right!

nikosch · 26.07.2007, 15:22

Zitat:

Zitat von Mano

Allerdings behebe ich dadurch das geschilderte Problem mit dem content_middle nicht. Dort wird die Grafik unter dem Menü angezeigt und auch nicht in voller Höhe zwischen left und right!

Dann schreib halt mal, was genau das werden soll. Dein Bildposting hat nämlich 0 Aussagekraft.

PsychoEagle · 27.07.2007, 09:03

Jup, ein wenig genauere Infos dazu was du machen willst, bräuchten wir schon, damit wir weiterhelfen können. Also wenn du Hilfe willst, versuch mal das Problem genau zu beschreiben, nehm dir paar Minuten dafür Zeit und dann sieht das ganze sicherlich besser aus

Für mich ist das ganze nicht ganz transparent :P

Gruß
Da Psy

Mano · 17.08.2007, 11:54

Dort findet man einen kleinen Screenshot von dem Layout:
http://img248.imageshack.us/img248/7079/falschet1.gif

Und so sollte es aussehen:
http://img518.imageshack.us/img518/7214/richtigsq4.gif

Bei dem korrekten passt sich der graue Streifen der Größe von CONTENT oder MENU an.

Anbei das aktuelle Stylesheet:

Code:

#site_header {
  margin-top:12px;
  margin-bottom:6px;
  background-color: #FFFFFF;
  text-align: right;
}

#site_image {
  background-color: #FFFFFF;
}

#site_content {
  height: auto;
  background-color: #FFFFFF;
  text-align: center;
  margin:0px auto;
  padding:0px auto;
}

#site_content_left {
  text-align: center;
  margin:0px auto;
  padding:0px auto;
  width:165px;
  float:left;
  background-color: #FFFFFF;
  border:1px solid #000000;
}

#site_content_middle {
  width:25px;
  margin:0px auto;
  padding:0px auto;
  
   
  float:left;
  background-image: url(images/bg_trenner.gif);
  background-repeat: repeat-y; 
  background-position: 100%; 
}

#site_content_right {
  text-align: center;
  margin:0px auto 0px auto;
  padding:0px auto 0px auto;


  width:600px;
  float:right;
  background-color: #FFFFFF;
  border:1px solid #000000;
}

#site_footer {
  margin-top:10px;
  margin-bottom:12px;
  background-color: #FFFFFF;
}

Mano · 24.08.2007, 10:34

Wenn ich im #site_content die Höhe auf 100% setze, funktioniert es im IE einfach alles wunderbar. Allerdings kommt der Firefox da absolut nicht mit klar.

Zum einen verlängert er nun die gesamte Webseite übermäßig, da er dem #site_content die 100% höhe des Browserfenster gibt. Mit dem Header und Footer DIV muss der Benutzer dadurch natürlich das scrollen anfangen.

Der Firefox sollte sich hierbei nicht nach der Höhe des Browserfensters halten, da die Webseite je nach Textinhalt vergrößert werden sollte. Die Browserfenstergrößen sind hierbei irrelavant.

In mehreren Foren habe ich schon gelesen, das der Firefox mit den Höhen wohl nicht so klar kommt, allerdings habe ich bisher keine Lösung finden können. Habt ihr vielleicht eine Idee?

PsychoEagle · 24.08.2007, 12:25

Ich würd mich mit dem Problem nicht so lange aufhalten und ein wenig tricksen

Mach eine Div-Box um die Content-Box und die Box in der Mitte mit grauem Hintergrund und dann geb der Content Box eine weiße Hintergrundfarbe.

Hab grad nicht so viel Zeit zum genauer schauen und wie man es lösen kann (is doch schon eine Weile her

)

Grüße
Da Psy

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[CSS] Container in Container	Igäl	HTML, Usability und Barrierefreiheit	5	04.09.2007 11:29
Komplette Webseite bleibt "stehen"	crazyhead	PHP-Fortgeschrittene	4	01.09.2007 17:58
CSS - Bild im div container überlappt andere container	Buschdieb	HTML, Usability und Barrierefreiheit	13	19.07.2007 23:17
IE6: Container mit Float dabei wird margin doppelt gewertet	DonTermi	HTML, Usability und Barrierefreiheit	1	11.01.2007 09:02
Problem mit Container	max-dhom	HTML, Usability und Barrierefreiheit	3	20.09.2006 11:10
Webseite auslesen	Katrin	PHP Tipps 2006	6	21.04.2006 20:43
CSS: Verschachtelter Container und Text danach		HTML, Usability und Barrierefreiheit	2	01.12.2005 10:00
rss/xml Feeds auf Webseite einbinden		PHP Tipps 2005-2	2	29.10.2005 13:44
[Erledigt] Frage zu Webseite		PHP Tipps 2005-2	1	26.10.2005 21:18
Problem: Text von einer Webseite mit PHP kopieren		PHP Tipps 2005-2	6	05.09.2005 19:20
[Erledigt] Container im Firefox falsch dargestellt		HTML, Usability und Barrierefreiheit	27	15.08.2005 23:18
Mehrsprachige Webseite		PHP Tipps 2005-2	4	08.07.2005 08:19
&lt;div&gt;- container vertikal auf seite zentrieren		HTML, Usability und Barrierefreiheit	3	08.05.2005 11:16
container mit tabelle rechts aufklappen		HTML, Usability und Barrierefreiheit	10	01.04.2005 12:25
[Erledigt] Automatisches neu laden der ganzen Webseite		HTML, Usability und Barrierefreiheit	7	26.01.2005 08:38

22.07.2007, 18:15
Mano Erfahrener Benutzer Registriert seit: 06.08.2003 Beiträge: 453 PHP-Kenntnisse: Fortgeschritten	Webseite in DIV-Container Hallo, ich habe meine Layoutseite in die gesamten Includes für Menü, Header und Content sind von Tabellenstruktur in Container umgewandelt. Leider gibt es hierbei einige Probleme. Ich nutze ein Dreispaltiges Layout wie auf folgender Seite: http://de.selfhtml.org/css/layouts/anzeige/3spaltig.htm Nun möchte ich in eine Spalte einen Background einbinden, der sich so oft wiederholt wie der größte Spaltencontainer. Außerdem funktioniert im Firefox die Eigenschaft text-align: center nicht. Hat jemand hierzu Ideen?


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

26.07.2007, 11:36
Mano Erfahrener Benutzer Registriert seit: 06.08.2003 Beiträge: 453 PHP-Kenntnisse: Fortgeschritten	gut das werde ich mal ausprobieren ... Allerdings behebe ich dadurch das geschilderte Problem mit dem content_middle nicht. Dort wird die Grafik unter dem Menü angezeigt und auch nicht in voller Höhe zwischen left und right!

27.07.2007, 09:03
PsychoEagle there's only one psycho Registriert seit: 21.08.2007 Beiträge: 1.283 PHP-Kenntnisse: Anfänger	Jup, ein wenig genauere Infos dazu was du machen willst, bräuchten wir schon, damit wir weiterhelfen können. Also wenn du Hilfe willst, versuch mal das Problem genau zu beschreiben, nehm dir paar Minuten dafür Zeit und dann sieht das ganze sicherlich besser aus Für mich ist das ganze nicht ganz transparent :P Gruß Da Psy __________________ "Weaseling out of things is important to learn. It's what separates us from the animals ... except the weasel." (Homer J. Simpson)

24.08.2007, 10:34
Mano Erfahrener Benutzer Registriert seit: 06.08.2003 Beiträge: 453 PHP-Kenntnisse: Fortgeschritten	Wenn ich im #site_content die Höhe auf 100% setze, funktioniert es im IE einfach alles wunderbar. Allerdings kommt der Firefox da absolut nicht mit klar. Zum einen verlängert er nun die gesamte Webseite übermäßig, da er dem #site_content die 100% höhe des Browserfenster gibt. Mit dem Header und Footer DIV muss der Benutzer dadurch natürlich das scrollen anfangen. Der Firefox sollte sich hierbei nicht nach der Höhe des Browserfensters halten, da die Webseite je nach Textinhalt vergrößert werden sollte. Die Browserfenstergrößen sind hierbei irrelavant. In mehreren Foren habe ich schon gelesen, das der Firefox mit den Höhen wohl nicht so klar kommt, allerdings habe ich bisher keine Lösung finden können. Habt ihr vielleicht eine Idee? __________________ www.webdeveloperfactory.de - Der Blog und Ratgeber für Webentwickler mit zahlreichen Informationen

24.08.2007, 12:25
PsychoEagle there's only one psycho Registriert seit: 21.08.2007 Beiträge: 1.283 PHP-Kenntnisse: Anfänger	Ich würd mich mit dem Problem nicht so lange aufhalten und ein wenig tricksen Mach eine Div-Box um die Content-Box und die Box in der Mitte mit grauem Hintergrund und dann geb der Content Box eine weiße Hintergrundfarbe. Hab grad nicht so viel Zeit zum genauer schauen und wie man es lösen kann (is doch schon eine Weile her ) Grüße Da Psy __________________ "Weaseling out of things is important to learn. It's what separates us from the animals ... except the weasel." (Homer J. Simpson)