✔ Zeilenumbruch während Verbreiterung

[dsNDesign]

Hei,
ich bin mir nicht sicher, ob dies in den CSS oder Javascript-Bereich gehört. Hat von beidem etwas.

Mein Anliegen: http://web34.server30.campusspeicher.de/Test/

Ich denke, man sieht schon recht gut, was der Fehler ist. Wenn man mit der Maus über eines der Icons fährt, verbreitert sich der Container. Jedoch wird während der Animation der Rest in eine neue Zeile verschoben. Dies soll jedoch nicht so sein. Der Rest soll einfach zur Seite "geschoben" werden.

Hier mal der Code von 2 Icons:

CSS:

.navi_news {
	width:50px;
	overflow:hidden;
	display:inline-block;
}
.navi_bands {
	width:32px;
	overflow:hidden;
	display:inline-block;
}
.navi_trenn {
	background-image:url(image/navi_t.png);
	background-position:center;
	background-repeat:no-repeat;
	width:81px;
	height:45px;
	display:inline-block;
}

HTML:

<div class="navi_news"><img src="image/news.png" alt="News" /></div><div class="navi_trenn"></div><div class="navi_bands"><img src="image/bands.png" alt="Bands" /></div>

und der Java (jQuery) Teil:

<script type="text/javascript">
$(".navi_news").hover(function() {
	var breite = $(".navi_news").css("width");
	$(this).animate({width: "96px"}, 300);
},
function() {
	$(this).animate({width: "50px"}, 300);
}
);
$(".navi_bands").hover(function() {
	var breite = $(".navi_bands").css("width");
	$(this).animate({width: "83px"}, 300);
},
function() {
	$(this).animate({width: "32px"}, 300);
}
);
</script>

Weiß jemand einen Rat, wie ich dies lösen könnte?

Gruß

 

[CPoly]

Wärend der Animation bekommt das Element "display:block". Du musst also nicht weiter tun, als deinem inline-block Vorrang zu geben

/*vorher*/
.navi_news {
    display:inline-block;
}

/*nachher*/
.navi_news {
    display:inline-block !important;
}

Und das entsprechend für alle deine Elemente.

 

[dsNDesign]

Perfekt. Funktioniert nun alles Bestens. Vielen Dank!