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

CSS Inferenzen

M

memento

Neues Mitglied
Ich habe diese Homepage jetzt so halbswegs fertig, jedoch ein paar Probleme die ich nicht lösen kann. Vorallem mit dem überlagernden Elementen (z-index) funktioniert nicht alles so einwandfrei.



  1. Anpassung an verschiedene Bildschirm-Breiten
    Derzeit sieht die Homepage bei einer Breite 1920x1080 optimal aus... aber das war's dann auch.
    Die Frau verkleinert sich zwar proportionell, aber wenn die Breite sich verkleinert überlagert das Schild mit den Vögeln das Menü und Content. Vorstellen könnte ich mir auch, wenn eine gewisse Breite unterschritten wird, dass sich die Frau einfach ausblendet wird. Am Wichtigsten für mich, dass der Content mitläuft... mit margin auto hats nicht wirklich funktioniert. Ich komm auf keinen grünen Zweig... :-(
  2. Footer
    Wie kriege ich das hin, dass der Footer (Facebook Logo und Impressum Button) sich immer rechts unten ausrichten? Bei mir ist es überall, aber nit da wo's hin soll.
  3. Button Hover fixieren, wenn aktiv (Code in Posting unterhalb)
    Ich hätte gerne, dass zB bei dem Menüpunkt, wenn er angeklickt wurde, das Hover - Design fixiert bleibt. In dem Fall schwarz ist, wenn aktiv. Ich habe zwar das über php, aber es funktioniert einfach nicht. Hab ich es über CSS falsch definiert? Sonst muss ich das Thema wohl in PHP verschieben...


D A N K E im Voraus für eure Hilfe!
Für peinliche Anfängerfehler entschuldige ich mich jetzt schon... ;-)


HINWEIS! Komplette index.php und style.css in den unteren 2 Postings.


HTML: 
<a  href="index.php?go=studio" id="studio" class="foto-link  foto_studio" class="<?php if ($_GET['go'] == 'studio') echo 'aktiv';  ?>"</a>

Code: 
.foto-link {
     height: 18px;
     display: block;
     margin: 0 auto;
     width: 119px;
     padding-right: 22px;
     z-index: 2;
     position: relative;
 }

.foto-link:hover {
    background-position: 0 -18px;
}

.foto-link:active {
    background-position: 0 -18px;


.foto_studio {
    background: url(../images/studio.png) no-repeat;
}

#studio {
    width: 67px;
    float: left;
}
 
Zuletzt bearbeitet:
******************************************************
Index.php

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=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    <link rel="shortcut icon" href="http://www.html.de/images/favicon.gif" />
    <script type="text/javascript">swfobject.registerObject("FlashID");</script>
    <script src="scripts/swfobject_modified.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>

    <title>Happy Needles</title>
    <meta name="description" content="Raw Matters ist ein Projekt von  Künstlern für Künstler im Bereich Tanz, Performance und  Choreographie."/>
    <meta name="keywords" content="tanz wien, improvisation, choreographie, performance, kunstverein wien,"/>
    <meta name="robots" content="index,follow"/>
    <meta name="revisit-after" content="7 days"/>
    <meta name="language" content="de"/>
    <meta name="zipcode" content="1160"/>
    <meta name="city" content="Wien"/>
    <meta name="state" content="Wien"/>
    <meta name="country" content="AT"/>
    <meta name="author" content="www.rawmatters.at"/>
</head>
    
<?php
    if(!isset($_GET['go'])) {
        $_GET['go'] = 'home';
    }
?>
    
<body> 
    <div id="navigation">
        <div class="immer_oben">      
                <a  href="index.php?go=studio" id="studio"  class="foto-link foto_studio" class="<?php if ($_GET['go'] ==  'studio') echo 'aktiv'; ?>"</a>
                <a href="index.php?go=monika" id="monika" class="foto-link foto_monika"></a>
                <a href="index.php?go=guest" id="guest" class="foto-link foto_guest"></a>
                <a href="index.php?go=pflege" id="pflege" class="foto-link foto_pflege"></a>
                <a href="index.php?go=burlesque" id="burlesque" class="foto-link foto_burlesque"></a>
                <a href="index.php?go=mode" id="mode" class="foto-link foto_mode"></a>
                <a href="index.php?go=presse" id="presse" class="foto-link foto_presse"></a>
                <a href="index.php?go=contact" id="kontakt" class="foto-link foto_kontakt"></a>
        </div>
        <div class="wrapper">
        <div > 
            <div >
                    <?php include($_GET['go'].'.php'); ?>
            </div>
            <div ></div>
        </div>  
    </div> 
    </div>
        <div>
            <div>
                <img class="frau" src="http://www.html.de/images/frau.png" alt="Frau"/>
                <a href="index.php?go=home"><img id="schild"  src="http://www.html.de/images/schild_voegel.png" alt="raw matters  logo"/></a>
            </div>
        </div>
        <div class="footer">
                <a href="index.php?go=impressum" class="impressum impressum_foto left" id="impressum"></a>  
                <a href="http://facebook.com"  target="blank_"><img class="left"  src="http://www.html.de/images/fb.jpg" alt="facebook"/></a>  
        </div>
    </body>
</html>
 
******************************************************
style.css


Code: 
@charset "utf-8";
 
 body { font-family: Courier New; color: white; font-size: 0.75em;  line-height: 1.5em; margin: 0px;  background-image:  url(../images/bg.jpg); background-color: black; background-repeat:  no-repeat; }
 
 background {
     height: 100%;
 }
 
 p { padding: 0 0 15px 0; }
 a { color: white; text-decoration: none; z-index: 20; }
 a:hover { color: #b10000; }
 a:visited { text-decoration: none; }
 a img { border: none;}
 li { list-style-type: none;}
 center { text-align: justify; }
 
 table { border: none; }
 td { font-family: Verdana, Geneva, sans-serif; width: 160px; }
 th { font-family: Verdana, Geneva, sans-serif; } 
 
 h1 { font-family: Verdana, Geneva, sans-serif; /* font-size: 1.6em; */  font-size: 1.1em; text-align: left; line-height: 1.05em; }
 h2 { font-family: Verdana, Geneva, sans-serif; /* font-size: 1.3em; */ font-size: 1.1em; padding: 0 0 15px 0; }
 h3 { font-family: Verdana, Geneva, sans-serif; /* font-size: 1.2em; */ font-size: 1.1em; }
 h4 { font-family: Verdana, Geneva, sans-serif; /* font-size: 1.3em; */ font-size: 1.1em; padding: 15px 0 0 0; color: #e00079; }
 
 .small { font-family: Verdana, Geneva, sans-serif; /* font-size: 0.75em; */ font-size: 0.73em; line-height: 1.25em; }
 .pink { font-family: Verdana, Geneva, sans-serif; color: #e00079;  font-weight: bold; }
 .pink_std { font-family: Verdana, Geneva, sans-serif; /* font-size: 0.95em;ont-size: 0.8em; */ color: #e00079;  }
 
  
 /* Schrift ENDE */
 
 .frau {
     position: absolute;
     float: left;
     min-height: 100%;
     max-height: 100%;
     z-index: 1;
 }
 
 #schild {
     float: right;
     z-index: 1;
     position: relative;
     
 }
 
 .wrapper {
     width: 758px;
     margin: 70px 0 0 570px;
     z-index: 1;
 }
 
 .artikelbild {
     margin: 0 0 20px 25px;
     border: solid 0.1em #999;     
 }
 
 .linie {
     border-bottom: 0.95em solid #e00079;
 }
 
 .footer {
     clear: both;
     font-size: 0.73em;
     float: right;
     text-decoration: none;
     z-index: 1;
     position: relative;
     margin-right: 10px;
 }
 
 .datum { 
     padding: 0 0 13px 0;
     color: #e00079;  
     font-weight: bold;
 }
 
 
 /* NAVIGATION */
 
 #navigation { margin: 180px 0 0 0; background: #b10000; min-width: 100%;  height: 28px; padding-top: 10px; width: 1000px; position: absolute; }
 
 .immer_oben {
      z-index: 2;
      margin-left: 570px;
      min-width: 1000px;
 }
 
 .top {
     z-index: 20;
 }
 
 .foto-link {
     height: 18px;
     display: block;
     margin: 0 auto;
     width: 119px;
     padding-right: 22px;
     z-index: 2;
     position: relative;
 }
 
 #studio {
     width: 67px;
     float: left;
 }
 
 #monika {
     width: 68px;
     float: left;
 }
 
 #guest {
     width: 119px;
     float: left;
 }
 
 #pflege {
     width: 69px;
     float: left;
 }
 
 #burlesque {
     width: 96px;
     float: left;
 }
 
 #mode {
     width: 56px;
     float: left;
 }
 
 #presse {
     width: 71px;
     float: left;
 }
 
 #kontakt {
     width: 59px;
     float: left;
 }
 
 .foto_studio {
     background: url(../images/studio.png) no-repeat;
 }
 
 .foto_monika {
     background: url(../images/monika.png) no-repeat;
 }
 
 .foto_guest {
     background: url(../images/guest_artists.png) no-repeat;
 }
 
 .foto_pflege {
     background: url(../images/pflege.png) no-repeat;
 }
 
 .foto_burlesque {
     background: url(../images/burlesque.png) no-repeat;
 }
 
 .foto_mode {
     background: url(../images/mode.png) no-repeat;
 }
 
 .foto_presse {
     background: url(../images/presse.png) no-repeat;
 }
 
 .foto_kontakt {
     background: url(../images/kontakt.png) no-repeat;
 }
 
 .foto_tattoos {
     background: url(../images/tatoos.png) no-repeat;
 }
 
 .foto_motive {
     background: url(../images/motive.png) no-repeat;
 }
 
 .foto_kunst {
     background: url(../images/kunst.png) no-repeat;
 }
 
 .foto-link:hover {
     background-position: 0 -18px;
 }
 
 .foto-link:active {
     background-position: 0 -18px;
 }
 
 
 /* SUBMENUE */
 
 .submenue {
     height: 18px;
     display: block;
     margin: 0 auto;
     width: 57px;
     z-index: 2;
     position: relative;
 }
 
 .submenue:hover {
     background-position: 0 -18px;
 }
 
 .tattoos {
     background: url(../images/tattoos.png) no-repeat;
     padding-left: 20px;
 }
 
 #tattoo {
     width: 56px;
 }
 
 .kontakt_red {
     background: url(../images/kontakt_red.png) no-repeat;
     padding-left: 20px;
 }
 
 .pix {
     background: url(../images/fotos.png) no-repeat;
     padding-left: 20px;
 }
 
 #pix {
     width: 40px;
 }
 
 .motive {
     background: url(../images/motive.png) no-repeat;
     padding-left: 20px;
 }
 
 #motive {
     width: 45px;
 }
 
 .kunst {
     background: url(../images/kunst.png) no-repeat;
     padding-left: 20px;
 }
 
 #kunst {
     width: 42px;
 }
 
 .foerdl {
     background: url(../images/foerdl.png) no-repeat;
     padding-left: 20px;
 }
 
 #foerdl {
     width: 47px;
 }
 
 .stefan {
     background: url(../images/stefan.png) no-repeat;
     padding-left: 20px;
 }
 
 #stefan {
     width: 47px;
 }
 
 .veronika {
     background: url(../images/veronika.png) no-repeat;
     padding-left: 20px;
 }
 
 #veronika {
     width: 59px;
 }
 
 
 /* SUBMENÜ NUMMERN */
 
 .zahlen-link {
     height: 19px;
     display: block;
     margin: 0 auto;
     width: 10px;
     padding-left: 5px;
     z-index: 2;
     position: relative;
 }
 
 .zahlen-link:hover {
     background-position: 0 -19px;
 }
 
 .zahlen-link:active {
     background-position: 0 -19px;
 }
 
 .zahlen_01 {
     background: url(../images/1.png) no-repeat;
 }
 
 .zahlen_02 {
     background: url(../images/2.png) no-repeat;
 }
 
 .zahlen_03 {
     background: url(../images/3.png) no-repeat;
 }
 
 .zahlen_04 {
     background: url(../images/4.png) no-repeat;
 }
 
 .zahlen_05 {
     background: url(../images/5.png) no-repeat;
 }
 
 .zahlen_06 {
     background: url(../images/6.png) no-repeat;
 }
 
 .zahlen_07 {
     background: url(../images/7.png) no-repeat;
 }
 
 .zahlen_08 {
     background: url(../images/8.png) no-repeat;
 }
 
 .zahlen_09 {
     background: url(../images/9.png) no-repeat;
 }
 
 .zahlen_10 {
     background: url(../images/10.png) no-repeat;
 }
 
 
 
 /* HOVERS and MORE */
 
 .spalte_links {
     float: left;
     width: 217px;
 }
 
 .spalte_rechts {
     float: right;
     width: 541px;
 }
 
 .foto1 {
     padding: 9px 0 0 10px;
 }
 
 .foto2 {
     float: left;
     padding: 0 9px 0 10px;
 }
 
 .left {
     float: left;
     z-index: 2;
 }
 
 .right {
     float: right;
 }
 
 .abstand1 {
     padding-top: 10px;
 }
 .abstand2 {
     padding: 0 4px 4px 0;
     z-index: 20;
     position: relative;
 }
 
 .pfeile1 {
     float: left;
     width: 150px;
     padding: 100px 30px 50px 30px;
     font-size: 1em;
     text-align: right;
     color: white;
 }
 
 .pfeile2 {
     float: left;
     padding: 100px 30px 50px 30px;
     font-size: 1em;
     text-align: center;
     color: white;
 }
 
 
 
 .arrows {
     height: 121px;
     display: block;
     margin: 0 auto;
     width: 165px;
     position: relative;
 }
 
 .arrows_foto {
     background: url(../images/arrows.png) no-repeat;
     z-index: 1;
 }
 
 .arrows:hover {
     background-position: 0 -121px;
 }
 
 
 .arrow01 {
     height: 118px;
     display: block;
     margin: 0 auto;
     width: 76px;
     position: relative;
 }
 
 .arrow01_foto {
     background: url(../images/arrow_01.png) no-repeat;
     }
 
 .arrow01:hover {
     background-position: 0 -118px;
 }
 
 .arrow02 {
     height: 165px;
     display: block;
     margin: 0 auto;
     width: 52px;
     position: relative;
 }
 
 .arrow02_foto {
     background: url(../images/arrow_02.png) no-repeat;
 }
 
 .arrow02:hover {
     background-position: 0 -165px;
 }
 
 .arrow03 {
     height: 118px;
     display: block;
     margin: 0 auto;
     width: 76px;
     position: relative;
 }
 
 .arrow03_foto {
     background: url(../images/arrow_03.png) no-repeat;
 }
 
 .arrow03:hover {
     background-position: 0 -118px;
 }
 
 .arrow04 {
     height: 124px;
     display: block;
     margin: 0 auto;
     width: 43px;
     position: relative;
 }
 
 .arrow04_foto {
     background: url(../images/arrow_04.png) no-repeat;
 }
 
 .arrow04:hover {
     background-position: 0 -124px;
 }
 
 
 
 .impressum {
     height: 13px;
     display: block;
     margin: 0 auto;
     width: 50px;
     z-index: 2;
     position: relative;
 }
 
 .impressum_foto {
     background: url(../images/impressum_button.png) no-repeat;
     padding-left: 20px;
 }
 
 .impressum:hover {
     background-position: 0 -13px;
 }
 
 #impressum {
     margin: 15px 0 0 10px;
 }
 
 .foto_burle {
     float: left;
     padding: 0 50px 0 0;
 }
 
 .block_rechts {
     float: right;
     text-align: right;
 }
 
 .block_links {
     float: left;
     width: 400px;
 }
 
 monica_mail a {
     text-decoration: underline;
     color: #b10000;
 }
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben