Falsche Homepagedarstellung

html.de-Forum HTML, XHTML & CSS
1

Hallo,
so, wie in dem Thread im Showcase schon gesagt habe ich heute mein erstes richties Webdesign gemacht. Nun wollte ich es ganz normal webtauglich machen und da übertritt es meinen geringen CSS-Horizont.:smiley:

Ihr könnt meine Seite hier sehen:
The Shadow’s World v. 0.1 Alpha

Nun zu meinen Problemen:

  1. Zwischen dem Menü und dem Contentbereich ist ja eine weiße Leerstelle, die ich nicht haben will. Wie änder ich das?
  2. Wie zu sehen ist passt der Text nicht in meinen Contentbereich. Wie änder ich das?
  3. Allgemeine Frage: Wie kriege ich die Links zum laufen?:smiley:
    Die Beschriftung wurde mit GIMP gemacht und jetzt weiss ich nicht, wie ich die Links mit dem Platzhalter verwirkliche.

Hier meine index.html:
[html]

The Shadow's World v. 0.1 Alpha

Willkommen

So da wären wir! =)

[/html] Und hier meine page.css: [code] body { color: #000000; background-color: #ffffff; }

#Main {
width: 900px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}

#LeisteOben {
height: 26px;
width: 900px;
background-image: url(images/leiste_oben.jpg);
background-repeat: no-repeat;
}

#Banner {
height: 251px;
width: 900;
background-image: url(images/banner.jpg);
background-repeat: no-repeat;
}

#Menue {
height: 49px;
width: 900px;
background-image: url(images/menue.jpg);
}

#Inhalt {
height: 354px;
width: 900px;
background-image: url(images/content.jpg);
background-repeat: no-repeat;
}

p {
padding: 5px 10px 5px 30px;
font-size: 13px;
font-family: Arial, Tahoma;
}

h1 {
padding: 5px 10px 5px 40px;
font-size: 15px;
font-weight: bold;
font-family: Arial, Tahoma;
}
[/code]

Vielen Dank!
Gruß

2

Probiers zuerst mal mit(wegen dem weissen Streifen):

* { margin: 0; padding: 0; }Und noch ein Tipp, nimm Tabs für Einschübe und nicht einzelne Abstände.
Für das Menue musst du die einzelnen Punkte splitten und sie einzeln hineinpacken am besten als Liste:
[html]






[/html]und für CSS vielleicht noch: [code]ul { list-style-type: none; }[/code] oder war es list-style-image, naja auch egal :p
3

Das mit dem weißen Streifen hat geklappt!
Ich habe schon befürchtet, dass ich die Links extra machen muss.
Vielen Dank!
Hat vielleicht noch jemand eine Lösung für mein Textproblem?

4

Probier doch mal statt padding

margin…

p { 
    position:relative;
    margin-top:5px;
    margin-right:10px;
    margin-bottom:5px;
    margin-left:30px;
    font-size: 13px;
    font-weight: bold;  
    font-family: Arial, Tahoma;
 
    border:1px solid blue;
}

mit padding legst Du die Abstände innerhalb deines ‚p‘ Elements fest…
mit margin setzt Du die Abstände des ‚p‘ Elements selber, in Verbindung zum Mutterelement →

oder anderen Elementen im Mutterelement…
Im klartext:
wo soll die BOX ‚p‘ in der BOX <div id="inhalt> positioniert werden…
spannend wird das, wenn du zb mit Hintergründen arbeiten möchtest oder einen rahmen um dein ‚p‘ element ziehen möchtest…

mit border:1px solid blue hast du einen rahmen um dein ‚p‘ Element, und weisst besser, wo es auf der Seite plaziert wird. (Eine echte Hilfe…kann man ja nachher ruck zuck rausschmeissen :wink: )

könnte vieleicht das problem lösen…

Nochwas…probier doch mal an Stelle des ä einfach &#228 zu schreiben… das ist der Unicode für ä… :wink:

Gruß,
Peter

PS : vieleicht ist bottom , left, right, top sogar noch besser zur positionierung als margin oder padding…probiers mal aus…

5

Ändert leider nichts an der Textverschiebung.
Aber trotzdem Danke!

6

???

Ähm, eine Kleinigkeit verstehe ich nicht…

Wie soll den der Text deiner Meinung nach aussehen und wo soll er stehen ???

mit deinen Styleangaben kann es egal wo du h1 oder p plazierst nicht anders aussehen als auf deiner homepage…

Test

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<!--
   HTML 3.2
   Document type as defined on [HTML 3.2 Reference Specification](http://www.w3.org/TR/REC-html32)
-->
<head>
       <title>Test</title>
<style type="text/css">
p { 
 padding: 5px 10px 5px 30px; 
 font-size: 13px; 
 font-family: Arial, Tahoma;
} 
h1 { 
 padding: 5px 10px 5px 40px; 
 font-size: 15px;
 font-weight: bold;  
 font-family: Arial, Tahoma;
}
</style>
</head>
<body>
<div style="border:1px solid green">
<h1> Hallo </h1>
<p> Hallo </p>
</div>
</body>
</html>
7

Der Text ist nicht verschoben. Wenn Du deinem DIV#content mal ein border:1px solid black; gibst, siehst du woran es liegt.

ist ein Blocklevel-Element und nimmt die gesamte zur Verfügung stehende Breite ein, wenn man keine feste Breite angibt. Demzufolge ist Dein

genauso breit wie dein DIV#content, also 900px abzüglich der gesetzten margin-Werte, abzüglich border.

8

Irgendwie versteh ich euch nicht, sorry.
Bei mir jedenfalls wird der Text nicht auf der farblichen Fläche angezeigt, sondern steht etwas weiter links.
Ich habe jetzt die

Elemente rausgenommen, doch es ändert sich nichts.

9

Lass mal alles so wie es war und dann gib dem div#content und dem

ein border:1px solid black;

Du wirst sofort das Problem erkennen.

10

Jetzt seh ichs.
Der Rahmen schiesst über die Grafik hinweg. Das ist natürlich schlecht. Kann man das irgendwie beheben?

11

Hast dus schon so versucht, indem du den Wert bei width einfahc kleiner machst, bis es eben passt?

12

Tut er eben nicht. wenn du meinen oberen beitrag richtig gelesen hättest wäre dir klar, das dei

insgesamt 900px breit ist. nähmlich so breit wie dein DIV#content und im übrigen auch deine Grafik.

Also schau dir jetzt sofort margin bei CSS4you.de an und begreife was passiert!
(hast du deinem Content-div mal den rahmen gegeben?)

13

Jetzt hat es funktioniert!
Vielen Dank für eure Hilfe!