GFXVoid Graphic Design Forum

Remove Text Formatting
Loading...

» Online Users: 502

0 members and 502 guests
No Members online

» Site Navigation

 > FAQ

» Stats

Members: 35,443
Threads: 103,072
Posts: 826,684
Top Poster: cc.RadillacVIII (7,429)
Welcome to our newest member, Lekelindids
Page 2 of 4 FirstFirst 1234 LastLast
Results 11 to 20 of 35

Thread: Website help

  1. #11
    Join Date
    May 2005
    Location
    Holland
    Posts
    31

    Default

    Giving your text an exact position is part of the coding of the layout.
    The layout is completely built in divs (divisions), each div contains information such as images for the layout or the actual text.
    These divs can be positioned best through a CSS (Cascading Style Sheet) file which can be used in any HTML document.
    The advantage of this is that you only have to make 1 CSS file which you can use in all of the HTML documents.


  2. #12
    Join Date
    Aug 2009
    Location
    The Netherlands,
    Posts
    1,029

    Default

    Thank you.. This helped me understand a little more..


    Dare the Devil

    www.artistic8.com
    -Domino-

  3. #13
    Join Date
    Aug 2009
    Location
    The Netherlands,
    Posts
    1,029

    Default

    Okay, new question..

    Since everybody has a differnet screen size the 'exact distance' will be wrong. Ex:
    On my com its 400 pixels to the left, and 200 top, and at my bro's it looks way outta position.
    HELP!


    Dare the Devil

    www.artistic8.com
    -Domino-

  4. #14
    Join Date
    May 2005
    Location
    Holland
    Posts
    31

    Default

    Yes, that would be the case if you give everything a hard position.
    There are some tricks though.
    I'm just assuming that you want to center your layout.
    To do this you will have to place all of your content divs in a main div which you center with CSS.

    Code:
    <html>
    <head>
        <title>Example page</title>
    </head>
    
    <body>
        <div id="main_div">
            <div id="header">Header image</div>
            <div id="content">Page content</div>
        </div>
    </body>
    </html>
    And the CSS would be something like this:

    Code:
    #main_div {
        position: relative;
        margin: auto;
    
        width: 800px;
        height: 700px;
    }
    
    #header {
        position: absolute;
    
        top: 0px;
        left: 0px;
        width: 800px;
        height: 100px;
    }
    
    #content{
        position: absolute;
    
        top: 100px;
        left: 0px;
        width: 800px;
        height: 600px;
    }

    The above example would create a simple page with a box of 800x700 which is always centered horizontally in the page.
    This example is not centered vertically.
    It is possible to create vertically centered layouts but it is a pain in the butt to do so.
    I'd rather suggest you make a layout which centers horizontally and uses the full vertical page, this is a lot easier to code.


  5. #15
    Join Date
    Mar 2005
    Location
    USA
    Posts
    1,337

    Default

    You can also use margin: 0px auto on your container div to center it no matter what the width is.

    I generally like to use a maximum container width (or the width of the largest overall element in the layout, usually the container, at about 960px. Depending on how you've set up your original layout, and if you've used a grid to align elements, 960 is a pretty even choice because nowadays the most common resolution is 1024x. 960 gives a pretty good amount of space without having to worry about wrapping.

    The html would be something like:

    <div id="container">

    ...

    </div>


    And the css for it would resemble:

    #container {
    width: 960px;
    min-height: 600px; // this isn't necessary, but if you don't have any content, it won't expand
    margin: 0px auto;
    }


    margin: 0px auto; is the same as margin-left: auto; margin-right: auto. The only constant is that you must specify a width for your div or it won't work. You also can't use any type of css hacks that would throw IE into quirks mode because in quirks mode, IE doesn't understand "auto".

    In regards to your example @judo, I would really advise against using absolute positioning on static elements unless you're sure of your target audience. The problem with absolute position is that it totally ignores the user end resolution and the width of the actual browser window. Since this can inherently cause problems, relative positioning is usually the better way to go. Absolute positioning is useful for things that are guaranteed not to be affected by a smaller browser window, but I've never been fond of entire layouts that use this method. Divs are automatically positioned relatively either way.

    And I just took a second look at your css judo, I didn't see the "#main_div", it looks like that would be left aligned, and the box would be moved to the center of that, but that seems like a pain to keep up with. If I were going to center a div inside another div, margin: 0px auto; would do the trick for both, assuming both had specified widths.
    Last edited by Chris; 04-25-2010 at 12:23 PM.




  6. #16
    Join Date
    May 2005
    Location
    Holland
    Posts
    31

    Default

    My code works, I tried it before posting. ^^
    I'm centering the main div so everything inside that div is centered automatically.

    You're right on the absolute positioning by the way, it can be very tricky business but in this example it would work rather well.
    However, I'd suggest using relative positioning with floats (I always use this).
    I didn't use it in the example because I would have to explain floats at the same time which would make the explanation a lot more complicated.
    It's better to explain one thing at the time. ^^


  7. #17
    Join Date
    Mar 2005
    Location
    USA
    Posts
    1,337

    Default

    Quote Originally Posted by Judobreaker View Post
    My code works, I tried it before posting. ^^
    I'm centering the main div so everything inside that div is centered automatically.
    This part isn't actually true though. Centering the div does not mean that everything inside the div is automatically centered as well. Left align is automatically given if no alignment is specified.

    I'm not trying to be prick, hopefully I don't come off that way. There's just a lot of potholes to dealing with things like centering layouts and working with relative vs absolute positioning, which is easy in theory if you're well versed with the box model. Obviously though it can be tricky. I just want to make sure he's getting accurate information. :P




  8. #18
    Join Date
    Aug 2009
    Location
    The Netherlands,
    Posts
    1,029

    Default

    I dont want to center the layout. I want to place some text precisely somewhere if someone misunderstood .. (or was that a different forum?)


    Dare the Devil

    www.artistic8.com
    -Domino-

  9. #19
    Join Date
    May 2005
    Location
    Holland
    Posts
    31

    Default

    Quote Originally Posted by Solaris View Post
    This part isn't actually true though. Centering the div does not mean that everything inside the div is automatically centered as well. Left align is automatically given if no alignment is specified.

    I'm not trying to be prick, hopefully I don't come off that way. There's just a lot of potholes to dealing with things like centering layouts and working with relative vs absolute positioning, which is easy in theory if you're well versed with the box model. Obviously though it can be tricky. I just want to make sure he's getting accurate information. :P
    Ahh I see what you mean.
    I wasn't trying to actually center everything inside the div too, I just want to center the whole thing within the layout.
    You're very correct that inside the div everything is still aligned to the left. :P


  10. #20
    Join Date
    Aug 2009
    Location
    The Netherlands,
    Posts
    1,029

    Default

    Bumped with new question(s)


    Dare the Devil

    www.artistic8.com
    -Domino-

Similar Threads

  1. Website
    By Tyson in forum Digital Art
    Replies: 2
    Last Post: 11-30-2007, 02:31 AM
  2. My Website
    By MCKFX in forum Digital Art
    Replies: 1
    Last Post: 09-17-2007, 05:05 AM
  3. My New Website......
    By dragonlord in forum Digital Art
    Replies: 22
    Last Post: 09-15-2005, 10:51 AM
  4. New website
    By villian in forum Digital Art
    Replies: 5
    Last Post: 08-22-2005, 02:40 AM
  5. website
    By imported_amar in forum Digital Art
    Replies: 2
    Last Post: 07-29-2005, 10:37 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Powered by vBadvanced CMPS v4.1.1