HTML/CSS Problem

D

Dontello

Member
10 März 2008
16
1
Hallo.

Ich habe mal versucht ein Design ohne Tabellen zu machen, sondern eben nur mit CSS(Divs).
Jetzt hab ich mir mein Design soweit ganz gut zusammengebastelt und hab aber ein Problem. Und zwar würde ich gerne manche Hintergrundbilder, die ich den Divs zugewiesen hab, als Link benutzen. Ich poste mal meine Code wie ich es bis jetzt realisiert habe, aber so funktioniert es leider nicht.

Der HTML Code:

Code: 
<link rel="stylesheet" type="text/css" href="design.css">
</head>
<body>
 <div id="design1"></div>
 <div id="design2"></div>
  <a href="index.html"; id="design3"></a>
  <a href="about.html"; id="design4"></a>
  <a href="music.html"; id="design5"></a>
  <a href="turtle.html"; id="design6"></a>
  <a href="blog.html"; id="design7"></a>
  <a href="contact.html"; id="design8"></a>
 <div id="design9"></div>
 <div id="design11"></div>
		<div id="design13">Inhalt
			
		
		
		</div>
 <div id="design10"></div>
 <div id="design12"></div>
 <div id="design14"></div>
</body>
</html>

Die CSS Datei:
Code: 
body {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: normal;
text-decoration: none;
background-color :#e2c89f;
line-height: 100.01%;
margin-left: 50px;
padding: 0px
}


a:link {
font-family: Verdana;
font-size: 12px;
font-weight: normal;
text-decoration: underline;
color: #0000FF;
}

a:visited {
font-family: Verdana;
font-size: 12px;
font-weight: normal;
text-decoration: underline;
color: #0000FF;
}

a:hover {
font-family: Verdana;
font-size: 12px;
font-weight: normal;
text-decoration: overline;
color: #FF8C00;
cursor: crosshair;
}

a:active {
font-family: Verdana;
font-size: 12px;
font-weight: normal;
text-decoration: underline;
color: #0000FF;
}

a img {
border: none
}

#design1 {
   background-image:url("images/design1.png");
   width:  421px;
   height: 163px;
   margin-left: 0px;
   margin-top: 0px;
 }
 
#design2 {
   background-image:url("images/design2.png");
   width:  379px;
   height: 24px;
   margin-left: 421px;
   margin-top: -162px;
 }

#design3 {
   background-image:url("images/design3.png");
   width:  56px;
   height: 138px;
   margin-left: 421px;
   margin-top: 0px;
   display:block;
   
 }

#design4 {
   background-image:url("images/design4.png");
   width:  60px;
   height: 139px;
   margin-left: 477px;
   margin-top: -139px;
   display:block;
 }

#design5 {
   background-image:url("images/design5.png");
   width:  62px;
   height: 139px;
   margin-left: 537px;
   margin-top: -139px;
   display:block;
 }
 
#design6 {
   background-image:url("images/design6.png");
   width:  54px;
   height: 138px;
   margin-left: 599px;
   margin-top: -139px;
   display:block;
 }

#design7 {
   background-image:url("images/design7.png");
   width:  64px;
   height: 139px;
   margin-left: 653px;
   margin-top: -139px;
   display:block;
 }
 
#design8 {
   background-image:url("images/design8.png");
   width:  60px;
   height: 139px;
   margin-left: 717px;
   margin-top: -139px;
   display:block;
 }

#design9 {
   background-image:url("images/design9.png");
   width:  23px;
   height: 138px;
   margin-left: 777px;
   margin-top: -139px;
 }
 
#design11 {
   background-image:url("images/design11.png");
   width:  50px;
   height: 437px;
   margin-left: 0px;
   margin-top: 1px;
 }

#design13 {
   background-image:url("images/design13.png");
   width:  727px;
   height: 387px;
   margin-left: 50px;
   margin-top: -438px;
 }
 
#design10 {
   background-image:url("images/design10.png");
   width:  22px;
   height: 438px;
   margin-left: 778px;
   margin-top: -388px;
 }

#design12 {
   background-image:url("images/design12.png");
   width:  727px;
   height: 50px;
   margin-left: 50px;
   margin-top: -51px;
 }

#design14 {
   background-image:url("images/design14.png");
   width:  1px;
   height: 438px;
   margin-left: 777px;
   margin-top: -438px;
 }

Im Firefox funktionieren die Navigationslinks, aber im Internetexplorer tut sich gar nichts.
Habs auch mal hochgeladen. https://www.weissgräber.de

Ich hoffe ihr könnt mir helfen.
:)
 
mhhh mein Problem besteht immernoch.
gibt es denn keine möglichkeit einen bestimmten div bereich einem link zuzuweisen. also das der komplette div als link klickbar ist.
 
gibts bei div das onclick attribut?? dann könntest es machen à la
Code: 
<div irgendwas onClick="javascript:location.href='https://irgendwas.url.oder.sonst was.htm" />

EDIT: Nachteil: Wenn Javascript deaktiviert ist kann keine navigieren ;)
 
almdudler777 schrieb:
gibts bei div das onclick attribut?? dann könntest es machen à la
Code: 
<div irgendwas onClick="javascript:location.href='https://irgendwas.url.oder.sonst was.htm" />

EDIT: Nachteil: Wenn Javascript deaktiviert ist kann keine navigieren ;)
Zum Vergrößern anklicken....

klar kannst man über den div ein onclick setzen...

warum arbeitest du nicht mit listen?

PS: Wenn jemand Javascript deaktiviert hat muss man ihm einfach nur eine mitteilung anzeigen lassen, dass er javascript aktivieren soll... das dürfte kein problem sein...

Übrigens: bennen design1, design2, usw mal mit richtigen Namen, sprich z.B. anstatt "design1" "Blog" oder so, dann verliert man den Überblick nicht allzuschnell... ;)
 
Code: 
<div class="lala"><a href="index.php"> </a></div>

Ohne ein "Leerzeichen" ist der Link nicht erkennbar ;)
 
Das Semikolon brauchst Du übrigens auch nicht.
HTML: 
<a href="index.html"; id="design3"></a>

Richtig wäre:
HTML: 
<a href="index.html" id="design3"></a>

Ausserdem solltest Du noch eine relative oder absolute Positionierung zuweisen,damit der Browser eine Change hat,das richtig darzustellen.
BTW können Hintergrundbilder nicht verlinkt werden,sondern nur die dazugehörigen Elemente.

Vielleicht hast Du auch noch einen Link,wo man sich das anschauen kann.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

Zicklein444
Umfragen, technisches Problem
Antworten
3
Aufrufe
1K
Zicklein444
Zicklein444
domino
Problem bei »Alle Cookies aktivieren.«
Antworten
1
Aufrufe
2K
klamm
klamm
Zurück
Oben