Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Can I move 'pages' to header

  1. almostartist
    Member

    Hello Again.

    I have firebug installed - trying to learn and play with my blog (at this rate Ill keep on changing the CSS and never actually post anything)

    Wondering If I can move an entire 'area' to a different location?

    For example I activated PAGES - and entered an ABOUT - can I move a list or menu groups like this to be along/across the top under the header?

    So to have something , just for example, like the Blix theme where the home and about are above the blog content below the header (although in the preview i see its on the top and the side - which is a little odd I think)

    Not sure if this is something that can be done or I should look at another theme.

    I am finding moving content and positioning to be a little more confusing than some other CSS concepts

    The blog I need help with is almostartist.wordpress.com.

  2. almostartist
    Member

    oopps

    almostartist.com

    I am reading some and looking at the reddle page, http://reddledemo.wordpress.com/

    i see that its possible i mist be miss understanding what i need to do

  3. almostartist
    Member

    I may have figured it out - actually have to do this in the custom menu area, after all this CSS this custom menu area seems more confusing! LOL

  4. designsimply
    Happiness Engineer

    Content re-positioning with CSS can be tricky. To answer your question right away, it's maybe (probably) possible. :)

    But custom menus should totally be looked at first because they are a built in way to do exactly what you're trying to do in this case. Check out the help page about custom menus: http://en.support.wordpress.com/menus/

    What's confusing about them to you? (I'll try to help make it more clear.)

  5. almostartist
    Member

    thanks! I read through what you linked to and I think I understand now. also now that I can inspect the code I can see what I can change if desired.

    I was trying to change it so that the links would be centered in the page, when I changed the #access float to none - it took away the black bkgrnd behind the words/links - I wasnt sure why - as I thought the float was position, not color. Was it moving the background?

    I did get the customer header to center by adding left padding

    #access ul {<br /> padding-left: 280px;<br /> }

    but wondering if there was a easier way, this way anytime I add or remove items from the header I would have to change that value.

    and now that i look closer and on another browser its not in the same location and the categories links dropped down are a bit extended

    thank you
    almostartist.com

  6. designsimply
    Happiness Engineer

    I think the reason the background is affected is two-fold. First, depending on whether #access is displayed as block or inline depends on whether it will appear inside the header element (which has a black background). In addition, margins may be collapsing according to the box model and effectively giving the #access block no height so a background would be irrelevant. Reading up on the box model would probably be a good idea to understand these concepts a bit better.

    So, in order to center the menu bar container element with "margin: 0 auto" which is pretty typical, the element you want to center must have a width. #access is a block element with collapsed margins though and so the width matches the width of the parent element in that case. There's a trick you can use to get around that which is to display the menu bar container as "inline-block".

    First, you don't need the left margin on #access ul so delete this:

    #access ul {
padding-left: 280px;
}

    You can get rid of a lot of what you currently have for #access too. Maybe shorten it to this:

    #access {
float: none;
margin: 0 auto 3.23em;
}

    Then add this to center the custom menu:

    .menu-custom-header-container {
text-align: center;
}

#access ul {
display: inline-block;
}

  7. almostartist
    Member

    OMG you make it look so easy!!!!

    I have been going through http://www.w3schools.com/css/css_boxmodel.asp, and reading other articles in their, also have 2 CSS books (eric meyers and a pocket guide) at home but I checked and they are CSS 1 and 2 - will they still be relevant or has much changed?

    think im understanding bit by bit , so the difficulty with the way i was trying is because the parent container is not fixed, the width sizing changes depending on the browser window.

    Is there are way to have the #page a fixed width? I see
    .fixed #page {<br /> max-width: 1120px;<br /> }

    but changing that didnt change anything (to my eye) when resizing

    thanks again so very helpful,

  8. almostartist
    Member

    ooh I think I got it

    <br /> .hfeed {<br /> width:800px<br /> }

    just hope that didnt mess anything else up

  9. designsimply
    Happiness Engineer

    CSS 2.1 is the most current/prevalent spec used by all of the latest browsers. The box model link and books you mentioned are all good.

    Using this to adjust width:

    .hfeed {
width:800px;
}

    will override some of the responsive design things that make the theme automatically adjust to smaller screen sizes, so you may want to consider leaving the width flexible.

    Reddle adjusts width using padding on the body tag and has a flexible width. Consider removing the .hfeed rule and adjusting the left and right padding back to a percentage instead, like this:

    body {
background:url('http://almostartist.files.wordpress.com/2012/01/bw_contentback.jpg') repeat scroll center top #EEEEEE;
padding:0 10%;
}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags