1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Rep Power

    CSS + Table Coding Help - Can't Put Divs in Right Spot

    Could someone please help me out? Iím no webdesigner but trying to help my Dad  Iíve been trying on most of these for awhileand I just donít know what Iím doing wrong.

    Issues I couldnít figure out..
    ē This entire page (CSS coding below for all of it I really donít know what Iím doing)
    ē the right column isnít in the right spot
    ē I added a classifier on the table because another page got messed up and now this one wont work?
    ē nothing in the center of the page will line up nicely (not picky just want it to look decent), and Ive tried numerous coding combinations for the font on the left column.
    ē I figure some black or white shadows would make it show up better and should have been a simple concept??
    If you help please dumb it down when you explain, as well as show me the fix in fullÖI know its a lot but Iíve literally spent weeks on moving things aroundÖ

    CSS for page below
    Uploaded it to the web just for all the HTML to be visible

    #topblackborder {background-color:#000; height:10px; width:900px; }

    #leftblackborder {background-color:#000; height:1000px; width:10px; float:left;}
    #productsjapanesebeetlesleft {background-image:url(../images/Device.jpg); height:1000px; width:160px; float:left;}
    #productsjapanesebeetlesleft h1 {margin:3px; text-align:center; font-weight:bold; font-size:40px;}
    #productsjapanesebeetlesleft h2 {margin:3px; text-align:center; font-weight:bold; font-size:28px;}
    #productsjapanesebeetlesleft h3 {margin:3px; text-align:center; font-weight:bold; font-size:20px; color:#FFFFFF;}
    #productsjapanesebeetlesleft p {font-size:12px; margin:3px; text-align:center; font-weight:bold;}
    #leftwhiteborder {background-color:#FFF; height:1000px; width:15px; float:left;}

    table.japanesebeetle tr {width:530px; float:left; background-color:#000;}
    table.japanesebeetle, tr {font-size:9px; width:auto; height:auto; }
    table.japanesebeetle, tr p {font-size:12px; color:#FFFFFF; text-align:center; margin:auto 5px; }
    table.japanesebeetle, tr h1 {font-size:26px; color:#FFFFFF; text-align:center;}
    table.japanesebeetle, tr h2 {font-size:18px; color:#FFFFFF; text-align:center;}
    table.japanesebeetle, tr img {margin:5px 30px; }

    table.japanesebeetle, td {font-size:9px; width:auto; height:auto; }
    table.japanesebeetle, td p {font-size:12px; color:#FFFFFF; text-align:center; margin:auto 5px;}
    table.japanesebeetle, td h1 {font-size:26px; color:#FFFFFF; text-align:center; }
    table.japanesebeetle, td h2 {font-size:18px; color:#FFFFFF; text-align:center;}
    table.japanesebeetle, td img {border:2px #FFF solid; padding:5px;}

    #rightblackborder {background-color:#000; height:1000px; width:10px; float:right;}
    #productsjapanesebeetlesright {background-color:#159F49; height:1000px; width:160px; float:right;}
    #productsjapanesebeetlesright ul li {font-size:14px; list-style-type:circle; margin:7px 15px; text-align:center; font-weight:bold;}
    #productsjapanesebeetlesright h1 { text-align:center; }
    #rightwhiteborder {background-color:#FFF; height:1000px; width:15px; float:right;}

    #bottomblackborder {background-color:#000; height:10px; width:900px; }

    Thanks so much!
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    USA (verifiably)
    Rep Power
    Welcome to DevShed Forums, jjohnson6353.

    Are you talking about this page?

    For one thing, it looks like you don't understand how the comma works in selectors. It completely separates selectors, so you would need to restate the class if you want to apply a rule to multiple element types within an element, e.g. a <table>, that has a certain class.

    Also, you probably don't need to include "tr" or "td" as a simple selector when it's not the "key selector" (which in CSS3 is the right most simple selector, and in these cases are "p", "h1", "h2", and "img").

    I recommend you read these:
    Grouping and Nesting
    CSS Selectors

    Many of the people who know CSS here are primarily developers, not designers, so I don't know if you'll get much in the way of design advice.

    P.S. When posting code, please place it between [code][/code] tags.
    If you want to use the button to add the tags, paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog). Fortunately though, this forum is scheduled for a very badly needed upgrade.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo