• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Wieso sind die Punkte draußen?

B

BobbaWelt

New member
Hallo..
Hab wieder eine Frage..

Ich habe unter "Community" die rechte Navigation gemacht, aber i-wie sind die Punkte draussen, und der Abstand oben und unten sind kleiner..

HTML Code:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="banner"></div>
<div id="bar">Whatever here...</div>
<div id="container">
    <!-- Left -->

<div id="left">
<div><img src="images/navigation.png" alt="Navigation" /></div>
<div id="box"><ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="events.html">Events</a></li>
    <li><a href="habbohotel.html">Habbohotel</a></li>
    <li><a href="bobbawelt.html">BobbaWelt</a></li>
    <li><a href="fancenter.html">Fancenter</a></li>
    <li><a href="goodys.html">Goodys</a></li>
    <li><a href="community.html">Community</a></li>
    <li><a href="weahledeinwunschthema.html">Wähle dein Wunschthema</a></li>
  </ul></div>
<div><img src="images/box_bottom.png" alt="Box Bottom" /></div>
<div><img src="images/user.png" alt="User Login" /></div>
<div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse turpis. Vivamus semper rutrum erat. Nam sed purus nec massa adipiscing auctor. Morbi quam. Morbi fermentum, mi sed pharetra facilisis, ipsum magna faucibus lorem, sit amet auctor mauris odio id lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</div>
<div><img src="images/box_bottom.png" alt="Box Bottom" /></div>
<div><img src="images/disclaimer.png" alt="Disclaimer" /></div>
<div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse turpis. Vivamus semper rutrum erat. Nam sed purus nec massa adipiscing auctor. Morbi quam. Morbi fermentum, mi sed pharetra facilisis, ipsum magna faucibus lorem, sit amet auctor mauris odio id lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</div>
<div><img src="images/box_bottom.png" alt="Box Bottom" /></div>
</div>
    <!-- End Left -->
              <!-- Right -->

<div id="right">
<div><img src="images/headlines.png" alt="News" /></div>
<div class="box"><li><a href="partner.html">Partner</a></li>
<li><a href="kontaktformular.html">Kontaktformular</a></li>
<li><a href="redaktion.html">Redaktion</a></li>
<li><a href="impressum.html">Impressum</a></li>
<li><a href="disclaimer.html">Disclaimer</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="bobbaweltinfocenter.html">BobbaWelt Infocenter</a></li>
<li><a href="linkus.html">Link us!</a></li></div>
<div><img src="images/box_bottom.png" alt="Box Bottom" /></div>
<div><img src="images/stats.png" alt="..." /></div>
<div class="box">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse turpis. Vivamus semper rutrum erat. Nam sed purus nec massa adipiscing auctor. Morbi quam. Morbi fermentum, mi sed pharetra facilisis, ipsum magna faucibus lorem, sit amet auctor mauris odio id lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
</div>
<div><img src="images/box_bottom.png" alt="Box Bottom" /></div>
<div><img src="images/charts.png" alt="Partner" /></div>
<div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse turpis. Vivamus semper rutrum erat. Nam sed purus nec massa adipiscing auctor. Morbi quam. Morbi fermentum, mi sed pharetra facilisis, ipsum magna faucibus lorem, sit amet auctor mauris odio id lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</div>
<div><img src="images/box_bottom.png" alt="Box Bottom" /></div>
</div>
             <!-- End Right -->

        <!-- Content -->  
<div id="contentcontainer">
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse turpis. Vivamus semper rutrum erat. Nam sed purus nec massa adipiscing auctor. Morbi quam. Morbi fermentum, mi sed pharetra facilisis, ipsum magna faucibus lorem, sit amet auctor mauris odio id lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas pharetra est aliquet risus. Etiam arcu nulla, elementum et, interdum a, rhoncus ac, felis. Vestibulum malesuada nonummy neque. Suspendisse potenti. Praesent eu quam at enim hendrerit elementum. Etiam eleifend tempus arcu. Aenean dictum nunc in mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras sit amet erat. Donec nisi tortor, elementum et, ornare vitae, volutpat a, pede. Nullam ultrices. In sollicitudin ligula.
</div>
<div><img src="images/content_bottom.png" alt="Content Bottom" /></div>
<div style="color: #adaf96;"><center>This layout is designed and coded by Jibbish for free<br />
Valid <a href="http://validator.w3.org/check/referer" target="_blank">xHTML</a> and <a href="http://jigsaw.w3.org/css-validator/" target="blank">CSS</a> | Best viewed in Mozilla FireFox</center></div>

</div>
        <!-- End Content -->
        
</div>
</body>

</html>

Könnte es sein, dass weil ich bei der linken Navigation "Home" auf einer nächsten Linie gemacht habe? (Gehört zu dem Problem Abstand unten und oben)

Und wegen dem Punkten habe ich keine Lösung :S
 
AW: Wiese sind die Punkte draussen?

Nimm die Punkte bei beiden Navis weg und setzte das ins CSS rein
Code: 
#box ul li, .box ul li{
list-style-type: none;
}

Und in Deinem HTML hast Du zwar die <li> Elemente richtig gesetzt, aber davor und dahinter <ul> und </ul> vergessen. Das muss noch rein. Validiere regelmäßig Dein Markup, dann fällt Dir sowas sofort auf: HTML / XHTML / XML / WML Validator
 
AW: Wiese sind die Punkte draussen?

Aber es hat ja gar keine Punkte? :S

Und wegen dem <ul> das habe ich auch schon versucht reinzutun, aber dann gibt es eben diesen doofen Abstand wie bei der Navigation links..
 
AW: Wiese sind die Punkte draussen?

BobbaWelt schrieb:
Aber es hat ja gar keine Punkte? :S
Zum Vergrößern anklicken....

Es? :confused:

BobbaWelt schrieb:
Und wegen dem <ul> das habe ich auch schon versucht reinzutun, aber dann gibt es eben diesen doofen Abstand wie bei der Navigation links..
Zum Vergrößern anklicken....

Das muss rein, sonst ist es nicht valide und Du willst ja unbedingt valide Seiten schreiben, nicht wahr?

Die Abstände bekommst Du so weg:
Zusätzlich ins CSS:
#box ul {
margin:0;
}
Zum Vergrößern anklicken....

Außerdem muss Dein Home auch ein li-Element bekommen. Das gewünschte andere Aussehen für den Link der aktuellen Seite kannst Du mit einer Klasse .aktuell z.B. hinbekommen. Dafür lies die Dokumentation.

Und hier änderst Du lediglich das erste auf den 0-Wert
Code: 
#box
{
padding:0;
...
...
(usw.)
}
 
AW: Wiese sind die Punkte draussen?

Also ich hab jetzt mal bei meinem html code (Community) <ul>,</ul> eingefügt..

So:

HTML Code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="banner"></div>
<div id="bar">Whatever here...</div>
<div id="container">
    <!-- Left -->

<div id="left">
<div><img src="images/navigation.png" alt="Navigation" /></div>
<div id="box"></ul><li>
    <a href="home.html">Home</a></li>
    <li><a href="events.html">Events</a></li>
    <li><a href="habbohotel.html">Habbohotel</a></li>
    <li><a href="bobbawelt.html">BobbaWelt</a></li>
    <li><a href="fancenter.html">Fancenter</a></li>
    <li><a href="goodys.html">Goodys</a></li>
    <li><a href="community.html">Community</a></li>
    <li><a href="weahledeinwunschthema.html">Wähle dein Wunschthema</a></li>
  </ul></div>
<div><img src="images/box_bottom.png" alt="Box Bottom" /></div>
<div><img src="images/user.png" alt="User Login" /></div>
<div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse turpis. Vivamus semper rutrum erat. Nam sed purus nec massa adipiscing auctor. Morbi quam. Morbi fermentum, mi sed pharetra facilisis, ipsum magna faucibus lorem, sit amet auctor mauris odio id lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</div>
<div><img src="images/box_bottom.png" alt="Box Bottom" /></div>
<div><img src="images/disclaimer.png" alt="Disclaimer" /></div>
<div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse turpis. Vivamus semper rutrum erat. Nam sed purus nec massa adipiscing auctor. Morbi quam. Morbi fermentum, mi sed pharetra facilisis, ipsum magna faucibus lorem, sit amet auctor mauris odio id lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</div>
<div><img src="images/box_bottom.png" alt="Box Bottom" /></div>
</div>
    <!-- End Left -->
              <!-- Right -->

<div id="right">
<div><img src="images/headlines.png" alt="News" /></div>
<div class="box"></ul><li><a href="partner.html">Partner</a></li>
<li><a href="kontaktformular.html">Kontaktformular</a></li>
<li><a href="redaktion.html">Redaktion</a></li>
<li><a href="impressum.html">Impressum</a></li>
<li><a href="disclaimer.html">Disclaimer</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="bobbaweltinfocenter.html">BobbaWelt Infocenter</a></li>
<li><a href="linkus.html">Link us!</a></li></ul></div>
<div><img src="images/box_bottom.png" alt="Box Bottom" /></div>
<div><img src="images/stats.png" alt="..." /></div>
<div class="box">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse turpis. Vivamus semper rutrum erat. Nam sed purus nec massa adipiscing auctor. Morbi quam. Morbi fermentum, mi sed pharetra facilisis, ipsum magna faucibus lorem, sit amet auctor mauris odio id lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
</div>
<div><img src="images/box_bottom.png" alt="Box Bottom" /></div>
<div><img src="images/charts.png" alt="Partner" /></div>
<div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse turpis. Vivamus semper rutrum erat. Nam sed purus nec massa adipiscing auctor. Morbi quam. Morbi fermentum, mi sed pharetra facilisis, ipsum magna faucibus lorem, sit amet auctor mauris odio id lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</div>
<div><img src="images/box_bottom.png" alt="Box Bottom" /></div>
</div>
             <!-- End Right -->

        <!-- Content -->  
<div id="contentcontainer">
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse turpis. Vivamus semper rutrum erat. Nam sed purus nec massa adipiscing auctor. Morbi quam. Morbi fermentum, mi sed pharetra facilisis, ipsum magna faucibus lorem, sit amet auctor mauris odio id lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas pharetra est aliquet risus. Etiam arcu nulla, elementum et, interdum a, rhoncus ac, felis. Vestibulum malesuada nonummy neque. Suspendisse potenti. Praesent eu quam at enim hendrerit elementum. Etiam eleifend tempus arcu. Aenean dictum nunc in mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras sit amet erat. Donec nisi tortor, elementum et, ornare vitae, volutpat a, pede. Nullam ultrices. In sollicitudin ligula.
</div>
<div><img src="images/content_bottom.png" alt="Content Bottom" /></div>
<div style="color: #adaf96;"><center>This layout is designed and coded by Jibbish for free<br />
Valid <a href="http://validator.w3.org/check/referer" target="_blank">xHTML</a> and <a href="http://jigsaw.w3.org/css-validator/" target="blank">CSS</a> | Best viewed in Mozilla FireFox</center></div>

</div>
        <!-- End Content -->
        
</div>
</body>

</html>

Was hoffentlich auch richtig ist :D

~~~~~~~~~~~~~~~~~~~~

Und zu den 2 Sachen wo zum CSS Code gehören, wo gehören die genau hin bei der Box:
Code: 
#box
{
      padding:5px 0;
       background: url(images/box.png);
	   width: 202px;
	   padding-left: 5px;
	   padding-right: 5px;
	   font-family: Tahoma;
	   font-size: 11px;
	   color: #000000; 
}


Die gehören ja dort hin oder?!
 
AW: Wiese sind die Punkte draussen?

BobbaWelt schrieb:
Also ich hab jetzt mal bei meinem html code (Community) <ul>,</ul> eingefügt

....

Was hoffentlich auch richtig ist :D
Zum Vergrößern anklicken....

Gib mal den HTML Code hier auf dieser Seite ein. Wenn Du alles richtig gemacht hast, siehst Du das sofort. Wenn nicht, siehst Du das auch sofort.

Was Deine zweite Frage angeht, lies Dir nochmal Wort für Wort - bei Bedarf mehrmals - durch, was ich geschrieben habe. Und dann fang an, das umzusetzen. Du siehst ja sofort an der Navigation, ob Du das richtig gemacht hast.

(Nur mal ein Beispiel: Wenn da an der einen Stelle steht "Zusätzlich", dann meine ich damit ziemlich genau _Z_U_S_Ä_T_Z_L_I_C_H_!!!!!)
 
AW: Wiese sind die Punkte draussen?

Ich hab das getan, wegen dem html code aber dann zeigt ja z.B das an:

Line 11, Column 17: document type does not allow element "tr" here; assuming missing "table" start-tag.

(heisst ja:
Zeile 11, Spalte 17: Dokument-Typ nicht erlaubt Element "tr" hier; vorausgesetzt, fehlt "Tabelle" Start-Tag.

<div id="bar"> <tr>)
Und das letzte ">" bei <tr> ist rot angestrichen.. Aber was sollte das bedeuten: Element "tr" hier;?
und der Start-Tag ist ja dort? :S
 
AW: Wiese sind die Punkte draussen?

Ich weiß nicht, was Du da validiert hast.
In Deinem geposteten Dokument befindet sich absolut keine Tabelle -> Zeile -> Spalte -> Zelle
 
AW: Wiese sind die Punkte draussen?

Um das mal abzukürzen:

Dein zuletzt geposteter Code ist gemeint. Davor schreibst Du:

BobbaWelt schrieb:
Also ich hab jetzt mal bei meinem html code (Community) <ul>,</ul> eingefügt..
Zum Vergrößern anklicken....

Das wäre richtig, wenn Du das so gemacht hättest. Was Du stattdessen aber gemacht hast ist </ul>..</ul> und das zweimal - in beiden Navigationen. Das führt zu der unerfreulichen Anzahl von 26 Fehlern.

Siehst Du den Unterschied????
 
AW: Wiese sind die Punkte draussen?

dkdenz schrieb:
Ich weiß nicht, was Du da validiert hast.
In Deinem geposteten Dokument befindet sich absolut keine Tabelle -> Zeile -> Spalte -> Zelle
Zum Vergrößern anklicken....
Wollt ich auch schon sagen, das schließende UL an der falschen Stelle hat offenbar ohne Probleme validiert ;)

Man könnte jetzt wieder auf irgend eine FRAME/IFRAME Problematik tippen oder auf Fehlbedienung.
 
AW: Wiese sind die Punkte draussen?

Opps XD
Da habt ihr Natürlich recht, hatte ja 4x </ul> =o

Hab das jetzt abgeändert, aber dann muss natürlich wieder ein neuer Fehler dazukommen :S
Durch das ändern, hat es bei der rechten Navigation wieder Lücken gegeben (oben und unten) :mad:


Ich hab den HTML Code von der Seite "Community" nochmals Validiert, und jetzt hat es keinen einzigen Fehler mehr :D
 
AW: Wiese sind die Punkte draussen?

Code: 
.box
ul {
margin:0;
}

      background: url(images/box.png);
	   width: 202px;
	   padding-left: 5px;
	   padding-right: 5px;
	   font-family: Tahoma;
	   font-size: 11px;
	   color: #000000; 
}


So ?! :S
 
AW: Wiese sind die Punkte draussen?

BobbaWelt schrieb:
So ?! :S
Zum Vergrößern anklicken....
Nur mal so als generelle Faustregel für alles was mit Computern zu tun hat: Wenn man eine Klammer aufmacht, dann muss man sie auch wieder schließen. Umgekehrt sollte man natürlich auch nicht mehr schließende Klammern als öffnende haben.
 
AW: Wiese sind die Punkte draussen?

anna55 schrieb:
Das hier zusätzlich einfügen in Deine CSS-Datei..
Zum Vergrößern anklicken....

Zusätzlich heißt für mich soviel wie extra, also Du legst einen Apfel neben die Birne und packst sie nicht irgenwie in diese rein.

Also die Klassen .box ul und .box stehen dann in Deinem CSS - oder wie auch immer Du das umsetzen willst. Aber so würde es halt gehen.

Kleiner Tipp am Rande: Ich würde den mittleren Bereich auch oben mit einem Rand versehen, damit die Ecken beim Textbereich rund sind:
rund.jpg
 
Zuletzt bearbeitet:
AW: Wiese sind die Punkte draussen?

Ah man ich hab ja gefragt ob das so richtig ist.. Die klammer ist ja geschlossen^^

Ich chegg das nicht >.<
 
AW: Wiese sind die Punkte draussen?

Benutzt Du eigentlich das Forum um Deine Seite Stück für Stück fertig machen zu lassen?
Hast Du jemals das gelesen, was hinter unseren Links so steht?
Bist Du zu faul, um Dir das Wissen selber anzueignen?

Ein Punkt vor einem Selektor bezeichnet eine Klasse.
Ein number sign dagegen bezeichnet eine ID.
 
Zuletzt bearbeitet:
AW: Wiese sind die Punkte draussen?

dkdenz schrieb:
Benutzt Du eigentlich das Forum um Deine Seite Stück für Stück fertig machen zu lassen?
Hast Du jemals das gelesen, was hinter unseren Links so steht?
Bist Du zu faul, um Dir das Wissen selber anzueignen?
Zum Vergrößern anklicken....

Bald beginnen die Herbstferien, dann bleibt mehr Zeit, SELFHTML zu studieren, denke ich mal.

BobbaWelt schrieb:
Code: 
.box
ul {
margin:0;
}

      background: url(images/box.png);
	   width: 202px;
	   padding-left: 5px;
	   padding-right: 5px;
	   font-family: Tahoma;
	   font-size: 11px;
	   color: #000000; 
}
Zum Vergrößern anklicken....

Wie Dir Albu gesagt hat, müssen alle geöffneten Klammern auch geschlossen werden. Bei Deinem Code hast Du eine geöffnete, aber zwei geschlossene Klammern.

Jetzt lies Dir nochmal alle relevanten Posts in Ruhe durch. Du verstehst dann bestimmt, was Du in Deine CSS-Datei einsetzen musst.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben