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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stuck on some CSS code for my first theme, please help

    Hi Everyone - This is my very first time to the forum (happy to be here!); nice to meet you all. I'm in the process of attempting, hair-pulling-out and all, to hand-code and hand-design my first WordPress theme.

    I'm creating it in HTML first and then trying to convert it to a dynamic WP theme later (as was recommended) and I'm pretty close to happy with it but I'm stuck on 6 or 7 little CSS tweaks I can't quite figure out (I'm still VERY new to all of this coding stuff and am all self-taught). I'm wondering if someone could take a look at them and make some recommendations for me? I think they'll be easy to fix for someone who knows what they're doing (that's just not me).

    Anywayyy - the theme is here: http://www.tookmedia.com/test/ and here are the things I need to figure out:

    1. I want to move the categories list ("craft beer news", "fun beer stuff", etc.) down a bit from the top of the black background and move them to the left, so they start flush with the left side border.

    2. You'll notice the date displayed on the right (after the first line of each "post") inside a background button of sorts. I would like that to display above the post content in the white space on the right, adjacent/parallel to the title.

    3. At the end of each post, there's the common "read more" and "X comments" buttons. The first one -- "read more" -- is where I want it but I'd like the comments button to be displayed in line with the "read more" button (with like 10px between them), not below it.

    4. How do I get the background & left border of the sidebar to display all the way to the footer (right now they each stop after the content stops)?

    5. How do I get the left & right sidebars (right now they have the titles "links" and "fun stuff") to display on an even plane with one another?

    6. In the index.html code, there's a small image which is supposed to be displayed on the right sidebar above the dummy text which is there right now, but it's not appearing and I'm not sure why...

    Thanks so much for the help everyone! Can't wait to get a better handle on this coding stuff and to become a part of the forum & community!

    Cheers,
    Luke

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    HelloTtookMedia,
    Welcome to CodingForums.com!

    1. I want to move the categories list ("craft beer news", "fun beer stuff", etc.) down a bit from the top of the black background and move them to the left, so they start flush with the left side border.
    Try changing the bits highlighted in red -
    Code:
    body {
                 background-color: #161617;
                 font-size: 12px;
    	     font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
    	     margin: 0px auto 0px;
    	     padding: 0px;
    	     
    }
    * {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    }
    #wrapper {
                 width: 1000px;
                 background-color: #ffffff;
                 margin: 0px auto 0px;	     
    }
    
    /************************************************
    *	Pages                                                                            *
    ************************************************/
    
    #pages {
    	background-image: url(/test/images/pages.jpg);
    	width: 1000px;
    	height: 30px;
    	margin-top: 10px;
    	font-size: 12px;
    	font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
    	color: #FFFFFF;
    	font-weight: bold;
    	overflow: hidden;
    	}
    	
    #pages ul li a {
    	font-size: 11px;
    	font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
    	color: #FFFFFF;
    	margin: 0px -3px 0px 0px;
    	padding: 7px 14px 6px 12px;
    	font-weight: bold;
    	text-decoration: none;
    	border-left: 1px solid #000000;
    }	
    	
    #pages a {
    	color: #FFFFFF;
    	font-size: 12px;
    	text-decoration: none;
    	text-transform: uppercase;
    	padding: 0px 0px 0px 3px;
    	}
    	
    #pages a:hover {
    	color: #FFFFFF;
    	text-decoration: underline;
    	}
    	
    #pages p {
    	color: #FFFFFF;
    	margin: 0px auto 0px;
    	padding: 0px 0px 0px 10px;
    	font-weight: bold;
    	}
    	
    #pagesleft {
    	background-image: url(/test/images/pages.jpg);
    	width: 1000px;
    	float: left;
    	padding: 8px 0px 8px 0px;
    	}
    	
    #pages ul {
    	}
    	
    #pages li {
    	display: inline;
    	list-style-type: none;
    	}
    	
    #pages ul li a:hover {
    	color: #0450aa;
    	margin: 0px -3px 0px 0px;
    	padding: 7px 14px 6px 12px;
    	text-decoration: none;
    	}
    	
    .current_page_item a, .current_page_item a:hover {
        color: #0450aa !important;
        }
    
    /************************************************
    *	Header                                                                            *
    ************************************************/
    
    #header {
    	background-image: url(/test/images/header-bk.jpg);
            background-repeat: repeat-x;
    	width: 1000px;
    	height: 147px;
    	margin: 0px auto 0px;
    	overflow: hidden;
    }  
    
    .headerleft {
    	width: 420px;
    	float: left;
    	font-size: 14px;
    }
    
    .headerright {
    	width: 480px;
    	float: right;
    	padding: 20px 20px 0px 0px;
    	font-weight: bold;
    	text-align: right;
    }
    
    /************************************************
    *	categories   menu   								*
    ************************************************/
    
    #catmenu {
    	background: #000;
    	width: 1000px;
    	height: 38px;
    	margin: -12px auto 0;
    }
    	
    #catemenu p {
    	color: #FFFFFF;
    	font-size: 11px;
    	padding: 0px 0px 0px -10px;
    	font-weight: bold;
    }
    	
    #catmenu a {
    	color: #FFFFFF;
    	font-size: 12px;
    	text-decoration: none;
    	padding: 0px 0px 0px 3px;
    }
    	
    #catmenu a:hover {
    	background-color: #0450aa;
    	color: #ffffff;
    }
    	
    #catmenu ul {
    height: 38px;
    } 	
    #catmenu li {
    	display: inline;
    	list-style-type: none;
    line-height: 38px;
    }
    	
    #catmenu ul li a {
    	font-size: 11px;
    	font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
    	color: #FFFFFF;
    	margin: 0px -3px 0px 0px;
    	padding: 7px 14px 6px 12px;
    	font-weight: bold;
    	text-decoration: none;
    	border-left: 1px solid #000000;
    }
    
    #catmenu ul li a:hover {
    	background-color: #0450aa;
    	margin: 0px -3px 0px 0px;
    	padding: 7px 14px 6px 12px;
    	text-decoration: none;
    }
    	
    
    /************************************************
    *	entries   								*
    ************************************************/

    About that first entry, have a look at what the CSS reset is all about.


    ...
    Last edited by Excavator; 12-09-2009 at 06:14 AM. Reason: added a link
    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

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    2. You'll notice the date displayed on the right (after the first line of each "post") inside a background button of sorts. I would like that to display above the post content in the white space on the right, adjacent/parallel to the title.
    markup
    Code:
    <div id="content">
       <div class="single">
         <div class="category">{Category 1}</div>
         <div class="title"><h2><a href="#">A Really Witty Title Goes Here</a></h2>
    
         <div class="post-date">Dec<br>08</div>
    </div>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis dapibus enim. Mauris porttitor urna sed dolor sagittis tincidunt. Sed rutrum elit non magna porttitor pretium eget vitae dolor. Proin euismod mollis diam id sagittis. Aenean auctor porttitor blandit. Curabitur at massa justo. Vivamus at erat purus. Duis aliquet purus a justo ornare eu laoreet massa vehicula. Curabitur non lorem ut erat ultrices molestie nec in mauris. In viverra sem euismod risus porttitor tristique. Cras diam dolor, blandit id pulvinar vel, elementum sed magna. Curabitur imperdiet varius luctus. Etiam ac diam felis.</p>
    CSS
    Code:
    /************************************************
    *	entries   								*
    ************************************************/
    	
    #content {
    	float:left;
    	width: 650px;
    	height:100%;
    	
    }
    
    .post-date{
    float: right;
            display: inline;
            margin: 0 -10px 0 0;
            background: url(/test/images/date_button_template.gif) no-repeat;
    }
    
    .category {
            font-size: 11px;
    	font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
    	color: #cfcfcf;
    }
    
    .title {
    	color: #0450aa;
    	margin: 5 0 0 0px;
    	padding: 0px 0px 5px 0px;	
    }	
    
    .title a {
    	color: #0450aa;
    	text-decoration: none;	
    }
    
    .single {
    	width:638px;
    	overflow: hidden;
    	padding: 10px 10px 10px 10px;
    	height:100%;
    	color:#000;
    	font: 13px "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
    	background:#ffffff;
    	line-height:20px;
    	border-bottom: 2px dotted #000;
    }
    
    .single  h2 {
    width: 600px;
    float: left;
    	margin: 0px 0 5px 0;
    	padding: 5px 0px 0px 10px;
    	text-align: left;
    	font: 24px  "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
    	font-weight:normal;
    	overflow:hidden;
    }
    .more {
            float: left;
            width: 75px;
            background-color: #444a55;
            color:#ffffff;
    	font: 13px "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
            padding: 7px;
            margin-right: 10px;
    }
    
    .more a {
            color: #ffffff;
            text-decoration: none; 
    }
    
    .comm {
            width: 75px;
            background-color: #444a55;
            color:#ffffff;
    	font: 13px "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
            padding: 7px;
            margin-right: 10px;
    }
    
    .comm a {
            color: #ffffff;
            text-decoration: none; 
    }	
    
    /************************************************
    *	sidebar   								*
    ************************************************/
    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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    3. At the end of each post, there's the common "read more" and "X comments" buttons. The first one -- "read more" -- is where I want it but I'd like the comments button to be displayed in line with the "read more" button (with like 10px between them), not below it.
    Code:
    .more {
            float: left;
            width: 75px;
            background-color: #444a55;
            color:#ffffff;
    	font: 13px "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
            padding: 7px;
            margin-right: 10px;
    }
    
    .more a {
            color: #ffffff;
            text-decoration: none; 
    }
    
    .comm {
            width: 75px;
    float: left;
            background-color: #444a55;
            color:#ffffff;
    	font: 13px "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
            padding: 7px;
            margin-right: 10px;
    }
    
    .comm a {
            color: #ffffff;
            text-decoration: none; 
    }
    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

  • #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
    4. How do I get the background & left border of the sidebar to display all the way to the footer (right now they each stop after the content stops)?
    A trick called "faux columns" will do that.
    Have a look at a demo of mine. Google it and you'll find a lot more examples.
    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
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Code:
     .lsidebar {
    	float: left;
    	width: 159px;
    	padding: 5px;
    	font-size: 11px;
    	font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
    }
    .lsidebar h2 {
           background-image: url(/test/images/sidebar-title.jpg);
           width: 149px;
           height: 22px;
           color: #ffffff;
           font-size: 14px;
           font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
           font-weight: bold;
           text-transform: uppercase;
           padding-left: 10px;
           padding-top: 5px;
    }  
    .lsidebar ul {list-style: inside;   } 
    .rsidebar {
    	float: right;
    	width: 159px;
    	padding: 5px;
    	font-size: 11px;
    	font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
    }
    
    .rsidebar h2 {
           background-image: url(/test/images/sidebar-title.jpg);
           width: 149px;
           height: 22px;
           color: #ffffff;
           font-size: 14px;
           font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
           font-weight: bold;
           text-transform: uppercase;
           padding-left: 10px;
           padding-top: 5px;
    }  
    A little explanation here. The way the box model works is margin/padding/border all get added in to the total width of an element. When floating two elements side by side, they can't be wider than the div that contains them or one will drop.
    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

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    6. In the index.html code, there's a small image which is supposed to be displayed on the right sidebar above the dummy text which is there right now, but it's not appearing and I'm not sure why...
    No image there? http://www.blogaboutbeer.com/wp-cont...ogomember1.jpg
    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

  • #8
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is, in my opinion, the most interesting part:
    CSS Code:

    //If first time key in date run statement
    if(first == 0){
    ++first;//Track if is the first record key in
    items[i] = new Item(itemNumber, itemDesc, sellPrice, quantity);
    }
    //Else continue key in record
    else{
    entries = items[0].getEntries();//Get number of entries entered
    for(j=0; j<entries; ++j){

    duplicate = items[j].equals(itemNumber, itemDesc, sellPrice, quantity);//Check for duplication of entries

    if(duplicate == true) {
    Print.duplicateError();
    --i;
    --looping;
    break;
    }
    }
    if(duplicate == false)//else save record
    items[entries] = new Item(itemNumber, itemDesc, sellPrice, quantity);
    }
    _______________________
    Taux calculette pret immobilier | Calcul emprunt pret immo | Taux interet calculette credit immobilier

  • #9
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @Excavator - Thanks so much for everything. It all looks great. Sorry I'm just now responding; I hadn't forgotten, I just thought I'd be emailed when someone responded. I hadn't been so I thought no one had. Anyway - I added to your +Rep and I'm going to go over your faux columns demo now.

    A couple more quick questions, if you don't mind. I made the changes to the date but it's still not displaying exactly where I'd like. Any idea why?

    Secondly, how do I make the background and left-border of the sidebar column go all the way to the footer (even though there might not be any content displayed on top of it). Know what I mean?

    Other than that, it's fantastic. Thanks again so much!

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    A couple more quick questions, if you don't mind. I made the changes to the date but it's still not displaying exactly where I'd like. Any idea why?
    It looks good here. In FF it is sitting butted up against the right column's border... depends where you want it I guess.

    Right now, .single is 638px wide with padding 10px on the left and right. That makes .title 638px wide because it's just filling what space it has available.
    That's probably why you have a -10px margin on the right?

    You would probably expect .title to wrap around the h2 and the date but, if you give it a background color ...
    like this
    Code:
    .title {
    	color: #0450aa;
    	margin: 5 0 0 0px;
    	padding: 0px 0px 5px 0px;
    background: #f00;	
    }
    If you clear your floats, that will be fixed.
    Normally I would recomend you clear your floats with overflow:auto; like this page describes.

    Try it and you'll see the negative margins are giving you a horizontal scrollbar. In this one case, it might be better to clear it with an extra div ...
    something like this
    Code:
    <div id="content">
       <div class="single">
         <div class="category">{Category 1}</div>
         <div class="title"><h2><a href="#">A Really Witty Title Goes Here</a></h2>
    
         <div class="post-date">Dec<br>08</div>
    <div style="clear:both;height:1px;"></div>
    </div>
    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

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Secondly, how do I make the background and left-border of the sidebar column go all the way to the footer (even though there might not be any content displayed on top of it). Know what I mean?
    Full height layout demo here. You will still want to use that faux columns I mentioned earlier.
    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


  •  

    Posting Permissions

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