Jump to content

Help with <li> and centering issue with images?


straightryder

Recommended Posts

ishot-1-1.jpg

 

Can someone help me with this issue i'm having. *sorry if the photo is a bit blurry* My eyes are killing me from starring at a monitor for 9+hrs.

 

I can't seem to get the text on at the bottom of the images to 'center' completely with the images. What am I doing wrong. One more thing.... this is my first attempt at CSS and designing a site. Please don't flame on me....

 

Here's the CSS:

 

#content5 {

width:1000px;

height:120px;

background-color:#000;

border-top:thin solid white;

border-bottom:medium solid white;

}

 

#content5 li {

display:inline-block;

margin:0;

padding:0;

}

 

#content5 img {

padding-right:15px;

margin-right:0px;

}

 

#content5 p {

display:block;

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

color:white;

font-size:10px;

text-align:center;

}

 

Here's the html:

 

 

 

airplane

Air

phone.png

Consults

taxi2.png

Taxi

tourist_police.png

Tourist Police

weather.png

Weather

check_list.png

Check List

emergency.png

Hospitals

acomadation.png

Accomadations

training.png

Training

tours.png

Tours

full_moon.png

Full Moon Party

rules2.png

Kingdom Rules

 

 

 

I haven't added the a link yet. Im aware of that. Thanks.

Link to comment
Share on other sites

The problem is the padding-right on #content5 img while the p tag inside doesn't have padding

 

#content5 img {

/*padding-right:15px;*/

margin-right:0px;

}

 

the above edit solves the problem for the short words but some sub-titles may be too long and expand out of the div.

 

If you leave the padding and add it to the p tag that works too, but leaves less room for the text:-

#content5 img {

padding-right:15px;

margin-right:0px;

}

 

#content5 p { padding-right: 15px;

display:block;

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

color: blue;/*white;*/

font-size:10px;

text-align:center;

}

 

All the images were in a vertical line in IE7 until I added float: left here:-

#content5 li {

display:inline-block; float: left;

margin:0;

padding:0;

}

 

Since I can't see all your code, make sure that you have a doctype right at the top of the html page before the tag from here:-

http://www.w3.org/QA/2002/04/valid-dtd-list.html

XHTML Strict or a transitional because your img codes close with />

 

On this forum we prefer HTML 4.01 Strict or transitional but it doesn't make much difference now although the future is to be pointing to HTML 5 not XHTML.

Edited by Wickham
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...