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"><b>Herzlich Willkommen!</b></font>
    <p> <font size="4">Betonwerk Anton Mühlb&ouml;ck</font> </p>
    <p> 5163 Palting-Mattsee </p>
    <p> Telefon: 06217/7428 </p>
    </div>
    <div id="navi";>
    <ul>
    <li><a href="betonwerk.html">Home</a></li>
    <li><a href="-.htm">Produkte</a></li>
    <li><a href="-.htm">Standort</a></li>
    <li><a href="-.htm">Geschichte</a></li>
    <li><a href="-.htm">Betriebsgel&auml;nde</a></li>
    </ul>
    </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: Ich weiß, diese Frage wurde schon einmal gestellt, aber damals nicht im Zusammenhang mit nem Quellcode, deshalb der neue Thread!
    pps: 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

    Also dein Code-Aufbau ist ja ein einziges Desaster.
    Du solltest dir einfach merken:



    So wie du es hast ist alles bunt durcheinander gewürfelt. Und ich empfehle zudem noch alle CSS-Definitionen auszulagern, damit du eine Eigenschaft auch nur ein mal verändern musst, um den Effekt in allen Dateien, die darauf zugreifen, zu erlangen.
    Darüberhinaus ist es blödsinn, dass deine CSS-Datei mit <html> anfängt.
    Die Struktur einer CSS-Datei ist viel einfacher als die einer HTML-Datei.
    Es gibts weder eine Einleitung, noch etwas spezifisches am Ende. Die Datei fängt einfach mit body{......} an und hört auch mit einem solchen Element wieder auf. Am besten du schaust dir mal die CSS-Datei von irgendeiner X-beliebigen Seite an.


    Um deine Elemente dann wie gewünscht anzuordnen, solltest du am besten mit position: absolute arbeiten. Ein beispielhafter CSS-Eintrag wäre dafür:


    Code
    #navi{
position: absolute;
top: 350px;
left: 50px;
width: 200px;
height: 400px;
border: 1px solid #000;
}


    Nun würde deinem Navi-Div eine absolute Position zugeordnet. Das heißt, es ist nicht abhängig von irgendwelchen anderen Elementen (außer dem Element, in dem es sich möglicherweise befindet*) und die Position, an der es sich dann befindet wird durch die Zeilen 2 und 3 bestimmt. Dein Div hat dann einen Abstand nach oben von 350 Pixeln und einen zum linken Rand von 50 Pixeln. Natürlich kannst du so auch einen Abstand zum Boden (bottom) oder rechten Rand (right) definieren.
    Wenn du nun noch die breite des Elements beachtest, kannst du ganz prima ein weiteres Element genau daneben anorden, nämlich indem du definierst:

    Code
    andereselement{
position: absolute;
top: 350px;
left: 250px;
width: 700px;
height: 900px;


    Nun hat das 2. Element einen Abstand zum linken Rand von 250px und liegt so genau neben der Navileisten. Wenn du dann noch oben in der Mitte ein Element anbringen willst, kannst du top: 10px wählen, damit es nicht am Rand klebt und left: 50% oder auch einen Pixel-Wert, der das Element relativ zu seiner Breite in der Mitte der Seite erscheinen lässt (bisher ist die Seite 250px + 700px = 950px breit).



    Ich hoffe das bringt dich erstmal ein Stückchen voran :).
    Wenn noch etwas unklar ist oder du noch sonstige Fragen hast, scheue dich nicht die Fragen zu stellen :D




    * Beispiel dafür wäre eine Verschachtelung von Divs.
    Wenn du beispielsweise ein Inhalts-Div hast, darin aber noch ein linkes und ein rechtes Div postieren willst, sind die CSS-Angaben des linken Divs im Inhalts-Div dann relativ zu dem übergeordneten Div.
    Klingt sicher kompliziert, lässt sich aber am besten erschließen, wenn du es selbst ausprobierst. Also eine Div-Kombination, wie:

    Code
    <div id="inhalt">
 <div id="link"></div>
 <div id="rechts"></div>
</div>


    mit verschieden Positions-Werten vershen.



    Noch zu deinem PPS:
    Das kann entweder daran liegen, dass dein Windows keinen Unterschied zwischen bild.jpg und bild.JPG macht, der Server, auf dem deine HTML-Datei abgespeichert ist aber schon (sprich: die Datei heißt bild.JPG, du hast aber in der HTML-Datei die Quelle bild.jpg angegeben). Oder du hast den Datei-Pfad auf deiner Festplatte angegeben also beispielsweise:
    <img src="C:/Dokumente und Einstellungen/.../Bilder/bild.jpg " alt="Bild" />
    es sollte aber lauten <img src="bilder/bild.jpg">, da du nur den Bidl-Datei-Pfad relativ zu der Datei angeben musst, die auf das Bild zugreift. Eine HTML-Datei, die also im Ordner HTML liegt, welcher den Unterordner Bilder hat, in dem das Bild bild.jpg liegt, braucht als Pfadangabe zu dem Bild also nicht src="C:/....usw" sondern nur src="bilder/bild.jpg"




    Grüßchen! :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>
    <li><a href="index.html">Home</a></li>
    <li><a href="-.htm">Produkte</a></li>
    <li><a href="-.htm">Standort</a></li>
    <li><a href="-.htm">Geschichte</a></li>
    <li><a href="-.htm">Betriebsgel&auml;nde</a></li>
    </ul>
    </div>
    <div id="inhalt";><font size="4">Betonwerk Anton Mühlb&ouml;ck</font>
    <p> 5163 Palting-Mattsee </p>
    <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

    Zitat von &quot;PhilippS&quot;


    <link rel="stylesheet" href="betonwerk.css" type="text/css">


    In deinem Verzeichnis fehlt die Datei "betonwerk.css" - dann sollte es funktionieren! Hochladen, probieren, freuen.


    Schönes Wochenende
    Axel

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden