I created a navigation bar for my school project (I'm doing basic design, then we're adding the mysql database), and the bar works great, but it does not extend to the bottom of the page, it's just a little box right now.
Here's my style script
style type='text/css'>
#navigation {
display:block;
width:150px;
float:left;
margin-left:7px;
margin-right6px;
margin:5px;
border-style:solid;
}
#navhead {
text-align:center;
margin-left:7px;
margin-right:6px;
}
#links {
display:block;
width:60px;
}
</style>
Am I missing any attributes that say 'extend to bottom of frame?'
Thanks!
You need to use the height property. You can set the height to 100% (the height of this parent, so the <body>) but it will looks weird, because it will render the height + the padding + border + margin.
You need to use the border-box property with the height. It allows you to define if the padding and/or border (or none, by default) are count in the height and width properties. You also needs to kill the margin-top and margin-bottom.
After those changes, here what your CSS should look like :
#navigation {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 150px;
height: 100%;
float: left;
margin-left: 7px;
margin-right: 5px;
border-style: solid;
}
Related
So I followed this tutorial on centering content, it's a two column layout.
Tutorial
Here is the code for the completed product:
https://jsfiddle.net/dppttuvn/
My problem is, as soon as I change the #wrap width and then #main and #sidebar width so it fills the #wrap width, the layout completly screws up. As shown in this link:
https://jsfiddle.net/dwzvoarv/
The sidebar isn't to the right of the main section.
Can someone briefly explain why this happens and also fix it?
Thank you! (I'm still learning web development clearly lol)
It's because of the box-sizing. By default, browsers separate padding and width, so basically the total width of your element is padding + width.
Lets say your element is 1000px, with a padding-left: 100px. What the browser will do by default is paint the element as being 1100px because that extra padding isn't included in the width (by default).
Add this selector to the top of your stylesheet...
* {
box-sizing: border-box;
}
...and what this is doing is telling every element on the page (thats what the * selector with no parent selectors does) and sets the box-sizing property of it to border-box, meaning that the browser will now respect the width property as the actual total width.
So now if you have a 1000px element with padding-left: 100px, then the total width will still actually be 1000px including that padding.
You have to account for padding when you set widths. So to get 1000px you set #main to 700px and #sidebar to 300px. However since there is a 10px padding all around you have to subtract those pixels 10px left and 10px right. so your #main should be 680px and #sidebar should be 280px. Run this code in JS Fiddle and you can see it working.
body,
html {
margin: 0;
padding: 0;
color: #000;
background: white;
}
#wrap {
width: 1000px;
margin: 0 auto;
background: #99c;
}
#header {
padding:5px 10px;
background:#ddd;
}
h1 {
margin:0;
}
#nav {
padding:5px 10px;
background:#c99;
}
#main {
float:left;
width:680px;
padding:10px;
background:#9c9;
}
h2 {
margin:0 0 1em;
}
#sidebar {
float:right;
width:280px;
padding:10px;
background:#99c;
}
#footer {
clear:both;
padding:5px 10px;
background:#cc9;
}
#footer p {
margin:0;
}
/* Navigation Bar */
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav li {
display: inline;
margin: 0;
padding: 0;
}
That's because the actual size of the divs is width + padding + border.
Use:
div{
box-sizing:border-box;
}
To get the desired behaviour. Read more at https://developer.mozilla.org/en/docs/Web/CSS/box-sizing
Updated fiddle: https://jsfiddle.net/dwzvoarv/4/
Specifically for your example, you can fix it by changing the wrap width to 1040px:
#wrap {
width: 1040px; /*instead of 1000px*/
}
width of wrap = width of main + width of column + padding of main (right and left) + padding of column (right and left)
= 700 + 300 + 20 + 20 = 1040px
For the purpose of adding a button later, I have placed my images inside of their own individual div. After this, I tried to reapply the border radius that was working previously and it is not applying to the image. However when I use it on an item not in a div it works fine.
.image1 {
padding:0 13px 0 0;
float: left;
width: 220px;
border-radius: 40px;
}
You should add overflow: hidden; container div's css. Because you're applying border-radius on a div. border-radius not for <img> tag according in your code. Also you have padding on container div. So you should be add box-sizing: border-box; to fix it. Read more about box-sizing
FIDDLE HERE
.image1 {
padding:0 13px 0 0;
float: left;
width: 220px;
border-radius: 40px;
overflow:hidden;
box-sizing:border-box;
}
very common question I know, but I'm still struggling having read similar questions.
I have two divs (containing a variable height text box paragraph and a fixed height image) within a container div, as follows:
<div class="error-row row">
<div class="error-value-col">
<p class="error-value">{{error.message}}</p>
</div>
<a class="cross-link">
<img class="cross" src="/assets/cross.png" alt="close">
</a>
</div>
The accompanying LESS file is:
.error-row {
border: 1px solid #po-yellow;
border-width: 0px 1px 1px 1px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
position: relative;
margin: 0px;
.error-value-col {
float:left;
vertical-align: middle;
display: inline-block;
width: calc(~'100% - 70px');
.error-value {
font-size: 10px;
padding: 5px;
p {
margin-bottom: 0px;
}
}
}
.cross-link {
padding: 0px;
float: right;
vertical-align: middle;
display: inline-block;
height: 70px;
img.cross {
margin: auto;
width: 70px;
height: 70px;
padding: 28.5px 27.5px 26.5px 27.5px;
color: black;
}
}
}
I've tried several different combinations of settings but none seem to work. I want whatever the element with the smallest height is (out of the image and text box) to centre alongside the taller element.
Thanks all.
EDIT: Clarification...I want the error-value-col and cross-link to be centred on the error-row container. This will of course be sized to the largest element out of the two, which could be either.
I changed approach and use display:table and display:table-cell to obtain desired behaviour. Look at this updated jsFiddle to see if it's acceptable for you (converted LESS in CSS there).
Apart design rules, relevant new ones to LESS code are the following:
.error-row {
...
display:table;
width:100%;
.error-value-col {
...
display:table-cell;
vertical-align:middle;
.error-value {
...
p {
...
}
}
}
.cross-link {
...
display:table-cell;
width:70px;
vertical-align:middle;
img.cross {
...
}
}
}
Please refer to jsFiddle to see all differences including erasing of floating.
ALTERNATIVES:
Vertical aligning is (strangely) an hard topic in CSS, at least if
you don't want to use relatively new Flexbox model.
Generally a very common method is to absolute positioning inner DIV
with top:50% but due to fact that reference point is top-left
corner, then you have to push up it of "half of its height" with a
negative margin-top. This requires to have a fixed height of inner
DIV, in order to set this negative margin to half of it.
I have a simple div with width:100%and position:fixed to bottom.
This is my CSS:
#footer {
width: 100%;
border: 1px solid #000000;
position:fixed;
bottom: 0;
margin:0 5px;
}
When I apply margin left and right using the shorthand property, the footer is being pushed to the right which is very strange.
I created a fiddle for you to play with: Fiddle Demo
You could use calc():
jsFiddle example
#footer {
width: calc(100% - 12px);
border: 1px solid #000000;
position:fixed;
margin:0 5px;
}
body {
margin:0;
padding:0;
}
The 12px in the calc comes from the 5px of each margin, plus the 1px for the left and right border.
Or option #2 (no width or calc() needed). Simply set the left and right to 5px and the footer will stretch the full width, minus those amounts:
#footer {
border: 1px solid #000000;
position:fixed;
left:5px;
right:5px;
}
body {
margin:0;
padding:0;
}
jsFiddle example
I would do two things:
Set box-sizing: border-box. This will ensure paddings dont affect the outer width of your element.
Set margin and padding to 0 for html and body elements as these have applied a margin by default in most browsers.
You can now set the element padding instead of trying a workaround with the margin values.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
#footer {
width: 100%;
border: 1px solid #000000;
position:fixed;
padding:0 5px;
}
Can be tested in this JSFiddle
You could use bottom: 0; In my code below I also used padding rather than margin, padding will affect the 'margins' within the div where as margin refers to the outside.
#footer {
width: 100%;
border: 1px solid #000000;
position: fixed;
margin: 0px;
bottom: 0px;
padding: 0px 5px;
}
http://jsfiddle.net/3w6xE/3/
As an alternative to using calc(), (which I think is a good solution, despite the limited browser support), you could wrap the element:
<div class="footer_wrapper">
<div class="footer">test</div>
</div>
The parent, wrapper element is fixed with a width of 100%, and the child .footer element has the margin. As others have mentioned, use box-sizing:border-box in order to include the border in the element's width calculations. Support for box-sizing can be seen here.
Example Here
.footer_wrapper {
width: 100%;
position:fixed;
}
.footer_wrapper > .footer {
border:1px solid #000;
margin:0 5px;
box-sizing:border-box;
}
As an alternative to using a margin, you could also just add left:5px/right:5px.
If you want the reason behind why your example was behaving as it was, it's simply because a fixed element's position is relative to the viewport. The element therefore has a width of 100%, of the window thus explaining why the margin wasn't behaving as expected. Usage of calc() allows you to subtract the margin from the width.
http://designobvio.us/vodka/ Live demo
I've set my html, container, main and 100% but nomatter what I do I cannot get the border to be 100% height without scroll bars?
How can I achieve an effect?
HTML
<div id="main">
</div>
CSS (not currently the live code but this is what i've tried )
html, body{height:100%; width:100%;}
#main{height:100%; position:absolute; top:0px; bottom:0px; left:0px; right:0px; border:5px solid #000;}
By default the borders, margin and padding are not part of width/height and are added on top. That's why you get scrollbars as the full dimensions of the box are 100% in height and width plus the border-width.
You can set the box-sizing property to border-box, which tells the browser to include the calculation for borders and padding in the width/height properties (in opposite to content-box, which is the default value):
#main {
box-sizing: border-box;
[...]
}
As especially IE8 and the earlier version of the other browser families don't support this css-property, it's a good idea to add some browser-specific definitions, too:
#main {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
Take a look at the mozilla doku for detailed information on box-sizing.
I know this is an old post, but as it pops up on Google first page... Here is my solution that seems to work fine cross browsers:
height: 0:
border-style: solid;
border-width: 8vw 0 0 100vw;
border-color: transparent transparent transparent red;
Just used it for an :after pseudo-element in order to turn it in a triangle shape and it works just fine (test down to ie10).
Simply use 100vw instead of 100% and it should do the trick.
Are you looking for a fixed border or dynamic border? The problem with your code is the W3C box-model. In the default model, padding, margin and border are added to the size of your element. So in your code what you're really telling it is "make the box 100% and then add 10px worth of border".
Normally an easy change would be to manually switch the box model, but unfortunately that property does not play nice with height: 100%. So you have a few options:
1) If you are looking for a fixed border, this is a good trick: http://css-tricks.com/body-border/
2) If you need a dynamic border, you need to somehow get around the additional height the border adds. Here is one way:
html,body { height:100%; padding: 0; margin: 0; }
#container {
min-height:100%;
border-right: 5px solid #000;
border-left: 5px solid #000;
position: relative; /* relative postion so we can absolutely position footer within it */
}
#header {
height: 100px;
border-top: 5px solid #000;
background-color: red;
}
#content { padding: 0 0 100px 0; } /*padding must be equal to the height of the footer*/
#footer {
height: 100px;
border-bottom: 5px solid #000;
background-color: blue;
position: absolute;
bottom: 0;
width: 100%; /* with absolute position, a width must be declared */
}
HTML
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
jsfiddle here: http://jsfiddle.net/Qw2cb/
You can give box-size:border-box; to 'main', like
#main{
box-size:border-box;
}
Doing so the border will be added to 100% height of main. Learn more about box sizing here
So, you are saying that you do not want to display scrollbars?
CSS:
#main
{
overflow: hidden;
height: 100%;
position: absolute;
margin: 0px;
}