I have a simple shading feature that goes across the bottom of the webpage regardless of size/dimensions (i hope). However, the shading box won't expand beyond the height of the words. I tried adding height variables and nothing works. Help?
footer {
position:fixed;
height:20px;
width:100%;
bottom:0;
z-index:1;
}
footer small {
width:100%;
height:20px;
float:left;
right:5px;
opacity: 0.6;
background-color: #000000;
clear:both;
margin:0 0 0 0;
color:#fff;
text-align:right;
}
footer a {
color:#fff
}
I'm not even really sure how to phrase the questions so its difficult to find answers. So any help would be appreciated.
I've cleaned up your code to make it a little easier to understand (and easier for me to explain)
// Control the shading
footer {
// sets position of element relative to window
position:fixed;
bottom:0;
left: 0;
display:block;
background-color: #000000;
opacity: 0.6;
width:100%;
height:20px;
text-align:right;
z-index:1;
}
// Control the text
footer small {
color:#fff;
}
footer a {
color:#fff
}
Here's the fiddle: http://jsfiddle.net/c9gkM/2/
A few things to know:
.footer is used to manipulate the bottom div's properties (i.e. height, background-color, etc). This should allow you to edit the shading itself easily.
.footer small is used to manipulate the text. You can declare properties like font-size, font-weight, color to it. Another trick is using line-height and declaring its value to vertically center the text inside the div (assuming it remains one line).
That's just a start; hopefully this should be a little easier to manage.
Related
I am nearing completion of my site http://csgoshack.com/shop/
I need to do one thing and this is to put a white box in the center of the screen so I am able to see the site.
I tried to do this by photoshoping a white box onto the background image but that didn't work.
How would I go about doing this?
.whitebg {
width: 1250px;
padding: 10px;
border: 1px solid black;
margin: 0;
background-color:#ffffff;
margin:auto;
position: absolute-center;
top:0;
}
First you would need to design your box using CSS and call it in using HTML.
HTML:
<div class="body-content">Insert Lists, Text, and other body content here</div>
CSS:
.body-content {
width:80%;
height:80%;
top:10%;
position:absolute;
background-color: white;
margin-left:auto;
margin-right:auto;
}
Adjust the width, the height, the positioning, and the colors to your specifications. I wouldn't change the margin-left and right because that centers the div inside of the body ( unless you don't want it exactly centered ).
Hope this helped!
I'm trying to make an useful command-line layout just using CSS. My inkscape draft looks like this:
The bottom div has a fixed height and flexible width. The top div must have both dimensions flexible.
I need this to work on mobile devicest too. In past, I have made this design using rather complicated javascript script which breaks on mobile devices.
I've been trying to do it using height in "%" but that's not very precise I guess:
div#output {
width:99%;
height:90%; //NOT A GOOD IDEA. DEPENDS ON WINDOW SIZE
overflow: scroll;// - breaks on big/small screens
overflow-x: hidden;
margin:0px;
padding:5px;
}
My question is: How to do this with no javascript? How should I fix my jsFiddle example?
I'd use calc for the height of the output window here is the updated JSfiddle
*{
margin:0px;
padding:0px;
}
html, body {
height:100%;
}
body {
background: black;
color: white;
font-family: monospace;
font-size:0;
}
div#output {
height:calc(100% - 40px);
overflow-y: scroll;
overflow-x: hidden;
padding:5px;
font-size:14px;
}
div#bottom{
height:30px;
line-height:30px;
font-size:14px;
}
The font-size:0 for the body is necessary to remove redundant spaces between the two DIVs.
Calc is subtracting 40px since the bottom is 30px and the output has a padding of 5px.
without using Calc is also possible with absolute positioning Here
*{
margin:0px;
padding:0px;
}
html, body {
height:100%;
}
body {
background: black;
color: white;
font-family: monospace;
font-size:0;
}
div#output {
position:absolute;
top:5px;
left:5px;
right:5px;
bottom:30px;
overflow-y: scroll;
overflow-x: hidden;
font-size:14px;
}
div#bottom{
position:absolute;
left:5px;
bottom:0;
height:30px;
line-height:30px;
font-size:14px;
}
Set the height of the html and body to 100%. That is what the 90% is scaling against.
I'd do it like this http://jsfiddle.net/081tcm3m/1/
There is no need to set width to block elements. It's the height important here. Setting it to 100% to body makes page fit the available screen height (if there is no margin).
edit
You are right, dimensions in % are not precise, so I decided to use position absolute and right, left, top, bottom properties to stretch div#output and make fixed margin for bottom input line.
Try http://jsfiddle.net/081tcm3m/4/
Sorry for this very basic question.
I have these two boxes containing width evenly-
.box1
{
width:50%;
height:200px;
}
.box2
{
width:50%;
height:200px;
}
Here is container div of these boxes-
.container
{
border:1px solid green;
display:inline-block;
width:100%;
}
I want to know when container div has width of 100% and its containment divs are equally divided to 50% of width.
Then after aligning them inline why isn't it coming in-line?
However reducing width less than to 50% makes them align.
Although if i align them with float attribute its shown inline-
.container
{
border:1px solid green;
display:inline-block;
width:100%;
}
.box1
{
float:right;
width:50%;
height:200px;
background:red;
}
.box2
{
float:right;
background:red;
width:50%;
height:200px;
}
I want to know the reason why it is not showing them inline whether width is equally divided?
They are inline-block, but usually when using 50% you don't count for pixel rounding and margins/padding. So, in reality, 50% would be 50% + 10px, which will cause the next div to not fit in the same line, breaking the line and dropping it below the first div instead of alongside it. If you inspect the element using Chrome's inspector or Firefox's Firebug, you will notice it doesn't take up the whole width, only just above half of it.
Your border counts as part of the element size, it's an addition and not an inclusion in the width 100%. That will cause an inline element to move onto the next line down.
The box model adds all of it's parts together to get the final size, including padding and margin:
http://www.w3.org/TR/CSS2/box.html
A normal gotcha is that when you specify border 1px you're actually adding two pixels to the final computed size, one to the left and one to the right.
Firstly I would set padding: 0; and margin: 0; incase of any browser allocated padding (user agent stylesheet - this can be seen using inspect element in chrome, or firebug for Mozilla etc), and if you are going to float them then float them left and clear the floats afterward. So you have something like this:
.container{
border: 1px solid green;
width:100%;
}
.box1{
margin: 0;
padding: 0;
float:left;
width:50%;
height:200px;
background:red;
}
.box2{
margin: 0;
padding: 0;
float:left;
background:red;
width:50%;
height:200px;
}
Should do the trick.
I wanted to use "full width" stripe on my footer, but aparently it doesen't want to work. here is the example of what I have right now.:
I want the footer to do a repeat-x over its div. So, going off until the end of the screen (like its done on the upper part). This might be something extremely simple, but I'm fairly inexperienced with CSS styles, so please lend me a hand.
[EDIT] The footer div is inside a wrapper. The edges of the div are aligned with the wrapper width. My question is if its possible for it to "overlap" the limitations, until the end of the screen.
I would also like to give it a specific position, not variable with the end of the article. I understand that I need to use it as position:absolute, but it always apears right after the header, even if I give it a Y position. There is probably something simple I'm forgetting.
Here is the existent code I have in my Footer class:
#footer {
background:url(wp-content/uploads/2012/06/whitestripe.png) repeat-x;
position:relative;
width:100%;
clear:both;
text-align:center;
line-height:16px;
font-size:11px;
}
#footer a {
padding:2px 3px;
color:#004a6a;
text-decoration:none;
}
#footer a:hover {
color:#105a7a;
}
Thank you.
Marco Roberto.
Move the footer element outside the main wrapper so that it isn't constrained by it. Inside the body will do fine for example.
Then change the css:
#footer {
position: absolute; // or fixed if you want it to scroll along
left: 0;
right: 0; // or width: 100%
bottom: 10px; // change to the value you want
}
Hey now define in your css body and html width
as like this
html, body
{
width:100%;
}
background-image:url('paper.gif');
background-repeat:repeat-X;
Try this
http://www.w3schools.com/cssref/css3_pr_background-size.asp
This will help you to study...
when I zoom-in, zoom-out my web page the position of all divs and items get disturbed.and when I again reset zoom to 100% it comes fine.Even this problem comes when open the same page in big screen laptop.How can I fix the div position.some of my css code-
/* hbg */
.hbg {
background-color:transparent;
float:left;
margin:2px 0 0 45px;
padding:65px 456px 0 56px;
width:137px;
height:190px;
background:#fff url(images/hbg_img.jpg) no-repeat top left;
}
/*solutions*/
.solu{ background-color:transparent;}
.solu_resize { margin:0 auto; padding:0; width:auto;}
.solu .smenu ul { margin:0 0 0 45px; padding:0; float:left; width:auto; list- style:none;}
.solu .smenu ul li { margin:0 0; float:left;}
.solu .smenu ul li a { display:block; margin:0; padding:0; color:#5f5f5f; text- decoration:none;}
.solu_resize img{ float:left; padding:0 0 0 0;}
........
Zoom-in and zoom-out means different things on different browsers. For instance on FF, you can zoom in "text-only." When the zoom feature affects text size, absolutely positions divs get messed up as you saw.
You can fix this problem by designing your page to be "elastic." Instead of using pixels, you define both coordinates and measurements in "em" units. An em is equal to the browser default text-size, which is usually 16px. To make life easier, reset em to 10px by putting the following in your stylesheet:
body {
font-size: 62.5%;
}
If the above code is in your style sheet, you can convert your pixels to em easily by dividing each pixel value by 10. For instance, using your code above:
margin:.2em 0 0 4.5em;
padding:6.5em 45.6em 0 5.6em;
width:13.7em;
height:19em;
This should fix the zoom problem and also allow people to change text-size when viewing your page. This won't work for your sprites and you may still run into overlapping issues. If it gets messy, you may have to consider changing your layout approach. If you do experience overlap, I'd suggest you use overflow:hidden on all your divs and specify max-height and max-width where appropriate.
If you need to read more about ems and elastic design, here's a good tutorial: http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css
And here's the W3 reference on max-height:
http://www.w3schools.com/Css/pr_dim_max-height.asp
This is because you provided absolute widths with floating elements. If you change the screen-size, the elements seem to be unsorted, because they are still of the specified size. Maybe size-definitions in percentage can help you out with this issue.