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

**sabermaul** · 04.05.10, 20:55

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

**Mugen on fire** · 04.05.10, 23:54

Habe es ausprobiert klappt nicht

Hat vielleicht noch wer eine idee?? Wäre für jede Hilfe dankbar.

**buyman** · 05.05.10, 08:56

(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** · 05.05.10, 19:25

**Decyl** · 15.06.10, 15:29

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** · 18.06.10, 20:03

Zitat von Ringkeeper

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** · 18.06.10, 20:55

Zitat von Ringkeeper

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:

Code:

#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 ----------

Zitat von 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

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:

Code:

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

CSS:

Code:

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

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

Code:

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

Gruß TrOuble

**Decyl** · 21.06.10, 19:33

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** · 21.06.10, 22:44

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** · 22.06.10, 22:03

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

Code:

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** · 23.06.10, 09:18

Hoverhelper (jQuery):

Code:

       $().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:

Code:

.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** · 23.06.10, 13:24

Zitat von TrOuble@LLM

Hoverhelper (jQuery):

Code:

       $().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:

Code:

.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** · 26.03.11, 12:48

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!

**crooks** · 27.06.12, 16:31

Hi!

Ich hab mal eine Frage, ich programmiere gerade eine Website für jemanden der anschließend gern selbst Neuigkeiten usw auf die Website stellen würde aber über keine HTML Fähigkeiten verfügt.
Ich würde ihm das gern so einfach wie möglich machen, wie würdet ihr das lösen?
Ich dachte an so eine Art Online Interface bei dem man nix falsch machen?

Ich hoffe ihr könnt mir helfen

**pointX** · 27.06.12, 19:25

Selbst Programmieren ist ziemlich aufwendig. Ich würde mich nach einem CMS umschauen.

Joomla, Typo3, wordpress, PHP-Fusion, drupal .... und wie sie alle heißen.

Voraussetzung ist meistens PHP + eine Datenbank (MySQL z.B.), es gibt aber auch Datei-basierende (wovon ich eher abrate, auser es geht halt nicht anders).

Zum selbst programmieren: zum üben schön & gut, aber wieso das Rad neu erfinden ?
Da würde ich mich lieber für ein gutes System entscheiden, welches auch Erweiterungen / templates hat und meine Zeit in eine gutes template investieren, damit die Seite nach etwas aussieht.

Wenn du aber schon viel Zeit in die Seite investiert hast und es nur noch darum geht, dass er selbst Inhalte so einfach wie möglich erstellen kann, dann ist ein WYSIWYG Editor das richtige.
ckeditor sagt mir was, den habe ich selbst mal benutzt für ein Projekt.

PS: nächstes mal vllt ein neuer Thread ? Der hier ist schon über 1 Jahr alt....

**Speedfan** · 25.11.12, 19:13

Schade das der Thread seit 8 Jahren nicht mir aktualisiert wird.

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

LinkBack

Themen-Optionen

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

HTML CSS Tutorial

Berechtigungen

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

LinkBack

Themen-Optionen

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

HTML CSS Tutorial

Berechtigungen

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

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