Menü platzieren

Webdesign & Technik HTML & CSS
1

Servus,
also ich versuch mir seit ca. 1 Woche CSS/HTML beizubringen.

Also hier mal n Bild zu ner Webseite, bei der ich gerade am üben bin.
Man sieht: den gelben Hintergrund, den linierten Header und rechts oben teile vom Menu.
-> Ich möchte aber, dass das Menü da hinkommt, wo der Pfeil hinzeigt. Könnte mir das jemand erklären ?

Hier der Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
    <title>Nissi - Home</title>
<head>
	<meta http-equiv="data" content="10.10.2010" />
	<meta name="description" content="Auf dieser Webseite geht es um..." />
	<meta name="keywords" content"meta, tags, html, anleitung, einbau" />
	<meta http-equiv="author" content="Christoph N." />
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
	<meta name="content-language" content="de" /> 
	<meta name="robots" content="index,follow" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
	
	<style type="text/css"> 
	body
	{
	background-color: yellow;
	}
	</style>
	
	<style type="text/css"> 
    #Menu
    {
	font: bold 15pt arial, sans-serif;
	font-variant: small-caps; 
	letter-spacing: 1pt;
	text-align: center;
	top: 300px;
    }
	</style>
	
	<style type="text/css"> 
   #Menu a
   {
   color: #black;
   text-decoration: none;
   margin-right: 5px;
   margin-left: 5px;
   top: 200px;
   left: 400px;
   }
   </style>
 
    <style type="text/css"> 
   #Menu a:hover
   {
   text-decoration: none;
   }
   </style> 
   
   <style type="text/css"> 
   #Header
   {
   background-image: url(http://img140.imageshack.us/img140/6951/headertest.png);
   width: 900px;
   height: 200px;
   position: absolute;
   }
   </style>
</head>
<body>
<div id="Header"></div>
<div id="Menu">
 <a href="index.html">Home</a>
 <a href="designs.html">Designs</a>
 <a href="tutorials.html">Tutorials</a>
 <a href="forum.php">Forum</a>
</div>
</body>
</html>

gr. chris

PS. falls ihr irgendwelche Fehler im Code entdeckt, dann sagt es mir bitte :slight_smile:

2

Am einfachsten ist es, wenn du das Menü innerhalb des Headers platzierst und dann mit margin ausrichtest. Also:

[code]



Home
Designs
Tutorials
Forum
[/code]
3

Ok, danke :slight_smile:
Werde es dann morgen, wenn ich Zeit habe versuchen … :slight_smile:

gr

4

:wink:
Sodala, das jetzt prima geklappt :slight_smile:
Ein Dankeschön an : Mohyra

Jetzt noch eine Frage, könnte noch jemand den code überfligen, ob ich da schlimme Fehler drin habe ?
Ich möchte das coden ja richtig lernen und nicht mit fehlern … .

[code]
body
{
background-color: yellow;
}

<style type="text/css"> 
#Menu
{
font: bold 15pt arial, sans-serif;
font-variant: small-caps; 
letter-spacing: 1pt;
margin-left: 450px;
margin-top: 161px;
}
</style>

<style type="text/css">

#Menu a
{
color: #black;
text-decoration: none;
margin-right: 5px;
margin-left: 5px;
}

<style type="text/css">

#Menu a:hover
{
text-decoration: none;
}

#Header { background-image: url(http://img140.imageshack.us/img140/6951/headertest.png); width: 900px; height: 200px; position: absolute; }
Home Designs Tutorials Forum
[/code]

gr. chris

5

Du brauchst nicht für jede CSS_Regel ein neues style-Element benutzen.
(Das style-Element solltest du sowieso nur in Ausnahmefällen benutzen - normalerweise wird CSS in eine eigene Ressource ausgelagert.)

Und was HTML angeht, solltest du dir auch gar nicht erst angewöhnen, für alles DIVs zu nehmen (Stichwort „DIV-Suppe“) - oftmals gibt es geeignetere Elemente, die die Struktur der Inhalte besser ausdrücken können.
Für Navigationen beispielsweise nimmt man heutzutage meist eine Liste, weil sie genau das sind - eine Auflistung von Links.
hx-Elemente für Überschriften, p für Fließtext-Absätze, etc. pp.

6

Das mit der externen CSS-Datei habe ich schon versucht, leider hat dies nicht funktioniert. :neutral_face:
Ich werde es nochmal versuchen, sobald ich das Programieren einigermaßen erlernt habe :slight_smile:

Ich glaube, dass mit der Div-Suppe verstehe ich erst richtig, wenn ich mich in das Element “Programmieren” eingearbeitet habe :slight_smile:
Aber das mit der Liste klingt logisch. Werde ich bei meiner nechsten “Übungswebseite” anwenden.

gr. chris

7

[quote]Jetzt noch eine Frage, könnte noch jemand den code überfligen, ob ich da schlimme Fehler drin habe ?
Ich möchte das coden ja richtig lernen und nicht mit fehlern … .[/quote]

Hallo, schau doch mal auf validator.w3.org/ da kannst du überprüfen ob fehler drin sind, indem du die url angibst, die datei hochlädst oder den code direkt eingibst.

ich glaube immer noch im versuchsstadium aber für mich persönlich ganz brauchbar:

validator.w3.org/unicorn

damit wird nicht nur das html sondern gleich auch das css mit überprüft

viel spaß beim rumprobieren :wink:

emil

8

Über die Korrektheit hinausgehend: Eine Angabe in pt für die Schriftgröße ist nicht
sinnvoll. Nachdem auch von Mozilla angekündigt wurde, absolute Einheiten in Zukunft
nicht mehr korrekt wiedergeben zu wollen, wird es alsbald gar keinen browser mehr
geben, der sowas korrekt darstellen kann. Absolute Einheiten eignen sich eigentlich nur
für Ausgabegeräte, die diese Einheiten auch verstehen, das sind etwa Drucker, sofern
die das verwendete Format verstehen, was bei CSS selten der Fall sein dürfte.
Ferner ist es ohnehin für die gute Lesbarkeit sinnvoll, Schriftgrößen nur relativ zu der
Schriftgröße anzugeben, die beim Nutzer eingestellt ist, wobei kleiner als 1em nicht
funktionieren muß,
Entsprechend sollte man dann auch Elemente, die vorrangig Text enthalten entweder
gar nicht oder in entsprechenden Einheiten, aber eher nicht in px dimensionieren, sonst
ist schwer vorhersagbar, was da beim Nutzer bei herauskommt.

9

@ Emil : Hab den validator gleich mal ausprobiert. Jetzt hab ich kaum noch fehler drin :slight_smile:

@ Hoffmann : Also sollte ich einfach bei SCHRIFTGRÖßEN die Größenangabe mit pt weglassen oder ?

gr

10

Nein, eher, dass die Schriftgrößen in em angibst. % ginge aber auch.

11

Neben em und % ist auch ex verwendbar. Dann gibt es auch relative
Größenangaben, entweder relativ zur aktuellen Größe oder zu voreingestellten:
smaller, larger, small, medium, large etc

Natürlich wird es knifflig, wenn du ein Bild mit Pixeldimensionen hast und willst
dazu einen Text dimensionieren (Höhe, Breite). Man kann natürlich das Bild
in gleichen Einheiten dimensionieren wie den Text oder eine Kombination
wählen, wo es auf die relative Größe nicht so ankommt oder die maximale
Größe des Bildes begrenzen (max-width) etc - da kommt es stark auf das
Einzelproblem an, was eine sinnvolle Lösung ist. Schriftgröße in px, wie man
das immer noch oft sieht, ist hingegen für Fließtext mit Information drin nicht
als sinnvolle Lösung anzusehen, weil das zum einen nicht verläßlich ist, zum
anderen für den Leser gegebenenfalls schlecht zu lesen (Schrift zu groß oder
zu klein bei der verwendeten Auflösung des Monitors).

12

Ok, dann wäre das Problem schon mal geklärt :slight_smile:

Auf meinem 24" Monitor schaut meine Test-HP richtig in die Ecke gequetscht aus, deshalb möchte ich sie zentrieren.

Am Anfang dachte ich, ich mach das so :

   <style type="text/css"> 
	#body
	{
	background-color: white;
	text-align: center;
	}
	</style>

=> Was leider nicht ging.

[code]Danach kam der Versuch :

'Diese Homepage müsste zentriert sein... .' [/code] => War leider auch n Fail.

Kann mir das einer auch noch kurz erklären ? Ich will dafür nicht extra nen neuen Thread aufmachen und das Forum zumüllen :smiley: In google hab ich zwar auch schon gesucht, es gab auch einige Lösungsvorschläge aber da hat keiner geklappt.

gr. chris

13

de.selfhtml.org/navigation/faq.h … te_inhalte

14

Langsam nerv ich, ich weiß :smiley:
Das hat jetzt nach n bisschen rumprobieren wunderbar geklappt. Also zentrieren geht nur mit Hilfe eines “Div-Containers” ?!

Langsam hab ich zwar echt eine Div-Suppe… xD

gr

15

Das ist meistens der Fall, wenn sich jemand erst eine Woche lang mit Themenkomplexen beschäftigt, die andere über einen weit längeren Zeitraum erlernt haben …

Mehr Dokumentation lesen, mehr selber ausprobieren, mehr Diskussionen in Blogs und Foren verfolgen hilft dabei, nicht unnötig Fragen zum x-tausendsten Male zu stellen, die längst vielfach beantwortet sind.

Nein, natürlich nicht.

16

Servus,
ich bin es nochmal.

Also ich hab jetzt alles von px in em umgewandelt … hab auch noch weitere Tipps befolgt.
z.B. eine Liste fürs Menü eingesetzt :wink:

Mir liegt aber noch ne Frage auf m Herzen ^^

Wie kann ich eine Grafik als Rahmen verwenden ?

#Hauptbereich { font: 0.85em Helvetice, arial; border-left: url (http://img215.imageshack.us/img215/40/hpborder.png); border-right: url (http://img215.imageshack.us/img215/40/hpborder.png); width: 61.25em; height: auto; }
=> das geht ja nicht.

In google steht überall, dass das nicht geht :neutral_face: Da ich aber google nie richtig vertraue, frag ich halt hier nochmal nach :wink:

gr

17

Nein, das steht nicht „überall“.
google.com/search?q=css+border+image

Weniger Vertrauen ist vielleicht bzgl. deiner Suchstrategie angebracht, wenn du nicht alleine in der Lage bist, Erklärungen zu solchen Thematiken zu finden.