LIVE CODE
How to I fix the margin of class="content_push" to be uniform across browsers.
Chrome is giving me the view I like
vs.
IE9, opera, ff, looking like:
<div class="content_push">
<section class="cc">
<div class="margin_wrapper">
<header>
<hgroup>
<h1 class="at">rocking grass out styles for everyone.</h1>
<h2 class="ast">The you mice structure for to of almost ability an trying the when designer dissolute that constructing in quickly distinct...</h2>
</hgroup>
</header>
<h3 class="title_header">the good</h3>
<p></p>
<h3 class="title_header">the bad</h3>
<p></p>
<h3 class="title_header">the ugly</h3>
<p></p>
</div>
</section>
</div>
CSS
.mc {
min-height:100%;
width:100%;
background:#fff;
z-index:1;
position:absolute;
border-top:1px #c9cacc solid;
}
.content_push {
margin-top:-35%;
position:absolute;
z-index:10;
background:#FFF;
}
I don't know if it will work (I think it will), but you can try to "reset" the css and them apply your styles. Take a look here: http://meyerweb.com/eric/tools/css/reset/ Apply the style presented in this URL before you use your styles. There are other css resetters, do a google search.
Related
I am developing mobile application using jQuery Mobile and Phonegap. I want to divide a page into 5 parts and responsive depend on the height of the screen.
I tried this:
<div data-role="content" style="width:100%; height:100%">
<img src="www/image/1.png" style="width:100%; height:20%">
<img src="www/image/2.png" style="width:100%; height:20%">
<img src="www/image/3.png" style="width:100%; height:20%">
<img src="www/image/4.png" style="width:100%; height:20%">
<img src="www/image/5.png" style="width:100%; height:20%">
</div>
What I want is:
emaple
Thanks!
html,body{ height:100%; width:100%}
it will set height of page
As you are using jQuery Mobile, the first thing to do is size the content div to fill the screen. Have a look at this: http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/.
The script to keep the content at the height of the device screen is:
function ScaleContentToDevice(){
scroll(0, 0);
var content = $.mobile.getScreenHeight() - $(".ui-header").outerHeight() - $(".ui-footer").outerHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
$(".ui-content").height(content);
}
$(document).on( "pagecontainershow", function(){
ScaleContentToDevice();
});
$(window).on("resize orientationchange", function(){
ScaleContentToDevice();
});
Next put your 5 images within the content div, e.g.:
<div data-role="page" id="page1">
<div role="main" class="ui-content">
<img src="http://lorempixel.com/800/300/technics/1/" />
<img src="http://lorempixel.com/800/300/technics/2/" />
<img src="http://lorempixel.com/800/300/technics/3/" />
<img src="http://lorempixel.com/800/300/technics/4/" />
<img src="http://lorempixel.com/800/300/technics/5/" />
</div>
</div>
Finally use CSS to size the images:
.ui-content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
border: 0;
border-image-width: 0;
}
img {
display: block;
width:100%;
height:20%;
padding: 0;
margin: 0;
border: 0;
border-image-width: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The first rule removes all padding, margin, borders, etc. from the content div. The second one sizes the images so each one is 20% of the content div.
Here is a DEMO
This also works if you decide to include a header and/or footer on the page as the scaling code takes this into account.
DEMO which includes header
The first answer is correct, but you may find this useful as well.
It may be easier to wrap your images in divs, or use divs and set the images as backgrounds using CSS, unless you just want straight images, which may prove difficult to overlay anything else on top unless you plan on using lots of nesting and absolute positioning. I do this all the time and it works great in all browsers (old IE of course sucks but I don't code for it anymore), AND if you have clients that don't want images easily pulled from a page, putting images in backgrounds is an easy way that will deter most users who won't dig into the code.
Using css3 box-sizing will make your life much easier when dealing with percentage-based divs, as you may decide to add padding to your divs which will make things go nuts. Just check caniuse dot com to make sure that the mobile versions you are targeting support box-sizing. Most of them do, and there should be some polyfills at this link if you want fall-backs for old browsers. They are usually JS files you include in the head or footer with minimal coding.
It is also advised not to use inline CSS if it can be helped, and to use external stylesheets. Pretty standard now unless you're doing HTML emails. I understand you may know that and just put up this snippet as an example, but figure I'd mention it just in case.
Here's what I'd do in your situation:
HTML
<div class="wrap" data-role="content">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
and the css (albeit simplified for this example)
div {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
.wrap {width:100%; height:100%}
.wrap div {width:100%; height:20%}
.box1 {background:url('www/image/1.png') top left no-repeat; background-size:cover}
.box2 {background:url('www/image/2.png') center center no-repeat; background-size:100%}
.box3 {background:url('www/image/3.png') top center no-repeat; background-size:contain}
.box4 .......
you get the idea. and there's more than one way to size backgrounds which is why I showed three, and I don't know what your images are so I can't be sure how you should size them. Modern browsers don't need to have '' around the file path, but I added it for posterity.
Using the above code, you could then add this line of CSS without breaking the page:
.box1, .box2, .box3, .box4, .box5 {padding:20px}
then you could add in text, extra divs, headers, or whatever you wanted, as long as you sized them right. such as:
<div class="box1"><h2>some title</h2><p>some meaningless text</p></div>
As long as you use CSS to position those other elements, things will work fine, and you might just need to add a few #media queries to make sure they align and size properly on various screens.
also, you could use CSS3 flex-box, but support for it is still a bit buggy, and it's more complex, and you might need a bunch of fallbacks for it. You can read more about flex-box at css-tricks. I can't add more than two links to this to give you the direct links.
Hope that helps.
Okay, here you go. I added in some titles and such and a media query so you can see how things can easily be restyled depending on screen size / browser window. You would obviously need your html, head, and body tags.
Here's the working fiddle.
If you still need an explanation let me know. I personally use this method because it's fast and is pure html and css2/3. Instead of the background colors, you would put in the path to your images as I showed in my first reply.
I also adding 2px of padding just to show you that it won't break. You can make it higher, but in the small jsfiddle area it would make the text overflow without a font resize.
HTML
<div class="wrap">
<div class="box box1">
<h2>Title 1</h2>
<p>meaningless text</p>
</div>
<div class="box box2">
<h2>Title 2</h2>
<p>meaningless text</p>
</div>
<div class="box box3">
<h2>Title 3</h2>
<p>meaningless text</p>
</div>
<div class="box box4">
<h2>Title 4</h2>
<p>meaningless text</p>
</div>
<div class="box box5">
<h2>Title 5</h2>
<p>meaningless text</p>
</div>
</div>
CSS
html, body {width:100%; height:100%; margin:0; padding:0; font-family:'Helvetica Neue', Helvetica, sans-serif; font-size:16px}
div {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
.wrap {width:100%; height:100%}
.box {width:100%; height:20%; text-align:center; padding:2px}
.box1 {background:#555}
.box2 {background:#777}
.box3 {background:#999}
.box4 {background:#aaa}
.box5 {background:#ccc}
h2 {color:#fff;font-size:1.3em;margin-bottom:0}
p {font-size:.85em; font-weight:300; color:#ffcc00; margin-top:-4px}
#media only screen and (max-width: 360px) {
h2 {font-size:.9em}
p {font-size:.7em}
}
Edit: And here's the fiddle with hover states added.
I want to use CSS3 transition to add some effect to my web page. Basically, i want to make one specific section to slide on top of another one.
For example i have the following page:
And i want it to look like the following when i hover on top of a section like the following:
Here the code used:
<div class="polar">
<div class="flt-sec-left">
<a href="index.html" class='left'>home</a>
<section>
<p> Our offers are the best on the city !! Check out our amazing activities !!! </p>
</section>
</div>
<div class="flt-sec-right">
La Playa !
<section class='inv'>
<p> One of the best in the world, if not the best, garanty !!! </p>
</section>
</div>
</div>
<div class="polar">
<div class="flt-sec-left">
<a href="_web/ciudad.html" >La Ciudad !</a>
<section>
<p> Feel what your granpa felt in his youth, back to the fifties baby !! </p>
</section>
</div>
<div class="flt-sec-right">
La Excursion !
<section class='inv'>
<p> I thought pirate of the carabbean was all a hollywood set up. No ! We got it all wrong !! </p>
</section>
</div>
</div>
and the CSS:
.polar
{
width:50%;
float:left;
}
.flt-sec-left
{
width:50%;
float:left;
}
.flt-sec-right
{
width:50%;
float:right;
}
.flt-sec-left:hover
{
z-index:1;
width:50%;
transition: width 2s;
}
.flt-sec-right:hover
{
position:absolute;
z-index:1;
width:50%;
transition: width 2s;
}
So i want my home section to slide on top of la playa section(now it is just pushing it and forcing it to go down on the page).
Is it possible to do so using floating techniques (just using CSS and HTML).
Thanks.
Have a look at z-index: and position: absolute attributes.
References: here and here. Hint 'absolute'.
Now for the transitions I would recommend that we head right back over to the friendly lads at w3schools:
However depending on specifically how you want the section to "slide" over the other, you may prefer to use an animation rather than a transition.
http://www.w3schools.com/css3/css3_transitions.asp
http://www.w3schools.com/css3/css3_animations.asp
As was mentioned above, if you provide a jsfiddle of the current code you're using it would allow me, and everyone else, to be more specific.
Specificity yields results.
I'm building a site that is almost complete. The problem I am having is with IE7 and displaying images that look very distorted/muddy.
First how it looks in all the other browsers I tested, including IE8.
Removed due to link limit on new accounts
And then the muddy one from IE7
Muddy/Distorted Image
After doing some googling it looks like it has to do with the pixel transparency in PNG images on IE7.
First I tried setting a solid background color in the actual background file. This did not work as the image was still very muddy and distorted.
Next I tried specifying a fixed width and height but still the same result. Not sure what else to try at this point.
Any suggestions I am willing to try.
Here is the code pertaining to the element.
.feature {
padding-top:10px;
border-top:solid 1px #ccc;
width:440px;
margin:0 auto;
padding-bottom:5px;
}
.featureimg {
float:left;
width:190px;
}
.featureimg img {
max-height:90px;
max-width:190px;
vertical-align:middle;
}
.featuretext {
float:right;
text-align:left;
width:250px;
}
<div class="feature">
<div class="featureimg">
<img src="images/certipur.png" alt="" />
</div>
<div class="featuretext">
<div class="featurehead red">
Sealed with comfort and confidence
</div>
<p>
TEXT BLOCK
</p>
</div>
<div class="clear">
</div>
</div>
Here is the link to original file http://imgur.com/z2SoV
In case you still care: http://imgur.com/9H9nFHe
I tried using BrowserStack.com to check for the image using IE7 and it didn't look muddy at all. I guess it your VM display settings but i think it shows up perfectly fine. :)
I am trying to layout a web site but right away am having issues with IE. You can see the issue at http://dhines.com/moyatest.
If you look at the page in IE vs Firefox, you'll see two differences. The first is the top module on the right. IE is adding a 10px margin to the top, and ignoring the part in my CSS where I specify that the first-child has a top-margin:0px.
The other difference is the font. I am using a Google Web Font, which is working fine in FF of course, but in IE the font is changing every single time I refresh the page. Test it out for yourself, every page refresh changes the font. This is extremely weird because I am using Google Web Fonts on my personal site with no cross-browser issues.
CSS for the modules:
#page-modules
{width:250px; margin:0px; padding:0px; float:right;}
.module
{width:250px; margin:0px; padding:0px; margin-top:10px; background:url('../images/trans-bg.png');}
.module:first-child
{margin-top:0px;}
.module-spacer
{width:20px; height:200px; padding:0px; margin:0px; float:left;}
(The module-spacer class keeps text 20px from left side and its height controls the minimum height of a module)
And the HTML:
<div id="page-modules">
<div class="module">
<div class="module-spacer">
</div>
<div class="module-content">
Test
</div>
<div class="clear">
</div>
</div>
<div class="module">
<div class="module-spacer">
</div>
<div class="module-content">
Test
</div>
<div class="clear">
</div>
</div>
<div class="clear">
</div>
</div>
Now for the font stuff, I am adding this in the head section:
<link href='http://fonts.googleapis.com/css?family=Alegreya:400,700,400italic,700italic,900,900italic' rel='stylesheet' type='text/css'>
Then the body selector in my CSS:
body
{font-family: 'Alegreya', serif; font-weight:400; font-style:normal;}
You forgot to add a DOCTYPE declaration to your page, so IE is falling back to quirks mode. As a result, it ignores your :first-child and :hover pseudo-classes and won't render Web fonts that aren't in the EOT format (Google only serves WOFF).
Firefox is also rendering your page in quirks mode. However, it natively supports both pseudo-classes, so you don't observe the same behavior in Firefox as you do in IE.
As well as what BoltClock said, you don't appear to be setting margin: 0 on the body. IE has a default margin - which is a good thing for unstyled pages because having the text smooshed up to the edge of the window is very unattractive.
I'm trying to replicate this layout with HTML/CSS:
http://reformrevolution.com/
I think I'm getting close to what I need, but I can't get rid of the vertical space between divs, wich should be equal to the horizontal gap, and I believe the divs are not "going down" in the right order.
Here is the code:
<body>
<div class="Main">
<div class="Diagrama1">
</div>
<div class="Diagrama2">
</div>
<div class="Diagrama3">
</div>
<div class="Diagrama4">
</div>
<div class="Diagrama1">
</div>
<div class="Diagrama3">
</div>
<div class="Diagrama3">
</div>
<div class="Diagrama2">
</div>
<div class="Diagrama1">
</div>
<div class="Diagrama2">
</div>
</div>
</body>
And the CSS:
#charset "UTF-8";
/* CSS Document */
.Main {
overflow:auto;
background-color:#CCC;
display:compact,
}
.Diagrama1 {
float:left;
width:180px;
height:260px;
background-color:#00F;
margin:15px;
}
.Diagrama2 {
float:left;
width:180px;
height:150px;
background-color:#F00;
margin:15px;
}
.Diagrama3 {
float:left;
width:180px;
height:320px;
background-color:#F0F;
margin:15px;
}
.Diagrama4 {
float:left;
width:180px;
height:200px;
background-color:#CF0;
margin:15px;
}
Any ideas?
The best to keep that dynamic without exploding your head with numbers and positioning is to use JQuery and the huge amount of plugins created for that kind of stuff:
http://mos.futurenet.com/pdf/computerarts/ART162_tut_dw2.pdf
http://www.chazzuka.com/blog/?p=47
some notes on your css
It's usually bad practice to mix, margins/paddings with widths/heights. Choose one system. Tip 4 from this article
I think you'll have better success using a grid system. They're a bit tough to start with, but they work great
If you don't want a grid, try this article that i find very useful in the css world
Since you have exact heights and widths for all the boxes and you seem to have an idea of the exact place they should go, you might be better off just using absolute positioning. You'll be able to control everything better that way.
Also, you should use ids for those <div>s, not classes, since they're only going to be used once.