Ergebnis 1 bis 3 von 3

Thema: Problem mit Webseitenbreite

  1. #1
    HTML Newbie
    Registriert seit
    03.11.2011
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Problem mit Webseitenbreite

    Hallo Zusammen

    Problem gelöst: Der Fehler war in der navigation!


    Ich entwickle momentan eine Webseite für Joomla 1.5.X. Meine Webseite ist 100% Breit, darin befindet sich ein DIV mit einer festen Breite, der zentriert ist.. Dabei habe ich folgendes Problem: Wenn das Fenster maximiert ist, ist die Breite des html Tags 100% und der zweite DIV wird auch korrekt angezeigt. Sobald man aber das Fenster verkleinert auf zum Beispiel die grösse des festen Div's, wird zwar die Webseite korrekt dargestellt, aber es hat unten eine Scrollbar. Schiebt man diese nach rechts, so sieht man wie die Seite irgendwann endet und dann einfach Weiss kommt (Siehe Bild). Mit dem Debugger habe ich herausgefunden, dass der Fehler schon beim HTML Tag liegt.


    Frage: Wie kann ich diesen Fehler beheben?


    Bild (Size: 535 X 708px): Blau Markierte ist der HTML Tag. Man sieht schön, wie er plötzlich endet.





    HTML & PHP Code:

    PHP-Code:
    <?php defined'_JEXEC' ) or die( 'Restricted access' ); ?><!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=”<?php echo $this->language?>”lang=”<?php echo $this->language?>” ><head>    <jdoc:include type="head" />    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/webseite/style.css" type="text/css" />     <!--[if IE]>
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/webseite/ie.css" type="text/css" /> 
    <![endif]--></head><body>
    <div id="blabla">
    <div id="logo"><h1>Webdsign mit Stil</h1></div> <!-- Logo ende-->
        <div id="navigation" >    <jdoc:include type="modules" name="user3" />    </div> <!-- Navigation ende-->    <div id="bild_all"><jdoc:include type="modules" name="bild" /><!--<div id="offerte_button"><jdoc:include type="modules" name="offertbutt" /></div>--></div> <!-- Bild_Tan ende--></div><div id="line"></div><div id="wrapper"><div id="col"><div id="text"><jdoc:include type="component" /></div><!--Text ende-->
    <div id="fusszeile"><jdoc:include type="modules" name="footer" /></div> <!-- Fusszeile ende-->
    </div><!--Wrapper ende-->
    </div></body></html>

    CSS Code:
    Code:
    /****** CSS Webseite ******/
    /******© Nicole Fink, 2011 - V. 1.0 ******/
    
    
    body {
     /* Background:url(images/background.jpg);*/
      background-color: #f5f5f5;
      background-color: rgb(245, 245, 245); /* The Fallback */ /* Hintergrundfarbe */
      background: rgb(245, 245, 245);
      color: white; /* Schriftfarbe */
      background-repeat:repeat-x;
      margin: 0 auto;
    }
    
    
    #wrapper{
        text-align:center;
        width:100%;
        height: 100%;/*automatische Hoehe*/
        margin:0 auto;/*positioniert den wrapper in der Mitte des Browserfensters*/
        /*background-color:#f5f5f5;*/
        background-color: #add2e6;
        background:rgb(173, 210 230);
    }
    
    
    #blabla{
        text-align:center;
        width:935px;
        height: auto;/*automatische Hoehe*/
        margin:0 auto;/*positioniert den wrapper in der Mitte des Browserfensters*/
        /*background-color:#f5f5f5;*/
        background-color: #f5f5f5; 
        background: rgb(245, 245, 245);
        background-color: rgb(245, 245, 245); 
    }
    
    
    #col{
        width:100%;
        height:auto;
        margin:0;
        background-color: #add2e6;
        background-color:rgb(173, 210 230);
        background:rgb(173, 210 230); 
    }
    
    
    #line{
        background-image:url(images/strike.jpg);
        background-repeat:repeat-x;
        height:8px;
        width:100%;
    }
        
    
    
    #logo{
        position:relative;
        background:url(images/logo.png);
        width:      935px;
        height:     150px;
        background-repeat:no-repeat;
        margin-top:35px;
        margin-left: -20px;
        text-align:left;
        }
        
    #logo h1 { 
        color: #2796d6;
          text-transform: uppercase;    
        font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
        letter-spacing:0.1em;
        text-transform: lowercase;
        font-size: 28px;
        font-variant: small-caps;
        font-style:italic; 
        padding-top: 90px;
        padding-left:30px;
        letter-spacing: 3px;
        }
        
    #navigation{
        position:relative;
        width: 935px;
        height: 41px;
        margin-left:480px;
        font-size: 21px;
        text-align: center; 
        font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
        letter-spacing: 2px; 
        color: #7d8692; 
    }
    /******** LINK Definition NAVIGATION********/
    #navigation a:link
    {
    color: #706f6a;
    text-decoration: none;
    }
    #navigation a:visited
    {
    color: #706f6a;
    text-decoration: none;
    }
    #navigation a:hover
    {
    color: #2796d6;
    text-decoration: none;
    }
    
    
                /*** Bilder Header ***/ 
    
    
                #bild_tan{
                    position: relative; 
                    background: url(images/bild_tan2.jpg);
                    width: 935px;
                    height: 311px;
                    margin-top: 0px;
                    }
                    
                #bild_help{
                    position: relative; 
                    background: url(images/bild_help.jpg);
                    width: 934px;
                    height: 315px;
                    margin-top: 0px;
                    }
                    
                #bild_nini{
                    position: relative; 
                    background: url(images/bild_nini.jpg);
                    width: 936px;
                    height: 318px;
                    margin-top: 0px;
                    }
                    
                #bild_zeit{
                    position: relative; 
                    background: url(images/bild_zeit.jpg);
                    width: 936px;
                    height: 315px;
                    margin-top: 0px;
                    }
                    
                #bild_preis{
                    position: relative; 
                    background: url(images/bild_preis.jpg);
                    width: 924px;
                    height: 312px;
                    margin-top: 0px;
                    }
                #bild_kontakt{
                    position: relative; 
                    background: url(images/bild_kontakt.jpg);
                    width: 924px;
                    height: 314px;
                    margin-top: 0px;
                    }
                #bild_treppe{
                    position: relative; 
                    background: url(images/bild_treppe.jpg);
                    width: 931px;
                    height: 312px;
                    margin-top: 0px;
                    }
                #bild_all{
                    position: relative; 
                    margin-top: 0px;
                    background-color:#f5f5f5;
                    background: rgb(245, 245, 245);
                    background-color: rgb(245, 245, 245); 
                    }
    
    
        
    #offerte_button{
        position:absolut;
        width: 200px;
        height:70px;
        padding-top: 210px;
        padding-left: 111px;
        border:none;
        }
    
    
    #text{
        position: relative; 
        background-color:#add2e6;
        background-color:rgb(173, 210 230);
        background:rgb(173, 210 230);
        height: auto; 
        width: 935px; 
        margin: 0 auto;
        padding-top: 38px;
        margin-left: 10px; 
        font-family: Verdana, Arial, Tahoma, sans-serif;
        font-size: 14px;
        font-style: italic;
        color: black; 
        }
    
    
      #text h1 { 
        width: 935px;
        position: relative; 
        color: #616161;
          text-transform: uppercase;
        font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
        letter-spacing:0.1em;
        text-align: left; 
        font-size: 30px;
        font-variant: small-caps;
        font-style:italic;  }
    }
    
    
    #fusszeile{
        border: 2px soild red; 
        color: red;
        }    
        
        
    #fusszeile{    
        width: 935px; 
        margin-top: 30px;
        border: 2px soild red;
        width:      935px;
        text-align: center;
        font-family: Verdana, Arial, Tahoma, sans-serif;
        font-size:  12px;
        color:      black;
        letter-spacing: 1px; /* Abstand zwischen den Buchstaben */
        line-height:    1.5;
        margin-left: auto ;
        margin-right: auto ;
         /* Zeilenabstand, ohne Einheit */        
        }
        
    /******** LINK Fusszeile ********/
    #fusszeile a:link{
        color: black;
        text-decoration: none;
        }
    #fusszeile a:visited{
        color: black;
        text-decoration: none;
        }
    #fusszeile a:hover{
        color: #7d8692;
        text-decoration: none;
        }
    /******** LINK Fusszeile ENDE********/

    CSS IE Code:
    Code:
    html {
        height: 100%;
    }
    
    
    body {
     /* Background:url(images/background.jpg);*/
      background-color: #f5f5f5;
      background-color: rgb(245, 245, 245); /* The Fallback */ /* Hintergrundfarbe */
      background: rgb(245, 245, 245);
      color: white; /* Schriftfarbe */
      background-repeat:repeat-x;
      margin: 0 auto;
      height:100%;
    }
    
    
    #navigation{
        position:relative;
        width: 935px;
        height: 41px;
        margin-left:205px;
        font-size: 21px;
        text-align: center; 
        font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
        letter-spacing: 2px; 
        color: #7d8692; 
    }
    
    
    #wrapper{
        text-align:center;
        width:100%;
        min-height: auto;
           height:100% !important;/*automatische Hoehe*/
        margin:0 auto;/*positioniert den wrapper in der Mitte des Browserfensters*/
        /*background-color:#f5f5f5;*/
        background-color: #add2e6; 
        background-color:rgb(173, 210 230);
        background:rgb(173, 210 230);
    }

    Vielen Dank für die Hilfe!!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von struchli (03.11.2011 um 16:33 Uhr)

  2. #2
    Jedi Ritter Avatar von Dodo
    Registriert seit
    26.04.2008
    Ort
    Wien
    Alter
    27
    Beiträge
    3.774
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: Problem mit Webseitenbreite

    Hast du das GAnze auch online, damit wir uns das ansehen können?
    Something big is coming. And there will be pirates and ninjas and unicorns...

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    03.11.2011
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem mit Webseitenbreite

    Zitat Zitat von Dodo Beitrag anzeigen
    Hast du das GAnze auch online, damit wir uns das ansehen können?
    na klar:
    www.test.napkin.ch

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •