✔ Background-repeat

Headymaster · 7. Februar 2007

Hallo!

Habe ein kleines Prob mit background repeat...

also habe einen AdminPanel der zwei div-blöcke hat....links und rechts

Hier mal der linke Block:

HTML:

<div id="links">
     <div id="nav">
	   <ul>Allgemein</ul>
	     <li><a href="index">Index</a></li>
		 <li><a href="#">Bug melden</a></li>
		 <li><a href="logout">Logout</a></li>
	   <ul>Administratoren</ul>
	     <li><a href="admins">Index</a></li>
		 <li><a href="admins/create">Neuen Admin anlegen</a></li>
	   <ul>Veranstaltungen</ul>
	     <li><a href="veranstaltungen">Index</a></li>
		 <li><a href="veranstaltungen/create">Neue Veranstaltung hinzufügen</a></li>
	   <ul>Galerie</ul>
	     <li><a href="galerie/index">Index</a></li>
		 <li><a href="galerie/create">Neue Galerie anlegen</a></li>
	   <ul>Gästebuch</ul>
	     <li><a href="gbook/index">Index</a></li>
	   <ul>Bands</ul>
	     <li><a href="bands/index">Index</a></li>
		 <li><a href="bands/create">Neue Band anlegen</a></li>
	   <ul>Angebote</ul>
	     <li><a href="angebote/index">Index</a></li>
		 <li><a href="angebote/create">Neues Angebot erstellen</a></li>
	   <ul>Newsletter</ul>
	     <li><a href="newsletter/index">Neuen Newsletter schreiben</a></li>
	   <ul>Impressum</ul>
	     <li><a href="impressum/index">Index</a></li>
	 </div>
  </div>

So und hier mal mein CSS-Style dafür

HTML:

#links {
  position:absolute;
  background-image:url(../images/adminpanel/NilsonCMSAdminPanelLeft.png);
  background-repeat:repeat;
  top:0;
  left:0;
  bottom:0;
  right:220px;
}

Das Background-Bild ist zwar dar...wird aber bei überschreitung in der y-Achse nicht fotgesetzt...

habt ihr vll ne Idee?

MFG Nilson

Gumbo · 7. Februar 2007

Ist es denn dafür hoch genug? Dein HTML-Quellcode ist übrigens fehlerhaft.

Headymaster · 7. Februar 2007

Nein ist es ja grad net....es soll sich ja sobald die Navi größer ist als das Bild halt wiederholen...sprich repeat..

Und was genau soll denn fehlerhaft sein?

MFG Nilson

Maik · 7. Februar 2007

Hi,

versuch es mal ohne die absoluten Positionsangaben:

Code:

html,body {
margin: 0;
padding: 0;
height: 100%;
}

#links {
  background-image:url(../images/adminpanel/NilsonCMSAdminPanelLeft.png);
  background-repeat:repeat;
  margin-right:220px;
  min-height:100%;
  height:auto !important;
  height:100%;
}

und strukturiere deine verschachtelte Liste nach dem folgenden Schema, damit das Markup validiert:

Code:

<ul>
    <li>item 1
        <ul>
            <li>subitem 1.1</li>
        </ul>
    </li>
    <li>item 2
        <ul>
            <li>subitem 2.1</li>
            <li>subitem 2.2</li>
        </ul>
    </li>
</ul>

Headymaster · 7. Februar 2007

Also zu dem ersten...das funktioniert net ..... da wird die ganze Navi mit Backgorund nach rechts in den content geschoben und naja das mit dem neu formatieren ist net so gut denn dann verzeiht es das ganze Design und es gibt keine Oberpunkte mehr....

So und hier mal meine ganze index-seite und auch das ganze style:

HTML:

<!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=iso-8859-1" />
<base href="http://<?php echo $this->escape($_SERVER['HTTP_HOST']) . $this->escape($this->baseurl); ?>/">
<link rel="stylesheet" href="_files/css/styles.css" type="text/css" />
<script type="text/javascript" src="_files/js/delete.js"></script>
<title><?php echo $this->escape($this->title); ?></title>
</head>
<body>
  <div id="links">
     <div id="nav">
	   <ul>Allgemein</ul>
	     <li><a href="index">Index</a></li>
		 <li><a href="#">Bug melden</a></li>
		 <li><a href="logout">Logout</a></li>
	   <ul>Administratoren</ul>
	     <li><a href="admins">Index</a></li>
		 <li><a href="admins/create">Neuen Admin anlegen</a></li>
	   <ul>Veranstaltungen</ul>
	     <li><a href="veranstaltungen">Index</a></li>
		 <li><a href="veranstaltungen/create">Neue Veranstaltung hinzufügen</a></li>
	   <ul>Galerie</ul>
	     <li><a href="galerie/index">Index</a></li>
		 <li><a href="galerie/create">Neue Galerie anlegen</a></li>
	   <ul>Gästebuch</ul>
	     <li><a href="gbook/index">Index</a></li>
	   <ul>Bands</ul>
	     <li><a href="bands/index">Index</a></li>
		 <li><a href="bands/create">Neue Band anlegen</a></li>
	   <ul>Angebote</ul>
	     <li><a href="angebote/index">Index</a></li>
		 <li><a href="angebote/create">Neues Angebot erstellen</a></li>
	   <ul>Newsletter</ul>
	     <li><a href="newsletter/index">Neuen Newsletter schreiben</a></li>
	   <ul>Impressum</ul>
	     <li><a href="impressum/index">Index</a></li>
	 </div>
  </div>
  <div id="rechts">
     <?php echo $this->render($this->subtemplate); ?>
  </div>
</body>
</html>

HTML:

#links {
  position:absolute;
  background-image:url(../images/adminpanel/NilsonCMSAdminPanelLeft.png);
  background-repeat:repeat;
  top:0;
  left:0;
  bottom:0;
  right:220px;
}

#rechts {
  position:absolute;
  top:0;
  left:220px;
  right:0;
  bottom:0;
  background-color:#FFFFFF;
}

#form {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  color:#000000;
}

.error {
  background-color: rgb(244, 225, 225); border: 1px solid rgb(204, 0, 0);
  padding: 0.2em; color: rgb(204, 0, 0);
}

img {
  border:0;
}


#nav ul {
  font-weight:bold;
  color:#000000;
}

#nav li {
  margin-left: 1em;
}

#nav li a {
  color:#000000;
}

#nav li a:hover {
  color:#FF0000;
}

Maik · 7. Februar 2007

Okay, nächster Vorschlag, nachdem ich nun den übrigen Quellcode gesehen habe:

Code:

html,body {
margin: 0;
padding: 0;
height: 100%;
}

#links {
  float: left;
  background-image:url(../images/adminpanel/NilsonCMSAdminPanelLeft.png);
  background-repeat:repeat;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-right: 0 !important;
  margin-right: -3px;
}

#rechts {
  margin-left: 230px;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  background-color:#FFFFFF;
}

Wenn dir mein Vorschlag zur Listenstrukturierung nicht zusagt, auch gut, aber dann schau dir bitte auch mal an, was der w3c-Validator zu deinem HTML-Code sagt, und lies auf selfHTML nach, wie eine Liste aufgebaut wird -> http://de.selfhtml.org/html/text/listen.htm

[editpost]

Du kannst es ja mal auf diese Weise probieren:

Code:

#nav ul {
list-style: none;
margin-left: 100px;
padding: 0;
}

#nav ul li ul {
list-style: square;
margin-left: -100px;
padding: 0;
}

Code:

<div id="links">
     <div id="nav">
           <ul>
               <li>Allgemein
                        <ul>
                            <li><a href="index">Index</a></li>
                            <li><a href="#">Bug melden</a></li>
                            <li><a href="logout">Logout</a></li>
                        </ul>
               </li>
               <li>Administratoren
                                  <ul>
                                      <li><a href="admins">Index</a></li>
                                      <li><a href="admins/create">Neuen Admin anlegen</a></li>
                                  </ul>
               </li>
               <li>Veranstaltungen
                                  <ul>
                                      <li><a href="veranstaltungen">Index</a></li>
                                      <li><a href="veranstaltungen/create">Neue Veranstaltung hinzufügen</a></li>
                                  </ul>
               </li>
               <li>Galerie
                          <ul>
                              <li><a href="galerie/index">Index</a></li>
                              <li><a href="galerie/create">Neue Galerie anlegen</a></li>
                          </ul>
               </li>
               <li>Gästebuch
                            <ul>
                                <li><a href="gbook/index">Index</a></li>
                            </ul>
               </li>
               <li>Bands
                        <ul>
                            <li><a href="bands/index">Index</a></li>
                            <li><a href="bands/create">Neue Band anlegen</a></li>
                        </ul>
               </li>
               <li>Angebote
                           <ul>
                               <li><a href="angebote/index">Index</a></li>
                               <li><a href="angebote/create">Neues Angebot erstellen</a></li>
                           </ul>
               </li>
               <li>Newsletter
                             <ul>
                                 <li><a href="newsletter/index">Neuen Newsletter schreiben</a></li>
                             </ul>
               </li>
               <li>Impressum
                            <ul>
                                <li><a href="impressum/index">Index</a></li>
                            </ul>
               </li>
           </ul>
     </div>
</div>

Headymaster · 8. Februar 2007

Ja danke das funktioniert nun super....habe zwar die margin-werte noch bissle verändert aber is alles im Lot nu

MFG Nilson

✔ Background-repeat

Headymaster

Erfahrenes Mitglied

Gumbo

Erfahrenes Mitglied

Headymaster

Erfahrenes Mitglied

Maik

Headymaster

Erfahrenes Mitglied

Maik

Headymaster

Erfahrenes Mitglied

Neue Beiträge