23 replies [Last post]
ashleypower
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2006-02-11
Posts: 14
Points: 0

I'm having HUGE trouble with my website.

Sorry, but I'm new.

Here's the URL:

http://apower.atspace.com/css/web.htm

Here's the style sheet:

body {
margin:0;
padding:0;
text-align:center;
background-color:#ffffff;
padding:2px;
}

#container {
width:700px;
text-align:left;
margin-left: auto;
margin-right:auto;
margin:0 auto;
}

#header {
width:680px;
font-family:arial,sans-serif;
color:#848284;
background-color:#ffffff;
padding:10px;
font-weight:bold;
text-align:left;
}

#contenth {
width:680px;
padding:4px;
background-image:url('hbg.jpg');
border:1px solid #848284;
float:left;
}

#contentw {
width:680px;
padding:4px;
background-image:url('wbg.jpg');
border:1px solid #848284;
float:left;
}

#contentd {
width:680px;
padding:4px;
background-image:url('dbg.jpg');
border:1px solid #848284;
float:left;
}

#contentf {
width:680px;
padding:4px;
background-image:url('fbg.jpg');
border:1px solid #848284;
float:left;
}

#rightboxh {
font-family:arial,sans-serif;
color:#ffffff;
font-size:12px;
width:400px;
padding:4px;
float:right;
}

#rightboxw {
font-family:arial,sans-serif;
color:#ffffff;
font-size:12px;
width:600px;
padding:12px;
display:block;
margin-left:auto;
margin-right:auto;
}

#webimage {
width:200px;
float:left;
}

#webcont {
width:320px;
float:right;
}

#webimage2 {
width:200px;
float:left;
}

#webcont2 {
width:320px;
float:right;
}

#rightboxd {
font-family:arial,sans-serif;
color:#ffffff;
font-size:12px;
width:400px;
padding:4px;
float:right;
}

#rightboxf {
font-family:arial,sans-serif;
color:#ffffff;
font-size:12px;
width:400px;
padding:4px;
float:right;
}

#rightboxa {
font-family:arial,sans-serif;
color:#ffffff;
font-size:12px;
width:400px;
padding:12px;
float:right;
}

#leftboxa {
width:240px;
padding:4px;
background-color:#eba953;
border:1px solid #848284;
float:left;
}

#rightboxc {
font-family:arial,sans-serif;
color:#ffffff;
font-size:12px;
width:400px;
padding:4px;
float:right;
}

#contactbox {
width:340px;
float:right;
}

IMG.center {
display:block;
margin-left:auto;
margin-right:auto;
}

#footer {
width:680px;
font-family:arial,sans-serif;
color:#848284;
font-size:13px;
font-weight:bold;
background-color:#ffffff;
padding:10px;
text-align:center;
clear:both;
}

#na {
color:#d6d7d6;
}

a.nav:link {
color:#848284;
text-decoration:none;
}

a.nav:active {
color:#848284;
text-decoration:none;
}

a.nav:visited {
color:#848284;
text-decoration:none;
}

a.nav:hover {
color:#848284;
text-decoration:underline;
}

Any help would REALLY be appreciated, thanks!

jlhaslip
Offline
Enthusiast
Last seen: 12 years 27 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

Layout Trouble: Image Positioning

And the problem would be ?what? exactly?

It looks okay to me. Might want to provide some specifics about what it is doing (or not doing) that you think it the problem.

I'm having a good day...so far.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Layout Trouble: Image Positioning

"sorry but I'm new" I'm afraid that's stated by many people and is no excuse for anything.

As mentioned you must provide some clue as to what is going wrong, and in what browsers. A read of the posting guidelines may help clarify matters.

To start things off though Here's some help; you have markup errors that need to be cleared up you have bad nesting of elements, divs within paragraphs. sort those out and post with what problems you see that remain and in what browsers they manifest themselves.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ashleypower
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2006-02-11
Posts: 14
Points: 0

Layout Trouble: Image Positioning

Thanks anyways, I'll just use a table.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Layout Trouble: Image Positioning

Great response!

We are here to help, but you have to make an effort to help us to help you and avoiding using tables is definitely something you want to do unless they are used for their intended purpose that is. Using a table to get around incorrect nesting of elements is not an answer really.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ashleypower
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2006-02-11
Posts: 14
Points: 0

Layout Trouble: Image Positioning

I just find tables way easier. That's how I've been doing this for years. I have a hard time with the CSS is all.

I've been looking around...seems alot of people are using tables along with their CSS layouts.

Is it "bad" to just make the main layout of my site with CSS and then use tables for the content?

Oh, by the way, why is it "bad" as well to have <p> inside the div tags?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Layout Trouble: Image Positioning

ashleypower wrote:
I just find tables way easier. That's how I've been doing this for years. I have a hard time with the CSS is all.

We all have difficutly learning new stuff. Well I do, anyway.

CSS layout can be hard to learn becuase first you have to forget about your old knowledge and your old ways. Once you've been able to do that it becomes quite easy.

Quote:

I've been looking around...seems alot of people are using tables along with their CSS layouts.

Tables are perfectly appropriate for tabular information.

Quote:
Is it "bad" to just make the main layout of my site with CSS and then use tables for the content?

It isn't, if the tables are appropriate for the information presented. But if you are presenting, for example, a list, an html structure is available for that and it should be used.

Quote:

Oh, by the way, why is it "bad" as well to have <p> inside the div tags?

It isn't, and that's not what Hugo was talking about. divs are often appropriate for grouping paragraphs. paragraphs are not appropriate for grouping divs, which is what Hugo chided you about. a <p> element is designed to mark up paragraphs, which in English writing are supposed to present a single thought in a few sentences.

The idea is to mark up your content according to it's meaning and then use CSS to give it style.

Invalid html or xhtml is just totally the wrong way to go for styling with css. Get your code right first! Then start styling it.

These aren't meant as pronouncements from on high, by the way, but as serious advice to make your learning curve easier. It's not a matter of what's "good" and "bad", but of what works.

And as my tagline says it's always possible....

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

ashleypower
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2006-02-11
Posts: 14
Points: 0

Layout Trouble: Image Positioning

Thanks alot, that was more along the lines of what I needed.

Ok, so basically, I want an image on the left, writeup about it on the right. So, along the left side, all images. Along the right side, write ups about the images. That's what I'm trying to achieve.

I could do this in 5 seconds with tables...haha, but CSS is a different beast altogether.

Suggestions? Is my CSS terrible, btw? I'm new at XHTML as well, but I've been validating it, and it comes up clean.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Layout Trouble: Image Positioning

ashleypower wrote:

Ok, so basically, I want an image on the left, writeup about it on the right. So, along the left side, all images. Along the right side, write ups about the images. That's what I'm trying to achieve.

Well, basicaly what you've described sounds a lot lke a Definition List(<dl>), except instead of "defining" words you are "describing" images. In this case you're "defining" images instead of words, but the <dl> structure was not designed to be limited to just word lists.

It might be a little difficult to put the <dt> and <dd> tags on the same line, though. But maybe you should think perhaps about how necessary that is.

Semantically it seems to me that what you've got here is a list of images, each with a description, so a list of some kind seems like a good logical container for them.

If you are wedded solidly to the idea that they must go side by side you'll probably have to stick them in a table, but maybe just give it a try with the <dl> structure and see what they look like, and maybe if they could be tweaked a little with css rules. Maybe you'll like the different look, who knows? After all these years isn't it time to consider something other than that chunky table look?

Just suggestions.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Layout Trouble: Image Positioning

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Layout Trouble: Image Positioning

ashleypower wrote:
Thanks alot, that was more along the lines of what I needed.


But not necessarily what you asked for! do you see the point here, I'm not trying to be difficult but to get people to post with some forethought that enables us to provide the best help we are able to whilst not wasting time on posts saying "what do you mean"

I pointed out the problem that lay with your incorrect use of HTML elements, what I am not able to second guess is your level of understanding on that; if you had responded with "I'm not sure why that's a problem" then I could have expanded on the issue, but we can not be expected to write a treatise on every point every time it may be the case that that info provided is sufficient for someone to go off and work up an alternative approach.

ashleypower wrote:
Is my CSS terrible, btw?


No it's not at all, what at this stage you probably are more in need of is a firmer understanding of html markup, oddly the problems in some respects do not lie with CSS, which after all is just cosmetic gloss and not a vital thing but with use of semantic elements that describe the content you are presenting. The transition from tables is the stumbling block as one is without the structure that one has been used to.
ashleypowers wrote:
I'm new at XHTML as well, but I've been validating it, and it comes up clean

Are you validating the CSS stylesheet or the (X)HTML markup? if you had validated the markup then it would have flagged the div nesting issue, concentrate on validating your markup as this really is far more important than validating CSS. CSS either just breaks completely in which case you know somethings wrong or it just ignores illegal rules altogether.

I see Ed has provided some direction on the possible ways of describing the content, you could think of this content as a list of things and within list (li) elements you are allowed to have any other element so you could possibly float your image to the left (right) in the list and also have within the sam list a paragraph containing the text for the image wrapping around the image or not.

Take heart we all struggle with describing content at times there isn't the perfect set of semantic elements as borne out by the fact that the specs for XHTML 2.0 allow <p> tags to contain all sorts of elements rather than just inline text and links as is the case now.

CSS is not easy you do have to stick with it and put some time into it's understanding, tables are just a simple-ish html element, CSS is a whole method of ordering and controlling those elements and is far more flexible in arranging elements, there are not any real hard and fast rules as to how one must create a layout or arrange elements which is why many struggle to get to grips with it as a whole.

We can help though with that as there are many people at all levels willing and able to guide and help - not hand it on a plate mind - but help someone that is clearly keen to master the dam thing Smile and most of us understand the agony that it brings at times .

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ashleypower
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2006-02-11
Posts: 14
Points: 0

Layout Trouble: Image Positioning

Hey again, and thanks for your patience.

I've been using this website to validate:

http://validator.w3.org/

...and it tells me that it's fine.

I've decided to stick with it and try to figure this all out. It's a bit much to take in, but I'm sure I'll manage.

I kinda like the way the <dl> worked out, I'm gonna tweak it a bit to get it just right.

I MAY be back here to ask some more questions...haha, hope you don't mind.

Thanks alot guys, I really appreciate all your help.

ashleypower
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2006-02-11
Posts: 14
Points: 0

Layout Trouble: Image Positioning

I THINK I'm on the right track...

http://apower.atspace.com/css/index.htm

ashleypower
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2006-02-11
Posts: 14
Points: 0

Layout Trouble: Image Positioning

I've ran into some trouble...

On the Websites page, the background looks fine in IE, but the bottom image floats over the background in FireFox?

To fix this, I put a bottom margin of 90px on the <dd> tag, but it leaves an awful lot of space on the bottom in IE.

Any ideas?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Layout Trouble: Image Positioning

The margin isn't the best approach you need to clear the dt image left clear:left but that will leave the DD bunched together so they will need to be spaced, I'm not sure that a DL would have been my first choice I would have probably tried a UL first as I mentioned earlier. it would be easier to float an image left and run a paragraph full width or margined on it's left edge within a LI element, but DL are flexible you will just need to play with the positioning, one thing though when you float elements you need to watch whether they break out of their parent container as they are meant to do , and if they do you will need some form of float clearing to ensure the parent and any background extends fully around those floats.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ashleypower
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2006-02-11
Posts: 14
Points: 0

Layout Trouble: Image Positioning

Ok, I think I have it...

This is what I've done. Basically, I made 2 containers, one floated left and one right. Works fine in IE, but FireFox...does not.

Basically, I believe the floats push the content out of the container, so I just made the height of the container bigger. Now it looks good in both IE and FireFox. Here's the URL:

http://apower.atspace.com/css/web.htm

Here's the CSS:

#contentw {
width:680px;
height:390px;
padding:4px;
background-image:url('wbg.jpg');
border:1px solid #848284;
}

#rightboxw {
font-family:arial,sans-serif;
color:#ffffff;
font-size:12px;
width:400px;
padding:4px;
float:right;
}

#leftboxw {
font-family:arial,sans-serif;
color:#ffffff;
font-size:12px;
width:140px;
padding:4px;
float:left;
}

I know that the font tags are now un-necessary in the leftboxw, fix that later.

Is this a proper fix?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Layout Trouble: Image Positioning

This is going to be frustrating for you but why have you moved off from what we have been trying to explain to you about the use of elements that describe the content. Divs do not describe the content they have no semantic meaning, if you're going to go that route you will at the least need to contain the text within paragraph tags, and you must not use the <br /> tag in this way as a presentational device, margins create spacing.

You don't appear to be validating markup! as discussed before as you are trying to re-use ID hooks these need changing to classes, IDs may only be used once per page.

Did you actually check the link provided in an earlier post as it provides the code to use to achieve a dl list along the lines that you want.

Floats as I mentioned are meant to escape their containers you do not want to try and get around that with height but you need to apply clearing to the parent with either overflow:hidden or Tony Aslett's clearfix method, if you google on 'clearfix' or 'clearing float containers' you will find links with full explanations.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Layout Trouble: Image Positioning

<div id="header">Ashley Power</div>

What? WHAT? What's wrong with the <h1> tag?

<div id="footer">

	<a href="index.htm" class="nav">Home</a>

	&nbsp; &nbsp; | &nbsp; &nbsp; 

	<span id="na">Websites</span>

	&nbsp; &nbsp; | &nbsp; &nbsp; 

	<a href="design.htm" class="nav">Design</a>

	&nbsp; &nbsp; | &nbsp; &nbsp; 

	<a href="flash.htm" class="nav">Flash</a>

	&nbsp; &nbsp; | &nbsp; &nbsp; 

	<a href="about.htm" class="nav">About Me</a>

	&nbsp; &nbsp; | &nbsp; &nbsp; 

	<a href="contact.htm" class="nav">Contact</a>

</div> <!-- footer end -->

Oh no you didn't Wink

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Layout Trouble: Image Positioning

Ashley you really need to get your markup sorted out before you move on to styling it, best to take a step back and work on that first Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ashleypower
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2006-02-11
Posts: 14
Points: 0

Layout Trouble: Image Positioning

Ok, I think I know what you're saying...square one, right? Haha.

As for the footer...what's wrong with it?

I THINK it's because I COULD have put the styling for the links in with the "footer" right? Instead of using the "nav" everytime?

Sorry people, maybe I should start over.

As for the <H1>...I wasn't thinking...haha.

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Layout Trouble: Image Positioning

ashleypower wrote:
Ok, I think I know what you're saying...square one, right? Haha.

As for the footer...what's wrong with it?

I THINK it's because I COULD have put the styling for the links in with the "footer" right? Instead of using the "nav" everytime?

Sorry people, maybe I should start over.

As for the <H1>...I wasn't thinking...haha.

More likely... consider using a list for the footer menu

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Layout Trouble: Image Positioning

Cut down the html styling for the footer even more.

You want a line to the right of each link?

Then use a right-border in the CSS Laughing out loud

Ultimate flexibilty, if all you use in the HTML is the link text.

Verschwindende wrote:
  • CSS doesn't make pies

ashleypower
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2006-02-11
Posts: 14
Points: 0

Layout Trouble: Image Positioning

Thanks alot guys for all your help, you've been very informative.

I think I'm gonna go and do a bit more research into this.

I'm VERY new and I've basically been trying to stumble along. It appears there's much more to this than I had expected.

Maybe I'll buy a book...haha.

Again, thanks alot. I think I'm gonna scrap that project and start fresh. Might work out a little better next time!

I'll keep ya posted!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Layout Trouble: Image Positioning

Just keep at the back of your mind that content must be described by tags and those tags are meant to convey an idea of what content they hold, it's easier than you think as there are not that many tags, think about the content does it look like a list of things then use a ul li construct is it a heading, a proper heading does the text start or title a section of the page and on and on. This stage of things is not about CSS styling, work the page up without any styling it must look right in plain text, this is the real view of the content.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me