brauche hilfe für meinen Layoutcode

Hammelmen · 07.08.2010

Hallo Leute, ich hab da ein kleines problem mit meinem Layout
und zwar glaube ich liegt es am code.

Das was ich als fehler meine ist das scrollen in die horizontale dürfte
eigentlich nicht gehen.

css code:

Code:

@charset "utf-8";
/* CSS Document */

* { padding:0; margin:0; border:0; }

html { background:url(../images/bg-html.jpg) 0 0 repeat; } 

body { font:62.5%/1.8em Arial, "Times New Roman", sans-serif, Verdana; color:#4a4a4a; background:url(../images/bg-body.jpg) 0 0 repeat-x; }

.noBorder { border:0!important; }

.noMargin { margin:0!important; }

.clear { float:none; clear:both; }

h3 { font-size:8px; color:#4a4a4a; line-height:10px; font:Arial, "Times New Roman", sans-serif, Verdana; font-weight:lighter; }

h3 a { text-decoration:none; color:#b63468; list-style:none; }

h3 a:hover { text-decoration:underline; color:#b63468; }

p { margin:0 0 1.2em 0; text-align:justify; font-size:1.1em; }
/*-------------------------------------------------------------*/

div#headercontainer { width:100%; background:url(../images/bg-headercontainer.jpg) center 89px no-repeat; }

div#headercontainer div#header { width:983px; height:400px; background:url(../images/bg-header.jpg) 0 0 no-repeat; margin:0 auto; position:relative; }

/*-------------------------------------------------------------*/

div#content { width:983px; background:url(../images/bg-content.jpg) 0 0 repeat-y; margin:0 auto; }

div.column { float:left; margin: 25px 35px; }

div.columnbreit { float:left; margin: 25px 75px; width:470px; }

div#content div#bilder { width:158; float:left; }

div#content div#text { width:445px; float:left; }

/*-------------------------------------------------------------*/

div#footercontainer { width:100%; height:195px; background:url(../images/bg-footercontainer.jpg) 0 0 repeat-x; position:relative; }

div#footercontainer div#footer { width:983px; height:195px; background:url(../images/bg-footer.jpg) 0 0 no-repeat; margin:0 auto;}

/*-------------------------------------------------------------*/

div#headercontainer div#header ul#navi-top { position:absolute; list-style:none; top:77px; right:30px; text-transform:uppercase; font-size:13px; }

div#headercontainer div#header ul#navi-top li { float:left; padding:0 10px; line-height:12px; border-right:1px solid #4a4a4a; }

div#headercontainer div#header ul#navi-top li a { color:#4a4a4a; text-decoration:none; }

div#headercontainer div#header ul#navi-top li a:hover,
div#headercontainer div#header ul#navi-top li.active { text-decoration:none; color:#fff;}

div#headercontainer div#header ul#navi { list-style:none; }

div#headercontainer div#header a#gruenwohnen,
div#headercontainer div#header a#gruendenken,
div#headercontainer div#header a#gruenreisen,
div#headercontainer div#header a#gruenbauen { width:110px; height:36px; padding: 3px 0; text-align:center; top:368px; position:absolute; display:block; color:#fff; text-decoration:none; list-style:none; font-size:14px;}

div#headercontainer div#header a#gruenwohnen { left:373px; }

div#headercontainer div#header a#gruendenken { left:493px; }

div#headercontainer div#header a#gruenreisen { left:613px; }

div#headercontainer div#header a#gruenbauen { left:733px; }

div#headercontainer div#header a#gruenwohnen:hover,
div#headercontainer div#header a#gruendenken:hover,
div#headercontainer div#header a#gruenreisen:hover,
div#headercontainer div#header a#gruenbauen:hover { border:1px solid #d3d000; color:#d3d000; }

/*-------------------------------------------------------------*/

div#footercontainer div#footer div#footer-byncnd { width:20%; padding: 9px 750px; }

div#footercontainer div#footer div#footer-navipcx { width:120px; padding: 9px 30px; font-size:8px; line-height:8px; float:left; }

div#footercontainer div#footer div#footer-navipcx a { text-decoration:none; color:#4a4a4a; list-style:none; }

div#footercontainer div#footer div#footer-navipcx a:hover,
div#footercontainer div#footer div#footer-navipcx a.active { text-decoration:none; color:#fff;}

div#footercontainer div#footer div#footer-navi { width:983px; height:10px; text-align:center; margin:0 auto;}

div#footercontainer div#footer div#footer-navi ul#navi-footer { list-style:none; text-transform:uppercase; padding:18px 24px; font-size:9px; margin:0 auto; }

div#footercontainer div#footer div#footer-navi ul#navi-footer li { float:left; padding:0 10px; line-height:9px; border-right:1px solid #4a4a4a; }

div#footercontainer div#footer div#footer-navi ul#navi-footer li a { color:#4a4a4a; text-decoration:none; }

div#footercontainer div#footer div#footer-navi ul#navi-footer li a:hover,
div#footercontainer div#footer ul#navi-footer li.active { text-decoration:none; color:#fff;}

/*-------------------------------------------------------------*/

html code:

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" />
<title>Landschaftsarchitektur Tauscheck</title>
<link href="css/layout-style.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="shortcut icon" href="favicon/favicon.ico" />
</head>

<body>

<div id="headercontainer">
           <div id="header">
                <ul id="navi-top">
                <li><a href="index.html" target="_self" name="home">home</a></li>
                <li><a href="kontakt.html" target="_self" name="kontakt">kontakt</a></li>
                <li class="noBorder"><a href="impressum.html" target="_self" name="impressum">impressum</a></li>
                </ul>
                <ul id="navi">
                <li><a href="gruenwohnen.html" id="gruenwohnen" target="_self" name="gruenwohnen">Gr&uuml;nwohnen</a></li>
                <li><a href="gruendenken.html" id="gruendenken" target="_self" name="gruendenken">Gr&uuml;ndenken</a></li>
                <li><a href="gruenreisen.html" id="gruenreisen" target="_self" name="gruenreisen">Gr&uuml;nreisen</a></li>
                <li><a href="gruenbauen.html" id="gruenbauen" target="_self" name="gruenbauen">Gr&uuml;nbauen</a></li>
                </ul>
  </div>
    </div>
    <div id="content">
           
           
    </div>    
            
    <div class="clear"></div>
</div>
    
    <div id="footercontainer">
            <div id="footer">
                <div id="footer-navipcx">
                <a href="http://www.pcexpress-online.de" target="_blank">designed by PcExpress &reg;</a>
                </div>
                <div id="footer-byncnd">
                <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/de/" target="_blank"><img alt="Creative Commons Lizenzvertrag" style="border-width:0" src="http://creativecommons.org/images/public/somerights20.png" /></a>
                </div>
                <div id="footer-navi">
                <div id="navi-footer">
                <ul id="navi-footer">
                <li><a href="index.html" target="_self" name="home">home</a></li>
                <li><a href="gruenwohnen.html" target="_self" name="gruenwohnen">gr&uuml;nwohnen</a></li>
                <li><a href="gruendenken.html" target="_self" name="gruendenken">gr&uuml;ndenken</a></li>
                <li><a href="gruenresien.html" target="_self" name="gruenreisen">gr&uuml;nreisen</a></li>
                <li><a href="gruenbauen.html" target="_self" name="gruenbauen">gr&uuml;nbauen</a></li>
                <li><a href="kontakt.html" target="_self" name="kontakt">kontakt</a></li>
                <li class="noBorder"><a href="impressum.html" target="_self" name="impressum">impressum</a></li>
                </ul><br /><br />
                <br /><br /><h3>Dieser Werk bzw. Inhalt ist unter einer <a class="copyright" rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/de/">Creative Commons-Lizenz</a> lizenziert.
                <br />Copyright &copy; 2003-2010 <a class="copyright" href="http://www.pcexpress-online.de" target="_blank">Pc Express- Webdesign</a>. Alle recht vorbehalten.</h3>
                </div>
                </div>
            </div>
    </div>
</body>
</html>

pinkflo · 07.08.2010

AW: brauche hilfe für meinen Layoutcode

Hallo,
es liegt meiner Meinung an dieser CSS Anweisung.

layout-style.css Zeile 80

div#footercontainer div#footer div#footer-byncnd { width:20%; padding: 9px 750px; }

schreib mal so,

div#footercontainer div#footer div#footer-byncnd { padding: 9px; margin-left: 850px; }

hoffe das hilft.
LG Flo

HansHansa · 07.08.2010

AW: brauche hilfe für meinen Layoutcode

Hier:
div#footercontainer div#footer div#footer-byncnd { width:20%; padding: 9px 750px; }
sagst Du es, je rechts und links 750px.

Müßte so heißen:
div#footercontainer div#footer div#footer-byncnd { width:20%; padding: 9px 0 0 750px; }

So etwas:
<div id="navi-footer">
<ul id="navi-footer">
dürfte es auch nicht geben. Es sind keine doppelten ID erlaubt.

sokie · 08.08.2010

AW: brauche hilfe für meinen Layoutcode

HansHansa schrieb:
So etwas:
<div id="navi-footer">
<ul id="navi-footer">
dürfte es auch nicht geben. Es sind keine doppelten ID erlaubt.

genau. ID sind eindeutige (einmalige!) Bezeichner. deshalb sind selektoren wie:

Code:

div#footercontainer div#footer div#footer-byncnd{}

auch zumindest fragwürdig, wenn nicht sogar Unsinn.
der Selektor

Code:

#footer-byncnd{}

bezeichnet das Element ebenso eindeutig. Eigentlich kann es doch nicht angehen, dass die Selektoren mehr Zeichen einnehmen als die Regeln die dazu erstellt werden...

Bitte für Code die entsprechenden Werkzeuge benutzen - Eingangspost entsprechend editieren.

Hammelmen · 08.08.2010

AW: brauche hilfe für meinen Layoutcode

Danke für deine und Eure Hilfe!

Das mit der doppelt ID ist mir noch garnicht aufgefallen.
Ich werde es sofort ändern bzw. sobald ich zeit habe.

Die Sache mit dem Selktor (#footer-byncnd ) werde ich auch umändern.