Jump to content

CSS alignment


K_Drive
 Share

Recommended Posts

Hello. I have a CSS alignment issue.This project is going to be a small popup window.Here is my code:

<html><head><link rel="stylesheet" type="text/css" href="q_page_style.css" />  <style>.center{text-align: center;}.alignImg{text-align: center;float: left;margin-bottom: 15px;border: none;}.popUpQ{font-weight: bold;font-size: 10pt;width: 450px;border: 3px;border-style: solid;border-color: #0000CD;padding-left: 15px;padding-right: 15px;padding-top: 5px;padding-bottom: 5px;}</style></head><body><div class="popUpQ"><div class="center">  <div class="alignImg">    	<p>Academic    	<br/>    	related</p>    	<img  src="images/Qubbies_academic.jpg" width="70" height="80" >  </div>  <div class="alignImg">    	<img  src="images/Qubbies_sports.jpg" width="59" height="74" >    	<p>Sports     	<br/>    	related</p>  </div>  <div class="alignImg">    	<p>Religious    	<br/>    	related</p>    	<img  src="images/Qubbies_religious.jpg" width="170" height="70" >  </div>  <div class="alignImg">    	<img  src="images/Qubbies_health.jpg" width="105" height="55" >    	<p>Health and    	<br/>    	Beauty    	<br/>    	related</p>  </div></div><div class="center"><h4 class="redText">Localized Special Interest Groups</h4></div></div></body></html>

Here is a link to a screenshot of what is happening:http://www.geocities.com/alcovespring/align_screenshot.jpgI have the four jpg images. I would like to include the captions as shown.I would like the images and the captions aligned as shown in the screenshot.But, the title underneath it is not centered. The title is actually another image. I have also tried substituting some <h4> text here instead, but the same thing happens.If I add borders, as shown below, in the "alignImg" declaration, the red text title aligns to the center like I want it to.border: 1px;border-style: solid;border-color: #000000;Here is a screenshot of that:http://www.geocities.com/alcovespring/alig...reenshot_02.jpgWhy is the red title text being moved over to the right?Can anyone tell me what is going on here?It seems like a left margin is being added.I am using IE 7.0.I sure would appreciate some suggestions.Sincerely,K_Drive

Link to comment
Share on other sites

Add this to your CSS:

h4 {  text-align: center;  clear: both;}

Take the <div>'s off of the <h4> tag. You code should look like this:

<h4 class="redText">Localized Special Interest Groups</h4>

That should fix your problem.

Link to comment
Share on other sites

Add this to your CSS:
h4 {  text-align: center;  clear: both;}

Take the <div>'s off of the <h4> tag. You code should look like this:

<h4 class="redText">Localized Special Interest Groups</h4>

That should fix your problem.

RahXephon:All I had to do was insert a "<br clear: both />" I was trying to use "clear: all", which is why I resorted to all that other stuff.As soon as I saw your reply, I knew that the "all" was not right.Thank you, RahXephon. K_Drive(Sorry it took so long to reply.)
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...