CSS Positioning Issues...

Hi...I have a red ribbon element (image) on this site: www.onlinedivorcecoach.com. 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. :)
Who is Participating?
ddayx10Connect With a Mentor Commented:
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.
mellijaeAuthor Commented:
What is a reset.css file? I am using Builder in Wordpress. Are you familiar?
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.
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="https://www.onlinedivorcecoach.com/wp-content/themes/Builder/css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.onlinedivorcecoach.com/wp-content/themes/Builder/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.onlinedivorcecoach.com/wp-content/themes/Builder/css/structure.css" 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 :)
mellijaeAuthor Commented:
Thank you!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.