Bild will nicht ins Center...

von **CKay1** » 17.04.2006, 12:50

Hallo,

neu im Bereich Website erstellen und auch in diesem Forum hab ich einmal eine Frage. Auf meiner Startpage hätte ich gerne eine Navileiste oben links und eine Sprachnavileiste oben rechts.
Darauf hätte ich gerne ein Bild das im Center ist. Da dieses für alle Browser zugänglich sein soll hab ich das 2400px breit gemacht.
Mein Problem ist nun, dass ich die Leisten nicht dahin bekomme wo ich sie haben will. Momentan stimmt der Platz aber wenn ihr euch mein CSS anseht dann versteht ihr, dass das bestimmt nur Zufall ist.
Noch grösser das Prob mit dem Bild, dass einfach nicht ins Center will.
Könnte einer mal so nett sein und mein CSS nach dem Fehler durchwühlen.

Hier die Page und der Anfang des CSS:

<DOCTYPE>
<html>
<head>
<meta>
<title>Unbenanntes Dokument</title>
<link>
<link>
</head>
<div>
<ul>
<li><span>Home</span></li>
<li><a><span>Title</span></a></li>
<li><a><span>Surrounding</span></a></li>
<li><a><span>Isle</span></a></li>
<li><a><span>Pictures</span></a></li>
<li><a><span>Contact</span></a></li>
</ul>
</div>
<div>
<span><img></span>
<a><span><img></span></a>
<a><span><img></span></a>
</div>

<div><img></div>

<div>
Welcome on the Website of XXX!
<p>XXX</p><p>
XXX<a>XXX</a>XXX<a><span>pictures</span></a>XXX</p><p>
XXX<a><span>XXX</span></a></p>

</div>

<div><img></div>

<div>
<div>Design by <a>XXX</a> | copyright 2006 <a>XXX</a></div>
</div>
<body>
</body>
</html>

[b]/* CSS Document */

body {
font-family: trebuchet ms, verdana, arial, tahoma;
font-size: 90%;
color: #888;
background-color: white;
line-height: 180%;
margin: 0;
padding: 0;
text-align: center;
}

#menu-top ul {
margin: 0 20px;
padding: 1em 0 0 0;
list-style: none;
font-size: 85%;
text-align:center
}

#menu-top li {
display: inline;
padding: 0 0 0 0;
margin: 0 0 0 0;
}

#menu-top a {
float: left;
margin:0;
text-decoration:none;
line-height: 1.5em;
}

#menu-top a span {
padding:5px 15px 4px 6px;
color:#5b8fbe;
display: block;
cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */
}

#menu-top a:hover, #menu-top a:hover span{color:#00CCFF;}

#menu-lang-top-right ul {
margin: 0 20px;
text-align:right;
list-style: none;
}

#menu-lang-top-right li {
display: inline;
margin: 0.5em;
}

#menu-lang-top-right a {
margin:0;
text-decoration:none;
}

#menu-lang-top-right a span {
color:#5b8fbe;
padding: 0.2em;
cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */
}

#xxxheader {
margin: 120px;
}

Vielen lieben Dank...

von **Laus** » 17.04.2006, 15:25

Hallo Christoph

Schön das auch Du deine Webseite mit CSS gestallten willst.
Zuerst einmal etwas zum Quelltext. <body> kommt nach </head> und in den body kommt der Inhalt.
Du brauchst auch die Beschriftung der Navigation nicht extra <span>, das kannst Du auch direkt über das <a> Element machen.

Wenn ich dich richtig verstanden habe dann möchtest Du im Header ein Hintergrundbild. Dieses kannst Du auch über css einbinden.

Habe mir erlaubt deinen Quellcode und dein CSS etwas zu verändern. Unter background-image:url("");kannst du Zwischen den "" den Pfad zum Bild einfügen. Ich hoffe das kommt deinen Vorstellungen etwas näher.

Code: Alles auswählen: <DOCTYPE> <html> <head> <meta> <title>Unbenanntes Dokument</title> <link> <link> </head> <body> <div> <ul> <li><a>Home</a></li> <li><a>xxx</a></li> <li><a>Surrounding</a></li> <li><a>Lanzarote</a></li> <li><a>Pictures</a></li> <li><a>Contact</a></li> <span> <li><a><img></a></li> <li><a><img></a></li> <li><a><img></a></li> </span></ul></div> <div><img></div> <div> Welcome on the Website of xxx! <p>Here you will find all necessary information about one of Lanzarote's most special and affordable holiday cottages.</p><p> Unique and quite situated in <a>Puerto Calero</a>, this holiday cottage offers a dreamlike atmosphere that hardly can be described. The best thing to do is having a look on the information given on this site or look at our <a><span>pictures</span></a> of xxx to acquiere the taste of them.</p><p> With pleasure we are at your disposal. The easiest way to contact us is by E-mail. For that just click <a><span>>>>here<<<</span></a></p> </div> <div><img></div> <div> <div>Design by <a>xxx</a> | copyright 2006 <a>xxx</a></div> </div> </body> </html> /* CSS Document */ body { font-family: trebuchet ms, verdana, arial, tahoma; font-size: 90%; color: #888; background-color: white; line-height: 180%; margin: 0; padding: 0; text-align: center; } #header { background-color: white; background-image:url(""); background-repeat:no-repeat; background-position:center; text-align: left; } #menu-top { margin: 0 20px; padding: 1em 0 0 0; font-size: 85%; } #menu-top li { background-color: transparent; display: inline; padding:0; margin: 0 ; list-style: none; } #menu-top a { margin:0 20px; text-decoration:none; line-height: 1.5em; color: #5b8fbe; } #menu-top a:hover, #menu-top a:hover span{ color:#00CCFF; } #menu-lang-top-right { position: relative; float: right; } #menu-lang-top-right a { margin: 5px } #xxxheader { margin: 120px;

Noch ein Hinweis CSS ist Casesensitive, wenn Du eine "id" im Quelltext groß schreibst, dann muß dies zwingend im css auch so geschrieben werden, sonst funktioniert die Zuweisung nicht.

von **CKay1** » 18.04.2006, 08:26

Dir laus

First of all, vielen lieben Dank, für die Mühe meine Codes zu durchforsten.
Nachdem ich gestern daheim war hab ich mir das ganze von vorn durchgenommen und auch selbst bemerkt, dass mein body-tag irgendwie falsch stand. Nach ewig langem forschen habe ich die Grossschreibung in Kleinschreibung geändert und das festgestellt, was Du mir auch geschrieben hast. Hat bis dahin einfach nicht funktioniert. Ein wenig später hatte ich das Problem nochmal, wusste dann aber schneller woran es lag. Ist halt alles ein Prozess des Lernens ;-)

Was ich nicht gemacht hab, ist das Bild als background einzufügen, da mein content sich dadurch wieder verschoben hat und ich zu faul war da nochmal rumzubasteln. Werde deinen Code heute aber einmal wenden und alles abgleichen.
Ich danke vielmals für Deine Mühe, weiss das schwer zu schätzen.

Bild will nicht ins Center...

Bild will nicht ins Center...

Quellcode und so

Ähnliche Beiträge zu "Bild will nicht ins Center..."

Wer ist online?