Links in html und css definieren

  • Hallo und Entschuldigung im voraus, da diese Frage bestimmt schon mal beantwortet wurde. Nur leider finde ich Sie im Moment nicht. Ich habe mich erst seit ein paar Stunden mit html und css beschäftigt, und stoße nun auf eine Frage. Ich habe in html folgende Links gesetzt:

    <a href="http://www.clarus.de/">Clarus</a>
    <a href="http://www.clarus.de/">Service</a>

    in der css datei habe ich folgendes gesetzt:

    a {
    position:absolute;
    top: 293px;
    left: 310px;
    font-family: "Futura Md", serif;
    font-size: 12px
    }

    Logischerweise sind nun beide Links übereinander. Der erste hat die richtige Position. Der Zweite muss an eine andere Stelle auf der Seite. Wie kann ich dieses hinbekommen?Vielen Dank für eure Hilfe!

    Florian

  • mmmh also ich würde die links mit einem container umgeben und dann nen style zuweisen und den conatiner positionieren.
    ich benutze jetzt mal deine werte aber du musst halt mal testen was dann passt
    das hier als style:

    HTML
    #linkcontainer{
    margin-top:293px;
    margin-left: 310px;
    }
    
    
    #linkcontainer a{
    margin-right:15px;
    }
    HTML
    <div id="linkcontainer">
    <a href="'">link1</a>
    <a href="'">link2</a>
    </div>

    das is jetzt halt nur ein ungetestes beispiel.... du brauchst für die richtige interpretation des boxmodells noch nen qualifizierten doctype.
    margin ist der aussenabstand zum nächsten objekt...
    http://css4you.de wird dir die notwendigen infos bringen.

  • Für eine Navi verwendet man sinnvollerweise eine Listenform.
    Die Liste ul kann man dann mit margin- oder float-Angaben positionieren.
    Absolute Positionierung ist hingegen meist nicht erforderlich und auch nicht empfehlenswert.
    Sieh dir mal hier einige Beispiele an:
    http://css.maxdesign.com.au/listamatic/

  • Vielen Danke für eure Infos..Das hat mir schon mal sehr weitergeholfen..Danke

  • Trotzdem noch eine zweite Frage..

    die Link-Liste funktioniert. Habe nur jetzt folgendes Problem. Wenn ich die Liste an seinen Bestimmungsort stelle, schiebt sich die Liste hinter das Layout..Wisst ihr Rat?

  • Das ist der html code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html lang="de">
    <head>
    <title>Versicherungsmakler für Osnabrück, Versicherung und Finanzberatung</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css;">
    <link rel="stylesheet" href="album1_g.css" type="text/css" media="screen,projection,print"> <!--// Document Style //-->
    <link rel="stylesheet" href="index_p.css" type="text/css" media="screen,projection,print"> <!--// Page Style //-->
    </head>


    <body id="page">
    <span id="e1"></span>
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">Private & gewerbliche Produkte</a></li>
    <li><a href="#">Konzeptanalyse</a></li>
    <li><a href="#">Über ImmerGutVersichert.de</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="http://www.clarus.de">Clarus</a></li>
    </ul>
    </div>

    <a href="navi" href="http://www.clarus.de/">Clarus</a>
    </body>
    </html>

    und der css code:

    * { /* All Elements */
    margin : 0px;
    padding : 0px;
    }
    #navlist
    {
    padding-left: 0;
    margin-left: 0;
    width: 200px;
    margin: 160px 40px 10px 70px;
    }

    #navlist li
    {
    list-style: none;
    margin: 100;
    padding: 4px;
    }

    #navlist li a { text-decoration: none; }
    a:link { /* Document Links */
    color : #555454;
    }
    a:visited { /* Visited Links */
    color : #555454;
    }
    a:hover { /* Hover Links */
    letter-spacing: 5px;
    font-weight:bold;
    color : #6fb127;
    }
    a:active { /* Active Links */
    color : #FF0000;
    }
    ol,ul { /* All Lists */
    margin : 1em;
    padding-left : 2em;
    }
    p { /* All Paragraphs */
    margin-bottom : 1em;
    }
    .address {
    color : #000000;
    font : italic 10pt 'Verdana', 'Lucida Grande', Arial, sans-serif;
    }
    .citation {
    color : #000000;
    font : italic 12pt 'Verdana', 'Lucida Grande', Arial, sans-serif;
    }
    .code {
    color : #000080;
    font : 12pt 'Courier New', monospace;
    }
    .emphasis {
    color : #000000;
    font : italic 12pt 'Verdana', 'Lucida Grande', Arial, sans-serif;
    }
    .heading1 {
    color : #000000;
    font : bold 24pt 'Arial', Helvetica, sans-serif;
    }
    .heading2 {
    color : #000000;
    font : bold 20pt 'Arial', Helvetica, sans-serif;
    }
    .heading3 {
    color : #000000;
    font : 18pt 'Arial', Helvetica, sans-serif;
    }
    .heading4 {
    color : #000000;
    font : italic 16pt 'Arial', Helvetica, sans-serif;
    }
    .heading5 {
    color : #000000;
    font : 14pt 'Arial', Helvetica, sans-serif;
    }
    .heading6 {
    color : #000000;
    font : 12pt 'Arial', Helvetica, sans-serif;
    }
    .small {
    color : #000080;
    font : 8pt 'Verdana', 'Lucida Grande', Arial, sans-serif;
    }


    /*--- EndOfFile ---*/

    Hoffe das hilft...

  • Ich will die Links an einen bestimmten Ort auf der Seite stelle.
    Ich habe über Photoshop ein "Grunddesign" erstellt, das auf der Seite liegt.
    Wenn ich nun die Links schreibe, schiebe diese sich hinter das Design..Sie sollen aber da drauf..hoffe ich konnte es einigermaßen verständlich machen..

  • Ein Bild hilft für die Problemlösung leider überhaupt nichts.
    Stelle bitte einen Link zur Seite rein, wo man den ganzen Quelltext im Gesamtzusammenhang sieht. Notfalls kannst du dir bei einem kostenlosen Webhoster freien Webspace besorgen.
    Wenn du die Seite irgendwie mit Photoshop gemacht hast, dann kann ich mir gur vorstellen, dass da noch zahlreiche Fehler drin sind. Denn Photoshop ist in erster Linie ein Grafikprogramm.
    Es macht auch nicht unbedingt Sinn, den Quelltext den Grafiken anzupassen.
    Besser wäre eine Quelltextstruktur, der dann Grafiken zugewiesen werden können.

  • Mit Javascript kenn ich mich leider nicht aus.

    Aber außer dem Navi-Code scheint mir das herzlich wenig mit einer Website zu tun zu haben.
    Ich glaube du brauchst da einen vollkommen anderen Ansatz.
    Die einzelnen Bereiche musst du als entsprechende HTML-Elemente auszeichnen und formatieren.
    Den Text auch als solchen erfassen, sonst wird er von Suchmaschinen nicht gefunden.

    Entweder lässt du dir die Seite von einem Experten machen, oder du musst dich zunächst mit den Grundlagen von HTML und CSS vertraut machen.
    Auf dieser Basis kann dir hier wohl niemand helfen.

  • Das sind ja auch nur die ersten Versuche von mir..habe mich erst seit kurzer Zeit mit html und css beschäftigt..und somit noch voll im Lernprozess..sind alles nur test..aber trotzdem danke..