Hyperlinks positionieren in CSS

iceee · 18.05.2010

Schönen Guten Abend liebe PSD-Tutorials Gemeinde,

Ich bastel jetzt immer noch an meiner Homepage, aber irgendwas will nie stimmen.

Ich hätte gerne auf der Index einen Body, mit 3 Hyperlinks oben und dann in 2 Reihen 3 Große Boxen in denen ich meine Downloads anbieten kann.

Naja, Body schön und gut aber Ich bekomme die Hyperlinks nicht Positioniert!

So sieht die HTML aus:

Code:

<a href="Index.html" id="navi">Browse Themes</a> <a href="Index.html" id="navi">Tips</a> <a href="Index.html" id="navi">Support</a>
<div id="textbody"></div>

und so die CSS:

Code:

#navi {
	font-family:"BBAlpha Sans";
	font-size:9px;
	text-align:center;
}

#textbody {
	background-image:url(Dateien/Images/Body.png);
	width:640px;
	height:480px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

Laut meiner Theorie sollte das so gehen, aber eben nur in der Theorie und in meiner ^^

Das mit dem roten Pfeil markierte soll in das Rot umkreiste.

Was mache ich falsch?
Ich bin noch blutiger Anfänger in dem HTML Gebiet, aber jeder fängt mal klein an ^^

Hoffe jetzt hier kann mir jemand helfen und möglich auch erklären, und nicht nur nen verbesserten Code hinklatschen. (Auf niemanden bezogen, nicht dass ich was vorgeworfen bekomme 0o)

...Léon

sokie · 18.05.2010

AW: Hyperlinks positionieren in CSS

bei mir lässt sich das unbenanntifup.png nicht laden.
aber auch so schonmal ein paar anmerkungen

das geht so nicht.
die ID ist dazu da EIN Element EINDEUTIG zu bezeichnen.
wenn du eine liste von links hast, pack sie einfach schonmal aus Angewohnheit auch in eine Liste

HTML:

<ul id="navi">
  <li><a href="">link</a>
  <li><a href="">link</a>
  <li><a href="">link</a>
</ul>

so kannst du die li elemente über
#navi li
und die a Elemente über
#navi a
erreichen.

mit dem Codeschnippsel und dem Bild ist so erstmal wenig anzufangen. poste mal den kompletten Code, oder einfacher, die ganze sache auf deinen webspace laden und den link posten.
und vielleicht hier lesen:

iceee · 18.05.2010

AW: Hyperlinks positionieren in CSS

Eigentlich dachte ich Ich lad erst hoch wenns fertig ist, aber nagut.
Abload.de spinnt gerade, lädt ewig :S

Ich werds mit <li> morgen oder später versuchen.

Hochladen kann ich Heute leider nicht, habe gerade kein Zugriff drauf ^^

micr0 · 19.05.2010

AW: Hyperlinks positionieren in CSS

hallooo... also ich kannn dein pic auch nicht sehen...

probiere es mal hiermit.. eine einfach anleitung für die gestaltung einer simplen navi mit CSS.

gruß

iceee · 19.05.2010

AW: Hyperlinks positionieren in CSS

In deinem Tutorial werden viele Sachen mit HTML gemacht was ich mit CSS gemacht hätte 0o

oder der lässt vieles weg, ich weis nicht...

Naja vielen dank, immerhin hab ich ne Symbol Leiste, aber ich bin genausoweit wie vorhin :S
Ich werd mal nacher nochmal schauen.

sokie · 19.05.2010

AW: Hyperlinks positionieren in CSS

iceee schrieb:
In deinem Tutorial werden viele Sachen mit HTML gemacht was ich mit CSS gemacht hätte 0o

in dem Tutorial aus dem Link von micr0 wird mit html gar nichts "gemacht". das html stellt die Struktur zur Verfügung. Alles was dort gemacht wird ist mit css gemacht. Eigentlich ist esgenau der Ansatz für deine Navigation. (2.horizontale Navigation)

iceee · 19.05.2010

AW: Hyperlinks positionieren in CSS

Wieso wird dann im Head nochmal alles Verzeichnet?

Irgendwie komme ich da sehr durcheinander

Code:

<head>
    <style type="text/css">
    <!--
    ul#navigation {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
    }

    ul#navigation li {
        padding: 0px;
        margin: 0px;
        display: inline;
    }

    ul#navigation li a:link {
        border: 1px solid #000;
        background-color: #CCCCCC;
        padding: 2px 5px 2px 5px;
        font-size: 12px;
        color: #000;
        font-family: Arial, Helvetica, sans-serif;
        text-decoration: none;
        font-weight: bold;
    }

    ul#navigation li a:hover {
        border: 1px solid #000;
        background-color: #333333;
        padding: 2px 5px 2px 5px;
        color: #fff;
    }
    -->
    </style>

micr0 · 19.05.2010

AW: Hyperlinks positionieren in CSS

Du kannst dein CSS stylesheet entweder im HTML document codieren (was eben im head gemacht wird), so wie es in dem beispiel ist... oder du legst eine complete style.css datei an auf die du mit einem link drauf verweist..(was ebenfalls im head passiert)

Ich denke dein problem ist das du grundlagen von CSS noch nciht ganz beherrscht. Gehe mal auf CSS 4 You - The Finest in Stylesheets und les dich mal durch...

notlösung ist dir einen menugenerator zu sucher der der in kürze ein menü zusammenbeastellt.

gruss

iceee · 19.05.2010

AW: Hyperlinks positionieren in CSS

Ne nix zusammenstellen, das wäre ja langweilig.

Da kann ich auch gleich mit PS alles Designen.
Ich sagte ja, ich bin noch totaler Neuling und weis igentlich nicht ob ich das jetzt richtig mache oder nicht :S ^^