|
HTML - Need Help To Align To Center (horizontal)
Hi Everyone,
I can't seem to figure out how to make my pages horizontaly align to the center of the screen. Seemed easy enough but can't seem to make it work. Here is one of those pages : http://www.ruze.ca/Kunstler/Homepage.html It would be amazing if one of you could tell me how to fix this. I'm by no means a web guy, I'm just trying to put up a temporary version of the site I'd like to have made by a real pro when I can afford it. Thanks! D. Similar TutorialsI can't get my whole nav bar to align to the center of my sidebar 1 div. Check it out please. http://northwindappaloosas.com Hello Guys, I have made some page with nested div's. I made it's width to 80%. I want that to be completely aligned to center of the page. I tried with css and with html and with parent div. But some thing makes it not to work. Can you see the below code and please suggest me to get that to center. HTML Code: <style type="text/css">
.nm-left { text-align:left; vertical-align:text-top; }
.nm-left .nm-video, .nm-right .nm-video-reverse, .nm-left .nm-avatar, .nm-left .nm-avatar-wrapper, .nm-left span.nm-button, .nm-left #user-form input#submit { float:left; }
.nm-right { text-align:right; vertical-align:text-top; }
.nm-right .nm-video, .nm-left .nm-video-reverse, .nm-right .nm-avatar, .nm-right .nm-avatar-wrapper, .nm-right span.nm-button, .nm-right #user-form input#submit { float:right; }
.nm-wrapper { clear:both; font-size:14px; line-height:21px; margin:20px 0; padding:0px; }
.nm-wrapper div { background-position:99% 10px; background-repeat:no-repeat; margin:0; padding:0; }
.nm-wrapper div div { }
.nm-wrapper div div div { overflow:hidden; }
#ninjamonials .nm-wrapper div div div div { background:transparent; padding:20px;}
#ninjamonials .nm-wrapper div div div div div { padding:0; }
blockquote.nm-summary div, blockquote.nm-testimonial div, blockquote.nm-summary, blockquote.nm-testimonial, blockquote.nm-summary p, blockquote.nm-testimonial p { background:transparent; border:none; padding:0; margin:0; text-decoration:none; font-style:normal; }
span.nm-button, #user-form input#submit { margin:5px; }
#user-form { background-position:left bottom; background-repeat:repeat-x; clear:both; font-size:14px; line-height:21px; margin-top:20px; padding:5px; }
.nm-testimonial, .nm-summary, .nm-author { padding-left:140px }
.nm-summary { font-weight:bold; }
.nm-author { display:block; font-size:12px; }
.nm-name { font-weight:bold; padding-right:5px; }
.nm-video, div.nm-video-reverse { margin:10px !important; }
.nm-audio, .nm-author { padding:5px !important; }
.nm-audio { display:block; }
.nm-name { font-style:italic; }
/* Oceanic Avatar-Specific CSS */
.nm-avatar { }
.nm-avatar img { background-color:#F7F7F7; border:1px solid #DBDBDB; margin:10px; padding:5px; }
/* Oceanic Module-Specific CSS */
.nm-module { overflow:hidden; margin: 5px; padding:4px!important; }
.nm-module div.nm-avatar img { }
.nm-module div.nm-avatar { }
/* Blue Style */
.nm-right.nm-oceanic-blue.nm-module, .nm-right.nm-oceanic-blue .nm-module { background:#EFF8FF url(oceanic_blue_tl.png) no-repeat -10px -10px; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-blue.nm-module, .nm-left.nm-oceanic-blue .nm-module { background:#EFF8FF url(oceanic_blue_nq.png) no-repeat -10px -10px; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-blue .nm-wrapper { background:#EFF8FF url(oceanic_blue_tl.png) no-repeat; color:#666; }
.nm-left.nm-oceanic-blue .nm-wrapper { background:#EFF8FF url(oceanic_blue_nq.png) no-repeat; color:#666; }
.nm-oceanic-blue .nm-wrapper div { background:url(oceanic_blue_tr.png) no-repeat 100% 0; }
.nm-oceanic-blue .nm-wrapper div div { background:url(oceanic_blue_bl.png) no-repeat 0 100%; }
.nm-oceanic-blue .nm-wrapper div div div { background:url(oceanic_blue_br.png) no-repeat 100% 100%; }
.nm-oceanic-blue #user-form { background-color:#EFF8FF; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-blue .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_blue_quote.png) no-repeat 10px 10px !important; }
/* Green Style */
.nm-right.nm-oceanic-green.nm-module, .nm-right.nm-oceanic-green .nm-module { background:#EBF4D7 url(oceanic_green_tl.png) no-repeat -10px -10px; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-green.nm-module, .nm-left.nm-oceanic-green .nm-module { background:#EBF4D7 url(oceanic_green_nq.png) no-repeat -10px -10px; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-green .nm-wrapper { background:#EBF4D7 url(oceanic_green_tl.png) no-repeat; color:#666; }
.nm-left.nm-oceanic-green .nm-wrapper { background:#EBF4D7 url(oceanic_green_nq.png) no-repeat; color:#666; }
.nm-oceanic-green .nm-wrapper div { background:url(oceanic_green_tr.png) no-repeat 100% 0; }
.nm-oceanic-green .nm-wrapper div div { background:url(oceanic_green_bl.png) no-repeat 0 100%; }
.nm-oceanic-green .nm-wrapper div div div { background:url(oceanic_green_br.png) no-repeat 100% 100%; }
.nm-oceanic-green #user-form { background-color:#EBF4D7; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-green .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_green_quote.png) no-repeat 10px 10px !important; }
/* Grey Style */
.nm-right.nm-oceanic-grey.nm-module, .nm-right.nm-oceanic-grey .nm-module { background:#EFEFEF url(oceanic_grey_tl.png) no-repeat -10px -10px; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-grey.nm-module, .nm-left.nm-oceanic-grey .nm-module { background:#EFEFEF url(oceanic_grey_nq.png) no-repeat -10px -10px; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-grey .nm-wrapper { background:#EFEFEF url(oceanic_grey_tl.png) no-repeat; color:#666; }
.nm-left.nm-oceanic-grey .nm-wrapper { background:#EFEFEF url(oceanic_grey_nq.png) no-repeat; color:#666; }
.nm-oceanic-grey .nm-wrapper div { background:url(oceanic_grey_tr.png) no-repeat 100% 0; }
.nm-oceanic-grey .nm-wrapper div div { background:url(oceanic_grey_bl.png) no-repeat 0 100%; }
.nm-oceanic-grey .nm-wrapper div div div { background:url(./images/oceanic_grey_br.png) no-repeat 100% 100%; }
.nm-oceanic-grey #user-form { background-color:#EFEFEF; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-grey .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(./images/oceanic_grey_quote.png) no-repeat 10px 10px !important; }
/* White Style */
.nm-right.nm-oceanic-white.nm-module, .nm-right.nm-oceanic-white .nm-module { background:#FFF url(oceanic_white_tl.png) no-repeat -10px -10px; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-white.nm-module, .nm-left.nm-oceanic-white .nm-module { background:#FFF url(oceanic_white_nq.png) no-repeat -10px -10px; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-white .nm-wrapper { background:#FFF url(oceanic_white_tl.png) no-repeat; color:#666; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-white .nm-wrapper { background:#FFF url(oceanic_white_nq.png) no-repeat; color:#666; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-oceanic-white .nm-wrapper div { background:url(oceanic_white_tr.png) no-repeat 100% 0; }
.nm-oceanic-white .nm-wrapper div div { background:url(oceanic_white_bl.png) no-repeat 0 100%; }
.nm-oceanic-white .nm-wrapper div div div { background:url(oceanic_white_br.png) no-repeat 100% 100%; }
.nm-oceanic-white #user-form { background-color:#FFF; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-white .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_white_quote.png) no-repeat 10px 10px !important; }
.nm-audio1 {padding:5px !important; }
.nm-summary1 {padding-left:140px }
</style>
<div id="ninjamonials" class="nm-oceanic-grey nm-left" style="width:80%">
<!--bof nm-wrapper -->
<div class="nm-wrapper">
<div>
<div>
<div>
<div class="nm-content">
<div class="nm-avatar-wrapper">
</div>
<blockquote
class="nm-testimonial">
<p>This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. </p>
<p>This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. </p>
</blockquote>
<div class="nm-author">
<span class="nm-name">Name</span>
(Website<span class="nm-title"></span>
~ <span class="nm-auth-url"><a
href="http://www.google.com/">www.google.com</a></span>
, <span class="nm-location">Mine</span>
) </div>
<!--eof nm-author -->
</div>
<!--eof nm-content -->
<!--eof wrapper -->
</div>
</div>
</div>
</div>
<div class="nm-wrapper">
<div>
<div>
<div></div></div></div></div></div>
Waiting for your solution. Thanks in advance! I have got a menu working but i don't know how to align it to the left center of the screen. at the moment it is at the top left of the screen. here is the code that i have got so far: HTML Code: <head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Demo Menu 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
<link rel="stylesheet" type="text/css" href="sddm.css" >
<title>JSwitch Slide Menu</title>
</head>
<body>
<div class="navbar" style="width: 148; height: 253;">
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem" >Demo Menu 1</div>
<div class="dropMenu" ><!-- -->
<div class="subMenu" style="display:inline;">
<div class="subItem"><a href="#">Configuration</a></div>
<div class="subItem"><a href="#">Tool Box</a></div>
<div class="subItem"><a href="#">Contact Us</a></div>
<div class="subItem"><a href="#">Sub Menu 4</a></div>
<div class="subItem"><a href="#">Sub Menu 5</a></div>
</div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<br>
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem" >Demo Menu 2</div>
<div class="dropMenu" ><!-- -->
<div class="subMenu" style="display:none;">
<div class="subItem"><a href="#">Configuration</a></div>
<div class="subItem"><a href="#">Sub Menu 2</a></div>
<div class="subItem"><a href="#">Sub Menu 3</a></div>
<div class="subItem"><a href="#">Sub Menu 4</a></div>
</div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<script type="text/javascript" src="xpmenuv21.js"></script>
</div>
<p> </p>
</body>
Hi! I've been struggling with a problem how to align a div to center and top of browser, but just simply can't seem to find a working solution. Here's an example page where I have aligned the site to top but it is not centered. http://www.marufox.net I am not working on that current site now, but still something similar, so the code can differ from what you see there. Any help will be greatly appreciated! i need text in a cell of a table had align - left so it is by default but the last string (signature) i'd like to have aligned to the right help please So I'm doing a website with horizontal menu that is centered. The page is 100% width, and the menu can be with or without fixed width. The menu is fine otherwise, but the sub items are not next to each other. This is because they only align the width of their parent. However, I'd like them to be centered under their parent regardless of how many sub items there are (so ultimately they could be as wide as the whole menu, provided there were enough sub items). So in the code I now have, the 3 sub items align so that 2 are inline, and the 3rd is under them. These should be inline, stretching over the width of their parent's width. Thanks for the help! Code: <body>
<div id="banner">
<div id="centeredmenu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item with Sub</a>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Long Sub Item 3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a></li>
</ul>
</div>
</div>
</body>
</html>
Code: #banner {
position: absolute;
width: 100%;
height: 100px;
top: 0;
}
#centeredmenu {
height: 55px;
float:left;
width:100%;
overflow:hidden;
position:relative;
top: 0px;
}
#centeredmenu ul {
float:left;
clear: both;
list-style:none;
margin:0;
padding:0;
position: relative;
left:50%;
text-align:center;
}
#centeredmenu li {
width: 180px;
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#centeredmenu a {
display:block;
margin:0 0 0 0px;
padding:0px 10px;
background:#C03;
color:#fff;
text-decoration:none;
}
#centeredmenu ul ul {
position: absolute;
width: 100%;
display: none;
z-index: 400;
}
#centeredmenu ul ul li {
position: relative;
width: 50%;
z-index: 500;
}
#centeredmenu ul li a:hover {
background: #C03;
color: #3FF;
}
#centeredmenu ul li:hover ul{
display: block;
}
As You Can see that the url i am providing includes stuff which is aligned left and i want to align it to center how can i do it . Guide me if there is an appropriate way to align it to center without changing the whole of the style sheet. http://www.ims-sc.org REGARDS i'm having no luck vertically aligning the text in the MIDDLE within the <td>. Notice how it is aligned TOP in the rollover state. See code below, please help. --- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>javascript free td link</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <style type="text/css"> #cell { width:278px; height:25px; } #cell2 { width:278px; height:25px; } a#roll { display:block; width:278px; height:25px; background:#FFFFFF; text-align:left; text-decoration:none; font-family:arial; font-size:14px; color:#FF0000; } a#roll:hover { background:#FF0000; color:#FFFFFF; } </style> </head> <body> <table border="0" cellpadding="1" cellspacing="0"> <tr> <td id="cell"><a id="roll"href="http://www.google.com"> HOME</a></td> </tr> <tr> <td id="cell2"><a id="roll"href="http://www.google.com"> ABOUT</a></td> </tr> </table> </body> </html> Hi there i am trying to center align and image and text as well as float the text to the left of the image. It seems I can only manage to do one or the other, the code below floats the text to the left of the image, but the two elements sit to the left on page. How can i center this? HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <center> <div id="spacer"></div> <div id="header"></div> <div class="row"> <div class="left"> <img src="ripple.jpg"/> </div> <div class="right"> <p class="bio">After leaving school I studied graphic design at Kingsway College of Art in London. During this time I learned the basics of the profession.</p> </div> </div> <ul id="minitabs"> <li><a href="Home.html">Home</a></li> <li><a href="Biography.html">Biography</a></li> <li><a href="Portfolio.html">Portfolio</a></li> <li><a href="Contact.html">Contact</a></li> <li><a href="About.html">Links</a></li> </ul> <div id="underline"></div> </center> </body> </html> CSS: Code: row { position: center; width: 800px;}
.left { width:400px; height: 330px; float: left; }
.right { width: 400px; height: 330px; float: left; }
#spacer {
width:800px;
height:12px;
background-color: #3366ff;
}
#header {
position:center;
width:800px;
height:75px;
background-image:url('images/portfolio.gif');
background-repeat:no-repeat;
}
/* Styles for nav bar */
#minitabs {
clear: both;
padding: 25px 0 14px 10px;
width: 800px;
}
#minitabs li{
margin-left: 0px;
padding: 0px;
display: inline;
list-style: none;
}
#minitabs a{
line-height: 14px;
font-weight: bold;
font-family: verdana;
margin: 0 10px 4px 0px;
text-decoration: none;
color: #777777;
}
#minitabs a.active,
#minitabs a:hover {
border-bottom: 10px solid #3366ff;
font-weight: bold;
padding-bottom: 5px;
color #ff6600;
}
/* Styles for images on Portfolio page */
#images1 {
clear: both;
margin-top: 25px;
padding: 0px 0px 10px 0px;
width: 800px;
}
#images1 li{
margin-left: 0px;
padding: 5px;
display: inline;
list-style: none;
}
#images2 {
clear: both;
margin-top: 25px;
padding: 0px 0px 10px 0px;
width: 800px;
}
#images2 li{
margin-left: 0px;
padding: 5px;
display: inline;
list-style: none;
}
#underline {
margin: -16px 100px;
width: 800px;
border-bottom: 1px solid;
color: #777777;
}
p.bio {
text-align: center;
width:500px;
font-family: verdana;
}
Any suggestions? Thank you Jackie I apologize if it is improper protocol to post a link rather than the actual code but since View>Source exists for seeing both the html and css code and there is a fair amount of code...here is the link: http://nicolemuller.com/IMS/FINAL/ne...al/signin.html I don't know what I'm doing wrong but I cant get all the elements in the 2 rows to align and center with the rule of the menu strip. Any help would be great-thanks! With the align attribute of <img> deprecated, can anyone tell me what the correct way of center-aligning an image should be? Thanks, James Not a major programmer but I needed to make a website. I am having a problem with my website where I have 5 pages, same structure, built with tables, all tables centered. In IE the tables align center on each page. But in Firefox --- 3 of the pages are different, lining up about 10 pixels left of center. Does anyone know how I can fix this problem? I have browsed around other sites as well and many of them have this problem. Any advice would be greatly appreciated. I know tables are horrible but thats all I know/can learn. Hello this is going to sound really basic so any way How do you style font to appear in the middle of your page using CSS as im aware you can either float left or right, am i right in saying you have to use padding? margins? to get it to be where u want it to sit? All I want is to have my image placed in the center of my web page... Every code I try doesn't work. The image is either at the top of the page or it doesn't stay in the center at different resolutions. Can someone help me? Below are the two sites I will use to explain my problem. For reference, I used Mozilla Firefox 3.08 and Google Chrome 1.0.154.53 in my tests. Example 1: http://www.irishbyname.com/example1.htm Example 2: http://www.irishbyname.com/example2.htm When browsing the site in a browser other than Internet Explorer, example 1 and example 2 center to different locations on the page. In example 1, I set the height of the content area to be 200 px tall. In example 2, I set the height of the content area to be 500 px tall. When I have example 1 open in one tab and example 2 open in another, I can alternate between the two tabs and see a visual difference in alignment. The HTML code on both pages is exactly identical with the exception of the height of the content area. Can anyone tell me why the horizontal page center changes based on the height of the page? Can anyone tell me how to change my HTML to make certain the page centers correctly no matter how tall the page is? Thanks for your help in advance. Hello, I've put the Code: <div align="center"> below the Code: <body> tag and closed it with the Code: </div> before the Code: </body> tag. The page doesn't center at all. Is looking fine in 1024x768 but in any bigger resolution, the page is aligned to the left. The page that I am talking for is this. Any idea? I dont know how to explain it better but how do i do this http://www.target.com/Movies-MMB/b/r...ode=1259488011 so at the bottom of my page i can add 4 to 5 different products and allow for those left and right buttons show more... any direction would help thanks Can't tell you how many hours I've spent trying to do this, but it's a lot! An example page with the issue can be found here.. http://www.funkimunkibadges.co.uk/geekybadges-c-79.html I'm basically trying to change it to be a horizontal scroll instead of vertical. Top image here is what happens when I expand the data in the central box. The lower image is when is as it is now.. http://www.flickr.com/photos/creepyd/5710648997/ I'm not really sure where the problem lies, my guess is the html. The piece of CSS which creates the vertical scrollbar is here.. Code: #indexProductList.centerColumn {
width: 630px ;
height: 680px !important; /*CENTER SCROLLBAR HEIGHT*/
overflow:auto;
padding:0px;
If I change the 'auto' above to 'hidden', the scrollbar goes away, so it's definitely that controlling it. The php which creates the 5 columns is here.. If I change it to + 0.5, the last one will wrap to the next line, and not create a horizontal scrollbar. However if I change it so each column is more than 100%, I get a horizontal scrollbar?! Code: $col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 0.5; Thanks so much for any help. Here's the html for the central table with the normal vertical scrollbar in place.. HTML Code: <td valign="top">
<!-- bof breadcrumb -->
<div id="navBreadCrumb"> <a href="http://www.funkimunkibadges.co.uk/">Home</a> ::
Careers & Hobbies
</div>
<!-- eof breadcrumb -->
<!-- bof upload alerts -->
<!-- eof upload alerts -->
<div class="centerColumn" id="indexProductList">
<h1 id="productListHeading">Careers & Hobbies</h1>
<div id="indexProductListCatDescription" class="content"> </div>
<form name="filter" action="http://www.funkimunkibadges.co.uk/index.php?main_page=index" method="get"><label class="inputLabel">Filter Results by:</label><input type="hidden" name="main_page" value="index" /><input type="hidden" name="cPath" value="113" /><input type="hidden" name="sort" value="20a" /><select name="alpha_filter_id" onchange="this.form.submit()">
<option value="0">Items starting with ...</option>
<option value="65">A</option>
<option value="66">B</option>
<option value="67">C</option>
<option value="68">D</option>
<option value="69">E</option>
<option value="70">F</option>
<option value="71">G</option>
<option value="72">H</option>
<option value="73">I</option>
<option value="74">J</option>
</select>
</form>
<br class="clearBoth" />
<div id="productListing">
<div id="productsListingTopNumber" class="navSplitPagesResult back">Displaying <strong>1</strong> to <strong>134</strong> (of <strong>134</strong> products)</div>
<div id="productsListingListingTopLinks" class="navSplitPagesLinks forward"> </div>
<br class="clearBoth" />
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2628"><img src="images/Be Nice Im In Charge Of The Pills.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2628"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=3165"><img src="images/Best Scrabble Player Ever.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=3165"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2663"><img src="images/Bowling Cutie.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2663"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2662"><img src="images/Bowling Cutie Black.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2662"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2664"><img src="images/Bowling Pins And Ball Red.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2664"></a><br /><br /></div>
<br class="clearBoth" />
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2665"><img src="images/Bowling Princess.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2665"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2666"><img src="images/Bowling Rocks.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2666"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2667"><img src="images/Bowling Strike.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2667"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2672"><img src="images/Camera On Blue.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2672"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2673"><img src="images/Camera On Pink.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2673"></a><br /><br /></div>
<br class="clearBoth" />
<div id="productsListingBottomNumber" class="navSplitPagesResult back">Displaying <strong>1</strong> to <strong>134</strong> (of <strong>134</strong> products)</div>
<div id="productsListingListingBottomLinks" class="navSplitPagesLinks forward"> </div>
<br class="clearBoth" />
</div>
</div>
</td>
Hi, How can I create a row of images with a horizontal scrollbar? I'd be really grateful to your help! Regards Rain Lover |
|||||||