Jump to content

How can I fix this with html or css?


yisera
 Share

Recommended Posts

I'm trying to do a footer like div on my web page, I'm using html5 and I know the existence of the <footer> tag, but that is not quite what I am looking for.. Here is the code to try to explain a bit better what is gonig on:

<div id="footer">  <div id="footer_1">		 <a href="https://www.facebook.com/icc.unicah" ><img src="Imagenes/facebook (2).png" class="imagenesFooter" title="Facultad ICC en Facebook."/>Enterate que pasa!</a><br/>		 <a href="#"><img src="Imagenes/twitter (2).png" title="Siguenos en Twitter." class="imagenesFooter"/>Siguenos!</a><br/>		 <a href="#"><img src="Imagenes/wordpress (2).png" title="Publicalo en tu Blog" class="imagenesFooter"/>Publicalo!</h5></a><br/>		 <a href="#"><img src="Imagenes/13399187032100953665.png" title="Compartelo en G+." height="32" width="32" class="imagenesFooter"/>Compartelo!</a><br/>		</div>		<div id="footer_2">		 <a href="#">Que es Ingenieria en Ciencias de la Computacion?</a><br/>			<a href="#">Mision Vision y Politica de la Calidad de la Facultad</a><br/>			<a href="#">Historia de la Facultad</a><br/>			<a href="#">Actual Decano y Asociacion de Estudiantes</a><br/>		</div>	  </div>

The second footer is all right, I still need to fix it with some css, but the real problem is <footer_1> how can I make sure that the letters align to the middle of the icon? here is an output attached. I want the text to be centered to the icon's middle and have some margin from the icon itself. I've tried some <h1-6> and some <p> with some css for it but no success so far :( I've ran out of ideas on how to fix this..Does anyone have any fix or idea how to deal with it? I will be mostly grateful. Thanks in advance!

post-95684-0-21406300-1335598886_thumb.jpg

Link to comment
Share on other sites

You can use <ul> to list the items.EXAMPLE:

/*CSS*/ul#social{width:200px}li.fb{background:url('imagenes/facebook(2).png') no-repeat left center; padding:5px 0px 5px 10px}<!--HTML--><ul id="social"><li class='fb'><a href="fb.com/icc.unicah">Facebook</a> </li></ul>

Edited by eTianbun
Link to comment
Share on other sites

Thanks, now that I come to think about it, that would work! Just one more question, will I have to use the display attribute? if so, would it be block?

Link to comment
Share on other sites

The example i gave, is just to make only the text clickable...If you want the whole area to be clickable, you can display <a> as block. Lets say, you want to use the code you already have, then you can do this:EXAMPLE:

/*CSS*/a.fb{display:block; padding:5px 0px 5px 10px; width:200px; background:url('imagenes/facebook(2).png') no-reapeat left center;}<!--HTML--><a class="fb" href="fb.me/icc.unicah">Facebook</a>

Edited by eTianbun
Link to comment
Share on other sites

Ok! Thanks that's much clearer now! I have yet another question.. On a Login Form let's say I want it to always be at the center of the page, I know a determined width plus auto margin on both right and left will center it horizontally.. But to center it vertically? Does the same concept apply? Or is there another way?

Link to comment
Share on other sites

Ok! I'll try that later on today.. I think I need some sleep. Thanks!Sorry for so many questions, I'm kind of new to web development.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...