• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Margin und Padding kann ich nicht.

Status
Für weitere Antworten geschlossen.
M

MichaSG

Neues Mitglied
Ich habe zum erneuten mal Probleme mit diesen ewigen Abständen. Auch margin:0px; und padding:0px; haben mein Problem leider nicht gelöst. Screen von meinem Problem:
problemyj6.png


Code sieht so aus:
Code: 
<ul id="navi">
  <li><img src="img/navi/cat_first.gif" width="171" height="34" border="0"></li>
  <li><a href="index.htm"><img onMouseover=src="img/navi/startseite.gif" onMouseout=src="img/navi/startseite_activ.gif" src="img/navi/startseite_activ.gif" width="171" height="22" border="0" alt="home" </a></li>
</ul>

CSS:
Code: 
#navi {
margin:0px;
padding:0px;
list-style: none;
}

Was kann ich noch versuchen? :S
 
Hi,

die Grafiken als Hintergrundgrafiken einbinden und #navi a display:block; geben.
Damit der Linktext bei deaktivierter Grafik noch sichtbar ist mit der
Gilder-Levine-Methode
arbeiten.

Der IE6 braucht dann aber noch das hier per CC:
Code: 
* html #navi li {
	display: inline;
	}

* html #navi a {
	height: 1px;

Die Liste ist semantisch falsch, das erste ist ja nur ne Grafik ohne a.
 
Danke erstmal dass du mir zu helfen versuchst. Jedoch verstehe ich (wieder einmal) nicht viel mehr als denn Bahnhof. :(

Du meinst also, ich müsse diesen Startseitebutton per CSS einbinden? Also etwa so?
Code: 
#navi {
background:url();
}

Oder wie genau meinst du das? Es geht eigentlich bloss darum, dass denn zwei Bilder ohne Abstand untereinander stehen...
 
Ich möchte doch aber zwei (und später noch weitere) Bilder untereinander anortnen. So kann ich doch bloss ein Bild einbinden. Sorry für meine Dummheit. :)

EDIT/ Wäre es denn vielleicht möglich, dass mir einer den Code aufschreiben könnte, damit die zwei Bilder untereinander dastehen? Sehr nett wäre es, wenn man sie denn auch gleich verlinke könnte. Hab jetzt lange versucht, es jedoch nicht verstanden...
 
Zuletzt bearbeitet:
css:
Code: 
#navi .firstlink {
background-images:url(img/navi/cat_first.gif);
}
html:
Code: 
}
<ul id="navi">
  <li class="firstlink">&nbsp;</li>
  <li>listeneintrag1</li>
  <li>listeneintrag2</li>
</ul>
Für jedes weitere Bild eine neue class="klassenname"
 
Hi,

MichaSG schrieb:
Ich möchte doch aber zwei (und später noch weitere) Bilder untereinander anortnen. So kann ich doch bloss ein Bild einbinden. Sorry für meine Dummheit. :)

EDIT/ Wäre es denn vielleicht möglich, dass mir einer den Code aufschreiben könnte, damit die zwei Bilder untereinander dastehen? Sehr nett wäre es, wenn man sie denn auch gleich verlinke könnte. Hab jetzt lange versucht, es jedoch nicht verstanden...
Zum Vergrößern anklicken....

das heißt wohl das die Linkliste noch länger werden soll.

Dann mußt du jedem li eine id zuordnen, dann kannst du sie mit jeweils anderen Bildern ansprechen.
Code: 
<ul id="navi">
  <li id="navi01"><a href="index.htm">Startseite</a></li>
  <li id="navi02"><a href="sonstiges.htm">Sonstiges</a></li>
  usw.
</ul>
In der CSS dann jedem ein anderes Bild geben:
Code: 
#navi01 {
    background:url(bild1.gif) no-repeat left top;
     }
#navi02  {
    background:url(bild2.gif) no-repeat left top;
     }
usw.
Schieb doch mal den kompletten code/css rüber.

Ach ja, und an Gilder/Levine denken!!

edit: Mist, zu langsam.
 
Klasse, klappt nun. Bloss ein Problem gibt es noch. Und zwar überlagert der untere Button ein Stück des Oberen. Woran kann das liegen?

EDIT/ Wenn wir schon dabei sind (:)): Wie verlinke ich die Buttons dann?
 
Zuletzt bearbeitet:
größen angegeben und überprüft? margin und padding auf 0px?
alternativ kannst du deiner schrift für "line-height" die höhe der bilder zuordnen...

verlinkung hat dir koslowski schon mit hingeschrieben! augen auf!

Code: 
<ul id="navi">
  <li id="navi01"><a href="index.htm">Startseite</a></li>
  <li id="navi02"><a href="sonstiges.htm">Sonstiges</a></li>
  usw.
</ul>
 
Für mich gilt Augen auf - für dich gilt richtig Lesen. ;)
Nicht falsch verstehen bitte...

Ich möchte doch den Button verlinkt haben und keinen neuen Link auf den Button setzen. Also, wenn man den Button anklickt so sollte man zB zur Datei index.htm gelangen. Wie geht das?
 
MichaSG schrieb:
Ich möchte doch den Button verlinkt haben und keinen neuen Link auf den Button setzen.
Zum Vergrößern anklicken....
Dein erster Listeintrag (li) hatte kein Inhalt, außer ein Bild zur Dekoration.
Daher die Idee ein Hintergrundbild zu verwenden.
In den weiteren Listeneinträgen mit Verweisen, gingen wir wohl davon aus, daß die Bilder ebenfalls nur zur Deko dienen und der Verweistext als normaler Text über das Bild gelegt wird.

Wenn du die Bilder selbst verlinken willst, geht das mit background-image nicht.
Dafür kannst du das img-Tag nutzen, wie du es anfangs gemacht hast.
Dabei kommt der Abstand unter dem Bild zustande.
Den kannst du verhindern, in dem du aus dem Bild ein Blockelement machst.
img {display : block}
 
Hi,

Zitat von neuroleptika:
Wenn du die Bilder selbst verlinken willst, geht das mit background-image nicht.
Dafür kannst du das img-Tag nutzen, wie du es anfangs gemacht hast.
Dabei kommt der Abstand unter dem Bild zustande.
Zum Vergrößern anklicken....


[saublödes dazwischenquaken]*räusper*, ähh.., geht leider doch mit Hintergrundgrafiken.
Guckst du hier

Einfach bis "Grafische Menüs" runterscrollen.
[/saublödes dazwischenquaken]

koslowski
 
Da bin ich natürlich nicht drauf gekommen.
Ich bin ja leider kein Zen Garden-Künstler.

Aber der Anchortext wird da auch nur übermalt.
das Prinzip <a href="Ziel">Anchortext<a> bleibt.
 
Zuletzt bearbeitet:
Mahlzeit,

neuroleptika schrieb:
Da bin ich natürlich nicht drauf gekommen.

Aber der Anchortext wird da auch nur übermalt.
das Prinzip <a href="Ziel">Anchortext<a> bleibt.
Zum Vergrößern anklicken....

ja genau, er wird übermalt.
Das hat den Grund weil Sumas weder mit Bildern, Flash noch Scripts etwas anfangen können, sie wollen Text.
Dadurch können sie dem Link auch folgen bzw. indexieren was nicht ginge wäre da nur eine Grafik.

Außerdem schalten Screenreaderbenutzer Grafiken i.d.R. ab und da wäre es dann mit dem Surfen auf der Seite vorbei, wenn da nicht auch noch ein Linktext stehen würde.

Genaue Begründung steht im ersten Absatz von Grafikmenüs meines geposteten Links.

Gruß
koslowski
 
koslowski schrieb:
Mahlzeit,
ja genau, er wird übermalt.
Das hat den Grund weil Sumas weder mit Bildern, Flash noch Scripts etwas anfangen können, sie wollen Text.
Dadurch können sie dem Link auch folgen bzw. indexieren was nicht ginge wäre da nur eine Grafik.
Zum Vergrößern anklicken....
Das stimmt natürlich alles und es gibt auch noch eine ganze Reihe sowas Suma-freundlich zu gestalten. Z.B könnte man Neben dem (img)Bild ein Text schreiben und aus dem Sichtbereich schieben.

Im Normalfall reicht aber sicher auch ein alt-Text.
 
Hi,

neuroleptika schrieb:
Das stimmt natürlich alles und es gibt auch noch eine ganze Reihe sowas Suma-freundlich zu gestalten. Z.B könnte man Neben dem (img)Bild ein Text schreiben und aus dem Sichtbereich schieben.

Im Normalfall reicht aber sicher auch ein alt-Text.
Zum Vergrößern anklicken....

jau, das mit dem alt oder title-text sollte man nutzen.

Mit Text nebem dem Bild und rausschieben wäre ich vorsichtiger, damit könnte man bei Google in Zukunft negativ auffallen.

Das ist auch der Grund warum die meisten Webdesigner die Gilder/Levine-Methode als Image-Replacement-Technik wählen.
Text nur verdecken ist natürlich auch ziemlich elegant.8-)

Es gäbe ja noch andere Techniken wo z.B. mit text-indent der Text rausgeschoben wird, aber viele vermuten das dieses Textrausschieben irgendwann mal negativ im Googlealgorithmus zum Tragen kommt
(seufz, wäre super wenn Google sich mal klar ausdrücken würde und nicht nur nebulöse Andeutungen machen würde.).

Ausnahmen sind natürlich Skiplinks aber diese sind ja als solche gekennzeichnet, sodaß Google sicher keine Probleme hat das zu berücksichtigen.

Gruß
koslowski
 
Hi,

neuroleptika schrieb:
Da hast du so sicher ein klein wenig übertrieben. kann das sein?;-)

Ich glaube die ursprüngliche Frage ist beantwortet.
Ich finde das ja auch alles Interessant
Zum Vergrößern anklicken....

Na gut, strenggenommen ja.:oops:

Genauer müßte ich sagen, es machen die Webdesigner die ich kenne und von denen ich weiss, das sie in ihrem Tun kompetent sind (d.h. auch modernes Webdesign ist da kein Fremdwort).

Wenn ich mich so in der Branche online auf vielen Webdesigner-HP's umgucke, schlägt mir meistens das blanke Grauen entgegen.
Tabellenlayouts, nicht valide, Sonderzeichen als Fragezeichen auf der HP, usw.
Oder der Werbespruch: "Wir gestalten ihre Webseite mit moderner Frametechnik". ;ugl

Na ja, das ist wohl ein Kapitel für sich und wie du schon richtig bemerkt hast: "Die ursprüngliche Frage ist beantwortet".

Gruß
koslowski
 
So Leid es mir tut, für mich nicht. *rotwerd*
Es wäre klasse, wenn ich den Abstand denn auch wegkriegen könnte, auch wenn denn die Bilder per HTML eingefügt werden. Also wie ich anfangs hatte, bloss der Abstand sollte weg.

Du hast was von {display : block} gesagt. Wo muss ich dies denn einfügen? Sry...
 
Oh,
doch noch nicht zu Ende.
Code: 
#navi li img {
display : block;
}
Da wo deine anderen css-Anweisungen auch stehen.
Dann müßte es gehen.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben