Div Element auf die größe vom Kind Element verkleinern

Feirell · #1 (**permalink**) 11.10.2012, 13:06

Hey Leute,

ich wollte mal da was fragen.
Und zwar besteht momentan das Problem das ich ein "<table>" habe und dieses von einem "<div>" Element umschließen lassen möchte was dann sich sozusagen rumspannt. Das brauche ich ingründe nur weil ich einige css Zuweisungen nicht auf das "<table>" Element setzten kann.

HTML-Code:

<div id="Kasten">
    <table id="Tabelle"> ... </table>
</div>

Nur dummerweise dehnt sich das "<div>" Element so groß wie die Seite ist aus.

Könnte mir da jemand ein Kniff verraten oder mir mit einem anderen Element zeigen wie ich das selbe erreichen kann.

Mfg
Feirell

protonenbeschleuniger · #2 (**permalink**) 11.10.2012, 13:13

Zitat:

Zitat von Feirell

HTML-Code:

<div id="Kasten">
    <table id="Tabelle"> ... </table>
</div>

Nur dummerweise dehnt sich das "<div>" Element so groß wie die Seite ist aus.

Die Tabelle doch auch, beides sind Blockelemente. Du müßtest schon etwas genauer dein Problem zeigen.

Aber warum kanst du nicht das table Element gestalten?

Nachtrag: Ja man merkt ich habe schon lange kein table Element mehr benutzt. Das einfachste ist vermutlich, wenn du das DIV floatest

Feirell · #3 (**permalink**) 11.10.2012, 13:48

Zitat:

Zitat von protonenbeschleuniger

Du müßtest schon etwas genauer dein Problem zeigen.

Ok ich werde mal genauer : das div element wird zu groß es geht über die ganze seite dies soll es aber nicht es soll so klein werden wie table.

Zitat:

Zitat von protonenbeschleuniger

]Aber warum kanst du nicht das table Element gestalten?

border radius, padding und anderen quatsch frisst es nicht ... :[

Zitat:

Zitat von protonenbeschleuniger

Das einfachste ist vermutlich, wenn du das DIV floatest

Mhhh 0,o ok also so :

Code:

#kasten{float:none}

mhh

Ich denke mal du hast mich missverstanden

fricca · #4 (**permalink**) 11.10.2012, 14:00

Was du suchst nennt man Shrink-to-fit-Breite.
Float (nicht mit dem Wert none) ist eine Möglichkeit, das zu erreichen.
Es gibt andere -- doch wie immer hängt es vom Kontext ab, was die sinnvollste Variante ist. Wir kennen aber den Kontext nicht, sondern nur einen winzigen Codeschnipsel.

protonenbeschleuniger · #5 (**permalink**) 11.10.2012, 15:11

Zitat:

Zitat von Feirell

border radius, padding und anderen quatsch frisst es nicht ... :[

Wieso sollte das eine Tabelle nicht "fressen"?

HTML-Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
 <style>
table {
	border:1px solid black;
	padding:2em;
	border-radius:5px;
}
</style>
</head>
<body>
<table>
	<tr>
		<td> Tabelle</td>
	</tr>
</table>
</body>
</html>

Geht bei mir einwandfrei

Feirell · #6 (**permalink**) 11.10.2012, 15:17

Zitat:

Zitat von fricca

Was du suchst nennt man Shrink-to-fit-Breite.
Float (nicht mit dem Wert none) ist eine Möglichkeit, das zu erreichen.
Es gibt andere -- doch wie immer hängt es vom Kontext ab, was die sinnvollste Variante ist. Wir kennen aber den Kontext nicht, sondern nur einen winzigen Codeschnipsel.

Jop den ganzen kann man so auch nicht erraten aber viel dahinter gibt es auch nicht da es eine php generierte Seite ist kann ich das jetzt so auch nicht sagen es war ja auch nur die frage wie ich das div Objekt auf die Größe von der Tabelle schrumpft.

EDIT:
Hat geklappt mit "display: inline-block" danke dir.

Feirell · #7 (**permalink**) 11.10.2012, 15:20

Zitat:

Zitat von protonenbeschleuniger

Wieso sollte das eine Tabelle nicht "fressen"?

HTML-Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
 <style>
table {
	border:1px solid black;
	padding:2em;
	border-radius:5px;
}
</style>
</head>
<body>
<table>
	<tr>
		<td> Tabelle</td>
	</tr>
</table>
</body>
</html>

Geht bei mir einwandfrei

Code:

table{
    background-color: #808080;
    margin-top:10%;
    padding: 20px;
    border: solid 8px black;
    border-radius:10px ;
    box-shadow:inset 0px 0px 10px black;
}

Nimmt der bei mir ned den radius und padding ignoriert er auch ... :[

protonenbeschleuniger · #8 (**permalink**) 11.10.2012, 16:10

Zitat:

Zitat von Feirell

Code:

table{
    background-color: #808080;
    margin-top:10%;
    padding: 20px;
    border: solid 8px black;
    border-radius:10px ;
    box-shadow:inset 0px 0px 10px black;
}

Nimmt der bei mir ned den radius und padding ignoriert er auch ... :[

Welchen Browser benutzt du?

Feirell · #9 (**permalink**) 26.10.2012, 19:56

Zitat:

Zitat von protonenbeschleuniger

Welchen Browser benutzt du?

Mozilla firefox neueste Version

gato · #10 (**permalink**) 26.10.2012, 21:45

Zitat:

Zitat von Feirell

Mozilla firefox neueste Version

Funktioniert problemlos, du gibst also nicht alle Informationen raus.
Durchschaut

Schau dir die Seite über das Entwicklerwerkzeug deiner Wahl an und suche den Fehler.

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
fixes div element	seeteufel	CSS	7	09.06.2011 20:00
DIV je nach Größe eines darinliegenden DIVs vergrößern	Merlin123	CSS	18	18.08.2009 08:46
[CSS] Div Span Element einrücken	The Prophet	CSS	12	05.10.2004 23:02
Div passt sich nicht an größe des Background-Image an?	Sombreo	CSS	13	09.07.2004 02:37
CSS div Größe anpassen anhand des inhaltes	Heavenfighter	(X)HTML	3	07.07.2004 10:04