• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div an anderes Div anhängen

L

Lythis

Mitglied
Hallo, ich zerbreche mir grade den Kopf wie ich folgendes vernünftig realisieren könnte:

direkt am Zentriertem Content Div möchte ich links (ggf. rechts) eine kleine Infobox anbringen welche mit position: fixed am Bild fixiert bleibt.
dieses soll direkt am Content Div andocken. Mit verschieben usw ist dies zwar machbar aber nun kommen wir zu dem hauptproblem:
da der Content bereich zentriert ist, wandert dieser immer weiter zum linken Rand, wenn man den Browser verkleinert.
wie erreicht man dass dieser Content einen gewissen mindestabstand einhält und wie wäre die vernünftigste lösen dafür dass die Info box sich korrekt mit der Content box verschiebt?

mfg Lyth
 
Unsicher:
Versuche es mal mit einem entsprechenden Padding auf <body>
Ohne testen weiß ich nicht, wie position:fixed darauf reagiert.

Ansonsten:
Links und rechts neben dein Content-DIV zwei unsichtbare DIV's floaten die die nötige min-width haben.

Was Eleganteres fällt mir auf die Schnelle nicht ein.
 
Versuch's mal so.
Code: 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>fix</title> 
<style type="text/css">

 * { 
   margin:0; 
   padding:0; 
  } 
 
 
body { 
 width:960px;
 margin:0 auto; 
 background:#fff; 
} 
 
#inhalt {  
 margin-left:200px; 
 background:#ddd;
 min-height:1200px; 
} 
 
#fix { 
 position:fixed; 
 width:200px; 
 background:#000; 
 z-index:10; 
 overflow:auto; 
 height:200px;
 color:#fff; 
}
</style> 
</head> 
<body> 
<div id="fix">Fixes Element</div> 
<div id="inhalt">... </div> 
</body> 
</html>
 
es kann so einfach sein ^^
also mit Margin den Seitenabstand erhöhen bewirkt dass das Div sich nicht mehr mit der Fensterbreite mitbewebt (immer gleicher Abstand)
ein extra Div erstellen und dieses nach links flooten lassen klingt plausibel, leider legt sich der inhalt Div einfach drüber und bedeckt den Abstands Div.

Lösung: man packt alles in ein extra Div, welches den wert Padding left/right und die benötigte Breite hat.
somit ist der inhalt wie vorher auch mit der Fensterbreite Variabel aber erreicht nicht mehr den Rand.
das Fixierte Div element wird dann nur noch mithilfe von Margin in Position gebracht.

mfg Lythis
 
Lythis schrieb:
es kann so einfach sein ^^
also mit Margin den Seitenabstand erhöhen bewirkt dass das Div sich nicht mehr mit der Fensterbreite mitbewebt (immer gleicher Abstand)
ein extra Div erstellen und dieses nach links flooten lassen klingt plausibel, leider legt sich der inhalt Div einfach drüber und bedeckt den Abstands Div.

Lösung: man packt alles in ein extra Div, welches den wert Padding left/right und die benötigte Breite hat.
somit ist der inhalt wie vorher auch mit der Fensterbreite Variabel aber erreicht nicht mehr den Rand.
das Fixierte Div element wird dann nur noch mithilfe von Margin in Position gebracht.

mfg Lythis
Zum Vergrößern anklicken....

Hast du mein Beispiel ausprobiert? Kann dir nicht so recht folgen. Oder habe ich dich falsch verstanden?
 
Zuletzt bearbeitet:
@ DJheke jo hab dein Beispiel grad ausprobiert, erzielt den gleichen effekt. im prinzip ists identisch, unterschied liegt im wesentlichen darin dass du den Body bereich nutzt und ich n extra Div angelegt habe. danach tust du im Body bereich die Divs verschieben mit Margin wärend ich "umgedacht" nicht die Divs Positioniere sondern dem Body anweise mit Padding einen Abstand einzuhalten.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>fix</title>
<style type="text/css">

* {
margin:0;
padding:0;
}


body {
width:800px;
margin:0 auto;
background:#fff;
padding-left 200px;
}


#inhalt {
margin-left:200px;
background:#ddd;
min-height:1200px;
}

#fix {
position:fixed;
width:200px;
height: 400px;
background:#000;
z-index:10;
margin-top:50px;

}
</style>
</head>
<body>
<div id="fix">Fixes Element</div>
<div id="inhalt">... </div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben