CSS Navi pixelgenau erstellen

eBi14 · 25. Juli 2011

Hallo,

ich hätte da mal ne Frage. Ich hab gestern angefangen ein schlichtes Design zu erstellen welches ich heute uploaden und mit Links versehen will.

Dazu habe ich (im 1-Spalten-Design) eine Navigation erstellt, die will ich jetzt auch als Navi benutzen, also die verschiedenen Seiten verlinken.

Die Navi: http://i54.tinypic.com/34xpaoz.png

Wie stelle ich nun im Stylesheet ein, dass von Pixel A bis Pixel B (also z.B. bei "Über Mich") eine Verlinkung zu der Seite ist?

Gruß, eBi14

~Lunes~ · 25. Juli 2011

Muss das eine Grafik sein?
Alleine schon für die Suchmaschinen wäre es besser das Ganze als normalen Text umzusetzen.

Ansonsten kannst du das Bild in die einzelnen Teile zerschneiden.

Nitrosplitt · 25. Juli 2011

Wieso die Illustration nicht dreiteilen und dann mit

Code:

<a href=""><img scr="" /></a>

einzeln verlinken?

Ergänzung (25. Juli 2011)

Code:

[COLOR="blue"]<style type="text/css">
      .navi { width: 760px; height: 55px;  }
      .navi li { display: inline !important }
</style>[/COLOR]

<ul class="navi">
      <li><a href=""><img scr="" alt="über mich"/></a></li>
      <li><a href=""><img scr="" alt="portfolio"/></a></li>
      <li><a href=""><img scr="" alt="impressum"/></a></li>
</ul>

eBi14 · 25. Juli 2011

Okay, daran habe ich auch schon gedacht.
Wenn ich es 5-teile (leer - über mich - portfolio - impressum - leer) und die bilder einfach untereinander im Stylesheet einfüge, sind die dann auch so nebeneinander wie ich es haben will, oder muss ich da auch irgendwas mit genauen Pixeln einstellen?

Edit: ah, perfekt, ich probiere es gleich mal aus. Danke Nitrosplitt

~Lunes~ · 25. Juli 2011

Bilder im Stylesheet einfügen? Ich glaub du verstehst das was falsch, die Bilder kommen in den HTML Quelltext wies nitrosplitt schon aufgezeigt hat. Das kann man dann auch so machen, dass diese nahtlos aneinander gesetzt werden.

Und wie gesagt, die Navi ist so simpel, dass sich diese auch mit normalem Text und einer entsprechenden Formatierung realisieren lassen sollte. Dann kannst du sogar noch einen netten Hover Effekt auf die Links legen und Google freuts auch.

eBi14 · 25. Juli 2011

Jup, hab mich vertan. Mache das zum ersten mal, also kommen da bestimmt oft unlogische Dinge raus...

Mit dem Text weiß ich wiederum nicht wie es realisierbar ist, da muss ich wohl noch einige Tutorials durchgehen im Netz.

Nitrosplitt · 25. Juli 2011

dass die Bilder aneinandergereiht angezeigt werden, erreicht man per

Code:

display: inline

Julexander · 25. Juli 2011

Es gibt auch im CSS eine Option dass du einen Text mit eigenem Font versehen kannst den du selbst auf dein Webspace uploadest. Dann haettest du auch das Problem mit den Suchmaschinen aus dem Kopf und ausserdem wuerde die Seite schneller laden, da man nur den Font laden muss und nicht die Grafiken

Suche

CSS Navi pixelgenau erstellen

eBi14

Cadet 3rd Year

~Lunes~

Commodore

Nitrosplitt

Cadet 2nd Year

eBi14

Cadet 3rd Year

~Lunes~

Commodore

eBi14

Cadet 3rd Year

Nitrosplitt

Cadet 2nd Year

Julexander

Lieutenant

Ähnliche Themen