zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 div container nebeneinander

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.07.2009, 17:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.07.2009
Beiträge: 6
the_real_alex befindet sich auf einem aufstrebenden Ast
Standard 3 div container nebeneinander

hallo,
ich bin gerade am verzeifeln da ich nich unbedingt ein anfänger bin was css/html/php angeht.aber im moment bin ich am rande eines nervenzusammenbruchs.

folgendes;


es gilt 3 div fenster nebeneinander zu postionieren an sich keine große sache, also 1 2 3

das problem ist nur damit

fenster 2 in der mitte sein soll und das auflösungsunabhängig, in diesem fenster befindet sich ein bild das mittels background-image:url eingebunden wird und 600px breit ist.

fenster 1 steht links, fenster 3 rechts. diese enthalten ebenfalls ein bild das via background-image:url eingebunden wurde, und mittels background-repeat:repeat-x; so breit skaliert wird wie fenster 1 oder 3 eben sind.

im endeffekt soll das in etwa so aussehen wie der kopf vom xhtmlforum, nur das nicht das mittlere fenster skalieren soll sondern die fenster links und rechts.

alex
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.07.2009, 17:27
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.990
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Haben fenster1 und fester3 den selben Hintergrund?
Wenn ja, dann ist folgende Lösung viel leichter als das was du hast:

Container 1 bekommt 100% Breite und der Hintergrundbild gespiegelt.
Container 2 wird in Container 1 verschachtelt und bekommt die 600 Pixel Breite des Bildes fest zugewiesen und wird mittig ausgerichtet

So sieht es dann aus als wäre links und rechts ein Rand
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.07.2009, 20:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.07.2009
Beiträge: 6
the_real_alex befindet sich auf einem aufstrebenden Ast
Standard

danke nur funst das nich so richtig oder ich setze es falsch um


Code:
#left {
position:absolute;
width: 100%;
height:117px;
background-image:url(left.jpg);
background-repeat:repeat-x;

}

#middle {
width: 600px;
height:117px;
position: absolute;
left:25%;
background-image:url(logo.jpg);
	
}

#right {
width: 25%;
height:117px;
position: absolute;
background-image:url(right.jpg);
background-repeat:repeat-x;
right:0px;

}
left und right haben unterschiedliche bildinhalte und sind jeweils nur 1px breit

HTML-Code:
<body>

<div id="left">
<div id="middle"></div>
</div>
<div id="right"></div>

</body>
Mit Zitat antworten
  #4 (permalink)  
Alt 10.07.2009, 09:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.07.2009
Beiträge: 6
the_real_alex befindet sich auf einem aufstrebenden Ast
Standard

kann mir da niemand helfen, bitte
Mit Zitat antworten
  #5 (permalink)  
Alt 10.07.2009, 09:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

Die absolute Positionierung brauchst du doch nicht. Nimm sie raus und arbeite im normalen Dokumentenfluss.

Gib #left und #right eine feste Breite und float: left/right;
#middle gibst du keine Breite (bzw. min-width: 600px wegen des Hintergrundbildes) und fügst margin-left/-right in der Breite von #left und #right hinzu.
Im HTML-Teil muss die Reihenfolge dann wiefolgt lauten:
HTML-Code:
<div id="left">...</div>
<div id="right">...</div>
<div id="middle">...</div>
Mit Zitat antworten
  #6 (permalink)  
Alt 10.07.2009, 10:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.07.2009
Beiträge: 6
the_real_alex befindet sich auf einem aufstrebenden Ast
Standard

also ich hab das mal so gemacht

#left {

width: 20%;
height:117px;
background-image:url(left.jpg);
background-repeat:repeat-x;
float:left;
margin:0;
padding:0;

}

#middle {
min-width: 600px;
height:117px;
background-image:url(logo_big.jpg);
margin:0;
padding:0;

}

#right {
width: 20%;
height:117px;
background-image:url(right.jpg);
background-repeat:repeat-x;
float:right;
margin:0;
padding:0;
}



<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>

leider funktioniert das nicht da es das rechte fenster beim zusammenschieben in das mittlere möndet und schließlich überdeckt. das mittlere muß eine bestimmte breite habe da es ein logo beinhaltet, nur links und rechts (1,3) dürfen flexibel sein (am besten auto)

Geändert von the_real_alex (10.07.2009 um 10:45 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 10.07.2009, 23:45
Neuer Benutzer
neuer user
 
Registriert seit: 22.09.2007
Beiträge: 6
medienmasse befindet sich auf einem aufstrebenden Ast
Standard

Wenn alle Boxen das gleiche Bild als Hintergrund haben kannst Du alternativ auch mit .class arbeiten und eine Klasse erstellen die float:left als Wert hat, und einfach drei div-Boxen mit der Klasse nebeneinander setzen.
Klappt bei mir zumindest einwandfrei, natürlich musst Du um die Boxen herum eine Box setzen mit 100%.

Warum px-Angaben?

Lg
Mit Zitat antworten
  #8 (permalink)  
Alt 11.07.2009, 07:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

Er möchte aber, dass die link und rechte Spalte fixe Breiten haben und die mittlere Spalte den restlichen Platz einnimmt. Somit fällt float für die mittlere Spalte weg.

Zitat:
leider funktioniert das nicht da es das rechte fenster beim zusammenschieben in das mittlere möndet und schließlich überdeckt. das mittlere muß eine bestimmte breite habe da es ein logo beinhaltet, nur links und rechts (1,3) dürfen flexibel sein (am besten auto)
Was willst du denn nun genau machen? Soll der mittlere Bereich flexibel sein oder die äußeren? Bei min-width: 600px bleibt dein mittlerer Container halt mindestens 600px breit und die floats schieben sich darüber. Wie man das nun verhindern kann, weiß ich auch nicht. Zeig doch vllt. mal ein Screenshot deines Layouts. Vllt finden wir eine andere Lösung
Mit Zitat antworten
  #9 (permalink)  
Alt 11.07.2009, 10:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.07.2009
Beiträge: 6
the_real_alex befindet sich auf einem aufstrebenden Ast
Standard

der mittlere soll mittig sein und eine feste breite haben, links und rechts sollen skalieren
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.07.2009, 11:20
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Was mir dazu auf die Schnelle einfällt (der IE < 7 braucht nur noch einen min-width-Hack):

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">

* {
	margin: 0;
	padding: 0;
	}

body {
	min-width: 700px;
	}

#main-1,
#main-2 {
	width: 50%;
	}

#main-1 {
	float: left;
	margin-right: -10px;
	}

#main-2 {
	float: right;
	}

#center {
	background: yellow;
	float: right;
	width: 600px;
	margin-right: -300px;
	position: relative;
	}

#left,
#right {
	background: red;
	}

#left {
	margin-right: 300px;
	}

#right {
	margin-left: 300px;
	}

div {
	min-height: 1px; /* IE 7 */
	}

* html div {
	height: 1px;
	}

* html #left {
	margin: 0;
	}

* html #center {
	margin-left: -3px;
	}

</style>
</head>

<body>

<div id="main-1">
	<div id="center">text</div>
	<div id="left">text</div>
</div>

<div id="main-2">
	<div id="right">text</div>
</div>

</body>

</html>
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
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
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 16:53
Header entfernen tripple CSS 17 15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 10:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 19:18


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