image not resizing, hard return not showing correctly, text not aligning with image

[tony webb]

I have just completed designing my first website and now want to make it fluid. It works apart from 3 small problems;

1. The header image doesn't resize. I use the following css code;

#head-photo img{max-width: 100%;} *head photo is the division that the image is in.

I also tried to use img{max-width: 100%} immediately below the head-photo division.

What code do I need to get the image to resize?

2. I have a <hr/> to underscore the menu. when the site is resized This shows half way down the nav bar.
What do I need to do to get the hard return to show underneath the nav.bar?

3. I have a small image in a text box and used "align=left" and hspace="3" in the html code. I validated the code and this was rejected. The w3c validator recommends placing the code in a css file. I used the following code;

#main-box img.align-left {float:left;} * main box is the division that the image is in.

The image appears as it should but the text doesn't align to the top right of the image. What code do I need to use to correct this?

You can see the page here
If you resize the browser you can see the header image problem.

You can see the full css code here

[tony webb]

I have managed to resolve the first problem concerning resizing the header image.

I am still struggling with the <hr/> issue. I have used a division in my css file to color the background of it and to place as postion: relative;

I have noticed that the <hr/> is fixed. It doesn't move when the browser is resized. It becomes hidden behind the resized nav bar. It even stays in this position without position: relative;

Can someone explain what I need to do to resolve this issue.

With regards to the 3rd problem; I have run the file through w3c validator many times. This is the first time that it has picked up on this issue. Would it be safe to leave the coding as it was with the align and hspace included? w3c uses html5 to validate html.

[Major Payne]

2) Have you tried including the "<hr />" inside the same container as the nav bar? Could use a partially transparent background image for nav container and set dimensions so the color underline bar shows. BTW, what is link to site? Hate to suggest things that may not work for you.

3) You are using outdated attributes and I suspect you are using eitheran HTML 4.01 Strict or XHTML 1.0 document type. These will be flagged by validator. Floating an element removes it from the normal document flow which is why you can not get the image and text to align as you want. There are ways around this, but, again, don't want to guess the code you need without seeing what you have already.

[tony webb]

Thanks for your reply.

The html file

I tried placing the <hr/> immediately below the nav bar but was left with a gap between it and the next element (division). I couldn't fill it with padding.

I bought a book which I think title should be changed to "teach yourself to become so frustrated you start pulling your hair out" Seriously it's called build a website in html and css. the author advocates the grid system and discounts the fluid system. I tried a grid system and kept geting silver screen background color spaces between the top and bottom of the boxes. ( i have a silver background and a very light page color). Hence the fluid system which until now, for me is easier to use.

The code used for the header image is below;

<div id="head-photo">
<img src="http://what-do-christians-believe.co.uk/wpimages/people_2d.jpg" alt="photo of church in the park" align="left" hspace="4">
</div>

The validator rejected the align and hspace and said to put it in the css. I tried that. it didn't work.

You can see the full html code here view-source:http://www.what-do-christians-believe.co.uk/test/test-3009.html

The css code

I tried your suggestion of making the background to the nav bar transparent by placing the following code in #menu ul li ;

I also tried your suggestion of making the background transparent with this code in the #menu ul division. I was left with a blank line!

background-color: #fffff0;
opacity:0.0;
filter:alpha(opacity=0);

I couldn't see anything in the nav bar! At least it shows that the code works!

I had the following code in the css file

#hard {padding-top: 50px;} it looked like the section wasn't being read as the nav bar stayed in the same position. I have now added style="padding-top: 60pxs" to the head division.

The Nav bar is one that I acquired from a free source how to page. I adapted the font, size and colours for my site.

The css code can be read here http://www.what-do-christians-believ...est/author.css

You can visit the test page. if you resize the browser you will see the problem.
http://www.what-do-christians-believ...test-3009.html

I've just noticed that the text box frame has disappeared. Probably as a result of playing with the code. Hopefully the page is as should be by the time you get to view it.

I hope this gives you all the information that you need. If not let me know what else you need.

Thanks.

[tony webb]

I have walked away from the pc for a few hours and gone back to my nightmare!

What I have discovered is that the font size doesn't change when I resize the browser.
This might be the cause of the problems. If I resize the font's by editing the css file everything works well. The problem with this tihs is that the font is a bit too small in the nav bar when viewed in a full sized browser (loads of empty space!).

I forgot to mention. I use ems from the 16 pixel scale, i.e. #h1 {font-size: 2.00em;}

I don't understand the why the different scales. I just pinned the tail on the donkey and used whatever I got!

[Major Payne]

I have walked away from the pc for a few hours and gone back to my nightmare!

What I have discovered is that the font size doesn't change when I resize the browser.
This might be the cause of the problems. If I resize the font's by editing the css file everything works well. The problem with this tihs is that the font is a bit too small in the nav bar when viewed in a full sized browser (loads of empty space!).

I forgot to mention. I use ems from the 16 pixel scale, i.e. #h1 {font-size: 2.00em;}

I don't understand the why the different scales. I just pinned the tail on the donkey and used whatever I got!

Might help:

Choosing Dimensions for Your Web Page Layout:

In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
Choosing Dimensions for Your Web Page Layout: http://www.elated.com/articles/choos...b-page-layout/
How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
Care With Font Size: http://www.w3.org/QA/Tips/font-size
Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/...yd/birtthtw/h/

Standard Font Info:

Common fonts to all versions of Windows & Mac equivalents - http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
How to Decide Which Font Family to Use - http://webdesign.about.com/od/fonts/a/aa080204.htm
What is a Font? - http://webdesign.about.com/cs/webdes.../aa051903a.htm
Fonts and Typography in Web Design - http://webdesign.about.com/od/fonts/...Web_Design.htm

The most popular fonts used by designers: http://www.linkedin.com/news?actionB...-tod-b-ttle-99
http://nicewebtype.com/notes/2009/07...s-and-typekit/
http://ilovetypography.com/2009/07/2...-where-are-we/
http://nicewebtype.com/fonts/

[Major Payne]

HR line seems to be working ok in Firefox. For image, you might try using this:

CSS:

#head-photo {
width: 1000px; height: 235px;
margin: 0 auto;
background: url(http://www.what-do-christians-believe.co.uk/wpimages/people_2d.jpg) no-repeat center scroll;
}

HTML:

<div id="head-photo"></div>

Don't need the image tag. Since you are using an HTML 5 document type, you do not need to close tags like the "<hr>" tags with a space an "/".

CSS Errors

[tony webb]

HR line seems to be working ok in Firefox. For image, you might try using this:

CSS:

#head-photo {
width: 1000px; height: 235px;
margin: 0 auto;
background: url(http://www.what-do-christians-believe.co.uk/wpimages/people_2d.jpg) no-repeat center scroll;
}

I have tried using your code in internet explorer and chrome. This is what happens;

Internet explorer.

The photo doesn't resize but the page works as it should.

chrome
The photo doesn't resize and the <hr> is still in the wrong place.

I have tried replacing the photo width with 62.50em and deleting the height. That didn't work either.

Hopefully I've managed to attach a screen print of how the page looks in chrome when it's resized.

Thanks for the references. I'll read them.

[Major Payne]

Not sure why you are trying to resize an header image when you must maintain the image's aspect ratio. There are probably scripts that will adjust width and height according to browser's viewport size, but they have their own problems at times. My code was meant to maintain the original image size at all times since 1000 X 235 is the actual size of image. As for the hr tag, you could use a sized div element and bottom-border CSS rule for horizontal line.

[tony webb]

Thanks for your reply.

As this is my first and website I thought that it would be a good idea to see how css and html works.

The idea was that if I identified mistakes in the code as it is at the moment and rectified them then I would know that any future problems would have been caused by using @media or whatever in css for the responsive side of my website.

My understanding was that by using the code that I have, all that I would need to do is write several css versions of my main division.

I'm going to try programming one media query size and see what the result is.

I understood the image code that you wrote and initially just replaced the width and height with the original ems sizes. I was impressed that you took the time to get the original size. I wouldn't have been able to write the css code to replace the html without your knowledge and advice.

Unfortunately the em sizes don't seem to be working. However I now understand that resizing won't work without using media queries or some way for detecting the screen size before loading the page.

I think I'll get hold of a css book so that I can learn a bit more about how to use it.

Thanks for your help.

[Major Payne]

There are scripts available that detect a viewer's resolution (and more). With the right one you can deliver the CSS file which will have the right sized image.

[tony webb]

I have adapted the code that you gave me and it is now;

#head-photo {maximum-width: 62.50em;
maximum-height: 14.70em;
margin: 0 auto;
background: url(http://www.what-do-christians-believ.../people_2d.jpg) no-repeat center scroll;
}

I was worried about the height being fixed. In theory it would mean that I could have an image 480px wide and 235 high. Which would look a mess. I removed the height from the code and the image wouldn't display. It's taken a while but I decided to try converting the height to em. This now works. You won't see it at the moment. I have added some media query code to the bottom of the file (before moving it to it's own file). The code that I now use is below;

#head-photo {maximum-width: 62.50em;
maximum-height: 30em; (nearest usable number)
margin: 0 auto;
background: url(http://www.what-do-christians-believ.../people_2d.jpg) no-repeat center scroll;
}

Unfortunately it's not loading when I test in opera 7 (mobile) but the photo of me in the text box does.

I did have the height as 235px and also tried 118px. The result was still 235px high.

Is there something that I need to add to the above code to get it to load?

I have searched for scripts. All I can find is @media which at first seemed easy to use. I have 2 issues (one, I can resolve but I'm not sure if it is the correct way) I've put them in a new thread.

I've attached a screen print of the opera layout for you to see.