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

Hilfe gesucht - Mentor gesucht - Projekte umsetzen - klickbaren Bereich erstellen

T

TimothyThousand

Neues Mitglied
Hallo,

ich bin neu hier und auch meine Kenntnisse sind noch nicht so "der burner".
Ich habe mir eine Navi bei Photoshop erstellt und dazu eine spezielle Schrift genommen. Die Schrift möchte ich beibehalten... Corporate Design und so.

Jetzt frage ich mich aber, wie ich denn bei HTML bzw. in CSS einen klickbaren Bereich erstellen kann, der dann eben verlinkt. Kann mir bitte jemand behilflich sein?

Ich würde mich freuen wenn ich hier eine/n "Mentor/in" finde, mit dem/r ich regelmäßig in Kontakt stehen kann bei Fragen.

Ich habe derzeit 2 Projekte die ich durchdacht habe und umsetzen möchte. Mir fehlen allerdings die Kenntnisse dazu.

Liebe Grüße

TT
 
Werbung:
Hi Cheffchen, ich werds mir mal durchlesen... ul li geht ja nicht, weil die schriften sozusagen eine Grafik sind... oder nicht?

Danke auf jeden Fall
 
Werbung:
Doch, auch das geht. Du machst ja innerhalb <li> einen Link, und der Linktext kann sowohl eben Text sein, oder eine Grafik, z.B. so.
HTML: 
<ul>
  <li>
    <a href="seite1.html"><img src="seite1.jpg" alt="Seite1" title="Seite1"></a>
  </li>
  <li>
    <a href="seite2.html"><img src="seite2.jpg" alt="Seite2" title="Seite2"></a>
  </li>
</ul>
 
Hallo,

machst das wie im link beschrieben und dann wie schon gesagt mit css.

html teil ist dann
Code: 
<ul id="navi">
<li><a href="link1.xyz">LINK1</a></li>
<li><a href="link2.xyz">LINK2</a></li>
<li><a href="link3.xyz">LINK3</a></li></ul>

Cheffchen
 
Hallo nochmal!

Ich danke euch... meine Lösung sieht so aus: In PS die waagrechte Navi gemacht, dann alles gesliced, in html als gif eingefügt und die grafiken mit links versehen... ist das eine lösung die professionell ist, oder eher nicht?

LG

TT
 
Werbung:
Nein, das ist keine Lösung und so sollte auch nie eine Webseite aufgebaut sein.

Wenn Du eine Webseite erstellen willst, dann schneide die dir wichtigen Elemente aus, meinetwegen auch mit slicen, und baue dir dann den HTML- und CSS-Code selbst zusammen. Nimm nicht den generierten Code.
 
ist das eine lösung die professionell ist
Zum Vergrößern anklicken....
der war gut, sieht das menü aus wie oben code?
wenn ja, dann ok
wenn nein, dann nein

Er wird eher nicht so aussehen da dies nicht da für gedacht ist eine homepage zu erstellen.
Ich wiederhole mich gern, Menü hat eine ul li liste zu sein punkt.

Cheffchen
 
Hallo, ich meinte nicht, ich dass ich den vorgefertigten Code genommen habe, sondern einfach nur die Navi in einzelne Teile geschnitten hab. Dann hab ich in HTML die Links erstellt, den Text der Links gelöscht in zwischen den Links noch lückenfüllerbilder eingefügt. Dann in CSS die Bilder als Background-Image eingefügt. Funktioniert auch alles soweit. Jetzt hab ich aber das Problem, dass bei Chrome die Navibilder höher sind als die Lückenfüller obwohl ich überall 30px habe, margin und Padding ist auf 0. bei Mozilla sieht man immer noch einen dünnen weißen Strich zwischen den einzelnen Bildern. Bei Safari sieht alles ganz gut aus. Ich versteh nicht wieso... Bitte bitte Hilfe :( ich danke euch soweit sehr!
 
Werbung:
Bitte wo ist der Code, sowohl HTML als auch CSS. Das ist die Grundvorraussetzung um Dir helfen zu können. Noch besser ist ein Link zu der Problemseite. Wenn Du noch keinen Webspace hast, dann hole Dir einen, für solche Zwecke tut es auch ein Freespace. Dann kann Dir auf jeden Fall am allerbesten geholfen werden.

Gruß thuemmy
 
Also das ist mein Code:

HTML:

<div id="navi">
<ul>
<li> <img src="images/navi/navilinks.gif"</li>
<li> <a class="home" href="#"></a> </li>
<li><img src="images/navi/naviluecke.gif"/></li>
<li> <a class="suchen" href="#"></a> </li>
<li><img src="images/navi/naviluecke.gif"/></li>
<li> <a class="inserieren" href="#"></a> </li>
<li><img src="images/navi/naviluecke.gif"/></li>
<li> <a class="ueberuns" href="#"></a> </li>
<li> <img src="images/navi/navirechts.gif" /></li>
</ul>
<br style="clear: both;">
</div><!--ende navi-->

CSS:

/* NAVIANFANG */




#navi {

margin-top: 20px;

}


#navi ul
{
margin: 0;
padding: 0;
list-style-type: none;
}


#navi li
{
float: left;
margin: 0px;
padding: 0px;
}


#navi a
{
display: block;
height: 30px;
padding: 0px;
}


a.home:link, a.home:visited
{
background-image: url(images/navi/navihome.gif);
width: 52px;
height: 30px;
}


a.home:hover
{
background-image: url(images/navi/navihome.gif);
width: 52px;
height: 30px;
}


a.suchen:link, a.suchen:visited
{
background-image: url(images/navi/navisuchen.gif);
width: 64px;
height: 30px;
}


a.suchen:hover
{
background-image: url(images/navi/navisuchen.gif);
width: 64px;
height: 30px;
}


a.inserieren:link, a.inserieren:visited
{
background-image: url(images/navi/naviinserieren.gif);
width: 85px;
height: 30px;
}


a.inserieren:hover
{
background-image: url(images/navi/naviinserieren.gif);
width: 85px;
height: 30px;
}


a.ueberuns:link, a.ueberuns:visited
{
background-image: url(images/navi/naviuberuns.gif);
width: 75px;
height: 30px;
}


a.ueberuns:hover
{
background-image: url(images/navi/naviuberuns.gif);
width: 75px;
height: 30px;
}


/*NAVIENDE*/
 
Werbung:
Hallo,

ohne link nö,

aber was ich mir beim vorbeischauen aufgefallen ist.
leerzeichen in den li´s ist ungünstig.
die li´s haben keine festgelegz höhe

mehr geht ohne link nicht

Cheffchen
 
Werbung:
HAllo,

also wie schon geasgt, zuerst Valide, sonst wird das nichts mit fehler suche.
Ohne Doctype und rest wird das nichts und das mit Zoom ist ein anzeige fehler vom Browser, der auch nicht immer gleich ist beim gleichen Browser. Zoom ist mehr eine zusatzfunktion die eine normale Seite nicht brauch.

Cheffchen
 
Werbung:
Ich habe jetzt den DOCTYPE eingefügt.

Bei Mozilla ist es nach wie vor so, dass zwischen den einzelnen Navibildern ein weißer Strich besteht, finde das sieht total semi-professionell aus, problem besteht allerdings nur beim zoomen.

Beim Chrome wieder die verschiedene Höhe der Bilder beim zoom. Kann man da wohl nichts ändern?

Seltsamerweise sieht alles im Safari gut aus.

Vielen Dank für eure Hilfe!

Ich würde diesen Thread gerne weiterhin offen lassen für alle meine Fragen, ist das in Ordnung für euch?

LG

TT
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben