WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Header help *any css heads spare 5 mins? (9 posts)

  1. mag1co
    Member
    Posted 9 years ago #

    Hey im new to wordpress, i have an ok knowledge of css but im stuck as hell. I need to add a header image too the top of the blog that is the same width as the blog (http://blog.magicodesign.com/) and that sits without a gap next too the main division. This is my code ive messed with for hours and gave up (so its back as it was from the body part of the header too the end of the header code)

    <body>
    <div id="container">
    <div id="skip">
    Skip to content
    Skip to search - Accesskey = s
    </div>
    <hr />
    <h1>"><?php bloginfo('name'); ?></h1>
    <!-- Tag line description is off by default. Please see readme.txt or CSS(h1,tagline) for more info
    <div class="tagline"><?php // remove bloginfo('description'); ?></div>
    -->
    <div id="content_bg">
    <!-- Needed for dropshadows -->
    <div class="container_left">
    <div class="container_right">
    <div class="topline">
    <!-- Start float clearing -->
    <div class="clearfix">
    <!-- end header -->

    Anyone have an idea how to get a nice iamge in there? thanks!

  2. Lorelle
    Member
    Posted 9 years ago #

    There is a very good article that will help you with adding an image to your header and gives you the breakdown of how the header works and how to style it at http://codex.wordpress.org/Designing_Headers

    I've looked at your site and I don't see the gap you are talking about. I see a black "border" around your content area but it looks like it belongs since it seems to follow the pattern around.

    To help you track down your stray CSS, see:

    http://codex.wordpress.org/Finding_Your_CSS_Styles

    And we can "see" your CSS so you don't have to post it here. We're "experts at this". ;-)

  3. mag1co
    Member
    Posted 9 years ago #

    haha thanks, before i reverted i added a 0,0 top and bottom border. I had it sorted but IE was clean - firefox had what seemed to be a break of one line it wasnt the same. I had no idea where from... so i will try that link out. Thanks for the help!

  4. mag1co
    Member
    Posted 9 years ago #

    i added one using a new css style called H9. and there is always one line more added in firefox. Anyone have any ideas? - basically IE looks fine... but i use firefox and want both to match :*( maybe i did it the bad way. but i just got so bogged down with code. And now im stressed! boo

    http://blog.magicodesign.com/)

    thats the link/
    thanks

  5. Monika
    Member
    Posted 9 years ago #

    haha thanks, before i reverted
    ###

    ... I know CSS asks us for riddles, ..
    nevertheless :
    keep a civil tongue in your head.

    you would like to have the knowledge of others.....

    #########
    IE and Geckobrowsers are using margin and padding in a very different way...

    give Geckobrowsers a margin
    and IE a margin

    i.e
    margin...
    -24px 5px 7px 10px!important;
    margin...
    0px 0px 0px 0px;

    IE can't understand !important and so he ignores

    lG
    Monika

  6. mag1co
    Member
    Posted 9 years ago #

    EDIT: i created a new css tag for it. it all works with a background image. it works fine but yet again there is a space under the div and its fine in IE (i hate to say it), i added px on each and the !important.
    It makes me wanna cry. I learnt so thanks, but its still not it :(

  7. Monika
    Member
    Posted 9 years ago #

    ;)
    you haven't done what I'm said

    (my bad english I hate it ...and have to learn...)

    in your style.css there are only margins for Geckobrowsers...

    margin.. 0px 0px 0px 0px!important;

    you need ___two margins___

    here you'll find what I mean
    http://www.webdesign-in.de/wp-content/themes/at_nightfall/style.css

    try to find

    #content

    there are margins
    one for the gecko
    one for the other blue -named IE ;)

    the px ....
    try to figure it out..

    one or two or three cups of coffee for you....

    lG
    Monika

  8. mag1co
    Member
    Posted 9 years ago #

    I think i get it now

    margin:-25px 15px 0px 0px!important;
    margin:-25px 5px 0px 0px;

    I realised if i put these tags on my headerimage tag that the top ones can be set at 0 0 0 0 and it stays ok in ie,
    then editing the bottoms ones moves it in firefox. i cant work it out just yet but im getting somewhere now i think...

    thanks for that :)

  9. mag1co
    Member
    Posted 9 years ago #

    EDIT: I will mark this fixed. As i did it :) thanks BUNCH!

Topic Closed

This topic has been closed to new replies.

About this Topic