allignment & header res

  • cinziuccia · Member ·

    Hi all, I need some help. My foodblog is this http://breadandcherries.wordpress.com/?csspreview=true
    I am definitely not an expert, but with the minor changes that I made at the css of the Digg 3 Column, I was pretty happy with the result. But I don’t know why at some point the three columns were vertically alligned, it is ok if I click on each recipe, but the home and the “collective” pages are not ok.
    1) So this is my first question, there is any way that I can re-align the three columns correctly?
    2) even if I import a high resolution image for the header, it comes out horribly as if it was very low res.

    I would really appreciate your help, and sorry if my questions are basic and probably stupid… Thanks!

  • traxxtar · Member ·

    Can you post the CSS changes you’ve made?

  • cinziuccia · Member ·

    Here is the complete css, I made minor changes and didn’t add anything. Thank you fairporttrak!

    body,h1,h2,h3,h4,h5,h6,address,blockquote,dd,dl,hr,p,form {
    margin:0;
    padding:0;
    }

    body {
    font-family:Arial, Helvetica, Georgia, Sans-Serif;
    font-size:12px;
    text-align:center;
    vertical-align:top;
    background:#fff;
    color:#fff;
    }

    h1,h2,h3,h4,h5,h6 {
    font-family:Arial, Helvetica, Georgia, Sans-Serif;
    font-size:16px;
    }

    a {
    text-decoration:none;
    color:#333;
    }

    a:hover {
    text-decoration:none;
    }

    a img {
    border:0;
    }

    abbr,acronym {
    border:0;
    }

    address,dl,p {
    padding:10px 0 0;
    }

    blockquote {
    background:#fffada url(‘images/bg_blockquote.gif’) no-repeat 5px 7px;
    color:#736926;
    margin:10px 10px 0;
    }

    blockquote p {
    padding:10px 10px 10px 20px;
    }

    blockquote blockquote {
    background:#fff;
    color:#333;
    margin:10px 20px;
    }

    blockquote blockquote p {
    padding:10px;
    }

    code {
    background:#f9f9f9;
    }

    dt {
    font-weight:bold;
    }

    dd {
    padding:0 0 5px 15px;
    }

    hr {
    clear:both;
    width:100%;
    border:0;
    height:1px;
    text-align:left;
    background:url(‘images/bg_comment_bottom.gif’) no-repeat;
    margin:15px 0 5px;
    }

    small {
    font-size:10px;
    }

    input,textarea {
    font-family:Arial, Helvetica, Georgia, sans-serif;
    font-size:12px;
    padding:2px;
    }

    input#author,input#email,input#url,textarea#comment {
    border:1px solid #cbb945;
    background-color:#fffadb;
    padding:3px;
    }

    input#author,input#email,input#url {
    margin:0 5px 0 0;
    }

    #container,#header,#menu,#menu ul li,#menu ul li a,#pagetitle,h1,#syndication,.pagewrapper,.page,.wrapper,.narrowcolumnwrapper,.narrowcolumn,.content,.post,.entry,.browse,sidebar {
    text-align:left;
    vertical-align:top;
    }

    #container {
    width:904px;
    margin:0 auto;
    padding:10px 0;
    }

    #header {
    width:904px;
    height:250px;
    color:#333;
    position:relative;
    margin:0 0 10px;
    }

    #header-box {
    position:absolute;
    top:40px;
    left:0;
    z-index:10;
    }

    #header-image {
    position:absolute;
    z-index:-2;
    margin:0 0 10px;
    }

    #header-overlay {
    position:absolute;
    width:904px;
    height:250px;
    z-index:-1;
    }

    #pagetitle,#syndication,#searchbox {
    z-index:3;
    }

    #menu ul {
    list-style:none;
    margin:1px;
    padding:0 0 0 10px;
    }

    #menu ul li {
    float:left;
    font-size:14px;
    font-weight:bold;
    background:url(‘images/bg_tab_right.gif’) no-repeat right top;
    color:#325b0a;
    margin:0 5px 0 0;
    }

    #menu ul li a {
    display:block;
    text-decoration:none;
    background:url(‘images/bg_tab_left.gif’) no-repeat left top;
    color:#325b0a;
    padding:14px 20px 10px;
    }

    #menu ul li a:hover {
    text-decoration:none;
    }

    #pagetitle {
    clear:both;
    width:904px;
    height:155px;
    }

    #pagetitle h1 {
    font-size:24px;
    font-weight:bold;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#fff;
    padding:36px 28px 0;
    }

    #pagetitle h1 a {
    text-decoration:none;
    color:#fff;
    }

    #syndication {
    float:left;
    color:#999;
    padding:15px 31px 0;
    }

    #syndication a {
    color:#999;
    }

    #syndication a.feed {
    background:url(‘images/feed_icon.png’) no-repeat 0 1px;
    padding:0 0 0 19px;
    }

    #searchbox {
    float:right;
    padding:10px 31px 0;
    }

    #searchbox input#s {
    border:1px solid #ddd;
    background:#fff;
    padding:3px;
    }

    #searchbox input#searchsubmit {
    height:24px;
    }

    .pagewrapper {
    float:left;
    width:904px;
    color:#333;
    background:#fff url(‘images/bg_page_bottom.gif’) no-repeat left bottom;
    margin:0 0 10px;
    }

    .wrapper {
    float:left;
    width:500px;
    }

    .page {
    float:left;
    background:url(‘images/bg_page_top.gif’) no-repeat;
    padding:0 5px 5px;
    }

    .content {
    float:left;
    width:500px;
    background:url(‘images/bg_narrowcol_top.gif’) no-repeat left top;
    overflow:hidden;
    }

    .post {
    line-height:18px;
    padding:9px 16px 15px;
    }

    .post h2 {
    font-size:22px;
    line-height:27px;
    font-weight:normal;
    }

    .post h2 a {
    text-decoration:none;
    color:#669933;
    }

    .browse {
    border-top:1px solid #bdbdbd;
    line-height:18px;
    padding:15px 16px;
    }

    .sidebar,.obar {
    float:right;
    width:192px;
    line-height:18px;
    overflow:hidden;
    margin:0 0 0 5px;
    }

    .obar {
    float:left;
    margin:0 5px 0 0;
    }

    .sidebar ul,.obar ul {
    list-style:none;
    margin:0;
    padding:0;
    }

    .sidebar ul li,.obar ul li {
    background:url(‘images/bg_ul_li.gif’) no-repeat left top;
    margin:5px 0 0;
    padding:9px 16px 15px;
    }

    .sidebar ul li h2,.obar ul li h2 {
    font-size:17px;
    font-weight:normal;
    line-height:27px;
    color:#669933;
    }

    .sidebar ul ul li,.obar ul ul li {
    background:none;
    margin:0;
    padding:6px 0 3px;
    }

    .sidebar ul ul ul,.obar ul ul ul {
    padding:3px 0 0;
    }

    .sidebar ul ul ul li,.obar ul ul ul li {
    background:url(‘images/bg_arrow_right.gif’) no-repeat 0 8px;
    padding:6px 0 3px 15px;
    }

    .sidebar ul ul ul ul li,.obar ul ul ul li {
    background:url(‘images/bg_arrow_right_2.gif’) no-repeat 0 8px;
    }

    .post h3#comments,.post h3#respond {
    line-height:27px;
    color:#e45b00;
    }

    .post h3#respond {
    color:#333;
    }

    ol.commentlist {
    list-style:none;
    margin:0 0 11px;
    padding:0;
    }

    ol.commentlist li {
    background:url(‘images/bg_comment_bottom.gif’) no-repeat left bottom;
    padding:13px 0;
    }

    ol.commentlist li .commentmetadata {
    font-size:11px;
    color:#546477;
    }

    ol.commentlist li .commentmetadata a {
    color:#546477;
    }

    form#commentform small {
    font-size:11px;
    }

    #footer {
    font-size:11px;
    color:#000;
    text-align:center;
    margin:10px 0;
    }

  • cinziuccia · Member ·

    …. I look at the css and I feel… desperate

  • boblets · Member ·

    Is it changes you made to the css that made the columns go haywire?
    if not, could this have something to do with it?
    http://faq.wordpress.com/2008/05/30/why-is-my-sidebar-at-the-bottom-of-my-posts/

  • cinziuccia · Member ·

    Sorry for posting it all, it is just that I have no idea of which of my changes did that mess… and why only on the homepage and category pages and not in the single recipe pages?

  • cinziuccia · Member ·

    Thanks boblets, I am checking the link you sent, definitely it has to do with my problem. What I don’t understand is what is the difference between:
    http://breadandcherries.wordpress.com/category/main-courses/pasta/?csspreview=true

    and this…

    http://breadandcherries.wordpress.com/2008/06/20/pappardelle-nettles-dried-tomatoes/?csspreview=true

    I don’t understand where the problem is…
    thank you all for helping

  • boblets · Member ·

    Thing is – when you click on the posts it looks fine. That tells me the css is ok.
    I guess you have added something that is too wide for the column – either an image, or pasted from word or something like that.
    The basic advice is to set your number of posts showing to one, and then go through them to see which one is the culprit.

  • cinziuccia · Member ·

    Boblets this helps a lot, at least I know that the css is fine.
    I only have a few posts so far so I think with a little patience I will figure it out. At the end I will need a professional consultancy to make major changes like having small preview images instead of text in the recent post links.

    Thanks so much

  • boblets · Member ·

    I’ll add this link – just in case.

    Why not to use Word

  • cinziuccia · Member ·

    Thanks, I didn’t paste anything from word though. And I was thinking that I have only three posts, all of them works well, what is in the other pages that gets wrong if all of the posts work??

  • boblets · Member ·

    ok, this is very odd. I think now that it might have something to do with the more-tag.
    Go into each of your three posts, edit it, and replace the more-tag outside any other formatting, such as after a full stop.
    I am not promising anything, but I see your more-tag within some other tags. Try, anyway, and tell us how it goes.

  • traxxtar · Member ·

    i’ve ran into the problem of thinking my css was fine on the front page, then when you click the post, it’s screwed up. You could still have a css problem.

    If you’re using Firefox 3, try using the Firebug addin. It’s really nice for troubleshooting CSS tags.

    I think it’s here:

    .wrapper is inherited from the .syndication element, the width is only 500px. That’s what your column width is limited to. ;)

  • boblets · Member ·

    yes, I saw that, fairport, but it doesn’t make sense .. :-S

  • cinziuccia · Member ·

    I had to go out. Thank you for your suggestions.

    @ fairporttrack : I see the problem also in safari
    @ boblets: I am not sure how to “edit” the posts… I bought the css (just the stylesheet, 15 usd x year) so probably I cannot access the posts… they are not in the stylesheet. have no idea :(

    You great guys, thank you so much

  • traxxtar · Member ·

    Your pagewrapper element shows the layout at 904px which I believe is what you want. However, the page element is parent to all 3 columns and is 500px wide. It’s hard to see where that is being inherited from, although there are several references in your CSS you posted of 500px width.

    I suggest simply changing those values to say 777 or something that stands out so you can easily search once you save your changes. Change them one at a time save, then refresh until you find the correct one.

    Hopefully, that’ll do it. Otherwise, I’ll have to keep looking.

    Trying to help, but not making much progress here….sorry :(

  • traxxtar · Member ·

    I found the culprit…I believe it must be some custom CSS you’ve done.

    I took a screen capture of both links you provided above. They show the bad page using a narrowcolumnwrapper element but the good page used a wrapper element. Two different DIVs entirely.

    You can see them here: http://fairporttrack.wordpress.com/for-cinzia/

  • cinziuccia · Member ·

    Hi,

    in the meanwhile I changed continent and time zone… confused :|

    Fairporttrack, I appreciate so much your help, I want to figure this out now. But I can’t find anything in the link you provided, can you send it back to me?

  • cinziuccia · Member ·

    YEESSSSSSS!!!!! here we go… I have no idea of when and how I had erased these two DIVs from the stylesheet (I put them back between the DIVs wrapper and post).

    .narrowcolumnwrapper{
    margin: 5px 0 0;
    float: left;
    width: 500px;
    background: #fff url(images/bg_narrowcol.gif) repeat-y;
    }

    .narrowcolumn{
    float: left;
    width: 500px;
    background: url(images/bg_narrowcol_bottom.gif) no-repeat left bottom;
    }

    Thank you very much Fairporttrack.

  • cinziuccia · Member ·

    Oh now I have the problem of the header image resolution. Why even if the original is high resolution, in the header it looks low res?

1 2
  • The topic ‘allignment & header res’ is closed to new replies.