login about faq

To prove you're not a spammer, email newuser.lgqa@gmail.com with the subject "Account Request" to request an account.


Hello,

As part of a school project, I have to make a website.

I have made a template in Photoshop, sliced and exported as web.

I have since added a line of code to center the site when displayed on larger displays, but now, any text will not stay in a fixed position on the site; ie, when I make the window bigger, the text does not stay in its correct place.

Would anyone be able to suggest a way in which I could resolve this.

Please note, I am trying to use a floating text box for the text as the rest of the site is made of images and I am not able to insert tables with out displacing the image.

Thanks in advance, Tim

asked Feb 16 '12 at 04:35

Tim%20Fontana's gravatar image

Tim Fontana
16.4k148211390


Do you have the width set to auto for the CSS of your text div? eg width: auto !important;

answered Feb 16 '12 at 06:27

Razor512's gravatar image

Razor512
16.5k3683259

I have changed this and the problem still occurs. I have uploaded the site files to www.fontana.me.uk/testsite

Would you please be able to have a look and see what you ca think from there.

Index.html is before adding auto. I will make it so that navigating to new.html is with your suggestion added. Thanks,m

Tim

(Feb 16 '12 at 07:25) Tim Fontana Tim%20Fontana's gravatar image

Try enveloping the entire site in a "Content wrapper". From that point you can set specific components within the page to specific positions (including float). It would be better if you use CSS to do this. You can even write the CSS to the head section of the page in order to see the results immediately and then copy the data to an external CSS page and do a link reference to it later on. It will make the page lighter for loading. Within the CSS, pre-define all sizes and locations for your div's. I have a simple site you can go look at and do a view source from the page to get an idea of what I'm talking about. Go to sjcfd.com. Here's an example from my CSS:

contentWrapper { width: 950px; margin-right: auto; margin-left: auto; z-index: 2; }

Good luck.

answered Feb 16 '12 at 09:30

David's gravatar image

David
3.3k112062

www.fontana.me.uk/testsite

Could you please look at this and tell me what you think would be best. I'm a total noob at web but it was the only option that was available to me on the course this year.

(Feb 16 '12 at 12:56) Tim Fontana Tim%20Fontana's gravatar image

I looked at it earlier and came up with the idea to place the whole page in a content wrapper. Then set up your table inside one div called banner. Set the properties for that div. Next define a div for the image and text. Set the properties(i.e., left margin:0; right margin 720;, etc.) to position that div within the container where you want it. The right margin is truly the width of the container minus the spacing you want from it. You will also want to center the container. This will help keep the page at center of the window.

(Feb 16 '12 at 13:58) David David's gravatar image

Okay. I'm not really sure where to put the code you've given me though? Thanks for the help though :)

(Feb 16 '12 at 16:53) Tim Fontana Tim%20Fontana's gravatar image

In a nutshell, you can put "Styles" inline (i.e., div class=test style="left-margin: 250px; right-margin: 250px; ..... and so on). You can also define your styles in the Head section (which you already prepared with the styles = text/css). An easy way to learn is to define your styles inline, try them out, refine them, and then once you're happy move them to the head section or better yet move them to an external style sheet. As far as the content wrapper, it will be the very first div you create in the body section and the last div to close. This keeps the contents of the page tightly wrapped inside.

(Feb 16 '12 at 17:53) David David's gravatar image
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or __italic__
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported


Tags:

×353
×176
×145
×60
×29

Asked: Feb 16 '12 at 04:35

Seen: 943 times

Last updated: Feb 16 '12 at 17:53