Zur Navigation

CSS-layout

1 tomaschko (Gast)

ALso ich wollte auf meiner seite CSS benutzen, da die Vorteile ja auf der hand liegen. hab mich auch schon belesen und trotzdem noch ein problem...

Ich wollte das aussehen so:
Oben ein Logo (zentriert)
darunter eine horizontale navigation mit 8 links

Leider weiss ich nicht wie ich das logo in der css-datei einbinde und ebenso wenig wie ich navigation einbinde. Wäre echt froh über hilfe.

17.04.2005 23:03

2 Jörg

Hallo tomaschko,

du kannst das Logo in ein <div>-Container packen, und diesen dann zentrieren, die Vorgehensweise hatte ich mal in diesem Thread genauer beschrieben:

<div>-Layer in CSS zentrieren

Die Navigation darunter wird wohl ebenfalls zentriert, nehme ich an? das könnte z.B. dann insgesamt ungefähr so aussehen:


<html>
<head>
<title>Test</title>
</head>
<body>
<div id="logo">
<img src="logo.jpg" width="800" height="200" alt="Logo">
</div>
<div id="navi">
<!-- hier kommt die Navigation rein -->
</div>
</body>
</html>

und in der CSS Datei:


body {
text-align:center;
}
#logo {
margin:auto; 
width:800px;
}
#navi {
margin:auto;
}

17.04.2005 23:30

3 tomaschko (Gast)

Danke. Ich bin leider noch totaler CSS anfänger und deswegen auf solche Hilfe angewiesen, deshalb 1000 dank. Eins noch: Für Navi und logo einfach direkt das imagesrc reibringen?

18.04.2005 16:39

4 Jörg

Für Navi und logo einfach direkt das imagesrc reibringen?

ich bin mir nicht ganz sicher, was du meinst - Hintergrundbilder für Logo und Navigation? die kann man in CSS über background-image:url() einbinden:


#logo {
margin:auto; 
width:800px;
background-image:url(bilder/logo.gif);
}
#navi {
margin:auto;
background-image:url(bilder/navigation.gif);
}

für "bilder/logo.gif" muss man den entsprechenden Pfad und Dateinamen angeben

falls du etwas anderes gemeint hast, bitte nochmal genauer erklären und/oder Beispiel geben ;)

18.04.2005 20:24

5 tomaschko (Gast)

fast so. Das mit dem logo soll ein bild sein.
Die Navigation soll so aussehen:

| Link 1 | link 2 | link 3|

18.04.2005 22:00

6 Jörg

Das Logo-Bild kannst du in der HTML-Datei als <img> einfügen zwischen <div id="logo"> und </div>, so wie ich es im Beispielcode in meinem ersten Posting angegeben habe. Die Navigation fügst du zwischen <div id="navi"> und </div> ein, also z.B. so:


<div id="navi">
| <a href="link1.html">Link 1</a> | <a href="link2.html">link 2</a> | <a href="link3.html">link 3</a> |
</div>

18.04.2005 22:12

7 Jörg

Noch eine Korrektur meines ersten Postings, die .css Datei muss natürlich auch in die .html Datei eingebunden sein:


<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="logo">
<img src="logo.jpg" width="800" height="200" alt="Logo">
</div>
<div id="navi">
| <a href="link1.html">Link 1</a> | <a href="link2.html">link 2</a> | <a href="link3.html">link 3</a> |
</div>
</body>
</html>

wobei style.css der Name der .css Datei ist

18.04.2005 22:18

8 tomaschko (Gast)

DAnke

20.04.2005 23:21

Beitrag schreiben (als Gast)





[BBCode-Hilfe]