I'm trying to learn basic html&css and I was making a simple webpage with a navbar, but when I fix my header it goes over right side of the page.
<div ID="header">
<table ID="navbar">
<tr>
<td>Home</td>
<td>About</td>
</tr>
</table>
</div>
#header {
background-color: yellow;
position: fixed;
height: 35px;
width: 100%;
border-radius: 10px;
border: 2px solid red}
How can I fix this? Thanks.
Your Html file is correct but change in Css file.
CSS:
#header {background-color: yellow;position: fixed;height: 35px;width: 100%;border-radius: 10px;box-sizing: border-box;top: 0;left: 0;}
Past above code in your css file.
Here you can see working Demo.☺
add below css:
#header{
box-sizing: border-box;
top: 0;
left: 0;
}
box-sizing: border-box means that the width (100%) will contain border. Otherwise width of element would be 100% + 4px - and that is wider than your browser window
You may also get sick of default margin & padding setting in browsers, so i recommend to add:
html, body{
margin: 0;
padding: 0;
}
at the beggining of css file if you haven't already done this
You need to define spacing for left and right.
here i made a fiddle: https://jsfiddle.net/yq6zoyhk/
#header {
background-color: yellow;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
height: 35px;
width: 100%;
border-radius: 10px;
border: 2px solid red}
When you are using position:fixed you need to define the spacing from left and top, if you want it from left, add left:0; top:0; or if you want to center it then add left:0; right:0; top:0;
Related
The body in my code is a little off of the left and top of the screen, I tried removing content-box and removing margin, but it isn't working. I also tried absolutely positioning it left:0; and top:0; but none of that works, here is my code;
body {
padding: none;
margin: none;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width:100%;
height: 100vh;
border: 2px solid red;
}
Never-mind. I fixed this by simply changing margin:none;, to margin:0;.
In CSS make height and width 100% .
I'm creating a gallery with images having an overlay dark background and caption text. The placement is alright but the overlay div is falling out of the bounds of the image because a padding is used on the container element.
I read about it at several places and learned that border-box could solve this problem but it isn't. Am I doing something wrong here? Check out the code:
HTML:
<div class="dest-item">
<img src="http://lorempixel.com/500/400">
<div class="dest-caption">
<div class="dest-text">
<h3>This is a caption</h3>
</div>
</div>
</div>
CSS:
.dest-item{
position:relative;
overflow:hidden;
z-index:1;
padding:10px;
width: 500px;
}
.dest-item img{
width: 100%;
}
.dest-caption{
position: absolute;
top: 0px;
background: rgba(0,0,0,0.2);
z-index: 2;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.dest-text{
position: absolute;
bottom: 0;
background: rgba(255,255,255,0.9);
width: 100%;
padding: 0px 10px;
}
Playground link: Code Pen
Try this (fork here:http://codepen.io/anon/pen/RNqbjB)
CSS:
/*remove the padding*/
.dest-item{
position:relative;
overflow:hidden;
z-index:1;
padding:0px;
width: 500px;
}
HTML:
<!--Add a wrapper and add the padding to that-->
<div style="padding:10px;">
<div class="dest-item">
<img src="http://lorempixel.com/500/400">
<div class="dest-caption">
<div class="dest-text">
<h3>This is a caption</h3>
</div>
</div>
</div>
</div>
Remove the padding from whole dest-item div. you don't need that padding over there as I think:
.dest-item {
position: relative;
overflow: hidden;
z-index: 1;
/* padding: 10px; */
width: 500px;
}
Not sure if this is along the right lines?
.dest-item{
position:relative;
overflow:hidden;
z-index:0;
padding:10px;
width: 500px;
}
.dest-item img{
width: 100%;
}
.dest-caption{
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.2);
width: 100%;
height: 100%;
}
.dest-text{
color: black;
position: absolute;
text-shadow: 2px 2px 40px rgba(255,255,255, 1);
bottom: 0;
left: 0;
background: rgba(255,255,255,0.38);
width: 100%;
padding: 2px 0px 10px 20px;
}
<div class="dest-item">
<img src="http://lorempixel.com/500/400">
<div class="dest-caption">
<div class="dest-text">
<h3>This is a caption</h3>
</div>
</div>
</div>
You don't need border-box to do what you want.
There are 3 types of box-sizing:
content-box is the default behavior and only includes the width and height. It does not account for padding or border width. If you have an element with 500px width + 10px padding + 1px border then the display size of the whole element is 522px wide and the size of the available space for actual content is 500px.
padding-box includes the padding but not the border. Same example as above, if you are using padding-box then the display size is 502px but the available content space is 480px.
border-box covers everything. So in our example, the display size is 500px but available space for content is 478px.
Margins are never counted in the size, in any case.
Depending on how you want the end result to look, then you will achieve this differently but based on your Code Pen sample, it looks like you want to fill the entire item container so the overlay cover the 10px padding as well. You can do this without changing the box-sizing for anything.
First, you need to offset your .dest-caption element to the left by 10px to account for the padding. Then you need to add 10px padding and remove the border-box attribute.
Like this:
.dest-caption {
position: absolute;
top: 0px;
left: -10px; /* offset */
background: rgba(0,0,0,0.5);
z-index: 2;
width: 100%;
height: 100%;
padding: 10px; /* add padding */
}
With that fixed, your text and its box is misaligned and the size of the box is not well-controlled. It is affected by the margin of the H3 tag. Fix this by removing the margins from the H3 tag inside of any .dest-text elements:
.dest-text H3 {
margin: 0px;
}
Without the margins on the H3 tag, the text overlay actually disappears out of the drawable area because it's misaligned. You can fix this by offsetting .dest-text from the bottom by the .dest-caption padding width (x2). You will probably also want top and bottom padding for .dest-text.
.dest-text {
position: absolute;
bottom: 20px; /* account for padding on .dest-caption */
background: rgba(255,255,255,0.9);
width: 100%;
padding: 10px 10px; /* add top/bottom padding */
}
Code Pen Link
This question already has answers here:
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 9 years ago.
I have a DIV that I want to keep centered and docked to the bottom of the page. I've pretty much achieved that except that it lists to the right. I've setup a jsFiddle to demonstrate the problem.
I suspect that I need to adjust margins but so far my attempts have been fruitless. I tried adding:
margin: 0;
but nothing. What am I missing?
If you mean the little bit of space to the left, then I would think adding left: 0; would solve the problem.
#footer {
position: fixed;
bottom: 0;
width: 100%;
border: 1px solid red;
text-align: center;
margin: 0;
left: 0;
}
You need to watch though because you are setting the width to be 100% and also setting a border which makes the div wider than 100%.
I suspect this is the default margin/padding on the body
body {
margin: 0;
}
will fix it.
You need to set left to 0 (zero) and box-sizing to border-box!
Check this: http://jsfiddle.net/pR4P5/7/
#footer {
position: fixed;
bottom: 0;
width: 100%;
border: 1px solid red;
text-align: center;
margin: 0;
box-sizing: border-box;
left:0;
}
Have a nice day,
Alberto
Remove border: 1px solid red; and add left: 0; to #footer.
Here is the JSFiddle.
Try replacing margin: 0; with left: 0;. This should lock the div onto the left of the page, centering it. I would also not use a border, that will add on some pixels to the width and height, making it less centered. I would instead use only border-top: 1px solid red;.
Hope I helped you solve your annoying problem.
Paulie_D's answer is correct you need to add margin: 0 to the body. I'd imagine you think its not properly centred because of the border on the footer.
Try adding:
box-sizing: border-box;
to your footer element.
Change the width: 100% to
left: 0;
right: 0;
So it would become: http://jsfiddle.net/pR4P5/6/
Complete CSS:
#footer {
position: fixed;
bottom: 0;
left:0;
right: 0;
border: 1px solid red;
text-align: center;
margin: 0;
}
Result would be 100% width while you can keep your border of 1px.
Note when defining width 100% and adding a border you might be better of adding box-sizing to it.
Also, margin: 0; to body is a great way to avoid headaches.
(box-sizing: content-box; - http://quirksmode.org/css/user-interface/boxsizing.html)
To Center the div:
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}
To keep the borders included in the positioning, too:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
DEMO: http://jsfiddle.net/pR4P5/8/
Read More at:
CSS Reset: http://meyerweb.com/eric/tools/css/reset/
box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
I am trying to place a css element to the right side of the header but not sure exactly how to do it. I tried using:
position: Absolute; top: 20px; right 0px;
That would work but if you adjust the browser the text moves with it.
I created a JFiddle that you can find here:
http://jsfiddle.net/rKWXQ/
This way you can see what I am trying to do. I have a text inside a wrapped div element that says Call Now (555) 555-5555.
Here is the header element and inside of that I have a right_header element.
<div id="header">
<span class="right_header">Call Now (555) 555-5555</span>
</div>
Here is my Header CSS:
/* Header */
#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
.right_header{color: #fff; position: absolute; top: 70px; right: 0px}
Can someone please tell me the proper way to accomplish this please?
Note the left side will have a logo there that will not load in JFiddle!
Thanks!
You can easily just float it to the right, no need for relative or absolute positioning.
.right_header {
color: #fff;
float: right;
}
Updated jsFiddle - might need to add some padding/margins - like this.
Two more ways to do it:
Using margins on the element you want to position to the right of its parent.
.element {
margin-right: 0px;
margin-left: auto;
}
Using flexbox on the parent element:
.parent {
display: flex;
justify-content: right;
}
As JoshC mentioned, using float is one option. I think your situation suggests another solution, though.
You need to set position: relative on your #header element in order for the position: absolute on your #right_header to take effect. once you set that, you are free to position #right_header however you want relative to #header
You can do this way also if you want to do with position, Try this please
#header {margin: auto; position:relative; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
.right_header{color: #fff; position: absolute; top: 0px; right: 0px}
The answer using floats from JoshC will work fine, however, I think there is a reason this is not working.
The reason your code does not work, is that the absolute position is relative to the which has dimensions of 0x0.
The '' should be absolutely position in order for this code to work.
#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
change it to...
#header {margin: auto; position: absolute; left: 0px; right: 0px; top 0px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
<div><button>Continue</button></div>
to make button on the right of div
<style>
button {
display:block;
margin-left:auto;
}
</style>
I'm using Twitter Bootstrap for my wordpress site. The problem is that I just made a div as a right side bar and placed some images onto it, which seems to work fine on my desktop but when I view it on my laptop it changes its position and goes downwards.
Here is my code for the div and image placements:
<div style="position:fixed; top:188px; right:0px; border:0px solid #f00; width:25px;"><img src="http://pearlacademy.com/wp/wp-content/uploads/2012/10/delhi.jpg" style="margin-bottom:5px;">
<img src="http://pearlacademy.com/wp/wp-content/uploads/2012/10/noida.jpg" style="margin-bottom:5px;">
<img src="http://pearlacademy.com/wp/wp-content/uploads/2012/10/jaipur.jpg" style="margin-bottom:5px;">
<img src="http://pearlacademy.com/wp/wp-content/uploads/2012/10/chennai.jpg" style="margin-bottom:5px;">
</div>
May this approach helps, If I wanna use pure css, it would be somthing like this:
HTML:
<div class="sidebar">
<div class="box">Your anchor tags here</div>
</div>
CSS:
html, body {
height: 100%;
}
div.sidebar {
position:fixed;
right: 0px;
width: 25px;
height: 100%;
border: 1px solid blue; /* just for developing, remove this later */
}
div.box {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
border: 1px solid #f00; /* depends on you ;) */
height: 100px; /* unfortunately you have to set height property :| */
}
A live example here ;)