I'm trying to get the green background color of this h1 text to go to the right side of the document, and be padded by the 50px that the body is padded in. Instead, it keeps sizing its width to the browser window upon loading. I'd also like to avoid setting a specific pixel width, as I want to use the CSS for a number of pages that all have different widths. I'm sorry if this has been answered already, I really have been looking for two hours.
Here is one of the website's pages
and here is the css (note: the text is in an h1 tag in a #neon div)
#neon h1 {
font-size:16px;
font-style:normal;
font-weight:normal;
padding:0;
margin:0;
background:#baebae;
padding:0;
margin:0;
}
body {
position:relative;
background-color:#eaeaea;
margin:50px;
padding:0px;
white-space: nowrap;
}
EDIT: https://jsfiddle.net/r4mhc8v9/
Try making the body margin and padding to 0. Then put everything BUT your neon h1 into a wrapper DIV (a div that holds the whole site) and put the previous body padding and margin setting inplace for this div.
You should be able to then make the green stripe go all the way...
Related
My client wants the background to have white spaces on sides(weird?), but I couldn't find the solution.
Basically I want to have a background and white on sides for wide screens.
NOTE AND IMPORTANT: I need this on body.
How can I do this?
Try something like this CSS on your body
body { width: 974px; margin: 0 auto; }
The margin statement means that you give your body a top- and bottom-margin of 0. The auto-value means that however much horizontal space remains after you've used up 974px, will be evenly split to add the whitespace on each side of the body.
If you don't have a wrapping container like <header>, <section> that you can apply this width to, you might find yourself a little restricted when it comes to placing content like background-images and such that should display on the sides of the body. You will be left with only the html-element as a parent to the body so that doesn't offer a lot of layers or hooks where you can add advanced styling for decoration and such... just a word of caution :)
You give your container a width (say, 1000px), and then use margin: auto on it.
Demo
HTML
<body class="outerwrapper">
<div id="innerwrapeer" class="innerwrapeer">
</div>
</body>
CSS
body {
width:1024px;
height:auto;
background-color:white;
}
.innerwrapeer {
width:800px;
height:auto;
background-color:red;
}
I am trying to build a simple div with a span of text inside of it.
<div id="bottom-text">
<span>ONE STOP</span>
</div>
And here is the simple CSS styling I have in effect for "#bottom-text":
#bottom-text{
font-weight:700;
font-size:50px;
text-align:center;
margin:auto;
position:relative;
padding-top:25px;
height:65px;
width:auto;
}
For some reason, the text "ONE STOP" displays partially outside of #bottom-text. (only the top portion of all the letters...) I've tried using padding to fix it but the text then overflows partially into the padding region!
Can anyone help me figure out why this text is displaying outside the div it is supposed to be contained within? (I've been testing Chrome and Firefox)
Thanks all.
.largefont {
color: #0066FF;
font-family:arial;
font-size: 6px;
display: inline;
}
<span class="largefont">block level span</span>
Assign a class to the span and play with that.
look at your code, the #bottom-text is 65px height, the font-size is 50px, and padding-top is 25px
65-(50+25) = -10
So you will see only the top 10 pixel of your text.
Set padding-top to a lesser amount, and play with just so it is correct
Check your line-height. Only thing I can think of is you might have some styles elsewhere that are adding some in. Try adding "line-height: 1;" to your existing #bottom-text CSS so that your text is actually 50px high. Or, if you want the text to vertically center in #bottom-text make your line-height match the height of #bottom-text (65px).
Go to unboundsonics.com to see it.
At the top of the header and bottom of the footer, you can see the diagonal pinstripes don't line up. Everything is contained in a <div> (<div id="wrap"> to be exact) tag whose margins are automatic horizontally and 15px vertically.
If I change the vertical margins to auto, this problem doesn't occur. Any tips or observations i'm overlooking?
Any help appreciated!
PS: I know my script & styles are a mess but it's a work in progress. I just need to have a rough version for a project due tomorrow.
You problem is that you set BG picture for BOTH html and Body, and the body is little smaller, thats why they don't line up.
As a quick fix you can set bg to apply only to HTML,
But a better would be to set margin for html and body to 0px, padding for html 0px, and set you padding for body, and apply a bg to body.
EDIT
Quickfix:
body,html {
margin:0;
padding:0;
color:#B8C2C9;
background-image:url('bgstripes.png');
background-repeat:repeat;
}
change to:
body,html {
margin:0;
padding:0;
color:#B8C2C9;
}
html {
background-image:url('bgstripes.png');
}
Also note, its not necessary to use background:repeat, as that's the default behaviour
EDIT2
Well I would personally do something like this:
body,html {
margin:0;
padding:0;
}
body{
background:url(bgstripes.png) #B8C2C9;
padding:15px 0 15px 0;
}
#wrap {
width:900px;
margin:0 auto;
background:#0D1325;
border:1px outset white;
}
Normally we would put a bg to the body, but instead of margins on the container we would better do padding to the parent. Because margins will not necessary pull the height of the container, especially if the parent doesn't have a padding or border. This you can notice in IE7, it would probably collapse the bottom margin.
I would like to have a border around the entire body of my web page.
I have created a layout that has a body with several div tags inside of it. I added CSS that I assumed would put a border around all content. Unfortunately the last two divs in my layout are, for some reason, being placed outside of the border.
This is the CSS I am using for the body:
body
{
position:relative;
top:5px;
width:1024px;
background-color: #f7f7f7;
padding: 5px;
border:1px solid #151515;
margin:auto;
font-family:Calibri;
}
I suspect that the reason the border is not displaying as I wish has nothing to do with this CSS. You can view the site here if you would like to see the complete CSS/HTML: http://sprocket-tools.com/
I won't bloat this post by including the verbose HTML/CSS. If you need more details on the HTML/CSS aspect please visit the link.
You have floated your DIVs, which causes the parent element to collapse. You need to have an element below them that clears, forcing the parent element to not behave this way.
<div style="height:0px; clear:both;"></div>
Put that above your </body>. That should do.
See this: http://css-tricks.com/all-about-floats/ Start with the section, "The Great Collapse"
So I have an element that is placed directly inside body:
<body>
<div id="header">Some stuff...</div>
Other stuff...
</body>
The following is the CSS used:
body{
text-align:center;
}
#header{
margin:auto;
}
So the #header div is set to 100% width (default) and is centered. Problem is, there's a "space" between the window border and the #header element... Like:
| |----header----| |
^window border ^window border
I tried adjusting it with javascript, and it successfully resizes the element to the exact window width, but it doesn't eliminate the "space":
$('#header').width($(window).width());
One solution seems to be to add the following CSS rules (and keep the javascript above):
#header{
margin:auto;
position:relative;
top:-8px;
left:-8px;
}
In my browser this "space" is 8px - but I'm not sure if that's the same across all browsers? I'm using Firefox on Ubuntu...
So what's the right way for getting rid of this space - and if it's what I used above, do all browsers act the same?
body has default margins on all browsers, so all you need to do is shave them off:
body {
margin: 0;
text-align: center;
}
You can then remove the negative margins from #header.
An easy way to solve this problem is by getting rid of all the margins. And you can do that by the following code:
* {
margin:0;
}
This will solve the problem and will give you finer control over the margins of all elements.
Add these to the style tag in body, like the following one:
body { margin:0px; padding:0px; }
It worked for me. Good luck!!
I found this problem continued even when setting the BODY MARGIN to zero.
However it turns out there is an easy fix. All you need to do is give your HEADER tag a 1px border, aswell as setting the BODY MARGIN to zero, as shown below.
body { margin:0px; }
header { border:1px black solid; }
Not sure why this works, but I use Chrome browser. Obviously you can also change the colour of the border to match your header colour.