Text neben Navigatoren positionieren - Quellcode vorhanden!

    Hallo an alle und vor allem jene, die mir weiterhelfen können :lol:.
    Also, ich programmiere noch nicht so lange html bzw. erstelle ich ebenso kurz das design meiner hps mit css.
    deshalb meine frage: wie kann ich meine navigatoren links neben dem text positioneren? wie funktioniert das in diesem fall genau mit den Boxen!
    hier die quellcodes der startsite
    <html>
    <title> Betonwerk M&uuml;hlb&ouml;ck - 5163 Palting/Mattsee </title>
    <head> <center><h1>Betonwerk M&uuml;hlb&ouml;ck</h1></center>
    <style type="text/css">
    <!--
    h1{color:#FFFF00; letter-spacing:30; center; font-family:arial;background-image:url("palting.jpg");
    background-position:center;}
    body{font-family:arial;
    }
    -->
    </style>
    <link rel="stylesheet" href="design_f&uuml;r_betonwerk.css" type="text/css">
    </head>
    <body>
    </div>
    <center>
    <div style ="background-color:yellow;
    width:400px;
    height:100px;
    border:4px red solid;
    margin:10px;
    text-align:center;
    ">
    </center>
    <font size="5">Herzlich Willkommen!    </font>



    <font size="4">Betonwerk Anton Mühlb&ouml;ck</font> </p>



    5163 Palting-Mattsee </p>



    Telefon: 06217/7428 </p>
    </div>
    <div id="navi";>
    <ul>
    [*]Home
    [*]Produkte
    [*]Standort
    [*]Geschichte
    [*]Betriebsgel&auml;nde
    [/list]
    </body>
    </html>
    und der ausgelagerten css-design datei
    <html>
    <head>
    <link rel="stylesheet" type="text/css"
    href="design_f&uuml;r_betonwerk.css" />
    <style type="text/css">
    <!--
    #navi {
    align=left;
    width:200px;
    text-align:left;
    margin-top:10px;
    margin-bottom:10px;
    margin-left:20px;
    margin-right:15px;
    #navi ul { list-style:none; }
    #navi li {
    background-color:yellow;
    border-top:1px black solid;
    border-left:25px orange solid;
    border-bottom:1px red solid;
    border-right:2px red solid;
    margin-top:10px;
    padding-top:8px;
    padding-bottom:8px;
    padding-left:8px;
    padding-right:8px;}
    -->
    <!--
    body{background-color:#00C8FF;
    }
    </style>
    </head>
    <body>
    </body>
    </html>
    Ich bitte euch wenn möglich einfach um eine Ergänzung im Code und ne kurze Erklärung dazu.
    als hilfestellung die adresse der hp
    http://www.betonwerk-muehlboeck.at.tt
    ps: warum werden bei meiner hp die bilder im internet nicht angezeigt, die aber in der browservorschau schon zu sehen sind?

    danke im voraus!
    lg philipp

    Da sind zunächst einige grundlegende Fehler in der Reihenfolge deines Quelltextes.
    Der muss generell so aufgebaut sein:

    Doctype

    <html>

    <head>
    hierein kommen meta-Angaben und die CSS-Style-Angaben bzw. der Verweis auf die CSS-Datei.

    </head>

    <body>
    hierein kommen header, Navi und Content der Homepage
    </body>
    </html>

    Sachen wie dies

    Code
    <center><h1>Betonwerk M&uuml;hlb&ouml;ck</h1></center>

    haben im head nichts zu suchen, sondern gehören in den body.
    Hier

    Code
    <body> 
</div>

    wird ein div geschlossen, der vorher nicht geöffnet war. >>> Löschen!
    Wenn du bereits eine CSS-Datei verwendest, dann solltest du konsequenter Weise auch alle Style-Angaben da rein schreiben.
    Also kannst du Dinge wie dies

    Code
    <div style ="background-color:yellow; 
width:400px; 
height:100px; 
border:4px red solid; 
margin:10px; 
text-align:center; 
">

    aus dem HTML-Teil rausnehmen und in die CSS verlagern.
    Auf diese Weise solltest du deinen Quellcode nochmal sortieren. Zur Grundstruktur des Aufbaus siehe hier

    Was nun die Anordnung und Positionierung innerhalb des body betrifft, sieh dir mal die Layout-Links bei den FAQ's II/2 an. Hier findest du viele Beispiele für die Anordnung der jeweiligen div's.

    Zur CSS-Datei:
    Hier kommen nur die Elemente mit den Style-Angaben rein, ohne "Vor- und Nachgeplänkel".
    Somit musst du hier den Anfang

    HTML
    <html> 
<head> 
<link rel="stylesheet" type="text/css" 
href="design_f&uuml;r_betonwerk.css" /> 
<style type="text/css"> 
<!--


    und das Ende

    Code
    </style> 
</head> 
<body> 
</body> 


</html>

    löschen.

    Versuch mal auf diese Weise etwas Struktur reinzubekommen und melde dich danach ggf. nochmal.

    In deinem Quelltext kann ich (außer bei h1 mit bg-image) keinen einzigen Bildverweis finden. Und bei h1 selbst muss wie bereits oben erwähnt in den body. Deshalb können auch keine Bilder angezeigt werden.


    werd mein bestes geben um meine fehler zu verbessern, dankeschön für die nette hilfe :D !

    Also die Quelltexte hab ich jetzt nach deinen Anweisungen überarbeitet:
    <html>
    <head>
    <title> Betonwerk M&uuml;hlb&ouml;ck - 5163 Palting/Mattsee </title>
    <link rel="stylesheet" href="design_f&uuml;r_betonwerk.css" type="text/css">
    </head>
    <body>
    <center><h1>Betonwerk M&uuml;hlb&ouml;ck</h1></center>
    <div id="navi";>
    <ul>
    [*]Home
    [*]Produkte
    [*]Standort
    [*]Geschichte
    [*]Betriebsgel&auml;nde
    [/list]
    </div>
    <div id="inhalt";><font size="4">Betonwerk Anton Mühlb&ouml;ck</font>


    5163 Palting-Mattsee </p>


    Telefon: 06217/7428 </p>
    </div>
    </body>
    </html>

    #navi {
    align=left;
    #navi{
    position: absolute;
    top: 20px;
    left: 20px;
    width:250px;
    height:400px;
    margin-top:20px;
    margin-left:10px;
    }
    #navi ul {list-style:none; }
    #navi li {
    background-color:yellow;
    border-top:1px black solid;
    border-left:25px orange solid;
    border-bottom:1px red solid;
    border-right:2px red solid;
    margin-top:10px;
    padding-top:8px;
    padding-bottom:8px;
    padding-left:8px;
    padding-right:8px;}
    body{background-color:#00C8FF; font-family:arial;margin: 20px;}
    #inhalt {
    margin-left: 10px;
    background-color: #ffffc6;
    text-align:center;}
    h1{color:#FFFF00; letter-spacing:30; center; font-family:arial);
    background-position:center; background-image:url("palting.jpg");}

    nun gibts aber noch ein problem
    beim raufladen mit limacity ins web... das design der seite ist nämlich nicht vorhanden, wenn mans durchs WWW betrachtet
    wahrscheinlich stimmt irgendwas mit der verlinkung zur CSS datei nicht...
    vermute ich zumindest mal! bitte um aufklärung

    und ach ja wegen den bildern, die funktionieren bei mir im Web generell nicht, auch wenn ich das bg-image aus dem Head-Bereich entferne

    Mir fehlen grad leider die Möglichkeiten, codes zu testen, aber vielleicht kann ich ja trotzdem helfen.
    bei #navi steht align: left.
    Die angabe align: left; gibbet in css nicht. nutze mal float: left;
    wegen den Bildern: so, wie dus schreibst muss das bild im selben Ordner wie die css datei liegen.
    Verlinkung der css: vielleicht hilfts, wenn du der css nen einfacheren namen gibst, z.b. betonwerk.css. das ist auch suchmschinenfreundlicher.
    Hoffe das hat geholfen, Gruß
    jojo


    Hier sind noch zwei kleine Fehler:


    Zitat

    h1{color:#FFFF00; letter-spacing:30; center; font-family:arial);
    background-position:center; background-image:url("palting.jpg");}

    Rot markiertes jeweils löschen.

    Falls es dann online immer noch nicht geht, könnte es daran liegen, dass die Bezeichnung deiner CSS-Datei noch Umlaute (ä,ö,ü) oder Sonderzeichen enthält. Wähle für die CSS-Datei eine Bezeichnung ohne Umlaute, ohne Sonder- und Leerzeichen und verwende durchgehend Kleinschrift. Dann den Pfad entsprechend anpassen, beides nochmal hochladen.

    wie du sehen kannst wurde die css datei bereits umbenannt...
    <link rel="stylesheet" href="betonwerk.css" type="text/css">
    auch die fehler im quelltext der css wurden verbessert

    #navi {
    float=left;
    #navi{
    position: absolute;
    top: 20px;
    left: 20px;
    width:250px;
    height:400px;
    margin-top:20px;
    margin-left:10px;
    }
    #navi ul {list-style:none; }
    #navi li {
    background-color:yellow;
    border-top:1px black solid;
    border-left:25px orange solid;
    border-bottom:1px red solid;
    border-right:2px red solid;
    margin-top:10px;
    padding-top:8px;
    padding-bottom:8px;
    padding-left:8px;
    padding-right:8px;}
    body{background-color:#00C8FF; font-family:arial;margin: 20px;}
    #inhalt {
    position: absolute;
    top:87px;
    left:300px;
    heigth:600px;
    width:600px;
    background-color: #ffffc6;
    text-align:center;}
    h1{color:#FFFF00; letter-spacing:30; center; font-family:arial;
    background-position:center; background-image:url("palting.jpg");}
    hier nochmal der link zum webspace damit ihr euch davon überzeugen könnt, dass das design wirklich nicht vorhanden ist

    http://philipp02.lima-city.de/index.html