frenchbird

Does anyone have any ideas? I've attached the CSS below if that helps. If anyone can help I PROMISE to be a much better member and try very hard to help anyone else out there!!! /* main page section layout*/ body { text-align:center; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; width:100%; background-image: url(../images/userdetailsbg.gif); background-repeat:repeat-x; } #pagecontainer { margin:0px auto; overflow: visible; width: 1000px; background-color: #FFFFFF; text-align: left; } #topcontent { width: 1000px; height: 135px; background-color:#FFFFFF; } #maincontent { width: 1000px; min-height: 500px; height: auto !important; height: 500px; background-color:#CCCCCC; z-index: 1000; } #footercontent { width: 1000px; height: 55px; background-color: #66FF99; } /* top content section layout*/ #topcontent { width: 1000px; height: 135px; } /*#userlogo { This is found in customerconfig.css }*/ #userdetails { height: 95px; width: 275px; float:left; background-image: url(../images/userdetailsbg.gif); background-repeat:repeat-x; } #top_menu1 { height: 95px; width: 500px; float:left; background-color: #a0a0a0; background-image: url(../images/userdetailsbg.gif); background-repeat:repeat-x; } #top_menu2 { height: 40px; width: 1000px; clear:both; } /* top_menu1 section layout*/ /*#top_menu1container { This is found in customerconfig.css }*/ #top_menu1version { position:absolute; left: 350px; clear:none; height: 200px; width: 434px; background-color:#FFCC33; z-index: 3000; } /* top_menu2 section layout*/ /*#top_menu2container { This is found in customerconfig.css }*/ #top_menu2title { height: 34px; width: 130px; float: left; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color:#FFFFFF; overflow:hidden; padding: 6px 10px 0 10px; text-align: left; } #top_menu2version { height: 40px; width: 845px; float: left; padding: 0; text-align: left; z-index: 2000; } #userlogo { width: 225px; height: 95px; background-image: url(../images/superbreaks.gif); /*change background image max dimensions 225px x 95px*/ background-repeat: no-repeat; background-position: center; float:left; } #top_menu1container { height: 73px; width: 480px; border-bottom: solid 5px #283e8a; /*change border colour*/ background-color: transparent; float:right; } #top_menu2container { height: 40px; width: 1000px; background-color: #283e8a; /*change background colour*/ background-image:url(../images/top_menu2bg.gif); background-repeat:repeat-x; clear:both; }

Sorry about that - I've not got the details of it now - but I'll be sure to do that next time. Arghhh - put this in the wrong thread. Sorry.

Hi there, I'm building a site which is a renovation of an old asp site for someone. I'm just building a framework at the minute - so it looks a bit odd - but just thought I'd explain why things might look a bit strange and may seem a bit over complicated. Visit My Website I've got 2 menus which overlap each other - so I've put the top menu in a div which seems to have sorted that problem out (I've put a nice yellow bg colour on there to make it easier). The thing is I want the div to be fixed at the top right within the main page container (where 'menu' is written). I've had to use position absolute to get it to overlap the other elements, but this means when I resize the page it moves around. Can anyone help - I've tried everything I can think of. Thanks heaps

Sorry - just figured it out... Didn't know how to delete the post so thought I'd just delete the text in edit - feel really stupid now...

Thanks so much for your speedy replies. I'll crack on then - thanks again xx

Hi there I'm renovating an old site for someone - and all their internal pages are .htm pages. Whats the difference between .htm and .html? is there any reason i should keep working in .htm?? Thanks in advance

Thanks guys - thats brilliant - well happy - thanks xx

Hi there all, I'm hoping someone can help me - I've tried to do a search on the net but without the right words to do the search with I'm at a bit of a loss! I've got a web page with a fixed height - so am restricted to how much content I can put in there in one go. So..... I've seen on other sites a way of clicking on a bit of text and that then drops down a chunk of text below it - then folds it up again when you click on it again. I'm not sure what its called - and I hope someone can help me - as I'd really like to use it. Does anyone know if its a javascript thing? and if so where could I find a nice example?? Thanks guys

Wooo hoooo - thanks sooo much - finally figured it out. It was the fact that ther absolute position was relative to the container the div was help in that was getting me - I thought it was always just relative to the page. No wonder things were didapearing they were so far away I'd have had to send out a search party to find them. Thanks very much you're brilliant!!! Test Page

Awww bless you - thanks very much xx

Does anyone know of a good place to find an explaination of tags like fixed - absolute etc? I'm really getting fed up - might have to go back to tables - at least I knew how they worked!

Thanks so much - thats great I now have my scroll bars thanks. Just one thing... The footer area now moves with the scroll and I can't figure out how to fix it. view test page The grey bottom area of the site is made up of 3 divs #leftfooter { position: absolute; left: 0px; top: 729px; width: 200px; height: 200px; color: #000; background-color: #1e1e1e; overflow: hidden; } #mainfooter { position: absolute; left: 200px; top: 729px; width: 500px; height: 200px; background-color: #1e1e1e; overflow: hidden; } #rightfooter { position: absolute; left: 700px; top: 729px; width: 300px; height: 200px; color: #000; overflow:hidden; background-color: #1e1e1e; } In these 3 areas I've got another div - for example in the center 'mainfooter' there is #footercentercontainer { position: fixed; top: 750px; left: 225px; width:450px; height: auto; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #fff; background-color: #1e1e1e; z-index:5000; } I'm thinking its probably the position fixed thats mucking it up, but if I change that to absolute the text dissapears completly. Can anyone help?

Hi there, I am hoping there is someone there who can give me some help?? I have started a site in divs, which I haven't used before so please bear with me - its all new! I started this sometime ago then had to go off and do some other projects so I've come back to it now and I can't figure something out. I've made up the page by using includes in divs - but I need to be able to contain everything within one overall 'container' which will give me scroll bars - as at the minute if you reduce the size of the window the scroll bars only go as far at the main content area, and completey miss the black news area at the bottom. Does anyone have an idea of how to do this as I'm really confused - I've tried just sticking everything into another div but i doesn't seem to work. Thanks in advance for your help x View my site

Big smooch xx Thanks soooooo much x

wow - thanks!! I'm a bit mistified as to WHY it works - but work it does. Your wonderful - thanks so much. Could you explain one thing to me though?! Where does the width: 836px in the #logo div come from?

http://www.lightofspirit.co.uk/lightofspirit2/index.php Hi there - just tried that option with the negative margin - and it wraps perfectly - but the pic is being cropped by the #info div. #maincontent { padding: 0px; text-align:left; vertical-align: top; font-family: Arial, Helvetica, sans-serif; font-size: 11.5px; color: #fff; line-height: 1.5; margin: 0 20px 20px 100px; background-color:#FF66CC; overflow:visible; } #logo { position:absolute; top: 20px; left: 45px; background-image:url(../images/light_of_spirit.png); background-position:left top; background-repeat:no-repeat; height: 55px; width: 455px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; color: #999; text-align:left; padding: 40px 0px 0px 45px; background-color: #3366CC; } #info { padding: 95px 0 0 0 ; background-color: #333333; overflow:visible; } #imgleft{ float:left; margin: -40px 20px 20px 0px; background-color:#669933; } I've added in overflow:visible as i thought that would help - but it didn't. Any more ideas? Help!

Thanks for the reply. To be honest I'm using absolute positioning - ocs I just don;t understand how the other options work. Like I siad this is my first attempt at divs and it just seemed to be easier with absolute as I know that things will stay where I put them. I'll give your minus margin idea a go and see what happens. Thanks again

Hi all I'm new to the site - so firstly hello! Glad you're out there I really need some help! I'm building a design into a site which needs to be done in php using includes. At the moment its just layout that I'm stuck with - someone els is going to come in and set up the techncial bits (utilising the php). So.... heres where I'm at. I've set up a main site structure using divs and includes to basically give me a 3 column structure. http://www.lightofspirit.co.uk/lightofspirit2/index.php I've moved onto the include page for the centre area and set it up as below. <div id="maincontent"> <div id="logo">Becky Walsh - Intuitive transpersonal life coach</div> <div id="imgleft"><img src="images/beckie_walsh_home.jpg" alt="beckie walsh - intuitive transpersonal life coach" /></div> <div id="info"> <h1>Becky Walsh<br />Intuitive transpersonal life coach.</h1> <h2>Author, Radio presenter, Inspirational teacher<br />and public speaker.</h2> A warm welcome to you and thank you for visiting my website. <br /> <br /> You will notice that this site has video clips to compliment the written information. <br /> <br /> I have worked for many years in a field of personal growth, as a teacher and a personal consultant. I am of the view point that there is nothing ‘wrong’ with you or your life, but from time to time we need a bit of guidance to help us through a difficult time; some clarity, an understanding of our life's purpose. <br /> <br /> My work is to assist you in becoming all that you can be, offering you an<br />up-lifting and alternative perspective.<br /> <br /> Being intuitive I am often able to see where ‘sticking points’ or ‘blocks’ have started. I can also see the view point of people around you and can guide you into a more positive perspective. I believe our thoughts create our reality. Having a different perspective can shift old patterns and bring forth a brighter future. <br /> <br /> <h3>I am not a miracle worker, you are! We just forget sometimes and I’m here to remind you. </h3> </div> </div> With the styling: #maincontent { padding: 0px; text-align:left; vertical-align: top; font-family: Arial, Helvetica, sans-serif; font-size: 11.5px; color: #fff; line-height: 1.5; margin: 0 20px 20px 100px; background-color:#FF66CC; } #logo { position:absolute; top: 20px; left: 45px; background-image:url(../images/light_of_spirit.png); background-position:left top; background-repeat:no-repeat; height: 55px; width: 455px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; color: #999; text-align:left; padding: 40px 0px 0px 45px; background-color: #3366CC; } #info { padding: 95px 0 0 0 ; background-color: #333333; } #imgleft{ position: absolute; top: 95px; left: 0px; float:left; margin: 0 20px 20px 0px; background-color:#669933; } I've put the colour blocks behind the divs to make it easier to see. What I need to know is - how can I get the text in the #info div to wrap around the photo in the #imgleft div??? Really sorry if I've done something hideously wrong - this is my first attempt at working in divs - I've been a <table> girl up to now - and I'm feeling a bit lost! Thanks in advance for any hope you guys can give me!!!