Les comento, estoy diseñando una web en asp.net (no puedo dar muchos detalles sobre de qué se trata la web debido a que es para una empresa y me pidieron una especial discreción, pido disculpas de ante mano por esto) y estoy teniendo problemas a la hora de hacer la maquetación y el posicionamiento web.
Les dejo una imagen para poder explicarme:
Ese es el diseño que me han pedido y tengo maquetado de esta forma:
1- Div principal llamado div_master_mainContainer
2- Div header llamado div_headerContainer
Dentro de div_headerContainer tengo:
* Div para el logo llamado div_logo
* Div para formulario de inicio de sesión llamado div_loginForm
3- Div para navigation bar llamado div_navBar
4- Div para contenido llamado div_master_content
El problema radica principalmente en el bloque del header. Necesito ubicar el logo a la izquierda y el formulario a la derecha, he dado mil vueltas hasta que pude conseguirlo ubicarlo una vez pero con el problema de que al achicar la ventana del explorador, el formulario de la derecha se desplazaba a medida que se achicaba la ventana hasta colapsar con el logo de la izquierda y por consecuente el bloque del formulario se acomodaba por debajo del logo.
Cómo y cuál sería la correcta forma de poder maquetar la web asi? Siempre me han dado dolores de cabeza la maquetación.
El código hasta ahora es:
Site.master.aspx
Código:
y el .css es:<body>
<div id="div_master_mainContainer">
<form id="form1" runat="server">
<div id="div_header">
<div id="div_headerContainer">
<div id="div_logo"></div>
<div id="div_loginForm">
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate>
<table>
<tr>
<td align="left">
Username:
</td>
<td>
<asp:TextBox ID="textBox_userName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left">
Password:
</td>
<td>
<asp:TextBox ID="textBox_password" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left">
<asp:CheckBox ID="checkBox_rememberMe" runat="server" Text="Remember me" />
</td>
<td align="right">
<asp:LinkButton ID="linkButton_login" runat="server" Text="Login"></asp:LinkButton>
</td>
</tr>
</table>
</AnonymousTemplate>
<LoggedInTemplate>
asd
</LoggedInTemplate>
</asp:LoginView>
</div>
<div style="clear:both"></div>
</div>
</div>
<div id="div_navBar">
<span>Navigation bar</span>
</div>
<div id="div_master_content">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</div>
</body>
Código:
Pido disculpas si el código css y html no es muy bueno, soy mas dedicado a la programación (c#, c++, entre otros) que a la maquetación en css y html.body
{
background-color:#F2F2F2;
font-family: Arial;
font-size: 11px;
}
#div_master_mainContainer
{
width:100%;
}
#div_header
{
border-radius: 6px;
box-shadow: 1px 1px 3px #888888;
}
#div_headerContainer
{
}
#div_logo
{
background-image:url(../images/logo.png);
background-repeat:no-repeat;
height: 75px;
width: 300px;
}
#div_loginForm
{
display:inline;
}
#div_navBar
{
border-radius: 6px;
box-shadow: 3px 3px 5px #888888;
margin-top: 15px;
height: 25px;
padding-left: 8px;
}
.index_content
{
border-radius: 10px;
box-shadow: 3px 3px 5px #888888;
background-color: White;
margin-top: 15px;
min-height: 150px;
padding-left: 8px;
padding-top: 8px;
}
#button_fileUpload
{
margin-left: 20px;
}
Saludos y gracias nuevamente por su tiempo.
