zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Kinder div genauso gross wie eltern Div - Frage #23456

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.10.2004, 16:23
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2004
Beiträge: 35
koDiacc befindet sich auf einem aufstrebenden Ast
Standard Kinder div genauso gross wie eltern Div - Frage #23456

Ich weiss wurd schon sau oft gefragt jedoch über die suche nichts zwingendes gefunden oO

hab 3 Divs, 1 Container, 1 navi und 1 content, content weitet den container aus, umso mehr content-text umso länger der content und container, und navi soll jetzt mitwachsen. navi hab ich height:100%, brignt aber nix weil container ja keine feste höhe hat.

hat jemand ne idee ?! code braucht man dazu ja nicht wissen, kann man sich ja denken
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.10.2004, 22:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Stimmt schon x-mal gefragt, geht nicht wirklich, nichts desto trotz habe ich heute dieses entdeckt.

http://www.stunicholls.myby.co.uk/layouts/3cols.html

Leider noch keine Zeit für eine Analyse gehabt.....viel Erfolg
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.10.2004, 00:00
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

So habe mir mal das 2. Beispiel von obigen Link genauer angesehen

Nun Valide ist das verwendete CSS nicht, da gibt es solche Eigenschaften wie display:inline-block; und overflow:visible;.
Die Container, die ge'float'et sind, haben die Eigenschaft display:inline; und sind somit Inline-Elemente ?!

Des weiteren wird ein DOCTYPE XHTML 1.1 / content="text/xml; charset=UTF-8"


Das Highlight ist dass die Rahmen links und rechts vom umschliessenden Container, beide 200px breit, als Hintergrundfarbe für die ge'float'eten Container genutzt werden

Da muß man erstmal darauf kommen, Respekt.


Hier habe ich mal den CODE, schon ein wenig aufbereitet. Nur ist es mir jetzt zu spät......

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css" media="screen" title="Druckvorschau-semantic-Test">
/*<![CDATA[*/

html,body	{
	margin: 0;
	padding: 0;
	background-color: #FF9933;
	color: #000000;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 100.01%;
}

.clear	{
		clear:both;
		height:1px;
		overflow:hidden;
		}

.box	{
		margin: 0 3px;
		border: 1px solid #000000;
		padding: 3px;
		font-size: 0.8em;	
		}


/* The header and footer */
.headfoot {
		display:block; 
		height:70px; 
		background:#fc6; 
		color:#000; 
		text-align:center; 
		padding:5px;
		font-size:30px;
		}

/* This bit does all the work */
#container {
		/* workaround = IE-Float-Bug  ? */
		position: relative; 
		display: block; 

		background:#ddf; 
		border-left: 200px solid #aa8; /* = background #left */ 
		border-right: 200px solid #a8a; /* = background #right */ 
		overflow:visible;
		}

* html #container {display:inline-block;}

#left 	{
		float:left; 
		position:relative; 
		width:198px; 
		margin-left:-197px; 
		display:inline;
		}
* html #left {width:197px;}

#right 	{
		float:right; 
		position:relative; 
		width:198px; 
		margin-right:-197px; 
		display:inline;
		}


/* Just to extend each column */
#container a:visited, a {color:#000; text-decoration:none;}
#container a span {display:none;}
#container a:hover {color:#c00; text-decoration:none; background:transparent;}
#container a:hover span {display:block;}


/*]]>*/
</style> 


</head><body>


<div class="headfoot">Header</div>

<div id="container">
	
	
	<div id="right">
	
		<div class="box">	
			<a href="#">Hover here to make the right column the longest
				<span>this is the right column
					
this is the right column
					
this is the right column
					
this is the right column
					
this is the right column
					
this is the right column
					
this is the right column
					
this is the right column
					
this is the right column
					
this is the right column
					
this is the right column
					

				</span>
			</a>
		</div>	
	
	</div>

	
	<div id="left">
	
		<div class="box">	
			<a href="#">Hover here to make the left column the longest
				<span>this is the right column
					
this is the right column
					
this is the right column
					
this is the right column
					
this is the right column
					
this is the right column
					
this is the right column
					

				</span>
			</a>
		</div>
	
	</div>

	<div class="box">	
		<a href="#">Hover here to make the middle column the longest
			<span>this is the right column
				
this is the right column
				
this is the right column
				
this is the right column
				
this is the right column
				

			</span>
		</a>
	</div>

<div class="clear"></div>
</div>

<div class="headfoot">Footer</div>

</body></html>
__________________
</ulle>
Mit Zitat antworten
  #4 (permalink)  
Alt 16.10.2004, 11:03
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von ulle
Nun :arrow: Valide ist das verwendete CSS nicht, da gibt es solche Eigenschaften wie display:inline-block; und overflow:visible;.
Ja und? Wo ist das Problem damit? Ist doch beides völlig in Ordnung.

Zitat:
Die Container, die ge'float'et sind, haben die Eigenschaft display:inline; und sind somit Inline-Elemente ?!
IE Win braucht das, weil er sonst bei fließenden Containern die Abstände (»margin«) falsch berechnet. Daran ist ebenfalls nichts Ungewöhnliches.

Gruß
Thomas
__________________
toscho.de
Mit Zitat antworten
  #5 (permalink)  
Alt 16.10.2004, 13:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Mal ne Zwischenfrage: was genau bedeutet " display:inline-block " ?

Der Unterschied zwischen Block und Inline-Elementen ist klar - aber inline-block? - Was muß ich mir darunter vorstellen und wozu ist es gut?

Zitat:
Zitat von ulle
Das Highlight ist dass die Rahmen links und rechts vom umschliessenden Container, beide 200px breit, als Hintergrundfarbe für die ge'float'eten Container genutzt werden!

Da muß man erstmal darauf kommen, Respekt.
Wer soviel CSS-Border-Art-Bilder macht wie Stu Nicholls, der kommt darauf!
Mit Zitat antworten
  #6 (permalink)  
Alt 16.10.2004, 13:27
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 01.10.2004
Beiträge: 110
Greg5000 befindet sich auf einem aufstrebenden Ast
Standard

display: inline-block; ist laut Validator nicht in Ordnung
__________________
Gruß, Greg
Mit Zitat antworten
  #7 (permalink)  
Alt 16.10.2004, 14:43
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von terrikay
Mal ne Zwischenfrage: was genau bedeutet " display:inline-block " ?

Der Unterschied zwischen Block und Inline-Elementen ist klar - aber inline-block? - Was muß ich mir darunter vorstellen und wozu ist es gut?
Dieser Wert wird zwar erst in CSS 2.1 standardisiert aber schon lange von Opera und IE interpretiert. Safari kann’s auch, nur Mozilla hinkt noch hinterher.

Ein Inline-Block verhält sich nach innen wie eine Blockbox und nach außen wie eine Inlinebox; er fließt also ganz normal in der Zeile mit, kann aber umgebrochene Zeilen enthalten und spricht auf »height« und »width« an (wie es der IE 5.0 bei jeder Inlinebox tut). Der Nutzen sollte auf der Hand liegen.
<textarea> oder ein Bild, dessen Alternativtext dargestellt wird, wären klassische Beispiele dafür.

Inline-Blöcke sind manchmal ein guter Ersatz für »float«, weil sie sich ähnlich verhalten, aber nicht ganz so bugbehaftet sind.
Dennoch kenne ich keine wirklich saubere Implementation: Der IE wandelt Blockelemente nicht korrekt um, Opera errechnet die baseline irgendwie komisch (auf jeden Fall falsch). Mit Safari habe ich noch keine größeren Experimente machen können; dazu kann ich also nichts sagen.

@Greg: Du mußt gegen das passende Profil »validieren« (sofern man im Zusammenhang mit CSS überhaupt diesen Ausdruck benutzen kann).

Mal ein Beispiel, das bisher nur in Opera funktioniert:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="de">
  <title>display:inline-block</title>
  <style type="text/css">
html, body, ul, li {
        margin:         0;
        padding:        0;
        color:          #000;
        background:     #ccc;
}
ul {
        color:          #000;
        background:     #aaa;
}
li {
        color:          #000;
        background:     #fff;
        display:        inline-block;
        width:          6em;
        text-align:     center;
}
  </style>
  <ul>[*]eins
zwei[*]drei
vier[/list]
Gruß
Thomas
__________________
toscho.de
Mit Zitat antworten
  #8 (permalink)  
Alt 16.10.2004, 15:08
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 01.10.2004
Beiträge: 110
Greg5000 befindet sich auf einem aufstrebenden Ast
Standard

Man lernt halt nie aus
Trotzdem bringt mir das ja nichts, wenn das Beispiel ausser es Opera kein Browser (IE und Mozilla jedenfalls nicht) machen.
__________________
Gruß, Greg
Mit Zitat antworten
  #9 (permalink)  
Alt 18.10.2004, 12:04
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2004
Beiträge: 35
koDiacc befindet sich auf einem aufstrebenden Ast
Standard

hm die url die ulle da gepostet hat von stu nicchols oder wie der heisst war mir bereits bekannt aber ganz durchsteigen tuh ich leider nicht hm nochmal genau ankucken
edit: Ja er benutzt einfach links und rechts nen border, das sieht dann so aus als wenn das genau gleich lang wär .. das geht klar aber bei meinem layout muss ich links nen hintergrund reintun also mit border komm ich nich weit :/
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
Absoluter Anfänger - Frage zum Div und Positionierung eenux (X)HTML 7 22.01.2007 21:00
flexibles Div soll Div mit fester Breite links umfliessen? braindead CSS 3 23.09.2006 13:58
Die maximale breite wird nicht erkannt notebook20000 CSS 9 22.06.2006 21:14
table -> eltern div --anpassen--> kinderdiv (problem) pixelholic CSS 4 14.08.2005 23:09
div frage Igi CSS 1 19.03.2005 23:22


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