Align Issue – Clean Home

  • I’ve got a serious problem with my style sheet. All of my posts are aligned all the way to the left hand side of the screen, and I can’t work out what the issue is.

    Link – https://www.myenglishfix.com/blog/

    I should also point out that I’m new to this.

    Here is my style sheet –

    */

    body {
    font-family:Arial, serif;
    font-size:13px;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:1.7em;
    }
    a {
    border-bottom:1px dotted #000;
    text-decoration:none;
    color:#000;
    font-weight:600;
    }
    a:hover {
    color:#e12000;
    border-bottom:1px dashed #e12000;
    background-color:#f7f7f7;
    }
    hr{
    margin-top:35px;
    border:10px;
    border-top:1px dotted #ccc;
    width:320px;
    color:#fff;
    clear:both;
    }
    #wrapper {
    width:300px;
    margin:40px auto;
    }
    #header {
    float:left;
    width:300px;
    border-bottom:1px dotted #ccc;
    margin:10px;
    }
    #logo {
    float:left;
    width:auto;
    }
    #logo a {
    color:#ff2b06;
    font-size:60px;
    font-weight:600;
    text-decoration:none;
    border-bottom:none;
    letter-spacing:-4px;
    background-color:#fff;
    }
    #logo h2 {
    font-size : 18px;
    font-weight : 200;
    letter-spacing : -1px;
    }
    #nav {
    float:right;
    width:auto;
    padding:12px 0 0;
    }
    #nav ul {
    height:50px;
    float:right;
    }
    #nav li {
    text-align:center;
    float:left;
    display:inline;
    width:auto;
    }
    #nav li a {
    font-size:20px;
    font-weight:400;
    display:block;
    padding:15px;
    border-bottom:none;
    }
    #nav li a:hover {
    background-color:#f7f7f7;
    }
    #blurb {
    font-family:Georgia;
    height:auto;
    border-bottom:1px dotted #ccc;
    width:100%;
    float:left;
    padding:5px 0;
    font-size:32px;
    font-weight:400;
    line-height:120%;
    }
    #blurb:hover {
    color:#e12000;
    }
    #content {
    width:620px;
    float:left;
    border-right:1px dotted #ccc;
    padding:10px 0 30px 0;
    min-height:420px;
    }
    .post {
    padding:15px 0 0 0;
    }
    .post p {
    margin:14px 0 14px 0;
    }
    .post em{
    font-style:italic;
    }
    .post h2 {
    font-family:Georgia;
    font-size:24px;
    margin:25px 0 10px 0;
    font-weight:normal;
    }
    .post h1, .post h1 a{
    font-family:Georgia;
    font-size:28px;
    margin:30px 0 10px 0;
    font-weight:normal;
    line-height:32px;
    }
    .post h3, .post h4 {
    font-family:Georgia;
    font-size:20px;
    margin:15px 0 10px 0;
    font-weight:normal;
    }
    .post h4 {
    font-size:18px;
    }
    .post h1:hover, .post h2:hover, .post h3:hover, .post h4:hover {
    color:#e12000;
    }
    .post .indent {
    padding-left:10px;
    }
    .post .indent p {
    padding-left:10px;
    }
    .post small {
    font-size:11px;
    }
    .post small a {
    font-weight:normal;
    }
    .post .alignright {
    float:right;
    margin-left:10px;
    }
    .post .alignleft {
    float:left;
    margin-right:10px;
    }
    .post .aligncenter {
    margin:0 auto;
    display:block;
    }
    .post abbr {
    font-weight:normal;
    }
    .post ul{
    list-style:circle;
    margin:0 0 0 25px;
    }
    .post ol{
    list-style:decimal;
    margin:0 0 0 30px;
    }
    .post .wp-caption {
    background:#f7f7f7;
    border:1px solid #ccc;
    margin:10px;
    text-align:center;
    padding:5px 0 0;
    }
    .post .wp-caption-text {
    margin:0;
    }
    .post .wp-caption a, .post .wp-caption a:hover {
    border-bottom:0;
    }
    .post blockquote {
    color:#777;
    border-left:5px solid #ccc;
    margin:15px 30px 0 10px;
    padding-left:20px;
    }
    .post pre {
    font-family:courier;
    font-size:12px;
    letter-spacing:-1px;
    margin:14px 0 14px 0;
    }
    .post .message ul {
    margin:12px 0 0;
    }
    .post .message {
    display:none;
    background:#0F67A1;
    margin-top:10px;
    padding:20px;
    color:#fff;
    }
    #comments h3, #comments h4{
    font-family:Georgia;
    font-size:24px;
    margin:35px 0 5px;
    font-weight:normal;
    }
    #comments h4{
    font-size:28px;
    }
    #comments cite{
    font-family:Georgia;
    font-size:18px;
    font-weight:normal;
    border-bottom:1px dotted #ccc;
    }
    #comments em {
    font-style:italic;
    text-align:right;
    }
    #comments ol.commentlist li {
    margin-top:20px;
    border:1px dotted #ccc;
    border-right:0;
    padding:10px 5px 20px 10px;
    min-height:110px;
    }
    #comments p {
    margin:10px 0 0 10px;
    width:auto;
    }
    #comments span {
    display:block;
    color:#eee;
    font-family:Georgia;
    font-size:120px;
    font-weight:normal;
    float:right;
    padding-top:25px;
    }
    #comments ul.formlist {
    margin:20px auto;
    width:375px;
    }
    #comments ul.formlist li {
    display:block;
    margin:10px 0 0;
    }
    #comments ul.formlist p{
    margin:10px 0 0;
    text-align:center;
    }
    #comments input {
    font-family:Georgia;
    width:370px;
    font-size:18px;
    font-weight:normal;
    }
    #comments textarea {
    font-family:Georgia;
    width:370px;
    font-size:18px;
    font-weight:normal;
    }
    #comments li.submitbutton input {
    text-align:center;
    background:#fff;
    border:1px solid #aaa;
    color:#000;
    font-family:Georgia;
    font-weight:normal;
    font-size:20px;
    width:374px;
    }
    #comments .center {
    text-align:center;
    }
    #sidebar {
    width:250px;
    float:right;
    margin:0 0 25px 0;
    }
    #sidebar h3 {
    padding:25px 0 3px 0;
    font-size:18px;
    }
    #sidebar .block ul {
    border-bottom:1px dotted #ccc;
    }
    #sidebar .block ul .children{
    border:0;
    padding: 0 0 0 8px;
    }
    #sidebar .block li {
    border-top:1px dotted #ccc;
    }
    #sidebar .block li a {
    background:transparent url(images/bullet_black.gif) no-repeat scroll 6px 52%;
    font-size:13px;
    font-weight:normal;
    padding:2px 0 2px 15px;
    display:block;
    border-bottom:none;
    }
    #sidebar .block li a:hover {
    background:#f7f7f7 url(images/bullet_red.gif) no-repeat scroll 6px 52%;
    }
    #sidebar .widget_search label {
    display:block;
    padding:25px 0 3px 0;
    font-size:18px;
    border-bottom:1px dotted #ccc;
    margin:0 0 5px;
    }
    #sidebar .widget_recent_comments li {
    background:transparent url(images/bullet_black.gif) no-repeat scroll 6px 52%;
    padding:2px 0 2px 15px;
    }
    #sidebar .widget_recent_comments li a,#sidebar .widget_recent_comments li a:hover{
    background:none;
    border-bottom:1px dotted #000;
    text-decoration:none;
    color:#000;
    font-weight:600;
    }
    #sidebar .widget_recent_comments li a:hover {
    color:#e12000;
    border-bottom:1px dashed #e12000;
    background-color:#f7f7f7;
    }
    #sidebar .widget_tag_cloud h3 {
    margin:0 0 8px;
    border-bottom:1px dotted #ccc;
    }
    #sidebar .widget_text h3 , #sidebar .calendar h3{
    border-bottom:1px dotted #ccc;
    }
    #sidebar .calendar h3{
    display:none;
    }
    #sidebar #wp-calendar {
    width:95%;
    text-align:center;
    }
    #sidebar #wp-calendar caption, #sidebar #wp-calendar td, #sidebar #wp-calendar th{
    text-align:center;
    }
    #sidebar #wp-calendar caption {
    font-size:18px;
    padding:25px 0 3px 0;
    }
    #sidebar #wp-calendar th {
    font-weight: bold;
    border-top:1px dotted #ccc;
    border-bottom:1px dotted #ccc;
    }
    #sidebar #wp-calendar tfoot td{
    border-top:1px dotted #ccc;
    border-bottom:1px dotted #ccc;
    }
    #footer {
    width:900px;
    float:left;
    border-top:1px dotted #cccccc;
    text-align:center;
    padding:30px 0 40px 0;
    }

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

  • Please don’t post huge chunks of code here. For larger blocks of code, use the WordPress pastebin and post the pastebin url here. It makes life easier for everyone. In this case, a simple description of the problem and a link to your site demonstrating it is all that’s usually needed.

    You have a lot of validation errors on your site but removing the image markup from within the <head></head> section of header.php will clear up many of these. The HEAD section of a page is no place for image markup. It rightly belongs in the<div id=”header”></div>` block.

    To give your posts a decent left margin, try changing:

    .post {padding:15px 0 0;}

    to:

    .post {padding:15px 0 0 30px;}

    in style.css.

    Thread Starter glenndavie

    (@glenndavie)

    Thanks for the help. And, sorry about posting the large block of code.

    Could you also tell me what I should edit in the style.css to bring the sidebar over to the left a little more.

    Thread Starter glenndavie

    (@glenndavie)

    Additionally, when I follow the validation link you’ve supplied, I still receive a tonne of errors. Which Php file would I edit in order to correct these mistakes? All I get are line and column numbers. Cross referencing these numbers with my various php files, I’ve received naught.

    Thanks in advance. Sorry for the newb questions.

    Which Php file would I edit in order to correct these mistakes?

    Start with header.php.

    Thread Starter glenndavie

    (@glenndavie)

    I need help bringing the sidebar over to the left so that it’s not always aligned itself with the right hand side of the screen, creating a vast, white, space in the middle.

    Is it possible that this is caused by the numerous errors I’ve got on the page, or is it simply a matter of editing the spacing in the stylesheet?

    Your help is greatly appreciated.

    Thread Starter glenndavie

    (@glenndavie)

    I realize this is a beginner question, but I’ve tried altering all manner of dimensions in the style sheet to no avail. Could someone please point me in the right direction? Is one errors causing this gross distortion? Or am I missing something in the style sheet?

    Please, this is quite important.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Align Issue – Clean Home’ is closed to new replies.