K_Drive Posted September 20, 2007 Share Posted September 20, 2007 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 More sharing options...
Err Posted September 20, 2007 Share Posted September 20, 2007 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 More sharing options...
K_Drive Posted September 22, 2007 Author Share Posted September 22, 2007 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 More sharing options...
Err Posted September 22, 2007 Share Posted September 22, 2007 I was trying to do it in a HTML valid way. Using inline styles on your <br> is fine also. Glad you got it working. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.