Überhängende Grafik bei Buttons - wie kann ich das verhindern?

[Cyberia]

Das Projekt Webseite hat sich erledigt. Da die Person, für die ich die Webseite gebaut habe, sie auf einmal doch nicht mehr wollte, gerade wo so langsam alles passte, naja....sind ja nur paar Monate Arbeit umsonst und viel geärgere für nichts....

 

[Myhar]

AW: Überhängende Grafik bei Buttons - wie kann ich das verhindern?

Man kommt nicht auf deine Seite:

Forbidden

You don't have permission to access / on this server.

 

[Cyberia]

AW: Überhängende Grafik bei Buttons - wie kann ich das verhindern?

Ja, ich merke gerade das ich ein Kacknoob bin. Ich brauche erstmal Hilfe damit.

Ich dachte es wäre einfach Dateien auf Server schieben über FTP aber bei T-Online muss da irgendwas anders sein, müssen die Dateien spezielle Namen haben? Ich weiß nicht wieso das nicht funktioniert.



Ist es so falsch oder dauert es vielleicht nur etwas?

 

[Myhar]

AW: Überhängende Grafik bei Buttons - wie kann ich das verhindern?

Ich mutmaße einfach einmal, dass eine index.html fehlt, welche als Startseite hergenommen wird. Wissen tue ich es aber nicht, da ich mich mit den T-Online Angeboten nicht auskenne.
Gibt man nämlich ein, funktioniert das ganze.

L. G.

 

[Cyberia]

AW: Überhängende Grafik bei Buttons - wie kann ich das verhindern?

Da hast du wahrscheinlich recht. Nun wie erstelle ich eine index Datei, was muss da genau drin stehen?

Oder einfach erste Seite auf index.html umnennen? Ich probiere es mal aus.

 

[Myhar]

AW: Überhängende Grafik bei Buttons - wie kann ich das verhindern?

Ja jetzt funktioniert es (dafür ist mein oben geposteter Link nicht mehr funktionsfähig) Und alle Links auf die Startseite müssen ebenso abgeändert werden. ;-)

Zu deinem eigentlichen Problem:
Dein Problem ist, dass dein Bereich für das Bild größer ist als das Bild selber. Du könntest (schlechte Variante) in deinem CSS File definieren, dass sich das Bild nicht wiederholt:

#navigation1 a {background:url(gleiche-Url-wie-gehabt.png) [I]no-repeat left top[/I]}

Dadurch bleibt aber die eigentliche Größe der Links erhalten.
Man kann natürlich auch dem Link eine fixe, der Grafik entsprechende, Größe geben. Dann wäre das ganze aber nicht mehr skalierbar.
Möglichkeit 3 wäre, das ganze mit CSS3 und box-shadow zu lösen:

#navigation1 a {box-shadow:0 0 4px #000}

Methode 3 verstehen aktuelle Browser alle, IE6-8 könnte dabei Probleme machen, aber diese Browser würden dann entweder keinen Schatten sehen oder man rüstet für diese Browser die

Bitte kostenlos registrieren, damit du die Links siehst.

.
Edit: Ich sehe, du verwendest bereits border-radius in deinem CSS, dann würde ich erst recht zum Einsatz von box-shadow raten.
Werte/Farben sind natürlich nur erste Beispiele und können/sollen/dürfen/müssen angepasst werden.

L. G.

 

[ans316]

AW: Überhängende Grafik bei Buttons - wie kann ich das verhindern?

vielleicht solltest du mal das button.png dem listen-element als hintergrund zuweisen und nicht dem anker-element.

 

[Cyberia]

AW: Überhängende Grafik bei Buttons - wie kann ich das verhindern?

Dein Problem ist, dass dein Bereich für das Bild größer ist als das Bild selber. Du könntest (schlechte Variante) in deinem CSS File definieren, dass sich das Bild nicht wiederholt:

Das ist eben nicht so. Das Bild ist genau auf die Größe angepasst.

#navigation1 li 
{
position:relative;
bottom:130px;
list-style-type:none;
width:200px;
height:40px;
}

Und das Bild hat genau eine Länge von 200px und eine Höhe von 40px. Oder bin ich jetzt total blöde? ^^ Eigentlich wollte ich nämlich genau das Bild anpassen an die benötigte Größe, also wenn nötig ändere ich einfach das.

Leider klappen die Lösungen auch nicht, ich kann wenn du willst mal eine davon hoch laden, aber es passiert alles nur nicht das was passieren sollte.

Ich lade mal als Beispiel Möglichkeit 3 hoch.

 

[ans316]

AW: Überhängende Grafik bei Buttons - wie kann ich das verhindern?

hast du dir deine seite schon mal in ie 6 oder ie 7 angeschaut.

vielleicht solltest du für das layout besser mit float arbeiten.

 

[Cyberia]

AW: Überhängende Grafik bei Buttons - wie kann ich das verhindern?

vielleicht solltest du mal das button.png dem listen-element als hintergrund zuweisen und nicht dem anker-element.

Habe ich nun gemacht, scheint aber nichts zu ändern? Achso doch das hatte ich ja extra geändert wegen den Untermenüs, damit das Bild nicht zu weit links hängt.

Wie soll ich das denn umsetzten für IE bräuchte da direkt ein genaues Beispiel was ich wie abändern soll.

Und nein habe mir das nicht im IE alte Versionen angesehen. Habe keine alten IE installiert.

 

[Myhar]

AW: Überhängende Grafik bei Buttons - wie kann ich das verhindern?

Das ist eben nicht so. Das Bild ist genau auf die Größe angepasst.

#navigation1 li 
{
position:relative;
bottom:130px;
list-style-type:none;
width:200px;
height:40px;
}

Das stimmt nur bedingt ;-)
Du weist die Grafik ja auch dem a Tag zu, und der hat zusätzlich noch ein padding. Deshalb ist das ganze auch verschoben.
Setze einmal im Firebug (oder einem anderen Webentwicklertool) die paddings für das a zurück, dann schaut das ganze schon etwas besser aus.
Wenn du für die li und die a Tags die selbe Breite + Höhe angibst und die a-Tags dann verschiebst, dann kann doch nur etwas unpassendes dabei rauskommen
Gib für die li die Höhe+Breite weg und mach die a Tags so groß wie du sie brauchst. Dann passen sich die li von selber an.

Ich lade mal als Beispiel Möglichkeit 3 hoch.

Da ist aber die Grafik noch eingebunden für die li Tags. Das überlagert sich dann natürlich.

L. G.

 

[Cyberia]

AW: Überhängende Grafik bei Buttons - wie kann ich das verhindern?

Dumme Frage, ich habe Firebug installiert ich weiß aber nicht wie ich das mache, was du mir geschrieben hast. Wie kann ich damit das CSS verändern? Ah habs gefunden.

Aber wie soll ich denn sonst die Schrift mittig bekommen?

Und li passt sich dann von selber an? cool, mal ausprobieren.

Okay habe deine Anweisungen befolgt und schau was passiert ist, das ganze Layout hats zerhauen, warum?

 

[Myhar]

AW: Überhängende Grafik bei Buttons - wie kann ich das verhindern?

Spiele dich mit Firebug herum, dann kommst du auf alles drauf. Am wichtigsten ist dabei, dass du nichts kaputt machen kannst, die Änderungen sind nach einem Neuladen der Seite weg.
Sofern ich dich richtig verstanden habe, solltest du dein gewünschtes Ergebnis nur durch abändern der bestehenden CSS definitionen erreichen können.
Falls du konkrete Hilfe brauchst wird dir natürlich auch geholfen

L. G.

 

[Cyberia]

AW: Überhängende Grafik bei Buttons - wie kann ich das verhindern?

JA ich verstehe nicht wieso sich jetzt das Ding in der Mitte nach unten verschoben hat. Ich habe doch nur was an der Navigation geändert, warum verändert sich das mit?

Ich möchte diese Abhängigkeit raus haben. Und ich verstehe dieses absolute Attribut und dieses relative, was wohl dafür sorgt nicht. Wie kann ich das alternativ machen? Ich möchte den Content Bereich einfach nur mittig haben und die Navigation halt rechts davon, ohne das irgendein Element an einem anderen klebt.

 

[Myhar]

AW: Überhängende Grafik bei Buttons - wie kann ich das verhindern?

Einem Anfänger floating zu erklären ist relativ schwer (Zumindest für mich und das noch über ein Forum hinweg)
Das jemandem persönlich zu erklären funktioniert ja noch, aber in Textform würde das hier den Rahmen sprengen. Vielleicht du eine für dich passende Erklärung (Suchbegriffe natürlich modifizier- und erweiterbar)
Nur wieso hast du die Navigation links platziert, wenn du sie rechts haben willst?
Normalerweise rückt etwas nur nach unten, wenn weiter oben kein Platz mehr für das Element ist. Ein anderes Element ist also zu breit oder ähnliches. (Padding und margin können natürlich auch eine Ursache sein)
Ich sehe jedoch keine Veränderung an deinem hochgeladenem File, deshalb ist es mir schwer zu helfen, da ich nicht weiß, was das Ding in der Mitte ist, obwohl ich mutmaße, dass es sich um das div mit der id Startseite handelt.

L. G.

 

[Cyberia]

AW: Überhängende Grafik bei Buttons - wie kann ich das verhindern?

Ich habe mich bei der Navigation nur verschrieben, ich meinte natürlich links, nichts rechts. ^^

Ja es ist das div mit der id startseite, scheinbar muss ich wieder alle px abstände ändern, ich ändere diese ganzen relatives jetzt auf absolutes, dann verschiebt sich nicht immer alles.

Und floating verstehe ich einigermaßen. ^^ Weiß ich gar nicht wie du darauf kommst.

Was ich ja gerne machen möchte, was aber scheinbar wohl nicht geht, ist dem div für den Content, also Startseite z.B. die Attribute geben das es 50% abstand von links und 50% abstand von rechts sich positioniert.

So das sich dann alles mit skaliert, wenn man das Fenster klein scheibt. Das wäre genial.

Kannst du mir falls das doch geht, vielleicht anhand des Divs Startseite erklären, wie es geht?

 

[Myhar]

AW: Überhängende Grafik bei Buttons - wie kann ich das verhindern?

Alles absolut zu positionieren machen Anfänger recht gerne, ist jedoch nicht wirklich empfehlenswert. Man kann Breiten auch in % angeben, dann muss man nicht alle px Werte ändern. Und wenn man schon alles in px angibt, dann sollte man nur den Hauptcontainern eine Breite geben und die Inhalte in den Containern passen sich dann sowieso den äußeren an.
Auf das Float bin ich gekommen, weil du float nicht wirklich in deinem CSS anwedest (Zumindest nur wenig)
Deine divs mit den ids: startseite und navigation1 brauchen ein float:left, dann werden sie nebeneinander positioniert. Mit padding/margin dann die Außen- und Innenabstände zueinander regeln.
Danach brauchst du natürlich ein Element, welches das float wieder aufhebt (CSS: clear:both.
Dann passt sich das ganze auch der Fenstergröße an (bei absoluten positionierungen kann man das vergessen)

L. G.

 

[Cyberia]

AW: Überhängende Grafik bei Buttons - wie kann ich das verhindern?

Breiten in Prozent sorgen dann dafür das es skalierbar wird?

Und der Befehl CSS: clear:both, wird dann nicht wirklich automatisch auf beide angewendet oder? Müsste ich dann da Clear:startseite,navigation1; schreiben? Irgendwie scheint mir das eh nicht zu funktionierend einen Befehl auf mehrere Sachen durch Komma getrennt an zu wenden...

Und wenn ich float benutze, brauche ich dann zusätzlich noch position: und top: left: usw? Oder ist das schon die Positionierung?

 

[Cyberia]

AW: Überhängende Grafik bei Buttons - wie kann ich das verhindern?

Okay habe es nun versucht, nun nebeneinander sind sie, aber durch irgendwas wird das div Element Startseite nach unten gedrückt?