This is driving me nuts. What happens with "width:100%" ? Apparently it just works in IExplore, so I think it's one of those things Microsoft made up.
But then... how do you tell to a element that has to take all available parent's space in a way that all browsers can understand?
Cheers?
A block level element (display:block;) will automatically take up 100% of the width of the parent element. You can resize its width using percentages or pixels. Inline elements (display:inline;) cannot have their width modified.
If you want something to take up all the parent elements space I suggest you try something like this:
.class{
display:block;
width:100%;
}
Width:100% is certainly not a MS fabrication. Understanding things like box model and inline vs block (e.g spans vs divs) elements will help you to understand some of what you will see. The browser differences have less to do with "Width:100%" than with how browsers interpret the box model for a given element, and in particular things like margins, borders, and padding.AFAIK, all browsers will honor width:100%, but how they interpret everything else may impact how much space they give over as "100%".
Remember that 100% is 100% of the PARENT, not the WINDOW.
<body>
<div id = "one" style="width:50%">
<div id = "two" style = "width:100%" />
</div>
</body>
In this case, "two" will still only be 50% of the window wide because it is in a parent that is 50% wide. (1 * .5 = .5)
So, saying that, a specific example of baffling behavior would greatly help people give you a specific answer.
If I understand you correctly, you're asking whether width: 100% is IE-only. The answer is no; it's understood by all mainstream browsers. Source: http://www.w3schools.com/css/pr_dim_width.asp
Note that width:100% will not work on inline tags... So things like or where the property 'display' as value 'inline' are not effected.
If thats news to you I recommend grabbing a book as HTML is not something to learn adhoc.
html {
width:100%;
}
body {
background-color:#f2f2f2;
margin:0;
padding:0;
}
a {
color:#ec3f3f;
text-decoration:none;
font-weight:400;
font-style:normal;
}
a:hover {
color:#262626;
text-decoration:none;
font-weight:400;
font-style:normal;
}
p,div {
margin:0!important;
}
table {
border-collapse:collapse;
}
::-moz-selection,::selection {
background:#ec3f3f;
color:#fff;
}
.ReadMsgBody,.ExternalClass {
width:100%;
background-color:#f2f2f2;
}
#media only screen and max-width640px{
img[class=img_scale] {
width:100%!important;
height:auto!important;
}
img[class=divider] {
width:440px!important;
height:2px!important;
}
table[class=spacer] {
display:none!important;
}
td[class=center] {
text-align:center!important;
}
table[class=full] {
width:400px!important;
margin-left:20px!important;
margin-right:20px!important;
}
table table,td[class=full_width] {
width:100%!important;
}
div[class=div_scale],table[class=table_scale],td[class=td_scale] {
width:440px!important;
margin:0 auto!important;
}
}
#media only screen and max-width479px{
img[class=img_scale] {
width:100%!important;
height:auto!important;
}
img[class=divider] {
width:280px!important;
height:2px!important;
}
table[class=spacer] {
display:none!important;
}
td[class=center] {
text-align:center!important;
}
table[class=full] {
width:240px!important;
margin-left:20px!important;
margin-right:20px!important;
}
table table,td[class=full_width] {
width:100%!important;
}
div[class=div_scale],table[class=table_scale],td[class=td_scale] {
width:280px!important;
margin:0 auto!important;
}
}
Related
Problem Statement is as follows, suppose you have an header containing three elements:
<div class="logo">...</div>
<div class="search">...</div>
<div class="options">...</div>
Both logo and options have absolute withs of 220px and 294px respectively.
Elements layout arrangement is:
.logo { float:left; }
.search {float:left; }
.options { float:right; }
Now I want to make .search 100% of the window window - 220px - 294px).
The answer to this question should try to seek as answer that do not involve:
css calc function, like: .search{ width: calc(100% - 200px - 294px); }
javascript!
I thought about using a table and let the second td => 'search' calculate it's width automatically.
But seems overkill, to use a table for achieving this.
I'm curious about the answer. Don't bother making fiddles, half word is enough for me.
You can use margin for the search div:
.logo { float:left;width: 220px; }
.search {margin: 0 295px 0 221px;}
.options { float:right;width:294px;}
But for this, html markup should be ordered like this:
<div class="logo">...</div>
<div class="options">...</div>
<div class="search">...</div>
#BhojendraCLinkNepal give a traditional solution which works on old browsers, but you have to change HTML structure. Another solution works on new browsers with flex.
<style>
body {display: flex; flex-direction: row;} /* or the header container */
.logo {width: 220px;}
.search {flex: 1;}
.options {width: 294px;}
</style>
<div class="logo">...</div>
<div class="search">...</div>
<div class="options">...</div>
See here for browser compatibility.
I thought about using a table and let the second td => 'search' calculate it's width automatically. But seems overkill, to use a table for achieving this.
right, but you could take benefit of display: table-cell (widely supported from all current browsers) without actually using a table
e.g.
<div id="wrapper">
<div class="logo">logo</div>
<div class="search">search</div>
<div class="options">options</div>
</div>
Css
#wrapper { display: table; width: 100%; }
#wrapper > div { display: table-cell; }
.logo { width: 220px; }
.options { width: 294px; }
Live example(1): http://codepen.io/anon/pen/QwjBqQ
Also, on lower screen you may change the position of each block through mediaqueries,
Live example(2): http://codepen.io/anon/pen/ogjMpX
I remeber doing something to the fact of making a "container" div with display-block and then aligning the divs inside just like you would align text. But that was a while back.
You could have aloo at felxbox though http://css-tricks.com/snippets/css/a-guide-to-flexbox/ ... no script ... just css ... that does it similar.
So the final solution, that seems to me, to be more balanced is:
<div class="logo">...</div>
<div class="options">...</div>
<div class="search">...</div>
.logo {
float:left;
width: 220px;
}
.search {
float: left;
width: calc(100% - 220px - 294px);
/* fallback for browsers not support calc() */
width: auto\9; /* IE6, IE7, IE8, IE9 */
margin-left: 221px\9; /* IE6, IE7, IE8, IE9 - please ensure this equals .logo:width +1 */
margin-right: 295px\9; /* IE6, IE7, IE8, IE9 - please ensure this equals .options:width +1 */
}
.options {
float:right;
width:294px;
}
Notes on this solution: Browser hacks are not very elegant, although I tend to use them a lot for IE. If you are completely against it, I recommend you to try to emulate calc using the non-standard expression() syntax.
Thanks everyone!
Another solution could be like this one : jsfiddle
<div class="wrapper">
<div class="search">search</div>
<div class="logo">logo</div>
<div class="options">options</div>
</div>
.wrapper{
position:relative;
}
.wrapper .logo{
position:absolute;
width:220px;
top:00px;
left:00px;
}
.wrapper .options{
position:absolute;
top:00px;
right:00px;
width:294px;
}
.wrapper .search{
position:relative;
width:100%;
text-indent:240px;
}
I have several images(not background images) on my webpage, When I see the Print Preview at 100% scale, images looks fine, but My problem is that when I do a print prview with Shrink to fit scale, all the images are coming smaller than the actual size. I have not supplied any width or height attribute on IMG tag so I assume that in print preview it will load as they appear on screen. I have used below css for print media for IMG but it did not work
img {max-width:100%; }
I am expecting the same image dimension in Shrink to fit and 100% scale.
Is this possible? am I missing something in print css? Please advice.
While working on my project, when I needed to get the original size of image in print preview, I had to use !important. Otherwise, it wouldn't overwrite the style defined initially for the image on the page.
I also had to modify the height of image containers:
#media print {
.logo-container,
.img-wrapper,
img {
max-height: none !important;
height: 100% !important;
}
Do you have your images inside 'container' or 'div' etc? you should create print style for them also not just for the img elements.
I would suggest to use the same style on your elements both for screen and print , like so(this is my print.css):
/*How they look like on the print preview*/
#media print {
#poweredbyLogo{
width:213px;
}
#logoframe{
height:80px;
margin-top:6px;
}
.space{
padding-left:20px;
}
.col-md-6.a1{
background-color: #0000f6!important;
}
.col-md-6.a2{
background-color: #d3d3d3!important;
}
}
/*How they look like on the screen*/
#media screen {
#poweredbyLogo{
width:47%;
}
#logoframe{
height:80px;
margin-top:6px;
}
.space{
padding-left:20px;
}
}
Hope helps, good luck.
Also you can try this.
<img class="application-logo res-media" width="65" height="65">
#media screen {
.application-logo{
width: 65px !important;
height: 60px !important;
cursor: pointer;
margin: 25px;
}
}
#media print {
.application-logo, ._imgcont, img {
max-height: none !important;
height: 65px !important;
}
}
I created a flexible button made of three parts.
I made three parts from one picture. I think it is called "sprite" or something
Here is the css.
.commonButtonLeft, .commonButtonContent, .commonButtonRight
{
background-image:url(img/commonbutton.png);
}
.commonButtonLeft
{
float:left;
height:40px;
background-repeat:no-repeat;
background-position:left;
width:14px;
}
.commonButtonContent
{
float:left;
height:40px;
background-repeat:no-repeat;
background-position:center;
text-align:center;
}
.commonButtonRight
{
height:40px;
background-repeat:no-repeat;
background-position:right;
width:14px;
float:left;
}
Now I created another picture "commonbutton_onclick.png" for the clicked button.
And I added the following class.
.commonButtonLeft:active, .commonButtonContent:active, .commonButtonRight:active
{
background-image:url(img/commonbutton_onclick.png);
}
It didn't work well.
When I click the area ".commonButtonContent", the area only becomes the active picture.
I want to make all classes to be "commonbutton_onclick.png".
I can not use css3 in this case by the way.
Please help me.
Firstly, if the items are divs, you'll need to use :hover, not :active.
Perhaps but the entire button in a single div (class commonButton). this way you can do something like this. This will cause all 3 divs to change when the container is hovered anywhere, rather than targeting the hovering of a single piece.
Here is a JSFiddle to demonstrate.
.commonButton .commonButtonLeft
{
...
}
.commonButton .commonButtonRight
{
...
}
.commonButton .commonButtonContent
{
...
}
.commonButton:hover .commonButtonLeft
{
...
}
.commonButton:hover .commonButtonRight
{
...
}
.commonButton:hover .commonButtonContent
{
...
}
What I am trying to do is to stack an 'a' tag on top of a 'p' tag using the z-index property. So my html goes like this
<div id="personalText" >
edit
<p id="descText">{{profile.desc}}</p>
</div>
and my CSS goes like this
#editButton
{
position:relative;
z-index:2;
}
#descText
{
position:relative;
margin-top: 5px;
margin-bottom:5px;
z-index:1;
}
I believe this should stack the a on top of the p tag but that is not happening. Can anybody please explain what is that I am doing wrongly?
position: relative doesn't detach the element from the layout, so by default the element still takes up the same spot it would otherwise. relative has two purposes: to offset an element relative to its "real" position in the layout (which would require setting top, left, etc), and to serve as a non-static value so that child elements with position: absolute would position themselves relative to it.
With all that said, what you probably want in order to do what you're trying to do, is to set position: relative on the parent, and position: absolute on the edit link (at least). But that'd probably be quite ugly, as the text would likely overlap and be unreadable.
You have to also put
#personalText
{
position:relative;
}
#editButton
{
position:absolute; /* change */
top:0; /* new */
left:0; /* new */
z-index:2;
}
As Mihalis Bagos states, you need to push your #descText element upwards.
Here's the resulting CSS:
#editButton
{
position:relative;
z-index:2;
}
#descText
{
position:relative;
margin-top: 5px;
margin-bottom:5px;
bottom:25px;
z-index:1;
}
Here's the jsFiddle resulting from it.
This is a perfect use for JavaScript:
CSS
.hidden { display: none; }
jQuery
$('#descText').hover(function() {
$(this).find('a').removeClass('hidden');
}, function() {
$(this).find('a').addClass('hidden');
});
DEMO
Here's how you can put the <a> tag on top of the <p> tag: http://jsfiddle.net/gSWJB/1/
The example shows one possible use case: putting the link on top of the description, where the link might only be shown when the user hovers over it.
yesterday i just developed magento website but i have problem with how to fix banner overlaps because this DIV just overlaps the menu...i try to seperate and use ie7 stylesheet but nothing happen.. :(
http://thaiamuletstore.com/main1/index.php/
try to hover menu --> STORE-> Amulet Types->Great Jatukham
ie7.css
#charset "utf-8";
/* CSS Document */
#example-one .nav { overflow: hidden; margin: 0 0 0 0; background:url(../images/tab-border.gif) repeat-x 80px; height:87px; }
.block-subscribe { padding-left: 15px!important; padding-right:15px; margin-top:20px;}
.nav-container { float:left; }
.mw_footer { clear:both!important; }
.account-login .col2-set .registered-users { width:435px; }
.account-login .col2-set .new-users { width:430px; }
.account-create .buttons-set { width:550px; }
.block-subscribe { padding-left:5px!important ; height:127px; padding-bottom:0px!important }
.block-content .newsbut { height:21px!important; }
ul li ul li ul li a.level1 { zoom:1; } <-- i try control with this
There are a couple of options.
The easiest, if possible, is to place your menu at the bottom of the page and then move it up via absolute positioning. This is because IE sucks at z-index and the easiest way to trick it is to have the html code generate as the last item (placing it on top of all other html).
This will however not work with Flash, silverlight or java-applets which will still sneak on top.
Alternatively you can (however i like the first option more) place an IFRAME under your menu filling out the area you want it to cover. This "fixes" most of IE's whacky ideas about positional elements. But like i said, if you can move your menu to the bottom of the html page, then that is your best bet.