[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 208
  • Last Modified:

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. :)
0
mellijae
Asked:
mellijae
  • 2
  • 2
1 Solution
 
ddayx10Commented:
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.
0
 
mellijaeAuthor Commented:
What is a reset.css file? I am using Builder in Wordpress. Are you familiar?
0
 
SSupremeCommented:
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;}
#wrapper{margin:0;padding:0;min-height:100%;}
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;}
h1{font-size:2em;font-weight:bold;}
p, ul, ol{font-size:1.1em;}
p {margin:5px;}
a{color:#2294ff;background-color:transparent;}
:hover{border:none;text-decoration:none;}
: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.
0
 
ddayx10Commented:
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 :)
0
 
mellijaeAuthor Commented:
Thank you!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now