Is the a uniform cross-browser text-indenting technique ?
I use text-indenting to hide text and replace with images quite alot. I do something like the following: text-indent: -30000px;
But, on Chrone, IE, and Oprah the text is indented out so it's not visible but the width of the element is still as wide at the text.
Ordinarily, this would not be a problem except tah it looks one way on FF and entirely different on other browsers.
You most likely need to specify the width of the element as well.
If you're doing that and it's still not working, could you provide some sample code for us to take a look at?
I also use this technique at times to show images, but in all cases I'm also setting the width on the element to match the image swap. If you set the width you'll get consistent sizing of the block across most browsers * cough IE cough *.
If you're hiding the text but also need to rely on the width of the rendered text for spacing I'd question if you're using the right technique for that particular situation.
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.
So I did notice that zoom related layout problems are commonly being dealt with, but I couldn't find an answer to my case - I wrote a WEB calc, and the buttons just slide out of place when zooming in and out, in Chrome and Firefox but not in IE. What is the way to fix it?
Give width:220px to your #main div
If you closely look at your CSS you will see that the buttons together(5 in a line) actually have more width than the Main div while resizing. Increasing the width to 220px solves that problem. Another solution could be to give max-width and max-height to all elements, another can be to properly layout your elements and don't just rely on the browser's positioning. Doing the latter is an trivial task.
For the sake of searchers, my solutions was to use a table to make the calculator eventually. I know using tables for layout is considered a bad practice, but considering a calculator shape is not supposed to adjust to new contents or to the size of the end-user's screen (at least in my case) it seemed to be the best implementation. It was the only way to avoid losing the layout shape in zoom-in zoom-out, which is kind of what div's are all about.
I'm pretty much as new to CSS as it gets and what I'm trying to do right now is just design a very simple/basic splash or landing page for a small business.
Here is the url for the site: My site
Now if you go on any browser, lets say google chrome and you zoom out or in (ctrl -/+) you will notice that the website layout starts to "break apart" in that all my divs just start shifting around. I obviously dont want this, and just want the site to remain the same when people zoom in or out, pretty much like all good sites haha.
I know it must have something to do with positioning, but I can't figure it our for the life or me. Last night I spent hours browsing similar questions but I can figure it out.
I'm not posting the code as to take up more space, I'm assuming since I gave you the URL you'll be able to retrieve the code from there.
I also have a few more, smaller questions:
1) if you open my site on chrome, or ie you'll notice that after the "terms and conditions" on the bottom of the page, the site ends, like it should. however, if you go on firefox, you'll notice that after the "terms and conditions" the background so to speak continues for a while. why is this and how can i fix it?
2) you'll notice that on different browsers positioning of elements is slightly different.
most noticeably if you look or chrome/firefox and then internet explorer 9 you'll notice that the "terms and conditions" are slightly higher than in chrome or ff and thus slightly touching the main content area. is there a way to fix this?
3) what is an efficient, effective way to center divs? For example, I want to center the "sign up" button perfectly centered relative in the main content area. ive pretty much just been eyeing it out and using relative positioning to center it. what is a more accurate way to center it?
Thanks, and sorry if these questions seem a little redundant. if you need any clarification on anything I'll be monitoring this question like a hawk.
Cheers
When you zoom in or out, you will encounter issues because of rounding and text rendering. It is a good idea to make sure the layout can survive a bit of stretching without breaking down.
Relative positioning is affected by issues mentioned in #1, and therefore unreliable.
Look into using something to remove the properties that the various browsers will apply. You could use a reset to give you something more workable or try to normalize the values to make them more even between browers.
For (horizontal) centering you have some options:
If you have a container with "text-align:center" it will center all child elements that are inline-blocks or inline.
If you want to center a block element, you can use "margin: 0 auto" to center it horizontally and remove vertical margins.
If you want to center an absolutely positioned element, you can use "left: 50%, margin-left: -(width of element/2)".
In addition to attempting to get rid of relative positioning, I would recommend that you do not explicitly set the height of the body element. Generally you want the elements to manage their own size, that way they will be more robust.
If you use "position: relative" now because that is what you know how to use, I would suggest you try using "float: left" (or right), or changing the display type (display: inline-block). That may help you get started in the right direction.
not sure for your points 1 & 2, but as for 3 what i've come to use is the following have the div i want to center and then use width : some-percentage; margin-left : 100-(some_percentage)*0.5 ;, where some percentage is the width I want to use.
a couple suggestions before go into fixing the zoom in and zoom out issue.
Don't use <div> to wrap around text.
Use <h1> tags for header
Store your CSS in a separate css file.
You defined the header section that's great, but do that for container and footer as well.
Comments! That would make the job much easier for people who try to help you.
I have a layout in which two divs appear stacked vertically inside a parent div which will be a specific height (due to containing a left hand menu). I wish the two divs to take up all the available vertical space. However, they must resize depending on their content. The easiest way to explain is with a diagram:
Reading the diagrams from top to bottom, this is the scenario:
both divs take up 50% of available height as this is sufficient to contain their content (this is the default).
there is a lot of content in top div and less content in bottom div. Top div expands to fit content and squashes bottom div.
reverse situation of (2).
both divs must expand to fit their content. Containing div must expand to accomadate.
I think I could figure out how to do this with a table, see the example here which is almost correct (in chrome anyway) except the outer div doesn't expand properly.
Is there a better CSS solution to this without using a table?
I cannot use JavaScript and solution must work in all browsers... including IE6 :(
.
This can be done using CSS, with a feature called the flexible box model. It's an extension to the box model that's been in use in CSS since the begining, and allows you to do stuff like vertical stacking, etc, which wasn't possible before.
You would start off with display: flexbox;, and then use other related styles to define the characteristics of the layout you want. It is very powerful. You can read the full W3C spec for it here: http://www.w3.org/TR/css3-flexbox/
Now the bad news: It's a very recent addition to CSS. It actually has reasonably good browser support (albeit with vendor prefixes), but the problem you'll always hit is that it isn't supported in IE, not even IE9 (though it is planned for IE10)
Other browsers require vendor prefixes, so even for supported browsers you'll need to write your styles in four or five versions.
In addition - and this is the real killer - there isn't a good fall-back solution for browsers that don't support it. If you design your page using flexbox layouts, and load it into a browser that doesn't support them, it will be a disaster.
For this reason, it is hasn't really seen much use in the real world yet. It's time will come, but as long as IE9 and earlier are in use, it won't become mainstream.
You can see a full browser compatibility chart for the feature here: http://caniuse.com/#search=Flexible%20Box%20Layout%20Module
In the meanwhile, you're going to have to use a Javascript solution.
My recommendation is the JQuery Masonry plugin. I think this will be your best solution for now.
You could fake it using a 100% height wrapping div and a white border like so:
http://jsfiddle.net/cBV88/2/
You can also remove the fixed height and it will still work.
SuperStretch might get you part of the way there.
my question is a bit tricky and I'm not really sure if it is possible, but I think I have a memory of doing it before or seeing it somewhere.
So, I am making a horisontal menu. I have a div block of size 980x36px. It has a background image:
Inside I have links text) which I made block elements (display: block;) and floated left. So now it would look more like this:
Now I want all active links and all links that are mouse-overed to have a different background, like this:
The problem here is that my background image (on hover) is again 980x36 px and is different in the different horisontal positions just like the first background, blue on the left and red on the right:
So, now when I hover on a link I must set the background position some negative horisontal value, for example for the third link I should set something like background-position: -233px 0px; so the colors of the two backgrounds would fit.
My question is how can this be acomplished automaticaly? Here is the tricky part: I don't know the width of all links since they are text and should support multi-language (so they obviously cannot be pre-made images). I don't want to use PNG (I could easily make a semi-transparent 'glass' which would overlay with the first background and create the same effect) - because of.. guess who, yes IE6. And finally I want this to be done with a nice, clean and widely supported technique, so JavaScript is out of the question (I know it's easy, I can make it, I just don't want to use it).
The thing that is familiar in this situation is the background-attachment: fixed; method. In this case it would be great if I could fix the position of the background of each link to the position of the container div. That would be perfect! Just what I need! Each link will be on it's place, but the background would render as if it was on the container div! Well, that's the problem, if anyone knows a good solution.. If not I should consider the less pain, which in my opinion, currently is to try the PNG way with some IE fixer maybe?
You should just use a .png as you described in your question.
To fix IE6, you should use one of the many available JavaScript-based .png fixes, such as:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
It's just not worth crippling yourself by pandering to the minuscule percentage of users that are using IE6 and have JavaScript disabled.
(yes, I realise the question is old, and you've probably already created your menu)
The quickest solution that comes to my mind is using jQuery to position the background accordingly (you can check each element's position and just change its CSS background position).