Beiträge von Quality19xx

DAnke schon mal für den Hinweis, mein Problem ist nur dass ich ja drei verschiedene Icon Boxen brauche oder jeder Icon Box individuell sagen muss auf welchen style sie zugreifen muss. Wenn ich das so ändern ändere ich das ja für alle aber ich brauch ja drei verschiedene Icon Box Designs

Der Link lautet [COLOR=#333333] [/COLOR]http://www.quality-lifestyle.de/#Angebot

Was ich machen will ist bei dem Mittleren Blick den Strich der beim Mousover erscheint Grün und im Rechten Block Rot. Das sind alles "Icon Boxes" von WordPress / Betheme

Hallo Freunde,

nachdem mir dieses Forum dabei geholfen hat alle meine Design Probleme zu lösen (Nochmals vielen Dank dafür an jeden einzelnen, hab dabei viel gelernt!), ist das das letzte Thema, was noch offen geblieben ist.

Für Hinweise zur Problemlösung bin ich sehr dankbar!

Krass! Ok hab es jetzt verstanden: Ich hab das die ganze Zeit auf meinem Samsung Note 4 getestet und der Button wurde die ganze Zeit angezeigt. Es scheint einfach eine höhere Auflösung zu haben. Als ich es probeweise auf 1201px geändert habe ist es verschwunden. Also funktioniert das tatsächlich!

Danke euch :-*

Ich versuche es zu verstehen aber bin mitlerweile recht frustriert :-|

Meine Link hat die Form

<a class=mobileunterbinden style=position:fixed;top:35%;left:0px;z-index:100; href=http://www.quality-lifestyle.de/kontakt/><img src=http://www.quality-lifestyle.de/wp-content/uploads/2015/08/Vorgespraech2.png alt=Kontakt></a>

und meine custim css sieht so aus:

@media only screen and (min-width: 768px) {
	.header-split #Top_bar:not(.is-sticky) {
		background-color: rgba(255,255,255,10);
		position: absolute;
		border-bottom: 1px solid rgba(255,255,255,0.2);
		top: 0;
                text-decoration: underline;
	}
}




@media screen and (max-width: 801px) {
  .mobileunterbinden {display: none;}
}

Bei class=mobileunterbinden habe ich die Anführungszeichen extra weggelassen, da dies als Text eingefügt wird und diese automatisch hinzugefügt werden.

Dennoch funktioniert es immer noch nicht auch wenn ich versuche zu verstehen warum :-{

wobei die untere Media die mobile darstellung unterbinden soll, die obere Media war schon vorher da.

ich bekomm es einfach nicht hin :-|

Ich hab

<div class=mobileunterbinden><a style=position:fixed;top:35%;left:0px;z-index:100; href=http://www.quality-lifestyle.de/kontakt/><img src=http://www.quality-lifestyle.de/wp-content/uploads/2015/08/Vorgespraech2.png></a></div>

und

@media screen and (max-width: 2200px) and (min-width: 801px) {
  #mobileunterbinden {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}

aber es funktioniert nicht....

Funktioniert nicht

<a style=position:fixed;top:35%;left:0px;z-index:100; media=all
@media (max-width: 2200px) and (min-width: 801px); href=http://www.quality-lifestyle.de/kontakt/><img src=http://www.quality-lifestyle.de/wp-content/uploads/2015/08/Vorgespraech2.png></a>

Warum ist das eigentlich so wichtig, dass es auf mobilen Endgeräten ausgeblendet wird?

Hallo Bapo, danke für deine Antwort, aber das trifft es leider nicht ganz. Was ich meine ist folgendes.

Die Drei Bereiche in http://www.quality-lifestyle.de/#Angebot wurden mit Wordpress / BeTheme erstellt und zwar indem ich auf der Seite "Start" drei nebeneinanderliegende "Icon Boxes" eingefügt habe, bei welchen ich jeweils das Bild wählen konnte und den Text dazu schreiben konnte.

Dieser blaue Strich, der bei einem Mouseover über das Bild zwischen Bild und Text angezeigt wird, ist automatisch da drin und scheint von der Icon Box selbst generiert zu werden. Bei den Farbeinstellungen habe ich scheinbar global alles auf meinen Blauton gesetzt.

Was ich nun aber brauche ist, dass genau dieser Strich im Bereich Food & Fitness grün ist und im Bereich Attraction rot. DAher habe ich gedacht, muss man evtl. eigene Icon Boxen definieren mit diesen eigenschafte.

ODer wie manipuliere ich nur die Farbe dieser besonderen Icon Boxes?

[COLOR=#333333]display:scroll hab ich rausgenommen,
mit einem [/COLOR][COLOR=#333333]z-index von 100 funktioniert es,
das mit Media query ist mir nicht klar, wie ich Mobile geräte ausschliessen kann. Müsste ja irgendwie in diese richtung gehen

if mobile then [/COLOR][COLOR=#0000C0][FONT=Bitstream Vera Sans Mono]display:none;[/FONT][/COLOR][COLOR=#333333]

Würde auch gerne darüber hinaus dass wenn man mit dem Mousezeiger drüber geht das breiter wird wie die Social Icons auf der rechten Seite, auch hier komm ich nicht weiter ;-(
(siehe http://www.quality-lifestyle.de)[/COLOR]

Nach nur vier Stunden Plugins installieren und mit Menüs und Widgets spielen, habe ich es hinbekommen! :-P

Die Lösung war recht simple, hab einfach folgenden Code in einen bereits existierende Footer als Text eingebaut:

<a style=display:scroll;position:fixed;top:35%;left:0px; href=http://www.quality-lifestyle.de/kontakt/><img src=http://www.quality-lifestyle.de/wp-content/uploads/2015/08/Vorgespraech1.png></a>

Das einzige Problem ist nur, dass auf der Startseide dieser Floating-Image vom Revolution Slider überdeckt wird (siehe http://www.quality-lifestyle.de), was doof ist, ich hätte gerne das Floating Image darüber, sprich von Anfang an sichtbar!

Vorschläge? :confused:

Also wenn ich 900px durch 150% ersetze, wird wieder auf den Bauch gezoomt. Hab irgendwie angenommen das gibt die vertikale Position an oder so. Bei 900px ist es richtig, auch wenn ich das Fenster verkleinert hab, wird dennoch ins Gesicht gezoomt? :confused:

YES SIR! So wirds gemacht! Tausend Dank! :razz:

Habs eingefügt, nun verhält es sich wieder so wie vor Einfügen des Codes: Bei allen Bildern auf der gesamten Internetseite passiert nichts (was gewollt ist) und bei Team zoomz bei einem Mouseover wieder leicht auf den Bacuh (Das ist vermutlich im Item "Our Team" so eingestellt)... :cry:

Noch eine kleine Anmerkung: Das mit dem Zoom bei den Bilden im Team bereich funktioniert wie gewünscht, nur leider passiert diese Zoom funktion bei allen Bildern, die ich auf der Internetseite benutzt WIe bekomme ich es hin, dass der Zoom genau bei diesen zwei Bildern im Team Bereich passiert, sonst aber nicht?

Viele Grüße!

Hat funktioniert! Tausend Dank Bapo!!!

Funktioniert wunderprächtig! Vielen Dank euch Zweien!

Hallo Presskopp das funktionert! Schhon mal vielen Dank!

Will es nur andersherum haben, also das das Bild im Ganzkörper Modus startet und bei nem Mouseover ins Gesicht zoomt. Aktuelle startet es mit den Gesichtern und zoomt bei einem Mouseover raus.

Hallo Zusammen,

aktuell ist es bei meinem Footer so, dass die eingebundenen Menüs eine leicht unterscheidliche Frabe haben als der Hintergrund des Footers, was komische Kästchen um die Links erzeugt (Siehe http://www.quality-lifestyle.de/ und dann ganz runter scrollen).

Mir ist nicht klar, wie ich das beheben kann, ohne das Hauptmenü oben zu zerschießen. Bei Farben unter BeTheme Options ist überall der gleiche Farbcode angegeben.

Vielen Dank und freundliche Grüße!

FAlls es weiterhilft, meine aktuelle css

h2 { font-weight: 900; letter-spacing: 5px; }
h3 { font-weight: 900; letter-spacing: 5px; }
h4 { font-weight: 400; letter-spacing: 5px; }




/* Zoom Bilder*/
.if-overlay .image_frame:hover .image_wrapper img, .if-overlay .image_frame.hover .image_wrapper img {
    top: 70px !important;
}




p, .icon_box .desc_wrapper .desc { font-style: italic; }




#Top_bar .menu > li > a span:not(.description) { border-right-width: 0; letter-spacing: 2px; }




@media only screen and (min-width: 768px) {
	.header-split #Top_bar:not(.is-sticky) {
		background-color: rgba(255,255,255,10);
		position: absolute;
		border-bottom: 1px solid rgba(255,255,255,0.2);
		top: 0;
                text-decoration: underline;
	}
}




#Top_bar.is-sticky { height: 100px; }
#Top_bar.is-sticky .menu > li > a, #Top_bar.is-sticky .menu > li > a span { line-height: 60px; }
#Top_bar.is-sticky #logo { padding: 12px 0; }
#Top_bar.is-sticky #logo img { max-height: 60px; }




#Top_bar .menu > li a:after {
    top: auto;
    bottom: 0px;
}








/* Subheader */
#Subheader { padding: 30px 0 0; text-align: center; line-height: 0; }
#Subheader:after { display: none; }
#Subheader .title { display: inline-block; background: #fff; float: none; width: auto !important; padding: 20px 30px; font-weight: 700; letter-spacing: 3px; }




/* HR blau*/
.massage_hr { display: block; margin-bottom: 30px; margin-top: 10px; width: 90px; height: 2px; background: #004CA0; clear: both; margin: auto;}
.massage_hr_right { margin: auto; }








/* HR gruen*/
.massage_hr_g { display: block; margin-bottom: 30px; margin-top: 10px; width: 90px; height: 2px; background: #476702; clear: both; margin: auto;}
.massage_hr_right_g { margin: auto; }








/* HR rot*/
.massage_hr_r { display: block; margin-bottom: 30px; margin-top: 10px; width: 90px; height: 2px; background: #94000e; clear: both; margin: auto;}
.massage_hr_right_r { margin: auto; }




/* Icon box */
.icon_box .desc_wrapper .desc { padding: 0 7%; color: #a1a1a1 !important; }








/* Column box */
.column .desc_wrapper .desc { padding: 0 7%; color: #a1a1a1 !important; }








/* Button */
a.button { border-radius: 0; background-image: none; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
a.button .button_label { font-weight: 700; letter-spacing: 2px; }




.button-margin-0 { line-height: 0; }
.button-margin-0 a.button { margin: 0; }




/* Read more */
a.read_more { background: url("http://www.quality-lifestyle.de/wp-content/uploads/2015/05/home_massage_arrow_right.png") no-repeat scroll right 2px rgba(0, 0, 0, 0); font-family: Lato; font-weight: 900; letter-spacing: 2px; padding-right: 45px; }
a:hover.read_more { text-decoration: none; }




/* Article box */
.article_box .photo_wrapper { width: 43%;  }
.article_box .desc_wrapper { width: 57%; background-color: #f8f7f5; padding: 13px 15px; }
.article_box .desc_wrapper p { border: 0; font-size: 12px; }
.article_box .desc_wrapper p:after { content: ""; display: block; width: 90px; height: 2px; background: #b19c73; margin-top: 10px; }
.article_box .desc_wrapper h4 { font-size: 18px; line-height: 25px; font-weight: 900; letter-spacing: 3px; }
.article_box .desc_wrapper i.icon-right-open { font-size: 20px; left: -10px; }




/* Pricing box */
.pricing-box .plan-header h2 { font-weight: 300; }
.pricing-box .plan-inside { padding: 30px; }




/* Footer */
#Footer .widgets_wrapper { padding: 10px 0 10px; }
.entry a, .entry a:link {
    font-weight: bold;
    padding: 0;
    text-align:center;
    text-decoration: none;
    background-color:
}




/* Individuelle Menüs */
.menu li { 
text-align:center; 
 text-decoration: none;
}




.side-by-side { float: left; margin-right: 5px }




h8 { color: #94000e;}
h9 { color: #476702;)
h10 { color: #ffffff;)

Schon mal vielen Dank. Das Bewirkt dass das Bild etwas nach unten rutsch (auch wenn es nun etwas ruckelig wirkt).

Kann man auch umstellen dass noch weiter reingezoomt wird, d.h. das Gesicht noch größer wird?

(Und falls man irgendwass einstellen kann das er stufenloser zoomt (smoother, ohne Ruckeln) wäre das auch klasse :P )

http://www.quality-lifestyle.de/team/

Bin gespannt :)