SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Positioning Help

    Hi,

    I'm working on this site....

    toomanydesigns.com/kelseydelo1/

    I'd like to change it so that when site site is resized (smaller) or viewed on 800x600 the main content doesn't move over the flower image. I also want to keep the main content in the center of the page.

    I've tried changing the position and using margins but none are achieving exactly what I want.

    Any ideas?

    Thanks!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think my host was down. Seems to be working now..

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    If you don't want the flower to get covered, what do you want? There is simply no room to keep those two things side-by-side on an 800wide screen. Either the main content will have to drop down below the flower, which I think would look silly, or you'd have to set a minimum width on your whole-page wrapper to force a horizontal scrollbar (so the page is actually always as wide as the design you want). Are you sure you want to make people do that? Otherwise, you'll have to be more specific; you've said what you don't want but didn't tell us what you do want.

    Normally, looking at your code, we would not hav used a p and an image for the flowers. They look like background decoration, not content. I'd put wrapper around the whole page, and make the flowers a background image of #wrapper.

    /*comments you are free to ignore*/

    In your h1, you have an image with this:
    title="Kelsey Delo" alt="Kelsey Delo"
    generally, do one or the other... since it's an image, alt is required, so do alt. Title doesn't do anything useful here: people who can see images can read the image. People who can't see images hear/see the alt text. Title at worst might have some user agents repeating twice: "First level header Kelsey Delo Kelsey Delo". If your image were really hard to read then the title tooltip might be useful for some people but the image looks pretty readable to me (except when it's sitting over the flower background : )

    This looks like a menu:
    Code:
    	<p class="buttons" id="handles">
    		<span>Home</span>
    		<span>Portfolio</span>
    		<span>Contact</span>
    	</p>
    We usually do in an unordered list (most navigations on pages are unordered lists). With loose spans sitting in an element, that's kinda like having your weekly pills all thrown together in a box. With an unordered list (ul) it becomes more like a pillbox, with the pills for each day in its own day-segment.
    Code:
    Please head over to the Portfolio section of this site to see some samples of my work.<br /><br />Click <a href="#"> here to download a copy of my CV/Resume</a></p>
    Instead of the two br's there, close your first p and then open a new one:
    Code:
    Please head over to the Portfolio section of this site to see some samples of my work.</p>
    <p>Click <a href="#"> here to download a copy of my CV/Resume</a></p>
    General rule is, one br might be necessary depending on the situation, but if you've got two of them, it's the wrong tool, becuase you're going for presentation that belongs in the CSS or you're missing a tag that should semantically be separating the two sentences.

    In Opera the text is kissing the image. You can add some margins to give it some space:
    Code:
    .kelsey {
            float: right;
            margin: 5px; (or margin-left: 5px;)
    }
    or something.

    * {margin:0;padding:0}
    Is a bad idea if you have a form (you do). Padding: 0 is the culprit. Once default padding is removed from form controls, in some browsers you can't add them back in. Opera seems to be one of those browsers. To be safer, keep the * {margin: 0;} and for padding you can just have
    html, body, ul {padding: 0;}
    ul because I'm hoping your menu becomes a ul. I'm still not sure which browsers if any have padding on the body or html elements so I'm still listing them until I know otherwise. There are a few other elements you can remove padding from but you don't have those in your code.

    Code:
    <p class="contact">Please enter your email:</p>
    <p><input class="contact-input textbox" name="Email" type="text" /></p>
    In a form, you should use labels with your inputs. Some of your other code is screen-reader conscious, so you'd be continuing in that direction with proper labels. Screen readers in Forms Mode read form controls, not p's or anything else. So you can do
    Code:
    <p>
      <label for="email">Please enter your email:</label>
      <input class="contact-input textbox" id="email" name="Email" type="text" />
    </p>
    The CSS you were giving p.contact could be given to #contact label instead, and the p wrapping the label-input pair may not be needed at all (since you're floating both inputs and labels). Otherwise, it would be good to clear with it:
    #contact p {
    clear: both;
    }
    to prevent some input somewhere from riding up if given the chance.

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi. thanks for all the tips. I'm in the process of making the suggeted changes. In regards to the flower I would like it so that the site and flower would sit side by side on smaller screens and the white space on the right would get removed. Here is a screen shot showing what I would like to happen. Once it reached this point I would like the white space to be removed instead of placing the content on top of the flower:

    toomanydesigns.com/kelseydelo1/images/screen.gif

    The flower and the content take up about 723 pixels by themselves.

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Hmmm okay.... one of my first ideas might not center the box the way you want... but what about this?

    the flower moves to the <body> as background. give the body left padding equal to the width of the flower image.

    everyone else sits in #wrapper, who is given no explicit width (but whose left side cannot slide over the body's left padding) so it continues trying to be 100% width of whatever inner space is left in the body. #wrapper could have a min-width as well to force a scrollbar, but you might be able to get away with just having the width of the box inside #wrapper. Keeping that box margin: 0 auto will center it inside #wrapper which means that it'll look the way you want at the small end, as #wrapper eventually shrinks as small as it can get and the box inside forces a min width and can no longer be centered (as it'll eventually be 100% of #wrapper cause #wrapper shrunk).

    But it means at larger screen sizes, the "centering" of the box will be a bit offset to the right a bit.


    Hmmm another idea is no padding on the body but lefft-padding on #wrapper and the inner box auto-margin centered. That might still look a bit off-centered at larger screens though.

    There are plenty of layout geniuses here and surely one of them knows some l33t trick to make the box always truly centered but still can't cover the flower (but the flower should still be a bg image I feel). But in the meantime you can try any of the two techniques and see if they are acceptable.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The simplest solution (excluding ie6) is to set a min-width on the body which unfortunately means stopping it short at about 890px.

    Code:
    body{min-width:890px;}
    Another solution that works for all except ie6/7 is to add an outer around all your page and then apply this simple style to it.

    Code:
    .outer{margin:0 180px}
    This will hold the page away from the flower image while not forcing a scrollbar on the right side and so the window can get as small as the image and center part combined before the scrollbar is triggered.

    In ie6/7 the scroll bar will be triggered at 180px from the right of the centred element (much the same as using min-width on the body).

  8. #8
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have added

    body {
    margin: 0 160px;
    }

    Seems to work pretty good. Haven't tested on ie yet though.


Bookmarks

Posting Permissions

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