abstand zwischen bilder...

[mine]

hallo!

wie bekomme ich den abstand zwischen den menuelementen hier weg:
Romanistik

danke!

 

[bubu-der-uhu]

hmmmm...

ohne dem Css File kann Ich nur Raten...
Für bilder und deine links
margin: 0px;

 

[dkdenz]

#menu img {padding:0px;margin:0px;[B]float:left;[/B]}

Zudem scheinen Deine Grafiken zu breit zu sein, da sie zusammen mehr als diese 840px ergeben, weswegen umbrochen wird (jedenfalls bei mir unter Linux mit Firefox).

@bubu-der-uhu: Besorg Dir mal die WebDeveloperToolbar für den Firefox.
Da kannst Du mit EditCSS die Sheets angucken und auch 'live' darin rumpfuschen.

 

[bubu-der-uhu]

ahhh... thx

 

[mine]

danke!

ich habe das mit dem css so gemacht.
es geht unter firefox, opera und konqueror... jetzt fehlt nur der IE! die bilder sind alle 140 px breit... also genau 840/6. das passt doch!
danke!

 

[dkdenz]

#menu img {padding:0px;margin:0px;float:left;[B]border:0px;[/B]}

Wenn Du das noch reinschreibst, dann passt's auch bei mir unter Ubuntu...

Edit: Sehe grade, das Du aktualisiert hast.
Es passt jetzt. Linux(Ubuntu) -> Firefox, Opera, Konqueror, Mozilla, Epiphany und Galeon...

 

[wumble]

Noch ein kleiner Tip, bei solchen Buttons die keine aufwändige Schrift benötigen empfiehlt es sich nur zwei Grafiken zu benutzen, eine für jeden Hintergrund.
Das spart traffic und du benötigst weniger css klassen.

Aber bei einfarbigen Hintergründen könntest eigentlich auch sogar den Hintergrund auch mit css gestalten

Also wenn du es noch optimieren möchtest dann kannst ja einfach die Bilder rauswerfen und es mit Code machen

 

[mine]

ja... das werde ich auch so tun... wobei wir dabei sind: weißt du zufällig wie ich das menu als liste über die ganze breite des devs strecken kann???

 

[wumble]

Also du weißt ja wie lang es sein muss insgesamt und dementsprechend lang kannst ja dann auch die Buttons machen, so wie nun halt auch schon.
Ich würde die Klasse dann etwa so deklarieren:

.button {
  width: 140px;
  height: 17px;
  text-align: center;
  font-size: 12px;
  padding-top: 3px;
  float: left
}
  .button:link, .button:visited {
    color: #fff;
    background: #670001
  }
  .button:hover, .button:active {
    color: #000;
    background: #F6F5D6;
  }

Wenn die Leiste dann doch mal größer wirst, du andere Farben haben möchtest etc. kannst dann auch einfach alles ganz fix dort ändern.

 

[dkdenz]

Du machst eine ganz normale Liste (<ul><li></li></ul>)
Die li floatest Du left.
Die ul sollte dann list-style-type:none haben.
Nach dem Ende der Liste entfloatest Du dann das Ganze wieder mit clear:both.
Die a's sollten dann noch ein display:block mitkriegen.
Aber das ganze Szenario gibt's hier im Forum schon häufiger...