Divide HTML page into 5 parts - html

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.

Related

Disabling auto adjusment to image in CSS when zooming in/out

<div class="footer">
<img class="fisk" src="fisk1.jpg" alt="fisk">
</div>
I have a img inside a div and i want this image to keep the same size when zooming in and out, but i can't get this to work. I feel like i have tried everything and it feels like this is not possible?
I get the text to stay the same size but not the image.
This should be the solution, it seems to stay the same even during resize!
Note: tested in my local html file, while zooming in/out!
html,
body {
width: 100%;
margin: 0px;
}
<div class="footer">
<img class="fisk" src="http://via.placeholder.com/350x150" alt="fisk" width="100%">
</div>

Zurb-Foundation CSS clip property

I want to clip an img element from a CMS when it renders on the page so that, no matter the proportion of the XY dimensions of the original image, it looks the same as other buttons on the same page. The problem is when I build it with the following code, the Foundation grid breaks on smart phones and other mobile devices. Any suggestions?
.clipsquare {
overflow: hidden;
clip: rect(0px,60px,60px,0px);
position: absolute;
}
<div class="one columns">
<a class="th" href="http://my-url">
<div class="clipsquare"><img src="myImage.jpg" alt="title" width="90"></a></div>
</a>
</div>
class .one.columns on your div with the clipsquare image isn't correct foundation classes. In a standard 12 column layout you would do the following:
<div class="row">
<div class="large-12 columns">
<!-- Column content here -->
</div>
</div>
Further, there are two other questions I'd ask here:
Why aren't you using CSS to style your buttons? and/or...
Why aren't you letting your CMS resize your images for you?
clip has been deprecated. The new property that does the same thing and even more is called clip-path. It has few gotchas though,
AFAIK rect() doesn't work either. You need to use inset().
Dimensions need to be separated by space and not commas(,).
Webkit needs a prefix and positioning is not required.
Example,
.clipsquare {
overflow: hidden;
-webkit-clip-path: inset(0 60px 60px 0);
clip-path: inset(0 60px 60px 0);
}
For more information, on this topic, refer this excellent article on CSS Tricks,
http://css-tricks.com/clipping-masking-css/

Div structure, same auto widths for every column

lets see this table:
<table border="1">
<tr><td>1111</td><td>42342324</td><td>ffffffff</td></tr>
<tr><td>11</td><td>442324</td><td>fdadasdfffffff</td></tr>
</table>
I need to do something like that but with DIV elements (sorry, boss wont allow tables). The real problem is, how to set same widths without direct setting it? I mean, if the first row is longer, then it will be actual width, otherwise the 2nd row's.
Preferably without javascript/jQuery hacking.
I'm assuming you want the "columns" to grow in width together with the content? dynamically setting the width of each div in the column?
I can't think of a way to do this with css, but some jiggery pokery with some divs might work.
<style>
.table{
border:1px solid black;
position:relative;
}
.column{
border:1px solid red;
display:inline-block;
}
.cell{
border:1px solid blue;
float:left;
clear:both;
}
</style>
<div class="table">
<div class="column">
<div class"cell">11</div>
<div class"cell">ffff</div>
</div>
<div class="column">
<div class"cell">1111</div>
<div class"cell">f</div>
</div>
<div class="column">
<div class"cell">1</div>
<div class"cell">fff</div>
</div>
</div>
I think you want to check out flexbox for modern browsers, with a JavaScript fallback for older browsers.
http://css-tricks.com/using-flexbox/
Flexbox is pretty awesome and is certainly part of the future of layout. The syntax has changed quite a bit over the past few years, hence the "Old" and "New" syntax. But if we weave together the old, new, and in-between syntaxes, we can get decent browser support. Especially for a simple and probably the most common use case: order-controlled grids
http://caniuse.com/flexbox shows pretty decent support.. IE10, FF, Chrome, Safari, and even Opera! *
*using combined "old and new" syntax
<div id="main_div">
<div id="nr1"> </div>
<div id="nr2"> </div>
</div>
and you use css to style : width ,height ,margin ,position of each div

Even out space layout (table)

For a web application I'm creating (in Umbraco, but don't think that really matters in this case) I need a page that can show an overview of different media types; audio, video and images.
No problem there, for images and videos (hosted on YouTube) I will show a thumbnail and for audio I will show a static image.
The rough layout of an item will be that the image is shown on top, and below that is some info like the title and a short description.
Now because of the difference in dimensions of the images (thumbnails can have a variable size, the audio static image will probably always be smaller than the thumbnails, etc.) one item (or column if you will) can be of less width than another.
What I would like to do is show three items per row, and when the row isn't completely filled I would like to fill it up with a colored box. But that box should not always be at the end, it could also be in between, or the beginning. It just is inserted 'randomly' when a space fill is needed.
Because a picture says more than 1000 words (wire-frame of what I'm trying to describe);
Now my question; is this at all possible? If yes, how?
I can't wrap my mind around it, it can't be done in pure HTML and CSS I think. Because you couldn't determine how big an item is and if a 'filler' is needed.
The rough HTML I have right now is something like this:
<table id="portfolio">
<tr>
<td>
<div class="portfolioItem">
<div class="portfolioItemImage">
<a rel="prettyPhoto" href="http://www.youtube.com/watch?v={video}"><img src="http://img.youtube.com/vi/{video}/1.jpg"/></a>
</div>
<br clear="both" />
<div class="portfolioItemDescription">
<h3>Title</h3>
<p>Description lorem ipsum etc.</p>
</div>
</div>
</td>
</tr>
</table>
Of course there is some more dynamic stuff in there to determine whether it is a video, audio or image, determine when to start a new row, etc. but that isn't relevant here.
Here is the CSS associated with it:
#portfolio {
width:100%;
}
#portfolio td {
width:33%;
}
#portfolio .portfolioItem {
border: 1px solid #000;
}
#portfolio .portfolioItem .portfolioItemImage {
margin:0px;
padding:0px;
}
Again; can this be done? And how?
Thank you!
I think that what you want is jQuery Masonry or the Wookmark jQuery Plugin.
I would create the grid using DIVs instead of TABLES, regardless I think this is what you are looking for?:
#portfolio td
{
min-width:33%;
}
EDIT:
Here is a rudimentary example of a grid created with DIV's:
http://jsfiddle.net/rdtnU/
<div class="con">
<div class="row">
<div class="cell">a</div>
<div class="cell">b</div>
<div class="cell is_last">c</div>
</div>
<div class="row">
<div class="cell">d</div>
<div class="cell">e</div>
<div class="cell is_last">f</div>
</div>
</div>
.con {}
.row { width:340px; margin:0 0 20px 0; overflow:hidden; }
.cell { width:100px; margin:0 20px 0 0; float:left; background:orange; }
.is_last { margin:0; }​
I would use the div's as suggested but I would not limit myself to the row/columns as stated. I would use a more fluid layout even if it is for a specified width of a certain section.
The following will only work if you know the width of the div with the content, to allow the floating to occur (this could work if there is a min-width or if your code can determine the size of the image)
Here is the HTML
<div class="elements">
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
thisonewillpushthewidthoftheboxfartherthanthe150pxwidth
</div>
<div class="singleElement">
small text
</div>
</div>
Here is the CSS (I put some simple background colors so you can see what is going on with the width and how things are tucked in where space is available.
.elements { overflow: hidden; width: 500px; background: #FCC; }
.singleElement { padding: 5px; white-space:nowrap; float: left;
height: 200px; min-width: 100px; background: #CCC;margin: 0 10px 10px 0; }
Please note the details of the styles are just for demonstrating the example. They can be altered to fit your need.
EXAMPLE: Here is the example in jsFiddle.

HTML - Given a Table, how to allow one column to be fluid without breaking the layout

I have the following:
<div style="width:100%;">
<table>
<tr>
<td style="width:30px;">hi</td>
<td style="width:40px;">hi</td>
<td id="lotoftext" style="width:auto;white-space:nowrap;overflow:hidden;">LOTS Of text in here, LOTS</td>
<td style="width:25px;">hi</td>
</tr>
</table>
</div>
What I want to happen is for this table to grow to 100% possible of the outer DIV. Problem is, that the table, with a lot of text inside, ID='lotoftext' is causing the table to grow to a width bigger than the outer div which then breaks the page.
Any ideas? thanks
can you use max-width? You might need to put a div inside that specific TD and give that the max-width
Unless it is tabular data, you should build it using DIVs and CSS. You should be able to achieve what you want with less of a headache this way.
AnApprentice, to achieve this layout using DIV's and CSS (alternate option to using tables) you could approach the situation like this:
CSS:
#body_container{
max-width:700px;
}
.data-container{
background-color:#ccc;
zoom:1;
}
.data-content_a{
width:30px;
float:left;
background-color:#3FF;
}
.data-content_b{
width:40px;
float:left;
background-color:#CF0;
}
.data-content_c{
width:25px;
float:right;
background-color:#9FF;
}
.data-content_lotsoftext{
float:left;
background-color:#FCF;
margin:-20px 26px 0 71px;
clear:left;
display:inline;
}
.clear{
clear:both;
padding:0;
margin:0;
}
HTML:
<div id="body_container">
<div class="data-container">
<div class="data-content_c">4</div>
<div class="data-content_a">1</div>
<div class="data-content_b">2</div>
<div class="data-content_lotsoftext">lots of text goes here!</div>
<div class="clear"></div>
</div>
</div>
The #body_container (or outter container) can to set to any width or no width. The left margin on the .data-content_lotsoftext is the combined width of .data-content_a and .data-content_b (70px + 1px to be on the safe side) and the right margin on .data-content_lotsoftext is the width of data-content_c (25px + 1px to be on the safe side).
By not assigning a width to .data-content_lotsoftext it will automatically stretch to be full width. display:inline helps it sit better in ie6.
Tested in Firefox, Chrome, IE8, IE7 and IE6 (IE6 and 7 are a little glitchy - if anyone could help refine the CSS to get it to work perfectly in IE6 and 7, please shout out!)
Hope this helps.
Dan
The scenario you are describing is simply not suited for a table. A table should only be used when displaying tabular data. You should be using some other kind of html elements to build your structure and style it with CSS.