Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: DIV Position

  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DIV Position

    Hello,

    My website is http://thebuffalonetwork.com

    I have having problems with DIV positioning. At first, is was I couldn't get my website to center itself automatically no matter what the width of the browser's window was. I fixed that. Now, I'm having problems with height positioning, specifically two things. 1) When I write up a post, my auto DIV height makes itself longer, which throws off all the other DIVs height position because they are all relative. 2) I'm having problems of my site lenthening itself automatically when I create a new post, which makes my site longer. As you can see at the bottom, it runs out of space. Please take a look at my site's source code and help! Any advice on anything would be highly appreciated.

    I taught myself how to create websites through trial and error. Any advice would be helpful.

    stlboi@gmail.com

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,696
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    At first it isn't nice to double or cross post. That's just waisting the time of those who wanna help.
    Secondly: You've made a good start but there are several things to consider when creating a CSS based website. At first view your site with Firefox and switch off styles ("View > Website style > No style"). And then go to http://csszengarden.com, do the same thing, and tell me what's different. Learn from this website how to apply images as background images (if they ae supposed to be background images or images that aren't of absolute importance for the understanding of the content of your website).
    All this - separating structure from presentation - is part of semantic web development which you should be aware of and practice before you start styling with CSS. And believe me, styling websites with CSS is a lot easier with clean, valid, and semantic code.

    After that, again, look at how the guys on csszengarden.com have styled the pages and learn from them. And for some basic tutorials on how to create different layouts Bon Rouge's website might be helpful.

    Hope that helps? Good luck.

  • #3
    New Coder
    Join Date
    Dec 2006
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help. I will check it out.

    Sorry for double posting. It didn't look like anyone was going to answer this one. This is my first time posting on here, thanks for the help!

  • #4
    New Coder
    Join Date
    Dec 2006
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Stephan,

    I like your website's layout. It's kinda what I was aiming for, except with a little column on the right for my archives and things. Is there any where that will teach the technique you used? I will continue to look for it on Bon Rogue's site. Thanks!

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,696
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Bon Rouge's website is the right place to look at. There is a link further down in the menu that reads "CSS LAYOUTS". This is where you find all kinds of layouts and explanations on how to create them. What you are looking for is a 2 column layout.
    The good thing is that it just takes a few changes in the CSS to switch columns from left to right if desired.

  • #6
    New Coder
    Join Date
    Dec 2006
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again.

  • #7
    New Coder
    Join Date
    Dec 2006
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay,

    I just put my blogger DIV at the bottom of all the DIVs, so no matter how long it becomes, it does not have an influence on the other DIV's positions.

    I just need an easy solution on how to stretch my background DIV to have it auto fit my blogger's DIV. I can not think of a solution or find one other than manually doing it every time I post something, which would be an extreme hassle.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello stlboi,
    I couldn't sleep last night so I was looking for a project...

    I sure hope you don't mind... I rewrote your website and thought you might like to use some it. See it at buffalo demo

    It's not perfect, still doesn't validate, but it might be a good start. If nothing else you can take it apart and see what makes it work. Feel free to take the whole thing or just a snippet.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Ugh...
    I just looked at that in IE6.
    I hate IE6.

    Looks good in IE7 and FF...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Dec 2006
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't mind at all. Thanks for the help! I will check it out.

  • #11
    New Coder
    Join Date
    Dec 2006
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That is actually really good and what I was looking to do. Just have to figure out how to get that shading around the whole thing right on both sides. But it's definitely a start.

    Now, what did you focus on and how did you go about doing it? I wish I could of sat behind you and watched you change it.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I just tried to make the page work without any positioning. I also like to trim the CSS as much as possible.
    The shadow down the side will be easy for you to fix. Right now it's just a slice from a screencap that I put as the background set to repeat-y. Just make yourself a better slice than I did.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    New Coder
    Join Date
    Dec 2006
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Could you hightlighte which part in the source code that deals with that shading on the sides? Thanks!

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    In your CSS look at
    Code:
    #content {
    	width: 774px;
    	background-image: url(The%20Buffalo%20Network%20-%20Once%20a%20Buffalo,%20Always%20a%20Buffalo!_files/bgx_bottom.jpg);
    	background-repeat: repeat-y;
    	background-color: #FFFF00;
    }
    bgx_bottom.jpg is the slice I made from a screenshot of your webpage. All you need to do is edit that picture or make another one.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    New Coder
    Join Date
    Dec 2006
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks bud.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •