Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Newbie needs some css help

    Hi,
    I am pretty new to html design. I am trying to create a template and I am having some issues with positioning divs I would appreciate any help very much. I did have the positions almost right but now they are all out of whack. Also, the positions differ in firefox and ie7. Can someone guide me in the right direction.

    Thanks

    Here is the page. http://ebay.brandonshaw.net/photos/E...An%20Argument/
    Last edited by bts_22; 01-10-2008 at 06:34 AM. Reason: left out something

  • #2
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts
    Inside the css for the "back to ebay" button, try something like:
    Code:
    text-align:left;

    Hope it works=]

    koss

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply. I tried that but still no luck. I have been reading css guides and such but I still am in the dark on why it is not working out for me.

  • #4
    New Coder
    Join Date
    Jun 2007
    Location
    Quebec, Canada
    Posts
    64
    Thanks
    4
    Thanked 3 Times in 3 Posts
    hi, i have messed with your css. with what i can see on your html, you use way too much useless classes and id's

    you could simply target childrens elements using the cascade : #heading img or #heading .goback (these are not your actual classes, just examples)

    here is your css, instead of over complicated positionning, i went with floating elements and adding a padding to fit in your design (not being outside). i did not clean anything but the best advice i could give you would be to start over with an empty document and stylesheet to understand what you are coding. from experience doing the same site 2-3-4-5 times were really good training and experience.

    Code:
    body {text-align:center;}
    td.bts {
        line-height : 13px;
        vertical-align : top;
        padding : 0;
    }
    table.bts {
        border : 0;
        border-collapse : collapse;
        line-height : 0;
    }
    a {
        color : #79c8ff;
        text-decoration : underline;
    }
    a:hover {
        text-decoration : none;
    }
    #caption {
        color:#000000;
    }
    #numberDisplay {
        color:#000000;
    }
    .footer {
        color : #fdfdfd;
    }
    .footer a {
        color : #79c8ff;
    }
    .footer b a {
        color : #fdfdfd;
        text-decoration : none;
    }
    .footer b a:hover {
        text-decoration : underline;
    }
    #title {
        text-align:center;
        padding-top:75px
    }
    #imagebox {
    }
    #imagebox2 {
        float:left;
        padding-top:100px;
        padding-left:60px
    }
    #textbox {
    }
    #textbox2 {
    }
    #logo {
        float:right;
        padding-right:20px;
        padding-top:75px
    }
    #logo2 {
    }
    #backbox {
        float:left;
        padding-top:100px;
        padding-left:20px
    }
    h1 {
        font-family : "Arial Rounded MT Bold", Georgia, "Times New Roman", Times, serif;
        font-size : 22px;
        font-weight : bold;
        color : #ffffff;
    }
    h2 {
        font-family : Geneva, Arial, Helvetica, sans-serif;
        font-size : 18px;
        font-weight : bold;
        color : #fa5a01;
        line-height : 18px;
        text-align: center;
    }
    h3 {
        font-family : "Arial Rounded MT Bold", Georgia, "Times New Roman", Times, serif;
        font-size : 16px;
        font-weight : bold;
        color : #ffffff;
        line-height : 0px;
    }
    .side {
        display:inline
    }
    table#b1 {
        width : 100%;
        height : 100%;
        line-height : 0px;
    }
    table#b3 {
        width : 747px;
        height : 100%;
        line-height : 0px;
    }
    img#b5 {
        padding-top:15px
    }
    td#b2 {
        width : 50%;
        height : 100%;
        line-height : 0px;
    }
    td#b4 {
        width : 747px;
        height : 349px;
        background : url(http://brandonshaw.net/ebay/template2/images/top.gif);
        line-height : 0px;
    }
    td#b6 {
        width : 747px;
        height : 362px;
        background-image : url(http://brandonshaw.net/ebay/template2/images/li.gif);
        background-position : top left;
        line-height : 0px;
    }
    td#b9 {
        width : 747px;
        height : 100%;
        background-image : url(http://brandonshaw.net/ebay/template2/images/bot1.gif);
        line-height : 0px;
    }
    td#b10 {
        width : 747px;
        height : 109px;
        background-image : url(http://brandonshaw.net/ebay/template2/images/bot.gif);
        line-height : 0px;
    }
    br#b7 {
        line-height : 20px;
    }
    br.b8 {
        line-height : 14px;
    }
    br.b11 {
        line-height : 25px;
    }
    p.stuff {
        font-family:Verdana, Arial, Helvetica, sans-serif, "Comic Sans MS";
        font-size:11px;
        color:#FFFFFF;
    }
    p#copyright {
        position:relative;
        top:20px;
        color:#FFFFFF;
    }
    PS. the only 'cleaning' i did came from prettyprinter.de, it was easier to read your code like this.
    PS2. i tested FF and IE6

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello bts_22,
    Have a look at it without the tables:
    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <meta name="" content="authored by http://nopeople.com/Design" />
    <style type="text/css">
    html, body {
    	background: #CCCCCC;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #container {
    	width: 747px;
    	margin: 0 auto;
    }
    #header {
    	height: 349px;
    	background: url(http://brandonshaw.net/ebay/template2/images/top.gif);
    }
    #title {height: 30px;
    padding: 75px 0 0 0;
    }
    	#title h1  {
    		color: #76B41C;
    		letter-spacing: 1px;
    		padding: 5px;
    		margin: 10px;
    		font: bold 18px Georgia, "Times New Roman", Times, serif;
    		text-transform: capitalize;
    	}
    	#title h2 {
    		font-family : Geneva, Arial, Helvetica, sans-serif;
    		font-size : 18px;
    		font-weight : bold;
    		color : #fa5a01;
    		line-height : 18px;
    		text-align: center;
    	}
    	.side { 
    		display:inline 
    	}
    		#back {
    			float: left;
    			margin: 100px 0 0 20px;
    		}
    		#ebay {
    			margin: 100px 0 0 0;
    		}
    		#logo {
    			float: right;
    			margin: 80px 20px 0 0;
    		}
    #content {
    	background: url(http://brandonshaw.net/ebay/template2/images/li.gif) repeat-y;
    	width: 707px;
    	padding: 0 20px;
    	overflow: auto;
    }
     	#content #w1 {
    		margin: 0 0 20px 0;
    	}
    	#front {
    		float: left;
    		margin: 5px;
    	}
    	#book_back {
    		float: left;
    		margin: 5px;
    	}
    #footer {
    	width: 747px;
    	height: 109px;
    	clear: both;
    	background: url(http://brandonshaw.net/ebay/template2/images/bot.gif);
    }
    
    </style>
    </head>
    <body>
        <div id="container">
        	<div id="header">
            	<div id="title"><h1 class="side">Everythings An Argument</h1><h2 class="side">(2 images)</h2></div>
                    <img src="http://ebay.brandonshaw.net/template2/images/back.gif" alt="back arrow" width="178" height="118" id="back" />
                    <img src="http://brandonshaw.net/ebay/template2/images/logo.gif" width="178" height="100" alt="trusted logo" id="logo" />
                    <img src="http://www.yceml.net/0536/10466840-1.gif" width="234" height="60" alt="my ebay listings" id="ebay" />
            <!--end header--></div>
    <div id="content">
        <img src="http://brandonshaw.net/ebay/template2/images/5_w1.gif" alt="line" width="666" height="22" id="w1" />
        <img src="http://ebay.brandonshaw.net/photos/Everythings%20An%20Argument/thumbnails/img_0162.jpg" alt="front of book" width="150" height="126" id="front" />
        <img src="http://ebay.brandonshaw.net/photos/Everythings%20An%20Argument/thumbnails/img_0168.jpg" alt="back of book" width="150" height="139" id="book_back" />
    <!--close content--></div>
    <div id="footer"></div>    
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a million to you all. I almost had it right but now I ran into another problem. The margins of the content area are alot different in ie7 and firefox. You can see the difference in the new page here http://ebay.brandonshaw.net/template2/Untitled-4.html

  • #7
    New Coder
    Join Date
    Jun 2007
    Location
    Quebec, Canada
    Posts
    64
    Thanks
    4
    Thanked 3 Times in 3 Posts
    Hello, it seems that you have fixed the margin problem, because IE7 and FF looks the same to me!

    In the mean time, I would like to sugget that all those tables are not needed, and if you want to position your site in a table, you can do it with ONE table and THREE rows. One row for the header, one for the content, and one for the footer.

    Also, your HTML was not valid at all against w3c specs. You included a XHTML Transitional DTD. I spent some time to get your HTML to validate. Have a look at your current HTML : http://validator.w3.org

    Add this to your css (Of course, if you already have a body selector in there, fit the background:#fff; in there):
    Code:
    body { background:#fff }
    here is the html, i did not remove useless classes or id's, nor useless tables, but it validates:
    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>rebate / January 2008 / YoSmo.com Auction Images</title>
    <link href="css/template.css" rel="stylesheet" type="text/css" />
    <link href="scripts/lightbox/lightbox.css" rel="stylesheet" media="screen" type="text/css" />
    <link href="http://ebay.brandonshaw.net/template2/style2.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="scripts/lightbox/prototype.js"></script>
    <script type="text/javascript" src="scripts/lightbox/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="scripts/lightbox/lightbox.js"></script>
    </head>
    <body>
    <table class="bts" id="b1">
    <tr>
    <td class="bts" id="b2"><table class="bts" id="b3" align="center">
    <tr>
    <td class="bts" id="b4"><div id="title">
    <h1 class="side"> Everythings An Argument </h1> <h2 class="side">(2 images)</h2>
    </div>
    <table class="bts">
    <tr>
    <td class="bts" width="532" height="200"><div id="backbox">
    <a href="javascript:history.go(-1);"><img src="http://ebay.brandonshaw.net/template2/images/back.gif" alt="Go back to Ebay" />
    </a>
    </div>
    <div id="imagebox2"> <a href="http://rover.ebay.com/rover/1/711-1751-2978-376/1?aid=10466840&amp;pid=2799320&amp;mpre=http%3A%2F%2Fsearch.ebay.com%2F_W0QQsassZyosmo_com" target="_top" onmouseover="window.status='http://affiliates.ebay.com';return true;">
    <img src="http://www.tqlkg.com/image-2799320-10466840" width="234" height="60" alt="Sell your item on eBay!" border="0" /></a></div>
    </td>
    <td class="bts" width="215" height="200"><img src="http://brandonshaw.net/ebay/template2/images/logo.gif" id="logo" alt="" border="0" /><br />
    <img src="http://brandonshaw.net/ebay/template2/images/logo_paypal_verified.gif" id="b5" alt="" /> </td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td class="bts" id="b6"><table class="bts">
    <tr>
    <td class="bts" width="44" height="362"></td>
    <td class="bts" width="666" height="362"><img src="http://brandonshaw.net/ebay/template2/images/5_w1.gif" alt="" border="0" /><br />
    <br />
    <div id="container">
    <div id="gallerycontainer">
    <div class="thumbnail">
    <a class="thumbnailhover" title="This is the front of the book" rel="lightbox[258]" href="images/img_0162.jpg"><img src="thumbnails/img_0162.jpg" title="This is the front of the book" alt="This is the front of the book" width="150" height="126" border="0" />
    This is the front of the book</a>
    </div>
    <div class="thumbnail">
    <a class="thumbnailhover" title="This is the back of the book!" rel="lightbox[258]" href="images/img_0168.jpg"><img src="thumbnails/img_0168.jpg" title="This is the back of the book!" alt="This is the back of the book!" width="150" height="139" border="0" />
    This is the back of the book!</a>
    </div>
    </div>
    </div>
    </td>
    <td class="bts" width="37" height="362"></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td class="bts" id="b9"><table class="bts">
    <tr>
    <td class="bts" id="b10" align="center"><br id="b11" />
    <p id="copyright">2008 &copy; Copyright <a href="http://brandonshaw.net/">BrandonShaw.net</a>. All rights reserved.</p>
    <br />
    </td>
    </tr>
    </table></td>
    </tr>
    </table></td>
    </tr>
    </table>
    </body>
    </html>
    All the 'bts' classes are pretty much useless, same with almost every - as it seems to be - auto id's, given by a WYSIWYG editor such as Dreamweaver, could be ditched. If you need em to target anything particular, you should do it manually and using an id name that MEANS something.

  • #8
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I getting on the right track now maybe. I finished it all up and uploaded my html to ebay for my new template but it ends up a little messed up espessially in ie7. Before it gets to ebay it looks fine though. Here is my ebay listing.

    http://cgi.ebay.com/ws/eBayISAPI.dll...MESE:IT&ih=001

    Can one of you have a quick look at it. Thanks

  • #9
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok it just needs to be centered in ie7 now.

  • #10
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts
    html
    <center></center>

    html div
    <div align="center"></div>

    style div
    <div style="alignment:center;"></div>

    Or Just syle code for in the classes or Id Styles

    alignment:center;

    i hope that works for you if you need any more ways just ask lol

  • #11
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by barkermn01 View Post
    style div
    <div style="alignment:center;"></div>

    Or Just syle code for in the classes or Id Styles

    alignment:center;
    There is no such thing as this CSS property. Just saying.

  • #12
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts
    oops could have sworn there was my bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •