1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

trouble aligning to center an unordered list of smallthumbs

Discussion in 'CSS' started by co.ador, Sep 17, 2009.

0
  1. #1
    [​IMG]

    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-->
    HTML:
    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%;
}
    Code (markup):
    Please check if it's semantically correct and if the CSS properties are the best to apply and why...

    Thank you for your help...
     
    co.ador, Sep 17, 2009 IP
  2. TheNoose

    TheNoose Peon

    Messages:
    1,005
    Likes Received:
    22
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Can you just put <center> tags right in the html around the list.

    <ul class="smallthumbs" >
    <center>
    <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>
    </center>
    </ul>

    It's not technically correct anymore, but if you don't care about having strict xhtml, then it won't matter.
     
    TheNoose, Sep 17, 2009 IP