✔ div left 100% / div center fixed width / div right 100%

W

wethe

Mitglied
Kann mir jemand bitte erklären wie ich es anstelle einen div mit fixierter Breite innerhalb eines weiteren divs zentriert zu bekommen und links und rechts dieses Containers dann zwei weitere div container zu errichten die sich dann automatisch auf die restliche Breite ausbreiten? Mein Problem ist dass sich der Hintergrund einmal von links aus und einmal von rechts aus kacheln muss, damit die Anschlüsse passen. Und egal soviel ich auch mit Float rumspiele, sobald er auf 100% gestellt ist rutscht der div immer über oder unter den Container mit der fixierten Breite. Ich verstehs nicht :(

Wäre über Hilfe glücklich. Suche schon seit ner Stunde im Internet und finde nichts was mir hilft. Wundert mich dass diese Frage noch nie gestellt wurde, da man doch sicherlich öfters links und rechts gerne unterschiedliche Hintergründe haben würde?

Besten Dank
Jacob
 
Moin,

grundsätzlich ist es nicht möglich, drei Blöcke nebeneinander auszurichten, sich also mittels der float-Eigenschaft umfliessen zu lassen, von denen der mittlere eine feste Breite besitzt, und die beiden äußeren das relative Restmaß zum linken und rechten Rand des Viewports ausfüllen.

Daher hast du hierzu auch keine Lösungsansätze finden können, wenngleich du nicht der erste bist, der hier dieses Vorhaben vorstellt.

Das relative Restmaß zur linken und rechten Seite beträgt auch keine 100%, sondern 100% abzüglich der absoluten Breite, dividiert durch zwei, weshalb die Blöcke bei dir in die nächste Zeile umbrechen.

Anhand dieser Berechnung siehst du auch schon, wo hier das Problem liegt: die Maßeinheit "px" lässt sich nicht von "%" subtrahieren - wie auch Äpfel nicht von Birnen.

mfg Maik
 
Hi,

vor genau diesem Problem bin ich auch vor drei Tagen gestanden. Mein einziger Vorteil war, daß ich nicht kacheln mußte, da die Blöcke links und rechts nur unterschiedliche Farben aufwiesen. Ich habe dann diese beiden Blöcke mit je 50% nebeneinander gelegt und dann den mittleren darüber. Das funktioniert einwandfrei. In deinem Fall geht das dann, wenn du den Hintergrund des mittleren Blocks transparent machen kannst.
 
Sprint hat gesagt.:
Ich habe dann diese beiden Blöcke mit je 50% nebeneinander gelegt und dann den mittleren darüber. Das funktioniert einwandfrei. In deinem Fall geht das dann, wenn du den Hintergrund des mittleren Blocks transparent machen kannst.
Zum Vergrößern anklicken....
Ich vermute, dass diese Umsetzung ihm nicht weiterhelfen wird, da sich wohl die äußeren Hintergrundbilder unmittelbar dem mittleren Block anschließen sollen, also von ihm aus beginnend zum linken und rechten Fensterrand wiederholt werden sollen, und nicht, wie in deinem Vorschlag, von den Fensterrändern zur Fenstermitte hin.

Genau dieses Layout-Konzept wurde hier vor zwei, drei Jahren schonmal von einem Benutzer vorgestellt, in dem die grafischen Übergänge (Stoßfugen) der drei Blöcke nahtlos zueinander passen mußten, was mit deiner genutzten Technik halt nicht möglich ist.

Diesen Lösungsansatz hatte ich damals zunächst auch vorgeschlagen, weil der Benutzer zu Themenbeginn die konkrete (grafische) Umsetzung nicht erwähnt / vorgestellt hatte, sondern erst im weiteren Verlauf des Themas damit rausrückte.

mfg Maik
 
Darum ja auch meine Einschränkung mit dem transparenten mittleren (fixen) Block. Vielleicht läßt sich da der "mittlere" Hintergrund in der Mitte trennen und in die beiden variablen Blöcke einfügen. Dann sollte ein überlagerter, zentrierter Block, der einen transparenten Hintergrund besitzt, gut dazu passen. Vielleicht wäre auch mal ein Beispielbild hilfreich.
Sollte das aber nicht möglich sein, ist das definitiv richtig, daß es so nicht funktioniert.
 
Zuletzt bearbeitet:
Sprint hat gesagt.:
Darum ja auch meine Einschränkung mit dem transparenten mittleren (fixen) Block. Wenn ich das richtig verstehe, sollten die beiden variablen Blöcke, von innen nach außen gekachelt, eine sauber zusammenhängende Fläche ergeben. Dann sollte ein überlagerter, zentrierter Block, der einen transparenten Hintergrund besitzt, gut dazu passen.
Zum Vergrößern anklicken....
Und ich versteh es so, dass sie nicht in der Fenstermitte (= 50%) zusammenstoßen, sondern unmittelbar mit dem linken und rechten Rand des mittleren Blocks anschliessen sollen.

wethe hat gesagt.:
Mein Problem ist dass sich der Hintergrund einmal von links aus und einmal von rechts aus kacheln muss, damit die Anschlüsse passen.
Zum Vergrößern anklicken....

Aber wie du schon sagst, eine Skizze des Layouts wird die Frage beantworten, wie es nun konkret umgesetzt werden soll.

mfg Maik
 
Danke erstmal für diese umfangreiche Diskussion die da schon zu Stande kam!

Ich bin ein wenig erschrocken und erstaunt, dass sowas wie es scheint tatsächlich nicht so einfach umzusetzen scheint, denn wenn man grafisch an das Gestalten einer Website geht ist sowas einer der sofortigen Punkte die mir einfallen würden, dass man sie benötigt.
Meine Website besitzt ganz oben einen Meeresspiegel, mit Horizont und Wellen. Nun habe ich einen Mittelteil bei dem Inseln und Sonne im Hintergrund sind. Und habe mir einen kachelbaren Anschluss dafür gemacht. Und zwar einen relativ breiten, so dass die direkte Kachelung des Bildes unwichtig ist, jedoch wenn ich es rechts und links neben meinen Mittelteil setze, die Wellen nahtlos sich ausbreiten.
Von daher ist es schon wichtig dass die exakten Pixelwerte aufeinandre treffen, da sonst schnell eine Naht zu erkennen sein wird.

Ein Freund hat mir geraten anstelle von divs einfach einen table zu nehmen, davon die mittlere Zelle auf den festen Wert zu setzen und gut ist.
Dreamweaver zeigt mir dann auch alles richt an, jedoch sieht das im Firefox dann wieder ganz anders aus. Wie gesagt. Ich bin erstaunt, dass das nicht geht... :confused:
 
Also drei Blöcke nebeneinander, und nicht zwei plus einem zentrierten Block darüber ;-)

wethe hat gesagt.:
Ein Freund hat mir geraten anstelle von divs einfach einen table zu nehmen, davon die mittlere Zelle auf den festen Wert zu setzen und gut ist.
Dreamweaver zeigt mir dann auch alles richt an, jedoch sieht das im Firefox dann wieder ganz anders aus. Wie gesagt. Ich bin erstaunt, dass das nicht geht... :confused:
Zum Vergrößern anklicken....
Kannst du das online stellen?

mfg Maik
 
Leider gerade nicht möglich, da ich in der Uni über ein Jumpgate surfe. Allerdings soll im Verlaufe des Tages ein Proxy für den FTP eingerichtet werden und dann lade ich was hoch, samt link.

Hier allerdings mal Quellcodes:
nicht wundern, alles ein wenig durcheinander, da ich eine alte Datei aufgemacht habe und diese gerade langsam verändere und umbaue.

index.php
Code: 
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
   xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
   <head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/lobo_startseite/css/css.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">.style1 {
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}
</style>



<link href="css/css.css" rel="stylesheet" type="text/css" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css">
<!--
body,td,th {
	color: #ffffff;
}
body {
	background-color: #001e2d;
}
-->
</style></head>
<body>
<table width="100%" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="right" width="*" valign="top" id="table_left" style="margin:auto"></td>
    <td width="1000px" align="center" style="margin:auto"><div id="wholepage" style="margin:auto">
      <div id="border_left"></div>
      <div id="middle">
        <div id="toppart">
          <div id="header01"></div>
          <div id="header02"></div>
        </div>
        <div id="midpart">
          <div id="menupart">
            <div id="logo"></div>
            <div id="menu"></div>
          </div>
          <div id="contentpart">
            <div id="heading"></div>
            <div id="content"></div>
          </div>
        </div>
      </div>
      <div id="border_right"></div>
    </div></td>
    <td id="table_right" width="*">&nbsp;</td>
  </tr>
</table>
</body>

hier css
Code: 
#wholepage {
	width				: 100%;
	text-align			: center;
	align				: center;
}

#table_left {
  background            : url(../images/bg_tile.jpg);
  background-repeat		: repeat-x;
  overflow				: auto;
  align					: right;
  background-position	: top right;
}

#all_mid {
  width                 : 1000px;
  float					: left;
}

#table_right {
  background            : url(../images/bg_tile.jpg);
  background-repeat		: repeat-x;

}

#border_left {
  width                 : 71px;
  height                : 578px;
  margin                : 0px 0px 0px 0px;
  float					: left;
  overflow				: hidden;
  background            : url(../images/border_l.jpg);
  background-repeat		: no-repeat;
}

#middle {
  width                 : 851px;
  height                : 578px;
  float					: left;
}

#toppart {
  width                 : 851px;
  height                : 126px;
  overflow				: hidden;
}

#header01 {
  width                 : 196px;
  height                : 126px;
  float					: left;
  margin                : 0px 0px 0px 0px;
  overflow				: hidden;
  background            : url(../images/header01.jpg);
  background-color		: #001e2d;
}

#header02 {
  width                 : 655px;
  height                : 126px;
  float					: left;
  margin                : 0px 0px 0px 0px;
  overflow				: hidden;
  background            : url(../images/header02.jpg);
  background-color		: #001e2d;
}

#midpart {
  width                 : 851px;
  height                : 452px;
  float					: left;
}

#menupart {
  width                 : 196px;
  height                : 452px;
  float					: left;
}

#logo {
  width                 : 196px;
  height                : 51px;
  overflow				: hidden;
  background            : url(../images/logo.jpg);
  background-color		: #001e2d;
}

#menu {
  width                 : 196px;
  height                : 401px;
  overflow				: hidden;
  background            : url(../images/menu.jpg);
  background-color		: #001e2d;
}

#contentpart {
  width                 : 655px;
  height                : 452px;
  overflow				: hidden;
}

#heading {
  width                 : 655px;
  height                : 30px;
  overflow				: hidden;
  background            : url(../images/heading.jpg)
}

#content {
  width                 : 655px;
  height                : 422px;
  text-align			: left;
  overflow				: auto;
  background            : url(../images/content.jpg);
}

#border_right {
  width                 : 78px;
  height				: 578px;
  float					: left;
  overflow				: hidden;
  text-align			: left;
  background            : url(../images/border_r.jpg);
}
 
Hast du die Möglichkeit, die dazugehörigen Grafikdateien in ein ZIP-Archiv zu packen, um es hier hochzuladen?

Man(n)/Frau sieht mit dem Code alleine nix - d'rum auch meine Frage nach der Online-Version ;-)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück