I've been trying to develop a simple page in order to try HTML/CSS and I'm trying to draw a colored column on the left side of the page using CSS. This is how I'm attempting to make it work:
#leftcolumn {
margin-top: 0px;
margin-bottom: 0px;
top: 0px;
left: 0px;
width: 60px;
height: 100%;
background-color: #276E55;
float: left;
}
And this is what I write on the HTML file:
<body>
<div class="leftcolumn"></div>
<!--rest of the code here-->
</body>
I'm assuming that since I set the column to float left, anything after it will automatically go to the space at the right of it. Also I'm setting the top and bottom margin because the document have a margin to keep the text from reaching the extremities of the page.
I'm assuming I'm doing something wrong regarding it, but I really don't know what am I missing here.
height is always based on the parents height, which is unspecified in this case. You have to use a fixed height to make the content visible. Furtermore you are using class but referencing the id (with #). Use .leftcolum instead.
Your left and top is not needed since you are not using position.
Update
To actually scale the div to 100% height you need as I specified a parent with a certain height.
You can achieve that by scaling the html and body to 100%.
html, body{
height:100%;
}
Here is the fiddle: http://jsfiddle.net/56b77g7t/1/
CSS notation is wrong... use . instead of #... and change height into pixels.. see demo below.
.leftcolumn {
margin-top: 0px;
margin-bottom: 0px;
top: 0px;
left: 0px;
width: 60px;
height: 900px;
background-color: #276E55;
float: left;
}
Click here to see the demo:
http://jsfiddle.net/fyee5nm8/1/
You are using class but your CSS is using an id (#) try changing the # for a dot (.)
Related
How would i go about making the div i am using to contain the page stretch all the way to the bottom of the page.
You can see that here: http://csgoshack.com/shop/index.php?page=cats The white div don't go all the way to the bottom of the page this is making it ugly.
Whats the best way to go about making this always stretch to the bottom of the page relative to the browser size?
Thanks.
If you need any code of the website to help me do this please ask.
EDIT Right all i really want is that white bar to stay static over the background and then let the products scroll over the white box so its always in the center of the page how is this possible?
I would move the top bar outside of the whitebg as it might make this easier.
Set your body:
padding: 0;
Set your .whitebg:
position: relative;
left: 50%;
margin-left: -625px;
top: 0;
padding-top: 60;
height: 100%;
You'll probably notice how you have a scroll bar on the right even when it isn't necessary. I think moving the top bar out of the whitebg will remove your need for the padding-top: 60 which should help get rid of the scroll.
** EDIT **
If you move the top nav bar outside of whitebg I think it works well leaving a lot of your css as-is.
.whitebg
position: absoulte;
left: 50%;
margin-left: -625px;
top: 50px;
padding: 10;
height: 100%;
** EDIT #2 **
The key here is to get your background to encompass the area you desire. Then user other inner elements to handle positioning of the contents within. If you try to add a margin or padding onto the outer most background element, you'll find that it will exceed the desired size since those will always add on to the height or width.
.holder
remove the padding-top
.whitebg
remove all padding
.bodycon
add margin-top: 50px;
change margin-bottom to a normal margin
.fotter
add a margin if desired
Try setting height: 100% on .whitebg selector
Just inspected your page..try to set the bottom: 0px; to your whitebg class
.whitebg {
..your existing code..
bottom: 0px;
}
First ill ask why you have all meta tags in body?:)
If the blue bar is fixed position you can try
html, body{
height:100%
}
.whitediv{
height:100%;
}
Or just doo simple jquery:
var docheight = $(document).height();
$('.whitediv').height(docheight);
And make it as function on window.resize
This Code should help you,
.WhiteBag{
height : 100Vh;
}
Ask if you have any doubt
Add these in style
.whitebf
{
height:800px;
width:100%;
}
this one in your footer
footer
{
position:absolute;
bottom:0px;
}
Good afternoon stackoverflow community,
I have a file with some images inside it, and I want to use each part of this image separately without creating different files. So I started to look for ways to give position through CSS to "chop" the piece that I want to show.
I tried using properties like clipwithout success. The closest I got was giving a height and background-position when inserting some random text inside the DIV.
Here's a fiddle I did to demonstrate it, but since I couldn't update a image to it I just made with background-color.
.icon {
float: left;
background-color:#6495ED;
background-position: 0 0px;
height: 29.2px;
}
http://jsfiddle.net/PatrickBDC/HaGNa/
Is there a way to show that background, the same exact size but without the text?
Thank you very much!
You need to have a width for your div as well if the div is empty. try something like this
.icon {
float: left;
background: url () no-repeat 0 0;
height: 29.2px;
width:60px;
}
If you would like your div to display without content, you need to specify width in your CSS:
.icon {
float: left;
background-color:#6495ED;
background-position: 0 0px;
height: 29.2px;
width: 50px;
}
Here is a working fiddle.
Just add width: 100px; and height: 50px;property in your code. You can add width and height as per the part of the image which you want to show.
I want to place a div fixed on the left and near I want to place other div.
Imagine a twitter webpage, I want to fixed the left panel (where you write yout tweets) and near I want to place the panel where you read tweets.
Now I have the following code:
<div id="container">
<div id=fixed-menu>
</div>
<div id="content">
</div>
</div>
#fixed-menu {
position:fixed;
background: #fff;
padding: 10px;
top:60px;
left: 10px;
width:300px;
max-width: 300px;
}
#content {
background: #fff;
padding-top: 10px;
}
In this way, the div with id="content" appear on left so, the fixed-menu doesn't appear, because it is under content div.
If I use margin-left in #content the error is solved, but I don't want use that, any other solution?
Thanks.
One of the first things to note is that by putting a position Fixed on div#fixed-menu breaks it out of the normal document flow. What this means is that the other block/inline level elements do not know about it. Also by making it fixed, you make it fixed relative to the window. If you want it "fixed" within the container and not to a certain point on the screen I would go with position:absolute and then a position:relative on it's parent container.
Either way, the problem you're experiencing where div#content doesn't respect the position of the fixed element, is due to the fact that the fixed element is no longer part of the normal document flow. Adding a z-index to div#fixed-menu should bring it above the content. However, you will see overlapping and will have to account of the offset of div#content with either margin on div#content or padding on the parent container.
If you look at this fiddle: http://jsfiddle.net/f38aj/
css:
#container {
position: relative;
height: 700px;
padding: 0 0 0 320px;
}
#fixed-menu {
position: fixed;
background: red;
padding: 10px;
top:8px;
left: 8px;
width: 300px;
max-width: 300px;
}
#content {
background: blue;
padding-top: 10px;
}
If you notice we create padding in the container, where we end up overlaying the div#container object.
we have a fixed container on the left while the right side content will scroll with the page. If you can come up with a non fixed solution it might be better, as there are phone browsers like older versions of iOS that will take anything that is position fixed and replace it with position absolute.
A side note, working with fixed/absolute positioning is useful especially in some crazy cases, but it does require a little more due diligence on your/your teams parts to maintain. If you start getting into z-indexes you might want to look at a library like less or sass just to create global css variables, which will make it easier to manage what can turn into an almost unmanageable experience.
hope that helps.
Actually this is a problem I encountered during the developing of blogger.
I want to write a navbar on my own, but the width of parent elements limit the style width:100%, even if I set the float properties to it.
Please see the image above. Only nav's HTML/JS/CSS are configurable. So how can I configure the CSS Style of class nav to archive this goal?
Or, If you have relevent experience in developing blogger, please tell me.
Thanks a lot!
use position absolute for your nav. Look at this FIDDLE
html :
<div class="first">0</div>
<div>
1
<div class="nav">NAV</div>
</div>
<div>2</div>
css :
div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }
EDIT
Your nav is in a position:relative; well you can append your nav to your body with that jquery (HERE THE FIDDLE UPDATED):
$(".nav").appendTo("body");
To achieve that kind of 'layering' you probably need to use absolute positioning, especially if your options are limited. This has the obvious caveat of taking it out of the page's flow, so you'll need to ensure your page is never too short for it to be visible. It won't affect other elements around it either.
So, something like:
nav {
left: 0;
position: absolute;
top: 400px;
width: 100%;
}
Hopefully one of its parents has a position: relative; so the nav knows where to use as an origin point when positioning absolutely, otherwise it'll use the top left of the browser pane.
You may also need a z-index value if you want your nav to appear behind the content.
Not sure if this is what you are searching for, but you can try giving your naviation position: absolute; and width: 100%;. This will get the navigation element out of the flow of the document.
I have a website here
http://trentmcminn.com/
For some reason the bottom of the page (the word Barney) is slightly cutoff by the fixed position footer. I am trying to add padding to the bottom of the body by this but it is not doing what I am trying. I am not sure what is going on. ANy help would be appreciated.
body {
padding-bottom: 100px;
height: 100%;
}
This happens because the absolutely positioned footer is overlapping with column layout.
You could either reduce the size of the columns and give them a negative bottom margin, or apply a padding to the columns like for example:
div#grid.col-4 div.column {
width: 25%;
padding-bottom: 10px;
}
html{ padding-bottom: 25px;}
This pads 25 pixels to the bottom of every page that uses the css that includes this tag. All pages should have tags enclosing the content. This is a better option then body because dynamic content and floating divs may not give the desired effect within the body. It also is handy in that it will give you a constant padding effect on all pages within the site.
Increase the margin of you div#grid.albums div.item from 30px to 50px, for example.
That will solve your problem.
Update following style rule:
div#grid.albums div.item {
margin-bottom: 30px;
margin-right: 30px;
padding-bottom: 1px;
}