Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Metal_Head" data-source="post: 1617623" data-attributes="member: 331213">AW: CSS Navi ohne Text, aber mit GrafikenOkay, mittlerweile klappt es doch ganz gut. Die Navigation funktioniert auch. Allerdings(!) wird mir bei Dreamweaver es so angezeigt:&lt;erledigt&gt;und in Firefox so:&lt;erledigt&gt;Dreamweaver is der sache am nähesten...Nur sollte alles weiter nach links und die Grafik unten nach ganz rechts...Edit:display:inline-block war der Fehler. display:inline funktioniert!Allerdings hab ich jetzt zuviel Abstand zwischen dem header und der Navi... <img src="/styles/default/xenforo/smilies/uhm.gif"&nbsp; class="smilie" loading="lazy" alt=":(" title="Frown&nbsp; &nbsp; :(" data-shortname=":(" />In Dreamweaver ist das wieder mal okay, Firefox zeigt mir ca. 1cm luft dazwischen an...HTML:[html]&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt;&lt;title&gt;Dimensionsfabrik&lt;/title&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot; /&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;container&quot;&gt;&nbsp; &nbsp; &lt;div id=&quot;container_oben&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;header&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;navi&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;ul style=&quot;list-style: none; display:inline-block&quot;&gt;&lt;li&gt; &lt;a class=&quot;button0&quot; href=&quot;index.html&quot;&gt;&lt;/a&gt; &lt;/li&gt;&lt;li&gt; &lt;a class=&quot;button1&quot; href=&quot;index.html&quot;&gt;&lt;/a&gt; &lt;/li&gt;&lt;li&gt; &lt;a class=&quot;button2&quot; href=&quot;uebermich.html&quot;&gt;&lt;/a&gt; &lt;/li&gt;&lt;li&gt; &lt;a class=&quot;button3&quot; href=&quot;index.html&quot;&gt;&lt;/a&gt; &lt;/li&gt;&lt;li&gt; &lt;a class=&quot;button4&quot; href=&quot;uebermich.html&quot;&gt;&lt;/a&gt; &lt;/li&gt;&lt;li&gt; &lt;a class=&quot;button5&quot; href=&quot;index.html&quot;&gt;&lt;/a&gt; &lt;/li&gt;&lt;li&gt; &lt;a class=&quot;button6&quot; href=&quot;index.html&quot;&gt;&lt;/a&gt; &lt;/li&gt;&lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;[/html]CSS:[code]@charset &quot;utf-8&quot;;/* CSS Document */body{&nbsp; &nbsp; background: #FFF;&nbsp; &nbsp; color: #000; /* Schriftfarbe */&nbsp; &nbsp; font: &quot;Courier New&quot;, Courier, monospace;&nbsp; &nbsp; font-size: 12px/* Schriftgroesse und Schriftart */&nbsp; &nbsp; margin: 0px; /* Aussenabstand */}p, pre{&nbsp; &nbsp; padding: 0px 0px; /* Innenabstand */&nbsp; &nbsp; margin: 0px; /* Aussenanbstand */&nbsp; &nbsp; color: #000; /* Schriftfarbe */} a {&nbsp; &nbsp; color: #000;}a:visited {&nbsp; &nbsp; color:#333;}a:hover {&nbsp; &nbsp; color: #333;}a:active {&nbsp; &nbsp; color:#333;}h1 {&nbsp; &nbsp; font-size: 24px;&nbsp; &nbsp; font-weight: normal;&nbsp;}h2 {&nbsp; &nbsp; font-size: 18px;&nbsp; &nbsp; font-weight: normal;}#container{&nbsp; &nbsp; background-color:#FFF;&nbsp; &nbsp; width:auto;&nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; padding: 0;}#container_oben{&nbsp; &nbsp; background-color:#FFF;&nbsp; &nbsp; width:1024px;&nbsp; &nbsp; height:244px;}#header{&nbsp; &nbsp; background-image:url(Bilder/header.png);&nbsp; &nbsp; width:1024px;&nbsp; &nbsp; height:185px;}#navi{&nbsp; &nbsp; width:1024px;&nbsp; &nbsp; height:59px;&nbsp; &nbsp; float:left;}a.button0:link, a.button0:visited {&nbsp; &nbsp; background-image: url(Bilder/leer_1.png);&nbsp; &nbsp; width:57px;&nbsp; &nbsp; height:59px;&nbsp; &nbsp; float:left;}a.button1:link, a.button1:visited {&nbsp; &nbsp; background-image: url(Bilder/start.png);&nbsp; &nbsp; float:left;&nbsp; &nbsp; width:141px;&nbsp; &nbsp; height:59px;}a.button1:hover {&nbsp; &nbsp; background-image: url(Bilder/start_over.png);&nbsp; &nbsp; float:left;&nbsp; &nbsp; width:141px;&nbsp; &nbsp; height:59px;}a.button2:link, a.button2:visited {&nbsp; &nbsp; background-image: url(Bilder/ueber_uns.png);&nbsp; &nbsp; float:left;&nbsp; &nbsp; width:205px;&nbsp; &nbsp; height:59px;}a.button2:hover {&nbsp; &nbsp; background-image: url(Bilder/ueber_uns_over.png);&nbsp; &nbsp; float:left;&nbsp; &nbsp; width:205px;&nbsp; &nbsp; height:59px;}a.button3:link, a.button3:visited {&nbsp; &nbsp; background-image: url(Bilder/referenzen.png);&nbsp; &nbsp; float:left;&nbsp; &nbsp; width:231px;&nbsp; &nbsp; height:59px;}a.button3:hover {&nbsp; &nbsp; background-image: url(Bilder/referenzen_over.png);&nbsp; &nbsp; float:left;&nbsp; &nbsp; width:231px;&nbsp; &nbsp; height:59px;}a.button4:link, a.button4:visited {&nbsp; &nbsp; background-image: url(Bilder/kontakt.png);&nbsp; &nbsp; float:left;&nbsp; &nbsp; width:185px;&nbsp; &nbsp; height:59px;}a.button4:hover {&nbsp; &nbsp; background-image: url(Bilder/kontakt_over.png);&nbsp; &nbsp; float:left;&nbsp; &nbsp; width:185px;&nbsp; &nbsp; height:59px;}a.button5:link, a.button5:visited {&nbsp; &nbsp; background-image: url(Bilder/blog.png);&nbsp; &nbsp; float:left;&nbsp; &nbsp; width:147px;&nbsp; &nbsp; height:59px;}a.button5:hover {&nbsp; &nbsp; background-image: url(Bilder/blog_over.png);&nbsp; &nbsp; float:left;&nbsp; &nbsp; width:147px;&nbsp; &nbsp; height:59px;}a.button6:link, a.button6:visited {&nbsp; &nbsp; background-image: url(Bilder/leer_2.png);&nbsp; &nbsp; float:left;&nbsp; &nbsp; width:57px;&nbsp; &nbsp; height:59px;}[/code]Fehler kann ich keine finden. Ein Freund von mir hat sich den Code auch angeschaut, aber fand auch nichts...Unglaublich, was eine Navi für Arbeit machen kann...Edit: display:inline-block war der Fehler. display:inline funktioniert!Allerdings hab ich jetzt zuviel Abstand zwischen dem header und der Navi... <img src="/styles/default/xenforo/smilies/uhm.gif"&nbsp; class="smilie" loading="lazy" alt=":(" title="Frown&nbsp; &nbsp; :(" data-shortname=":(" />In Dreamweaver ist das wieder mal okay, Firefox zeigt mir ca. 1cm luft dazwischen an...Edit 2: Auch erledigt... Hätte nur nochmal padding und margin auf 0 für die ul setzen sollen <img src="/styles/default/xenforo/smilies/zwinker.gif"&nbsp; class="smilie" loading="lazy" alt=";)" title="Wink&nbsp; &nbsp; ;)" data-shortname=";)" /></blockquote>

[QUOTE="Metal_Head, post: 1617623, member: 331213"] [b]AW: CSS Navi ohne Text, aber mit Grafiken[/b] Okay, mittlerweile klappt es doch ganz gut. Die Navigation funktioniert auch. Allerdings(!) wird mir bei Dreamweaver es so angezeigt: <erledigt> und in Firefox so: <erledigt> Dreamweaver is der sache am nähesten... Nur sollte alles weiter nach links und die Grafik unten nach ganz rechts... Edit:display:inline-block war der Fehler. display:inline funktioniert! Allerdings hab ich jetzt zuviel Abstand zwischen dem header und der Navi... :( In Dreamweaver ist das wieder mal okay, Firefox zeigt mir ca. 1cm luft dazwischen an... HTML: [html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Dimensionsfabrik</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="container"> <div id="container_oben"> <div id="header"></div> <div id="navi"> <ul style="list-style: none; display:inline-block"> <li> <a class="button0" href="index.html"></a> </li> <li> <a class="button1" href="index.html"></a> </li> <li> <a class="button2" href="uebermich.html"></a> </li> <li> <a class="button3" href="index.html"></a> </li> <li> <a class="button4" href="uebermich.html"></a> </li> <li> <a class="button5" href="index.html"></a> </li> <li> <a class="button6" href="index.html"></a> </li> </ul> </div> </div> </div> </body> </html>[/html]CSS: [code]@charset "utf-8"; /* CSS Document */ body{ background: #FFF; color: #000; /* Schriftfarbe */ font: "Courier New", Courier, monospace; font-size: 12px/* Schriftgroesse und Schriftart */ margin: 0px; /* Aussenabstand */ } p, pre{ padding: 0px 0px; /* Innenabstand */ margin: 0px; /* Aussenanbstand */ color: #000; /* Schriftfarbe */ } a { color: #000; } a:visited { color:#333; } a:hover { color: #333; } a:active { color:#333; } h1 { font-size: 24px; font-weight: normal; } h2 { font-size: 18px; font-weight: normal; } #container{ background-color:#FFF; width:auto; margin: 0 auto; padding: 0; } #container_oben{ background-color:#FFF; width:1024px; height:244px; } #header{ background-image:url(Bilder/header.png); width:1024px; height:185px; } #navi{ width:1024px; height:59px; float:left; } a.button0:link, a.button0:visited { background-image: url(Bilder/leer_1.png); width:57px; height:59px; float:left; } a.button1:link, a.button1:visited { background-image: url(Bilder/start.png); float:left; width:141px; height:59px; } a.button1:hover { background-image: url(Bilder/start_over.png); float:left; width:141px; height:59px; } a.button2:link, a.button2:visited { background-image: url(Bilder/ueber_uns.png); float:left; width:205px; height:59px; } a.button2:hover { background-image: url(Bilder/ueber_uns_over.png); float:left; width:205px; height:59px; } a.button3:link, a.button3:visited { background-image: url(Bilder/referenzen.png); float:left; width:231px; height:59px; } a.button3:hover { background-image: url(Bilder/referenzen_over.png); float:left; width:231px; height:59px; } a.button4:link, a.button4:visited { background-image: url(Bilder/kontakt.png); float:left; width:185px; height:59px; } a.button4:hover { background-image: url(Bilder/kontakt_over.png); float:left; width:185px; height:59px; } a.button5:link, a.button5:visited { background-image: url(Bilder/blog.png); float:left; width:147px; height:59px; } a.button5:hover { background-image: url(Bilder/blog_over.png); float:left; width:147px; height:59px; } a.button6:link, a.button6:visited { background-image: url(Bilder/leer_2.png); float:left; width:57px; height:59px; } [/code]Fehler kann ich keine finden. Ein Freund von mir hat sich den Code auch angeschaut, aber fand auch nichts... Unglaublich, was eine Navi für Arbeit machen kann... Edit: display:inline-block war der Fehler. display:inline funktioniert! Allerdings hab ich jetzt zuviel Abstand zwischen dem header und der Navi... :( In Dreamweaver ist das wieder mal okay, Firefox zeigt mir ca. 1cm luft dazwischen an... Edit 2: Auch erledigt... Hätte nur nochmal padding und margin auf 0 für die ul setzen sollen ;) [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?