Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Junior Member
    Join Date
    Dec 2011
    Posts
    12
    Member #
    30383
    Once again, so sorry for asking such pathetic newbie questions on an elite forum.
    But it's really stressing me out

    It seems that the AP divs that I once considered a layout "lifesaver" for a code illiterate like me, are in fact pathetic. I dismissed the "absolute" portion of the term and continued using them without realising how crap they were when changing window or screen size.

    I've attached my screenshot of a basic layout I'm thinking of which involves a few photos in the body with some text and buttons.

    With AP Divs, I was in heaven until I resized my browser window further than the edge of my screen (>1280 pixels wide). As you can see, the text "test" moved left.

    I'm actually struggling to find a definitive guide on using regular div tags to produce a layout, rather than absolute like the AP tags.

    For example, I wish to create a div tag in the header and place the word "test" so it sits in the centre of the website header, regardless of screen size/resolution.

    The other example is div tags with photos. When I want to place those photos side-by-side, how do I go about lining them up like I did with the AP Divs?

    Or in summary, what would be the best/easiest/cleanest way to achieve what is in the attached image?

    I'm just so god damn confused :/

    With my other threads I think I got too far ahead of myself: dealing with JS before I had a basic layout and knowledge of tags etc.
    What I've made there is simply a new page made from the pre made dreamweaver layout and have changed a few colours.
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Header div - create a wrapper, position relative " this would make this dive relative to the parent", size it to fit inside the parent. Then text-align:center; then the text inside tha div will always move to the center no matter how it's sized.

    For pics. Create a 1 div, define height, width, margins, borders. Relative position, float:left;

    Then you can add as many as you want, as long as ther is enough width, it will line up the dives left to right, then top to bottom, depending on the parent div, could be 2 columns, 3 columns...

    If the parent div is based on percentage width of visible screen, the as the screen is made wider, the image divs will adjust to fill the space in increments where they will fit.

    Absolute positioning of divs can be a headache at times.

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Absolute positioning definitely has its place. Webzarus laid it out pretty well for you. It's rare that you'll need any positioning other than relative, since with it you can use offsets and everything still remains in the document flow. The only thing I ever use absolute for is to force elements to sit in a specific spot within another element, like a semi-transparent description overlay for an image.
    Philep likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Junior Member
    Join Date
    Dec 2011
    Posts
    12
    Member #
    30383
    Quote Originally Posted by Webzarus, post: 228136
    Header div - create a wrapper, position relative " this would make this dive relative to the parent", size it to fit inside the parent. Then text-align:center; then the text inside tha div will always move to the center no matter how it's sized.
    Thank you so much! I'm starting to get the hang of this....
    So far so good, I've got that working now

    Quote Originally Posted by Webzarus, post: 228136
    For pics. Create a 1 div, define height, width, margins, borders. Relative position, float:left;

    Then you can add as many as you want, as long as ther is enough width, it will line up the dives left to right, then top to bottom, depending on the parent div, could be 2 columns, 3 columns...
    What I'm doing at the moment is simply inserting divs into my body container and defining what you've set above.
    The first div worked well, but as soon as I put the second one in (which I made from scratch again), the pictures unaligned themselves.
    Is there any way to set them so that the bases of each photo are aligned?

    Thanks again for your help, to Ronald and Webzarus!

    Oops edit: One more little thing to ask.
    If I wanted to create a 1px white line between my header and body, and body to footer, is this possible without changing what I've already made?
    I kinda want there to be a distinct transition between the 2 colors.

  6. #5
    Junior Member Lester LuvApollo Sim Jj's Avatar
    Join Date
    Jan 2012
    Posts
    5
    Member #
    30461
    Liked
    2 times
    I think you can use margin to create spaces between the divs. Margins are usually use for alignments of elements so I hope it can help
    Philep likes this.

  7. #6
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by Philep, post: 228196
    ...
    If I wanted to create a 1px white line between my header and body, and body to footer, is this possible without changing what I've already made?
    I kinda want there to be a distinct transition between the 2 colors.
    You can easily do this in your CSS by adding a border to the bottom of the header and one to the top of the footer.
    {border: 1px solid #FFF;} This will give you a one-pixel border - you can change it to whatever size you like, and whatever colour.
    Philep likes this.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  8. #7
    Junior Member
    Join Date
    Dec 2011
    Posts
    12
    Member #
    30383
    Can't believe I didn't even think of that. But thanks, worked perfectly!

    It's a long shot, but do you reckon its possible to convert the AP divs into regular, relative divs?
    I've tried, but its failed.

    - I got the coordinates and dimensions of the AP of the exact place I wanted the picture to be.
    - I created a new DIV and set these properties, thinking it would turn up in the same place.

    Seems as though, however, that it takes the "top" and "left" positions form the body container it is in, and not the position from the top like with the AP div.

    Urghh. All I wanted to do is line up the bottoms of between 2-5 pictures on each page, and make them centred with the same gap between each.

    I've tried setting margins and making the pictures float left, but as I add more than one photo, they stack vertically...

  9. #8
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by Philep, post: 228333
    Can't believe I didn't even think of that. But thanks, worked perfectly!

    It's a long shot, but do you reckon its possible to convert the AP divs into regular, relative divs?
    I've tried, but its failed.

    - I got the coordinates and dimensions of the AP of the exact place I wanted the picture to be.
    - I created a new DIV and set these properties, thinking it would turn up in the same place.

    Seems as though, however, that it takes the "top" and "left" positions form the body container it is in, and not the position from the top like with the AP div.

    Urghh. All I wanted to do is line up the bottoms of between 2-5 pictures on each page, and make them centred with the same gap between each.

    I've tried setting margins and making the pictures float left, but as I add more than one photo, they stack vertically...
    I have an idea of what your problem is, but can't tell for sure from your verbal description - it's not detailed enough. Is this live somewhere? If I could go see it online and play with the code I could possibly help out. If possible, post a link. If not, post your code, both HTML and CSS, and detail the image dimensions, and I'll see what I can do with it.
    Philep likes this.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  10. #9
    Junior Member
    Join Date
    Dec 2011
    Posts
    12
    Member #
    30383
    Quote Originally Posted by AlphaMare, post: 228339
    I have an idea of what your problem is, but can't tell for sure from your verbal description - it's not detailed enough. Is this live somewhere? If I could go see it online and play with the code I could possibly help out. If possible, post a link. If not, post your code, both HTML and CSS, and detail the image dimensions, and I'll see what I can do with it.
    Nope it's not live yet.
    I'll post a snippet of the HTML/CSS showing what I mean.= but I doubt it'll help.

    Basically what I've done is:
    - Laid out my page using AP divs
    - Noted down their dimensions and coordinates
    - Created a new normal DIV
    - Applied those coordinates and dimensions to it, assuming it would take the same place as the AP DIV was before.
    But it's not.'

    All I'd like to do is lay out my page with some photos and captions beneath, and doing the above method seemed like the easiest way (for me).

    May I pose another question or two?
    What would be the easiest way to do what I'm trying to do?
    Do I just fiddle with the positioning values and hope for the best?
    Or is there another way to automate the placement of the photos/divs?

    Thanks for the help!

  11. #10
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Some photos is a subjective term, displaying 1 image ( no idea what size ), is completely different than say 7 images, and positioning 1 as opposed to 7 is completely different.

    If it isn't live yet, perhaps an image with boxes, etc, to give us an idea of what you are trying to accomplish.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:53 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com