✔ Komplette Seite verzogen

SBL-Multimedia

SBL-Multimedia

Erfahrenes Mitglied
so ich hab wieder ein Problem schaut mal hier http://www.th-lutz.com/sbl/tutorials.php

aber auf der startseite ist es genauso


ich denke es wird euch gleich auffallen schaut euch den html-code an und diesmal schick ich auch gleich den css code mit

und wieder siehts im FF komplett anders aus ^^

Code: 
* {

    margin: 0;
    padding: 0; 

}

body {

    background: #240404;
    font-size: 11px;
    font-family: verdana, Arial, helvertica, sans_serif;

}

a {

    color: #3282d6;
    font-weight: bold;
    

}

a:hover {

    color: #6b9ed4;
    font-weight: bold;

}

a img {

    border: none;

}

#head {

    width: 100%;
    height: 90px;
    background: url(images/head_bg.jpg);    

}

#navi {

    width: 100%;
    height: 35px;
    text-align: center;
    background: url(images/navi_bg.jpg);   

}

#navi ul {

    margin: 0px auto;
    width: 1000px;

}

#navi ul li {

    list-style-type: none;
    display: block;
    height: 35px;
    float: left;
    text-indent: -9999px;
    width: 130px;

}

#navi ul li a {

    outline: none;
    display: block;
    width: 130px;
    height: 35px;

}

/* Navigation Class Home*/


#navi ul li.home a {

    background: url(images/startseite_01.jpg) no-repeat 0 0;

}

#navi ul li.home a.aktiv {

    background: url(images/startseite_02.jpg) no-repeat 0 0;

}                   

#navi ul li.home a:hover {

    background: url(images/startseite_02.jpg) no-repeat 0 0;

}

/* Navigation Class Tutorials*/

#navi ul li.tutorials a {

    background: url(images/tutorials_01.jpg) no-repeat 0 0;

}

#navi ul li.tutorials a.aktiv {

    background: url(images/tutorials_02.jpg) no-repeat 0 0;

}

#navi ul li.tutorials a:hover {

    background: url(images/tutorials_02.jpg) no-repeat 0 0;

}
                               
/* Navigation Class Gallerie*/
                               
#navi ul li.gallerie a {

    background: url(images/gallerie_01.jpg) no-repeat 0 0;

}

#navi ul li.gallerie a.aktiv {

    background: url(images/gallerie_02.jpg) no-repeat 0 0;

}

#navi ul li.gallerie a:hover {

    background: url(images/gallerie_02.jpg) no-repeat 0 0;

}

/* Navigation Class Über Mich*/
                               
#navi ul li.about a {

    background: url(images/about_01.jpg) no-repeat 0 0;

}

#navi ul li.about a.aktiv {

    background: url(images/about_02.jpg) no-repeat 0 0;

}

#navi ul li.about a:hover {

    background: url(images/about_02.jpg) no-repeat 0 0;

}

/* Navigation Class Downloads*/
                               
#navi ul li.downloads a {

    background: url(images/downloads_01.jpg) no-repeat 0 0;

}

#navi ul li.downloads a.aktiv {

    background: url(images/downloads_02.jpg) no-repeat 0 0;

}

#navi ul li.downloads a:hover {

    background: url(images/downloads_02.jpg) no-repeat 0 0;

}

/* Navigation Class Downloads*/
                               
#navi ul li.referenzen a {

    background: url(images/referenzen_01.jpg) no-repeat 0 0;

}

#navi ul li.referenzen a.aktiv {

    background: url(images/referenzen_02.jpg) no-repeat 0 0;

}

#navi ul li.referenzen a:hover {

    background: url(images/referenzen_02.jpg) no-repeat 0 0;

}

/* Navigation Class Portal*/
                               
#navi ul li.sblportal a {

    background: url(images/sbl-tv_01.jpg) no-repeat 0 0;

}

#navi ul li.sblportal a.aktiv {

    background: url(images/sbl-tv_02.jpg) no-repeat 0 0;

}

#navi ul li.sblportal a:hover {

    background: url(images/sbl-tv_02.jpg) no-repeat 0 0;

}

#effect {

    width: 100%;
    height: 260px;
    background: url(images/effect_bg.jpg);
}

#effect_header {

    height: 260px;
    display: block;
    margin: 0px auto;
    background: url(images/effect_header.jpg) no-repeat center top;
   
}

.quick_box {

    height: 230px;
    width: 250px;
    margin: 20px 0 0px 810px;
    display: block;
    position: absolute;

}

.quick_box ul {

    margin: 0 auto;
    width: 250px;
    float:left
    

}

.quick_box ul li {

    list-style-type: none;
    display: block;
    float: left;
    width: 80px;
    text-indent: -9999px;               
    
}

.quick_box ul li a {

    outline: none;
    display: block;
    width: 80px;
    height: 57px;                

}

.quick_box ul li.link_01 a {

    background: url(logos/deviantart_01.png) no-repeat 12px 0;

}

.quick_box ul li.link_01 a:hover {

    background: url(logos/deviantart_02.png) no-repeat 12px 0;

}

.quick_box ul li.link_02 a {

    background: url(logos/youtube_01.png) no-repeat 0 0;

}

.quick_box ul li.link_02 a:hover {

    background: url(logos/youtube_02.png) no-repeat 0 0;

}

.quick_box h3 {

font-size: 20px;
font-weight: bold;
text-decoration: none;
color: #0047a0;
 
}

#content {

    width: 100%;
    background: #e9f6ff;
    text-align: center;
    
}

#content_box {

    width: 1000px;
    margin: 0px auto;
    padding: 20px 0 0 0;


}

#content_links {

    width: 680px;
    padding: 20px 20px 0 0;
    float: left;
    text-align: justify;
    

}

#content_links h2 {

    font-size: 24px;
    color: #74baff;
    text-decoration: none;
    font-weight: normal;
    margin: 0;
    background: url(images/line.gif) repeat-x top;

}

#content_links h4 {

    font-size: 15px;
    color: #74baff;
    text-decoration: none;
    font-weight: normal;
    margin: 0 10px 0 0;
    background: url(images/line.gif) repeat-x bottom;
    

}

#content_links h2 span {

    font-size: 9px;
    color: #c7c7c7;
    text-decoration: none;
    margin: 0;
    padding: 1px 0 0 5px;
    display: block;
    

}

#content_links p {

    color: #000000;
    line-height: 5px;
    padding: 0 0 10px 0; 

}





#content_rechts {

    width: 300px;
    padding: 20px 0 0 0;
    float: right;
    text-align: justify;

}

#content_rechts h2 {

    font-size: 24px;
    color: #74baff;
    text-decoration: none;
    font-weight: normal;
    margin: 0;
    background: url(images/line.gif) repeat-x top;


}

#content_rechts h2 span {

    font-size: 9px;
    color: #c7c7c7;
    text-decoration: none;
    margin: 0;
    padding: 1px 0 0 5px;
    display: block;
    
}

#content_rechts p {

    color: #000000;
    line-height: 5px;
    padding: 0 0 10px 0; 

}

#footer {

    width:1000px;
    height:100%;
    padding:  10px 0 0 260px;

}

#footer a {

    color: #ffffff;
    text-decoration: none;
    font-size: 10px;
    font-weight: normal;

}

#footer a:hover {

    color: #e5b700;
    text-decoration: none;

}

#footer h3 {

    color: #e5b700;
    font-weight: bold;
    font-size: 12px;
    margin: 0;

}

#footer .footer_links {

    width: 160px;
    float: left;
    line-height: 12px;

}

#footer .kontakt {

    width:160px;
    line-height: 12px;
    float: left;
}

.next_line {

    height: 1px;
    
    clear: both;

}

#clear {

    clear: both;

}


/*Tutorials*/


#tutorial content {

width: 678px;
margin: 10px 0 0 0;
 

}

.tutorial_choice {

    height: 200px;
    width: 250px;
    float: left;
    margin: 0 auto;
    
}


.tutorial_choice .tutorial_info {

    width: 250px;
    height: 40px;
    margin: 0 auto;
    background: url(images/info_image.png) no-repeat;
    

}

.tutorial_choice .tutorial_info h3 {

    font-weight: normal;
    font-size: 13px;  
    color: #74baff;
    margin: 5px 0 0 7px;
    text-decoration: none;
    

}

.tutorial_choice .tutorial_info span {

    font-size: 9px;
    color: #c7c7c7;
    text-decoration: none;
    margin: 0;
    padding: 1px 0 0 9px;
    display: block;
    
}


.tutorial_choice .tutorial_image {

    width: 250px;
    height: 100px;
    background: #e4e4e4;

}

.tutorial_choice .tutorial_bottom {

    width: 250px;
    height: 60px;
    background: url(images/info_bottom.png) no-repeat;
}
 
Bist du dem Link zum w3c-Validator nicht gefolgt, der dir deine Fehler auflistet?

Na, du bindest da im bestehenden Dokumentkörper (<body> ... </body>) ein komplettes HTML-Grundgerüst ein, was dort nichts zu suchen hat.

mfg Maik
 
so sieht der code in meinem Programm aus das wo der html code im body tag is steht in meinem editor

<?php include('content_right.php'); wie das jetzt in den quelltext kommt keine ahnung

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" xml:lang="en" lang="de">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="keywords" content="Cinema-4D, Photoshop, Tutorials, Video-Tutorials" />
  <meta name="descrition" content="SBL Designs || Tutotials und Mehr
  Visualisierung im 2D und 3D Bereich.
  Video Tutorials in Cinema 4D und Photoshop um einfacheren lernen und verstehen.
  Workflows und Gallerie." />
  <meta name="author" content="Sebastian Lutz" />
  <meta http-equiv="content-language" content="de" />
  <meta name="robots" content="index, follow" />
  <link rel="stylesheet" href="style.css" type="text/css">
  <title>Startseite || SBL-Multimedia.de Tutorials und mehr</title>  
  </head>
  <body>
  
    <div id="head">
      <a href="home.html"><img src="images/logo.jpg" alt="SBL-Multimedia-Logo" /></a>    
    </div>
    <div id="effect">
      <div id="effect_header">
        <div class="quick_box">
        
          <h3>Quick Links</h3><br />
          <ul>
            <li class="link_01"><a href="http://www.drmakaber.deviantart.com/gallery/" target="_blank">link1</a></li>
            <li class="link_02"> <a href="http://www.youtube.com/user/SBLDesigns" target="_blank">link2</a></li>          
          </ul>   
        
        </div>
      </div>
    </div>
    <div id="navi">
      
      <ul>
        <li class="home"><a href="home.php"  class="aktiv">Startseite</a></li>
        <li class="tutorials"><a href="tutorials.php">Tutorials</a></li>
        <li class="gallerie"><a href="gallerie.php">Gallerie</a></li>
        <li class="about"><a href="about.php">About</a></li>
        <li class="downloads"><a href="downloads.php">downloads</a></li>
        <li class="referenzen"><a href="referenzen.php">referenzen</a></li>
        <li class="sblportal"><a href="http://www.sbl-designs.gm1.tv" target="_blank">SBL TV</a></li>
      </ul>
      
    </div>
    <div id="content">
      <div id="content_box">
        <div id="content_links">
            <h2>Willkommen auf SBL-Multimedia.de<span>Hinzugef&uuml;gt am 14.10.2009 um 13:46 Uhr</span></h2>
      		   <br />
          	<p>Hier wird der Inhalt und die Neuigkeiten eingef&uuml;gt</p>
            <p>Das ist alles nur zu testzwecken und um das Layout zu begutachten</p> 
            <br /><br />
            <p>Vielen Dank</p>
            <p>Sebastian Lutz</p>  
            
            sadsadsadsa<br />
            sadsadsadsa<br />
            sadsadsadsa<br />
            sadsadsadsa<br />
            sadsadsadsa<br />
            sadsadsadsa<br />
            sadsadsadsa<br />
            sadsadsadsa<br />
            sadsadsadsa<br />
            sadsadsadsa<br />
            sadsadsadsa<br />
            
                 
        </div>
        <div id="content_rechts">
           <?php
           
           include('content_right.php');
           
           ?>
          
        </div>
        
      </div>
    </div>
    <div id="footer">
      <div class="footer_links">
      <h3>Partner</h3><br />
      <a href="http://www.portal24.tv" target="_blank">Portal 24.tv</a><br />
      <a href="http://www.isp-engineering-gmbh.de" target="_blank">ISP Engineering GmbH</a><br />
        
      </div>
      <div class="footer_links">
          <h3>Communitys</h3><br />
          <a href="http://www.der-webdesigner.net" target="_blank">der-Webdesigner.net</a><br />
          <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a><br />
          <a href="http://www.tutorials.de" target="_blank">Tutorials.de</a><br />
              
      </div>
      <div class="footer_links">
          <h3>SBL-Multimedia.de</h3> <br />
          <a href="impressum.php">Imprint</a><br />
          <a href="fragen.php">Fragen/Anregungen</a><br />
          <a href="disclaimer.php">Disclaimer</a><br />   
      </div>
      <div class="footer_links">
        
      </div>
      <div class="kontakt">
      
      </div>
      <div class="clear"></div>
      
    </div>

  </body>
</html>
 
Den Code kenn ich schon - ich dachte da an einen Screenshot, aus dem der korrekte Seitenaufbau hervorgeht :p

mfg Maik
 
ich komm net ganz mit ^^ wieso soll ich dir n screenshot machen bei mir is die seite wahrscheinlich genauso verheizt wie bei dir also das was grad im roten ist soll oben in das weiße zwischen der navi und dem footer

das einzige was in dem roten bleibt sind die links unten

ich habs jetzt mal sozusagen erzwungen aber wie du siehst geht alles aus dem weißen über ins rote

screenph.th.jpg
 
Zuletzt bearbeitet:
Stimmt da die Ansicht im IE, oder eher im FF?

Und achte bitte auf die Netiquette bzgl. deiner unerwünschten durchgängigen Kleinschreibung.

mfg Maik
 
Also sagen wirs jetzt mal so irgendwie siehts jetzt in beiden Browsern gleich aus. Ich weis auch nicht warum das jetzt so ist aber so is es, es sieht bei mir bei beiden gleich aus.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück