Unsichtsbarer Button

[debe.]

Imagemap

ich weiß nicht ob das funktioniert...
im header meiner seite ist ein banner zu sehen:

nun soll dort wo "neues angebot" steht eine unsichtbare verlinkung hinter dem bild sein, so das wenn ich auf "neues angebot" klicke ich auf eine weitere seite verlinkt werde.
geht das überhaupt?

 

[Puccini]

schau dir mal img und map an. damit kannst du in einem Bild einen bereich (area) als link definieren.
das ganze ist eine recht angenehme sache für sowas.
du kannst es auch über einen link machen, den du absolut positionierst und eine breite und größe gibts, die auf das viereck passt... aber ich find das mit der map hier vielleicht sogar am besten.

 

[debe.]

das ist das was ich brauche, aber ist imagemap nicht als html definiert? der html-code wüsste ja nichts vom bild im header weil dieser im css definiert ist :?

 

[Puccini]

tjo, wenn du es als normale background-image über das css machst geht das mit der area net....

dann wohl doch über den positionierten link...

 

[debe.]

wie mache ich das denn? (bin anfänger)
zur zeit sieht es so aus:

#header {
	background: url(images/header.jpg) no-repeat 0% 100%;
	height: 370px;
	padding: 0px 0 0 0;
	position: relative;
	margin: 0 0 0 0;

muss ich da jetzt mit hover arbeiten?

 

[Puccini]

hover ist ja nur für die darstellung bie mouseover da.

Willst du wirklich nur das kleine viereck in der mitte da als link oder lieber gleich den ganzen header?

wenn du nur die kleine schlatfläche willst, musst du versuchen ein elemente mit einem link an die stelle zu bringen.

in etwa so:

<div id="header">
<a href="meinziel"><span>&nbsp;</span></a>
</div>

Und als css für den Span:

#header span{
  position: absolute;
  display: block;
  widht: viereckbreite;
  height: viereckhöhe;
  top: viereck_oberelinkeecke_y;
  left: viereck_oberelinkeecke_x;
}

Die Breiten/Höhen und Positionen musst du so angeben: 100px; (also mit px hinten)

 

[debe.]

bei mir ist das menü jetzt mit im header. egal wo ich nun den span einfüge, verschiebt sich alles.

  <!-- header -->
  <div id="header">
    <div id="menu">
    <div id="menu_left">
		  <div id="menu_right">
		    <div id="menu_navi_top">
			  <div id="menu_top">
			    <div id="list_top">
				  <ul>
				    <li class="no_style"><a href="index.html">Startseite</a></li>
					<li><a href="team.html">Das Team</a></li>
					<li><a href="angebote.html">Angebote</a></li>
					<li><a href="referenzen.html">Referenzen</a></li>
					<li><a href="kontakt.html">Kontakt</a></li>
				  </ul>
				</div>
			  </div>
			</div>
		  </div>
	  </div>
    </div>
  </div>

wo kann ich den denn einfügen?

 

[Puccini]

hu?
menü mit im header?
ehmmm...

dann musst du das scheinbar anders formatieren/strukturieren.
oder du positioniserst das menü auch absolut. einfach bottom: 0px; und es sollte am unteren rand kleben.

 

[debe.]

wenn ich das menü nun auf absolute setze und positioniere, dann hab ich nur noch 1 link in der menüleiste...

mein css fürs menü sieht so aus:

#menu {
	background: url(images/menu.jpg) repeat-x 0% 0%;
}

#menu_left {
	background: url(images/menu_left.jpg) no-repeat 0% 0%;
	height: 24px;
}

#menu_right {
	background: url(images/menu_right.jpg) no-repeat 100% 0%;
	height: 24px;
}

#menu_navi_top {
	position: relative;
	overflow: hidden;
	width: 919px;
	overflow: hidden;
	height: 24px;
}

#menu_top {
	position: relative;
	float: left;
	left: 50%;
	text-align: center;
}

#list_top {
	position: relative;
	float: left;
	left: -50%;
}

#list_top ul li {
	background: url(images/menu-divider.jpg) no-repeat 0% 50%;
	float: left;
	font-size: 1.188em;
	font-weight: none;
	text-align: center;
	text-transform: uppercase;
}

#list_top ul li a {
	display: block;
	width: 183px;
	height: 24px;
	line-height: 24px;
	float: left;
	text-decoration: none;
	color: #FFF;
	font-family: "Century Gothic";
	font-size: 0,3;
	font-weight: normal;

 

[Puccini]

wo war die seite?

ich schau mir das mal mit dem firebug an ;)

kann ja net so schwer sein :mrgreen:

 

[Puccini]

erstell mal folgenden code im header-div nach dem menü-div:

<a href="index.php"><span id="newoffer"> test</span></a>

und dann folgendes CSS dazu:

#newoffer{
border: 1px solid ; 
position: absolute; 
left: 230px; 
top: 200px; 
display: block; 
width: 150px; 
height: 100px;
}

dann siehst du eine box mit dem Link wo test drin steht.
test ersetzt du mittels   zu einem leeren string.
und die position+größe musst du noch anpassen.

Hoffe es klappt. mit ff klappt es im firebug.
</div>

 

[debe.]

es hat funktioniert, danke!!