CSS Customization aligning header and main body
-
Hi,
I’m looking to align my header image with my main body and side bar.
I’ve made the side bar and the main body joined, so I want the header to sit in the centre above these?
I’m also struggling to get the homepage to look the same on laptops and desktop computers and on different browsers?
Here is the link to my blog: http://www.olive-loves.com
If anyone could help that would be great!
Many Thanks,
Olivia
The blog I need help with is: (visible only to logged in users)
-
Hi Olivia,
It looks like the existing CSS rules you have included have had some unintended consequences: your homepage is now too wide to fit on my desktop computer screen! It will probably be even harder work for people who might visit your site from a tablet or mobile.
You’ve also stretched your header image beyond the recommended 930px which makes the quality get poorer.
It seems like most of your CSS seems to be adjusting border styles and font sizes and colours – which should be absolutely fine! The bits that are causing problems are the positioning declarations. If you let me know a little bit more about what sort of layout you’re trying to achieve I might be able to help you come up with something that will look good whatever device your visitor might use to view your page.
-
Hi,
Thankyou for getting back to me.
I would like the coloured background slighty showing on the edges of the white box, kind of like a border?. I would like my header, body and sidebar all joined to form one white page. Is this possible?
Do I need to reduce all the size measurements?
Many thanks in advance.
Olivia
-
The custom CSS you have already included makes it quite hard to figure out what’s going on, so forgive me if this is either not helpful at all or very confusing.
The easiest option is to set a background colour on some of the elements that currently don’t have one, this will fill in the gaps between the sections you mentioned without having to worry about moving things around. Here’s the code but please note I’ve only tested this on your theme without any existing custom CSS.
#header, #content {background-color:#fff;}I would recommend making your blog quite a bit narrower. I guess you have a widescreen laptop or monitor but remember that not everyone else will do too!
-
Would it be easier for me to post my customisation on here, as I think there are lots of bits which need deleting and changing?
Thankyou
-
I can see the code that you’ve added, there’s just lots of it and as each theme is set up differently it takes a while to figure out the effects of each bit.
It might be easier if you delete all your existing CSS (I think WordPress.com automatically saves revisions so you shouldn’t lose anything) then try out the code I suggested above and then start adding in your code bit by bit so you can see which sections cause problems and which are fine.
To give you a better idea, the declarations that modify colours and fonts, for the most part, should be OK. The ones you want to keep an eye on are where you change positions, heights, widths, etc.
-
Hi,
Thank you for your advice. I started from scratch and reduced the size so the page is looking better now thanks!
-
It looks like you’ve somehow increased the blank area to the right of your site and I think it’s to do with repositioning the sidebar widgets.
Try this (change the positioning values to suit) and see if it makes a difference for you:
#image-7, #image-8, #image-9, #image-10 { width:45px; margin:0; position:absolute; top:-95px; } #image-7 img, #image-8 img, #image-9 img, #image-10 img {margin:0;} #image-7 {left:350px;} #image-8 {left:415px;} #image-9 {left:480px;} #image-10 {left:545px;} -
Everything look centred on my screen? Which blank area?
I tried that and nothing happened?
-
Hmmm, I see it in both Opera and FireFox, your content appears centred but you can scroll further right to see some extra blank background space which is not there when the theme is unmodified. I did forget to mention that you would need to replace your existing 4 declarations targeting those 4 image widgets with the code I provided, try that!
-
The horizontal scroll issue @hallluke mentions can be corrected by replacing the image-X code you currently have with the following, which sets a width for each of the image widgets that is just larger than the icon images you are using and then adjusts the positioning so they are in the same place as you have them.
#image-7 { left: 345px; position: absolute; right: -100px; top: -106px; width: 50px; } #image-8 { left: 415px; position: absolute; right: -240px; top: -106px; width: 50px; } #image-9 { left: 485px; position: absolute; right: -380px; top: -106px; width: 50px; } #image-10 { left: 555px; position: absolute; right: -520px; top: -106px; width: 50px; } -
Hi,
Thank you so much for this, it worked!
The only other small problems that I have… is that when opening my blog in Safari there is a small gap between the main body and sidebar. It’s fine however when using chrome.
Also not sure what to do about the length of my sidebar?
Thanks so much for all the help.
Olivia
-
Not sure I’m understanding about the gap. I’m seeing the same when I view on Safari, Chrome and Firefox, unless I’m just missing it.
I would however suggest setting the color for the content/sidebar area in #content so that there aren’t gaps between your posts. Add this and see what you think on that note.
#content { background: #FFF; } -
Perfect, thanks! The gap has also gone now on my screen.
Is there any way I can make the white part of the page not as long after the leave a reply box?
-
-
- The topic ‘CSS Customization aligning header and main body’ is closed to new replies.
WordPress.com Forums 