trouble aligning to center an unordered list of smallthumbs

co.ador · September 17, 2009

If you can see in the picture the unordered list of smallthumbs fould below the video player and it's <p> tags and above the largethumb image at the bottom of the browser it's found the unordered list of smallthumbs i have referred above. I f you notice that unordered list of smallthumbs is more to the left visually than to the right. WHat I want it's to align it more to the center. I have apply the property text-align with a value of center "text-align:center to the #rc2 ul { text-align:center} but it hasn't work out. I think it's beyond my abilities right now to accomplish this simple align to center.

The html code and CSS stylesheet are below give me a hand please.

HTML code

<html>
<head>
<link type="text/css" href="../stylesheets/restaurantwebpageprueba.css" rel="stylesheet" media="all" />
</head>
<body>
<div id="rmc">

<div id="rc1">
<ul id="rc1ul" >
<li><a href="#">about mansions</a></li>
<li><a href="#">Materials</a></li>
<li><a href="#">Soil of place</a></li>
<li><a href="#">Engineers </a></li>
</ul><!-- end rc1ul -->

<div id="videoplayer"> 
<img class="line" src="images/videoplayer.jpg" alt="videoplayer" width="500">
<p>Lorem Ipsum is simply dummy text 
of the printing and typesetting 
industry. Lorem Ipsum has been 
the industry's standard dummy
text ever since the 1500s, when
an unknown printer took a galley.</p>
</div><!-- end videoplayer-->
</div> <!-- end rcl -->

<div id="rc2">
<img class="line" src="../images/line..gif" alt="line">
<ul class="smallthumbs" >
<li><a href="#"><img src="images/restaurant1.jpg" alt="1"></a></li>
<li><a href="#"><img src="images/restaurant2.jpg" alt="1"></a></li>
<li><a href="#"><img src="images/restaurant3.jpg" alt="1"></a></li>
<li><a href="#"><img src="images/restaurant4.jpg" alt="1"></a></li>
<li><a href="#"><img src="images/restaurant5.jpg" alt="1"></a></li>
</ul><!-- end smallthumbsul -->


<img class="largethumb" src="images/restaurant5.jpg" alt="large">


</div><!-- end rc2 --> 
</div><!-- end rmc-->

CSS style sheet.


#rmc {
border: 1px solid red;
position:relative;
left:202px;
top:80px;
width:65%;
height:100%;

}
#rc1 {position:relative;
width:100%;
padding:0px;
margin:0px;
}
#videoplayer { margin:0px auto;
width:500px;
position:relative;
top:40px;

}

#videoplayer img{
position:relative;
width:100%;

}
#rc1 ul {
list-style-type:none;
margin:0px;
padding:0px;
text-align:center;
}
#rmc #rc1 ul li {
width:190px;
float:left;
margin:4px;
border:1px solid green;



}
#rc2 {
position:relative;
top:70px;


}

.smallthumbs{
text-align:center;
}
#rc2 .line {
width:100%;
height:3px;

}
#rmc #rc2 ul {
list-style-type:none;
margin:1px;
padding:0px;
text-align:center;

}

#rmc #rc2 ul li {
width:140px;
height:60px;
float:left;
margin:4px;
border:1px solid green;
text-align:center;
}

#rc2 ul li img{
position:relative;
width:100%;
height:100%;
}

#rc2 .largethumb {
margin-top:7px;
width:100%;
height:50%;
}

Please check if it's semantically correct and if the CSS properties are the best to apply and why...

Thank you for your help...

Sign In

trouble aligning to center an unordered list of smallthumbs

Recommended Posts

co.ador

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information