zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Grafikpositionierung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.09.2010, 15:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.09.2010
Beiträge: 10
escapet befindet sich auf einem aufstrebenden Ast
Standard Grafikpositionierung

Hej Leute

Ich habe auf meiner Seite eine Grafik (sticky / Premium) eingebunden, welche nur angezeigt wird, wenn eine Anzeige als Premium markiert wurde.
Nun ist das Problem, dass durch die position:relative; immer gezwungenermassen ein Abstand (der Platzhalter der Grafik) oberhalb angezeigt wird.
Wenn ich die Positionierung mit absloute angebe, erhalte ich nicht das gewünschte Ergebnis. Denn die Anzeige ist ja nicht immer am gleichen Ort.

Wer kann mir helfen, so dass dieser "Leerschlag, Absagt ,Platzhalter) verschwindet.

Hier der Link zur Seite

CSS:
Code:
/* Premium Sticky */
.sticky {
	display:block;
	width:60px;
	height:60px;
	top:56px;
	left:-4px;
	position:relative;
	z-index:9999;
	background: url(/images/sticky.png) no-repeat 0 0;
}
PHP:
PHP-Code:
<!-- Premium Banderole -->
<?php if (is_sticky()) {?> 
<span class="sticky"></span>
<?php ?>
Vielen Dank für euren Support...
__________________
Etwas verkaufen - suchen oder einfach stöbern?
http://www.inseratissimo.ch
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.09.2010, 16:02
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Am einfachsten wäre: .whiteblock bekommt pos. rel., .sticky wird Nachfahre von .whiteblock und wird per pos. abs. in dessen linke obere Ecke gestellt.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.09.2010, 16:06
Benutzerbild von nevermind
Trollflüsterer
XHTMLforum-Kenner
 
Registriert seit: 29.08.2005
Ort: Bietigheim-Bissingen
Beiträge: 2.215
nevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblick
Standard

Im Firefox funktioniert auch "float: left;" und "top: -3px;" für span.sticky.
__________________
Gruß Roman // ngkreativ.de - Webdesign & Motorradumbau
Mit Zitat antworten
  #4 (permalink)  
Alt 05.09.2010, 16:14
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Nicht wirklich - schau damit mal weiter bis unten (in den Boxen gibt es weitere Floats, die dann mit .sticky kollidieren.)
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #5 (permalink)  
Alt 05.09.2010, 16:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.09.2010
Beiträge: 10
escapet befindet sich auf einem aufstrebenden Ast
Standard

Heiko, du bist mein Held.
Danke vielmals... seit 3 Tagen wurschtle ich da rum und nun ist es genau so wie ich es haben will!

da habe ich noch eine letzte Frage, die ich nicht so hinbekomme wie ich will.

Ich möchte dem sticky nun einen anderen Background- und Hovereffeckt geben.

zur Zeit sind diese zwei css im Einsatz:
Code:
/* content */
.content{ margin:0; padding:0; background:url(images/content_topbg.gif) repeat-x top; border-top:2px solid #efefef;}
.content_botbg { margin:0; padding:0; background:url(images/content_botbg.gif) repeat-x bottom; background-color:#EFEFEF; border-bottom:2px solid #efefef; min-height: 600px;}
.content_res { margin:0 auto; padding:28px 0 32px 0; width:940px;}
.content_res .content_left { margin:0; padding:0 8px 0 0; float:left; width:590px;}
.content_res .content_right { margin:0; padding:0; float:left; width:340px;}
.content_res .shadowblockdir { height:130px; padding:8px 15px 5px; background:#fff url(images/block_topbg.gif) repeat-x top; border:1px solid #fff;}
.content_res .priceblockbig p.descr { margin:0; padding:6px 0;}
.content_res .priceblockbig p.location { margin:0; padding:0;}
.content_res .priceblockbig { float:right; width:400px;}
.content_res .priceblockbig h3 { margin:0; padding:0; float:left; font:bold 15px/1.2em Arial, Helvetica, sans-serif; color:#4f4f4f; text-decoration: none; }
.content_res .priceblockbig h3 a, .content_right a { text-decoration: none; }
.content_res .priceblockbig h3 a:hover, .content_right a:hover { text-decoration: underline; }
.content_res .priceblocksmall h3 { margin:0; padding:0; float:left; font:bold 13px/1.2em Arial, Helvetica, sans-serif; color:#4f4f4f;}
.content_res .priceblocksmall p.owner { margin:0; padding:0; font:normal 11px/1.5em Arial, Helvetica, sans-serif;}
.content_res .stepsline { margin:0; padding:8px 0 24px 0;}
.content_res .stepsline p { margin:0; padding:6px 12px; font:bold 16px/1.2em Arial, Helvetica, sans-serif; color:#fff;}
.content_res .stepsline div.number_out { margin:0; padding:0; float:left; border:1px solid #bbb;}
.content_res .stepsline div.number_in { margin:0; padding:0; background:#dbdbdb; border-top:1px solid #efefef;}
.content_res .stepsline div.line_out { margin:12px 0; padding:1px; float:left; background:#fff; border-top:1px solid #bbbbbb; border-bottom:1px solid #bbbbbb;}
.content_res .stepsline .borderleft { border-left:1px solid #bbb;}
.content_res .stepsline .borderright { border-right:1px solid #bbb;}
.content_res .stepsline div.line_in { margin:0; padding:0; width:201px; height:5px; line-height:0px; font-size:0px; background:#ededed;}
.content_res .whiteblock { 	position:relative; margin:0 0 4px 0; padding:8px; background:#fff; border:1px solid #bbb;}
.content_res .whiteblock .pages { margin:0; padding:0;}
.content_res .whiteblock .pages span { display:block; margin:0 2px 0 0; padding:6px 12px; float:left; background:#ededed;}
.content_res .whiteblock .pages a { display:block; margin:0 2px 0 0; padding:6px 12px; float:left; color:#4f4f4f; text-decoration:none; background:#ededed;}
.content_res .whiteblock .pages a.last { margin:0; font-size:18px;}
.content_res .whiteblock .pages a:hover { text-decoration:underline;}
.content_res h2.colour_top { margin:0; padding:8px 0 0 0; font:normal 16px/1.2em Georgia, "Times New Roman", Times, serif; color:#202020;}
.content_res img.buttonregisterfree { margin:16px 0 0 0; border:none;}
.content_res img.ad320 { margin:0 0 16px 0;}
.content_res img.ad125l { display:block; margin:0 16px 0 20px !important; margin:0 16px 0 14px; float:left;}
.content_res img.ad125r { display:block; margin:0; float:left;}
.content_res .shadowblock_out { position:relative; margin:0 0 20px 0; border:1px solid #bbb; /* overflow:hidden; */}
.content_res .shadowblock { padding:8px 15px 15px; background:#fff url(images/block_topbg.gif) repeat-x top; border:1px solid #fff;}
.content_res div.bigright { float:right; width:290px; margin-top:-10px;}
.content_res div.bigleft { float:left; padding:5px; margin-top:5px; width:236px; background:none repeat scroll 0 0 #FFFFFF; border-color:#DEDEDE; border-style:solid;border-width:1px;}
.content_res .mapblock { margin:0; padding:0; overflow: hidden;}
.content_res .mapblock p.gmap-title { color:#4F4F4F; font-family:Arial,Helvetica,sans-serif; font-size:13px; font-weight:bold; line-height:1.2em; }
.content_res .attachment-medium, .content_res .attachment-thumbnail { margin:0 12px 0 0; float:left;}
.content_res img.attachment-medium, .content_res img.attachment-thumbnail { padding:1px; border:1px solid #a6a6a6;}
und

Code:
/* content */
.content_res .priceblockbig p.price { margin:0; padding:0; float:right; font:bold 18px/1.2em Arial, Helvetica, sans-serif; color:#679325;}
.content_res .priceblockbig p.location span { font-weight:bold; color:#679325;}
.content_res .priceblocksmall p.price { margin:0; padding:0; float:right; font:bold 13px/1.2em Arial, Helvetica, sans-serif; color:#679325;}
.content_res .stepsline div.l_ready { background:#679325;}
.content_res .stepsline div.no_ready { border:1px solid #416111;}
.content_res .stepsline div.ni_ready { background:#679325; border-top:1px solid #9dbd6d;}
.content_left p.bigprice { color:#679325; float:right; font-size:18px; font-weight:bold; line-height:1.2em; margin:0; padding:8px 0 0; }
.content_res .can_chg_bg:hover { background-color: #e3f1df; }
__________________
Etwas verkaufen - suchen oder einfach stöbern?
http://www.inseratissimo.ch
Mit Zitat antworten
  #6 (permalink)  
Alt 05.09.2010, 16:40
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Per .sticky:hover kannst Du die gewünschte background-Deklaration anwenden (der IE < 7 kann das nicht - er bräuchte dafür noch einen Link).

Übrigens sollte .whiteblock (als nunmehr Containing Block) noch hasLayout im IE < 8 bekommen, am einfachsten per zoom: 1; im IE-CSS.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #7 (permalink)  
Alt 05.09.2010, 16:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.09.2010
Beiträge: 10
escapet befindet sich auf einem aufstrebenden Ast
Standard

sorry, diesmal habe ich es nicht verstanden.

wenn ich es per .sticky:hover einbinde, ist die Sticky-Grafik mit hover unterlegt. Ich möchte jedoch dass es anstelle von den Standarteinträge (weiss und hover grün) Hintergrund blau und hover gelb wird.


und wie bzw. wo muss ich das hasLayout zoom: 1 einbinden?

Danke für deine Geduld!
__________________
Etwas verkaufen - suchen oder einfach stöbern?
http://www.inseratissimo.ch
Mit Zitat antworten
  #8 (permalink)  
Alt 05.09.2010, 16:57
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Ich finde keine Regel .sticky:hover im CSS, kann also auch das Problem nicht nachvollziehen.

Zitat:
Zitat von escapet Beitrag anzeigen
wie bzw. wo muss ich das hasLayout zoom: 1 einbinden?
Am besten in ein separates IE-CSS, Suchwort Conditional Comments (einer reicht, und diesen dann mit lt IE 8 versehen).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #9 (permalink)  
Alt 05.09.2010, 17:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.09.2010
Beiträge: 10
escapet befindet sich auf einem aufstrebenden Ast
Standard

naja, ich kriegs nicht hin:

habe dies eingefügt:
Code:
.whiteblock .can_chg_bg .sticky { background-color: #FFFFE0;border: 1px solid #E6DB55;;position:relative;}
.whiteblock .can_chg_bg .sticky:hover { background-color: #fff0cc; }
und das div um sticky erweiter:
Code:
<div class="whiteblock can_chg_bg sticky">
__________________
Etwas verkaufen - suchen oder einfach stöbern?
http://www.inseratissimo.ch
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 05.09.2010, 17:33
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Das spricht .sticky eh gar nicht an, da .whiteblock .can_chg_bg bedeutet, dass .can_chg_bg Nachfahre von .whiteblock ist (ohne Leerzeichen dagegen passt es, allerdings inkl. Bug im IE < 7).

Aber da Deine allg. Regel bisher auch einfach nur .sticky lautete, muss der Selektor doch gar nicht so kompliziert sein.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
absolute, abstand, css, relative

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 08:44 Uhr.