Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) Não consigo usar float right e center juntos

vini_loock

Perguntado por vini_loock,

 Share

Pergunta

vini_loock

vini_loock

Postado
Postado

Olá.

Estou com um problema aki, não faço a minima ideia de como resolver isso aki.

O problema é o seguinte:

Eu tenho uma estrutura basica html

<html>
<head>
<title>Porta bairros curitiba online.com.br</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="estilo.css" type="text/css" />
</head>
<body>

<div id="global">
    <div id="topo">
        <div id="logo"></div>
        <div id="publicidade"></div>
        <div id="menu">
            <ul id="left">
                <li><a href="#">Página Inicial</a></li>
                <li><a href="#">Anuncie</a></li>
                <li><a href="#">Login</a></li>
            </ul>
            
            <ul id="right">
                <li><a href="#">Quem somos</a></li>
                <li><a href="#">Fale conosco</a></li>
            </ul>
        </div>
    </div>
    
    <div id="conteudo">
        <div id="busca">
                <form>
                    Selecione um bairro e uma atividade para efetuar a busca:
                    <select>
                        <option>Selecione um bairro...</option>
                        <option>Bairro 1</option>
                        <option>Bairro 2</option>
                    </select>
                    
                    <select>
                        <option>Selecione uma atividade...</option>
                        <option>Atividade 1</option>
                        <option>Atividade 2</option>
                    </select>
                    
                    <input type="text">
                    
                    <input type="submit" value="Buscar">
                </form>
        </div>
        <div id="texto">
                <div id="apresentacao">
                    <div id="img">dsa</div>
                    <div id="historia">dasd</div>
                </div>
                
                <div id="promocoes">
                    <ul>
                        <li><a href="#"><img src="" width="150" height="150" border="0" /></a></li>
                        <li><a href="#"><img src="" width="150" height="150" border="0" /></a></li>
                    </ul>
                </div>
        </div>
        
        <div id="navbar">
            <h1 id="titulo">Guia do comércio</h1>
            <ul>
                <li><span id="marcador">></span>&nbsp;<a href="#">Academias</a></li>
                <li><span id="marcador">></span>&nbsp;<a href="#">Academias</a></li>
                <li><span id="marcador">></span>&nbsp;<a href="#">Academias</a></li>
                <li><span id="marcador">></span>&nbsp;<a href="#">Academias</a></li>
                <li><span id="marcador">></span>&nbsp;<a href="#">Academias</a></li>
            </ul>
        </div>
    </div>
    
    <div id="rodape">
        <h1>Portal Bairros Curitiba Online.com.br</h1>
            <ul>
                <li><a href="#">Página Inicial</a></li>
                <li><a href="#">Anuncie</a></li>
                <li><a href="#">Classificados</a></li>
                <li><a href="#">Mural de recados</a></li>
                <li><a href="#">Links Úteis</a></li>
                <li><a href="#">Eventos e notícias</a></li>
                <li><a href="#">Horário de ônibus</a></li>
                <li><a href="#">Fale conosco</a></li>
            </ul>
            
            <div id="busca">
                <form>
                    Selecione um bairro e uma atividade para efetuar a busca:
                    <select>
                        <option>Selecione um bairro...</option>
                        <option>Bairro 1</option>
                        <option>Bairro 2</option>
                    </select>
                    
                    <select>
                        <option>Selecione uma atividade...</option>
                        <option>Atividade 1</option>
                        <option>Atividade 2</option>
                    </select>
                    
                    <input type="text">
                    
                    <input type="submit" value="Buscar">
                </form>
            </div>
            
            <p>
                2010 bairroscuritibaonline.com.br Todos os direitos reservados. Política de privacidade<br />
                Desenvolvido por: <a href="#">Mks WebDesign</a>
            </p>            
    </div>
</div>

</body>
</html>
E um css mais simples ainda:
*{padding: 0px; margin: 0px;}
body{background-color: #fff;}
#global{/*width: 900px*/ background-color: #fff;}

#global #topo{float: center;}

#global #conteudo{float: center; margin: 5px; border: 2px solid #55ff55; background-color: #D5FFD5;}

#global #conteudo #busca{float: center; margin: 5px; border: 1px solid #55ff55; background-color: #fff; padding: 5px; text-align: center;}

#global #conteudo #texto{float: center; margin-left: 5px; margin-top: 0px; margin-right: 290px; margin-bottom: 5px; background-color: #fff; border: 1px solid #55ff55;}

#global #conteudo #navbar{float: right; margin: 5px; background-color: #fff; border: 1px solid #55ff55;}

Mas o problema é que a div "navbar" ela aparece como se estuvesse fora da div conteudo, dai ela fica abaixo e junto com o rodapé e era pra ela ficar do lado da div "texto".

O objetivo, é ficar iguql isso:

http://img716.imageshack.us/f/novo.png/

Bom.. é isso ai.

Vlw

Link para o comentário
Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

  • 0
*FIT*

*FIT*

Postado
Postado

Uma saída, não sei se a mais viavel é usar um margin-top negativo, mas não sei como vai funcionar em todos os navegadores, faça um teste.

Em todo caso, float center não existe, apenas right ou left.

Recomendo usar margin-right para alinhar na posição que deseja, acredito que seja outra solução para resolver seu problema, corrija isso.

Link para o comentário
Compartilhar em outros sites
  • 0
vini_loock

vini_loock

Postado
  • Autor
Postado

Hm.. infelizmente não posso usar margin-top negativo, poruqe a div conteudo pode variar muito, e também não posso usar float left ou right para a div conteudo, poruqe vai sei layout liquido.

Tem alguma alternativa?

Eu tava pensando em usar javascript, dai pegaria o tamanho da tela e diminuiria o tamanho da navbar menos a margin e colocaria na div conteudo. Eu vou fazer isso e ver se funciona pelo menos nos principais navegadores.

Mas caso exista uma solução com css mesmo, é bem vinda!

Vlw

Link para o comentário
Compartilhar em outros sites
  • 0
vini_loock

vini_loock

Postado
  • Autor
Postado

Opa resolvido!

Eu peguei o width da div conteudo, dai diminui a margin e bordas e a navbar, dai deu o resultado da div texto

segue o código

function tamTexto(){
    var width       = document.getElementById("conteudo").offsetWidth;
    var widthNavbar = "250";
    var margin      = "15";
    var borda       = "4";
    var soma        =  width-widthNavbar-margin-borda;
    document.getElementById("texto").style.width = soma;
}

Vlw

Link para o comentário
Compartilhar em outros sites
  • 0
*FIT*

*FIT*

Postado
Postado

Bom, uma boa saída, eu ia pensar em um modo com CSS mesmo, mas pelo que vejo assim já está funcionando bem, acredito que no eu estava pensando iria ter que mudar um pouco a estrutura do CSS, não sei se valeria a pena ter que quase refazer.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,2k
    • Posts
      651,9k
×
×
  • Criar Novo...