zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 Spalten immer gleich hoch. Wie mach ich das?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.02.2006, 15:26
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2005
Beiträge: 68
Fanello befindet sich auf einem aufstrebenden Ast
Standard 3 Spalten immer gleich hoch. Wie mach ich das?

Liebe CSS-Gemeinde.

Ich bin an einer grösseren CSS-Knacknuss.. bin eigentlich schon sehr weit aber ein wichtiges Detail fehlt noch.

Teilauszug aus dem CSS:

Code:
#inhalt_kopf_3sp {
	width: 833px;
	height: 8px;
	top: 10px;
	margin-left: 10px;
	margin-top: 34px;
	background-image: url(../graph/hg/hg_inhalt_kopf_3sp.gif);
	background-repeat: no-repeat;
}

#inhalt_hg_3sp {
	width: 833px;
	margin-left: 10px;
	background-image: url(../graph/hg/hg_inhalt_3sp.gif);
}

#inhalt_fuss_3sp {
	width: 833px;
	height: 10px;
	margin-left: 10px;
	margin-bottom: 34px;
	background-image: url(../graph/hg/hg_inhalt_fuss_3sp.gif);
	background-repeat: no-repeat;
}

#spalte_1 {
	float: left;
	margin-left: 5px;
	width: 260px;
	background-color: Aqua;
}

#spalte_2 {
	float: left;
	margin-left: 21px;
	width: 260px;
	background-color: Aqua;
}

#spalte_3 {
	float: left;
	margin-left: 21px;
	width: 260px;
	background-color: Aqua;
}
Teilauszug aus dem HTML-Code:

Code:
<div id="inhalt_grund">

	<div id="inhalt_kopf_3sp"></div>
	<div id="inhalt_hg_3sp">
		<div id="spalte_1">
				fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf

		</div>
		<div id="spalte_2">
				fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		
		</div>
		<div id="spalte_3">
				fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		
		</div>
	</div>
	<div id="inhalt_fuss_3sp"></div>

</div>
Wie es im Moment aussieht seht ihr im Attachment css-bild.jpg.
Es hat 3 Spalten, und diese 3 Spalten müssen immer gleich hoch sein. Also wenn in der ersten Spalte 5 Zeilen und in den anderen beiden Spalten nur 2 Zeilen stehen, dann müssen alle so hoch sein wie die erste Spalte.
Im Moment liegen die 3 Spalten schöne nebeneinander, allerdings wird die Ebene (inhalt_hg_3sp) die diese 3 Spalten umschliesst nicht angepasst bzw. höher gemacht.

Aussehen müsste es wie im Bild css-bild2.jpg.

Vielen Dank für eure Tipps.

PS: das hässliche blau habe ich nur gemacht, damit man die Ebene besser sieht...
Angehängte Grafiken
Dateityp: jpg css-bild2.jpg (23,8 KB, 210x aufgerufen)
Dateityp: jpg css-bild.jpg (36,4 KB, 207x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.02.2006, 15:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

such mal nach "faux columns", steht auch im XHTMLwiki (oben) unter den FAQs.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.02.2006, 15:50
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2005
Beiträge: 68
Fanello befindet sich auf einem aufstrebenden Ast
Standard

ich arbeite eigentlich schon mit dieser "Kacheln"-Lösung.. aber für mein Beispiel brauchts glaub noch was zusätzliches....
Mit Zitat antworten
  #4 (permalink)  
Alt 21.02.2006, 15:55
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

sofern die Boxen fixe Breiten haben hast Du per Kachelung schonmal den linken und rechten Rand immer passend. Eine Grafik, die etwa so aussieht
(#=rahmen, -=Farbe der Box, +=Farbe des Hintergrundes):

#--------#++#--------#++#--------#

Oben und unten braucht es dann ein Extra-Element mit einem Hintergrund für den Abschluss der Bögen.
Mit Zitat antworten
  #5 (permalink)  
Alt 21.02.2006, 16:03
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Da fehlt bei den ganzen floats eine Kleinigkeit ... clear
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #6 (permalink)  
Alt 21.02.2006, 16:32
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2005
Beiträge: 68
Fanello befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von mazzo
sofern die Boxen fixe Breiten haben hast Du per Kachelung schonmal den linken und rechten Rand immer passend. Eine Grafik, die etwa so aussieht
(#=rahmen, -=Farbe der Box, +=Farbe des Hintergrundes):

#--------#++#--------#++#--------#

Oben und unten braucht es dann ein Extra-Element mit einem Hintergrund für den Abschluss der Bögen.
genau das mache ich schon.. nur hab ich das Problem, dass die Spalten-Ebenen in der der Text steht, in die Ebene plaziert wird in der der Hintergrund gemacht wird.
Aber eben diese Hintergrund-Ebene wächst nicht mit.
Mit Zitat antworten
  #7 (permalink)  
Alt 21.02.2006, 16:36
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2005
Beiträge: 68
Fanello befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Boris
Da fehlt bei den ganzen floats eine Kleinigkeit ... clear
ich hab jetzt das clear in allen möglichen Varianten versucht.. ohne positives Resultat... Ich habs gleich in der Ebene (CSS) definiert, das wäre doch korrekt, oder?
Mit Zitat antworten
  #8 (permalink)  
Alt 21.02.2006, 16:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

sicher nicht in allen Varianten sonst wäre dieser Thread nicht da

Du musst, wenn Du "clearfix" benutzt (siehe meine Sig), dem Element diesen CSS-Code zuweisen, welches floatierte Elemente beinhaltet. Dabei auch den Starhack für den IE nicht vergessen. Steht alles in Ulles Codebeispiel unter dem Link in der Signatur.
Mit Zitat antworten
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
Drei spaltige webseite: Spalten mit opacity highlighten. sepp88 Javascript & Ajax 2 16.11.2009 15:10
Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript chrisol_76 CSS 2 21.07.2008 18:37
3 dynam. Spalten mit Inhaltsüberlauf spacegaier CSS 6 12.10.2007 01:24
mysql: kann man count() in select Anfragen nicht mit anderen Spalten kombinieren? braindead Serveradministration und serverseitige Scripte 5 13.03.2007 23:53
Tooltip für Spalten ? SolCom (X)HTML 0 21.11.2005 16:26


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