No tengo narices...

bakaburra · #1 (**permalink**) 11/02/2012, 06:12

supongo que como a muchos otros novatos en el asunto de las css...no tengo narices a componer mi footer según mis intenciones.
Veréis, pertendo colocar en mi footer una imagen y seguidamente alinear horizontalmente dos textos a su derecha...debería ser sencillo pero no lo consigo.
Alguien puede echarme una mano?
Os dejo el html y las css que tengo hechas. y las imágenes de lo que pretendo.

el html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="proves.css" />
<link type="text/css" rel="stylesheet" href="addim.css" />
<title>Insert title here</title>
</head>
<body class="body">
<div id="container">
<div id="header">
<div class="logo">
<a href="/" ><img alt="" src="imatges/logo.png"></a>
</div>
<a href="#">
<div class="advertising">
<p class="text_advertising">FES-TE SOCI</p>
</div>
</a>
<div class="menu">
<div id="navegacio">
<ul>
<li>
<a href="#">Benvinguts</a>
</li>
<li>
<a href="#">Coneix-nos</a>
</li>
<li>
<a href="#">Usuaris</a>
</li>
<li>
<a href="#">Ajuda´ns</a>
</li>
<li>
<a href="#">Contacta</a>
</li>
<li>
<a href="#">Descàrregues</a>
</li>
</ul>
</div>

</div>
</div>
<div class="titol_contingut">
<span class="t_c"><h1>OBJECTIUS</h1></span>
<span class="t_c"><h2>coneix-nos</h2></span>
</div>
<div class="titol_accions">
<span class="t_a"><h1>ACCIONS</h1></span>
<span class="t_a"><h2>el que tu pots fer</h2></span>
</div>
<div class="main" class="clearfix">
<div class="contingut_tipus1">
<div class="amplada_contingut">
<div class="c_t"><h1>"El nostre principal objectiu és la millora de vida dels nens de la Comú de Koutoba"</h1>
</div>
<div class="linea_roja"></div>
<div>
<p class="tipus1">l’èxit per un desenvolupament sostingut. </p>
<img alt="" src="imatges/img_contingut_objectius_01.jpg">
</div>
<div class="c_t"><h2>Mali. Les seves característiques.</h2></div>
<div> <img class="flotant" src="imatges/img_contingut_objectius_02.jpg" /><p class="tipus1">

L'agrupació d'aquests poblats,</p>

</div>
<div class="c_t"><h2>Problemàtica de la zona.</h2></div>
<div><p class="tipus1"> Addim té com a objectiu </p></div>
<div class="c_t"><h3>Àmbit escolar</h3></div>
<div><p class="tipus2"> Els objectius d´aquest projecte son:</p></div>
<ul>
<li><p class="tipus2">MILLORA DEL RENDIMENT </p></li>
<li><p class="tipus2">ESCOLA PER A TOTS </p></li>
<li><img class="flotant" src="imatges/img_contingut_objectius_03.jpg" /><p class="tipus2">PARES PARTICIPEN A L´ESCOLA.</p></li>
<li><p class="tipus2">LES NENES TAMBÉ VAN A L´ESCOLA. Lluitem per la igualtat d'oportunitats entre els nens i nenes de la comunitat.</p></li>
<li><p class="tipus2">UN CURS ESCOLAR DOS SACS DE MILL .</p></li>
</ul>
<div class="c_t"><h3>Àmbit sanitari</h3></div>
<div><p class="tipus2"> Actualment existeixen </p></div>
<ul>
<li><p class="tipus2">MILLORAR ELS EQUIPAMENTS</p></li>
<li><p class="tipus2">INFORMACIÓ I FORMACIÓ DEL PERSONAL SANITARI.</p></li>
<li><p class="tipus2">CAMPANYES SANITÀRIES EN DIFERENTS ASPECTES.</p></li>
<li><p class="tipus2">RECOLZAMENT A TRACTAMENTS A MALFORMACIONS FÍSIQUES.</p></li>
</ul>
</div>
</div>
<div id="contenidor_sb_2">
<a href="#">
<div class="block_festesoci">
<div class="text_festesoci"><h2>APADRINA UN NEN PER NOMÉS 15€ AL MES</h2>
<img class="festesoci" src="imatges/img_block_soci.png"/>
</div>
</div>
</a>
<div class="block_botiga">
<img class="botiga" src="imatges/img_block_botiga.png"/>
<div class="text_botiga"><h2>PROXIMAMENT: LA NOSTRA BOTIGA!</h2>
<div class="text_botiga"><h3>Directe des de Mali</h3>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="contenedor_footer">
<img src="imatges/logo_3anys.jpg" style="float:left;clear:left;" />
<img src="imatges/logo_3anys.jpg" style="float:left;"/>
<span class="linia_vertical"></span>
</div>
</div>
</div>
</body>
</html>

y ahora las css:

@CHARSET "UTF-8";

.body {
background-color: #ececec;
font-family: Calibri, Verdana, Arial, sans serif;
}

#container {
width: 930px;
margin-left:auto;
margin-right:auto;
min-height:100%;
margin: 0 auto -142px;
text-align: center;
padding-bottom:80px;
}

a {
text-decoration: none;
cursor: pointer;
}

#header {
width: 100%;
height: 150px;
margin-bottom: 10px;
}
.logo{
float: left;
padding-top: 15px;
}

.advertising{
float: right;
background-color: #cc0033;
height: 60px;
width: 75px;
}

.text_advertising{
color: #ffffff;
font-size: 16;
}

.menu{
float: right;
width: 600px;
padding-top: 45px;
}

#navegacio {
padding: 0;
float:right;
}

#navegacio li {
display: inline;
background: url("imatges/nav_bg.gif") no-repeat left;
}

#navegacio li a {
font-size:16px;
text-decoration: none;
padding-right: 0px;
padding-left:12px;
color: #a8a8a8;
}

#navegacio li a:hover {
color: #cc0033;
}

.titol_contingut {
width: 700px;
height: 50px;
float: left;
margin-bottom: 10px;
text-indent: 3px;
line-height: 2px;
}

.t_c h1{
font-size: 16pt;
text-align: left;
color: #cc0033;
padding-top: 10px;
font-weight: lighter;
}

.t_c h2{
font-size: 12pt;
padding-bottom: 3px;
text-align: left;
color: #999999;
font-weight: lighter;
}

.titol_accions {
width: 205px;
height: 50px;
float: right;
margin-bottom: 10px;
text-indent: 3px;
line-height: 2px;
}

.t_a h1{
font-size: 16pt;
text-align: left;
color: #cc0033;
padding-top: 10px;
font-weight: lighter;
}

.t_a h2{
font-size: 12pt;
padding-bottom: 3px;
text-align: left;
color: #999999;
font-weight: lighter;
}

#main{
padding-bottom: 58px;

}
.contingut_tipus1 {
background-color: #ffffff;
border-radius: 5px;
width: 700px;
min-height: 100%;
float: left;
border: 4px solid #ffffff;
-moz-box-shadow: 0 0 4px 2px #ccc;
-webkit-box-shadow: 0 0 4px 2px#ccc;
box-shadow: 0 0 4px 2px #ccc;
margin-bottom: 20px;
padding-bottom: 20px;
}
.amplada_contingut{
width: 668px;
padding-left:15px;
}

.c_t h1{
font-size: 17pt;
text-align: left;
color: #cc0033;
padding-top: 1px;
padding-left: 10px;
}

.c_t h2{
font-size: 14pt;
text-align: left;
color: #cc0033;
padding-top: 1px;
padding-left: 10px;
}

.c_t h3{
font-size: 12pt;
text-align: left;
color: #cc0033;
padding-top: 1px;
padding-left: 10px;
font-weight: lighter;
}

.linea_roja {
height:1px;
background-color:#cc0033;
overflow: hidden;
margin-left: 10px;
margin-right: 10px;
}

p.tipus1 {
text-align:justify;
font-size: 14px;
margin-left: 10px;
margin-right: 10px;
text-indent: 50px;
line-height:1.3;
color: #454343;
}

p.tipus2 {
text-align:justify;
font-size: 14px;
margin-left: 10px;
margin-right: 10px;
color: #454343;
}

img.flotant{
float:right;
margin-left: 15px;
margin-bottom: 15px;
}

llistat ul{
list-style-type: disc;
}

.block_festesoci {
background-color: #cc0000;
border-radius: 5px;
width: 205px;
height: 315px;
float: right;
border: 4px solid #ffffff;
-moz-box-shadow: 0 0 4px 2px #ccc;
-webkit-box-shadow: 0 0 4px 2px#ccc;
box-shadow: 0 0 4px 2px #ccc;
}

img.festesoci{
padding-left: 6px;
padding-right: 6px;
padding-bottom: 6px;
}

.text_festesoci h2{
font-size: 22px;
color: #ffffff;
}

.block_botiga {
background-color: #00c3b2;
border-radius: 5px;
width: 205px;
height: 315px;
float: right;
border: 4px solid #ffffff;
margin-top: 10px;
-moz-box-shadow: 0 0 4px 2px #ccc;
-webkit-box-shadow: 0 0 4px 2px#ccc;
box-shadow: 0 0 4px 2px #ccc;
}

img.botiga{
padding-left: 8px;
padding-right: 8px;
padding-top: 8px;
}

.text_botiga h2{
font-size: 22px;
color: #ffffff;
}

.text_botiga h3{
font-size: 18px;
color: #ffffff;
}

#footer {
position: relative;
margin-top: -58px; /* valor negativo del alto del footer */
height: 58px;
clear:both;

}

#contenedor_footer{
width: 930px;
background-color: #666;
}

.logo_3anys{
background: url('imatges/logo_3anys.jpg') no-repeat;
height: 58px;
float:left;
clear:left;
}

p.footer{
text-align:justify;
font-size: 11px;
margin-left: 10px;
margin-right: 0px;
color: #454343;
}

.linia_vertical {
height:58px;
background-color:#cc0033;
overflow: hidden;
width:1px;
}

.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}

.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/

* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */

[IMG]

[/IMG]

C2am · #2 (**permalink**) 12/02/2012, 07:29

Hola
Un ejemplo rápido.

Código HTML:

Ver original<div id="footer">
    <img src="3d-h.jpg"/>
    <p class="texto">texto uno</p>
    <p class="texto">texto dos</p>
 
</div

Código CSS:

Ver original#footer {
position: relative;
/*margin-top: -58px; /* valor negativo del alto del footer */
height: 90px;
clear:both;
    width:500px;
    border:1px solid red;
    overflow:hidden;
    background: #666;
} 
#footer img{
float:left;
    width:90px;
}
 
#footer .texto{
    border-left:1px solid #cc0033;
    color: #454343;
    text-align:justify;
    font-size: 11px;
    margin-left: 10px;
    margin-right: 0px;
        
    float:left;
    margin:5px 50px;
    height:80%;
}&#8203;

Saludos