Blockpositionierung, float und Anpassung
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anpassen
aussage
auto
basis
beispiel
code
dank
detail
herangehensweise
http
index
information
inhalt
problem
problematik
url
vermeiden
vorhaben
weiteren infos
zitat
-
Hi,
ich habe ein kleines Positionierungsproblem.
Zuerstmal mein vorhaben:
Ich habe 2 Kontents (links & rechts) mit fester Breite, aber variabler Höhe.
Hinter den Beiden Contents soll die Fläche grau hinterlegt sein. Die graue hinterlegung soll sich dabei an die Höhe des rechten Kontents anpassen. Die Top position der beiden contents ist gleich.
---------------------------------------------------------------------- - ******************* content2content2content2content2content2 - - **** content1 **** content2content2content2content2content2 - - ******************* content2content2content2content2content2 - - ******************* content2content2content2content2content2 - -- *******************----------------------------------------------- ******************* ******************* *******************
Die Fläche in den - - - - soll den grauen Bereich darstellen, der sich der Höhe des conten2 anpasst, *** ist der linke Kontentblock, der auf gleicher Höhe wie content1 steht, ebenfalls auf dem grauen bereich liegt, aber über diesen hinaus geht.
ich hoffe das Vorhaben ist so verständlich & man kann meine Skizze erkennen :)
Vielen Dank & liebe Grüße
Beitrag zuletzt geändert: 31.5.2013 14:05:44 von programtools -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
<div id=wrapper"> <div id="left" class="left">inhalt1</div> <div id="right" class="left">inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 </div> </div>
jetzt noch bissl css
.left{ float: left; height: auto; width: 150px; background: gray; margin: 0 0px; } #wrapper { background: yellow; overflow:auto; }
Beitrag zuletzt geändert: 31.5.2013 14:51:38 von n0tiert -
Sry aber das hilft mir absolut nicht weiter.
n0tiert schrieb:
jetzt noch bissl css
Aussage = 0. Bei zu wenigen Informationen lieber nach weiteren infos / Beispielen etc fragen!
Es geht mir nämlich explizit darum, wie ich die Problematik mit CSS umsetze.
Um weitere Missverständnisse zu vermeiden:
Meine ersten Ansätze sag´hen so aus, dass ich zb dem llinken Content (Content1) eine feste Höhe zugewiesen habe. dann noch einen Z-Index > Content2.Z-Index und bei Content2 dann eben das margin-top auf den negierten Wert der festen Höhe von Content1.
Wie aber bereits erwähnt, Content2 UND Content1 sollen in ihrer Höhe variabel gehalten werden. Das schließt soeine Herangehensweise natürlich aus (und ich möchte es auf reiner CSS Basis, ohne JS lösen ;) ).
Beitrag zuletzt geändert: 31.5.2013 14:39:35 von programtools -
programtools schrieb:
Sry aber das hilft mir absolut nicht weiter.
n0tiert schrieb:
jetzt noch bissl css
Aussage = 0. Bei zu wenigen Informationen lieber nach weiteren infos / Beispielen etc fragen!
Es geht mir nämlich explizit darum, wie ich die Problematik mit CSS umsetze.
Um weitere Missverständnisse zu vermeiden:
Meine ersten Ansätze sag´hen so aus, dass ich zb dem llinken Content (Content1) eine feste Höhe zugewiesen habe. dann noch einen Z-Index > Content2.Z-Index und bei Content2 dann eben das margin-top auf den negierten Wert der festen Höhe von Content1.
Wie aber bereits erwähnt, Content2 UND Content1 sollen in ihrer Höhe variabel gehalten werden. Das schließt soeine Herangehensweise natürlich aus (und ich möchte es auf reiner CSS Basis, ohne JS lösen ;) ).
du weist aber schon wovon du redest oder ?? lol
weder ein js tag noch was anderes hab ich geschrieben , das ist plain html der alten schule
und nicht gleich losblabbern wenn da ggf noch was kommt ........
verstehe zwar nicht aus welchen grund der linke div ueber dem rechten stehen soll aber gut .....
hier kannste spielen und ansehen:
http://jsfiddle.net/BrtyH/671/
Beitrag zuletzt geändert: 31.5.2013 15:03:22 von n0tiert -
n0tiert schrieb:
du weist aber schon wovon du redest oder ?? lol
Unangemessen.
Antwort: Ja weiss ich.
Gegenfrage: du auch?
es geht hier darum anderen Nutzern zu gerne helfen, nicht darum, ihnen Code an den Kopf zu schmeissen, der garnichts nützt.
Ich habe mir erlaubt, dein Fiddle-Beispiel zu updaten (Siehe hier) . Der Wrapper passt sich an Content 2 an. Sobald ich aber den Inhalt von Content1 höher werden lasse als den von Content2 passt der Wrapper sich Content1 an was nicht geschehen soll. Wie ich in meiner Ausgangsfrage beschrieben habe (Zitat: Die graue hinterlegung soll sich dabei an die Höhe des rechten Kontents anpassen) soll die hinterlegte Fläche sich nur an die Höhe von Content2 anpassen.
Bitte lese die Beiträge doch ordentlich. Ich habe dir ja garnicht vorgeworfen, dass du mir JS andrehen wolltest. Im Gegenteil habe ich (Zitat: Um weitere Missverständnisse zu vermeiden) erwähnt, dass ich keine JS Lösung suche und habe damit meine problemdarlegung erweitert, dich aber keineswegs persöhnlich angegriffen.
Falls jemand sich mit CSS weitgehend auskennt und mir einen Ansatz zeigen kann wäre ich sehr dankbar!
Liebe Grüße und vielen Dank, an alle freundlichen Helfer!
Beitrag zuletzt geändert: 31.5.2013 15:53:15 von programtools -
http://jsfiddle.net/M7ruc/2/
bitte :)
Beitrag zuletzt geändert: 31.5.2013 16:54:45 von n0tiert -
n0tiert schrieb:
http://jsfiddle.net/M7ruc/2/
bitte :)
Danke, das geht schonmal in die richtige Richtung, allerdings habe ich durch die positionierungen nun wieder das Problem, das der Wrapper eine Höhe von 0 hat. Das bedeutet aber, dass sich das Elternelement des Wrappers (bei mir die Seite) nichtmehr an die Höhe des Inhaltes anpasst .
Gibt es die Möglichkeit den Wrapper jetzt an den höchsten Content anzupassen? (jenachdem 1 oder 2) ?
vielen Dank & liebe Grüße -
programtools schrieb:
n0tiert schrieb:
http://jsfiddle.net/M7ruc/2/
bitte :)
Danke, das geht schonmal in die richtige Richtung, allerdings habe ich durch die positionierungen nun wieder das Problem, das der Wrapper eine Höhe von 0 hat. Das bedeutet aber, dass sich das Elternelement des Wrappers (bei mir die Seite) nichtmehr an die Höhe des Inhaltes anpasst .
Gibt es die Möglichkeit den Wrapper jetzt an den höchsten Content anzupassen? (jenachdem 1 oder 2) ?
vielen Dank & liebe Grüße
da du den Höchsten content ja nicht umbedingt kennst, da ich davon ausgehe das die Inhalte dynamisch erzeugt werden
wirst du um jquery wohl nicht herum kommen die max size des contentX mittels .height() zu ermitteln um dann dem
wrapper diese height zu setzen.
da die seite ja dann ausgeliefert ist ......... ist js clientseitig dein freund
var theDiv1 = $("#content1");
var theDiv2 = $("#content2");
var totalHeight1 = theDiv1.outerHeight()
var totalHeight1 = theDiv1.outerHeight()
ermittel wer größer ist und setze die height auf dem wrapper + 10
$('#wrapper').height(heightvalue);
das aber nun dein problem :)
Beitrag zuletzt geändert: 31.5.2013 17:38:07 von n0tiert -
mmmmmmmm
Danke, das würde mein problem tatsächlich lösen, es handelt sich hierbei aber lediglich um ein designtechnisches detail, für das ich ungerne zu JS greife.
Gibt es wirklich keine CSS-Alternativen?
Trotzdem vielen Dank für deine Bemühungen und Ausführungen! Im Notfall muss es dann doch über JS laufen, dank JQ ist das ja noch recht überschaubar, trotzdem - sehr ungern.
Liebe Grüße und schönes Wochenende -
programtools schrieb:
"..... es handelt sich hierbei aber lediglich um ein designtechnisches detail, für das ich ungerne zu JS greife........."
dann würde ich das aber mal überdenken,
es erschließt sich bei mir immer noch nicht warum der bg von content2 unter dem content1 sein soll
-
es sieht einfach cooler aus. Sonst habe ich ein einfaches 2 Spalten design. Rechts & links. So zieht sich der Hintergrund des rechten Contents (text) hinter den linken (Bild). Fand ich ganz cool, geht aber nicht 100% relativ sondern nur wenn die Contents nicht variabel in ihrer Höhe sind ;/
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
