Slider blockiert Sidebar-Content

Batmaniac

Hallo,

ich bin neu in Sachen WordPress und will meine alte HTML-Website endlich in ein moderneres System packen. Dafür hab ich mir das Theme "Juggernaut" besorgt und bin gerade dabei es nach meinen Bedürfnissen anzupassen.

Nun zieht sich in Juggernaut normalerweise ein Slider unter dem Header über die gesamte Breite der Seite. Diesen habe ich nun manuell verkürzt (von 1000px auf 643px), damit ich die rechte Seite daneben für die Sidebar nutzen kann. Doch irgendwie scheint weiterhin etwas den Platz neben dem Slider zu blockieren, damit der Sidebar-Inhalt nicht hochrutschen kann.

Was habe ich vergessen anzupassen?

Meine Seite: http://www.batmannews.de/2011/wordpress/

Als Anhang noch ein Screenshot, wie sich das Theme ursprünglich verhält.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

WP-Theme.eu

Hey,
hast du alles um Slider drum-herum entsprechend verkürzt? Wie groß in% oder in px ist dein Sidebar? Dein Content-Teil, dein SLider und eigentlich dein Konteiner?Muss proporzional alles passen und das Mindeste eingehalten werden. Außerdem versuch es auch mit float und wahrscheinlich auch mit clear zu regeln, das müsste reichen. :grin:

Batmaniac

Hi WP-Theme.eu,

danke für deine Antwort. Bei einigen deiner Tipps dreht sich bei mir allerdings der Kopf ;) Wie gesagt, bin noch recht neu auf dem Gebiet.

Du meinst mit Proportional, dass letztendlich wieder alles auf 1000px (Gesamtbreite) rauslaufen muss?

Hier mal der Code:

Code

/*************************** Content Areas ***************************/


#page-wrap {
float: left;
text-align: left;
position: absolute;
top: 0;
left: 50%;
width: 1000px;
margin-left: -500px;
}
#content-wrapper-outer {
float: left;
width: 1000px;
}
#content-wrapper-inner {
float: left;
width: 943px;
padding: 20px 30px;
}
[COLOR="red"]#main-content {
float: left;
position: relative;
width: 600px;
overflow: hidden;[/COLOR]
}
[COLOR="red"]#sidebar {
float: right;
position: relative;
width: 300px;[/COLOR]
}

Alles anzeigen

Hier mal der Code meines Sliders (der Rot markierte ist der genutzte)

CSS

/*************************** Sliders ***************************/


/* Accordion Slider */
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
top: 0px;
left: 11px;
width: 500px !important;
}
.kwicks li {
height: 360px;
position: relative;
display: none;
overflow: hidden;
padding: 0;
cursor: pointer;
}
.kwicks.horizontal li {
margin-right: 0;
float: left;
}
.kwicks .wp-post-image {
border: 0 none;
}
.slider-shadow {
z-index: 60;
position: absolute;
right: 0px;
width: 25px;
height: 360px;
background: url(images/slider_shadow.png) repeat-y;
}
.last-slide .slider-shadow {
background: none !important;
}


.slider-title {
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
z-index: 50;
height: 50px;
padding: 15px;
-moz-opacity: 0.90;
opacity: 0.90;
filter: alpha(opacity = 90);
}
.kwick:hover .slider-title {
-moz-opacity: 0;
opacity: 0;
filter: alpha(opacity = 0);
}
.active .slider-title {
display: none !important;
}
.slider-title h1 {
font-size: 14px;
line-height: 18px;
}


.slider-desc {
position: absolute;
left: 0;
bottom: 0;
z-index: 50;
height: 80px;
padding: 15px;
-moz-opacity: 0;
opacity: 0;
filter: alpha(opacity = 0);
}
.kwick:hover .slider-desc {
-moz-opacity: 0.90;
opacity: 0.90;
filter: alpha(opacity = 90);
}
.kwicks a:hover {
text-decoration: none !important;
}
.slider-desc-title {
display: block;
text-transform: uppercase;
font-size: 23px;
line-height: 23px;
padding-bottom: 5px;
}


[COLOR="Red"]/* Fade Slider */
#fadeslider {
width: 643px;
height: 300px;
position: relative;
overflow: hidden;
top: 0;
left: 11px;
}
#fadeslider img {
width: 643px;
height: 300px;
border: 0 none;
}
#fadesliderContent {
width: 100%;
position: absolute;
top: 0;
margin-left: 0;
}
.fadesliderImage {
float: left;
position: relative;
display: none;
}
.fadesliderLink {
line-height: 0;
padding: 0;
margin: 0;
border: 0;
}
.fadesliderImage span {
display: none;
position: absolute;
width: 630px;
padding: 15px;
}
.fadesliderImage span h1 {
font-size: 20px;
line-height: 20px;[/COLOR]
}
.cap-top {
top: 0;
left: 0;
}
.cap-bottom {
bottom: 0;
left: 0;
}
.cap-left {
left:0;
top:0;
height: 330px;
width: 250px !important;
}
.cap-right {
bottom:0;
right:0;
height: 330px;
width: 250px !important;
}

Alles anzeigen

Tutrix

Wenn ich das jetzt richtig gesehen habe, ist der Slider an der falschen Stelle.
Du müsstest ihn innerhalb des "main-content" div's einfügen.
Im Moment sitzt er darüber, wodurch der Rest der Seite nach unten rutscht

Batmaniac

Danke Art of Pic.

Leider scheint auch das nicht zu helfen, auch wenn es logisch klingt.

Damit zerhaut es mir den Slider in Einzelteile. Das Resultat sieht dann wie folgt aus:

Tutrix

wo und wie hast du ihn den eingefügt?

normal dürfte es da nix zerhauen

Batmaniac

Sorry, hätte ich natürlich genauer schildern sollen. Das es den Slider zerhauen hat, scheint wohl mein Fehler gewesen ein, konnte ich soweit wieder fixen.

Allerdings hat das Verschieben in den Main Content-Bereich auch nichts gebraucht (sofern ich dich richtig verstanden habe).

Hier der Code:

CSS

/*************************** Content Areas ***************************/




#main-content {
float: left;
position: relative;
width: 600px;
overflow: hidden;
}
[COLOR="DarkRed"]/* Fade Slider */
#fadeslider {
width: 643px;
height: 300px;
position: relative;
overflow: hidden;
top: 0;
left: 11px;
}
#fadeslider img {
width: 643px;
height: 300px;
border: 0 none;
}
#fadesliderContent {
width: 100%;
position: absolute;
top: 0;
margin-left: 0;
}
.fadesliderImage {
float: left;
position: relative;
display: none;
}
.fadesliderLink {
line-height: 0;
padding: 0;
margin: 0;
border: 0;
}
.fadesliderImage span {
display: none;
position: absolute;
width: 630px;
padding: 15px;
}
.fadesliderImage span h1 {
font-size: 20px;
line-height: 20px;
}
.cap-top {
top: 0;
left: 0;
}
.cap-bottom {
bottom: 0;
left: 0;
}
.cap-left {
left:0;
top:0;
height: 330px;
width: 250px !important;
}
.cap-right {
bottom:0;
right:0;
height: 330px;
width: 250px !important;
}
#page-wrap {
float: left;
text-align: left;
position: absolute;
top: 0;
left: 50%;
width: 1000px;
margin-left: -500px;
}
#content-wrapper-outer {
float: left;
width: 1000px;
}
#content-wrapper-inner {
float: left;
width: 943px;
padding: 20px 30px;
}[/COLOR]
#sidebar {
float: right;
position: relative;
width: 300px;
}

Alles anzeigen

Tutrix

nun ja, nicht den css-Code verschieben, sondern den Slider ;)

und dann das left: 11px; entfernen, das ist ja nur deshalb notwendig, weil der Slider im "content-wrapper-outer" div sitzt, statt im Content

[COLOR=Red]ach ja[/COLOR], sehe auch gerade das

Code

#main-[URL="http://forum.wordpress-deutschland.org/lexikon/?do=showentry&item=content"]content[/URL] {
float: left;
position: relative;
width: [COLOR=Red]600px[/COLOR];
overflow: hidden;
}

der Content hat also nur 600px keine 643, also beim einfügen in den Content auch den Slider danach richten

Batmaniac

Entschuldige meine Begriffstuzigkeit, aber ich verstehe grad gar nichts :)

Kannst du genauer beschreiben, wie ich den Slider verschieben soll? Bin da echt etwas überfordert.

Tutrix

Nun du musst den Code vom Slider in der php-Datei versetzen.
Da dies ein Kauftheme ist, hab ich ja keine Einsicht in die Dateien.
Vermutlich ist der Code in der index.php oder home.php
Aber wende dich doch einfach an den Support von Themeforest oder den Autor des Themes.

also [COLOR=Red]Notlösung[/COLOR] kannst du mal diesen Code in der style.css erweitern

Code

#sidebar {
    float: right;
    position: relative;
    width: 300px;
}

und zwar so

Code

#sidebar {
    float: right;
    margin-top: -310px;
    position: relative;
    width: 300px;
}

das schiebt die Sidebar über ihren eigentlichen Bereich nach oben.

WP-Theme.eu

Zitat von Batmaniac

Hi WP-Theme.eu,

danke für deine Antwort. Bei einigen deiner Tipps dreht sich bei mir allerdings der Kopf ;) Wie gesagt, bin noch recht neu auf dem Gebiet.

Hi, oh so sorry, keine Absicht. Ich werde mich verbessern.
Du meinst mit Proportional, dass letztendlich wieder alles auf 1000px (Gesamtbreite) rauslaufen muss?

Hier mal der Code:

Code

/*************************** Content Areas ***************************/


#page-wrap {
float: left;
text-align: left;
position: absolute;
top: 0;
left: 50%;
width: 1000px;
margin-left: -500px;
}
#content-wrapper-outer {
float: left;
width: 1000px;
}
#content-wrapper-inner {
float: left;
width: 943px;
padding: 20px 30px;
}
[COLOR="red"]#main-content {
float: left;
position: relative;
width: 600px;
overflow: hidden;[/COLOR]
}
[COLOR="red"]#sidebar {
float: right;
position: relative;
width: 300px;[/COLOR]
}

Alles anzeigen

Hier mal der Code meines Sliders (der Rot markierte ist der genutzte)

CSS

/*************************** Sliders ***************************/


/* Accordion Slider */
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
top: 0px;
left: 11px;
width: 500px !important;
}
.kwicks li {
height: 360px;
position: relative;
display: none;
overflow: hidden;
padding: 0;
cursor: pointer;
}
.kwicks.horizontal li {
margin-right: 0;
float: left;
}
.kwicks .wp-post-image {
border: 0 none;
}
.slider-shadow {
z-index: 60;
position: absolute;
right: 0px;
width: 25px;
height: 360px;
background: url(images/slider_shadow.png) repeat-y;
}
.last-slide .slider-shadow {
background: none !important;
}


.slider-title {
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
z-index: 50;
height: 50px;
padding: 15px;
-moz-opacity: 0.90;
opacity: 0.90;
filter: alpha(opacity = 90);
}
.kwick:hover .slider-title {
-moz-opacity: 0;
opacity: 0;
filter: alpha(opacity = 0);
}
.active .slider-title {
display: none !important;
}
.slider-title h1 {
font-size: 14px;
line-height: 18px;
}


.slider-desc {
position: absolute;
left: 0;
bottom: 0;
z-index: 50;
height: 80px;
padding: 15px;
-moz-opacity: 0;
opacity: 0;
filter: alpha(opacity = 0);
}
.kwick:hover .slider-desc {
-moz-opacity: 0.90;
opacity: 0.90;
filter: alpha(opacity = 90);
}
.kwicks a:hover {
text-decoration: none !important;
}
.slider-desc-title {
display: block;
text-transform: uppercase;
font-size: 23px;
line-height: 23px;
padding-bottom: 5px;
}


[COLOR="Red"]/* Fade Slider */
#fadeslider {
width: 643px; -HIER BITTE auf 600px ändern
height: 300px;
position: relative;
overflow: hidden;
top: 0;
left: 11px;
}
#fadeslider img {
width: 643px;
height: 300px;
border: 0 none;
}
#fadesliderContent {
width: 100%;
position: absolute;
top: 0;
margin-left: 0;
}
.fadesliderImage {
float: left;
position: relative;
display: none;
}
.fadesliderLink {
line-height: 0;
padding: 0;
margin: 0;
border: 0;
}
.fadesliderImage span {
display: none;
position: absolute;
width: 630px;
padding: 15px;
}
.fadesliderImage span h1 {
font-size: 20px;
line-height: 20px;[/COLOR]
}
.cap-top {
top: 0;
left: 0;
}
.cap-bottom {
bottom: 0;
left: 0;
}
.cap-left {
left:0;
top:0;
height: 330px;
width: 250px !important;
}
.cap-right {
bottom:0;
right:0;
height: 330px;
width: 250px !important;
}

Alles anzeigen

Hoffe, es hat jetzt geklappt.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Slider blockiert Sidebar-Content

Jetzt mitmachen!