Is there any way to make a picture liquid to 100% width but then keep the height in proportion to the width. I tried the main picture here New Life Christian Center with a 100% width and an 85% width which works pretty good in most situations unless the browser is extremely wide or extremely narrow like a phone. Any suggestions?
That’s basically what you have now, except I see what you mean about small screens (iPhone). On large screens you have a max width set, so there is only so far the resizing can go.
Not sure what to suggest about the iPhone, except to declare the 100% width in the CSS rather than in the HTML (which is better anyway).
As for placing text in an image like that, it’s a terrible idea, so I urge you not to do it. Make that live text, so that all people and search engines can read it. The float the image of the man so that the text wraps around it, and your issue is solved. 
would the text remain in the yellow background of the picture if I would do it that way?
so how about this Fix main picture vs [URL=“http://www.nlccenter.com/inicio.html”]http://www.nlccenter.com/inicio.html instead. Does this work better. Do I need to tweak it? Or is the whole attempt crazy?
Ideally, you’d have a cut-out picture of the man that is floated to the left after the first paragraph (with padding or margins to suit). Then the yellow background would be a background image to the whole container. I guess if you want to keep that big yellow background, then what you’ve done is one way to go, though it could still do with some tweaking.
The age is very slow to load, so either way, you might need to optimize those images for the web.
What Ralphs saying about that image is correct – using an image for TEXT isn’t just an accessibility /FAIL/ (which it is), it’s also a scaling and efficiency failure as the image ends up too large, and you start playing games with scaling – as you noticed. In general, using a fixed height image behind text is a really bad idea, and it’s WORSE when you use the image AS text; something that should really NEVER be done on a page in the first place.
He’s also correct in pointing out it’s slow loading… much of this can be blamed on the use of alpha transparent .png, 24 bit .png, and in general too many images for such a simple page. You’ve got 2.5 MEGABYTES of images… which is roughly twenty times what I would allow as the upper limit of an ENTIRE PAGE (HTML+CSS+SCRIPTS+IMAGES) and thirty or forty times my ideal target… You’ve got 252k of Javascript (FOR WHAT? Nothing that I can see… ah, spry bloat – do yourself a favor and kick spry to the curb), the layout breaks horribly on large font/120dpi machines (dynamic fonts in fixed width/height containers), and 26k of markup for a mere 1.6k of content. (that should PROBABLY be 4k of content once you get rid of the image as text and around 8k of HTML total!).
Basically, even at the markup level you’ve got three times as much code in there as necessary. Peeking under the hood you’ve got CSS inlined in the markup (get that into an external file) and enough presentation in there to beg the question, what is that 50k of external CSS even doing? Lots of excess div, flash for nothing (probably explains the broken layout here since I’m running a flash-block), nonsensical heading orders (some of which can be blamed on the bloated off-the-shelf flash embed method), paragraphs around non-paragraph elements…
… and that’s before we talk the use of absurdly undersized fixed metric fonts on many elements, color contrasts and image contrasts that make much of the text illegible, etc, etc…
It’s overly ambitious on the use of images, and the outdated markup and use of scripting makes it nigh impossible to debug. My advice, throw away ALL of the “flash for nothing”, swing an axe at 90% of the images as unnecessary, and rewrite the whole thing using SEMANTIC markup and separation of presentation from content.
being this is my first website I’ve ever made for the most part I have no idea what you are talking about but I am willing to learn. Honestly I don’t even have a good concept of what the heck spry is. It was an option in Dreamweaver to make a nav bar. The header is a flash banner. The movie is FLV because I am using dreamweaver and that was the option. Ok so I figure out how to fix the main picture, I’ll work on that no prob. I don’t even know what “large font/120dpi machines” means and wouldn’t know how to fix the problem. I assume that the inlined CSS is the Menubar CSS And I was afraid to take it out of the template because I didn’t know where to put it to make sure it works.
“nonsensical heading orders (some of which can be blamed on the bloated off-the-shelf flash embed method),” Don’t know what that means. “SEMANTIC markup and separation of presentation from content” Don’t know what that means.
Sorry basically I don’t even know where to start with this stuff. I will be the first to admit I have alot to learn but when I started this I didn’t know what <p> was. So I would certainly agree with you that the probably it is completely messed up but I really don’t know how to go about fixing it outside of my trial and error method which probably gives the bloated CSS.
I have a “twoColLiqLtHdr.css” and “thrColLiqHdr.css” I did most of my stuff on “thrColLiqHdr.css” but have been afraid to get rid of “twoColLiqLtHdr.css” because I don’t know if I will break something if I do. And no one I know knows anything about website design to even ask a question to. Which is why I always post here.
sorry but this is my reality. So now I know I really screwed up but I still don’t know how to fix or where to go to figure it out.
Don’t take Deathshadow’s comments to heart as they are simply a statement of the facts with no malice intended. We all have to learn somewhere and I wish someone had been as honest with me at the start as I made all the same mistakes that you have but it took me years to drop all the bad habits
Honestly I don’t even have a good concept of what the heck spry is. It was an option in Dreamweaver to make a nav bar.
As a rule of thumb it’s better not to use other peoples code until you are at least happy to debug it and adjust to suit. It isn’t very often that you can pick up and drop an element in your page and have it work as you want.
Of course if you are designing a one-off site and aren’t interested in learning web design then it may not be appropriate to spend years learning how to do it properly. However, that doesn’t mean that we should stop telling you that it is wrong.
The header is a flash banner. The movie is FLV because I am using dreamweaver and that was the option.
On my first site I stuck every animated gif I could find only to find that no one visited. Eventually you learn that less is more and any animation on a page is mostly a distraction. A good image with no animation is much better and doesn’t take way from the content.
I don’t even know what “large font/120dpi machines” means and wouldn’t know how to fix the problem.
DPI (is dots per inch) and most pcs are set to 96dpi but you have the option of changing it to 120dpi which makes text more readable but also makes it less likely to fit in tight places.
“nonsensical heading orders (some of which can be blamed on the bloated off-the-shelf flash embed method),” Don’t know what that means.
A page should start with the main heading (h1) and then work down in a logical order with h2 for sub headings and then h3 for sub sub headings etc. You would never follow an h2 with and h5 for example. More info here.
“SEMANTIC markup and separation of presentation from content” Don’t know what that means.
Semantic markup means using the html that is appropriate to the content. As already mentioned above you use a logical heading for headings and for paragraphs you use the p element. For most of the content you put in a page there is ana appropriate html element. (eg. ul for unordered lists, dl for definition lists, table for tabular data, div for block divisions of content or to aid structure (or where there is no suitable html element provided) spans for inline sections where needed and so on…).
The content usually determines what the html mark up should be.
So I would certainly agree with you that the probably it is completely messed up but I really don’t know how to go about fixing it outside of my trial and error method which probably gives the bloated CSS.
We all have to start somewhere and trial and error is a good way as long as you take notice of what you have learned and what others have said.
The first site is always the hardest and then you can build on what you learned and do it better
I actually have to say – if this is your first outing AND you are using Dreamweaver, it:
-
Explains a lot.
-
I’m surprised it’s as functional as it is.
As a rule of thumb I consider Dreamweaver to be just as bad, or possibly worse than Frontpage – when it comes to site developers, Frontpage is a four letter word; Mind you, my calling it such is effectively blasphemy to many, but it’s the truth. The ONLY thing you can learn from Dreamweaver is how not to build a website, and by the time you have learned enough HTML and CSS to use Dreamweaver properly and make informed decisions about what it can do for you, you have no real legitimate reason to keep using it.
Generally, WYSIWYG editors like the preview pane in Dreamweaver generate disastrous code that rarely if ever works cross browser – and their ‘templates’ and ‘automatic options’ are some of the worst bloated disastrous code out there.
So it’s not your fault – you’ve been led down the garden path like so many others before you. As Paul and I can both attest – Hell, my first website was vomited up in Netscape Composer back in '98… I knew there was something wrong with it, I just wasn’t ready to accept that the tool was the problem… come to find out most of the time if it looks like a word processor but builds a website (WYSIWYG, what you see is what you get… allegedly) it’s complete useless rubbish that will cause more problems than it solves.
Sucks, but that’s the facts Jack.
What you have made is what I usually call a “non-viable design” – you’re starting out, we’ve all done it. It’s got all the common mistakes we’ve all made starting out of too many images, images that are too large, lots of visual effects like transparent borders that cause nothing but headaches and chew bandwidth for nothing, images for text, and non-semantic markup…
You really can’t do semantic markup from a WYSIWYG – it doesn’t know what’s a heading, what’s a paragraph, what’s a blockquote, so the code it vomits up really isn’t all that useful; By definition WYSIWYG’s are there to create presentation – when HTML is NOT even supposed to be about presentation. The original point of HTML was to say what things are, and let the user agent (browser) figure out the best way to show it to the end user. During the late 90’s browser wars we got away from that with the disastrous HTML 3.2 (which we’re still paying for) but with CSS and HTML 4 Strict, we’re able to return to the original point while customizing the presentation to the most common targets.
Honestly, I hadn’t realized this was your first site – You’ve got enough stuff in there I figured you were actually further along in your learning and was ready for the next step.
Of course if you are designing a one-off site and aren’t interested in learning web design then it may not be appropriate to spend years learning how to do it properly. However, that doesn’t mean that we should stop telling you that it is wrong.
I don’t mind that you tell me what is wrong, in fact please do, but when it is told to me in such a way that I am stuck like a deer in the headlights and first I have no idea how to fix it and secondly have no idea what is necessary to fix to make it functional vs what is “ok now I know, next time I will do it better”.
On my first site I stuck every animated gif I could find only to find that no one visited. Eventually you learn that less is more and any animation on a page is mostly a distraction. A good image with no animation is much better and doesn’t take way from the content.
So I don’t know if this means: don’t use flash banners or never embed movies or what. Ok I do have one animated gif on one page I can change. Got that.
I need to put the movie on the first page. Since it really explains the church and it’s vision. Is there a better way to embed it? Should I use something other than .flv?
The top logo is a .png since it really need to be transparent-should I change it to a gif, would that help?? I will certainly work on changing the button .png should they be jpeg or .gif? What about the footer, can you get the same effect (of the pink background going into the picture) some other way?
As far as the main picture should I put the one that I fixed with live text up for now until my brother fixes the main picture (he’s in charge of flash, pictures etc.) or just put up text even though it doesn’t look so good for a front page?
A page should start with the main heading (h1) and then work down in a logical order with h2 for sub headings and then h3 for sub sub headings etc. You would never follow an h2 with and h5 for example. More info here.
Semantic markup means using the html that is appropriate to the content. As already mentioned above you use a logical heading for headings and for paragraphs you use the p element. For most of the content you put in a page there is ana appropriate html element. (eg. ul for unordered lists, dl for definition lists, table for tabular data, div for block divisions of content or to aid structure (or where there is no suitable html element provided) spans for inline sections where needed and so on…).
the layout breaks horribly on large font/120dpi machines (dynamic fonts in fixed width/height containers)
Are these issues something I need to go through and figure it out and fix it or is this a “now you know better for the next time” issue.
Generally, WYSIWYG editors like the preview pane in Dreamweaver generate disastrous code that rarely if ever works cross browser – and their ‘templates’ and ‘automatic options’ are some of the worst bloated disastrous code out there.
Along the way I certainly figured out that WYSIWYG doesn’t always give me what i want and I just need to go into the code and fix it there and open it up in a variety of browsers because it is more realistic. But the basic structure came from a Dreamweaver template.
the CSS how do I take the menuBar css out of the template? and do I need to? what about the two css files I mentioned. Should I do something about that? How do I know what div tags to keep and which ones to get rid of? Do I need to do that now for this website to work?
I probably have a ton more questions that I don’t even know I have now.
so I switched a lot of the .pngs to jpegs optomized for the web. So hopefully that helps. The top logo does lose a little quality if I switch it to a gif and saves about 18kbs. Is it worth it?
what are fixed-metric fonts? and what fonts do you recommend?
The logo is 23k which for a small image is quite a lot and you coud change it to a gif or jpg and get it down to a bout 5k without really noticing the difference. That’s just one image and you’ve saved 18k already.
what are fixed-metric fonts? and what fonts do you recommend?
Fixed metric fonts are fixed sizes like pixels and which won’t scale in IE6 and 7 via the browser controls (although you can zoom in ie7). If you do use pixels then make sure that they aren’t too small and anything under 13px is going to be an issue for some people.
Font-sizing is a difficult topic at the best of times and oyu won;t please everybody but the best approach is to leave the body at 100% and then size elements in percentages/ems etc.
Regarding text resize though you should avoid putting text in fixed height and width containers because the text cannot grow unless the container is also sized in ems. Better to let content dictate the height and then text can resize as required.
Just work your way through issues one at a time and learn from your mistakes. I’m not a designer (more a coder) but I can tell you that your site looks very old fashioned and perhaps you should gain inspiration from other sites around There are plenty of css showcase sites around (google them) to draw inspiration from and then disect and learn from their code.
You are asking the right questions now but don’t let it overwhelm you as there is a lot to take in.
which won’t scale in IE6 and 7 via the browser controls
With text-enlarge, won’t scale in ANY IE (not even 9).
Yes sorry keep forgetting that it was never fixed but only zoom added