bronzemonkey
-
Posts
433 -
Joined
-
Last visited
Never
Everything posted by bronzemonkey
-
I don't understand what you are saying is wrong with the current liquid/elastic layouts? To me, your code looks like it does exactly the same thing but slightly less efficiently.
-
I don't get why you've coded it that way, especially the margins on the body, when the same thing can be done using the standard way of coding liquid layouts. It also has the advantage of being adaptable to an elastic layout - whole site scales in proportion to text-size, doesn't expand beyond browser window, will behave as liquid when browser window is reduced - in modern browsers (and just scalable in lte IE6) by changing just one line of code. Perhaps I missed something. Have a look at the code below and tell me if what you've posted above has any additional benefits. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Liquid and Elastic Layouts</title> <style type="text/css"> /*reset*/ html, body, div, p {padding:0; border:0; margin:0; font-size:100.01%;} body {font-family:arial, sans-serif; color:#000; background:#fff;} p {margin:1em 0;} /*layout*/ #wrapper {width:50%; margin:0 auto; background:#ddd;} /* for elastic layout replace width with max-width:50em */ #priCont {float:left; width:49%; background:#bbb; overflow:hidden;} #secCont {float:right; width:49%; background:#999; overflow:hidden;} /*clearing*/ #wrapper:after {clear:both; display:block; content:"."; height:0; font-size:0; line-height:0; visibility:hidden;} </style> <!--[if lte IE 6]> <style type="text/css"> /* when using an elastic layout in the master css: either uncomment the line below to enable a scalable layout or leave it commented if you want the lte IE6 layout to remain liquid */ /* #wrapper {width:50em;} */ #wrapper {height:1px;} </style> <![endif]--> <!--[if IE 7]> <style type="text/css"> #wrapper {min-height:1px;} </style> <![endif]--> </head> <body> <div id="wrapper"> <div id="priCont"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris accumsan tristique eros. Nullam cursus odio eget lorem. Praesent malesuada mollis ante. Sed ut libero. Integer fermentum sem in enim. In sed lorem nec nibh iaculis luctus. Donec et turpis eget dolor rhoncus aliquam. In hac habitasse platea dictumst. Duis luctus mauris sed sem. Suspendisse purus est, varius eu, imperdiet in, laoreet vitae, lorem. Curabitur pulvinar mollis dolor. Donec et nisi. Mauris tempor, mauris et euismod rutrum, mauris erat sagittis lorem, eu tempus nisi ligula vel risus. Integer massa arcu, sollicitudin eget, interdum at, ornare rutrum, arcu. Pellentesque nibh. Phasellus arcu purus, porta nec, faucibus ut, laoreet sed, orci. Praesent nisl. Curabitur orci quam, egestas sit amet, rhoncus ac, vestibulum eu, nisl. Fusce vulputate tempor ligula.</p> <p>Nullam placerat. Praesent feugiat pretium lacus. Etiam commodo. Donec metus. Proin sit amet justo non tortor sodales dictum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque tortor. Aliquam eros. Pellentesque accumsan vestibulum erat. Fusce condimentum ante ac ipsum. Pellentesque sed enim. Ut non metus. Nulla vel leo in nulla venenatis congue. Nulla et nibh. Maecenas est dui, blandit sed, ultrices a, hendrerit eu, lorem. Cras eget enim quis metus sodales vestibulum. Proin laoreet nulla interdum urna.</p> </div> <div id="secCont"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris accumsan tristique eros. Nullam cursus odio eget lorem. Praesent malesuada mollis ante. Sed ut libero. Integer fermentum sem in enim. In sed lorem nec nibh iaculis luctus. Donec et turpis eget dolor rhoncus aliquam. In hac habitasse platea dictumst. Duis luctus mauris sed sem. Suspendisse purus est, varius eu, imperdiet in, laoreet vitae, lorem. Curabitur pulvinar mollis dolor. Donec et nisi. Mauris tempor, mauris et euismod rutrum, mauris erat sagittis lorem, eu tempus nisi ligula vel risus. Integer massa arcu, sollicitudin eget, interdum at, ornare rutrum, arcu. Pellentesque nibh. Phasellus arcu purus, porta nec, faucibus ut, laoreet sed, orci. Praesent nisl. Curabitur orci quam, egestas sit amet, rhoncus ac, vestibulum eu, nisl. Fusce vulputate tempor ligula.</p> <p>Nullam placerat. Praesent feugiat pretium lacus. Etiam commodo. Donec metus. Proin sit amet justo non tortor sodales dictum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque tortor. Aliquam eros. Pellentesque accumsan vestibulum erat. Fusce condimentum ante ac ipsum. Pellentesque sed enim. Ut non metus. Nulla vel leo in nulla venenatis congue. Nulla et nibh. Maecenas est dui, blandit sed, ultrices a, hendrerit eu, lorem. Cras eget enim quis metus sodales vestibulum. Proin laoreet nulla interdum urna.</p> </div> </div> </body> </html>
-
This is easy to do without tables.
-
You need to make the link a block if you want the padding to behave in this way. #navigation a {display:block;} That will make each link display on a separate line, so you will also need to float your links left. However, you should be using an unordered list for the navigation, see these tutorials - http://css.maxdesign.com.au/listamatic/
-
Use {margin:0 auto;} on the outer-most containing element to get every browser playing along. Do not listen to the bad advice that recommends using text-align in the css or the align attribute in the html. Text-align is used to align text and not the layout. It will not work unless you are using quirks mode. The align html attribute is also depreciated. If you need to support IE5.* then put you need to do something specific for that browser. It is best to put this in a conditional stylesheet, but every other browser behaves properly (if you are using a valid doctype) even if this code is included in your general stylesheet. /*In an IE5 stylesheet*/ body {text-align:center;} /*centers layout and text in IE5, only centers text in everything else*/ #wrapper {text-align:left;} /*left aligns your text*/
-
I've already given you the answer in the link provided in my first post.
-
Tables are not better for layouts...unless you don't know what you're doing without them. It's not a matter of opinion. It's like saying a bicycle is faster than a motorbike just because you don't know how to put the motorbike in gear. And non-table layouts are created using css to style many elements of which divs are but one.
-
It's because "div1" is floated. That pulls it out of the document flow and it will extend beyond the bottom of the wrapper if there is enough content. This is standard float behaviour. See http://www.phpfreaks.com/forums/index.php/topic,182099.msg816584.html#msg816584 and then take some time to read up about css.
-
What you are trying to do is probably one of the most annoying things on the internet and your visitors will hate you for it.
-
Valid CSS has nothing to do with SEO...it has everything to do with future-proofing and getting the site to display properly in most browsers. It is also a very easy thing to do...I'd recommend that you put your code through the w3c validators. Well then hopefully he told you beforehand that writing semantic and accessible html is a major SEO concern
-
At the moment I use something a bit like the first one. The alphabetical listing never really gelled with my way of thinking. position properties display properties dimension properties (from inside out) font properties etc. #myelement { clear:both; position:relative; left:0; top:0; float:left; display:block; width:auto; height:auto; padding:0; border:0; margin:0; overflow:hidden; font-size:1em; font-family:Arial, sans-serif; line-height:1.5em; text-align:left; text-transform:uppercase; color:#000; background:#fff; }
-
No, it's based on this - http://www.positioniseverything.net/easyclearing.html - which has been in use for some time now.
-
Personally, I don't like to put any positional meaning in a class/id because there is no guarantee that .login_left or .col_left is going to remain positioned on the left. Using _ or - or camel case in a class/id is down to personal preference and consistency. If you use php, asp, js etc then you might prefer to camel case your class/id.
-
Probably because you have an unclosed h1 tag in your code. I imagine IE is applying the h1 style to the entire document. If you have a problem: please pass your code through the w3c validators before you post, fix the errors it shows you, and if the problem remains then ask for help.
-
Working in IE, but not FireFox...any ideas???
bronzemonkey replied to ShootingBlanks's topic in Javascript Help
That's a misguided attitude. There should be no reason to prevent non-js users from accessing a link. There is a significant proportion of internet users who browse with js off for security and accessibility reasons (most banks will not have js enabled on their systems), and this is made ever easier with extensions for browsers like Firefox. It is not up to the user to alter their browsing preferences or restrictions in order to cater to your website. It is up to web designers/developers to cater for the various browsing preferences and restrictions of users. In addition, most of the search engine bots (google included) will not follow javascript links. Even if "only" 5% of your audience browse without javascript, no sensible business is going to ignore 5% of potential customers and no government agency is going to alienate millions of disabled citizens who may not be able (or willing) to use js. The whole point of web standards and accessibility (which is a legal and moral obligation) is that it makes web content available to everyone in some form and that means javascript should be unobtrusive, i.e., not embedded in the html or denying core content and navigation to users without js. In this instance there is no need to use js (especially not inline) to link to other pages anyway. It can be done with valid html and be in line with user expectations -
You cannot start a class or id with a number. That's the problem
-
Working in IE, but not FireFox...any ideas???
bronzemonkey replied to ShootingBlanks's topic in Javascript Help
That is not acceptable if you want users without javascript to be able to follow your links. I don't browse with javascript and so I can't follow your links...even if I enable javascript I get no indication that the table rows are links to other content. It is one thing to provide a visual enhancement by making table rows change color on mouseover but quite another to insert links that are only available to users with javascript. If you want the anchor to behave like a block, then set its display property to block in your code, and make sure people can tell it is a link. -
No don't do that, use the technique I posted above
-
Working in IE, but not FireFox...any ideas???
bronzemonkey replied to ShootingBlanks's topic in Javascript Help
Those are not valid elements to contain within an anchor. Put your code through the W3C validator and you will see the error messages. Put the link within the td for the event title. Do not put tables or table cells within the anchor (link) -
The solution is the same as the one I posted here - http://www.phpfreaks.com/forums/index.php/topic,182099.msg816584.html#msg816584 But don't rely on what Dreamweaver's visual display claims a page will look like.
-
There is no shifting for me in Firefox. Sounds to me like you are just talking about the browser scrollbar appearing...which moves the central point of the browser window slightly to the left. I hope you haven't wasted hours wondering why that is happening.
-
Use a div with an id or class to contain all the thumbnails, remove the {position:relative;} from .thumbnail and add it to the id/class of the container div. Then fiddle around with the values for the top/left properties of the span elements to get the large images appearing in the position you want.
-
By the way, body is an html element. You have no element with an id of "body" so it is confusing when you refer to #body. You're also going to need to put your code through a validator and fix the errors that get flagged up. I'd recommend that you get the Firefox extension "HTML Validator", which will flag errors/warning for you and show you straight away where the problems are...it will even "Tidy" your code for you if you wish. While you're at it, download the extension "Firebug", because it will also help you with debugging and show you what is going on with your elements and what styles are actually being applied to them. Useful tools. Back to your problem: it is just that you have floated content within #main and you will need to clear it. The default behaviour of a float is to remove it from the document flow, so it will "stick out" from the bottom of it's parent if the content within the float causes it to have a height greater than that of its parent. You can see what is happening if you comment out the background image for #header. You'll see that the background color of #main only extends down as far as #header (because #header is not floated and so #main expands to contain it). How to fix it: using {clear:both} on the footer will not do the trick. It is also bad practice to use an empty "clearing div" within your markup. You'll need to use a self-clearing technique - you can read more about the concept behind it at this website - http://www.positioniseverything.net/easyclearing.html: /*For modern browsers like FF, Opera, Safari, etc*/ #main:after { clear:both; display:block; height:0; content:"."; font-size:0; line-height:0; visibility:hidden; } /*For IE7*/ *+html #main { min-height:1px; } /*For IE6*/ * html #main { height:1px; }
-
If you're going to have several functions that you need to execute once the document has loaded, you can use this function to do the job: function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(count); addLoadEvent(someotherfunction);
-
Working in IE, but not FireFox...any ideas???
bronzemonkey replied to ShootingBlanks's topic in Javascript Help
You can also do this without putting javascript into your html. Put this code into an external file and link to it in the head of your document: // put this in the head of your document <script type="text/javascript" src="includes/highlightRows.js"></script> // put this is the highlightRows.js file function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } function highlightRows() { if(!document.getElementsByTagName) return false; var rows = document.getElementsByTagName("tr"); for (var i=0; i<rows.length; i++) { rows[i].onmouseover = function() { this.style.backgroundColor = "#5d7da6"; } rows[i].onmouseout = function() { this.style.backgroundColor = "#000"; } } } addLoadEvent(highlightRows); The html code for your tables won't need any javascript within it: <table cellspacing="0" cellpadding="0"> <tr> <td class="leftCell">Friday 15th</td> <td class="middleCell">Iowa City Yacht Club</td> <td class="rightCell">Iowa City, IA </td> </tr> <tr> <td class="leftCell">Saturday 16th</td> <td class="middleCell">Abbey Pub</td> <td class="rightCell">Chicago, IL</td> </tr> <tr> <td class="leftCell">Saturday 23rd</td> <td class="middleCell">Dr.Unk's Oasis</td> <td class="rightCell">Greenville, NC</td> </tr> </table> It would be even better to use the javascript to add a class to the table rows and use css to control the styles for that class. That way if you ever wanted to change the styles you wouldn't need to edit the javascript file.