Can someone take a look??

  • Allied77
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Apr 17, 2008
  • Posts: 40
  • Status: Offline

Post April 18th, 2008, 2:19 pm

Hi

Still breaking my balls over this website. I was hoping someone could go and have a look at the page I'm trying to sort out and let me know four things:

1. If it's coded ok
2. why the top right hand image won't go back a pixel even if I make the image one pixel smaller!
3. How can I make those grey boxes with a 1px border WITHOUT having to make them a graphic? Is there a way to do this in my css style sheet?
4. ANY SUGGESTIONS on how to better code this page??


http://hem.bredband.net/neuntoter/allied/index2.htm
the text is nonsense taken from another site as filler.

Please be gentle :| this is my first real website

THANKS in advance
Mark
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 18th, 2008, 2:19 pm

  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post April 18th, 2008, 7:37 pm

1) Take a look here.

2) Haven't got a whole lot of time, but I'm assuming there's something not adding up right.

3)
HTML Code: [ Select ]
<div class="greybox"><p class="greyboxheader">Benitifs of recycled Printing Material<p>Initially, the majority of efforts were focused on projects that would make internal process improvements and reduce the company’s enviro...</div>

CSS Code: [ Select ]
.greybox {
padding: 10px;
background: #efefef;
border: 1px solid #ccc;
}
 
  1. .greybox {
  2. padding: 10px;
  3. background: #efefef;
  4. border: 1px solid #ccc;
  5. }
  6.  


4) Ditch the top dark grey box between the navs; Add a footer, fix a few of the spelling mistakes (Benitifs?). As this isn't the review forum I won't go into much more detail, but the site looks pretty clean.
  • Allied77
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Apr 17, 2008
  • Posts: 40
  • Status: Offline

Post April 19th, 2008, 5:08 am

Cheers neksus!

That validator is a great site! never knew it was there before. Seemed a lot of my mistakes are pretty smal, leaving in deleated end tags etc. For my first time coding a page like this, I'm pretty happy.

Thanks also for the css for the greybox!! Wasn't sure if it was possible! Is there any other little things like that I should look into?

The dark grey bar just underneath the menu is going to have the submenus in it. Another problem I'll be posting here about later ;) Though not sure what I'll use the right hand one for. I tried using tabs first but just couldn't get them looking right.
All the spelling mistakes will be sorted when i put proper text in there. just trying to fix all the small things at the moment

about the top image. Do you mean that some row(s) are pushing it out? I checked and the top row is adding up to 814 when it should only be 813. When i change it, the top right image moves to the right and leaves a big gap between itself and the logo. tried making the logo 1px smaller and it does the same thing. Could be something further down thats doing it?

oh and err, what do you mean by a footer??

Thanks again! Much appreciated
  • Allied77
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Apr 17, 2008
  • Posts: 40
  • Status: Offline

Post April 19th, 2008, 7:19 am

Also two other things.

I checked the site in IE, Safari and Firefox and noticed that the right hand columns dark bg colour doesn't appear in Firefox. anything I can do about it?

Code: [ Select ]
<td width="194" rowspan="2" align="center" valign="top" bgcolor="353434"><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <th colspan="3" scope="col"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <th colspan="3" scope="col"><img src="images/leftmenu_spacer
  1. <td width="194" rowspan="2" align="center" valign="top" bgcolor="353434"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  2.             <tr>
  3.               <th colspan="3" scope="col"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  4.                 <tr>
  5.                   <th colspan="3" scope="col"><img src="images/leftmenu_spacer
.gif" width="195" height="6"></th>
</tr>

secondly, what are the benefits of xhtml? And is there a way to convert my site to it? So far on the three browsers and OS I checked the only problem is the right hand column bg colour.
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post April 19th, 2008, 4:24 pm

About the problem with the bgcolor... it is missing the "#" in front of the numbers.

About XHTML... It is best to have your site in XHTML. It is not too hard to change to XHTML but that may seem to me as I have done a couple XHTML valid sites and know CSS probably a little bit better than you.

XHTML is using CSS rather than TABLES as you are right now.

A footer is a DIV or TABLE at the very bottom with a copyright information... if you want an example of one, Starbucks homepage... It is in the grey box that has the copyright information in it.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Allied77
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Apr 17, 2008
  • Posts: 40
  • Status: Offline

Post April 19th, 2008, 6:12 pm

:oops: I was staring at that for almost an hour and didn't spot it! Maybe you ca see why the top right bg image won't line up?? I'm totally out of ideas on it. tried resizing it..everything. it either gets worse or stays the same.

Thanks for the info on the css! Must try and learn that! Right now (this is my first website), just trying to get my head round css for text and some boxes. Will get some tutorials and fingers crossed! What are the problems that could arise from using tables?? I tested the page in three browsers and two OS and no problems YET. The site validator website gives me a list of errors but mostly they are: required attribute "ALT" not specified.

Thanks again for all the info and help! Much appreciated!

Bogey wrote:
About the problem with the bgcolor... it is missing the "#" in front of the numbers.

About XHTML... It is best to have your site in XHTML. It is not too hard to change to XHTML but that may seem to me as I have done a couple XHTML valid sites and know CSS probably a little bit better than you.

XHTML is using CSS rather than TABLES as you are right now.

A footer is a DIV or TABLE at the very bottom with a copyright information... if you want an example of one, Starbucks homepage... It is in the grey box that has the copyright information in it.
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post April 19th, 2008, 6:25 pm

No problem Allied77 glad to be of some help...

About the top right bg image... everything seems to line up except the very bottom left content bg... "Benitifs of recycled Printing Material". The very last one... it seems to extend a bit to the right...

Is that what you are talking about? If not, than I must not be catching it...
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Allied77
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Apr 17, 2008
  • Posts: 40
  • Status: Offline

Post April 19th, 2008, 7:01 pm

Yeah I just noticed that to. You're using firefox, right? It lines up in IE. It's actually the only bit of css on the page :lol: and I can't get it work properly. The size I set in dreamweaver but the code of what a poster here suggested. Did the job perfectly (creating a box) but I can't get firefox to recognise the width of it!?

Nah, I meant the first frst image on the top right hand corner. You can see that it doesn't line up correctly with the border of the page. The logo and that image are 1px larger than the rest, but when I either make the image 1px smaller or make the table smaller the right hand image jumps even further to the right. It's got me totally confused, not to say fustrated! :hmm:

Bogey wrote:
No problem Allied77 glad to be of some help...

About the top right bg image... everything seems to line up except the very bottom left content bg... "Benitifs of recycled Printing Material". The very last one... it seems to extend a bit to the right...

Is that what you are talking about? If not, than I must not be catching it...
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post April 19th, 2008, 7:22 pm

For what it's worth, XHTML can have tables, too :P
It's just semantically free of errors to provide browsers with a standardized set of rules on how to parse it and to give a better uniform look globally.
  • Allied77
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Apr 17, 2008
  • Posts: 40
  • Status: Offline

Post April 20th, 2008, 4:58 am

neksus is there a way I can set the width of the grey box you showed me how to make above? The width I set works in IE but not in forefox. any ideas??
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post April 20th, 2008, 9:35 am

width: 400px;

If you're using padding or margins, you're probably experiencing collapsing margins or the mozilla/ie box model variations. If you can post your box CSS we can probably narrow it down ;)
  • Allied77
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Apr 17, 2008
  • Posts: 40
  • Status: Offline

Post April 20th, 2008, 9:41 am

Cheers neksus!

Heres the css I have for the box

Code: [ Select ]
.greybox {
    padding: 3px;
    background: #efefef;
    border: 1px solid #ccc;
    margin: 0px;
    width: 585px;
}
  1. .greybox {
  2.     padding: 3px;
  3.     background: #efefef;
  4.     border: 1px solid #ccc;
  5.     margin: 0px;
  6.     width: 585px;
  7. }


:hmm:

neksus wrote:
width: 400px;

If you're using padding or margins, you're probably experiencing collapsing margins or the mozilla/ie box model variations. If you can post your box CSS we can probably narrow it down ;)
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post April 20th, 2008, 9:52 am

So the width isn't working in Firefox? Or is it slightly larger in Firefox?
  • Allied77
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Apr 17, 2008
  • Posts: 40
  • Status: Offline

Post April 20th, 2008, 9:56 am

Yeah, I set the width initally just on the box itself in dreamweaver which works fine, except in firefox. when i set the width in css it doesn't work anywhere. could it be because i have it in a table?
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post April 20th, 2008, 9:59 am

Maybe...if the table/td width is defined then the greybox can only be as large as the td it's nested in.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 20th, 2008, 9:59 am

Post Information

  • Total Posts in this topic: 23 posts
  • Users browsing this forum: No registered users and 106 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.