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

Größe veränderbar

V

VirusX

Neues Mitglied
Hey,

Dies ist meine erste Homepage (bzw. das Grundgerüst, Joomla-Anpassung fehlt auch noch) Willkommen auf der Startseite

Und ich habe gleich mehrere Fragen:

1) Wenn ich auf einen Button klicke, sollen alle verschwinden, damit ich halt Platz für den Inhalt bekomme. Nur der ganz linke "Hauptmenü" soll stehenbleiben und wenn ich diesen wieder anklicke, soll die Ansicht mit allen Buttons erscheinen. Wie löse ich das am besten in Joomla?

2) Ganz unten möchte ich noch ein paar Module einbauen und wie ihr seht, passt das von der Größe her schonmal nicht. Deswegen wollte ich mal fragen, wie ich den unteren (und auch den Inhaltsbereich) anpassbar machen kann, also dass sich das ganze vergrößert, wenn mehr Platz benötigt wird. (Bei dem Verlauf unten würde ich einfach die schwarze Fläche ganz unten verlängern)

3) Wie kann ich die Schriftfarbe der Module von schwarz in weiß ändern?

PHP:

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/Homepage2/style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">
    <div id="top"></div>
  <div id="content">
        <ul>
            <li id="hauptmenu"><a href=""></a></li>
            <li id="home"><a href=""></a></li>
            <li id="ubermich"><a href=""></a></li>
            <li id="design"><a href=""></a></li>
            <li id="tutorials"><a href=""></a></li>
            <li id="gastebuch"><a href=""></a></li>
            <li id="kontakt"><a href=""></a></li>
      </ul>
</div>
<div id="footer">
    <div id="left"><jdoc:include type="modules" name="user3" style="xhtml" /></div>
    <div id="middle"><jdoc:include type="modules" name="user1" style="xhtml" /></div>
    <div id="right"><jdoc:include type="modules" name="user2" />
</div>


</div>
</div>


</body>
</html>

CSS:

Code: 
html,body, ul {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
    margin: 0;
}

#wrapper {
    width: 1000px;
    height: 1200px;
    padding: 0;
}

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

#content {
    background-image: url(/Joomla/templates/Homepage2/Bilder/content.jpg);
    width: 1000px;
    height: 900px;
}

#footer {
    background-image: url(/Joomla/templates/Homepage2/Bilder/footer.jpg);
    width: 1000px;
    height: 200px;
}

#hauptmenu a {
    background-image: url(/Joomla/templates/Homepage2/Bilder/hauptmenu.jpg);
    width: 22px;
    height: 850px;
    margin: 25px 0px 25px 5px;
    float: left;
}

#home a {
    background-image: url(/Joomla/templates/Homepage2/Bilder/home.jpg);
    width: 150px;
    height: 800px;
    float: left;
    margin: 50px 0px 50px 10px;
}

#design a{
    background-image: url(/Joomla/templates/Homepage2/Bilder/projekt.jpg);
    width: 150px;
    height: 800px;
    float: left;
    margin: 50px 10px 50px 10px;
}

#ubermich a {
    background-image: url(/Joomla/templates/Homepage2/Bilder/ubermich.jpg);
    width: 150px;
    height: 800px;
    float: left;
    margin: 50px 0px 50px 10px;
}

#tutorials a {
    background-image: url(/Joomla/templates/Homepage2/Bilder/tutorials.jpg);
    width: 150px;
    height: 800px;
    float: left;
    margin: 50px 0px 50px 0px;
}

#gastebuch a {
    background-image:  url(/Joomla/templates/Homepage2/Bilder/gastebuch.jpg);
    width: 146px;
    height: 800px;
    float: left;
    margin: 50px 10px 50px 10px;
}

#kontakt a {
    background-image: url(/Joomla/templates/Homepage2/Bilder/kontakt.jpg);
    width: 151px;
    height: 800px;
    float: left;
    margin: 50px 0 0 0;
}

#left {
    width: 313px;
    height: 150px;
    margin: 25px 10px 25px 10px;
    float: left;
}

#middle {
    width: 328px;
    height: 150px;
    margin: 25px 10px 25px 10px;
    float: left;
}

#right {
    width: 300px;
    height: 150px;
    margin: 25px 0px 25px 10px;
    float: left;
}

So Far, VirusX
 
Zu 1) Du kannst das über CSS-Klassen und display:none machen... oder du hinterlegst auf der Unterseite ein anderes Template (das ist allerdings eine Joomla-Einstellung)

Zu 2) Ich würde die height angabe im Footer rausnehmen und ggf. gegen min-height auswechseln (min-height: Minimale Höhe: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets)

Zu 3) Die Module werden wahrscheinlich irgendwo CSS-Klassen haben (guck mal in den Quelltext der Seite). Über die Klassen kannst du dann auch die Farben verändern
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben