Skip to:
Content
Pages
Categories
Search
Top
Bottom

Howto : put a picture between header and content


  • askunky
    Participant

    @askunky

    13 years, 7 months ago

    Hi,

    the question is as in Title ;-)
    More precisely, how can you put a pic where you want like in bettercodes.org ?

    Is it a good idea to design a simple website with buddypress ?

    thanks a lot,

    Fred

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

  • pcwriter
    Participant

    @pcwriter

    13 years, 7 months ago

    @askunky

    The image should be contained within a div whose precise placement in the header can be controlled with position:relative;
    Here’s an example styleset to get you started:

    `.my-header-image {
    position:relative;
    left:-50px;
    top:150px;
    z-index:1;
    }`

    In the above example, the top-left corner of the div will sit 50px to the left of the left edge of your header, and 150px below the top edge of the header. No width or height is defined so you can place whatever size image you want in it. Here’s how:

    `

    `

    Hope this helps! :-)


    Roger Coathup
    Participant

    @rogercoathup

    13 years, 7 months ago

    @askunky

    There are any number of ways you can do this using CSS positioning (and developing your own bespoke website theme).

    This isn’t really a BuddyPress question though, it’s a general website development / CSS question. I suggest a good book on CSS would be a starting point.

    Incidentally: There’s no need for div wrappers just to position an image (you are adding unnecessary bloat), and I’d certainly avoid inline style definitions (which can be a maintenance nightmare).

    @pcwriter – I’m not sure what you are trying to write with your CSS, but I suspect you’ve confused absolute and relative positioning. For the approach you are suggesting, you should make your main header div relatively positioned, and use absolute positioning on your image to position it absolutely in relation to the header div: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

    As to suitability of BuddyPress for a ‘simple site’ – it depends what you want that site to do – if you want user profiles, messaging, groups, activity streams, etc. – then BuddyPress gives you a great platform to build on.

    If you just want a simple content management system with posts, then you’d be better building on vanilla WordPress.

    If you don’t need content management, then your simplest site would just be HTML and CSS.


    pcwriter
    Participant

    @pcwriter

    13 years, 7 months ago

    @rogercoathup

    Oh crap, you’re absolutely right! That should have read position:absolute; :-(

    (Now that I’ve had my nap, my brain is working better.)

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Howto : put a picture between header and content’ is closed to new replies.

Topic Info

Skip to toolbar