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.
Related
My webpage has a footer with 4 separate footer cols. They are separated by a 5px margin on the right and left side. They also have a green background. The Footer (containing element) has a red background but does not appear. I validated the HTML and could not find a problem with XHTML markup so I'm assuming it's a CSS woe.
Fiddle:
http://jsfiddle.net/48dk6/
Footer CSS declarations.
/* footer and descendants */
#footer {
font-size:1.3em;
margin-top:10px;
clear:both;
background-color:red;
}
/* footer col styling/positioning */
.footerCol {
background-color:green;
width:180px;
float:left;
margin:10px 5px 10px 5px;
}
Add overflow:auto to your #footer CSS:
#footer {
font-size:1.3em;
margin-top:10px;
clear:both;
background-color:red;
overflow:auto;
}
jsFiddle example
This will restore the behavior you seek, which is caused by the children .footerCol divs being floated. Floating those child divs removes them from the normal flow, so the parent behaves as if there is nothing for it to contain.
Add overflow: auto; to #footer.
When you float items inside a block element you often want to use overflow: auto or else the enclosing element gets whacky and won't show up unless you specify a height and width (which you usually don't want to do)
#footer {
font-size: 1.3em;
margin-top: 10px;
clear: both;
background-color: red;
overflow: auto;
}
In fact, you should have a height set for your footer, see jsFiddle
height:240px;
JSFiddle:
http://jsfiddle.net/48dk6/6/
Remove the floating and simply display the elements as inline-blocks
.footerCol {
background-color:green;
width:180px;
display: inline-block;
margin-left: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
The containing floats problem can be solved with 2 approaches:
Adding something with clear after the floats (the most common solution is clearfix with clearing pseudo element).
Making the container create new Block Formatting context. The most popular ways are setting to the container overflow:hidden/auto, display:table, display:inline-block (+ width, if necessary), or floating the container itself.
All approaches have their advantages and limitations, so choose what fits better in your case.
There is a proposal to add min-height:contain-floats value to solve this, but it isn't supported by browsers yet.
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.
I'm working on a mobile version for my website and I'm coming across a problem. I have an outer div that I want to stretch across the entire width, and then I want 4 divs inside of that to be of equal width, with a margin inbetween them.
This would be easy if I did not need a margin between them. I would simple set width:25% and be done with it, but I want a 3 pixel margin between them. When you set this margin, the actual widths will be more than 100%, therefor taking up more than one line in the div.
I thought about trying to set a negative margin-left, but this just gets rid of the margin on the right.
CSS:
.wrapper {
width:300px;
height:50px;
background-color:#f00;
}
.inner {
width:25%;
margin-right:2px;
float:left;
background-color:#00f;
}
And here is a fiddle so you can see exactly what I mean.
By the way, I know that I could use some jQuery or JavaScript to accomplish this after the page loads, but I wanted to know if there is a purely CSS way to do this.
You can use calc() to subtract 2px from the widths of the elements.
jsFiddle example
.inner {
width:calc(25% - 2px);
}
However, this results in a 2px margin on the last element. To fix this, add in:
jsFiddle example
.inner:last-child {
width:25%;
margin-right:0;
}
Alternatively, you could just use percentage based margins.
You can use % for your margins too. IE:
margin: 0 0 0 1%;
Just make sure to compensate the margin with a decrease in width. So instead of 25% for "inner" class, you would use 24% for the above margin implementation.
Fiddle incorporating the above
You could make the columns spread 24% and do a % based margin between them.
.wrapper {
width:100%
height:50px;
background-color:#f00;
overflow:hidden;
}
.inner {
width:24%;
margin:0 .5%;
float:left;
background-color:#00f;
}
you could use border and box-sizing to include this 2px gap inside your 25% width.
If background is not a plain color, then border should be transparent and background-color drawn as inset shadow.
.inner {
width:25%;
border-right:2px solid transparent;
-moz-box-sizing:border-box;
box-sizing:border-box;
float:left;
box-shadow:inset 0 0 0 10000px #00f;/* make it big , so it doesnt matter wich size it becomes.*/
}
http://jsfiddle.net/g5mgD/4/
width a background-image and a translucid color http://jsfiddle.net/g5mgD/9/
I would divide the 100% within elements and the margin like so:
.inner {
width:24%;
margin: 0.5%;
float:left;
background-color:#00f;
}
If you want the outer margins and the inner margins to be of the same size, you may assign specific margins to the first element.
I have a header in a website that I want to fill the top portion of the site no matter what the browser size is.
h1 {
font-family: 'Holtwood One SC';
color: #1C003A;
font-size: 4em;
}
#header {
float:left;
text-align:center;
width: 95%;
margin: 0px 20px 0px 20px;
}
<div id="header"><h1>Spilling the Beans</h1></div>
this is the CSS and HTML. The div for the header is just in the body. I don't know what to input to make this expand and shrink with the browser.
Well, if you just remove the float:left and width:95%, then it will automatically take the full width of the browser because that's the default.
If, however, you're actually talking about making the text size itself get bigger and smaller depending on browser size, you can try using Viewport Units:
h1 {
font-size:4em;
font-size:5vw;
}
It is very important to have the first one be in pt, px, em or other common unit, so that browsers that don't support Viewport Units have something to fall back on. As for the Viewport Unit, adjust as desired. You can also use vh instead of vw to adjust the text size based on the height of the viewport rather than the width.
If this isn't what you mean either, please be more specific.
you should be setting your margins in body and remove float and margin on the header
body{
margin:0; padding:20px;
}
#header {
text-align:center;
width: 100%;
background:#ccc;
margin:auto;
}
see http://jsfiddle.net/8dtqs/
im having problem adjusting the width of the toolbar, when I increase the 100px it all goes wrong, also how can I round the margin corners?
heres a demo - http://jsfiddle.net/bArx5/
thanks a lot
When you increase the width of each a element it will wrap the list (if that is what you mean with "it all goes wrong"). You can prevent this by setting a minimum width of your ul element (fiddle here):
ul#list-nav {
margin: 20px;
min-width: 700px;
}
This has to be adjusted according to the width of your a elements.
I don't really know what you mean by "how can I round the margin corners", but if what you want is a rounding of your anchor elements, you can add a border radius to them:
ul#list-nav li a:hover {
background-color:black;
color:white;
border-radius: 5px;
}