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

Design und balken?

Status
Für weitere Antworten geschlossen.
S

Sire

Neues Mitglied
Hallo zusammen,
ich habe mir ein Design erstellt und an dem Design sind Links und Rechts Balken dran. Ich habe das ganze Design bis mit gemacht und kriege es jetzt nicht hin, dass die Balken an die richtige stelle kommen und auch mit nach unten gehen wenn ich den Content fülle.

Hier der Screenshot wie es aussehen soll:

Screenshot

Und hier die Live-Demo wie ich es bis jetzt hinbekommen habe:

Live-Demo

Hier der Code von der Index.html:

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>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Dark-Stylez</title>
</head>
<body>
        <div id="left"></div>
    <div id="wrapper">
        <div id="header">
            <img src="images/balken_oben.jpg" alt="Balken" />
            <img src="images/header.jpg" alt="Header" />
        </div>
        <div id="navi">
            <a href="#" target="_self"><img src="images/navi_home.jpg" alt="Home"/></a>
            <a href="#" target="_self"><img src="images/navi_about.jpg" alt="About Me"/></a>
            <a href="#" target="_self"><img src="images/navi_work.jpg" alt="Work"/></a>
            <a href="#" target="_self"><img src="images/navi_forum.jpg" alt="Community"/></a>
            <a href="#" target="_self"><img src="images/navi_contact.jpg" alt="Kontakt"/></a>
            <a href="#" target="_self"><img src="images/navi_impressum.jpg" alt="Impressum"/></a>
        </div>
        <div id="content">
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
        </div>
        <div id="footer">
            Copyright by Sire @ Dark-Stylez.de            
        </div>
    </div>
        <div id="right"></div>
</body>
Hier der Code für die style.css:

Code: 
body{

    width:100%;
    height:100%;
    background-color:#626262;
    font-family:Arial;
    font-size:12px;
}

img{
    border:0px;
}

a{
    outline:none;
    padding:7px;
}


#wrapper{
    height:800px;
    width:600px;
    margin:auto;
}

#navi{
    width:559px;
    height:22px;
    background-image:url(images/navi.jpg);
}

#content{
    width:559px;
    min-height:300px;
    background-color:#e0e0e0;
}

*html{
    height:300px;
}

#content p{
    margin:0px;
    padding:10px;
}


#footer{
    width:559px;
    height:20px;
    background-image:url(images/balken_unten.jpg);
    text-align:center;
    font-size:10px;
}

#left, #right{
    height:665px;
    width:13px;
}

#left{
    background-image:url(images/links.jpg);
    background-repeat:repeat-y;
    float:left;
}

#right{
    background-image:url(images/rechts.jpg);
    background-repeat:repeat-y;
    float:right;
}
Wie ihr seht ich habe es schon versucht.
Ich bitte euch mal drüber zu schauen und zu gucken was ich falsch gemacht habe..
Hoffe es kann mir jemand helfen!!

Mit freundlichen Grüßen
Sire
 
also deine div´s dafür müssen schon im wrapper liegen sonst wirds nix

versuchs mal so, ist aber ungetestet
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>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Dark-Stylez</title>
</head>
<body>
        
    <div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
        <div id="header">
            <img src="images/balken_oben.jpg" alt="Balken" />
            <img src="images/header.jpg" alt="Header" />
        </div>
        <div id="navi">
            <a href="#" target="_self"><img src="images/navi_home.jpg" alt="Home"/></a>
            <a href="#" target="_self"><img src="images/navi_about.jpg" alt="About Me"/></a>
            <a href="#" target="_self"><img src="images/navi_work.jpg" alt="Work"/></a>
            <a href="#" target="_self"><img src="images/navi_forum.jpg" alt="Community"/></a>
            <a href="#" target="_self"><img src="images/navi_contact.jpg" alt="Kontakt"/></a>
            <a href="#" target="_self"><img src="images/navi_impressum.jpg" alt="Impressum"/></a>
        </div>
        <div id="content">
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
            <p>Hallo ich bin ein kleiner Mann und diene nur zum Testen</p>
        </div>
        <div id="footer">
            Copyright by Sire @ Dark-Stylez.de            
        </div>
    </div>
        
</body>
</html>
 
Tach,
hab mir mal den Code deiner Live-Demo angeschaut. Der ganze Code, der hier steht scheint ja nicht mehr der aktuelle zu sein.

Das muss auf jeden Fall in die CSS:
Code: 
html{
    height:100%;
}

#main {
    height:100%;
}
Das border-left sollte so aussehen:
Code: 
#boarder_left{
    background-image:url(http://www.dark-stylez.de/portfolio/images/links.jpg);
    background-repeat:repeat-y;
    float:left;
    height:100%;
    width:10px; /* oder wie groß auch immer */
}

#boarder_right{
    background-image:url(http://www.dark-stylez.de/portfolio/images/rechts.jpg);
    background-repeat:repeat-y;
    float:right;
    height:100%;
    width:10px;
}
Die HTML-Datei wird so geziert:
Code: 
<body>
    <div id="wrapper">
        <div id="main">
        <div id="boarder_left">
        </div>
        <div id="boarder_right">
        </div>
        <div id="header">
            <img src="Dark-Stylez-Dateien/balken_oben.jpg" alt="Balken">
Das hier ist selbstverständlich kein Patentrezept. Du wirst also auch noch selber ein wenig arbeiten, aber es sollte dich ein Stück weiterbringen.

Grüße,
Körnerbrötchen
 
Zuletzt bearbeitet:
Hallo,

so wie Deine Site jetzt aufgebaut ist[1], wäre es vielleicht am einfachsten, Du machst einfach ein Hintergrundbild, das links und rechts die Balken hat und dazwischen so breit ist, wie Dein Content. Fertig.

Gruß,
-Efchen

[1] Hat natürlich den Nachteil, dass es eine fixe Breite ist, die sich in keiner Weise an der Größe des Browserfensters orientiert, also bei großen Fenstern nur sehr wenig des verfügbaren Platz verwendet (also verschwenderisch ist), und sich außerdem die Größe auch nicht mit der Änderung der Schriftgröße verändert. Wenn Du diese Mankos verbessern willst, geht natürlich mein TIpp mit dem einzelnen Hintergrundbild nicht mehr.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben