In all my pages my content fit to the body:
But where i have forms they go over the footer and body don't resize:
Where is the problem?
Your form probably contains a lot of floated elements, so you might want add this to your <form> CSS:
form {
...
overflow: hidden;
}
I have experienced something similar this week.
Try using
<div style="clear:both"/>
to encapsulate your content within your page.
<div id="mainDiv">
content
<div style="clear:both"/>
</div>
the issue is clearly with floated elements in the form. You can fix it using the micro clearfix by Nicolas Gallagher, currently the "best practice" for the issue
http://nicolasgallagher.com/micro-clearfix-hack/
Don't use overflow: hidden; as it might give you trouble if you want any element to overflow the form. (eg. select).
Also, tables are not a good idea for the layout, and empty divs to clear are not necessary.
Related
Im trying to create a horizontally scrolling gallery but I would like to avoid defining the width on the div. Someone else is touching the html - I want her to be able to drop in as many li as possible without having to touch the css and redefining the width.
The mock site is here: rachelbeen.com/Carmen.
Safari recognizes where the content ends and stops the horizontal scroll - but firefox maintains that extra space as defined by the width:6600px; on the #gallery ul. How do I stop that from happening?
Would like to avoid plugins if possible and use only CSS.
Thanks,
-Rachel
I had the same problem and I tried this:
#full{margin:0 auto; overflow:auto; height:100%; width:1050px;}
// width is just for controlling the viewport.
#holder{float:left; margin-right:-30000px;}
.box{float:left; margin:2px;}
and HTML should be like:
<div id="full">
<div id="holder">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
</div>
</div>
add many DIVs as you want and it'll make more space for you boxes without giving it a specific width. I hope it helps you.
I am trying to add an image in the header of my jQuery Mobile based web page.
I want the image to be aligned to the right edge and using CSS for this purpose. But the results are not satisfactory.
(Problem*)There is a big gap between the image and the edge and it is also not aligned with the header text.
Here is the header code:
<header data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></header>
and here is the CSS code for class align-right:
.align-right{
float:right;
margin-right: 5px;
}
No need to add custom styling or such. Jquery-Mobile already has built-in solutions for this. Just add the class 'ui-btn-left' or 'ui-btn-right' to your image (as if it were a button) and you're all set.
<header data-role="header">
<h1>My App</h1>
<img src="my_logo.png" class="ui-btn-right" />
</header>
I know the question has been asked way before, but I figured this might help those who are still looking for solutions. Besides, the question wasn't set as answered.
Based on your code example, you need a space between the alt attribute and the class attribute.
You have:
alt="Low resolution logo"class="align-right"
Should be:
alt="Low resolution logo" class="align-right"
Also, it is probably better to not have the <img /> tag inside of your <h1> element.
Check out the docs for more information on custom headers: http://jquerymobile.com/test/docs/toolbars/docs-headers.html
Something like this should work:
<head>
<style>
body{ margin: 0; }
.align-right{ float:right; margin-right: 0px;}
</style>
</head>
<body>
<div data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></div>
</body>
In my case, I was using a link as a button in my Header, and I wanted the same results where the image would show in the top right corner. I also wanted additional attributes added to the image such as no text, no corners, no disc, etc. Using ui-btn-right alone broke those other attributes. The fix was to include both ui-btn and ui-btn-right to the class, as shown below:
Options
I am trying to mask an element that has some images inside of it, using only css.
i have done this and it works fine in webkit using -webkit-mask-box-image and its doing just what i want, but im having trouble using other browsers.
gecko is supposed to work using mask, and that tag does show up in firebug, but it doesnt actually use the mask.. i've also tried converting the png im using to base64 data uri, but to no avail.
example: http://jsfiddle.net/nNLta/
does anyone know the correct way for doing this?
HTML
<div id='wrap'>
<div class='masked flashing-anim'>
<div class='the-mask' >
<ul>
<li class='blink_1'></li>
<li class='blink_2'></li>
</ul>
</div>
</div>
<div class='the-outline'>
<img src='img/real-stuff.png' height=500 />
</div>
</div>
CSS
#wrap {
position: relative;
}
.the-outline, the-mask {
position: absolute;
top: 0;
}
.the-mask {
height: 500px;
width: 360px;
-webkit-mask-box-image: url(../img/the-mask.png);
-moz-mask-box-image: url(../img/the-mask.png);
-o-mask-box-image: url(../img/the-mask.png);
mask-box-image: url(../img/the-mask.png);
mask: url(data:lotsofchars);
}
example: http://jsfiddle.net/nNLta/
Part 1
mask is not the same as mask-box-image unfortunately. If you read the (rather sparse) docs you will see it is applicable to SVG only. More on this later.
Currently Gecko doesn't support 'mask-box-image' - if you search the MDN you'll see it applies to -webkit- only.
Additionally I don't think this is actually spec. Webkit has had this capability/concept for ages (in various forms like -webkit-box-reflect) and I think that it's just a hangover from those days. I'm not sure whether this will even be adopted by all browser vendors (although I hope, and it makes sense that, it will).
Part 2
To use the svg dependant mask: css property you need to create an SVG element and reference that. Here is a guide. I've not used this technique before so I'm afraid that's all the detail I'm going to go into right now.
An alternate option
If you don't need a clever repeating/growing mask why not create a large png and overlay the text/image you wish to hide. I'm not sure I understand what you are ultimately trying to do but this seems pretty simple to me. The obvious issue is when you need the stuff behind the mask to be selectable/interactable (err..interactive that is...); for instance when you wish to apply masking to text or links. A way around this is to use pointer-events:none which is supported in Gecko and Webkit (but nothing else...). Here's more from the MDN
Sorry I don't have better news - if none of the above is helpful please feel free to leave a comment with your specific requirement and we'll see if we can't work around the browser limitations.
Hope this is helpful!
I have problem with tooltips on my magento website, I need to have one tooltip on product page which will show a HTML UL List. I tried some plugins I found but had problems with JQuery as it was disabling other prototype pop up I have on product page.
Im really a newbie at All the types of javascript and hope you experts can help me with this please.
My trigger id for tooltips is #why-to-buy
and the tooltip class in CSS is .why-to-buy-tooltip
can anyone suggest me a prototype or scriptaculous driven simple tooltip which can show HTML please?
Any help is more than welcome.
Thanks in advance.
Typically this can be done in just CSS. To start with there needs to be an anchor;
<a id="why-to-buy" href="#" onclick="return false;">
Why To Buy?
<ul class="why-to-buy-tooltip">
<li>Reason #1</li>
<li>Reason #2</li>
</ul>
</a>
The onclick is to prevent it working as a hyperlink. An anchor is necessary for older IEs to respect the following hover;
#why-to-buy {
position: relative;
}
#why-to-buy .why-to-buy-tooltip {
display: none;
position: absolute;
width: 200px;
height: 200px;
z-index: 100;
}
#why-to-buy:hover .why-to-buy-tooltip, #why-to-buy:active .why-to-buy-tooltip {
display: block;
}
If you need more info search for and read about "CSS popups". A nice touch is to add some CSS3 transitions - old browsers just ignore them and continue to work as normal.
This type of popup is limited because it is inside an anchor, and anchors cannot contain anchors. If the #why-to-buy element is of another type, such as a DIV, then IE doesn't pick up the :hover pseudoclass. For this special case a bit of JavaScript is needed after all.
$('why-to-buy').observe('mouseenter', function() {
this.addClassName('over');
}).observe('mouseleave', function() {
this.removeClassName('over');
});
Update the last stylesheet rule to include #why-to-buy.over .why-to-buy-tooltip. The bit of JavaScript is rarely needed and can go in /skin/frontend/base/default/js/ie6.js. Or you could encourage browser upgrades and choose not to support old IE at all.
A quick Google searched returned this one, and shows to support HTML:
http://www.nickstakenburg.com/projects/prototip/
It's prototype based so should work well with Magento.
What is currently considered the best way to clear CSS floated elements that will:
Keep the HTML markup as semantic and free of unnecessary elements as possible, and
Be a cross-browser, cross-platform solution that works reliably for the majority of browsers?
This isn't a graphic design question. It's a CSS one, so belongs on StackOverflow.
That said, the answer for keeping the HTML clean is simply to give the parent an overflow. So if your markup is:
<div class="wrapper">
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>
you can give wrapper an overflow:
.wrapper {overflow: auto}
And now .wrapper will contain both the floats.
That's usually all that is needed.
Sometimes, in older IEs, the container also needs a width.
You can make this more complicated, but a simple way is to add a class to your CSS called .clearfix with this attribute:
.clearfix {clear: both;}
Then just insert a tag underneath what you want to clear.
Google clearfix for more modern ways to define the tag.
The best method I've seen for this is using :before & :after pseudo elements for modern browsers and zoom: 1 for older versions of IE.
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
More info here:
http://nicolasgallagher.com/micro-clearfix-hack/
a little tricky, but it's work for modern browser :)
.wrapper::after {
content:"";
clear:both;
}