I have the following image:
http://i47.tinypic.com/219zkl.png
That needs to be the background for a .four-columns div in the Foundation framework. The div headline needs to be in the black ribbon, and the content in the box below.
The problem I'm having is getting the background to behave properly as the grid is resized in the browser. I don't want to write loads of media queries just for this background. I've tried using the background-size:cover property, but this leads to it looking horribly pixelated on the phone, and not covering the div correctly on tablet sizes. I've also tried absolute positioning, but that hasn't worked either.
Any help?
Thanks!
This background is too simple to use an image. Just go with pure CSS.
If you have trouble to produce angled borders, here is a simple tutorial>
http://www.howtocreate.co.uk/tutorials/css/slopes
Related
I have created a layout using DIVs/CSS. I have attached an example image and links below which shows how I would like things to be organized. Within the header, there is a logo and a menu which are cumulatively 1000px in width. The feature, content, and footer sections are also to be 1000px in width. However, the actual background images for ALL sections are 100% in width and are repeated horizontally.
Below is an example of what I want to do:
What I have actually put together so far (in terms of the design) can be viewed here: http://ohachem.com/2/. This is what I would like to follow. The CSS can be viewed here: http://ohachem.com/2/style.css
What is the best way to accomplish this? As you can see, the text in the "feature" section does not align completely in the centre. I've tried using clear:both, overflow:hidden, and several other methods, with no luck.
The "misalignment" of the "featured" text is caused by the floating logo. Because the float hasn't been cleared and extends outside of your header, it is causing that text to flow around it. Adding overflow: hidden to your #header element will correct it, but there's other ways to clear floats without adding extra markup.
Alternately, you could just make your logo the same height as the header. Right now the height property is set to the same value, but the logo has some extra padding, which is causing the overflow.
The website you're pointing to uses a liquid layout, here's a bunch of examples: http://www.dynamicdrive.com/style/layouts/category/C13/ .
One note, on your example, there's no positioning attributes that I can discern, a large part of making a layout responsive is ensuring it looks consistent across all browsers & screens.
I would Suggest you to use CSS3 Media Queries rather than Script for the Responsive/ Adaptive Web page design.
Please have a look at this
These do not process a lot, hence Light weight and most modern browsers and Devices support CSS3 hence a convenient and reliable Option.
I'm building a test mobile website for a client: http://preview.stafforce.co.uk/mobile/
As you can see, upon the loading the website on a mobile device or on the desktop using the correct viewport size you will see a red box with three options. The red box is the page itself told be red by a class of splash. (I had originally had this as a separate DIV that sat ontop of the page using position fixed, but that had several issues with positioning).
On the desktop this works fine, but on the mobile device e.g. iPhone using Safari when the toolbar disappears and/or you scroll/change orientation you get a black bar, this is because the body is appearing as the div is not taking up the full size of the screen (jq mobile uses min-height which is done using the framework to make this happen).
Any ideas on how to fix this? Or had similar issues? Also noticed when doing the transitions that they appear cut off in places again likely attributed to this min-height not getting things correct.
Example:
Edit: The reason I have changed the body to black is because when you do the flip transitions, this is what you see behind, and black is the correct colour for the background when doing transitions on phones such as the iPhone.
You should use Jquery mobile enhanced 'listview' and keep your content in DIV with data-role='content'.
Jquery mobile will make your content fullscreen.
You should not style listview or anything else manually.
Here is the demo: http://jsfiddle.net/nachiket/YSp3x/
I haven't set icons and your logo, but you will get idea.
If possible use Jquery mobile Theme Roller for base styling, and do customizations on top of it.
EDIT:
You can set color on div which has data-role="page".
Like:
.myPage {
background-color:#ff0000;
background-image:none;
}
And in HTML
<div data-role="page" class="myPage">
I have already updated jsfiddle link.
I used CSS gradient on one of my designs and it works pretty well. But there's a tiny problem - it looks messed up when the content in the page is less that the screen height. Can I define its height to be 100%?
I created that gradient on colorzilla and it seems pretty cross-broswer.
I needed to use background-attachment:fixed; and boom - the background will stretch instead of tile.
I'm having some trouble with the CSS in my site, both with image sprites and IE compatibility.
Here is a jsfiddle: http://jsfiddle.net/lipestyle/EjQTP/7/
The two main problems are:
In IE, the contact links at the bottom are not appearing in the blue bar, but way down and to the right of the rest of the site.
The image sprites for MMA Cage Door and FightNight Nutrition are not working. It appears that the hover image is on constant display, as the non-hovered image is supposed to be much lighter than what we are looking at.
On a side note - For some reason the background image repeating isn't working in the jsfiddle, but I haven't noticed a problem with it outside of that.
Any advice that you all can offer would be greatly appreciated.
Thank you.
EDIT
One other thing I am noticing with the sprites. It appears when I hover over an image the first image doesn't disappear, it still remains while the hover image appears on top of it. Is that how it is supposed to work? Because my images are semi-transparent, this is something I would like to avoid if possible.
Here is a link to the site in action: http://bit.ly/h1OXQA
Could be a width, margin-left, or even position relative/absolute giving problems here. I have not checked in depth through all css code to see the cause. A fast/dirty fix, obviously loading alternative css or html for IE7, is that setting (in IE7) the UL #social with top:190px and left:100px , it seems to fit ok (or fine tune to the preferred position) .I'd go from here to guess what is causing to act differently.
Seems you already fixed, images seen light when not hovered, darker when hovered. All in IE7.
Anyone know if there's a bullet-proof (standards-compliant to XHTML1.1 strict, cross-browser, non-javascript) way to use CSS and background images to turn an inline link into a visual button that will stretch to accommodate different amounts of text (or text resizing)?
I'm thinking I need to use background images as the designer's buttons have rounded corners with a different coloured border. It must work in IE6 (Government job).
Im pretty sure the answer is no, but as always thought it worth a check.
Amongst other things, I've already tried variations on the sliding doors technique, but can't make it work as the solution needs to work inline (i.e. within a paragraph) and I can't set a fixed width.
EDIT: There are several buttons, each of which has a different colour for foreground, border and background. They also have a gradient 'face', but no need for transparency or anything else 'unorthodox'. Unfortunately I can't link to examples as I'm under an NDA.
I'm not sure if this will fit your needs, but I helped someone with hoverable rounded buttons in this post... it uses only HTML and CSS.
I don't think you can do this within your restrictions. The problem is that you have one element, but to properly do stretching, you need three (unstretched left side, stretched center, unstretched right side).
Yeah, you probably need to make image buttons for this.
Just as an aside in future, here's a page on CSS button styling.