Kein Leerschritt vor einem DIV

[jakestyler]

Hallo! :)
Ich habe auf meiner Seite ganz oben ein zentriertes Menü. Das besteht nicht aus ul und/oder li tags, sondern nur aus links. Es sind 3 Links.
"Neuen Spruch laden..." "Die besten Witze" und "Zum Blog".
Nun möchte ich die Seite so Responsive gestalten, dass wenn der Display kleiner ist (bzw. das Browserfenster kleiner ist), die letzten zwei Menüpunkte verschwinden.

Dazu habe ich folgendes im CSS:

@media (min-width: 450px) and (max-width: 950px) {				#linksmenu {
					visibility:hidden;
					display:none;
				}
				}

Das Menü sieht so aus:

<a href="#" onClick="window.location.reload()">Neuen Spruch laden...</a><div id="linksmenu">&nbsp;&nbsp;<a href="#myModal2" data-toggle="modal">Die besten Witze</a>&nbsp;&nbsp;<a href="link">Zum Blog</a></div>

Das Problem ist nun, dass das DIV "linksmenu" nun einfach unter dem location.reload()-Link steht. Es soll aber daneben stehen.

Weiß jemand rat? :)

Danke schonmal! :)

 

[Tronjer]

Hallo! :)

Das Problem ist nun, dass das DIV "linksmenu" nun einfach unter dem location.reload()-Link steht. Es soll aber daneben stehen.

Weiß jemand rat? :)

Danke schonmal! :)

So wirklich verstehe ich zwar nicht, was du meinst, aber dein erster Link steht als Inline-Element quasi frei im Raum, werden die anderen beiden durch ein Blockelement eingeschlossen sind. Wenn du beides nebeneinander anordnen willst, muss der erste Link auch ein Blockelement oder zumindest ein display: block erhalten.

Außerdem ist die Anweisung visibility: hidden im CSS überflüssig.

 

[jakestyler]

Du hast es erfasst: Die Links sollen einfach nebeneinander stehen. Wie mache ich das mit dem Block?
Und danke für die Anmerkung :)

 

[jakestyler]

Ich hab jetzt beides in einem DIV:

<div id="linkshow"><a href="#" onClick="window.location.reload()">Neuen Spruch laden...</a></div><div id="linksmenu">&nbsp;&nbsp;<a href="#myModal2" data-toggle="modal">Die besten Witze</a>&nbsp;&nbsp;<a href="link">Zum Blog</a></div>

Wie gehts nun weiter?

 

[Tronjer]

Wenn du den Divs ein float: left gibst, stehen sie nebeneinander.

 

[jakestyler]

Das Problem ist jetzt, dass sie nichtmehr zentriert sind. :/

 

[jakestyler]

*push*
Weiß denn niemand abhilfe?

 

[jakestyler]

Wenn jemand weiß, wie es geht kann es auch so gehen:
Ab einer Bildschirmbreite von 950px wird div1 durch div2 ersetzt.
Weiß da jemand was?

 

[Tronjer]

Wenn jemand weiß, wie es geht kann es auch so gehen:
Ab einer Bildschirmbreite von 950px wird div1 durch div2 ersetzt.
Weiß da jemand was?

Überlege doch mal ...

Du brauchst ein Event, das beim Skalieren des Browsers getriggered wird,

$(window).resize(function() {
// tu was
});

benötigst die aktuelle Breite des Windows,

var foo = $(window).width();

formulierst eine Bedingung,

if(foo < 950) {
// tu was
}

und kombinierst beides mit einer Aktion

$(window).resize(function() {
    var foo = $(window).width();
    if(foo < 950) {
       $('#id1').attr('id', 'id2');
    }
});

Das wäre ein Ansatz, wobei ich jetzt nicht ausprobiert habe, ob der Code so funktioniert.

 

[jakestyler]

müsste dann div1 visiblity: hidden sein?

 

[Tronjer]

Das kann ich dir nicht sagen. Obiger Code wechselt den Namen der ID (#div1 zu #div2) aus, wenn das Browserwindow kleiner als 950px ist.

visibility: hidden macht ein Element unsichtbar, es nimmt dabei aber immer noch den ursprünglichen Raum ein. Wenn du es ganz verschwinden lassen willst, gib ihm ein display: none.