0

Preciso de ajuda a criar uma div que possa incluir outras divs em linha horizontal. O objetivo é criar um espaço no topo do cabeçalho do site. Alguém me pode ajudar?

<div id="header">
        <div class="top_header">        
            <!-- SELECT YOUR LANGUAGE -->
                <div class="linguagem" onclick="abrirlayer('layer1')">
                    <h1>SELECT YOUR LANGUAGE v</h1>
                </div>
            <!-- SELECT YOUR LANGUAGE -->
            <!-- PESQUISA -->                                                                                                           
                <div class="pesquisa">
                    <form action="action_page.php">
                    <input type="text" name="pesquisa" class="caixatexto">
                    <input type="image" value="submit" src="imagens/lupa.png" alt="submit Button">  
                </div>
            <!-- PESQUISA -->

        </div>
</div>


#header .top_header{
    background-color: blue;
    width: 100%;
    height: 25%;
    position: relative;
    margin-top: -0.6em;
    white-space: nowrap;
}
.top_header .linguagem{
    background-color: green;
    height: 100%;
    width: 15%;
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.linguagem h1{
    position: relative;
    padding-top: 5%;
    padding-left: 2%;
    font-size: 1vw;
    text-align: left;
    color: rgb(225,225,225);
}
.top_header .pesquisa{
    background-color: yellow;
    height: 100%;
    width: 15%;
    margin-left: 50%;
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.top_header .pesquisa form{
    position: relative;
    height: 100%;   
}
.top_header .pesquisa img{
    position: relative;
    height: 100%;
}

inserir a descrição da imagem aqui

2
  • Podes explicar melhor? Tens uma imagem do que procuras? Já testaste juntar divs a esse HTML e dar float ou display inline?
    – Sergio
    Commented 14/05/2016 às 20:44
  • Já tem imagem, obrigado desde já. Commented 14/05/2016 às 20:55

1 Resposta 1

0

Não ficou muito claro sua pergunta, mas acho que você quer algo desse tipo:

inserir a descrição da imagem aqui

Para isso, basta criar uma div dentro da outra com position: relative, como por exemplo:

CSS:

#box1 {
position: relative;
width:300px;
height:110px;
margin-left: 15%;
border: 1px red solid;
top: 0px;
background-color: orange;
}

#box2 {
position: relative;
width:300px;
height:110px;
margin: 0 auto;
margin-left: 350px;
border: 1px red solid;
top: 0px;
background-color: blue;
}

#box3 {
position: relative;
width:300px;
height:110px;
margin: 0 auto;
margin-left: 350px;
border: 1px red solid;
top: 0px;
background-color: black;
}

HTML:

<html>
    <link rel="stylesheet" type="text/css" href="teste.css"> 
    <body>
    <div id="box1"> 
        <div id="box2"> 
            <div id="box3"> </div>
        </div>
    </div>
    </body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .