WordPress.org

Ready to get started?Download WordPress

Forums

Help needed - moving main content & sidebar down the page? (8 posts)

  1. ravedigga
    Member
    Posted 4 years ago #

    Hi everyone :)

    I'm setting up a wordpress based site/blog using a theme I paid for through a 3rd party. I'm now in the process of modifying it and at present I'm testing things with some preliminary 'draft' artwork. I'm a bit out of touch with HTML, and CSS/PHP is new to me. I'm getting my head around it slowly, and I've figured out how to move or change most of what I want to, but one element has got me scratching a hole in my head.

    The URL is http://www.ravedigga.com. If you look you will see that from the top down there is a header image, then a gallery (featured gallery plugin), and then the main body of the blog with a sidebar parralel on the right. I have added a taller header image, so then I needed to move the gallery position down the page to accomodate it. I've done this, but now the main body/sidebar is sitting with the gallery overlapping it. I now just want to move the top of the blog and sidebar areas down the page so they start under the gallery plugin. I've searched through the CSS and looked over the main index PHP, but I'm not getting anywhere.

    I have contacted the theme designer already, but as yet there's no reply (been waiting a few days), and looking at CSS tutorials online hasn't helped. Please can someone guide me? I can supply the CSS if needed.

    Thanks
    Mikey

  2. Before working with CSS, fix some missing ul and li tags around your menu: [Invalid]Markup Validation of http://www.ravedigga.com - W3C Markup Validator. Scroll down in the valdiation report to see line numbers and source code. And also try a plugin to embed Flash with valid code, like WordPress › Kimili Flash Embed « WordPress Plugins.

  3. ravedigga
    Member
    Posted 4 years ago #

    Hi Songdogtech, thanks for the reply.

    I'm afraid it goes a little over my head though. I'm aware of 'validating code', and I know ul and li are HTML list tags, but do those errors mean the theme I paid for is actually badly put together? Are you saying that the change I need to make to the layout isn't possible without fixing those faults first?

    I'm a little confused since I was worried after your reply that this might be the case and so decided to validate some other sites as a test. Sites including beatport.com, hmv.co.uk, and facebook.com all came back with more errors than my own page, and they are functional. I'm willing to fix these/get them fixed, but the main concern to me at present is getting the site up and running in a functional way, looking how it should, so that I can then get on with using it as I intend - as a platform for my music projects. Once that's happening I'm willing to work on the site and get any glitches ironed out. So right now it's that layout issue that I need to be the priority, unless it's not possible.

    Can you help? Any advice from anyone else?

    Thanks :)

  4. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    in style.css :

    #body #content {
    	float:left;
             display:inline
    	width:600px;
    	margin:110px 0 0 11px;
    }
    
    #body #sidebar {
    	float:right;
    	display:inline;
    	width:321px;
    	margin:110px 18px 0 0;
    }

    (adding 110px as margin-top to #content and #sidebar)
    try it and see if it shows properly in as many browsers as you can check.

  5. kz
    Member
    Posted 4 years ago #

    #body{padding-top:140px;}

  6. The reason I say fix the validation errors first before worrying about CSS is that 1) they are the primary cause of "out of place" sidebars (if you search in these forums); and 2), you've been editing your theme, and admit to being shaky with CSS and PHP.

    If the theme displayed right before you edited it, then your edits are the problem. Some paid for themes work well, some don't, but the problem are your mods.

    The number of validation errors in other sites is utterly irrelevant. Some sites are full of validation errors but display corectly, because those errors and are simply technical errors of code conventions.

    Try the CSS changes offered above; hopefully they work. alchymyth is very good with CSS.

    Check your site in IE6-8, Firefox and Safari to be sure it displays correctly in all browsers.

  7. ravedigga
    Member
    Posted 4 years ago #

    Ah, ok :) Thanks for explaining. As you mentioned, I've made some edits to the theme already, but it didn't occur to me which of these valdiation errors might have been caused by any of that. I don't think that will be the case since all I've really changed so far are a few top: and left: values, but I guess there's things I could have messed up without knowing. I've still got the original CSS, so I can always re-upload that and compare validation on the two.

    I'll give the code described a go anyway - thanks to Alchmyth and KZ. Once I've seen the result I'll come back and let you know what happened.

  8. ravedigga
    Member
    Posted 4 years ago #

    Hi again :)

    Ok... both of the suggested codes work, but here's what happens...

    Alchymyth

    #body #content {
    	float:left;
             display:inline
    	width:600px;
    	margin:110px 0 0 11px;
    }
    
    #body #sidebar {
    	float:right;
    	display:inline;
    	width:321px;
    	margin:110px 18px 0 0;
    }

    This does the trick, I just needed to cheange the '110px' value to suit. I'm not sure what you mean about top-margin though, since using that instead made it all goe a bit off-skew.

    KZ
    #body{padding-top:140px;}

    This seems to do the job in one go :)

    So now I've got 2 methods, and I come back to the matter of best practise... trying to do it the 'correct' way and avoid any validation errors as pointed out by Songdogtech, or anything that will make it non-viewable in some browsers. At present I've only tested it in IE8, but I'll install and check in Safari and Firefox next.

    I've also re-uploaded the original CSS and validated that now - same amount of errors as when songdogtech validated it, so maybe those are nothing to do with me? I have noticed however that after my changes there's a small error in IE in the bottom left telling me the page didn't load correctly. Nothing looks wrong, apart from me moving things around and playing trial and errr with positioning. What I mean by that is that the errors are there even after I finally get things in the places I want them and looking correct. But I'm going to go back to the original CSS, start changing it and viewing after each change, and then see when the error appears.

Topic Closed

This topic has been closed to new replies.

About this Topic