zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 Spalten | Aussen: variable Breite; Mitte: feste Breite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.08.2005, 15:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.08.2005
Beiträge: 13
dreamshocker befindet sich auf einem aufstrebenden Ast
Standard 3 Spalten | Aussen: variable Breite; Mitte: feste Breite

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>
__________________
_dshock*collecting dreams
//
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.08.2005, 15:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard Re: 3 Spalten | Aussen: variable Breite; Mitte: feste Breite

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.08.2005, 15:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.08.2005
Beiträge: 13
dreamshocker befindet sich auf einem aufstrebenden Ast
Standard

Das Prob ist, dass es zwei verschiedene Hintergründe sind :/
__________________
_dshock*collecting dreams
//
Mit Zitat antworten
  #4 (permalink)  
Alt 17.08.2005, 15:25
Neuer Benutzer
neuer user
 
Registriert seit: 17.08.2005
Beiträge: 9
whalehunter befindet sich auf einem aufstrebenden Ast
Standard

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]
Mit Zitat antworten
  #5 (permalink)  
Alt 17.08.2005, 15:27
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von dreamshocker
Das Prob ist, dass es zwei verschiedene Hintergründe sind :/
Zeig doch einfach mal, wie's aussehen soll.
Mit Zitat antworten
  #6 (permalink)  
Alt 17.08.2005, 15:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.08.2005
Beiträge: 13
dreamshocker befindet sich auf einem aufstrebenden Ast
Standard

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)
__________________
_dshock*collecting dreams
//
Mit Zitat antworten
  #7 (permalink)  
Alt 17.08.2005, 16:03
Neuer Benutzer
neuer user
 
Registriert seit: 17.08.2005
Beiträge: 9
whalehunter befindet sich auf einem aufstrebenden Ast
Standard

Du kannst ja auch mal die mittlere Zelle über die beiden anderen legen. Die breiten, der Seitenfelder kannst du dann mit je 50% skalieren.
Mit Zitat antworten
  #8 (permalink)  
Alt 17.08.2005, 16:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.08.2005
Beiträge: 13
dreamshocker befindet sich auf einem aufstrebenden Ast
Standard

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?!
__________________
_dshock*collecting dreams
//
Mit Zitat antworten
  #9 (permalink)  
Alt 17.08.2005, 16:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.08.2005
Beiträge: 13
dreamshocker befindet sich auf einem aufstrebenden Ast
Standard

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;
  }
__________________
_dshock*collecting dreams
//
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 17.08.2005, 16:23
Neuer Benutzer
neuer user
 
Registriert seit: 17.08.2005
Beiträge: 9
whalehunter befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:10 Uhr.