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

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.
 
Wenn Du diese Anzeige nicht sehen willst, registriere Dich und/oder logge Dich ein.
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?
 
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.
 
Textdokument stylesheets.css?
Kann es sein, dass du die Endungen von bekannten Dateitypen ausgeblendet hast und die Datei eigentlich stylesheets.css.txt heißt?
 
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??
 
Musste mal anders speichern.
Datei - > Speichern unter

unten nun bei Dateityp: "Alle Dateien" auswählen und dann als "stylesheets.css" abspeichern.
 
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.
 
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:
 
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.
 
Alles klar danke schön! Das sollte dann ja reichen und name.wordpress.com als url ist auch nicht schlimm ;-)

:wink:
 
Bei "Programmieren Lernen" fehlt als Alternative für dynamische Webseiten noch Java Server Pages (JSP), es gibt nicht nur PHP ;)
 
Zuletzt bearbeitet:
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
 
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??
 
Versuchs mal so:
<link rel="icon" href="./bilder/favicon.gif">
Verwende relative Pfade.
 
Habe es ausprobiert klappt nicht :( Hat vielleicht noch wer eine idee?? Wäre für jede Hilfe dankbar.
 
<link rel="shortcut icon" type="image/x-icon" href=" images/favicon.gif" />
Zum Vergrößern anklicken....
(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.
 
Zuletzt bearbeitet:
<link rel="shortcut icon" type="image/x-icon" href=" images/favicon.gif" />

damit hat es geklappt!!! thx ;)
 
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
 
Zuletzt bearbeitet:
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
Zum Vergrößern anklicken....

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
Zum Vergrößern anklicken....

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 :d):

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
 
Zuletzt bearbeitet:
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
 
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
 
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 :)
 
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?
 
Zuletzt bearbeitet:
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 :fresse: 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?
Zum Vergrößern anklicken....

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
 
Zuletzt bearbeitet:
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
 
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....
 
Zuletzt bearbeitet:
Anmelden, um zu antworten.
Hardwareluxx setzt keine externen Werbe- und Tracking-Cookies ein. Auf unserer Webseite finden Sie nur noch Cookies nach berechtigtem Interesse (Art. 6 Abs. 1 Satz 1 lit. f DSGVO) oder eigene funktionelle Cookies. Durch die Nutzung unserer Webseite erklären Sie sich damit einverstanden, dass wir diese Cookies setzen. Mehr Informationen und Möglichkeiten zur Einstellung unserer Cookies finden Sie in unserer Datenschutzerklärung.


Zurück
Oben Unten refresh