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

Layout funktioniert nicht ganz

V

VirusX

Neues Mitglied
Hey,

Ich ein Problem bei folgendem Layout:

Unbenanntes Dokument

Eigentlich sollen die Buttons noch einen Hover haben, allerdings wird dieser nicht angezeigt.

Erkennt ihr vielleicht den Fehler:

PHP: 
<!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>Unbenanntes Dokument</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
      <div id="top">  
        <div id="header"></div>
            <div id="buttons">
              <ul>
                    <li id="news"><a href="http://"></a></li>
                    <li id="uber"><a href="http://"></a></li>
                    <li id="projekte"><a href="http://"></a></li>
                    <li id="galerie"><a href="http://"></a></li>
                    <li id="tutorials"><a href="http://"></a></li>
                    <li id="gastebuch"><a href="http://"></a></li>
                    <li id="kontakt"><a href="http://"></a></li> 
              </ul>
           </div>
         </div>
        
  <div id="verlauf"></div>
                    <div id="inhalt">
                        <div id="text"></div>
                    </div>
                    
                        <div id="footer"></div>

</div>
</body>
</html>
PHP: 
html, body, ul, li {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

#wrapper {
    width: 1000px;
    height: 900px;
}

#top {
    background-image: url(Bilder/top.jpg);
    width: 1000px;
    height: 150px;
}

#header {
    background-image: url(Bilder/header.jpg);
    width: 300px;
    height: 150px;
    float: left;
}

#buttons {
    width: 700px;
    height: 150px;
    float: left;
}

#news a {
    background-image: url(Bilder/news.jpg);
    width: 100px;
    height: 50px;
    float: left;
    margin: 100px 0px 0px 0px;
}

#uber a {
    background-image: url(Bilder/ubermich.jpg);
    width: 100px;
    height: 50px;
    float: left;
    margin: 100px 0px 0px 0px;
}
#projekte a {
    background-image: url(Bilder/projekte.jpg);
    width: 100px;
    height: 50px;
    float: left;
    margin: 100px 0px 0px 0px;
}
#galerie a {
    background-image: url(Bilder/galerie.jpg);
    width: 100px;
    height: 50px;
    float: left;
    margin: 100px 0px 0px 0px;
}
#tutorials a {
    background-image: url(Bilder/tutorials.jpg);
    width: 100px;
    height: 50px;
    float: left;
    margin: 100px 0px 0px 0px;
}
#gastebuch a {
    background-image: url(Bilder/gastebuch.jpg);
    width: 100px;
    height: 50px;
    float: left;
    margin: 100px 0px 0px 0px;
}
#kontakt a {
    background-image: url(Bilder/kontakt.jpg);
    width: 100px;
    height: 50px;
    float: left;
    margin: 100px 0px 0px 0px;
}

news a:hover {
    background-image: url(Bilder/newshover.jpg);
    width: 100px;
    height: 150px;
    float: left;
}

uber a:hover {
    background-image: url(Bilder/ubermichhover.jpg);
    width: 100px;
    height: 150px;
    float: left;
}

projekte a:hover {
    background-image: url(Bilder/projektehover.jpg);
    width: 100px;
    height: 150px;
    float: left;
}

galerie a:hover {
    background-image: url(Bilder/galeriehover.jpg);
    width: 100px;
    height: 150px;
    float: left;
}

tutorials a:hover {
    background-image: url(Bilder/tutorialshover.jpg);
    width: 100px;
    height: 150px;
    float: left;
}

gastebuch a:hover {
    background-image: url(Bilder/gastebuchhover.jpg);
    width: 100px;
    height: 150px;
    float: left;
}

kontakt a:hover {
    background-image: url(Bilder/kontakthover.jpg);
    width: 100px;
    height: 150px;
    float: left;
}



#verlauf {
    background-image: url(Bilder/verlauf.jpg);
    width: 1000px;
    height: 10px;
    clear: both;
}

#inhalt {
    background-image: url(Bilder/inhalt.jpg);
    width: 1000px;
    height: 715px;
}

#text {
  width: 960px;
  height: 675px;
  margin: 20px 20px 20px 20px;
}

#footer {
    background-image: url(Bilder/footer.jpg);
    width: 1000px;
    height: 25px;
}
Aßerdem weiß ich nicht, woher der weiße Rand zwischen den Buttons und dem Inhalt herkommt. Eigentlich habe ich alle Maße richtig eingegeben. (Im Dreamweaver wird die weiße Lücke auch nicht angezeigt) :(

Ich hoffe ihr könnt mir helfen.
 
Hier musst du noch eine Raute voranstellen:
#news a:hover {
background-image: url(/Joomla/templates/Homepage3/Bilder/newshover.jpg);
width: 100px;
height: 150px;
float: left;
}
Zum Vergrößern anklicken....

Das gilt auch noch für andere Elemente in deiner CSS-Datei.
 
Du kannst Dein Stylesheet übrigens noch übersichtlicher gestalten, indem Du die Eigenschaften, die alle Links gemeinsam haben, zusammenfasst, z.B. so
Code: 
#buttons ul a {
    width: 100px;
    height: 50px;
    float: left;
    margin: 100px 0px 0px 0px;
}
#buttons ul a:hover {
    width: 100px;
    height: 150px;
    float: left;
}
Außerdem ist Dein div#buttons unnötig. Warum packst Du ein Block-Element (ul) in ein weiteres Block-Element? Entferne das div und nenne ul "buttons".
 
Efchen schrieb:
Du kannst Dein Stylesheet übrigens noch übersichtlicher gestalten, indem Du die Eigenschaften, die alle Links gemeinsam haben, zusammenfasst, z.B. so
Code: 
#buttons ul a {
    width: 100px;
    height: 50px;
    float: left;
    margin: 100px 0px 0px 0px;
}
#buttons ul a:hover {
    width: 100px;
    height: 150px;
    float: left;
}
Außerdem ist Dein div#buttons unnötig. Warum packst Du ein Block-Element (ul) in ein weiteres Block-Element? Entferne das div und nenne ul "buttons".
Zum Vergrößern anklicken....

Ach verdammt ich hab news a:hover einfach 7x kopiert, die Bild-Url geändert und gar nicht gesehen, dass ein # überall fehlt.


So ich bin jetzt etwas weiter, auch das erste Joomla Modul ist integriert ... jetzt gibts das nächste Problem :(

Also ich möchte, dass sich der Hintergrund des Inhalts sich automatisch vergrößert, wenn mehr Platz gebraucht wird. Da ich ja einen Rahmen drum herum habe, kann ich nicht einfach das ganze Bild nochmal wiederholen, also habe ich in der Mitte einen 1px hohen Bildauschnitt eingefügt, der sich nach unten wiederholen soll, wenn mehr Platz gebraucht wird. Wo muss ich allderings den Joomla Befehl <jdoc:include type="component" style="xhtml" /> hinsetzen, damit dieser über alle Divs hinweg angezeigt wird?

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>
<jdoc:include type="head" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="/Joomla/templates/Homepage3/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
      <div id="top">  
        <div id="header"></div>

              <ul id ="buttons">
                    <li id="news"><a href=""><jdoc:include type="modules" name="left" style="none" /></a></li>
                    <li id="uber"><a href="http://"></a></li>
                    <li id="projekte"><a href="http://"></a></li>
                    <li id="galerie"><a href="http://"></a></li>
                    <li id="tutorials"><a href="http://"></a></li>
                    <li id="gastebuch"><a href="http://"></a></li>
                    <li id="kontakt"><a href="http://"></a></li> 
              </ul>

         </div>
        
  <div id="verlauf"></div>
                    [B]<div id="inhalt">

                        <div id="inhalt_oben">[U]<jdoc:include type="component" style="xhtml" />[/U]
                            <div id="variable"></div>
                                <div id="inhalt_unten"></div>
                        
                        </div>[/B]
                    </div>
                    
                        <div id="footer"></div>

</div>
</body>
</html>

Code: 
#inhalt {
    width: 1000px;
    height: auto;
}

#inhalt_oben {
    background-image: url(/Joomla/templates/Homepage3/Bilder/inhalt_oben.jpg);
    height: 1000px;
    height: 238px;
    background-repeat: no-repeat;
}
              
        

variable {
    background-image: url(/Joomla/templates/Homepage3/Bilder/variable.jpg);
    width: 1000px;
    height: 2px;
    background-repeat: repeat-y;
}

#inhalt_unten {
    background-image: url(/Joomla/templates/Homepage3/Bilder/inhalt_unten.jpg);
    width: 1000px;
    height: 475px;
    background-repeat: no-repeat;
}

So siehts in Natura aus Willkommen auf der Startseite
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben