Rund ums Webseiten erstellen. *Update: 21.10.2005 20:21Uhr*

[sabermaul]

Versuchs mal so:
<link rel="icon" href="./bilder/favicon.gif">
Verwende relative Pfade.

[Mugen on fire]

Habe es ausprobiert klappt nicht Hat vielleicht noch wer eine idee?? Wäre für jede Hilfe dankbar.

[buyman]

<link rel="shortcut icon" type="image/x-icon" href=" images/favicon.gif" />

(ohne das leerzeichen natürlich)

So habe ich es bei mir eingebunden. Evtl. hast du noch ein favicon.ico im (root-)Verzeichnis liegen? Da kanns passieren dass das angezeigt wird.

[Mugen on fire]

<link rel="shortcut icon" type="image/x-icon" href=" images/favicon.gif" />

damit hat es geklappt!!! thx

[Decyl]

Hi,
ich hab mal eine kleine Frage.. und zwar gibt es einen html code der ein Hintergrundbild automatisch auf die Bildschirmauflösung des Benutzers skaliert?
Ich sag schonmal danke

MfG Decyl

[Pheenix]

Wie bekomm ich die Projektleiste (Architektur etc.) weiter nach oben?
Hendrik Wischhusen - Photographie

CSS
http://www.hendrik-wischhusen.de/cms...s/css/main.css

Bin ich blöd, oder warum finde ich .pageContent (den DIV, in dem die Leiste wohl ist?) net in der CSS. Ist das beabsichtigt?

Und: Div einfach als position absolute geben, und dann per left: und top: positionieren.

Gruß,
Sebastian

[TrOuble@LLM]

Wie bekomm ich die Projektleiste (Architektur etc.) weiter nach oben?
Hendrik Wischhusen - Photographie

CSS
http://www.hendrik-wischhusen.de/cms...s/css/main.css

für den bestehenden HTML-Markup:

#content {
clear:both;
margin-bottom:50px;
margin-top:-100px;
}

.pageContent{
margin-bottom:50px;
}

Sauberer und sinnvoller wäre es, wenn du die Sub-Navigation in den Kopfbereich mit rein ziehst - hat da eigentlich nichts zu suchen ;-)

Gruß TrOuble

---------- Beitrag hinzugefügt um 21:03 ---------- Vorheriger Beitrag war um 20:55 ----------

Hi,
ich hab mal eine kleine Frage.. und zwar gibt es einen html code der ein Hintergrundbild automatisch auf die Bildschirmauflösung des Benutzers skaliert?
Ich sag schonmal danke

MfG Decyl

Jaein - wirklich sinnvoll ist so etwas auch nicht. Willste mal die Grafik zeigen, die du meinst? Normalerweise zerlegt man solch eine Grafik dann in mehrere Elemente (und wiederholt die dann). Ansonsten funktioniert das hier (ob es den gewünschten Effekt für dich erzielt ist eine andere Frage ):

HTML:

<img alt="" src="bild.jpg" id="bg" />

CSS:

img#bg{
position:absolute;
width:100%;
z-index:-1;
}

Damit das Bild auf den kompletten Viewframe und nicht nur die Viewframe-Breite skaliert wird:

img#bg{
height:100%;
position:absolute;
width:100%;
z-index:-1;
}

Gruß TrOuble

[Decyl]

Danke, hat funktioniert

so, ich hab aber noch ein Problem ^^
Es handelt sich um ein, mit css gestalltetes, drop down Menü. Im Internet Explorer weigert sich das Menü die drop down Links auszuklappen, desweiteren wurde das Menü positioniert. Im Firefox wird alles richtig angezeigt, nur im IE stimmt die position nicht. Gibt es da eine Lösung?

MfG Decyl

[TrOuble@LLM]

Habe grad keinen Rechner zur Hand (hwluxx iPhone App ) aber: wie ist das Menü aufgebaut? Wie klappst du das Menü aus? Per pseudo selector :hover auf dem LI? Wenn ja: da liegt das Problem der IE 6 versteht den Selektor leider nur auf dem A-Tag. Kannst du einfach mi nem (z.B. jQuery) Javascript Dreizeiler beheben. Oder such mal bei google nach IE hover fix. Wenn du es nicht hinbekommst kann ich dir sonst morgen kurz die Lösung schreiben.

Edit: hab noch mal drüber gelesen... Klappt das Menü aus oder nicht? Wenn's nur falsch positioniert ist kannste das mit den Standard IE Bugfix CSS Selektoren richtig positionieren. Sprich: "* html . deineklasse" für den IE 6 und "*+html .deineklasse" für den IE 7.

Gruß TrOuble

[Decyl]

Find ich toll das du mir so hilfst.
Ich bin mit meinem Latein am Ende.

Die Probleme sind nochmal:
im Internetexplorer wird
a) die Position falsch angezeigt (vom kompletten Menü)
und
b) die Untermenüs klappen sich nicht aus ... also garnicht ...

im Firefox und anderen browser geht alles einwandfrei

html

<meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>The Packs</title>
    <link rel="stylesheet" href="http://file1.npage.de/003931/25/html/menu_style.css" type="text/css
/>

<br>
    <br>
    <div class="menu" style="position:fixed; top:10px; left:300px;" align="top">
                <ul>
            <li><a href="http://the-packs.npage.de/willkommen_39376319.html" id="current">Home</a>
            <ul>
                    <li><a href="http://the-packs.npage.de/password_mitlgieder_57586856.html">Login</a></li>
            </ul>
            <li><a href="http://the-packs.npage.de/ueber_uns_97546155.html" id="current">Über Uns</a></li>
            <li><a href="#" id="current">Die Band</a>
                <ul>
                    <li><a href="http://the-packs.npage.de/philipp_4797708.html"><b>P</b>hilipp</a></li>
                    <li><a href="http://the-packs.npage.de/alexander_54021233.html"><b>A</b>lexander</a></li>
                    <li><a href="http://the-packs.npage.de/christian_74336079.html"><b>C</b>hristian</a></li>
                    <li><a href="http://the-packs.npage.de/kleber_13901711.html">"<b>K</b>leber"</a></li>
                    <li><a href="http://the-packs.npage.de/simon_48037128.html"><b>S</b>imon</a></li>
               </ul>
                <li><a href="http://the-packs.npage.de/repertoire_44691626.html" id="current">Repertoire</a></li>
                  </li>

            <li><a href="#" id="current">Contact</a>
                <ul>
                <li><a href="http://the-packs.npage.de/guestbook.html">Gästebuch</a></li>
                <li><a href="http://the-packs.npage.de/kontakt.html">Kontakt</a></li>
                <li><a href="http://www.myspace.com/thepacksband" target="_new">MySpace</a></li>
                <li><a href="http://the-packs.npage.de/linkliste.html">Links</a></li>
        <li><a href="http://the-packs.npage.de/haftungsausschluss_99843568.html">Impressum</a></li>
                </ul>
          </li>
        </ul>
    </div>
</meta>


css


.menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font-family:verdana,geneva,arial,helvetica,sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#666666;
    }
.menu ul
{
    background:url(http://file1.npage.de/003931/25/bilder/menu-bg.gif) top left repeat-x;
    height:43px;
    list-style:none;
    margin:0;
    padding:0;
    }
    .menu li{
        float:left;
        padding:0px 8px 0px 8px;
        }
    .menu li a
{
        color:#666666;
        display:block;
        font-weight:bold;
        line-height:43px;
        padding:0px 25px;
        text-align:center;
        text-decoration:none;
        }
        .menu li a:hover{
            color:#000000;
            text-decoration:none;
            }
    .menu li ul{
        background:#e0e0e0;
        border-left:2px solid #000000;
        border-right:2px solid #000000;
        border-bottom:2px solid #000000;
        display:none;
        height:auto;
        filter:alpha(opacity=95);
        opacity:0.95;
        position:absolute;
        width:225px;
        z-index:8;
        /*top:1em;
        /*left:0;*/
        }
    .menu li:hover ul{
        display:block;
}
    .menu li li {
        display:block;
        float:none;
        padding:0px;
        width:225px;
        }
    .menu li ul a{
        display:block;
        font-size:12px;
        font-style:normal;
        padding:0px 10px 0px 15px;
        text-align:left;
        }
        .menu li ul a:hover{
            background:#949494;
            color:#000000;
            opacity:1.0;
            filter:alpha(opacity=100)
            }
    .menu p{
        clear:left;
        }   
    .menu #current{
        background:url(http://file1.npage.de/003931/25/bilder/current-bg.gif) top left repeat-x;
        color:#ffffff;
        }

Wenn es dir nichts ausmacht würde ich gern das Angebot mit der Lösung in Anspruch nehmen. Danke

[TrOuble@LLM]

Hoverhelper (jQuery):

       $().ready(function() {
              $('.menu ul li').hover(
              function() {
                       $(this).addClass('hovered');
              }, function() {
                    $(this).removeClass('hovered');
              });
       });

Dazu musste voher jQuery einbinden:
jQuery: The Write Less, Do More, JavaScript Library

Zusätzlich musste eine CSS Anpassung vornehmen:

.menu li:hover ul, .menu li.hovered ul{
        display:block;
}

Ungetestet aber sollte so funktionieren ... ist das dein kompletter HTML Markup gewesen? Weil der ist ja von vorne bis hinten falsch Erster Schritt bei Fehlern ist den Markup zu validieren: http://validator.w3.org/

Für das Positionierungsproblem: haste mal kurz nen Link da, wo du das eingebaut hast?

[Pheenix]

Hoverhelper (jQuery):

       $().ready(function() {
              $('.menu ul li').hover(
              function() {
                       $(this).addClass('hovered');
              }, function() {
                    $(this).removeClass('hovered');
              });
       });

Dazu musste voher jQuery einbinden:
jQuery: The Write Less, Do More, JavaScript Library

Zusätzlich musste eine CSS Anpassung vornehmen:

.menu li:hover ul, .menu li.hovered ul{
        display:block;
}

Ungetestet aber sollte so funktionieren ... ist das dein kompletter HTML Markup gewesen? Weil der ist ja von vorne bis hinten falsch Erster Schritt bei Fehlern ist den Markup zu validieren: The W3C Markup Validation Service

Für das Positionierungsproblem: haste mal kurz nen Link da, wo du das eingebaut hast?

Dem Quellcode zu folge dürfte es diese Website sein: http://the-packs.npage.de

Dazu ein paar gutgemeinte (nicht böse!) Ratschläge:

• Das Hintergrundbild wird einfach lustig herumskaliert, bei mir ist da ein dicker weißer fetter Rand links, sehr unschön
• Nur eine Schriftart verwenden, und nicht gleich 30 über die Website verstreut. Kleiner Tipp: Comic Sans MS macht sich zwar super auf Einladungskarten für Kindergeburtstage, auf Websiten sieht das aber immer sehr fragwürdig aus.
• Die Inhalte sinnvoll positionieren, meinem Gefühl nach schweben die auf der Website einfach nur etwas sinnlos herum
• Außerdem ist das Design, der Style irgendwie etwas fragwürdig im insgesamten. Ich erkenne hier keine klaren Linien, und weiß garnicht (wie schon erwähnt) wo ich anfangen soll zu lesen.

Insgesamt würde ich dir empfehlen dein Wissen in sachen HTML/CSS und eventuell je nach Bedarf JavaScript auszubauen, weil die Website bisher (wenn es die ist die ich denke, die die ich über die Links vorfand) sehr unstrukturiert ist.

Und wenn du wirklich was lernen willst, dann würde ich auch eher Abstand von diesen Homepagebastelkästen nehmen.

Nachschlagwerke gibts auch für HTML und ähnliches zu Hauf: SelfHTML, CSS4YOU, W3Schools usw.

Gruß,
Sebastian

[b34ri]

Hierzu ein klar strukturiertes und gut aufgebautes Tutorial rund um XHTML und CSS, das ich nur jedem empfehlen kann:
Einführung in XHTML, CSS und Webdesign

Auch als Nachschlagewerk nicht zu verachten!