Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Mar 2008
    Posts
    1
    Member #
    16586
    Hey guys I am just starting to learn CSS. I wanted to make a blog so I set up a wordpress account and downloaded a template that I liked and I have been redesigning it as learn more about CSS. I am almost done but for some reason the titles of the posts are to the left of the actual post and I cant figure out how to get even. Here is a copy of my stylesheet and the site is fourfourteen.net Thanks for any help!

    Code:
    /* Links */
    
    a:link { text-decoration: none; color: #7198A8; }
    
    a:visited { text-decoration: none; color: #7198A8; }
    
    a:hover, a:active { color: #92C2D7; }
    
    /* Headings */
    
    h2, h3, h4, h5, h6 { font-weight: normal; margin: 20px 0 10px; }
    
    h1 { font-weight: normal; font-size: 35px; margin-bottom: 0px;  margin-left: 40px; color: #364249; text-transform: lowercase;}
    
    h2 { font-size: 28px; }
    
    h3 { font-size: 44px; }
    
    h4, h5, h6 { font-size: 20px; }
    
    #navigation h1 {
    margin-top: 0px;
    color: #364249;
    }
    
    #navigation h1 a:link{
    color: #364249;
    margin-top: 0px;
    }
    
    #navigation h1 a{
    color: #364249;
    margin-top: 0px;
    }
    
    /* Other Html Elements */
    .titles { font-weight: normal; border-bottom-width: 0; font-size: 24px; text-decoration: none; underline: none;}
    .titles a:link, .titles a:visited, .titles a:active {
    text-decoration: none;
    underline: none;
    font-size: 24px;
    font-weight: normal;
    border-bottom-width: 0;
    }
    
    pre, blockquote 
    {
    	overflow: auto;
    	padding: 0 10px;
    	margin: 20px 30px;
    	line-height: 1.8em;
    	background-color: #f5f5f5;
    	border: 1px solid #e0e0e0;
    }
    
    pre:hover, blockquote:hover
    {
    	background-color: #f0f0f0;
    	border: 1px solid #d0d0d0;
    }
    
    pre { padding-top: 10px; padding-bottom: 10px; }
    
    code { color: #779900; font-family: Consolas, Verdana, "Courier New", Sans-Serif; }
    
    ul, ol { line-height: 2.0em; }
    
    ul { list-style-image: url(images/bullet.gif); }
    
    abbr, acronym { font-style: normal; border-bottom: 1px dotted #333333; cursor: help; }
    
    del { text-decoration: line-through; color: #999999; }
    
    ins { text-decoration: none; color: #009977; }
    
    /* Structure */
    
    body
    {       
            
    	margin-top: 0px;
    	padding-top: 0px;
    	color: #303030;
    	font: normal 76% "Trebuchet MS", "Lucida Grande", Verdana, Georgia, Sans-Serif;
            background: url(images/bg1.gif) no-repeat bottom left;
    	background-attachment: fixed;
    }
    
    #wrapper2 {
    width: 750px;
    margin-left: auto;
    margin-right: auto;
    background-color: #34373B;
    margin-top: 0px;
    
    }
    #header
    {
    	float: left;
    	width: 750px;
    	padding-bottom: 8px;
    	clear: right;
    	padding-left: 0px;
    	height: 69px;
    }
    
    #navigation
    {
    	width: 750px;
    	background-image: url(images/header.gif);
    	height: 330px;
    margin-left: auto;
    margin-bottom: 0px;
    margin-right: auto;
    margin-top: 60px;
    }
    
    #wrapper
    {
    	clear: both;
    	float: left;
    	width: 100%;
    	color: #CDCDCD;
    	background-color: #34373B;
            margin-top: -50px;
           
    }
    
    #content-wrapper
    {
    	width: 60%;
    	float: left;
            
            
           
    }
    
    #content
    {
    	float: left;
            
            
    	
            
    }
    
    #sidebar-wrapper
    {
    	width: 35%;
    	float: right;
    	margin-top: 10px;
    }
    
    #sidebar
    {
    	float: right;
    	padding: 0px 15px 10px 10px;
    	width: 210px;
    	margin-right: 15px;
    	margin-top: 0px;
    }
    
    #footer
    {
    	clear: both;
    	float: left;
    	width: 730px;
    	text-align: left;
    	padding-left: 20px;
    	background-color: #34373B;
    	color: #CDCDCD;
    	font-size: 11px;
    	padding-bottom: 10px;
    }
    
    #footer a {
    	color: #CDCDCD;
    	font-size: 11px;
    	}
    
    #footer a: visited {
    	color: #CDCDCD;
    	}
    #footer a:hover {
    	color: #CDCDCD;
    	border-bottom: 1px dashed #CDCDCD;
    	}
    #extras
    {
    	float: left;
    	width: 780px;
    	color: #444444;
    	text-align: left;
    	padding: 0 10px 10px;
    	margin: 10px 12px 20px;
    	background-color: #f5f5f5;
    	border-top: 1px solid #e0e0e0;
    	border-bottom: 1px solid #e0e0e0;
    }
    
    /* Header */
    
    
    /* Navigation */
    
    #navigation ul { list-style-type: none; list-style-image: none; float: left; margin-top: 3px; margin-left: 20px; margin-bottom: 100px; padding: 0 0px 0 0; }
    
    #navigation li { float: left; margin-top: 0px;}
    
    #navigation li a:link,
    #navigation li a:visited
    {
    	float: left;
    	color: #979797;
    	display: block;
    	padding: 15px 10px;
    	margin-right: 5px;
    	height: 27px;
    	font-size: 14px;
    	margin-top: 0px;
    	
    }
    
    #navigation li a:hover,
    #navigation li a:active
    {
    	color: #FFFFFF;
    	background: url(images/nav-bg.gif);
    	background-repeat: repeat-x;
    	font-size: 14px;
    	margin-top: 0px;
    }
    
    #navigation li.active a
    {
    	color: #CDCDCD;
    	background-color: #ffffff;
    }
    
    
    /* Wrapper */
    
    #wrapper a:link { font-weight: bold; }
    
    #wrapper a:visited { font-weight: bold; }
    
    #wrapper a:hover, #wrapper a:active { }
    
    /* Content */
    
    #content .post-title a { border-bottom-width: 0; }
    
    #content .post p.img { float: left; margin: 0 15px 0 0; }
    
    #content .post p.img img { padding: 8px; border: 1px solid #d0d0d0; background-color: #eeeeee; }
    
    #content .post-footer 
    { 
    	font-size: 90%; 
    	color: #CDCDCD;
    	margin-bottom: 5px; 
    	padding:5px 5px 5px 15px;
    	background-repeat: none;
    }
    
    /* Sidebar */
    
    .sideblock
    {
    	padding: 5px 10px;
    	margin-bottom: 20px;
    	background-repeat: no-repeat;
    	background-position: top;
    	background: #2C2F33;
    	border: 1px solid #212326;
    
    }
    
    .post-wrapper {
    padding-left: 10px;
    
    width: 450px;
    margin-left: 15px;
    
    }
    
    .sideblock ul { }
    
    .sideblock h3 { margin-top: 5px; font-size: 14px; color: #949788; font-weight: bold;  padding-left: 10px; padding-top: 2px;  }
    
    #sidebar dt { margin: 0; padding-top: 5px; font-weight: bold; color: #666666; }
    
    #sidebar dd { margin: 0 0 5px; padding-bottom: 5px; line-height: 1.8em; }
    
    #sidebar dd a:link { border-bottom-width: 0; font-weight: normal;  border-bottom: none; text-decoration: none;}
    
    #sidebar dd a:visited { border-bottom-width: 0; font-weight: normal; border-bottom: none; text-decoration: none; }
    
    #sidebar dd a:hover, #sidebar dd a:active { border-bottom: none; text-decoration: none;}
    
    /* Extras */
    
    #extras h6 { font-size: 14px; text-transform: uppercase; color: #CDCDCD; }
    
    #friends
    {
    	float: left;
    	width: 150px;
    	margin-left: 20px;
    	margin-right: 10px;
    }
    
    #links
    {
    	float: left;
    	width: 275px;
    	margin-right: 50px;
    }
    
    #about
    {
    	float: left;
    	width: 250px;
    	margin-right: 20px;
    }
    
    #friends ul { padding-left: 20px; }
    
    #links dl, #links dt, #links dd { margin: 0; padding: 0; }
    
    #links dt { font-weight: bold; padding-top: 5px; }
    
    #links dd { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px dotted #999999; }
    
    	/* Comments Styling */
    #commentlist li {
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    border-bottom: 1px solid #700000;
    }
    
    #commentform {
    margin: 1em 0;
    background: #34373B;
    width: 280px;
    }
    
    #commentform textarea {
    background: #f8f7f6;
    border: 1px solid #d6d3d3;
    width: 280px;
    }
    #commentform textarea:hover {
    background: #34373B;
    border: 1px solid #d6d3d3;
    }
    #commentform textarea:focus {
    background: #ffffff;
    border: 1px solid #939793;
    }
    
    #commentform #email, #commentform #author, #commentform #url {
    font-size: 1.1em;
    background: #f8f7f6;
    border: 1px solid #d6d3d3;
    width: 280px;
    }
    #commentform #email:hover, #commentform #author:hover, #commentform #url:hover {
    font-size: 1.1em;
    background: #ffffff;
    border: 1px solid #d6d3d3;
    width: 280px;
    }
    #commentform #email:focus, #commentform #author:focus, #commentform #url:focus {
    font-size: 1.1em;
    background: #ffffff;
    border: 1px solid #939793;
    width: 280px;
    }
    #commentform input{
    margin-bottom: 3px;
    }
    
    .date {
    	background: #34373B;
    	border: 1px solid #2B2E31;
    	height: 54px;
    	margin-bottom: 0px;
    	width: 54px;
    	text-align: center;
    	float: left;
    	margin-top: 15px;
    	
    }
    .date .month {
    	display: block;
    	color: #80959E;
    	padding: 2px 0px;
    	text-align: center;
    	text-transform: uppercase;
    	font-size: 10px;
    	margin-top: 2px;
    	font-weight: bold;
    	margin-bottom: 3px;
    }
    .date .day {
    	display: block;
    	color: #FFFFFF;
    	font: 2.3em Georgia;
    	padding-top: 0px;
    	text-align: center;
    	margin-top: -8px;
    }
    
    #left {
    	width: 60px;
    	float: left;
    }
    
    .slogan {
    font-size: 17px;
    color: #FFA200;
    text-transform: lowercase;
    margin-left: 40px;
    margin-bottom: 2px;
    
    }

  2.  

  3. #2
    Member KillaTeddyX's Avatar
    Join Date
    Dec 2006
    Posts
    81
    Member #
    14455
    Hello randomoutburst and welcome to webdesignforums.net have you tried giving your divs a absolute or relative postioning? Or do you not know what I mean if I say that here is a example code for you.

    Code:
    #container {position: absolute; left: 15%; top: 10%;}
    The main difference between the two is that absolute is relative to the broswer window whereas relative is relative to another object say a table. In other words if you had a div tag inside a table then the position of that div tag is relative to the <td> you put it inside. I hope this helps and I hope I didn't confuse you along the way.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:29 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com