✔ CSS vs JQuery

O

Oetzicool

Erfahrenes Mitglied
Hey Leute ich habe ein kleines Problem, ich habe mir ne kleine Struktur mit CSS gebaut also 4 div boxen die aufgeteilt werden (zwei in einer Spalte und zwei in einer anderen), des hat soweit designtechnisch auch gepasst! Nun habe ich mit JQuery ne kleine Animation eingebaut, sodass wenn man einen Link anklinckt ein div eingeblendet wird. Nun verschiebt diese aber alles nach unten un verzerrt mir des gesamtbild! Ich wollte fragen ob mir einer von euch helfen könnte da ich keine Ahnung mehr habe und auch nicht der CSS-Guru bin! Danke schonmal :)
Code: 
body
{
	background-color:#369;
}
div
{
	padding:5px;
color:#000;
font-size:12px;
font-family:Verdana;
text-align:center;
}
.wrapper_main
{
width:0 auto;
height:auto;
background-color:#39F;
color:#FFF;
left:50%;top:25%;
position:absolute;
padding:10px;
margin:10px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}
.leftcol 
{
	margin:5px;
	border:solid 1px;
	float:left;
	width:auto;
}
.rightcol
{
	margin:5px;
	border:solid 1px;
	float:right;
	width:auto;
}
.zip_upload
{
	margin:10px;
	border:solid 1px;
	background-color:#663;
}
.pic_upload
{
	background-color:#999;
	margin:10px;
	border:solid 1px;
}
.last5
{
	background-color: #CF9;
	margin:10px;
	border:solid 1px;
}
.fotogallery_list
{
	background-color: #960;
	margin:10px;
	border:solid 1px;
}

.toggle_container {
	margin: 0 0 5px;
	padding: 0;
	border-top: 1px solid #d6d6d6;
	overflow: hidden;
	font-size: 1.2em;
}

HTML: 
<body>
<div class="wrapper_main">
	<div>Mainframe</div>
    <div class="leftcol">
    	<div class="zip_upload">
        <h4 class="trigger"><a href="#">TOGGELN</a></h4>
        <div class="toggle_container">Test</div>
        </div>
        
        <div class="pic_upload">Test3</div>
    </div>
    <div class="rightcol">
    	<div class="toggle_container">Test2</div>
        <div class="fotogallery_list">Test4</div>
    </div>
</div>
	
</div>

</body>
 
Hi,

wenn durch das Einblenden eines Elements (in deinem Fall ein <div>) der nachfolgende Seiteninhalt nicht nach unten verschoben werden soll, lässt sich dieses Element mittels position:absolute aus dem normalen Textfluß nehmen.

Hierfür empfiehlt es sich, dieses absolut zu positionierende DIV in ein zusätzliches DIV einzubetten, das wiederum mit position:relative formatiert wird, damit sich die absolute Positionierung darin "relativ" verhält, also auf die Boxengrenzen des umschliessenden DIVs bezieht, und nicht auf die Grenzen des Dokumentkörpers, genauer gesagt auf den Rand des Browserfensters.

Als vergleichbares Anwendungsbeispiel seien hier die "Dropdown-Menüs", wie z.B. http://www.cssplay.co.uk/menus/basic_dd.html, genannt, deren Untermenüs den darunter folgenden Inhalt auch nicht nach unten schieben, wenn sie eingeblendet werden. In dem genannten Beispiel betrifft es den Satz "NO javascript - just CSS - and it validates", der in seiner Ausgangsposition verharrt, wenn die Submenüs geöffnet werden.

mfg Maik
 
Danke für die schnelle antwort aber ich hab des Problem selber gelöst, ich habe einfach die Höhe festgesetzt dann kommt es nicht zu solchen Verzehrrungen :)
Aber trotzdem vielen Lieben Dank für die schnelle und hilfreiche Antwort :D
 
Jo, das ist die zweite Möglichkeit, die ich aber bewußt nicht in Betracht gezogen habe, dir vorzuschlagen, da sich dadurch eine Lücke zum nachfolgenden Inhalt ergibt, die mitunter ja auch sehr groß ausfallen kann, wenn der Inhaltsumfang des zu toggelnden DIVs entsprechend ist, und sich so dem Seitenbesucher ein seltsam wirkendes Gesamtbild der Seite präsentiert, weil zwischen den einzelnen sichtbaren Passagen ein "unnatürlich" großer vertikaler Abstand existiert.

Aber wenn du damit leben kannst, soll's mir natürlich auch recht sein ;-)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück