Yet another XHTML quick question...

[Trip]

Hello again. This time I'm having trouble with simple text and images. And I've provided an example of what I'm trying to do (remember copyrights if you take a look please.)

Here's the problem after looking at my example: the text on the left of the big image isn't actual text, it's an image of text (I've outlined it in red for ease). What I want is to replace the image of that text, to actual text. For faster load times and just overall a better quality page.

I've though about using a small table with two columns, having the image in a right column and the text in a left column, but I can't figure that out on my own. Then I though of just trying to use simple code to have the text and then the image beside the text, but after an hour of scratching around on my own this morning I can't figure that out either.

If anybody can help out, or even provide an example of the code, i'd be greatly appriciated! You guys haven't ever let me down!

 

[mdnky]

Wrap everything in a DIV, then use CSS to position things. Put the image before the text, float it to the right. Apply a margin on the right (and a small one to the bottom) of the image to keep things from touching. Tweak the Hx and P tags as needed.

EXAMPLE:

<style type="text/css">

* {
	margin: 0;
	padding: 0;
	}

body {
	font-family: Arial, sans-serif;
	font-size: 80%;
	color: #333;
	background: #fff;
	}

#main {
	width: 760px;
	margin: 1.6em;
	}
	
	#main img {
		float: right;
		width: 335px;
		height: 335px;
		margin: 0 0 .1em 1.6em;
		}

	#main h2 {
		margin: 0 1.6em .4em 0; 
		font-size: 1em;
		text-align: right;
		color: lime;
		}
	
	#main p {
		margin-bottom: 1.6em;
		}

</style>


<div id="main">
	<img src="..." alt="Describe the image" width="335px" height="335px" border="1" />  <!-- width, height, and border only on IMG tag for mock-up purposes in Safari -->
	<h2>Professional, fresh design at affordable prices</h2>
	<p>Whether it be 1,000 business cards...Orci sociosqu esequis, senectus ante, facipsum conulputem, eui tet tatiniat ante ullamcorper. ...Simple yet effective.</p>
	<p>I've got you covered.</p>
	<h2>Freelance creative design services</h2>
	<p>As a freelancer...Placerat congue magna nonsequi la sumsan. Nonsequ illa fames, quatuer nonulput prat pharetra, ent conulluptat conum rutrumismod. Nisit feuguerit eui venit consequam nosto hac vel esequis. ...for anyones wallet.</p>
	<p>And I mean anyone.</p>
	<p>I offer...Mollis esequi inceptos euiscip. Praestieiscinim cor egestas rcilis veriusto velisit sociosqu dui quam, condimentum aliquis stincil. Dipissit quat volenisis natoque feugue, tatisit condimentum niscidu tatiniat alisis magnim lorpercidunt esequis acing...I'm always available for contact.</p>
</div>

 

[pds]

I'm useless in the coding, I've got you covered in grammar. No offense meant, I just can't help myself... I'm a teacher.

The first paragraph is all fragments, but that's a style and I guess it's intentional.

Are you offering professional "fresh design" or fresh "professional design"? Having the Professional first looks better, but the other way reads better.

anyones needs an apostrophe (anyone's wallet)

The double use of contact in the last two sentences jars a bit. Perhaps the second one could be "quick consultation." or something similar.

 

[Trip]

It's just an example page, none of that text is going to be used on the actual project. But thanks for the quick grammar lesson, god knows I need need it.

 

[Trip]

I messed around with your help. But I just HAD to try my idea out (for future references, and because I couldn't sleep unless I tried.) Is this acceptable coding? Pretty much ignore everything on the page, I don't care how professional or how crazy anything is, just the overall idea (and coding) is what I'm worried about.

http://www.tannersite.com/testpage/

 

[texanpenguin]

It would be better if your CSS was in a separate file (and each page could reference it). Generally the only CSS which should be in the source code are page-specific styles.

This part:

			<div align="center">
				<table width="343" border="0" cellspacing="2" cellpadding="0">
					<tr>
						<td>
							<div align="right">
								dfddfddfdfdafsdfdasfdsfdsfjsdlkfjdslkjfldsjfljsdlfsdfsdsfsd
								<p>Fdfsdfsd</p>
								<p>sdfsdfsd</p>
								<p>dsafsdfdsfdsfdsfsdagvkbjskdfjbvvasd</p>
								<p>vsdvsdvds</p>
								<p>sdfsdfdsfjlsdjvlkjsdlkvs</p>
								<p>vdsvsdvdsvdsav</p>
								<p>dsvsdvdssd</p>
							</div>
						</td>
						<td><img src="TEST2.gif" alt="" /></td>
					</tr>
				</table>

is not the best way to do things. If you're going to use a table, you don't need the DIVs at all, since the tables are doing layout (which is not recommended by the W3C with XHTML).


Good mark-up should be easy (and logical) to read. DIVs are a block-level element; a sort of generic square which you can put anything into. If there's a better container for the contents, you're encouraged to use one (for instance, an image without a caption need not be put in a DIV; nor should any other single thing.)

If you look at your code and notice there's only one thing inside any DIV tags, it's not the ideal method of coding (be aware, though, that in some situations, ideal is not feasible). For instance, a DIV with just a table in it need not be there (though yours has other things).


Other messiness: using null-spaces to separate your navigation is not ideal (it's messy, and it makes the cursor an I-beam when you're in between links). Instead use a series of spans with padding for spacing, or even better, a styled unordered list, with padding on each list item.
Also, using images for typesetting is very ill-advised, because Google can't index them, Screen-readers can't read them, and people with poor eye-sight can't zoom in on them.


I also object to Arial in any application, but what can you do ?

 

[Trip]

Hey thanks for all the help. Really. Most of that stuff is really pointless, the layout and design (basically the entire page) is useless with the exception of me warming up my XHTML skills.

As long as the code is "ok" I'm fine with it. I'm not looking for the BEST in standards just yet.