Falsche Homepagedarstellung

TheShadow · 8 August 2007

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.

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?

Die Beschriftung wurde mit GIMP gemacht und jetzt weiss ich nicht, wie ich die Links mit dem Platzhalter verwirkliche.

Hier meine index.html:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>The Shadow's World v. 0.1 Alpha</title> 
<link rel="stylesheet" type="text/css" href="page.css" >
</head>
<body>
<div id="Main">
<div id="LeisteOben"></div>
<div id="Banner"></div>
<div id="Menue"></div>
<div id="Inhalt">
<h1>Willkommen</h1>
<p>So da wären wir! =)</p>
</div>
</div>
</body>
</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;
}

Vielen Dank!
Gruß

Drakes · 8 August 2007

Probiers zuerst mal mit(wegen dem weissen Streifen):

Code:

* {
    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:

<ul>
    <li><a href="#"><img src="" width="" height="" alt="" /></a></li>
    <li><a href="#"><img src="" width="" height="" alt="" /></a></li>
    <li><a href="#"><img src="" width="" height="" alt="" /></a></li>
    <li><a href="#"><img src="" width="" height="" alt="" /></a></li>
    <li><a href="#"><img src="" width="" height="" alt="" /></a></li>
</ul>

und für CSS vielleicht noch:

Code:

ul { list-style-type: none; }

oder war es list-style-image, naja auch egal

TheShadow · 8 August 2007

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?

Peter · 9 August 2007

Probier doch mal statt padding

margin.....

Code:

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 -> <div id="inhalt"> 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

)

könnte vieleicht das problem lösen....

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

Gruß,
Peter

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

TheShadow · 9 August 2007

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

Peter · 9 August 2007

????

Ä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

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<!--
   HTML 3.2
   Document type as defined on [URL="http://www.w3.org/TR/REC-html32"]HTML 3.2 Reference Specification[/URL]
-->
<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>

gruenspan · 9 August 2007

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

<P> ist ein Blocklevel-Element und nimmt die gesamte zur Verfügung stehende Breite ein, wenn man keine feste Breite angibt. Demzufolge ist Dein <P> genauso breit wie dein DIV#content, also 900px abzüglich der gesetzten margin-Werte, abzüglich border.

TheShadow · 9 August 2007

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 <p> Elemente rausgenommen, doch es ändert sich nichts.

gruenspan · 9 August 2007

Lass mal alles so wie es war und dann gib dem div#content und dem <p> ein border:1px solid black;

Du wirst sofort das Problem erkennen.

TheShadow · 9 August 2007

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

Maxi · 9 August 2007

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

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

gruenspan · 9 August 2007

TheShadow schrieb:
....
Der Rahmen schiesst über die Grafik hinweg....

Tut er eben nicht. wenn du meinen oberen beitrag richtig gelesen hättest wäre dir klar, das dei <p> 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?)

TheShadow · 9 August 2007

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

Falsche Homepagedarstellung

TheShadow

Neues Mitglied

Drakes

Neues Mitglied

TheShadow

Neues Mitglied

Peter

Neues Mitglied

TheShadow

Neues Mitglied

Peter

Neues Mitglied

gruenspan

Neues Mitglied

TheShadow

Neues Mitglied

gruenspan

Neues Mitglied

TheShadow

Neues Mitglied

Maxi

Neues Mitglied

gruenspan

Neues Mitglied

Anhänge

TheShadow

Neues Mitglied

Neueste Beiträge