Html-Menü mit Bildern und nur CSS?

2 Antworten

Sowas habe ich in den 90ern auch gemacht und hat geklappt :-D

Bist du sicher dass du Bilder brauchst und nicht mit CSS und font icons loesen kannst?

Schwer zu sagen was der Fehler bei dir ist, ohne Code... Aber du kannst das Menue aus dem zweiten Link einfach aus dem Quellcode der Seite kopiren, und das CSS auch, dann sollte es klappen.

Bilder müssen nicht unbedingt sein. Finde aber diesen Ansatz auch nicht schlecht ;)

0
@Luissa44
Bilder müssen nicht unbedingt sein. Finde aber diesen Ansatz auch nicht schlecht ;)

Er ist schlicht und ergreifend nicht mehr modern und vermiest dir u.U. deine SEO. Ich würde keine Website ausliefern, die simple Grafiken in der nav hat.

0
@Luissa44

Also ja, ich finde auch dass Support fuer LTE IE6 sein MUSS ;-)

0

Hier isser... mal aus der Antwort in ein fiddle kopiert.

https://jsfiddle.net/byzLvhz9/

0
@Savix

ok, aber das Bild ist noch nicht eingefügt. Macht das was? Oder kann man schon so etwas dazu sagen?

0
@Luissa44

Es ist mehr die Formatierung, die micht stört, als die fehlenden Grafiken. So wird's leider schwierig, dir zu helfen. :/

0
@Savix

Was meinst du mit Formatierung?

0

@Steffile

Hast du eine gute Quelle wo das mit den font Icons beschrieben wird? Ist diese Methode mit den Bildern als Menü so alt? Oder zu alt?

0

Ok, vielen dank. Ich habe mich glaube ich umentschieden ;) und nehme keine Bilder mehr sondern versuche es mit Font Ions zu lösen.

0

Bereite den Code bitte auf, ich will nicht alles selbst in jsfiddle kopieren.

HTML


<div id="navigation">
      <ul>

          <li><a href="#" class="link1">Home</a></li>
          <li><a href="#" class="drop link2">Metal<!--[if IE 7]><!--></a><!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
              <ul>
                  <li><a href="#">Gold</a></li>
                  <li><a href="#">Aluminum</a></li>
                  <li><a href="#">Brass</a></li>

                  <li><a href="#">Stainless Steel</a></li>
              </ul>
              <!--[if lte IE 6]></td></tr></table></a><![endif]-->
          </li>
          <li><a href="#" class="drop link3">Plastic<!--[if IE 7]><!--></a><!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
              <ul>
                  <li><a href="#">Polyethelene</a></li>


                  <li><a href="#">Polycarbonate</a></li>
                  <li><a href="#">Fiberglass</a></li>
                  <li><a href="#">PVC</a></li>
              </ul>
              <!--[if lte IE 6]></td></tr></table></a><![endif]-->
          </li>
          <li><a href="#" class="drop link4">Services<!--[if IE 7]><!--></a><!--<![endif]-->


              <!--[if lte IE 6]><table><tr><td><![endif]-->
              <ul style="height:240px;top:-40px;">
                  <li><a href="#">Art</a></li>
                  <li><a href="#">Design For Manufacturing</a></li>
                  <li><a href="#">Prototyping</a></li>
                  <li><a href="#">Quickturn</a></li>
                  <li><a href="#">Safety Design</a></li>

                  <li><a href="#">Kits &amp; Assembly</a></li>
                  <li><a href="#">Request For Quote</a></li>

              </ul>
              <!--[if lte IE 6]></td></tr></table></a><![endif]-->
          </li>
          <li><a href="#" class="link5">News</a></li>

          <li><a href="#" class="link6">Catalog</a></li>
          <li><a href="#" class="link7">About Us</a></li>
          <li><a href="#" class="link8">Contact</a></li>
          <li><a href="#" class="link9">Registered Users</a></li>
      </ul>
  </div>


0

CSS

#navigation {width:145px;position:relative; z-index:100;margin-top:50px; border-right:1px solid #999; padding:10px 0px; float:left;}
/* hack to correct IE5.5 faulty box model */
* html #navigation {width:145px; width:144px;}
/* float the list to make it horizontal and a relative positon so that you
can control the dropdown menu positon */
#navigation li {width:145px;position:relative;}
/* style the links for the top level */
#navigation a, #navigation a:visited {display:block; height:47px;
background:url(img/Menue4b.png) top left; text-indent:-9000px;}
/* a hack so that IE5.5 faulty box model is corrected */
* html #navigation a, * html #navigation a:visited {width:145px;width:145px;}


/* style the second level background */
#navigation ul ul a.drop, #navigation ul ul a.drop:visited {
	background:#2d3d47}
/* style the second level hover */
#navigation ul ul a.drop:hover{background:#fff; color:#202c32;}
#navigation ul ul :hover > a.drop {background:#fff; color:#202c32;}
/* style the third level background */
#navigation ul ul ul a, #navigation ul ul ul a:visited {
	background:#e2dfa8;}
/* style the third level hover */
#navigation ul ul ul a:hover {background:#b2ab9b;}


/* hide the sub levels and give them a positon absolute so that they take up no room */
#navigation ul ul {
	visibility:hidden;
	position:absolute;
	top:-10px; left:145px;
	padding:4px;
	background:#2d3d47;
	height:96px; width:145px;
	border-left:1px solid #999;
	}
/* another hack for IE5.5 */
* html #navigation ul ul {top:-9px;top:-10px;}

/* position the third level flyout menu */
#navigation ul ul ul{left:149px; top:-1px; width:149px;}

/* position the third level flyout menu for a left flyout */
#navigation ul ul ul.left {left:-149px;}

/* style the table so that it takes no ppart in the layout - required for IE to work */
#navigation table {position:absolute; top:0; left:0; border-collapse:collapse;}

/* style the second level links */
#navigation ul ul a, #navigation ul ul a:visited {
	background:#2d3d47;
	color:#fff;
	height:auto;
	line-height:14px;
	text-indent:0px;
	display: block;
	padding:5px;
	text-decoration:none;
	font-size:11px;
	}
/* yet another hack for IE5.5 */
* html #navigation ul ul a, * html #navigation ul ul a:visited {
	width:145px;width:145px;}


	/* style the top level hover */
	#navigation :hover > a, #navigation ul ul :hover > a {
		background:url(img/Menue4b.png) top left;}

	/* top level image background placements */
	#navigation a.link1:hover {background-position:-146px 0px;}
	#navigation a.link2 {background-position:0px -47px;}



	/* DO NOT consolodate next 2 lines into one, this breaks IE6 */
	#navigation a.link2:hover {background-position:-146px -47px;}
	/*#navigation :hover &gt; a.link2, #navigation ul ul :hover &gt; a.link2  {
		background-position:-146px -47px;}*/
		#navigation :hover > a.link2, #navigation ul ul :hover > a.link2  {
			background-position:-146px -47px;}


	#navigation a.link3 {background-position:0px -94px;}
	#navigation a.link3:hover{background-position:-146px -94px;}
	#navigation:hover > a.link3, #navigation ul ul :hover > a.link3  {
		background-position:-146px -94px;}



	#navigation a.link4 {background-position:0px -141px;}
	#navigation a.link4:hover {background-position:-146px -141px;}
	#navigation :hover > a.link4, #navigation ul ul :hover > a.link4  {
		background-position:-146px -141px;}



	#navigation a.link5 {background-position:0px -188px;}
	#navigation a.link5:hover {background-position:-146px -188px;}
	#navigation a.link6 {background-position:0px -235px;}
	#navigation a.link6:hover {background-position:-146px -235px;}
	#navigation a.link7 {background-position:0px -282px;}
	#navigation a.link7:hover {background-position:-146px -282px;}
	#navigation a.link8 {background-position:0px -329px;}
	#navigation a.link8:hover {background-position:-146px -329px;}
	#navigation a.link9 {background-position:0px -375px; height:65px;}
	#navigation a.link9:hover {background-position:-146px -375px;}


0

Ok, vielen dank dennoch. Ich habe mich glaube ich umentschieden ;) und nehme keine Bilder mehr.

0

Mit Web Development am schnellsten Geld verdienen?

Hi, Ich habe vor etwas Programmieren zu üben/lernen. Jetzt die Frage, da ich gerade keinen Job habe und daheim wohne möchte ich etwas Geld dazuverdienen um meiner Familie etwas unter die Arme zu greifen. Jetzt die Frage, mit was kann ich am ehesten Geld verdienen? Ich habe da an Web development gedacht und weiß nicht ob das gut ist. Wenn dies gut für einen Start wäre, welche Sprache sollte ich als erstes lernen. Ich dachte da an HTML, SQL, etc... Vorschläge und Anregungen gerne unten schreiben. Vielen Dank für eure Hilfe.

Mfg Sebastian

...zur Frage

Css DropDown Menu / Javascript?

Hi, was ist die bessere Methode, um ein Dropdown-Menü zu erstellen?

Ist es besser mit Javascript oder nur mit css zu arbeiten?

Könntet ihr auch Vor- bzw. Nachteile aufzählen?

Danke.

...zur Frage

Menüleiste/Navigation meiner Homepage soll nach rechts, wie mache ich das in HTML?

Ich hab mir mit einem Homepage Baukasten eine Website zusammengebastelt, aber bei dem Design was ich mir ausgesucht hab ist die Navigation also das Menü links und ich hätte er gern rechts. Was muss ich im Quellcode verändern, damit das Menü rechts ist?

Der Bereich, wo das Menü ist beginnt sieht so aus

            <div id="columnWrapper">
                    <div id="menuColumn">
                          <div id="menuHeader"><span style="font-family: Syncopate"></span></div>
                          <ul id="menuList">
                                      <li class="menu_item active"><a target="_blank" href="news.html">NEWS</a></li>

Danach kommen nur Zeilen fürs Untermenü. Was soll ich verändern/hinzufügen? Oder bin ich da ganz falsch?

...zur Frage

HTML, PHP und MySQL Zeilenumbrüche?

Moin moin.

Mich beschäftigt folgende Frage:

Wie schaffe ich es, dass ich mit meinem PHP Script einen Zeilenumbruch aus einer MySQL Datenbank lese und den Zeilenumbruch auch in HTML setzte? Ich habe soweit die Verbindung fertig, mir wird der Text aus der Datenbank durch den PHP Script in HTML angezeigt. Ja, ich bin ein Anfänger in Web-Development, sry.

...zur Frage

css vertikales menü aufklappbar nach unten weg wie geht das?

hallo ich möchte gerne in css html und wenn es sein muss auch js ein menü programmieren.Das untermenü soll sich nicht nach rechts oder links wegklappen wie überall im internet beschrieben sondern nach unten. so weit so gut so weit binn ich auch schon aber jetz klapt sich das untermenü über die obermenüpunkte auf wie bekomme ich das hin , dass die nicht passirt und die obermenüpunkte nach unternrutschen ? mein 2 poblem ist das man nicht auf die untermenüpunkte darufdrücken kann were net wenn sich den code jemand mal ansehen kann ich schetze das ist wegen den hover aber ich weis auch nicht wie ich das anders machen soll

nav{
    position:fixed;
    position: absolute;
    top:10.5em;
    left:12em;    
    display:block;
    height:2.5em;
    text-align:left;
    
    
}     

nav li:hover #sub{
    display: block;  
    position:absolute;    
    
   }
   
  nav ul li:hover #sub{
    left:9.375em
    
  } 


nav ul {
    display:block;
    list-style: none;
    margin: 0em;
    padding: 0em;
}

nav ul li {
    position:relative;
    display:block;
    margin: auto;
    
}
nav ul li a {
    color:green;
    font-size: 1.125em;
    line-height:1.5em;
    margin: 0em;
    padding: 0em;
    transition:background 0.2s;
    -webkit-transition:background 0.2s;
}

nav ul li a:hover {
    border-bottom: 0.15em solid #E7590B;
}
nav ul li a.active {
    border-bottom: 0.15em solid #E7590B;
}        

#sub{
position: absolute;
display: none;
    
}


#sub li a{
    display: block;
    
    
}
    
 
...zur Frage

HTML-Menüleiste oben fixieren?

Hi, ich möchte eine Webseite erstellen, bei der die Menüleiste oben am Bildschirmrand "kleben" bleibt auch wenn ich runter scrolle. Die eigentliche frage die ich habe ist jedoch, wie das geht, wenn ich noch ein Titelbild mit einbinden möchte, welches in der normalen ansicht, wenn man auf die Seite kommt über der Menüleiste ist.

Ich miene damit, dass das Titelbild mit nach oben scrollen soll, die Menüleiste aber nur bis zum oberen bildschirmrand mit nach oben scrollen soll. Ist sowas mit CSS möglich oder brauche ich dafür Java etc.?

Wäre nett, wenn ihr mir paar seiten vorschlagen könnt oder mir paar stichwörter geben könntet, wonach ich suchen soll :D

LG loubra

...zur Frage

Was möchtest Du wissen?