Mon, 2013-11-25 02:17
Hi, I am new to CSS and not knowing where to begin, downloaded a template which was close to the design I was looking for. I have used HTML for around 10 years on and off. I have been able to change the CSS sheet and template to the way I want it, but am having layout issues. I have uploaded one page of the site so if you can have a look and if you have a solution I would be very appreciative.
http://www.royalcoinsandbanknotes.com.au/adb100.html
| Attachment | Size |
|---|---|
| CSS Stylesheet.txt | 12.9 KB |
Mon, 2013-11-25 03:09
#1
What layout issues are you
What layout issues are you having?
Thu, 2013-11-28 23:38
#2
Layout Issues
Hi Tony,
Basically the images are not lining up. I've attached an image of the webpage.
I have created a number of pages and this layout problem persists through all of them, but not always at the same point, some are worse than this page. Every page is exactly the same code only the images and some of the text changes. The number of images on each page can vary from around 20 to 50. Could there be somewhere in the Stylesheet that dictates a limit to the number of images it will support? I don't know where to find this information if it is at all relevant.
I attached the CSS stylesheet in my original post.
I'm not sure how to fix this and if you can give me any suggestions that would be great. Thank you for taking the time to reply to my dilemma.
Fri, 2013-11-29 00:35
#3
Instead of floating them try:
Instead of floating them try:
.prod_box { width: 173px; height: auto; padding: 10px 10px 10px 11px; box-sizing: border-box; display: inline-block; }
Fri, 2013-11-29 02:01
#4
Layout Issue
Hi Tony,
I tried what you suggested, but it didn't work - I need to have 3 prod boxes across. The result was all prod boxes lined up under each other.
Any other suggestions?
Thank you for your advice so far.
Fri, 2013-11-29 03:55
#5
That's strange, what browser
That's strange, what browser are you using?
Did you replace your code with mine including the box-sizing ?
It works for me in chrome and should work in all modern browsers.
Tue, 2013-12-10 03:00
#6
Getting there YAY!!
Hi Tony,
Ok have Chrome working now as the Default Internet Brower and yes it does appear to show the layout of the Prod Box correctly in the Chrome Browser (but only with your editing of the code).
Unfortunately, I may be using an old HTML editor (acehtml) which I have used for many years now, so even though it appears that when I "view" the webpage within the editor that it uses chrome, it does not show the layout correctly. The only internal browsers that it lists is IE, Netscape and Mozilla, but I can nominate "other browser" which I did.
Can you suggest a HTML editor that will work with chrome and display the webpage accurately, as without that accurate visual I will have no idea if the code is right.
These is another part of this that appears to have layout issues. I will try to work it out, but if I can't, could I trouble you again for help.
Thank you for your help.
Wed, 2013-12-11 03:51
#7
Another Layout Issue
Since changing the Prod Box area to suggested code and using Chrome instead of IE the webpage is working fine, but I now have a layout issue with another webpage that is linked to each image on this page. This is the Details and Payment page.
Below is the code but not sure how this will work for you without the images.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Australian $1 - Details</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <link rel="stylesheet" type="text/css" href="style.css" /> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="iecss.css" /> <![endif]--> <script type="text/javascript" src="js/windowopen.js"></script> <script type="text/javascript" src="js/boxOver.js"></script> </head> <body> <div id="main_container"> <div class="top_bar"> <div class="top_search"> <div class="search_text"><a href="http://www.royalcoinsandbanknotes.com.au">Advanced Search</a></div> <input type="text" class="search_input" name="search" /> <input type="image" src="images/search.gif" class="search_bt"/> </div> <div id="header"> <div style="text-align: center"> <div id="logo"> <img src="images/royalbanner.png" border="0" width="700" height="140" alt=""></a> </div></div> <!-- end of oferte_content--> </div> <div id="main_content"> <div id="menu_tab"> <div class="left_menu_corner"></div> <ul class="menu"> <li><a href="test index.html" class="nav1">Home</a></li> <li class="divider"></li> <li><a href="tos.html" class="nav2">Terms of Service</a></li> <li class="divider"></li> <li><a href="faq.html" class="nav3">FAQ's</a></li> <li class="divider"></li> <li><a href="research.html" class="nav4">Research</a></li> <li class="divider"></li> <li><a href="grading.html" class="nav5">Grading</a></li> <li class="divider"></li> <li><a href="myaccount.html" class="nav6">My account</a></li> <li class="divider"></li> <li><a href="signup.html" class="nav7">Sign Up</a></li> <li class="divider"></li> <li><a href="contact.html" class="nav8">Contact Us</a></li> <li class="divider"></li> </select> </li> </ul> <div class="right_menu_corner"></div> </div> <!-- end of menu tab --> <div class="left_content"> <div class="title_box">Categories</div> <ul class="left_menu"> <li class="odd"><a href="ausbn.html">Australia Banknotes</a></li> <li class="even"><a href="ausebn.html">Australia Error Banknotes</a></li> <li class="odd"><a href="auscoins.html">Australia Coins</a></li> <li class="even"><a href="ausemsc.html">Australia Error & Mis-strike Coins</a></li> <li class="odd"><a href="ausvc.html">Australia Variety Coins</a></li> <li class="even"><a href="wbn.html">World Banknotes</a></li> <li class="odd"><a href="wc.html">World Coins</a></li> <li class="even"><a href="ac.html">Ancient Coins</a></li> <li class="odd"><a href="ip.html">Investment Portfolio</a></li> <li class="even"><a href="auswt.html">Australia & World Tokens</a></li> <li class="odd"><a href="ram.html">RAM & Perth Mint Products</a></li> <li class="even"><a href="ausbp.html">Australia Bullion Prices</a></li> </ul> <div class="title_box">Other Links</div> <div class="border_box"> <div class="product_img"><a href="ebay.html">Our Ebay</div> <div class="product_img"><a href="accessories.html">Accessories</div> <div class="prod_price"><span class="reduce"></span></div> </div> <div class="title_box">Newsletter</div> <div class="border_box"> <input type="text" name="newsletter" class="newsletter_input" value="your email"/> <a href="http://all-free-download.com/free-website-templates/" class="join">join</a> </div> <div class="banner_adds"> </div> </div> <!-- end of left content --> <div class="center_content"> <div class="center_title_bar">Australia $100 Note - <a href="adb100.html">Stock No.: ADB0001</a><font face="Arial" size="1" color="#050000">(Click to return to $100 Note Listing)</font></div> <div class="prod_box_big"> <div class="top_prod_box_big"></div> <div class="center_prod_box_big"> <div style="text-align: center"> <div class="product_img_big"> <a href="javascript:popImage('images/bigADB0001a.jpg','ADB0001 $100 Front')" title="header=[Zoom] body=[ ] fade=[on]"><img src="images/ADB0001a.jpg" alt="front" border="0" /></a> </div> <div class="product_img_big"> <a href="javascript:popImage('images/bigADB0001ai.jpg','ADB0001 $100 Back')" title="header=[Zoom] body=[ ] fade=[on]"><img src="images/ADB0001ai.jpg" alt="Back" border="0" /></a> </div> <div class="product_img_big"> <a href="javascript:popImage('images/bigADB0001b.jpg','ADB0001 $100 Front')" title="header=[Zoom] body=[ ] fade=[on]"><img src="images/ADB0001b.jpg" alt="Front" border="0" /></a> </div> <div class="product_img_big"> <a href="javascript:popImage('images/bigADB0001bi.jpg','ADB0001 $100 Back')" title="header=[Zoom] body=[ ] fade=[on]"><img src="images/ADB0001bi.jpg" alt="Back" border="0" /></a> </div></div> <div class="details_big_box"> <div style="text-align: center"> <div class="product_title_big">Stock No.: ADB0001<br>1984 Stone/Johnston, Very Scarce, First Prefix, UNC, Consecutive Pair <br>Serial #: ZAA 914770 & ZAA 914771</div></div> </div> <div style="text-align: left"> <div class="prod_price_big"> <span class="price">Price: $1,490.00</span></div></div> <div style="text-align: left"><form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="BBNZ5L57K8ZJN"> <table> <tr><td><input type="hidden" name="on0" value="Add to Cart">Add to Cart</td></tr><tr><td><select name="os0"> <option value="Price">Price $1,490.00 AUD</option> </select> </td></tr> </table> <input type="hidden" name="currency_code" value="AUD"> <input type="image" src="https://www.paypalobjects.com/en_AU/i/btn/btn_cart_SM.gif" border="0" name="submit" alt="PayPal — The safer, easier way to pay online."> <img alt="" border="0" src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif" width="1" height="1"> </form></div> </div> <!-- end of center content --> </div> <!-- end of main content --> <div class="footer"> <div class="left_footer"> <img src="images/RCAB Logo New.png" alt="" width="87" height="116"/> </div> <div class="center_footer"> Royal Coins and Banknotes. <br>All Rights Reserved 2013<br /> <img src="images/payment.gif" alt="" /> </div> <div class="right_footer"> </div> </div> </div> <!-- end of main_container --> </body> </html>
I have provided a couple of screen shots. 1st one is how it comes out in Chrome. 2nd one is how we would like the page to look (except for moving the image over to the left).
Any help would be greatly appreciated.
Wed, 2013-12-11 04:19
#8
Hi rcab2013, Try removing the
Hi rcab2013,
Try removing the float:left from .details_big_box
Thu, 2013-12-12 01:58
#9
Hi Tony
Tried your suggestion, but it didn't work. It pushed all the red writing up beside the images.
Fri, 2013-12-13 05:30
#10
try using fixed height
instead of height:auto, make it a fixed one. Height around 170px fixes up the issue. The issue is due to floats though.