dbrimlow
-
Posts
712 -
Joined
-
Last visited
Never
Everything posted by dbrimlow
-
That is quite an amazing little bulletproof layout. I couldn't break it in any browser, at any size browser text, and at 600px window. There aren't that many divs here. They use the most minimum for liquid layout. Header, footer, gutter, and 3 columns.
-
Change the robots meta tag to: noindex, nofollow It still isn't validating. line 64: width="405" height="19" /> ... remove the closing slash (I warned you when switching from xhtml that these may slip in, most likely dynamic coded in your php echo). The "height=" tag in tables is not supported in html 4, it does nothing when there, and doesn't hurt when you remove it. Why are you using position:absolute to position the img? This is very hard to pull off cross-browser. Since you are using tables anyway, just drop the img in the TD.
-
Actually, you are better off with: #container p.padded { xxx } In your specific instance, you only want to target certain paragraphs within the parent container by assigning them the padded class.
-
Yes. Just so you understand why, if you use an XHTML doctype, but are not actually parsing any xml or "serving" the page to the browser as an "xml/xhtml application", browsers treat it as html 4 (with closing slashes) anyway. You will also want to change "charset=utf-8" to "charset=ISO-8859-1". Because under xhtml and utf-8, all instances of ampersands, quotes and a few other tags or characters need to be coded as "spcial characters" like "&:" for "&". But remember, if you change from xhtml to html, you will need to remove any closing slashes on meta tags, img tags, br tags and any other "self-closing tags". In Dreamweaver, click on code view, then right click/find and replace enter find " />" replace with ">" press "replace all". Also, it is crucial for any business site to use the meta tags for search engine bots - description, keywords, robots. And this is where you will learn how bad it is to use graphics in place of text. Looking at your site, it was indeed rich in good keywords. But it was worthless for a good description. The best description was the title tag. So when I tried to google "tiles4u" your site didn't show in the results. I had to type your full domain name to get this: Tiles 4 U - Your one stop shop for all your tile needs Bathrooms: Furniture · Toilet & Cisterns · Basin & Pedestal · Fixtures & Fixings · Taps & Accessories · Full Bathroom Systems. Kitchens: ... tiles4u.wicked-websites.co.uk/ - 10k - Cached - Similar pages See what the google bot did? It simply grabbed whatever text it could find on the page in order to create some kind of description. And since the only text with any proper block level tag was in paragraphs, that's what it grabbed. THIS is why using headers (h1, h2, h3, h4) paragraphs and lists are so important. Because it shows the bot that YOU are telling it the "hierarchy of text importance". Descriptions should not be long, keywords should ONLY include single words or word groups WITHOUT REPEATED ANY WORD. The bots that still use keywords will "get it" if you only have tile once in the keyword, but many times in the body text. Next, the robots tag. This is to let the bots know if they should index the page in their database and follow the links on the page. Actually if no robot tag is included, it will use "index, follow" by default. But there are instances where you don't want it to index the page or follow the links, so it is good practice to include it. Most of us put a "robots.txt" file on our servers, as well, that tell the bot specifically which directories or files it should NOT index. Here is how your should revise your head section. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <head> <title>Tiles 4 U - Your one stop shop for all your tile needs</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta name="description" content="Tiles 4 U - Your one stop shop for all your tile needs"> <meta name="keywords" content="tiles, splashout, bathrooms, furniture, toilet and cisterns, basin and pedestal, fixtures, fixings, taps, accessories, full bathroom systems, kitchens"> <meta name="robots" content="index, follow"> <link href="tiles4u.css" rel="stylesheet" type="text/css"> </head> [code] If you can, lose the Dreamweaver template tags. They just bulk up the page weight. You want to trim down any and all unnecessary "browser side" tags or code - which is why the css file takes the place of markup level styling tags. Good luck [/code]
-
I must have read that wrong. I know, and that's partly why it isn't validating - the php tags are causing invalidation. The other reason is because xhtml transitional or strict is still based on html 4.01. And in html 4.01 you cannot use deprecated table styling tags and html 3.0 inline style tags like "background="images/tiles4u_top.gif", and you must have an alt for any img tag. You are using an utf-8 charset, but not using html special characters for some of your your unescaped php tags like & or <? ?>. This can be REAL annoying when trying to make a php file using xhtml and utf-8 valid. The whole point to what I am saying is that if your code isn't valid, all bets are off for guaranteed cross-browser compatibility. Get it validating, try converting it to an html 4.01 trans doctype and use an ISO charset.
-
He's right, you cannot modify a TR. You can only modify Table and TR
-
It is not validating. You are using pretty old deprecated HTML 3 and 4.0 code. If you must use xhtml, then make sure you use it with proper html tags. Otherwise you are better off using HTML 4.0 transitional doctype. The way it is coded now, I wouldn't expect it to work in anything but IE.
-
You need to designate the size, type and color. <tr style="border-bottom: 1px solid #000000">
-
Beware confusing "Div" with "CSS" (a common beginner to CSS mistake) - they are two completely different things and confusing them as being linked somehow causes a lot of wasted and bloated code - known as "DIVitus" - which contradicts the whole point of CSS which is cleaning up and paring down markup level styling elements and code bloat. A "DIV" is no more and no less than a simple html tag placeholder. It is not intended to contain any untagged content, replace and/or emulate table cells, or replace properly coded semantically tagged html. DIVS MAY use a css ID or Class for positioning and styling, as can any other HTML tag. CSS uses IDs and Classes to style any and ALL html tags (including but by no means limited to "DIVS"). CSS can style HTML markup that doesn't contain a single DIV. And THAT is the ultimate goal ... eliminating unnecessary elements in the markup.
-
I'm still not sure I understand your question. I know you're using a tutorial (which is the best way to learn if you can reverse engineer it). You CAN change it to repeat-x, remember, for the faux column technique to work, though, you NEED it to tile top to bottom. That means you have to set the width of the graphic to match or exceed the width of the container. Easy for a fixed width layout. Not to hard for a liquid layout either (percentages) - it just requires using a little math to calculate the max pixel version to equal the positioning of various column sizes. That is a technique Dave Child perfected based on Dan's faux columns (Dan liked it so much, he uses it in his book "bulletproof web site): http://www.ilovejackdaniels.com/css/faux-columns-for-liquid-layouts/
-
So many of us have been where you are (and are groaing at the task you have ahead of you). It comes down to learning. Two crucial must buy books: Eric Myers on CSS, and Bulletproof Web Design by Dan Cederholm
-
Repeating Background Image (I dont want it to repeat)
dbrimlow replied to monkeytooth's topic in CSS Help
Particularly when first teaching someone css. I make it a practice to not rely on defaults whenever it comes to positioning of any element. I personally like to use the top left (or 0 0) because I DO use a lot of other background img positioning within my css for various other purposes (like img bullets). I also prefer using percentages for the vertical alignment of a background img in relation to text. -
Actually, for the body font-size to be a relative element it needs to be either a percentage or a keyword (small, medium). Setting a fixed pixel font-size for the body will not work in IE6 for setting relative font-sizes (ems, percentage, keywords). If you set a fixed pixel body font-size, it will not be elastic in IE6 ... it will always stay 12px and will not resize if the browser font size is increased or decreased.
-
Repeating Background Image (I dont want it to repeat)
dbrimlow replied to monkeytooth's topic in CSS Help
Shorthand for the "background" property is very cool and I couldn't live without it. Particularly positioning. background: #fff url('myimage.gif') top left no-repeat; background: #fff url('myimage.gif') top center no-repeat; background: #fff url('myimage.gif') top right no-repeat; background: #fff url('myimage.gif') center left no-repeat; background: #fff url('myimage.gif') center center no-repeat; background: #fff url('myimage.gif') center right no-repeat; background: #fff url('myimage.gif') bottom left no-repeat; background: #fff url('myimage.gif') bottom center no-repeat; background: #fff url('myimage.gif') bottom right no-repeat; You can also use percentages and/or pixels (which work great for images as bullets): background: #fff url('myimage.gif') 10px 50% no-repeat fixed; (positions the img 10px left and 50% relative to the text or other element - for bullets or text links with an img this is perfect) background: #fff url('myimage.gif') 30% 0 no-repeat fixed; (positions the img 30% from the left and top relative to the element) I always list color, url, position/position, repeats: background: #fff url('myimage.gif') top left repeat-y; (position starts at the top left of the element and tiles vertically) background: #fff url('myimage.gif') bottom rightrepeat-x; (position starts at the bottom right of the element and tiles horizontally) background: #fff url('myimage.gif') top center repeat; (position starts at the top center of the element and tiles horizontally and vertically) background: #fff url('myimage.gif') center bottom no-repeat; (position starts at the center and bottom of the element once and doesn't tile) Here is a link to the w3c school for the background element: http://www.w3schools.com/css/css_background.asp -
Who told you that? Let's remove "text-align:center" from everything but the ul, and add "font-size:small" (which is @ 12px) to the body for a relative size dimension reference (so we can use ems for margin/padding). Also, don't forget to add type="text/css" to the style tag: Then: <style type="text/css"> body, html { margin: 0; padding: 0; font-size:small } .menu-holder{ border: 1px solid red; } .menu { margin: 0 auto; background: #eee; width: 500px; } .menu ul { margin: .5em 0; padding: 0; list-style: none; text-align: center; } .menu li { margin: .5em; padding: .25 .5em; display:inline; } </style> This will center the list AND separately permit margins/paddings on both the ul and li elements
-
Without seeing the code I can only guess, but in general, I've had this happen if you have any blank tags in an image source or links, eg: <img id="Ath_Slide" src=" " alt=" " > The example is drastic, but the idea is the same, make sure you don't have blank (null) elements in your dynamic html tags.
-
He doesn't need to specify position:relative. So long as he specifies a width smaller than the parent container, AND "margin:0 auto", the id will center.
-
Hi, NSW42 Don't take this personally, but that css looks pretty nasty in places. First, you don't need to declare default font attributes like: font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal; These are a default condition UNLESS you are in a parent where these elements are indeed set to something OTHER THAN the normal default condition. Second, if you set the body font-size to be relational (a sound practice in general), then STAY relational throughout! Using pixel based font-sizing thereafter is defeating the whole point of relational sizing - either continue to use percentage based or use em based. You even go to the furthest extreme and use points!! Stop that! LOL! pt font sizing should ONLY ever be used for css printed output, not Screen output. As to your problem, like haku says, we need to see the html as well in order to help.
-
If you don't set what the relational body font size is (MUST NOT BE PX BASED!!!), how can you control any relationally based declared sizing? Based on your body element, just what is "1em"??? You are not giving the relational font size - thereby allowing the browser to decide what the default should be. Always VERY dangerous to a layout to let the browser default decide how it should look;even worse in IE6 and Opera. At least give it a relative "keyword" font size of "small" which all browsers understand and roughly display close to @ 12px. Then at least you can base the em sizing on a known relation @12px. AND, if you are going to use em based width sizing, then it is best to also use percentage or em for right and left margin/padding - using px right and left margin/padding can cause trouble with liquid/elastic floated elements when relational fonts are involved. body { font-size: small; margin: 1.2em; padding: 0px; } And, a last note - if you are going to use XHTML 1.1 Strict, shouldn't you get into the habit of using lowercase naming conventions for your css? You don't have to, but it seems as if you may as well use HTML 4.01 Strict - which will let you even code markup in uppercase - if that makes you more comfortable.
-
As simple as that. You don't even need the z-index if it isn't being "absolute-positioned". #div { margin:25% auto 0 auto; width: 200px; height: 200px; }
-
That will just make a mess of anything else on the page because position:absolute is greedy and ignores everything else. Until you are an expert at css (not just "good enough", I'm talkin' you know it all cold) avoid position:absolute like the plague. It is NOT a "friendly" layout element and does NOT play well with others.
-
save it is a .css
-
Use PHP. I do this with text that I want to only use @ 210 characters or so (just substitute $yourtextvariable, with your text variable name): $yourtextvariable = substr($yourtextvariable, 0, 210);
-
CSS is not a script. It is a "Style Sheet Language". A Style Sheet Language is a computer language used to describe the presentation of structured documents. CSS itself is a "Style Sheet Language" specifically used to style documents written in "markup languages" Notepad or any text editor that you can save as ASCII is just fine.