i actually really like this approach that is big img background, but i want it to be fluid with windows's height as well (before we scroll down to other section or div), so before reaching mobile screen, its height can always stretch and fill the whole browser screen while logo & content inside is always in the middle
i like this site, http://peterfinlan.com/, i emailed to enquire but never get any response about how to make it, i try to follow its css, but i just couldnt make my header as its, i dont really see any other flexbox css other than div.hero-content, and yes i am new to flexbox, does it have javascript or what?
can you help me?
To make a div fill the site using flex box, you need to do the following:
<body>
<div id="mainWrapper">
<div id="headerWrapper">
<!-- HEADER CONTENT HERE -->
</div>
</div>
</body>
with the following CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#mainWrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
#headerWrapper {
flex: 1;
}
See an example in action here.
In this particular context, however, you don't necessarily need a flexbox as #mainWrapper already stretches over the complete site.
While flexbox is nice, don't force its usage just because it's new. Getting rid of flexbox and #headerWrapper wouldn't do any harm here.
Please note that I did not include any vendor prefixes here, so it may not work in all browsers as is. I recommend you use a tool like autoprefixer before you deploy your CSS.
Related
I have a client who hired me to make them a single page website. I designed and programmed it in node and such. They then informed me that they had a wix account.
Since they already paid wix for a year I would like to try to make this work for them. Since you cannot upload files to wix I have it hosted on a different domain and have an iframe pointing to that domain within the page.
The only problem is the size of the iframe. Is there a way to make the iframe 100% height and 100% width? Obviously, this is not the idea way to put up a website, but I need to work with what I have so they don't waste money.
I've tried many different ways to make this work.
I have tried embedding a link to a css file using the 'embed' feature with this code in it. And the code is there, but I get iframe-ception.
wix-iframe {
width: 100% !important;
}
I have also tried added the css to the 'custom code' section under the settings, just very basic
<style>
wix-iframe {
width: 100% !important;
}
iframe {
width: 100% !important;
}
</style>
I've also tried other 'hacks' but I can't seem to get anything to work. Any help would be much appreciated.
You can adjust iframe height according to its content
Initialize your iframe like this
<iframe src="..." frameborder="0" scrolling="no" onload="loadIframe(this);" />
add the snippet below in your <head> or <footer>
<script>
function loadIframe(elem) {
elem.style.height =
elem.contentWindow.document.body.scrollHeight + 'px';
}
</script>
I use Prestashop 1.7.5.1.
I want the description block and product details on the product page to be on the right side of the page and also fill the entire width of the page. How can I do this? What changes should be made to the product.tpl file or to the corresponding CSS file.
It is difficult to assist you because you did not post a fiddle with your HTML/CSS code, please try to edit/update your question.
However, I'm assuming you are using the default template coming with PrestaShop 1.7.x so you should have two columns with the class "col-md-6" inside your product.tpl file.
Simply put style="float:left;" on the one containing the product picture and style="float:right;" on the other.
Regarding the width of these columns, there are currently constrained by the element:
#media (min-width: 1200px)
.container {
width: 1140px;
max-width: 100%;
}
You can for the width to 100% with width: 100%; instead, I wouldn't recommend doing this though.
Final result:
I'm trying to edit a wordpress theme and I'm getting some problems with some images that just don't want to appear on IE8. Other versions of IE render the website as it should, but IE8 gives me this headache that I don't know how to cure.
Please take a look.
I really don't have any clues why this is happening.
Help!
The problem is caused by the images having this CSS rule:
max-width: 100%;
To fix it, you can remove that rule altogether if you don't actually need it, remove it just for Internet Explorer 8 (see this question), or add these two CSS rules to the parent a tag:
display: block;
width: 300px;
You have issue with your CSS on IE8. Try adding "width:30%;" on the div that holds the image something like this:
<div class="hentry post publish post-1 odd author-admin category-oferte-pelerinaje" id="post-32">
<div style="float: left; width: 30%;">
<A title="Pelerinaj la Schitul Sfantului Ierarh Modest – Judetul Arges" href="http://pelerinaje.tapet-online.ro/pelerinaj-la-schitul-sfantului-ierarh-modest-judetul-arges/"><IMG class="archive-thumbnail featured" alt="Pelerinaj la Schitul Sfantului Ierarh Modest – Judetul Arges" src="http://pelerinaje.tapet-online.ro/wp-content/uploads/2012/12/117491_ierah-modest-220x150.jpg" width=300 height=225></A>
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.
I am quite often coming across sites that respond to a click on a What's This or a Gallery link by poping up a window in front of the original page, and making the original page go dim.
Is this a fancy AJAX trick?
Is it only likely to be supported in certain browsers?
And most importantly, how is it done?
This is nothing more than adding a <DIV> that covers the entire screen, and give it a black background. jQuery's UI library will handle this for you automatically.
http://jqueryui.com/demos/dialog/#modal
Or you can do it with basic HTML/CSS/jQuery like this:
div.modal-bg {
background:#000;
position:fixed;
top:0; left:0;
width:100%;
height:100%;
z-index:10;
}
<div class="modal-bg"></div>
$(function(){
$("div.modal-bg").fadeTo("slow", .5);
});