I have a div on my website that won't be on the top, it's always a little bit below the top so I was looking for a way to make it be at the top without space between the div and the top, but I've had no luck yet.
Here is the CSS code I've tried so far:
.usertopbar {
display: inline-block;
background: url(images/counterbar_bg.jpg) repeat-x #111;
height: 32px;
bottom: 600px;
width: 1100px;
line-height: 30px;
text-align: left;
padding-left: 10px;
box-shadow: 0px 0px 16px #000;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
Your code looks ok (though I tend to avoid explicitly setting a height on things at all costs). I suggest including normalize.css before your own CSS. It will reset several of the browser's defaults, which is what I believe is getting in your way here. It's also the default used in the Bootstrap and Foundation frameworks, so you can bet it's one of the best reset stylesheets out there.
Set the margin and padding or your <html> and <body> to 0. To be specific, I think it is the margin of the <body> that does it, but make it a habit to explicitly set them all to 0 by default.
You forgot to add a dot (or hash) to the element. Be sure to set the margin and padding of html & body to 0. See the answer and cleaned code below. If you want to have the div sticky at the top, add position: fixed; and top: 0; left: 0; to the snippet.
html,body {
margin: 0;
padding: 0;
}
.usertopbar {
display: inline-block;
background: url(images/counterbar_bg.jpg) repeat-x #111;
height: 32px;
width: 1100px;
line-height: 30px;
text-align: left;
padding-left: 10px;
box-shadow: 0px 0px 16px #000;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
<div class="usertopbar"></div>
Related
OK, I've gotten the prelim version of my page started, but I'm having a problem with two floated div's that are wrap in header tag. Basically, I want the two rectangles to center within the containing div tag. One of the rectangles overlaps the other. I had to us positioning to be able to expand them within the container other-wise the second would jump below the first.
Here's what I've have so far.
<div id="div1" class="fluid">
<header id="headGraphics">
<div id="headRectangle1">This will be an image.</div>
<div id="headRectangle2">"This will be text adjusted using opacity."
</div>
Here is the css for the page - I have a follow-up question after we get this solved.
.gridContainer.clearfix #headGraphics {
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
font-family: "monotype corsiva";
font-size: 20px;
font-weight: 800;
width: 950px;
text-align: center;
}
.gridContainer.clearfix #headGraphics #headRectangle1 {
float: left;
width: 350px;
height: 75px;
position: relative;
border: medium solid #000000;
-webkit-box-shadow: 3px 3px 3px 1px #FF7878;
box-shadow: 3px 3px 3px 1px #FF7878;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
.gridContainer.clearfix #headGraphics #headRectangle2 {
background-color: #FFAAAA;
float: left;
/*margin-right: 50px;*/
width: 350px;
height: 75px;
position: relative;
top: -50px;
right: 0px;
text-align: center;
clear: both;
left: 100px;
margin-left: auto;
margin-right: auto;
display: block;
}
.gridContainer.clearfix #headGraphics:after {
content: " ";
display: table;
clear: both;
}
I can't remove the position tags because they give me the layout that I'm am trying to accomplish.
Let ma know if you need more info. Thank you in advance. And yes, I have searched this page and others to find a solution, but none seem to apply to my particular situation.
let me clear a few things up... and before I go any further, most of my (98%) selectors are in the boiler plate template. That being said, here the computed effects per selector:
.gridContainer.clearfix #headGraphics;
width 950px, margin 0 auto, font-family monotype weight 800px size 20px, text-align center.
.gridContainer.clearfix #headGraphics #headRectangle1;
width 350px, height 75px, display inline-block, margin rt & lft auto, position relative, box-shadow (which isn't working properly)
.gridContainer.clearfix #headGraphics #headRectangle2
width 350px, height 75px, display inline-block, position relative, top -50px, rt 0px, bot 0px, left 100px (this is to bring object up and offset from rectangle), float left, clear both, text-aligh center.
I would suggest removing the float attributes from both, then just setting both items display as inline-block, you will need to specify width and height on both cases, then apply text-align center to the parent, that will allow the child to be centered to the parents available area.
The Display: inline-block will give the two elements the possibility to behave not just like a block element, it will be both, block and inline, so you will be able to use attributes for both at the same time.
If you need an example, I can provide you with one, Just let me know!
EDIT...
Here is a working example
My JSFiddle
http://jsfiddle.net/dq185dw9/
My CSS
#headGraphics {
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
font-family: "monotype corsiva";
font-size: 20px;
font-weight: 800;
width: 950px;
text-align: center;
outline: red dashed 1px;
padding: 35px; /* remove or change if needed */
}
#headGraphics [id*="headRectangle"] {
width: 350px;
height: 75px;
position: relative;
border: medium solid #000000;
-webkit-box-shadow: 3px 3px 3px 1px #FF7878;
box-shadow: 3px 3px 3px 1px #FF7878;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-khtml-box-sizing: border-box;
box-sizing: border-box;
margin: 0px 25px;
line-height: 75px; /* remove or change if you want to have more than one line of text */
}
My HTML
<header id="headGraphics">
<div id="headRectangle1">This will be an image.</div>
<div id="headRectangle2">"This will be text adjusted using opacity.</div>
</header>
take a look at this:
Here is my css:
<style>
.backups {
border-radius: 2px;
border: 1px solid #e2e2e2;
padding: 3%;
display: inline-block;
width: 100%;
margin-right: 5px;
height: 485px;
margin: 0px;
}
.backups_header {
background-color: #E7E7E7;
}
</style>
Why are margins not working?
I want the "backups_header" to be flush with the top of the backups.
And they are, but the font probably doesn't fill its entire height. There is a bit of spacing around a the letters that make it look like a margin of about two pixels. If you select it, the highlight will reveil the actual line height.
There is no proper way to fix this, because it can be different for each font and even slightly differ on each machine (especially different OS'es), but your best bet would be to set a line-height and tweak it until it is just right.
The main reason is that you are again changing the margins below. write margin:0px above!
`<style>
.backups {
border-radius: 2px;
border: 1px solid #e2e2e2;
padding: 3%;
margin: 0px;
display: inline-block;
width: 100%;
margin-right: 5px;
height: 485px;
}
.backups_header {
background-color: #E7E7E7;
}
</style>`
i'm trying to customize a text input with css, i want the text inside it to have a margin of 10px to the left so i use:
#text{
text-indent: 10px;
border: 1px solid #333;
outline: none;
padding: 0;
margin: 0;
width: 168px;
height: 20px;
border-radius: 4px;
}
It works in all browsers except for IE10 which seems to ignore the text-indent property, how can i fix it?
<input type="text" id="text" />
you can use padding-left, it works on all browsers:
#text {
padding: 0 0 0 10px;
border: 1px solid #333;
outline: none;
margin: 0;
width: 158px; //decrease width with the same padding vale so that the width would stay the same
height: 20px;
border-radius: 4px;
}
If you want to use a special rule for IE, adding display: inline-block and a line-height, along with the text-indent rule, will fix this as well. This is an old trick for both IE7-9 as well.
input.special {
text-indent: 150px;
display:inline-block;
line-height: 18px;
}
Does the trick.
This is good if you are using liquid or responsive widths and you don't want to have to adjust your input's width on account of the padding.
It is easiest to describe this problem with pictures. How it is meant to look (works in Firefox):
firefox
In Chrome and Safari the insides of the border are square for some reason:
chrome
Here is my CSS:
.header {
width: 850px;
margin-left: auto;
margin-right: auto;
background-color: #F7F7F7;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px 40px 40px 40px;
border: 20px solid rgba(255,255,255,0.1);
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
margin-top: 20px;
}
Any ideas?
EDIT - here is a jfiddle of it: jsfiddle.net/oliverw92/pJgyu/11262/
It's a known Webkit and Opera bug: https://bugs.webkit.org/show_bug.cgi?id=23166
Until it's fixed, your only way around it is using 2 elements I'm afraid...
If you remove the alpha from the border, it works. Since you probably don't want to do that, you may be able to use two nested elements. Example here.
I think this is normal Webkit behavior when clipping to the box's padding. The padding is square, i.e., not defined by the border's curves, and so the background color overlays portions of the border.
Try this instead (via a SPAN nested inside your DIV):
CSS:
body {
background-color: #999;
}
.header {
width: 400px;
margin-left: auto;
margin-right: auto;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px 40px 40px 40px;
border: 20px solid rgba(255,255,255,0.1);
margin-top: 20px;
height: 85px;
font-weight: 100;
font-size: 70px;
vertical-align: middle;
text-align: center;
}
.header span
{
background-color: #F7F7F7;
display: inline-block;
width:100%;
border-radius: 20px 20px;
}
HTML:
<div class="header">
<span>DataLog</span>
</div>
Side Note: Aside from your code, I didn't bother adding all the vendor prefixes; I'll leave that to you.
Or you can just use a box-shadow and adjust the top margin. My example only includes the -web-kit versions
.header {
width: 400px;
margin-left: auto;
margin-right: auto;
background-color: #F7F7F7;
-webkit-border-radius: 40px;
-webkit-box-shadow: 0px 0px 0px 20px rgba(255,255,255,0.10);
margin-top: 40px;
height: 85px;
font-weight: 100;
font-size: 70px;
vertical-align: middle;
text-align: center;
}
Here is a similar JSFiddle to your first example using only your original div
I have been experiencing a similar issue. It turned out that because the container inside the container that i have added with the border-radius has a background-colour, it covers the inside of the border.
To rectify this i have added a border-radius to the child object as well as it makes it look the same.
I have a simple layout which works fine in Chrome, Safari even Opera too (OS X). The surprise for me here is Firefox. (IE and Win not tested yet).
The problem is fieldset.ownerbox isn't floating in Firefox. (The two semi-transparent fieldset below the pie-chart)
CSS rules applied here:
#owners {
position: relative;
width: 940px;
left: 0px;
margin-left: 0px;
z-index: 1;
top: -240px;
font-size: 16px;
}
.ownerbox {
width: 310px;
height: 150px;
padding: 10px;
margin-right: 20px;
float: left;
background: rgba(255,255,255,0.5);
color: #000;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.ownerbox.large {
width: 500px;
padding: 0px 10px 20px 10px;
}
Please help, what's wrong with my approach?
Readjust your widths so it takes padding into account. You can overflow-x:hidden; on #owners to see how it looks "contained".
Alternatively adjust the width on #owners.
Edit: Seems you just need to clear:both on #owners.