8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

css positioning problem

by batistaa
7 replies
  • WEB DESIGN
    • |
Hello,

I have one small problem with my css.

I have positioned the text on a website using css position and everyhting seemed to be fine untill i viewed the site on a smaller screen with a lower resolution

the text was in the middle of the screen.

what can i do to make it stick one the same positon on the website no matter what resolution you use on your screen?

thanks a lot in advance for all the help


Best
#css #positioning #problem
  • Profile picture of the author Jon Potts
    Sounds like you have a lot to learn about HTML & CSS. The only advice I can give is to try making one big division that contains the whole page and set its width to the size you want with auto margins on the left and right side to center that box. Then it will look the same on all screen resolutions.
    Signature
    Cheap Stuff Online
    Scrapbooking Supplies
    {{ DiscussionBoard.errors[2608790].message }}
    • Profile picture of the author valleytech
      Check out Lynda dot com for some good training videos. Or search around you tube. There are certain tags you must place your text in to control where it goes. Such as <div id=". Look around for a basic CSS layout. Should consist of

      • Wrapper tag - Box that holds header and footer
      • Header tag - inside wrapper tag
      • Sidebar tag
      • Body tag
      • Footer tag - close your wrapper tag.
      Once the simple layout is put together you can then use css rules to manipulate each tag.

      Hope I was somewhat helpful there are many other people who can explain this much better
      {{ DiscussionBoard.errors[2608817].message }}
  • Profile picture of the author Big Squid
    Give some more details...like the site you're working on and the css...(that is, if you want help).
    {{ DiscussionBoard.errors[2613886].message }}
  • Profile picture of the author SEO Expert Nepal
    add a <div> and wrap all the content of your site with this div. i.e <div id="pagewrapper">
    <div id="header"></div>
    <div id="left"></div>
    <div id="mid"></div>
    <div id="right"></div>
    <div id="footer"></div>
    </div>
    in this way your text will adopt relative position of wrapper div <div id="pagewrapper"> and stay in position.
    {{ DiscussionBoard.errors[2635175].message }}
  • Profile picture of the author mavericace
    Originally Posted by batistaa View Post

    Hello,

    I have one small problem with my css.

    I have positioned the text on a website using css position and everyhting seemed to be fine untill i viewed the site on a smaller screen with a lower resolution

    the text was in the middle of the screen.

    what can i do to make it stick one the same positon on the website no matter what resolution you use on your screen?

    thanks a lot in advance for all the help


    Best
    you can use wrappers on your div so that it will follow the Resolution of your sytem.
    {{ DiscussionBoard.errors[2635436].message }}
  • Profile picture of the author stevemack
    div and wrap are the words that mostly come across in CSS and should be aware of basics. w3schools can get you more information about basics.
    {{ DiscussionBoard.errors[2635442].message }}
  • Profile picture of the author clickbump
    Originally Posted by batistaa View Post

    Hello,

    I have one small problem with my css.

    I have positioned the text on a website using css position and everyhting seemed to be fine untill i viewed the site on a smaller screen with a lower resolution

    the text was in the middle of the screen.

    what can i do to make it stick one the same positon on the website no matter what resolution you use on your screen?

    thanks a lot in advance for all the help


    Best
    Hi Batistaa, css positioning can be very tricky, especially with mixed absolute/relative positioning, but its cake once you understand how parent element positioning affects the child position..

    I'd suggest adding a "position:relative" attribute to your absolutely positioned div's parent container. This will set the absolutely positioned div's x/y coordinates relative to the parent container, not the browser window.

    Once you do this, you might need to reset the absolutely positioned div's X/Y position since it will likely be much different once you set relative to the parent.
    Hope that helps!
    Signature
    {{ DiscussionBoard.errors[2637015].message }}

Trending Topics