Image resizing and unordered list centering

Forum Moderators: not2easy

Message Too Old, No Replies

Image resizing and unordered list centering

image resizing, centering unordered list

Easyslider01

5:52 pm on Aug 27, 2010 (gmt 0)

How is everyone doing today? I'm working on a website and I am having trouble resizing a image with css and trouble centering a list under the image:

here is the css:
#home_lay
{
overflow: hidden;
}
#home_lay h1
{
width: 139px;
height: 115px;
centered;
}
.image_resize
{
width: 139px;
height: 115px;
}
#home_lay ul li
{
color:white;
text-align: center;
list-style-type:none;
font-family:"Courier New", Lucida Console, monospace;
}

Here is the html:
<body>
<div = "home_page">
<div ="home_lay">
<h1><img src="*image*" alt="*image_name*" class="image_resize" /></h1>
<ul>
<li><a href="*url*">home</a></li>
<li><a href="*url*">news</a></li>
<li>preview</li>
<li>shop</li>
<li>contact us</li>
</ul>
</div>
</div>

Is there can someone tell me what I am doing wrong so I can correct the problem.

Thank you

Shado

8:10 pm on Aug 27, 2010 (gmt 0)

Well when you say centre the list - do you want to centre the div or the text of the list?

You could try margin: 0px auto

Major_Payne

8:53 pm on Aug 27, 2010 (gmt 0)

In order to center the entire list, you must put the unordered list inside a div and set a width and height. Or, at least a width less than 100% to center. THEN, you can style the div with margin: 0 auto;

NEVER put images between heading tags. It works but is NOT sematic coding for search engines. Some browsers may hic-cup at it depending on the document type used which seems to be XHTML 1.0 in your case.

Are the "asterisks" (*) in this code a typo?

<h1><img src="*image*" alt="*image_name*" class="image_resize" /></h1>

Try:

<p><img class="image_resize" src="URI to image" alt="Text Description" title="Mouseover Text Description" /></p>

CSS:

#home_lay {
width: 139px;
height: 115px;
margin: 0 auto;
}
.image_resize {
width: 139px;
height: 115px;
border: 0;
}

You may have to tweak the div sizes to fit the image and list.

HTML:


<div id"home_page">
<div id"home_lay">
<p><img class="image_resize" src="URI to image" alt="Text Description" title="Mouseover Text Description" /></p>

<ul>
<li><a href="*url*">home</a></li>
<li><a href="*url*">news</a></li>
<li>preview</li>
<li>shop</li>
<li>contact us</li>
</ul>
</div>
</div>

Ron

Easyslider01

11:46 pm on Aug 27, 2010 (gmt 0)

Well when you say centre the list - do you want to centre the div or the text of the list?

You could try margin: 0px auto

I want to center the text within the list.

In order to center the entire list, you must put the unordered list inside a div and set a width and height. Or, at least a width less than 100% to center. THEN, you can style the div with margin: 0 auto;

NEVER put images between heading tags. It works but is NOT sematic coding for search engines. Some browsers may hic-cup at it depending on the document type used which seems to be XHTML 1.0 in your case.

Are the "asterisks" (*) in this code a typo? <h1><img src="*image*" alt="*image_name*" class="image_resize" /></h1>

Try: <p><img class="image_resize" src="URI to image" alt="Text Description" title="Mouseover Text Description" /></p>

CSS:
#home_lay {
width: 139px;
height: 115px;
margin: 0 auto;
}
.image_resize {
width: 139px;
height: 115px;
border: 0;
}

You may have to tweak the div sizes to fit the image and list.

HTML:

<div id"home_page">
<div id"home_lay">
<p><img class="image_resize" src="URI to image" alt="Text Description" title="Mouseover Text Description" /></p>

<ul>
<li><a href="*url*">home</a></li>
<li><a href="*url*">news</a></li>
<li>preview</li>
<li>shop</li>
<li>contact us</li>
</ul>
</div>
</div>

Ron

The asterisks were just visuals to show where the links were suppose to go. I will definitely try out what you suggested Ron and get back and let you know if this worked. Thank you Shado and Major_Payne for your replies

Major_Payne

12:40 am on Aug 28, 2010 (gmt 0)

To center the text in the list, try setting a width for the list so there is some space to show centering or just try:


#home_page ul li {
text-align: center;
}

Correction for HTML:

<div id="home_page">
<div id="home_lay">

Forgot the "=" sign in there.

Easyslider01

2:17 am on Aug 29, 2010 (gmt 0)

Thank you for the help Major_Payne. What you suggested worked as it did resize the image and center the list, the only problem I am having is now the image doesn't want to center it self. for some reason it only stays on the left side. I can float it to the right no problem (if I wanted to float it to the right), but I just won't get centered.

And I apologize if I'm asking too many questions.

Major_Payne

8:25 am on Aug 29, 2010 (gmt 0)

BTW, I forgot that you may not be coding to XHTML 1.0 so remove any space and the "/" symbol in tags that normally don't have closing tags. For centering the image, you could try:


p#i_mg {
text-align: center;
}

Then for the HTML:

<p id="i_mg"><img class="image_resize" src="URI to image" alt="Text Description" title="Mouseover Text Description"></p>

I don't like doing it that way as I would prefer to set the image tag in its own div and set the width/height for the div and use margin: 0 auto; again.