Wie bekomme ich die Grafik tiefer, ohne das Layout zu zerschießen?

[Uwe2008]

Hallo, würde mal bitte jemand einen Blick auf diese Seite werfen:
http://www.pixelmoker.de/2008
Es geht um die Lupe! Ich versuche schon seit mehreren Tagen sie tiefer zu setzen. Genauer gesagt: ich möchte, dass sie neben dem Suchenfeld sitzt.

Wenn ich diesen Eintrag:

#logo {
    width:  258px;
    height:  71px;
    background: url(../images/logo.jpg) 0 0 no-repeat;
    margin-top: 20px;
}


in der template_css.css lösche und in der index.php folgendes eintrage:



/templates/rt_novus_mod_uh/images/lupe.gif" width="100" height="75" alt="Lupe"/>



habe ich die Lupe zwar da, wo sie hin soll, aber wenn ich die Seite auf einen kleineren Monitor betrachte, ist sie nach links verschoben.
Ich habe schon so lange Bücher gewälzt (CSS-Praxisbuch & Webseiten mit PHP), dass ich mittlerweile gar nichts mehr raffe. Alle anderen Probleme, wie Flash im Header, Flashfilm im Content, ect konnte ich lösen, aber hier an scheitere ich.
Wäre nett, wenn ihr mir noch einmal helfen könntet.
Gruß,
Uwe

Ach ja, das Template heißt "rt_novus"

[dietmarh]

Die Technik ist an sich simpel, aber du hebelst an der falschen Ecke.

Als erstes brauchst du einen Container, dessen linke obere Ecke sich in Relation zur gewünschten Position nicht verschiebt. Im Moment ist das für dich der body, und der verschiebt sich nun mal gegenüber dem Suchfeld.

Bei dir bietet sich dafür das an. Dem gibst du im CSS ein position:relative; Damit wird es zum Bezugspunkt für ein position:absolute; eines Elements innerhalb dieses Containers.

Als nächstes mußt du das verschieben, damit das position:relative; auch greifen kann. Dann setzt du im CSS für #logo {position:absolute; top: 10px; left: 100px;}. top und left, Breite und Höhe mußt du noch für das Bild anpassen. Das margin kann ganz raus, das ist bei absoluter Positionierung eher sinnlos.

[Uwe2008]

Danke, dietmarh!
deine Anregung werde ich sofort ausprobieren.
Gruß!

[Uwe2008]

Tja, leider klappt es nicht. Irgendetwas mache ich falsch. Hier mal die Änderungen, die ich durchgeführt habe:

template_css.css:

#sidecol {
        position: relativ;
    float: left;
}
-------------------------------------------------------------
#logo {
        position: absolute;
z-index:2;
        top: 20px;
        left: 40px;
    width:  100px;
    height:  75px;

}



index.php



 
   


   
/templates/rt_novus_mod_uh/images/lupe.gif" alt="Lupe">

     
       
         
           
           
           
           
         
       
     
   


Vielleicht kannst du mal einen Blick auf den Code werfen und mir sagen, wo der Fehler liegt. Im Moment erscheint die Lupe immer ganz links, auf Höhe des Homebuttons. Gruß und Danke für die Hilfe!!!!!

[dietmarh]

Hast du mit den Werten von top und left rumgespielt? Die Zahlen sind einfach x-beliebige Werte, damit was drinsteht. Die müssen natürlich angepaßt werden. Steht oben jedenfalls.

[Uwe2008]

So, ich habe noch mal alles ausprobiert! Die Lupe erscheint nun zwar da, wo sie soll, aber sobald ich die Auflösung des Monitors ändere, verschiebt sie sich. Irgendwie holt sie sich immer noch nicht den Bezugspunkt, bzw. die Koordinaten von sidecol! Hast jemand eine Idee, was ich immer noch falsch mache? Der Code ein paar Threeds ist immer noch aktuell.
Gruß!

[dietmarh]

Die Lupe liegt nach wie vor im falschen Container. Von da kann man sie nicht absolut positionieren, weil sie dann hinter dem Hintergund verschwindet.

[Uwe2008]

Die Lupe liegt nach wie vor im falschen Container. Von da kann man sie nicht absolut positionieren, weil sie dann hinter dem Hintergund verschwindet.

Ja aber ich habe den Aufruf der Grafik doch direkt nach dem sidecol-Container gesetzt.
 
   
  /templates/rt_novus_mod_uh/images/lupe.gif" alt="Lupe">
Dann sollte die Lupengrafik doch eigentlich in diesem Container liegen, oder? Mann, ich verzweifele noch. Als ich Actionscript gelernt habe, kam mir das bedeutend einfacher vor!!!! Schön, dass du mir hilfst!!!!!!
Gruß, Uwe
PS.: Ich habe mir noch ein paar Bücher zu diesem Thema bestellt. Kennst du vielleicht noch ein Joomlabuch, in dem nicht nur beschrieben wird, wie man es installiert?

[dietmarh]

Im Quelltext deiner Seite sehe ich nach wie vor

Code: Select all

		<div id="inset">
			<div class="wrapper">
				<a href="http://pixelmoker.de/2008" class="nounder"><img src="http://pixelmoker.de/2008/templates/rt_novus/images/blank.gif" style="border:0;" alt="" id="logo" /></a>
				<div class="content">

und

Code: Select all

								<div id="sidecol">
						<div id="side-column">
							<div class="padding">
								<div class="inner">
																				<div class="moduletable">
			
<form action="index.php?option=com_search" method="get">

Bei der Anordnung kann es nicht klappen.

[Uwe2008]

So, nach vielen weiteren Versuchen klappt es jetzt endlich!!!!  Hier für andere, die das gleiche Problem haben, die Lösung:

index.php:

 
     
       
         
           
            /templates/getTemplate(); ?>/images/lupe.gif" alt="Lupe"  id="lupe" />




template_css.css:
#lupe {
  z-index:5;
      position: absolute;
  top: -5px;
  left: 140px;
  width: 100px;
  height: 75px;
}


Gruß und Danke nochmals an dietmarh für die umfangreiche Hilfe!!!! (PS.: Ich hatte die Änderungen auf meinem heimischen Rechner und nicht online durchgeführt, deshalb sahst du nichts davon)

[dietmarh]

Gruß und Danke nochmals an dietmarh für die umfangreiche Hilfe!!!! (PS.: Ich hatte die Änderungen auf meinem heimischen Rechner und nicht online durchgeführt, deshalb sahst du nichts davon)

Das bringt nicht wirklich viel, wie du siehst. Wenn ein Helfer nicht sieht, was du falsch machst, kann er auch keine Hilfe zur Korrektur geben.

[Uwe2008]

Hallo dietmarh,

Das bringt nicht wirklich viel, wie du siehst. Wenn ein Helfer nicht sieht, was du falsch machst, kann er auch keine Hilfe zur Korrektur geben.

Du hast Recht! Sorry! Mein Fehler. Jetzt stehen die Änderungen aber online:
http://www.pixelmoker.de/2008/index.php
Schau sie dir doch bitte noch einmal an. Die Grafik ist jetzt dort, wo sie sein soll ... zumindest im Firefox. Beim IE verschiebt sie sich leicht nach oben. Das stört mich nicht wirklich, aber ich würde trotzdem gerne wissen, warum das so ist. Nur um es beim nächsten Mal besser machen zu können. Hast du eine Idee, warum der IE die Position verändert?
Gruß,
Uwe

[dietmarh]

Die Lupe sitzt auch im IE an der richtigen Stelle. Aber der meint, aus irgendeinem Grund, oberhalb von nicht vorhandenenText darstellen zu müssen und schiebt das Div um eine Zeilenhöhe nach unten. Wo er einen Grund dafür sieht, weiß vermutlich nicht mal MS.

Versuch, hinter dem img alle Leerzeichen und Umbrüche verschwinden zu lassen, also die nächste Ausgabe direkt hinter das img-Tag zu klatschen. Wenn er meint, er müsse diese Zeile wegen des img-Tags ausgeben, kannst du das Bild in dem Div nur ganz ans Ende schieben. An der Position sollte sich dadurch nichts ändern, aber dann macht die IE die Leerzeile unten.

Letzte verzweifelte Möglichkeit: Setz font-size und line-height für auf 0px. Dann mußt du sie für .moduletable wieder auf die korrekten Werte setzen.

Oder du pfeifst auf die ganze Trickserei für kaputte Browser und sagst dir, daß sich die Besucher den Schrotthaufen selbst ausgesucht haben und gerne kaputte Seiten sehen... Wenn du sie jedesmal extra für sie zurechtfummelst, treten sie den alten Schrott nie in die Tonne.

[Uwe2008]

Oder du pfeifst auf die ganze Trickserei für kaputte Browser und sagst dir, daß sich die Besucher den Schrotthaufen selbst ausgesucht haben und gerne kaputte Seiten sehen... Wenn du sie jedesmal extra für sie zurechtfummelst, treten sie den alten Schrott nie in die Tonne.

Ja, genau! Das mache ich.
Gruß,
Uwe

[hello]

Das  Suchsymbol mit der Lupe sieht zwar ganz schön aus. Die Probleme mit den unterschiedlichen Interpredationen von Opera, Firefox und IE 6.0 und 7.0 sind hinlänglich bekannt. Es gibt in diversen Templates Anpassungen hierfür. Doch meine Meinung ist , daß dieses Symbol vollkommen überflüssig ist. Im Gegenteil ! Die User fühlen sich vera.. von der pelzernen Pelzkappe. Was sollen Sie auch suchen ? Für so dumm sollten man auch Frisbees nicht halten.

Oder du pfeifst auf die ganze Trickserei für kaputte Browser und sagst dir, daß sich die Besucher den Schrotthaufen selbst ausgesucht haben und gerne kaputte Seiten sehen... Wenn du sie jedesmal extra für sie zurechtfummelst, treten sie den alten Schrott nie in die Tonne.

Diese Meinung ist ein Witz! Jeder hat das Recht seinen Browser zu verwenden! Jeder Browser hat Vorteile UND Nachteile! Der Templateprogger hat sich danach zu richten  .... und wenn er es nicht kann ist er eine Pfeiffe und soll sich hinsetzten und CSS und Templatesdesign mal lernen, wie alle anderen auch.

[dietmarh]

Diese Meinung ist ein Witz!

Wenn du das meinst...

Jeder hat das Recht seinen Browser zu verwenden!

Natürlich. Ich streite niemandem das Recht auf die freie Wahl des Browsers ab, genau so wenig wie die Einstellungen, die er macht. Der Benutzer hat die freie Entscheidung, wie die Seite bei ihm aussieht oder sich anhört. Wer mit Lynx ankommt, soll alle Inhalte sehen und komplett navigieren können, genau wie ein Blinder mit einem Screen Reader. Bestimmte Sachen gehen nur mit dem entsprechenden Browser und den nötigen Plugins. Wer die nutzen will, muß die Seite mit dem entsprechenden Browser und den nötigen Plugins besuchen, sonst muß er mit den Alternativtexten oder sogar ganz ohne die Information auskommen.

Jeder Browser hat Vorteile UND Nachteile! Der Templateprogger hat sich danach zu richten  ....

Er hat sich nach den bestehenden Standards zu richten und nach sonst gar nichts. Wenn der Besucher einen Browser benutzt, der Standards in einer bestimmten anderen Weise interpretiert, dann ist das der Wunsch des Besuchers und da hat ihm kein Designer reinzupfuschen.

und wenn er es nicht kann ist er eine Pfeiffe

Eine Pfeife (mit zwei F, hier ist nicht die Feuerzangenbowle) ist ein "Webdesigner", der keine Ahnung vom Sinn des Webs hat und glaubt, den Besuchern "sein" Design aufzwingen zu müssen, weil er sich für den tollsten Typen und den Nabel der Welt hält, nach dem sich alle richten müssen, weil er ja schließlich die Weisheit für sich ganz allein gepachtet hat.