CSS Positioning Issues...

Posted on 2011-10-31
Last Modified: 2012-05-12
Hi...I have a red ribbon element (image) on this site: I have the text positioned where I would like it, but I would like to move them both up about 50px to tighten the space between it and the H1 text above it. Any ideas what is causing the barrior? Thank you in advance. I am still trying to figure out this CSS stuff. :)
Question by:mellijae
    LVL 20

    Accepted Solution

    The issue seems to be on the H1 above your ribbon and text. You have a relative position of .75em set for the margin-bottom which is causing there to be quite a bit of gap betwen the H1 and the element below it.

    In your reset.css file you are setting margin:0px for your H1's
    In your style.css you are overriding this with .75em for yor H1's

    You may be able to fix this by changing the order in which your style sheets are loaded. Either way you have an inheritance issue with your H1 styles that you will need to address for this case. You can test what I'm telling you by simply putting an inline style on that H1 with the margin-bottom:0px and see how it flows.

    Author Comment

    What is a reset.css file? I am using Builder in Wordpress. Are you familiar?
    LVL 16

    Expert Comment

    Example of line for reset file, but I usually place it inside style file itself to minimise requests:
    h1, h2, h3, h4, h5, h6 {font-size: 100%;}
    ol,ul {list-style:none;}
    address, caption, cite, code, dfn, em, strong, th, var {font-style: normal;font-weight:normal;}
    table {border-collapse:collapse;border-spacing:0;}
    fieldset, img {border:0;}
    caption, th {text-align:left;}
    q:before, q:after {content: '';}
    * {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%; vertical-align: baseline;background: transparent;}
    body {line-height: 1;} 
    ol, ul {list-style: none;}
    blockquote, q {quotes: none;}
    blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
    :focus {outline: 0;}
    ins {text-decoration: none;}
    del {text-decoration: line-through;}
    table {border-collapse: collapse;border-spacing: 0;}
    a:link {text-decoration:none;}
    a:visited {text-decoration:none;}
    html, body{height:100%;margin:0;}
    body, th, td, input, textarea{font-family:Arial, Helvetica, sans-serif;font-size:12px;}
    h1, h2, h3, h4{color:#2294ff;margin:0;background-color:transparent;}
    p, ul, ol{font-size:1.1em;}
    p {margin:5px;}
    :focus {outline: 0;}

    Open in new window

    it resets all preformatted elements to original view, as <h1> should not be used for styling elements but for structure markup.
    LVL 20

    Expert Comment

    Look I dont know anything about wordpress except that a lot of people like to use it.

    At the top of your website in the head section you are calling stylesheets:

    <link rel="stylesheet" href="" type="text/css" media="screen" />
    <link rel="stylesheet" href="" type="text/css" media="screen" />
    <link rel="stylesheet" href="" type="text/css" media="screen" />

    These stylesheets are located in the folder they are referenced at and control the CSS of your page.

    It's something you'll need to look into to understand.

    Anyway it seems you have already changed your page because the space is gone so :)

    Author Closing Comment

    Thank you!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Suggested Solutions

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
    In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now