I am designing a fluid layout and am thinking on the right approach to code the layout ..Below is the structure which i am thinking;
<body>
<div id=container>
<div id=col1></div>
<div id=col2></div>
</div>
</body>
For the CSS, I am thinking of coding the container as {width:90%;margin:0 auto;overflow:hidden}
For the 2 cols, they would be floated left with some % widths..
As you can see, since i want a fluid layout, i am not using px value anywhere..
My other requirements are;
1 It should adjust based on viewport automatically e.g. Same html page when viewed on desktop or iPad (to some extent mobile phone) should adjust proportionally with respect to viewport..
2 It shoukd be compatible across most of the desktop browsers and iPad with easily extensible in future for other tablets..
3 The page should appear center aligned (not sure if There would be enough space for this on iPad)
Pleasepoint any issues you may think can Be caused by the above structure or css..
Please suggest if my HTML and CSS code (specially the container) are coded correctly..I am a bit aprehensive about getting this right, as the same is going to be applied to almost 500+ htmls...So woukd not want to get into any kind of major issues at a later stage..
Please suggest as many ideas..I am open to all of them..
Thank you..
You could do that quite easily in terms of it being flexible:
(I have left the styles inline because i'm lazy right now!)
<div id="container" style="width:90%; margin:0 auto; overflow:hidden">
<div id="col1" style="float:left; width:50%; background:#f90">COLUMN1</div>
<div id="col2" style="float:left; width:50%; background:#f00">COLUMN2</div>
</div>
The 90% width on the container with be 90% of the viewport. The columns will be 50% of the calculated 90% width whatever that may be.
I would use masterpages or similar so if you did indeed need to change things around you would have to apply it across each html page :)
Also although the columns will be fluid your content could determine minimum widths - e.g. if you have an image in one column that is 500px wide then the minimum width of that column will be 500px when resized and might cause you issues. In short you need to consider the type of content you will have of the site and how that could potentially affect layout.
Related
I am using Bootstrap (2.3) on a responsive web site.
We have a lot of data tables which simply do not fit on the mobile screen horizontally, even after removing all unnecessary columns. If nothing is done, these <table>s cannot shrink enough, break mobile layout on iOS by expanding outside the page horizontal pages and triggering the page zoom (though no other elements on the page scale).
For now, the solution is to wrap <table> to overflow <div>
<div style="overflow: auto">
<table class="table>
</table>
</div>
This makes the table scrollable horizontally. Applying overflow: auto on <table> itself does not seem to do anything, so the table must be wrapped. Questions
Are there any other methods making horizontal <table>s mobile friendly? Some special CSS rules that could help here?
Could overflow: auto applied on the <table> itself through CSS pseudo selectors, so that it would overflow properly?
I've heard Foo Tables are pretty good at displaying tabular information in low resolutions/responsive environments.
This should intrigue CSS specialists. Here is a situation where I experimented two different behaviors for the box model support :
On one side :
All standard browsers (IE, Chrome, Firefox, Opera, etc., from IE7+, etc., and even Safari for iPad or iPhones with iOS6+)
On the other side :
Some mobile browsers (tested iPhone/iPod, and on Samsung Galaxy Ace (Android) devices).
Here is the HTML
<div class="parent">
<div class="floatright">Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent </div>
<div class="nofloat">Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content </div>
</div>
CSS
.parent {
background: yellow;
width: 400px;
height: 200px;
}
.nofloat {
background: pink;
float: none;
margin-right: 20px;
overflow:hidden;
}
.floatright {
background: orange;
float: right;
width: 200px;
margin: 0;
padding: 0;
}
You can test it here : http://jsfiddle.net/Kyk2P/1/
Now here is the story :
In standard browsers, the .nofloat element spans the full width of its parent, because it is not floated. The .floatright element floats "over" it on its right side and for this reason, pushes its content to the left. The property overflow: hidden; does one more trick: instead of having the text wrapping the floated element, it stays in a column on the left. The floated element technically only pushes the "content" of the .nonfloat container, not the container itself, which has the following result : no margin is therefore visible, as it is applied to the right of the .nofloat container which is actually "covered" by the floated element. This is the normal result one would expect.
On an iPod (iOS5) or Samsung Ace device, the result is different. It seems like the The .nofloat element only fills the room in the parent container that is left empty after the .floatright has been floated to the right. Result : the container itself finds a narrower context in which to apply its margins and wedges on the floated element. In this case, we get a margin between the content (in fact, the container...) and the floated element.
An image being better than words, here is what happens :
My questions are :
Is this normal?
What way should the CSS rule be expressed so that we get the same result (preferably case #1) in both cases?
--- EDIT ---
Thanks to Angelin, I know now that iPhones with iOS6 get Case#1. However, iPhones with previous iOS and Android phones do get case#2. Nightmare!
According to CSS2.1 spec, this is a situation with undefined exact behavior. Since the .nofloat block has overflow:hidden, it establishes the new block formatting context. The spec says the following about this situation:
The border box of a table, a block-level replaced element, or an
element in the normal flow that establishes a new block formatting
context (such as an element with 'overflow' other than 'visible')
must not overlap the margin box of any floats in the same block
formatting context as the element itself. If necessary,
implementations should clear the said element by placing it below any
preceding floats, but may place it adjacent to such floats if there is
sufficient space. They may even make the border box of said element
narrower than defined by section 10.3.3. CSS2 does not define
when a UA may put said element next to the float or by how much said
element may become narrower.
So I believe this is normal. Both behaviors don't contradict the spec. While desktop and tablet browsers tend to use as much horizontal space as available, mobile browsers tend to make text blocks narrower in order to make it easier to read them on small screens. I believe that there is nothing to 'fix' in this behavior, but if you need more consistent display, you can use other layout models (e.g. display: table-* or Flexbox) instead of floats.
You can specify different CSS rules depending on the size of the view. Sounds like the systems have different methods of rending the CSS so you might have to be more specifc with these:
http://dev.w3.org/csswg/css-device-adapt/#viewport-descriptors
How do I center align fluid layout (no fixed px values, only % values) for multiple screens ?
i.e. I am going to view the same HTML on desktop (can be multiple resolutions), can be mobile (e.g. iPhone) OR even a tablet (e.g. iPad).
I think the following solutions would not work in my case;
Using width:100% (there won't be any space left to center align)
Using widdth:80% or so and then using margin:0 auto (this would
work fine on desktops, but would waste space on mobile devices..i.e i
want to optimize limited space on mobile devices)
Using text-align:center (I want to center align the layout and not
the text)
Please suggest.
<div style="width:100%; text-align:center;">
<img style="margin:auto; display:block;" src="images/web_banner.gif"/>
<p>Website coming soon…</p>
</div>
Use align="center" in div then u will get content in div will center
It's extremely difficult to set a page unless it's just text to be completely liquid. Just because images need to be displayed at a certain size and then would need to be re-sized to fit smaller resolutions. That being said if this is just a text based site then the
width: 80%;
margin: 0 auto;
text-align: center;
iphone supports the the margin so this should work fine. If you have images and need to resize then you should really look at a jquery or javascript to adjust the images on resize.
Also use the text-align: center for backwards compatibility. Use all of that as a wrapper and then set for you content and navigation
text-align: left;
i have a webview in my application and it works fine. it fits horizontolly (not scrolls) and scrolls vertically. but any word which is longer than 320 pixel makes it scrolls horizantally and makes the font larger. i don't would like horizontal scroll. i would like it to be continued in new line. how can i do?
thanks.
The problem you have is actually not related to the UIWebView in itself. What the web view does is just display any html you provide. This means that you have to format the html to do as you want. One way to accomplish that is to use a div as follows.
<div style="width: 320px; word-wrap: break-word">
text with looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooongword goes here
</div>
Caveat: I don't know very much about html and css so there might be better ways of accomplishing this.
How to control the facebook like box stream part height alone. Its normal to reduce height of whole box but if tries to control it fans images are not shown.
The css .fan_box .page_stream{ ...,width:300px} to .fan_box .page_stream{...,width:150px}
i'm asking because the stream box inside iframe
There isn't a way to change the height. Facebook doesn't provide a way to change the height and there isn't a way to change the height using JavaScript and CSS.
Why can't I do it with JavaScript and CSS?
CSS just doesn't apply through an iFrame because thats how an iFrame works -- its basically a window to another page with its own CSS.
Javascript won't allow you to access the content of an iFrame if the URL of the iFrame is different than the page that contains the iFrame. Doing:
document.getElementById('iframeID').contentWindow.document
Will give you the following warning in Chrome.
Unsafe JavaScript attempt to access frame with URL... Domains, protocols and ports must match.
The reason for this is to prevent XSS. Here's more on the Same Origin Policy.
I saw this on the Like Box page and figured I'd respond that you can use the 'data-height' attribute:
data-height="250"
Worked for me. Here's my example:
http://www.skonet.com/Resources/Articles/Index.aspx
you can reduce the height of the encasing div, hide its overflow and if you want push the top of it underneath an absolutely positioned element with a higher z-index like so:
<div style="position:absolute;z-index:2;top:0;left:0;width:300px;height:130px;background-color:#c0c;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";"></div>
<div style="height:140px;width:140px;overflow:hidden;background-color:#0c0; margin-top: 60px;color: #fff;padding: 30px;font-family:arial;">
facebook like box goes here - only the green part will be visible if you make the pink box white and take out the 0.5 opacity and the bottom will get cut off so you can just display whatever part you want
</div>
I suppose you guys still need it and this is the most acurate trick I can provide and its also promising to work with the every day changing of the facebook like box by facebook.
Its a bit tricky but will work for you guys..
create two seprate like box of the same page, and close them in seprate div right in my case
<div class="up1">
facbook like box 1 code
<div class="up2">
facbook like box 2 code
Now in the css
use position absolute to class up1
.up1 {
position:absolute;
z-index:99999;
background-color:white;
}
and in up2
.up2 {
padding-top:87px;
}
What it does it will put the box 1 over the box 2 hiding its facebook like and bla bla making it feel like you have one box that contain picture and streaming of your desired lenght
I was looking around cos I had a problem like this one. Facebook has no standard way of customizing the stream if the faces and header are checked.
The solution is to take them differently. If you need the stream as long as 1000px, just uncheck everything except the stream. This will change its height from the default 300px to whatever value you type in the height field.
See an example below:
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="2000" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="true"></div>
Then if you still need the one with faces, get a new code and set the height differently, then uncheck the others. Below is an example:
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="500" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
Don't forget to add the SDK before these codes.
I know it's a long time since this was posted, but here is the solution that helped me today
Yes the data-height to 250 will work as it reduce the outside iframe
Now try to set data-height to 1000 - it is still 300px height,
because the inner div inside the iframe hard coded to 300px and
you can not control that as it is in a cross domain iframe...
<div class="fb-like-box" data-href="http://www.facebook.com/example" data-width="292" data-height="250" data-show-faces="true" data-stream="false" data-header="false"></div>
Adjust the height in this code to what works best for you.