Links in html und css definieren

Unregistriert

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

synaptic

indem du position:absolute wechlässt... damit sollte man arbeiten, wenn mans kann!

Unregistriert

und anstelle dessen kann ich was nehmen?

synaptic

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.

sejuma

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/

Unregistriert

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

Unregistriert

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?

synaptic

schick mal nen link oder poste den enstprechenden code inklusive style
(am besten mit den bb-code-tags - die schaltfläche mit "<>" )

Unregistriert

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"> 
<link rel="stylesheet" href="index_p.css" type="text/css" media="screen,projection,print"> 
</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...

sejuma

Was verstehst du unter "an seinen Bestimmungsort stelle"?
Bei mir wird die Liste angezeigt.
Unschön ist lediglich der Hover-Effekt mit der Sperrschrift. Da "springen" die Links zu stark.

Unregistriert

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

synaptic

dann lad des zeugs doch mal irgendwo hoch.. oder meld dich hier an, dann kannste des als anhang mitgeben und das gesamtdesign als bild wäre auch schön

bgvmc

So, nun auch registriert...

leider kann ich hier nur ein "Bild" anhängen..
alle anderen Datein werden als ungültig bezeichnet..

sejuma

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.

Unregistriert

So, was lange dauert..aber naja..

habe die Seite mal online gestellt:

http://bgvmc.angelfire.com/

hoffe damit kannst du mehr anfangen..

sejuma

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.

Unregistriert

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

synaptic

lass die page mal da ich guck mir das an, sobald ich zeit dafür habe.

Tags