CSS coding help – html mock up

  • Please excuse first post errors if I make any.

    I have been following the theme creation guide at
    https://designreviver.com/tutorials/premium-wordpress-theme-design-part-2-html-css-wordpress-theme-files/

    I’ve got a nice design in .psd and began working on the style css and html mock up. Got almost to the end when I ran into trouble and a problem I can’t manage to figure out.
    The repeating section of my sidebar is misalinged with the top of the sidebar in the header and the foot of the sidebar. Tried everything I can think of to get the bits to line up but with no success.
    My style sheet code is
    ‘body
    {
    background: #000000 url(‘./images/jpgs/background.jpg’) fixed no-repeat bottom center;
    margin: 0px;
    padding: 0px;
    text-align: center;
    }

    h1, h2, h3, ul, li, p, form
    {
    margin: 0px;
    padding: 0px
    }

    hr
    {
    display: none;
    }

    a{
    text-decoration:none;
    }

    a:hover{
    text-decoration:underline;
    }

    .space
    {
    clear: both;
    }

    #page
    {
    margin: 0px auto;
    padding: 0;
    width: 959px;
    }

    #header
    {
    background: url(‘./images/pngs/images/header959x308.png’) no-repeat top left;
    height: 308px;
    width: 959px;
    text-align: center;
    }

    #headerimg
    {
    height: 185px;
    margin: 0px;
    padding: 0px 0px 0px 45px;
    text-align: left;
    }

    #top_nav
    {
    height: 45px;
    padding-left: 70px;
    text-align: left;
    }

    #top_nav ul
    {
    list-style: none;
    }

    #top_nav li
    {
    display: inline;
    }

    #top_nav li a:hover
    {
    background:url(‘./images/pngs/images/hover.png’) no-repeat bottom center;
    }
    #top_sidebar
    {
    color: #fff;
    font-weight: bold;
    height: 10px;
    padding-right: 155px;
    text-align: right;
    }
    #content
    {
    background: url(‘./images/pngs/images/cont621x20.png’) repeat-y top left;
    float: left;
    text-align: left;

    }

    .blogcontent, .widecolumn
    {
    float: left;
    padding: 10px 0px;
    width: 635px;
    }
    .blogcontent form
    {
    color: #fff;
    padding: 10px 50px 0px 90px;
    }
    .blogcontent input
    {
    background-color: transparent;
    border: 1px solid #214b73;
    color: #fff;
    }

    .blogcontent #searchsubmit
    {
    background: #b1b1b1;
    color: #214b73;
    font-weight: bold;
    padding: 2px;
    }
    .blogcontent h2
    {
    color: #fff;
    font: bold 18px Georgia, Arial;
    padding: 0px 50px 0px 90px;
    }

    .blogcontent small a
    {
    font-size: 18px;
    padding: 0px 50px 0px 90px;
    }

    .post
    {
    padding: 0px 50px 0px 90px;
    text-align: left;
    }

    .post h2
    {
    color: #fff;
    padding: 0px;
    }

    .post .post_title
    {
    float: left;
    width: 90%;
    }

    .post_title h2, a
    {
    color: #b31414;
    font: normal 24px Georgia, Arial;
    padding: 0px;
    margin: 0px;
    }

    .post_title a
    {
    text-decoration: none;
    }

    .post_title a:hover
    {
    color: #fff;
    }

    .post_title small
    {
    color: #385673
    font: normal 12px Georgia, Arial;
    }

    .post_title small a
    {
    color: #385673;
    font: normal 12px Georgia, Arial;
    padding: 0px;
    margin: 0px;
    }

    .post .postmetadata
    {
    background: url(‘./images/pngs/images/bg-45×58.png’) no-repeat top left;
    float: right;
    height: 34px;
    padding: 12px 10px;
    width: 25px;
    }

    .postmetadata a
    {
    color: #416fa3;
    text-decoration: none;
    }

    .postmetadata span
    {
    color: #416fa3;
    font: normal 24px Georgia, Arial;
    padding-left:5px;
    }

    .entry
    {
    color: #c3c3c3;
    font: normal 12px Arial;
    padding: 20px 0px;
    }

    .entry a
    {
    color: #385673;
    font: normal 12px Georgia, Arial;
    padding: 0px;
    margin: 0px;
    }

    .entry a:hover
    {
    color: #69c;
    }

    .entry blockquote
    {
    border: 2px dashed #042748;
    padding: 8px;
    }

    .entry img
    {
    float: left;
    padding: 0px 20px 0px 0px
    }

    .entry ul
    {
    padding-left: 20px
    }

    .entry li
    {
    list-style: url(‘./images/pngs/images/bull-list.png’);
    }

    .entry ol li
    {
    list-style: decimal;
    }

    .entry p
    {
    text-align: justify;
    padding: 0px;
    }

    .entry span
    {
    color: #b31414;
    }

    #sidebar
    {
    background: url(‘./images/pngs/images/sidecont338x20.png’) repeat-y top left;
    float: left;
    padding: 0px 20px;
    text-align: left;
    width: 285px;
    }

    #sidebar ul
    {
    list-style: none;
    margin: 0px;
    padding: 5px 0px
    }

    #sidebar li
    {
    margin: 0px;
    padding: 0px 0px 0px 20px;
    }

    #sidebar li h2
    {
    color: #fff;
    font: normal 18px Rockwell, Georgia, Arial;
    margin: 0px;
    padding: 10px 0px;
    }

    #sidebar ul ul
    {
    list-style: none;
    margin: 0px;
    }

    #sidebar ul ul li
    {
    margin: 0px;
    padding: 0px 0px 0px 30px;
    }

    #sidebar ul ul li a
    {
    color: #69c;
    font: normal 12px Arial;
    text-decoration: none;
    }

    #sidebar ul ul li a:hover
    {
    color: #b31414;
    }

    .bottom_sidebar
    {
    background: no-repeat bottom center;
    float: right;
    padding: 0px 0px 0px 15px;
    height: 32px;
    text-align: left;
    width: 338px;
    }
    .post .postmetadata{ background: url(‘./images/pngs/images/bg-45×58.png’) no-repeat top left; float: right; height: 34px; padding: 12px 10px; width: 25px;}
    #search
    {
    font: bold 12px Arial;
    color: #fff;
    padding: 0px 0px 5px 5px;
    }

    #search input
    {
    background-color: transparent;
    border: 1px solid #214b73;
    color: #fff;
    }

    #search #searchsubmit
    {
    background:#0B192C;
    color: #FFFFFF;
    font-weight: bold;
    padding: 0px;
    }

    #footer
    {
    background: url(‘./images/pngs/images/footer959x194.png’) no-repeat top left;
    color: #fff;
    height: 194px;
    text-align: left;

    width: 959px;
    }

    #footer .column1
    {
    float: left;
    font: normal 10px Arial;
    padding: 0px 0px 0px 80px;
    width: 300px;
    }

    .column1 .bottom
    {
    padding: 50px 0px 0px 40px;
    }

    .column1 a
    {
    color: #fff;
    font: normal 12px Arial;
    text-decoration: none;
    }

    #footer .column2
    {
    float: left;
    font: normal 12px Arial;
    padding: 35px 0px 0px 0px;
    width: 250px;
    }

    .column2 h2
    {
    color: #457db9;
    font: normal 20px Rockwell;
    }

    .column2 ul
    {
    list-style: none;
    }

    .column2 a
    {
    color: #fff;
    font: normal 12px Arial;
    text-decoration: none;
    }’

    And my html file is

    <html>
    <head>
    <title>American Gospels</title>
    <link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” />
    </head>
    <body>
    <div id=”page”>

    <div id=”header”>
    <div id=”headerimg”>
    <img alt+”American Gospels” border=”0″ src=”./images/pngs/images/logo698x246.png” />
    </div>

    <div id=”top_nav”>

    </div>

    </div> <!–End of “header”–>
    <div id=”content”>

    <div class=”blogcontent”>
    <div class=”post”>
    <div class=”post_title”>
    <h2>Sample Post</h2>

    <small>November 2nd, 2008 | by admin | Lorem ipsum| Category 1| Uncategorized</small>

    </div> <!–End of “post title”–>
    <div class=”postmetadata”>
    <!–Comments–>

    2

    </div>
    <br class=”space” />

    <div class=”entry”>
    <p>

    <img class=”alignleft” title=”pic-02″ src=”images/jpgs/pic-01.jpg” border=”0″ alt=””/>

    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
    </p>

    Read more »
    </p>
    </div> <!–End of “entry”–>

    </div> <!–End of “post”–>
    </div> <!–End of “blogcontent”–>
    <div id=”sidebar”>

      <li class=”categories”>
      <h2>Categories</h2>

    <li class=”archives”>
    <h2>Archives</h2>

    <li class=”linkcat”>
    <h2>Blogroll</h2>
    <ul class=’xoxo blogroll’>

    • Development Blog
    • Themes
    • WordPress Planet

      • <!–End of sidebar’s list–>

      <div id=”search”>
      <form>
      <label class=”hidden”>Search for:</label>
      <div>
      <input type=”text” value=”” name=”s” id=”s” />
      <input type=”submit” id=”searchsubmit” value=”Search” />
      </div>
      </form>
      </div> <!–End of “search”–>

      </div> <!–End of “sidebar”–>

      <div class=”bottom_sidebar”>
      <img alt=”0″ border=”0″ src=”./images/pngs/images/rss338x126.png” />
      </div>
      </div> <!–End of “content”–>
      <br style=”clear: both;” />

      <div id=”footer”>
      <div class=”column1″>
      Author

      Author’s link
      License
      <div class=”bottom”> <img alt=”” border=”0″ src=”./images/pngs/images/creator205x71.png” />
      </div>
      </div>
      <div class=”column2″>
      <h2>Recent posts</h2>

    </div>

    <div class=”column2″>
    <h2>Pages</h2>

    </div>
    </div>
    </div> <!–End of “page”–></body>
    </html>’

    Am I missing anything really obvious? Not got any real knowledge of CSS (or html for that matter) but am trying to pick it up as I go along so nothing too technical please.

Viewing 2 replies - 1 through 2 (of 2 total)

  • Please don’t post huge chunks of code here. For larger blocks of code, use the WordPress pastebin. It makes life easier for everyone. In this case, a link to your site would be helpful.

    Toy

    (@toyvalentine)

    I know this was posted a long time ago but hopefully this might help somebody as I was having the same problem.

    After following the tutorial, I could not get the repeating sections to line up with my header and footer, only by a tiny amount but enough to notice.

    When messing around with the html/css didn’t help, I thought the problem might be with my cropping in Photoshop, not the code as I think that some of the inside guides aren’t 100% accurate.

    Instead of cropping each section individually, choose a large header section with a width of 960 but a height all the way down to the bottom of the side bar.

    Crop down to get your repeating content box section, cropping only from the inside edge (so the left hand side for the content box and the right hand side for the sidebar). Then step backwards and repeat for the sidebar repeating section and then again for the bottom sidebar section, always starting from your original large header section.

    You should always go by the 960 guide lines as these seem to be accurate.

    I hope this makes sense- it worked for me, anyway.

    Also, while I am extremely new to working properly with html & css, I believe that there is a close div tag missing from the included html as I could not get my repeating content box section to stop repeating, all the way to the bottom of the page.

    Changing the <div class=bottom_sidebar”> section to the code beneath seemed to fix this.

    <div class=”bottom_sidebar”> <img alt=”0″ border=”0″ src=”./images/pngs/rss.png”> </div></div><!–End of “content”–>

    Not sure if this matters for the html-WordPress section as I haven’t got that far yet but I spent ages trying to figure out what it was (newbie that I am) so this may save someone else some time!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS coding help – html mock up’ is closed to new replies.