1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Site nao creste

Discussão em 'Web Development' iniciada por Jekkaman, 18 de Junho de 2009. (Respostas: 11; Visualizações: 836)

  1. Jekkaman

    Jekkaman Power Member

    Boas,

    Tenho o seguinte problema , tenho a seguinte pagina com o seguinte css

    [​IMG]

    O que acontece e que quando o content tem uma altura grande passa para baixo do bottom, falando em cores quando a coluna cinza claro tem uma altura grande por causa do conteudo passa a barra cinza escuro...alguem tem alguma ideia o porque disto acontecer?sim deve ser o codigo mas o que especificamente?
     
  2. se tens min-height a 100% não há por onde crescer penso eu, mas não sou especialista em CSS
    experimenta meter valores em px para height e min-height
     
  3. Jekkaman

    Jekkaman Power Member

    Coloquei o Min-height pois segundo li em alguns casos resolveu o problema, o que nao acontece neste caso.
    Penso que nao faz sentido colocar um valor fixo de pixeis, a pagina tem que crescer verticalmente consuante o conteudo que tem.

    Cumps e obrigado.
     
  4. p3dro

    p3dro Power Member

    Não percebi bem o que acontece quando a barra cinza claro tem muito conteúdo, passa a barra cinza escuro como? :)

    Coloca aqui mesmo o código html e css da página em vez da imagem, sempre dá para ver melhor o problema...
     
  5. duffy

    duffy Power Member

    Experimenta este código e vê se é isso que queres.

    Código:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>Untitled Page</title>
        <style media="all" type="text/css">
            #divMaster { margin: 0px; padding: 0px; width: 100%; }
            #divCenter { margin: 0 auto 0 auto; width: 790px; border: solid 1px #333; min-height: 600px; background-color: Gray; }
            #divTop { width: 100%; height: 120px; background-color: Blue; }
            #divContent { width: 700px; min-height: 450px; background-color: #ccc; margin: 10px auto 0 auto; }
        </style>
    </head>
    <body>
        <div id="divMaster">
            <div id="divCenter">
                <div id="divTop">
                </div>
                <div id="divContent">
                </div>
            </div>
        </div>
    </body>
    </html>
     
  6. Jekkaman

    Jekkaman Power Member

    Aqui fica o codigo html

    Código:
    <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="MasterPage.master.vb" Inherits="Eca2.MasterPage" %>
    
    <!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 runat="server">
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <title>European Canoe Association - Teste1</title>
        <link href="App_Themes/Default/DefaultStylesheet.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
        
            var imagens = new Array()
            imagens[0]='App_Themes/Default/Images/background1.jpg'
            imagens[1]='App_Themes/Default/Images/background2.jpg'
            imagens[2]='App_Themes/Default/Images/background3.jpg'
            var p = imagens.length;
            var j = 0
            var p = imagens.length;
            var preBuffer = new Array()
            
            for (i = 0; i < p ; i++){
            preBuffer[i] = new Image()
            preBuffer[i].src = imagens[i]
            }
            var SelectImage = Math.round(Math.random()*(p-1))+1;
            
    
            function CarregarImagem() {
                if (SelectImage == 1) {
                   
                    document.write('<style type="text/css"> #Top{background-image:url(' + imagens[0] + ');} </style>');
                }
                else if (SelectImage == 2) {
    
                document.write('<style type="text/css"> #Top{background-image:url(' + imagens[1] + ');} </style>');
                }
                else if (SelectImage == 3) {
    
                document.write('<style type="text/css"> #Top{background-image:url(' + imagens[2] + ');} </style>');
    
                }
            }
           
        </script>
        
        
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
        
        
    </head>
    <body>
        
        
        <div id="Top">
        <script type="text/javascript"> CarregarImagem();</script>
        <div id="Menu">
        
           
            <a href="Default.aspx">
              <img src="App_Themes/Default/Images/home.gif" alt="" class="MenuItem" /> 
              </a>
              &nbsp;
              <a href="News.aspx">
              <img src="App_Themes/Default/Images/news_botao.gif" alt="" class="MenuItem" />
              &nbsp;
              </a>
              <a href="Calendar.aspx">
              <img src="App_Themes/Default/Images/calendar.gif" alt="" class="MenuItem" />
              &nbsp;
              </a>
              <a href="Statutes.aspx">
              <img src="App_Themes/Default/Images/statutes.gif" alt="" class="MenuItem" />
              &nbsp;
              </a>
              <a href="Results.aspx">
              <img src="App_Themes/Default/Images/results.gif" alt="" class="MenuItem" />
              &nbsp;
              </a>
              <a href="Rules.aspx">
              <img src="App_Themes/Default/Images/rules.gif" alt="" class="MenuItem" />
              &nbsp;
              </a>
              <a href="Board.aspx">
              <img src="App_Themes/Default/Images/directors.gif" alt="" class="MenuItem" />
              &nbsp;
              </a>
              <a href="Athlets.aspx">
              <img src="App_Themes/Default/Images/athlets.gif" alt="" class="MenuItem" />
              &nbsp;
              </a>
               <a href="Press.aspx">
              <img src="App_Themes/Default/Images/press.gif" alt="" class="MenuItem" />
              &nbsp;
              </a>
              <a href="federations.aspx">
              <img src="App_Themes/Default/Images/federations.gif" alt="" class="MenuItem" />
              &nbsp;
              </a>
              <a href="Contacts.aspx">
              <img src="App_Themes/Default/Images/contacts.jpg" alt="" class="MenuItem" />
              &nbsp;
              </a>
      
         </div>
         </div>
    
        
          <div id="Content">
         
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
               
                </asp:ContentPlaceHolder>
            <div id="Footer">
          <div id="FooterLang">| Portuguese Federation | French Federation | English Federation 
          | Spanish Federation | Portuguese Federation | French Federation | </div>
          <div id="FooterAbout">European Canoe Association &copy; 2009</div>
          <div id="Creative">By Creative-Projects</div>
        </div>
                
           </div>
               
                         
       
        
        
     </body>
    </html>
    
    Css:

    Código:
    *{margin:0;padding:0}
    html,body{height:100%;}
    
    body
    {   
        font-family:Arial, sans-serif;
        margin:0;
        padding:0;
        background:blue url(/eca/App_Themes/Default/Images/sombra.jpg) repeat-y 50%;
        min-width:1024px;
        height:100%;
      
    
    }
    
    #Top
    {   
        left:0px;
        top:0px;
        height:326px;
        width:100%;
        position:relative;
        background-position:center top; 
        background-repeat:no-repeat;
        Display:block;
    }
    
    #Menu
    {   
        padding-top:5px;
        border-width: 2px;
        border-color: #018bcc;
        top: 90%;
        left: 16%;
        width: 68%;
        height: 100%;
        position: relative;
        color: #018bcc;
        text-decoration: none;
        border-top-style: solid;
        font-family: Arial;
        font-size: small;
        z-index: 1;
        font-weight: bolder;
    }
    
    #Menu1
    {
        
        left:0px;
        width:85%;
        position:absolute;
        z-index:1;
    
    }
    
    .MenuItem
    {
        border:0px;
        left:0px;
        top:0px;
        margin-left:2%;
        margin:0px;
        z-index:1;
    }
    
    a
    {
        text-decoration:none;    
        
        
    }
    
    h2{
        color:#018bcc;    
        padding:0;
        margin:0;
    }
    
    
    #Content
    {
        top: 0px;
        height:100%;
        width: 68%;
        position: relative;
        font-family: Arial;
        font-size:17px;
        margin:-50px 0px 0px 16%;
        z-index:1;
        display:block;
        min-height:100%;
    }
    * html #Content{height:100%;}
    
    #Footer
    {
        border-color: #018bcc;
        border-style: solid none none none;
        border-width: medium;
        width: 95%;
        left:2%;
        bottom:0px;
        height:25px;
        position: absolute;
        display:block;
    }
    
    
    
    #FooterLang
    {
        top: 0px;
        height:0px;
        color: #018bcc;
        font-family: Arial;
        font-size: 10px;
        text-align:center;
        position:relative;
    }
    
    
    #FooterAbout
    {
        top: 50%;
        width: 100%;
        height:0px;
        position: relative;
        background-color: #018bcc;
        font-family: Arial;
        font-size: 10px;
        color: #FFFFFF;
        padding-left:10px;
        vertical-align:middle;
    }
    
    
    
    
    
    .Calendar
    {
       
        left:0%;
        height:800px;
        width:600px;
        margin-left:20%;
        text-align:center;
        z-index:1;
            
    }
    
    
    #Events
    {
        position:absolute;
        height:60%;
        width:100%;
        right:0%;
        top:40%;
    }
    
    
        
        
        
     
    
    #CurrentEvents
    {   
        position:absolute;
        top:0%;
        right:0%;
        width:100%;
        height:40%;
        background-image:url(Images/events.jpg);
        background-repeat:no-repeat;
        background-position:left top;
        
    
    }
    
    
    #LeftContent
    {
        width:166px;
        left:0px;
        top:0;
        position:absolute;
        
    }
    
    #News
    {
        position:absolute;
        top:0%;
        left:0%;
        background-image:url(Images/news.jpg);
        width:166px;
        height:36px;
    }
    
    #CenterContent
    { 
        position:absolute;
        top:0px;
        left:195px;
        width:447px;
        color:#424242;
        font-family: Arial; font-size: 12px; }
    
    
    #AboutUs
    {
        position:absolute;
        top:0%;
        left:0%;
        background-image:url(Images/about_us.jpg);
        width:447px;
        height:36px;
        
    }
    
    #AboutText
    {
        top:50px;
        position:relative;    
        text-align:justify;
        line-height:16px;    
    }
    
    #UpcomingEvents
    {
        position:relative;
        margin-Top:100px;
    
            
    }
    
    
    
    .Event
    {
        word-spacing:1px;
        margin-top:20px;
        text-align:center;
        color:#018bcc;
        
    }
    
    
    #RightContent
    {
        position:absolute;
        left:80%;
        width:171px;
        
            
        
    }
    
    #Disciplines
    {
        position:absolute;
        top:0%;
        left:0%;
        background-image:url(Images/disciplines.gif);
        width:171px;
        height:36px;
        color:#018bcc;
        text-decoration:none;
        
        
        
    }
    
    .title
    {
        padding:0;
        margin:0;
        
    }
    
    #Federations
    {
        top: 50px;
        color: #018bcc;
        position: absolute;
        padding-left: 10px;
        width:159px;
        border:solid 1px #018bcc;
        font-size:11px;
        font-weight:bold;
    }
    
    #NewsContent
    {
        position: absolute;
        background-color: #018bcc;
        color: white;
        left: 0px;
        top: 48px;
        font-family: Arial;
        font-size: 11px;
        padding-left:8px;
        padding-right:2px;
        letter-spacing:1px;
        line-height:16px;
        
    }
    
    .Link
    {
        text-align:right;    
        font-weight:bold;
        padding-right:6px;
        
    
    
    }
    
    #Readmorenews
    {
    
        font-weight:bold;
        text-decoration:underline;    
    
    }
    
    .Ad
    {
        margin-top:5px;    
        
        
        
    }
    
    #Ads
    {
        position:relative;
        top:319px;    
        
        
        
    }
    
    #Creative
    {
        top: 50%;
        width: 12%;
        height:50%;
        position: relative;
        font-family: Arial;
        font-size: 10px;
        color: #FFFFFF;
        padding-right:10px;
        vertical-align:middle;
        right:0px;
    }
    
    #Directors
    {
     width:100%;
     border:solid 1px #018bcc;
     border-spacing:0px;     
    }
    
    #Directors td
    {
         border:solid 1px #018bcc;
         text-align:center;
    }
    O que acontece e que se a pagina tiver muito conteudo, cresce bastante na vertical e acontece isto:


    [​IMG]
     
  7. duffy

    duffy Power Member

    és canoista?
     
  8. Jammin @

    Jammin @ Power Member

    O problema está que tens as divs definidas como absolute e se queres que elas cresçam têm de estar relative e sem height definida.

    Cumprimentos
     
  9. Eu penso que ele quer que o footer caia sempre no fundo da página independentemente da altura da janela do browser e dos conteúdos. No entanto tens razão o layout é simples demais para se usar posições relativas e absolutas.
     
  10. K0mA

    K0mA Power Member

    Nunca usar position: absolute sem se saber o que está a fazer.
    Por defeito relative.
     
  11. Nop por defeito é static ;)
     
  12. Jammin @

    Jammin @ Power Member

    Ele quer que o fundo cresça em função do conteúdo, estou a fazer um site que utilizo o mesmo, quando é para por defeito nem se define, ele assume.
     

Partilhar esta Página