Tue, 2009-06-30 13:31
Hello friends, can you help me?
In my header have a logo(yellow), a INPUT BUTTON and two links.
When I resize the browser window I want the INPUT and LINKS
slipping to left, as in the picture below:
But I had the problem. If the window is too small, the div(top_botoes) drops below the yellow logo div(top_marca), as in the picture below:
I want the header is like this:
this is possible?
I put position:fixed but this way the INPUT and LINKS don't slipping to left when resized the browser window.
I put the code below.
<html xmlns="http://www.w3.org/1999/xhtml"> <style type="text/css"> <!-- .top{float:left; height:46px; width: 100%; background-image: url(images/bgdiv1.gif);background-repeat: repeat-x; display:block;} .top_marca {float:left; width: 160px;} input {float:left; width: 170px; margin: 10px 0px 0px 0px;} .top_botoes {float:right;} .top_links {float:left; width: 150px; margin: 13px 0px 0px 50px;} .top_links a:link {font-family: Verdana;font-size: 11px;color: White;text-decoration: none;} .top_links a:visited{font-family: Verdana, Arial; font-size: 11px; color: White; text-decoration: none; } body {background-color:#000000;} --> </style> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Teste</title> </head> <body> <div class="top"> <div class="top_marca"> <img src="images/marca.jpg" /> </div> <div class="top_botoes"> <input name="criar" type="button" value="CRIAR" /> <div class="top_links"> <a href="#">Link</a> <a href="#">Link</a> </div> </div> </div> </body> </html>
thanks!
