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

Mugen on fire · 10.02.2010

Hi endlich habe ich mal Zeit gefunden mich mit HTML zu beschäftigen, Das klappte am Anfang auch recht gut, index.html erstellt Quelltext mit Head/Body usw.. eingefügt, Dann wollte ich mich an das stylesheet machen also habe ich diese datei hier erstellt stylesheet.css und habe dann diesen Tag in meiner index.html eingefügt <link rel="stylesheet" type="text/css" media="screen, projection" href="stylesheet.css"> nur leider funktionierte das dann nicht, Liegt das daran dass ich noch kein FTP zur Verfügung habe? Arbeite derzeit nur bei mir auf dem Desktop mit html, Oder was mache ich falsch?? Entschuldigt bitte für diese doofen Anfängerfragen aber manchmal mangelt es mir dann doch am Verständnis wenn ich mich etwas neuem zu wende, Würde mich freuen wenn mir wer sagen könnte was meine nächsten Schritte sein sollten.

Jean Pernod · 10.02.2010

Die stylesheet.css muss dann im selben Ordner liegen wie deine index.html. FTP (Webserver) brauchste dafür net.

Woher weißte denn, dass es nicht funktionierte? In der Stylesheet.css steht aber schon was drin, was du irgendwie in deiner index.html verwendest, oder?

Mugen on fire · 10.02.2010

Ich nutze diese webseite hier klick zum lernen von html da wird es bildlich dargestellt wie es aussehen müsste.

Meine index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test-hp</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="index,follow">
<meta name="description" content="Muster-Homepage mit einem Beispiel, wie eine Homepage erstellt wird.">
<meta name="keywords" content="Muster, Homepage, Beispiel, der, Erstellung, einer, Webseite">
<meta name="language" content="de">
<link rel="stylesheet" type="text/css" media="screen, projection" href="stylesheet.css">
<link rel="shortcut icon" href="favicon.ico">
</head>

<body>
<div id="rahmen">
<div id="header">
<div id="logo">
<h1>
TEST-HP
</h1>
</div>
<div id="navigation">
<ul>
<li>
<a href="index.html">Startseite</a>
</li>
<li>
<a href="fotos.html">Fotos</a>
</li>
<li>
<a href="links.html">Links</a>
</li>
<li>
<a href="gaestebuch.html">Gästebuch</a>
</li>
<li>
<a href="impressum.html">Impressum und Kontakt</a>
</li>
</ul>
</div>
</div>
<div id="inhalt">
<h2>
Nachfolgend ein Blindtext
</h2>
<p>
hier könnte ihr name stehen...
</p>
</div>
<div id="footer">
<p>
Mugen on fire
</p>
</div>
</div>
</body>
</html>

mein Textdokument stylesheet.css

body {font-family: Arial, Helvetica, sans-serif; background-color: #ffffff;}
a {color: #00008B; font-weight: bold;}
a:visited {color: #3366CC; font-weight: bold;}
a:active {color: #ff0000;}
a:hover {color: #ffffff; background-color: #00008B; font-weight: bold;}
#rahmen {border: solid #000000 1px; padding: 15px;}
#header {background-image: url(bg1.gif); padding-top: 5px; border: dotted #cccccc 1px; text-align: center;}
#navigation li {display: inline; padding: 10px;}
#footer {text-align: right; font-size: small;}

beide Dateien liegen im selben Ordner.

Jean Pernod · 11.02.2010

Textdokument stylesheets.css?
Kann es sein, dass du die Endungen von bekannten Dateitypen ausgeblendet hast und die Datei eigentlich stylesheets.css.txt heißt?

Mugen on fire · 11.02.2010

Eigentlich habe ich nix umgestellt, Es wird auch stylesheet.css angezeigt wenn ich die datei umbenennen möchte, wenn ich aber auf öffnen mit gehe steht die datei so da wie von dir erwähnt stylesheets.css.txt, Wie ändere ich das wieder ab??

Jean Pernod · 11.02.2010

Musste mal anders speichern.
Datei - > Speichern unter

unten nun bei Dateityp: "Alle Dateien" auswählen und dann als "stylesheets.css" abspeichern.

Mugen on fire · 13.02.2010

Dankeschön hat funktioniert^^ Als nächstes wollte ich nun mein Header in die Webseite einbinden, Das wird denke ich mal nicht mehr ohne FTP(Webspace) gehen oder?? Darum meine frage kann mir jemand einen guten Anbieter empfehlen wo ich domain und wepspace usw... mieten kann?? kann ruhig mit kosten verbunden sein, Hauptsache die Qualität und Leistung überzeugen, Welchen Anbieter nutzt denn FORUMDELUXX??Der scheint ja ganz gut zu sein.

slx3d_ · 13.02.2010

ich empfehle da gern strato.de und hosteurope.de, zuverlässig und gutes preis-/leistungsverhältnis.

Jean Pernod · 13.02.2010

Empfehle auch hosteurope.de

FantajiNNN · 13.02.2010

Nabend,

hab mal 'ne kleine Frage - was "brauch" ich alles für 'nen kleinen Blog?!
Free Blogs gibt es glaub ich auch wordpress z.B, aber reichen die für den Anfang?

:wink:

Kasn · 14.02.2010

suchst du nen hoster oder software?

Wenn du einfach nur bloggen willst dann kannst du einfach bei wordpress.com, blogger.com oder blogspot.com kostenlos ein blog registieren.

Als Blogsoftwaere wuerde ich wordpress oder s9y verwenden.

FantajiNNN · 14.02.2010

Alles klar danke schön! Das sollte dann ja reichen und name.wordpress.com als url ist auch nicht schlimm ;-)

:wink:

4th Floor · 20.02.2010

Bei "Programmieren Lernen" fehlt als Alternative für dynamische Webseiten noch Java Server Pages (JSP), es gibt nicht nur PHP

aelo · 20.02.2010

JSP ist echt ganz nett, durfte es mir letztens auch kurz ansehen

übrigens hier noch etwas sehr interessantes:
http://www.vdr-developer.org/cgi-bin/cvsweb.cgi/live/pages/edit_timer.ecpp?rev=1.41

C++ eingebettet in HTML Code, ist ein Plugin für den VDR
und so wie es aussieht haben die allerdings auch einen eigenen einfachen HTTP-Server geschrieben damit das funktioniert, aber die Idee finde ich auf jeden Fall echt super!

mfg

Mugen on fire · 04.05.2010

Favicon einbinden

Hi ich habe heute versucht mein favicon in meine webseite einzubinden

Meine schritte:

1. Habe ich ein Bild mit den maßen 16x16 angefertigt

2. Dann habe ich es gespeichert und es favicon.ico genannt

3. In meiner index.html habe ich es dann im head bereich wie folgt verlinkt:
<link rel="shortcut icon" href="http://www.meineseite.de/favicon.ico>

4. Beide Dateien via ftp hochgeladen

Nur leider klappt es nicht

Was habe ich falsch gemacht??

sabermaul · 04.05.2010

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

Mugen on fire · 04.05.2010

Habe es ausprobiert klappt nicht

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

buyman · 05.05.2010

<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 · 05.05.2010

Decyl · 15.06.2010

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.2010

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

CSS
http://www.hendrik-wischhusen.de/cms/site/themes/aplonis/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? :hmm:

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

Gruß,
Sebastian

TrOuble@LLM · 18.06.2010

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

CSS
http://www.hendrik-wischhusen.de/cms/site/themes/aplonis/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 ----------

Decyl schrieb:
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.2010

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.2010

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.2010

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([url]http://file1.npage.de/003931/25/bilder/menu-bg.gif[/url]) 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([url]http://file1.npage.de/003931/25/bilder/current-bg.gif[/url]) 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.2010

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 :fresse:

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.2010

TrOuble@LLM schrieb:
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.2011

HTML CSS Tutorial

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.2012

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.2012

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

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

Neuling

Enthusiast

Neuling

Enthusiast

Neuling

Enthusiast

Neuling

This is the Way!

Enthusiast

TaaHM-Holic, Diva

Mr.Chrome, SCHANITZELKÖNIG

TaaHM-Holic, Diva

Enthusiast

software developer

Neuling

Semiprofi

Neuling

Fotomaster August '12

Neuling

Enthusiast

Enthusiast

Enthusiast

Enthusiast

Enthusiast

Enthusiast

Enthusiast

Enthusiast

Neuling

Neuling

Neuling

Ähnliche Themen

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