• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Falsche Homepagedarstellung

Status
Für weitere Antworten geschlossen.
TheShadow

TheShadow

Neues Mitglied
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.:D

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?:D
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ß
 
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 :p
 
Zuletzt bearbeitet:
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?
 
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 :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.....
 
Zuletzt bearbeitet:
????

Ä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>
 
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.
 
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.
 
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.
 
Jetzt seh ichs.
Der Rahmen schiesst über die Grafik hinweg. Das ist natürlich schlecht. Kann man das irgendwie beheben?
 
TheShadow schrieb:
....
Der Rahmen schiesst über die Grafik hinweg....
Zum Vergrößern anklicken....
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?)
 

Anhänge

  • shot.jpg
    shot.jpg
    14,7 KB · Aufrufe: 5
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben