| Autor |
Nachricht |
-
dani-site
|
 09.04.2010 um 15:21 (UTC)
Titel: Image Map als Header? |
|
|
Heyho 
Ich habe mit gimp eine Imagemap erstellt. Diese möchte ich nun als Header in meine hp einbauen... Ich habe das 'CSS' Grundgerüst für Iceblue. Aber für die Imagemap braucht man keine style-tags und wenn ich den ImageMap Code in Text über dem Design einfüge, ist sie logischerweise auch über der Werbung... Das möchte ich aber nicht.. Ich möchte sie direkt als Header haben ...
Kann mir jemand helfen?
lg
Dani |
|
|
↑
|
|
 |
-
dani-site
|
10.04.2010 um 17:30 (UTC)
Titel: |
|
|
Mir wurde gesagt, ich soll das machen:
"Erstmal musst du den Header löschen (die CSS-Klasse mit display: none; außer Kraft setzen). Dann eine neue Klasse mit Imagemap als Inhalt (Erklärung) http://www.html-world.de/program/html_14.php einfügen - also: <div id="new_header">IMAGEMAP-Code</div> - dann mit CSS diese Klasse positionieren und fertig."
Den Header habe ich ausgeblendet. Aber wo genau muss ich diesen Code mit dem Imagemap code reinmachen? Außerhalb des CSS Codes?
Und wie muss ich das als CSS Klasse schreiben??
lg
Dani |
|
|
↑
|
|
|
-
gamingparadise
|
10.04.2010 um 18:39 (UTC)
Titel: |
|
|
Hi,
also beim CSS-Code musst du die DIV für die Imagemap definieren. Heißt (nur zum Beispiel):
Zitat: #Imgmap{
width:900px;
height:200px;
margin-top:30px;
margin-left:10px;
}
Also Breite,Höhe,Abstand oben und Abstand links eingeben. Dann musst du die Imagemap außerhalb des CSS-Codes mit dem Code definieren.Also z.B. bei Text über dem Design:
Zitat: <div id="Imgmap"> Hier kommt der Imagemapcode hin </div>
Und wie gesagt, im CSS-Code dann noch mit margin-top und margin-left die Klasse positionieren.
Mfg
GamingParadise |
|
|
↑
|
|
|
-
dani-site
|
11.04.2010 um 13:46 (UTC)
Titel: |
|
|
Okay...
Also ich habe es jetzt so:
Code: <div id="Imgmap"> <img src="Testheader1.png" width="1000" height="450" border="0" usemap="#map" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Admin -->
<area shape="rect" coords="14,44,118,89" href="http://www.dani-site.de.tl/News.htm" />
<area shape="rect" coords="502,50,633,92" href="www.dani-site.de.tl/movie.htm" />
<area shape="rect" coords="793,68,924,107" href="http://www.dani-site.de.tl/online.htm" />
<area shape="rect" coords="560,172,660,210" href="www.dani-site.de.tl/stuff.htm" />
<area shape="rect" coords="758,249,963,284" href="www.dani-site.de.tl/guestbook.htm" />
<area shape="rect" coords="543,338,719,383" href="www.dani-site.de.tl/interact.htm" />
</map> </div>
<style type="text/css">
<!--
A:hover{cursor: help;}
#Imagmap{
width:900px;
height:200px;
margin-top:30px;
margin-left:10px;
}
......
Aber es wird nix angezeigt... Tut das was zur Sache, dass ich das Iceblue CSS Grundgerüst benutze? |
|
|
↑
|
|
|
-
dani-site
|
13.04.2010 um 16:47 (UTC)
Titel: |
|
|
*schieb* |
|
|
↑
|
|
|
-
gamingparadise
|
14.04.2010 um 11:07 (UTC)
Titel: |
|
|
dani-site hat Folgendes geschrieben: Okay...
Also ich habe es jetzt so:
Code: <div id="Imgmap"> <img src="Testheader1.png" width="1000" height="450" border="0" usemap="#map" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Admin -->
<area shape="rect" coords="14,44,118,89" href="http://www.dani-site.de.tl/News.htm" />
<area shape="rect" coords="502,50,633,92" href="www.dani-site.de.tl/movie.htm" />
<area shape="rect" coords="793,68,924,107" href="http://www.dani-site.de.tl/online.htm" />
<area shape="rect" coords="560,172,660,210" href="www.dani-site.de.tl/stuff.htm" />
<area shape="rect" coords="758,249,963,284" href="www.dani-site.de.tl/guestbook.htm" />
<area shape="rect" coords="543,338,719,383" href="www.dani-site.de.tl/interact.htm" />
</map> </div>
<style type="text/css">
<!--
A:hover{cursor: help;}
#Imagmap{
width:900px;
height:200px;
margin-top:30px;
margin-left:10px;
}
......
Aber es wird nix angezeigt... Tut das was zur Sache, dass ich das Iceblue CSS Grundgerüst benutze?
Du musst natürlich bei <img src="Testheader1.png" /> die komplette URL angeben, sonst wird der Header nicht angezeigt. |
|
|
↑
|
|
|
-
dani-site
|
14.04.2010 um 15:41 (UTC)
Titel: |
|
|
*kreisch* DAnkkkkeee
Jetzt brauch ich nur noch eine Sache, dann bin ich glücklich^^
Kann ich die ImageMap unter die Werbung machen?
Wenn nicht, dann hätte ich gerne die Werbung direkt an Content und ImageMap dran - ohne Lücken.
xoxo |
|
|
↑
|
|
|
-
dani-site
|
16.04.2010 um 13:59 (UTC)
Titel: |
|
|
*schieb* |
|
|
↑
|
|
|
-
gamingparadise
|
16.04.2010 um 14:44 (UTC)
Titel: |
|
|
Hey,
ich glaube, die Imagemap wirst du nicht komplett unter die Werbung kriegen, nur oben. Damit zwischen Imagemap,Werbung und Content keine Lücken entstehen, versuch mal folgenden Code:
Zitat: td[height="102"]{
margin-top:0px!important;
margin-bottom:0px!important;
}
Der kommt mit in den CSS-Code.
Mfg
GamingParadise |
|
|
↑
|
|
|
-
dani-site
|
16.04.2010 um 14:55 (UTC)
Titel: |
|
|
funzt leider nicht ... |
|
|
↑
|
|
|
-
gamingparadise
|
16.04.2010 um 15:01 (UTC)
Titel: |
|
|
Hey,
dann versuch es mal so:
In den CSS-Code kommt folgendes:
Zitat: #Design_Iceblue{margin-top:0px!important;}
Und unter den CSS-Code kommt folgendes:
Zitat: <div id="Design_Iceblue">
Und bei "Text unter dem Design" kommt folgendes:
Und in den CSS-Code kommt in den Abschnitt "#Imgmap" noch folgendes dazu:
Zitat: margin-bottom:0px!important;
Mfg
GamingParadise |
|
|
↑
|
|
|
-
dani-site
|
16.04.2010 um 15:07 (UTC)
Titel: |
|
|
Okay.. Beim Aktualisieren habe ich gesehen, dass die Lücken ein wenig kleiner geworden sind. Aber eben noch nicht ganz ... |
|
|
↑
|
|
|
-
gamingparadise
|
16.04.2010 um 15:16 (UTC)
Titel: |
|
|
Hey,
dann versuch es mal so:
Bei dem #Design_Iceblue - Abschnitt versuchst du es so:
Zitat: #Design_Iceblue{margin-top:-5px!important;}
Mit dem Minus wird die Klasse nach oben gezogen. Erhöhe sie soweit, bis die Lücke geschlossen ist.
Bei dem Imagemap-CSS-Abschnitt machst das gleiche:
Zitat: margin-bottom:-5px!important;
Mfg
GamingParadise |
|
|
↑
|
|
|
-
dani-site
|
16.04.2010 um 15:38 (UTC)
Titel: |
|
|
Hat geklappt! Nur der Content geht nicht weiter hoch, aber das ist schon so okay.
Eine Frage noch ... Wie kann ich alles unterhalb der Werbung ein Stück nach rechts verschieben, damit die Navi genau unter der linken Linie der Webung ist? |
|
|
↑
|
|
|
-
gamingparadise
|
16.04.2010 um 15:40 (UTC)
Titel: |
|
|
Hey,
dazu musst du den Code folgendermaßen ändern:
Zitat: #Design_Iceblue{
margin-top:-5px!important;
margin-left:10px;
}
Beim blauen musst du angeben, wie weit das Design nach rechts verschoben werden soll bzw. den Abstand von links eingeben.
Mfg
GamingParadise
Zuletzt bearbeitet von gamingparadise am 16.04.2010, 16:41, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
|
