3 Spalten | Aussen: variable Breite; Mitte: feste Breite

dreamshocker · #1 (**permalink**) 17.08.2005, 15:13

Hallo zusammen

Ich benutze ein dreispaltiges Layout, wobei ich möchte, dass die mittlere Spalte eine feste Breite und die beiden äußeren eine variable Breite haben.
Derzeit habe ich dies mit einer Tabelle gelöst, wobei die Tabelle eine Gesamtbreite von 100% hat und die mittlere tabledata, Spalte eine feste Größe hat. Diese Tabelle nutze ich nur für den Header, wobei ich möchte, dass der restliche Inhalt, welcher unter der Tabelle/dem Header ist, nur so breit ist wie die feste Tabellenspalte.

Das, was ich umgesetzt habe funktioniert, jedoch möchte ich die Tabelle gerne entfernen und durch DIVs ersetzen; leider bin ich bisher kläglich gescheitert

Ich würde mich sehr freuen, wenn ich von euch etwas Unterstützung bekäme

Danke!

Dazu sei noch gesagt, dass die beiden variablen Spalten "jediglich" dazu dienen, eine Grafik als Hintergrund anzuzeigen, sodass dieser durchgängig ist.

Hier der Code:

Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>appleHELP | Startseite</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
*{
  margin: 0;
  padding: 0;
  }

body{
  font: normal 11px/16px verdana, geneva, arial, helvetica, sans-serif;
  text-align: justify;
  color: #000;
  background: #fff;
  }

table{
  width: 100%;
  }

.breite{
  width: 778px;
  margin: auto;
  }

#links, #rechts{
  width: 170px;
  height: auto;
  }

#links{
  float: left;
  clear: both;
  }

#rechts{
  float: right;
  }

#content{
  width: 438px;
  height: auto;
  float: left;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td>
      

linker

      Hintergrund

      variable Breite</p>
    </td>
    <td class="breite">
      

HEADER - feste Gr&ouml;&szlig;e</p>
    </td>
    <td>
      

rechter

      Hintergrund

      variable Breite</p>
    </td>
  </tr>
</table>
<div class="breite">
  <div id="links">

links - feste Breite</p></div>
  <div id="content">

mitte / content - feste Gr&ouml;&szlig;e</p></div>
  <div id="rechts">

rechts - feste Breite</p></div>
</div>
</body>
</html>

fricca · #2 (**permalink**) 17.08.2005, 15:24

Zitat:

Zitat von dreamshocker

Dazu sei noch gesagt, dass die beiden variablen Spalten "jediglich" dazu dienen, eine Grafik als Hintergrund anzuzeigen, sodass dieser durchgängig ist.

Dann brauchst du keine 3 Spalten.
Setz ein breites Hintergrundbild mittig in body ein und lass es vertikal wiederholen.
Der Inhalt kommt dann in ein zentriertes div-Element mit der gewünschten Breite.

Grüße
fricca

dreamshocker · #3 (**permalink**) 17.08.2005, 15:25

Das Prob ist, dass es zwei verschiedene Hintergründe sind :/

whalehunter · #4 (**permalink**) 17.08.2005, 15:25

Hallo!
Schau mal eventuell so?
Ist nur ein kleiner Anreiz, aber so müsste es gehen.

Code:

body{margin:0;padding:0;}

.links{
float:left;
margin:0;
padding:0;}

.mitte {
float:left;
width:300px;
margin: auto;
padding:0;}

.rechts{
float:left;
margin:0;
padding:0;}

Gruß,
whale[/code]

fricca · #5 (**permalink**) 17.08.2005, 15:27

Zitat:

Zitat von dreamshocker

Das Prob ist, dass es zwei verschiedene Hintergründe sind :/

Zeig doch einfach mal, wie's aussehen soll.

dreamshocker · #6 (**permalink**) 17.08.2005, 15:48

Zitat:

Zitat von fricca

Zitat:

Zitat von dreamshocker

Das Prob ist, dass es zwei verschiedene Hintergründe sind :/

Zeig doch einfach mal, wie's aussehen soll.

Skizziert soll es so aussehen [click], wobei das Weiße links und rechts leer bleiben soll...

an den Walfänger: leider nein: die beiden äußeren DIVs füllen nicht bis zur mitte

//EDIT: wie gesagt, müsste eigentlich "nur" die Tabelle "umwandeln" (siehe Code oben)

whalehunter · #7 (**permalink**) 17.08.2005, 16:03

Du kannst ja auch mal die mittlere Zelle über die beiden anderen legen. Die breiten, der Seitenfelder kannst du dann mit je 50% skalieren.

dreamshocker · #8 (**permalink**) 17.08.2005, 16:07

Selbiges habe ich just-at-the-moment fertig gestellt, will aber nicht funzen?!

html:

Code:

  <div id="headlinks"></div>
  <div id="headrechts"></div>
  <div id="headmitte">[img]includes/img/head.png[/img]</div>

css:

Code:

#headlinks, #headrechts, #headmitte{
  position: absolute;
  top: 0px;
  }

#headlinks{
  height: 248px;
  background-image: url('../img/headbglinks.png');
  float: left;
  width: 50%;
  z-index: 1;
  }

#headmitte{
  width: 778px;
  height: 248px;
  margin: auto;
  z-index: 3;
  }

#headrechts{
  height: 248px;
  background-image: url('../img/headbgrechts.png');
  float:right;
  width: 50%;
  z-index: 2;
  }

Aber wieseo?!

dreamshocker · #9 (**permalink**) 17.08.2005, 16:21

Ich habe es nun

Code:

#headlinks, #headrechts{
  position: absolute;
  top: 0;
  width: 50%;
  height: 248px;
  }

#headlinks{
  background-image: url('../img/headbglinks.png');
  left: 0;
  z-index: 1;
  }

#headmitte{
  position: relative;
  top: 0px;
  width: 778px;
  margin: auto;
  z-index: 3;
  }

#headrechts{
  background-image: url('../img/headbgrechts.png');
  right: 0;
  z-index: 2;
  }

whalehunter · #10 (**permalink**) 17.08.2005, 16:23

Schau so ungefähr meinte ich das mit dem drüberlegen:
.mitte{
margin-left: 33%;
position: absolute;
width: 200px;
height: 200px;}

.links{
float:left;
width:50%;
height: 200px;

}

.rechts{

float:left;
width:50%;
height: 200px;
}

Könntest du bitte etwas präzisieren, wo was nicht funzt?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Webseite: Variable oder feste Breite?	thomas78	(X)HTML	6	25.12.2009 19:55
Geht das: 3 Spalten, Mitte zentriert + feste Breite, Ränder automatisch	Kampmann	CSS	2	25.10.2009 11:24
3 Divs Nebeneinander (variable und feste breite)	temp11	CSS	0	12.06.2009 12:04
Holy Grail und der Internet Explorer!	ONeill	CSS	23	01.06.2006 18:20
3 Spalten, 100% Breite und Mitte feste breite	lookom	CSS	0	23.07.2005 17:19