Problem mit Positionierung von Elementen

zege · 12 Juni 2012

Hallo.

Ich habe mich gerade mit dem Layout unserer neuen Vereinshomepage gespielt und musste feststellen das das mit CSS schwieriger ist als ich dachte.

Also so rein optisch passt das Layout schon, wenn da nicht das Problem wäre das ich meine Links nicht anklicken kann, weil die scheinbar in einer unteren Ebene verschwinden.

Also so sieht die Sache momentan aus:

Bildschirmfoto-Crazy Pistons: Home - Iceweasel.jpg

Auch Live *erlebbar* : Crazy Pistons: Root Page

Das CSS dazu:

Code:

body {
    background: #909090;
}

p{
    text-align: justify;
}

#container {
    z-index: 0;
    margin: 20px auto;
    width: 1000px;
}

#logo {
    position: relative;
    z-index: 5;
    top: 0px;
    left: 100px;
    background: transparent;
}

#header {
    position: relative;
    z-index: 3;
    top: -170px;
    left: 200px;
    background: #660000;
    background-image: url(header_bg.png);
    width: 799px;
    height: 100px;
    border-top: 1px solid #7F7F7F;
    border-right: 1px solid #7F7F7F;
    -moz-border-radius-topright: 15px;
    -khtml-border-radius-topright: 15px;
    padding-top: 20px;
}

#nav {
    position: relative;
    z-index: 2;
    top: -170px;
    left: 200px;
    background: #cecece;
    height: 30px;
    width: 748px;
    border-right: 1px solid #7F7F7F;
    border-left: 1px solid #7F7F7F;
    padding-top: 5px;
    padding-right: 50px;
}

#nav li {
    display: inline;
}

#sidenav {
    position: relative;
    z-index: 1;
    top: -100px;
    right: 0px;
    background: #cecece;
    min-height: 300px;
    width: 199px;
    border: 1px solid #7F7F7F;
    border-right: 0px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-bottomleft: 15px;
    -khtml-border-radius-topleft: 15px;
    -khtml-border-radius-bottomleft: 15px;
    }

#body {
    position: relative;
    z-index: 4;
    top: -472px;
    left: 200px;
    width: 738px;
    min-height: 600px;
    background: #ffffff;
    border: 1px solid #7f7f7f;
    border-top: 0px;
    padding: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    -moz-border-radius-bottomleft: 15px;
    -moz-border-radius-bottomright: 15px;
    -khtml-border-radius-bottomleft: 15px;
    -khtml-border-radius-bottomright: 15px;
}

#footer {
    position: relative;
    z-index: 5;
    top: -480px;
    left: 200px;
    height: 20px;
    width: 800px;
    border: 0;
    background: transparent;
    text-align: center;
    font: 0.7em verdana;
}

#footer p {
    text-align: center;
}

und das HTML Template:

Code:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8" />

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>Crazy Pistons</title>
        <meta name="description" content="" />
        <meta name="author" content="Gerald Zehetner" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
        <link rel="stylesheet" href="web.css" />
    </head>

    <body>
        <div id="container">
            <div id="logo">
                <img src="Logo.gif" width="198px" height="198px" alt="" />
            </div>
            <div id="header">
                <header>
                    <!-- ###DOCUMENT_TITLE### -->
                    <!-- ###DOCUMENT_TITLE### -->
                    <img src="CP.png" width="700px" height="80px" alt="Crazy Pistons" />
                </header>
            </div>
            <div id="nav">
                <nav>
                    <!-- ###DOCUMENT_NAVIGATION### --->
                    <!-- ###DOCUMENT_NAVIGATION### --->
                </nav>
            </div>
            
            <div id="sidenav">
                <nav>
                    <!-- ###DOCUMENT_SIDENAVIGATION### -->
                    <!-- ###DOCUMENT_SIDENAVIGATION### -->
                </nav>
            </div>
            
            <div id="body">
                <!-- ###DOCUMENT_CONTENT### -->
                    <h1>Website wird neugestaltet!</h1>
                    <p>Nachdem Hacker unsere Seite zum platzieren einer Phising-Seite missbraucht haben, und wir daher unser System neu aufsetzen müssen haben wir uns entschieden dies mit dem Wechsel zu einem anderen CMS zu verbinden.<br>
                        Daher wird es noch einige Zeit dauern bis unsere Homepage wieder in vollem Umfang zur Verfügung stehen wird. Wir bitten um Verständnis.
                    </p>
                    <p>Aber wer dennoch etwas über uns wissen oder einfach mit uns quatschen will ist recht herzlich zu unserem Stammtisch eingeladen. Der findet jeden ersten Freitag im Monat in unserer Vereinshalle statt. Nähere Infos für alle Interessierten gibts unter <br>verein [at} crazypistons {dot] at</p>
                <!-- ###DOCUMENT_CONTENT### -->
            </div>
                
            <div id="footer">
                <footer>
                    <!-- ###DOCUMENT FOOTER### -->
                        <p>&copy; 2011 - 2012 Crazy Pistons</p>
                    <!-- ###DOCUMENT_FOOTER### -->
                </footer>
            </div>
        </div>
    
    <!-- Google Analytics Script -->
    <script type="text/javascript">
       ...
    </script>
    
    </body>
</html>

Kann man die Objekte vielleicht mit anderen Mitteln besser platzieren, damit diese unnötige Verschachtelung nicht entsteht und somit die Links wieder anwählbar sind?

Danke!

Gerald

djheke · 12 Juni 2012

Gib dein #logo eine feste Breite und Höhe(198px x 198px).

Cheffchen · 12 Juni 2012

Hallo,

schuldige machst leider auch den gern gemachten anfänger fehler in dem position nutzt.
In der Regel braucht man das nur in ausnahme fällen, wenn man aber am grundprinzip schon scheitert was am anfang normal ist kommt man damit nicht mehr weck und ver positioniert sich ohne ende und schaft nur neu baustellen.
Das gleich ist dann auch z-index.

Im grunde brauchst vielleicht 2 mal position, ein mal #container mit relative und einmal das logo mit absolute, rest ist überflüssig.

Dann solltest #logo auch eine width: geben.

Cheffchen

djheke · 12 Juni 2012

Cheffchen schrieb:
Hallo,

schuldige machst leider auch den gern gemachten anfänger fehler in dem position nutzt.
In der Regel braucht man das nur in ausnahme fällen, wenn man aber am grundprinzip schon scheitert was am anfang normal ist kommt man damit nicht mehr weck und ver positioniert sich ohne ende und schaft nur neu baustellen.
Das gleich ist dann auch z-index.

Im grunde brauchst vielleicht 2 mal position, ein mal #container mit relative und einmal das logo mit absolute, rest ist überflüssig.

Dann solltest #logo auch eine width: geben.

Cheffchen

Ja, es ist eine GROẞBAUSTELLE. Wollte nur nicht mit der Tür ins Haus fallen.

zege · 15 Juni 2012

So, Hab das Ganze jetzt mal ein bisschen umgeschrieben, habe einen Navigationsbalken entfernt und hoffe das das für die geschulten Augen schon besser aussieht:

CSS:

Code:

body {
    background: #909090;
}

p{
    text-align: justify;
}

#container {
    position: relative;
    top: 50px;
    z-index: 0;
    margin: 20px auto;
    width: 1000px;
}

#logo {
    position: absolute;
    z-index: 5;
    top: -60px;
    left: 100px;
    background: transparent;
    width: 198px;
    height: 198px;
}

#header {
    background: #660000;
    background-image: url(header_bg.png);
    width: 799px;
    height: 100px;
    float: right;
    border-top: 1px solid #7F7F7F;
    border-right: 1px solid #7F7F7F;
    border-bottom: 5px solid #7F7F7F;
    -moz-border-radius-topright: 15px;
    -khtml-border-radius-topright: 15px;
    padding-top: 20px;
}

#nav {
    background: #cecece;
    min-height: 200px;
    margin: 0;
    margin-top: 200px;
    width: 169px;
    float: left;
    padding: 20px 20px 10px 10px;
    border: 1px solid #7F7F7F;
    border-right: 0px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-bottomleft: 15px;
    -khtml-border-radius-topleft: 15px;
    -khtml-border-radius-bottomleft: 15px;
    }

#body {
    width: 738px;
    left: 200px;
    min-height: 500px;
    float: right;
    background: #ffffff;
    border: 1px solid #7f7f7f;
    border-top: 0px;
    padding: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    -moz-border-radius-bottomleft: 15px;
    -moz-border-radius-bottomright: 15px;
    -khtml-border-radius-bottomleft: 15px;
    -khtml-border-radius-bottomright: 15px;
}

#footer {
    height: 20px;
    width: 800px;
    border: 0;
    background: transparent;
    text-align: center;
    font: 0.7em verdana;
    float: right;
}

#footer p {
    text-align: center;
}

Sieht doch schon besser aus, oder?

Danke übrigens für die Hinweise!

djheke · 16 Juni 2012

Sieht doch schon besser aus, oder?

Leider nicht.

Mal als Anregung und Vorlage

Code:

<!DOCTYPE html>
<html lang="en">
<head>

<title>Crazy Pistons: Root Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">

* {
 margin:0;
 padding:0;
}

body {
 background:#909090;
}

#container {
 width:950px;
 margin:0 auto;
}

#header {
 height:215px;
 background:url(header.jpg) no-repeat top left ;
}
#header h1 {
 position:absolute;
  top:0;
  left:150px;
  right:0; 
  bottom:0;  
 background:#a33;  
 color:#fff;
  z-index:-1;
} 



#nav {
 margin-top:50px;
 width:150px;
 float:left;
 background:#909090;
}

#nav ul , #nav li {
 list-style:none;
}

#nav ul {
 background:#ddd;
}

#nav li a {
 text-decoration:none;
 color:#000;
 display:block;
 padding:10px;
}

#nav li a:hover {
 background:#ada;
}

#body {
 margin-left:150px;
 background:#fff;
}

#body h1 , #body p {
 padding:20px;
}

#footer {
 clear:left;
 background:#ddd;
 margin-left:150px;
}

#footer p {
 text-align:center;
}


</style>
</head>
<body>

<div id="container">
<div id="header">
<h1>Crazy Pistons</h1> </div>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Über Uns</a></li>
<li><a href="#">Fotoalbum</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</div>
            
<div id="body">
<h1>Website wird neugestaltet!</h1>
<p>
Nachdem Hacker unsere Seite zum platzieren einer Phising-Seite missbraucht haben, und wir daher unser System neu aufsetzen müssen haben wir uns entschieden dies mit dem Wechsel zu einem anderen CMS zu verbinden.<br>
Daher wird es noch einige Zeit dauern bis unsere Homepage wieder in vollem Umfang zur Verfügung stehen wird. Wir bitten um Verständnis.
</p>
<p>
Aber wer dennoch etwas über uns wissen oder einfach mit uns quatschen will ist recht herzlich zu unserem Stammtisch eingeladen. Der findet jeden ersten Freitag im Monat in unserer Vereinshalle statt. Nähere Infos für alle Interessierten gibts unter <br>verein [at} crazypistons {dot] at
</p>
</div>
                
<div id="footer">
<p>&copy; 2011 - 2012 Crazy Pistons</p>
</div>

</div>

</body>
</html>

Beispiel:http://www.gipspferd.de/forumhilfe/crazypistons/

Problem mit Positionierung von Elementen

zege

Neues Mitglied

Anhänge

djheke

Aktives Mitglied

Cheffchen

Senior HTML'ler

djheke

Aktives Mitglied

zege

Neues Mitglied

djheke

Aktives Mitglied

Neueste Beiträge