How can I align my HTML components with CSS?
I'm making a map + function for Brazil and I want to align the image that says "Anuncie aqui é grátis" to the right and also the welcome text so that the image and the welcome text become aligned with the text "information" below. How should I do it? I may be able to achieve it with tables but I think CSS can be much better. I have a start and if only I could align the north-east part of my design then I would be closer to finish.
<body onload="initialize()">
<div class="container_12">
<div id="mainCol" class="grid_12">
<div id="header">
<div id="navbar">
</div>
<div id="logo-wrap">
<table><tr><td>
<div id="logo-img"><a class="nobk" href="/ai"><img src="/_/img/montao.gif" alt="Market Logo"/></a><ul>
<li><a href="li">{% now "d M" %}</a></li>
<li>{% if user %}<a href="{{ user_url|fix_ampersands }}">{% trans "Log out" %}</a>
{% else %}<li><a href="/login">{% trans "Log in" %}{% endif %}</a></li>
</ul>
</td><td>
<a href="ai"><img src="/_/img/anuncio.gif" alt=""/></a>
<div id="user-ident">
<span>{% trans "Welcome," %} <b>{{user.nickname}}</b></span>
</div>
</td></tr></table>
开发者_开发知识库
</div>
<div id="logo-text"><h1 style="display:none">Market</h1>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div id="map_canvas" style="height: 400px; position: relative; background-color: rgb(229, 227, 223);">
</div>
<div class="container_12">
<div class="grid_6">
<div class="title1">{% trans "Post a photo" %}</div>
<div class="countries_list">
<form method="post" action="{{form_url}}" enctype="multipart/form-data"> <div>
<input type="file" name="file" /><input type="submit" value="{% trans "Go" %}" /></div> </form>
</div>
</div>
<div class="grid_6">
<div class="title1">Information</div><div>
<a href="sao_paulo">São Paulo</a>
<br> <a href="rio_de_janeiro">Rio de Janeiro</a>
<br> <a href="espirito_santo">Espírito Santo</a>
<br> <a href="minas_gerais">Minas Gerais</a>
<br> <a href="parana">Paraná</a>
<br><a href="santa_catarina">Santa Catarina</a>
<br><a href="li?lat=-23.33&lon=-46.38">Rio Grande do Sul</a>
<br><a href="bahia">Bahia</a>
<br> <a href="pernambuco">Pernambuco</a>
<br> <a href="li?lat=-23.33&lon=-46.38">Ceará</a>
<br> <a href="li?lat=-23.33&lon=-46.38">Rio Grande do Norte</a>
<br><a href="li?lat=-23.33&lon=-46.38">Amazonas</a>
<br> <a href="li?lat=-23.33&lon=-46.38">Distrito Federal</a>
<br><a href="li?lat=-23.33&lon=-46.38">Pará</a>
<br> <a href="li?lat=-23.33&lon=-46.38">Maranhão</a>
<br><a href="li?lat=-23.33&lon=-46.38">Goiás</a>
<br> <a href="li?lat=-23.33&lon=-46.38">Paraíba</a>
<br><a href="li?lat=-23.33&lon=-46.38">Alagoas</a>
<br> <a href="li?lat=-23.33&lon=-46.38">Piauí</a>
<br> <a href="li?lat=-23.33&lon=-46.38">Mato Grosso</a>
<br><a href="li?lat=-23.33&lon=-46.38">Mato Grosso do Sul</a>
<br> <a href="li?lat=-23.33&lon=-46.38">Sergipe</a>
<br><a href="li?lat=-23.33&lon=-46.38">Rondônia</a>
<br><a href="li?lat=-23.33&lon=-46.38">Tocantins</a>
<br><a href="li?lat=-23.33&lon=-46.38">Acre</a>
<br><a href="li?lat=-23.33&lon=-46.38">Amapá</a>
<br> <a href="li?lat=-23.33&lon=-46.38">Roraima</a></div>
<div class="link_to_profile"> </div>
</div>
</div>
<div class="clear"></div>
<div class="container_12">
<div class="grid_12">
<div id="footer">
©2011 <a href="http://montao.com.br" title="Montao">Montao.com.br</a>
</div>
</div>
</div>
</body>
/* @override http://localhost:8000/static/css/style.css */
@import url("960.css");
@import url("reset.css");
@import url("text.css");
@import url("uni-form-generic.css");
@import url("uni-form.css");
h1, h2, h3, h4, h5, h6, h7, h8 {
text-shadow: #fff 1px 1px 1px;
}
a {}
a:link {color: #750006;}
a:visited {color:#0D1826;}
a:hover {color: #d2e0f7; background-color:#2C4F66; text-decoration:none}
.nobk:hover {
background:none;
}
body {
font-family: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
font-size: 12px;
margin: 0px;
color:#2C4F66;
background-color:#ffffef;
line-height:1.3;
}
#main_content {
background: yellow;
}
#footer {
background-color:#99b3cc;
color:#2C4F66;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 15px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
//text-shadow: #fff 1px 1px 1px;
}
#mainCol ul {
list-style:none;
margin:10px 0 10px 0;
padding:0;
}
#mainCol li {
display:inline;
margin:0 0 0 1px;
padding:0;
}
#mainCol li a:link, #mainCol li a:visited {
text-decoration:none;
font-size:1.3em;
font-weight:bold;
color: #fe0403;
background-color:#fff7aa;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 2px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
text-shadow: #000 1px 1px 1px;
}
#mainCol li a:hover {
color:#fe0403;
background-color:#e2f3b8;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 2px;
text-shadow: #000 1px 1px 1px;
}
.mapContainer #gmap {
height: 400px;
border-top: 2px solid #8D9BA1;
border-bottom: 2px solid #8D9BA1;
}
.mapContainer2 #gmap {
height: 300px;
overflow:hidden;
}
.title1 {
font-size: 20px;
margin-top: 20px;
margin-bottom: 20px;
background-color:#99b3cc;
color:#2C4F66;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
padding-bottom: 2px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
text-shadow: #fff 1px 1px 1px;
}
/* ========== A view =========== */
#contact_info {
background-color:#d2e0f7;
color:#2C4F66;
padding: 10px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
}
#contact_info h6{
font-size: 12px;
}
.tag {
font-weight:bold;
color: #d2e0f7;
background-color:#8D9BA1;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 2px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
text-shadow: #666 1px 1px 1px;
}
a:hover .tag {
background-color: #2C4F66;
text-decoration: none;
}
a:visited .tag {
color: #FFF
}
/* ========== DEV Info ============*/
.dev_avatar {
float:left;
}
#dev-info {
padding-left:220px;
}
.dev_name {
font-size: 36px;
font-weight: bold;
text-shadow: #fff 1px 1px 1px;
}
.dev_location {
font-size: 18px;
}
.dev-result{
font-size:18px;
width: 32%;
float: left;
}
.countries_list dt {
font-size: 14px;
font-weight: bold;
}
.countries_list dd a{
font-size: 12px;
text-decoration: none;
}
.link_to_profile {
font-size: 14px;
height: 25px;
width: 49%;
float: left;
}
/* Debug class */
.show {
background-color:pink;
}
/* Mugur CSS Starts Here */
.ybox{
background-color:#d2e0f7;
color:#2C4F66;
padding: 10px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
}
#header {
margin-bottom:20px;
position:relative;
}
#logo-wrap{
position:relative;
width:480px;
}
#logo-text{
position:absolute;
top:70px;
left:150px;
}
#logo-text h1{
font-size:24px;
font-weight:bold;
color:#2C4F66;
text-shadow: #cccccc 1px 1px 1px;
}
#user-ident {
float:right;
clear:both;
position:relative;
text-align:right;
background-color:#d2e0f7;
color:#2C4F66;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 2px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
text-shadow: #fff 1px 1px 1px;
}
#navbar{
float:right;
clear:both;
}
#tags {
line-height:2;
}
#dev_bio {
font-size:18px;
}
/* Forms */
.uniForm fieldset {
border:1px solid #DFDFDF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
padding: 5px;
}
.uniForm fieldset legend {
font-size: 1.5em;
}
/*** Stats */
#countries_map {
margin-left: auto;
margin-right: auto;
}
The #navbar is not aligning to the right because the google ad under it pushes it back. What you could do is inside the navbar, you can wrap these inside another div:
<div id="navbar">
<div class="navwrapper">
<a href="ai"><img src="/_/img/anuncio.gif" /></a>
<ul>
[...]
</ul>
</div>
</div>
And for your CSS have:
#navbar .navwrapper {
float: right;
}
I'm not sure if I fully understand you, might be easier if you edit the image to what you want it exactly to look like.
This makes the welcome text and message sit on the right hand site, but only up to 940px. Due to something setting the width of the container to it.
#navbar{
text-align:right;
}
加载中,请稍侯......
精彩评论