14 replies [Last post]
_Dom_
Offline
newbie
Leeds, England
Last seen: 17 years 27 weeks ago
Leeds, England
Joined: 2004-04-18
Posts: 9
Points: 0

hey this is my first post to this forum and i am a CSS newbie im currently having problems creating a no tables layout

the part of the problem is

the css

#footer	{
				position: relative;
				text-align: center;
				top:99%;
				width: 92%;
				padding:.3em;
		}

#content	{
				position: absolute;
				display: block;
				border: 2px dotted #000000;
				color: #000000;
				text-align: center;
				background:#ECEAE6;
				left:2%;
				top:200px;
				width: 92%;
				padding:.3em;
		}

The HTML

	<div id="content">
		Welcome
	</div>
	<div id="footer">
	<p>
      <a href="http://validator.w3.org/check/referer">  <img style="border:0;width:88px;height:31px"
          src="http://www.w3.org/Icons/valid-xhtml10"
          alt="Valid XHTML 1.0!" height="31" width="88" /></a>


	 <a href="http://jigsaw.w3.org/css-validator/check/referer">
  <img style="border:0;width:88px;height:31px"
       src="http://jigsaw.w3.org/css-validator/images/vcss" 
       alt="Valid CSS!" />
 </a>
 <a href="http://www.mozilla.org/products/firefox/"
title="Get Firefox - The Browser, Reloaded"><img
src="http://www.mozilla.org/products/firefox/buttons/getfirefox_large2.png"
style="border:0;" alt="Get Firefox" /></a> 
</p>
	</div>

the problem i am facing is that i want the buttons to be directly under the content div but it appears half way down the page...i could use absolute posisioning but i dont know how far down the page my content will be (it will be different on each page) can anyone give an idea to a css newbie Smile
[/code]

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

problems with divs

Hi

Is this more like what you wanted?

#footer   { 
            position: relative; 
            text-align: center; 
            padding:.3em; 
      } 

#content   { 
            position: relative; 
            border: 2px dotted #000000; 
            color: #000000; 
            text-align: center; 
            background:#ECEAE6; 
            margin-left:2px; 
            margin-top:200px; 
            width: 92%; 
            padding:.3em; 
      }

Trevor

_Dom_
Offline
newbie
Leeds, England
Last seen: 17 years 27 weeks ago
Leeds, England
Joined: 2004-04-18
Posts: 9
Points: 0

problems with divs

no it didnt really work allow me to link to the page where i am doing

http://www.ivelosttheplot.com/pr/notables/index.htm

http://www.ivelosttheplot.com/pr/notables/menu.css

http://www.ivelosttheplot.com/pr/notables/main.css

as the content gets bigger the buttons should shrink

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

problems with divs

Hi Dom

You are going to have to much more fully describe what you are trying to do, as I cannot figure it out from what you have said so far.

Trevor

_Dom_
Offline
newbie
Leeds, England
Last seen: 17 years 27 weeks ago
Leeds, England
Joined: 2004-04-18
Posts: 9
Points: 0

problems with divs

if you look at the index page above you will notice that the menu is positioned corrently as is the logo above but what i want is the "footer" (the XHTML, CSS and firebird buttons) to be below the content box.. the problem i am having is that the content box changes height so i cannot position it in pixels

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

problems with divs

Hi Dom

I sort of already answered your question, but

If a div is positioned relatively then don't use top, left, right or bottom.

Use margin-top, margin-left, etc.

So, change the top:150px in the content style to margin-top:150px

Trevor

_Dom_
Offline
newbie
Leeds, England
Last seen: 17 years 27 weeks ago
Leeds, England
Joined: 2004-04-18
Posts: 9
Points: 0

problems with divs

that worked for the footer...but now the textbox just stays in one place (no matter if i put margin-top:250px margin-top:550px or anything it dostn move

_Dom_
Offline
newbie
Leeds, England
Last seen: 17 years 27 weeks ago
Leeds, England
Joined: 2004-04-18
Posts: 9
Points: 0

problems with divs

ok it works in firefox fine Smile but in IE the footer stays in the middle and the content doesnt move at all

_Dom_
Offline
newbie
Leeds, England
Last seen: 17 years 27 weeks ago
Leeds, England
Joined: 2004-04-18
Posts: 9
Points: 0

problems with divs

well the site works how i want it to in firefox... but not in IE

check it out http://www.ivelosttheplot.com/pr/notables/

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

problems with divs

Hi

I see the menu is all position:absolute

What this measns to the browser is:

Put me exactly in this place and all other content can ignore me (so it goes either on top or under me).

You really shouldn't use position:absolute unless you are absolutely sure you need it, and you don't.

I don't want to spend hours doing your work for you, just point you in the right direction. Take out the absolutes and use relatives (or no postion at all), and then rebuild it.

Trevor

_Dom_
Offline
newbie
Leeds, England
Last seen: 17 years 27 weeks ago
Leeds, England
Joined: 2004-04-18
Posts: 9
Points: 0

problems with divs

im not asking for you to do the worki am glad your pointing me in the direction... but why does it work in firefox and not IE

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

problems with divs

_Dom_ wrote:
im not asking for you to do the worki am glad your pointing me in the direction... but why does it work in firefox and not IE

Hi

There is a forum I know where one guy solves EVERYBODY'S problems by re-writing their entire code.

I prefer to point or hint, coz that way you learn.

As to why the difference? Life and Microsnot. Hate it we may, but IE is here to stay.

Trevor

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 17 years 52 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

problems with divs

The site is identical in Op7 Firebird and IE6. ?

http//www.positioniseverything.net/

_Dom_
Offline
newbie
Leeds, England
Last seen: 17 years 27 weeks ago
Leeds, England
Joined: 2004-04-18
Posts: 9
Points: 0

problems with divs

yeah i changed it.... looks good i think

c1sissy
c1sissy's picture
Offline
Regular
nj
Last seen: 11 years 5 weeks ago
nj
Timezone: GMT-4
Joined: 2003-06-15
Posts: 37
Points: 0

problems with divs

Quote:
but why does it work in firefox and not IE

Here is a good site for you to check out
http://www.virtuelvis.com/archives/158.html

I have used this and it works for me. It might help you out with your IE problem.

Good luck

c1sissy

^i^

The only stupid question is... the one that is never asked!!

http//directory.css-styling.com
http//fms-forum.com