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.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Nov 2014
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Text Moving around issue.

    Hello, Basically is there a way to make text, images etc stay exactly where they are.

    For example in full screen the page looks good (http://i.gyazo.com/90fd7a6009ba6f83b155d02e0f01df9f.jpg) but when I go to a different monitor or make it smaller, the hole page goes wrong (http://i.gyazo.com/81fb799dce1c6c0d1ddd28aea1e155ed.png)


    Thanks for reading, hope someone can help!

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,401
    Thanks
    11
    Thanked 297 Times in 296 Posts
    If you want a fixed size page, with nothing moving relative to the size of the browser, define everything in pixels. Nothing will move.

  • #3
    New to the CF scene
    Join Date
    Nov 2014
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey tracknut, as you can see from this: http://i.gyazo.com/2fd847d7308f9f7582c51b2c973a5eba.png
    it is all defined in pixels :/

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,401
    Thanks
    11
    Thanked 297 Times in 296 Posts
    I would need to see all the code for you to convince me it's all defined in pixels

  • #5
    New to the CF scene
    Join Date
    Nov 2014
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Got skype? add me: skateralfie

  • #6
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,401
    Thanks
    11
    Thanked 297 Times in 296 Posts
    I don't have skype. You can just post the code here in code blocks. It can't be very much code for that page.

  • #7
    New to the CF scene
    Join Date
    Nov 2014
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <!DOCTYPE html>
    <title>Alfie's Webpage.</title>
    <link rel="shortcut icon" type="image/x-icon" href="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xpa1/v/l/t1.0-9/p720x720/10306478_307891376069368_7000471772918877002_n.jpg?oh=ab5a4c33f2974fa093efdb7c3332a657&oe=54E5F6ED">

    <head>
    <style>
    body {
    text-align: center;
    background: url("http://www.whitegadget.com/attachments/pc-wallpapers/139626d1370943918-mountains-wallpaper-mountain-picture-1920x1080.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Verdana;
    }

    p {
    font-size: 24px;
    }

    input {
    border: 0;
    padding: 12px;
    font-size: 18px;
    }

    input[type="submit"] {
    background: #FFBF00;
    color: black;
    }

    .codecademyLogo {
    text-align: left;
    position: relative;
    top: 70px;
    }

    .codecademyInfo {
    color: white;
    position: relative;
    float: left;
    left: 300px;
    bottom: 130px;
    border: 5px solid white;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #FFBF00;


    }

    </style>
    </head>

    <body>
    <h1>Alfie Richardson</h1>
    <img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xpa1/v/l/t1.0-9/p720x720/10306478_307891376069368_7000471772918877002_n.jpg?oh=ab5a4c33f2974fa093efdb7c3332a657&oe=54E5F6ED" width=10%>
    <p>Hello, my name is Alfie. This is my first attempt at creating a webpage.<br>I really like computers and want my future career to involve them.</p>
    <input type="email" placeholder="Email">
    <input type="submit">
    </body>

    <div class="codecademyLogo">
    <a href="http://www.codecademy.com/learn">
    <img src="http://i.imgur.com/3a4wTdU.gif" alt="HTML tutorial" width=15%>
    </a>
    </div>

    <div class="codecademyInfo">
    <p>Codecademy is the place where<br>I learnt the skills used to make this website!</p>
    </div>

  • #8
    New to the CF scene
    Join Date
    Nov 2014
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <!DOCTYPE html>
    <title>Alfie's Webpage.</title>
    <link rel="shortcut icon" type="image/x-icon" href="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xpa1/v/l/t1.0-9/p720x720/10306478_307891376069368_7000471772918877002_n.jpg?oh=ab5a4c33f2974fa093efdb7c3332a657&oe=54E5F6ED">

    <head>
    <style>
    body {
    text-align: center;
    background: url("http://www.whitegadget.com/attachments/pc-wallpapers/139626d1370943918-mountains-wallpaper-mountain-picture-1920x1080.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Verdana;
    }

    p {
    font-size: 24px;
    }

    input {
    border: 0;
    padding: 12px;
    font-size: 18px;
    }

    input[type="submit"] {
    background: #FFBF00;
    color: black;
    }

    .codecademyLogo {
    text-align: left;
    position: relative;
    top: 70px;
    }

    .codecademyInfo {
    color: white;
    position: relative;
    float: left;
    left: 300px;
    bottom: 130px;
    border: 5px solid white;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #FFBF00;


    }

    </style>
    </head>

    <body>
    <h1>Alfie Richardson</h1>
    <img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xpa1/v/l/t1.0-9/p720x720/10306478_307891376069368_7000471772918877002_n.jpg?oh=ab5a4c33f2974fa093efdb7c3332a657&oe=54E5F6ED" width=10%>
    <p>Hello, my name is Alfie. This is my first attempt at creating a webpage.<br>I really like computers and want my future career to involve them.</p>
    <input type="email" placeholder="Email">
    <input type="submit">
    </body>

    <div class="codecademyLogo">
    <a href="http://www.codecademy.com/learn">
    <img src="http://i.imgur.com/3a4wTdU.gif" alt="HTML tutorial" width=15%>
    </a>
    </div>

    <div class="codecademyInfo">
    <p>Codecademy is the place where<br>I learnt the skills used to make this website!</p>
    </div>

  • #9
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,401
    Thanks
    11
    Thanked 297 Times in 296 Posts
    Your body tag is what's making this all move. The background is centered, which means it will move with the size of the browser (i.e, keeping it centered), and by not specifying a width, you are defaulting width to 100% which cascades down to all the other styles in the page. So try it like this:
    Code:
    body {
    text-align: center;
    width:1000px;
    background: url("http://www.whitegadget.com/attachments/pc-wallpapers/139626d1370943918-mountains-wallpaper-mountain-picture-1920x1080.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Verdana;
    }

  • #10
    New to the CF scene
    Join Date
    Nov 2014
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Now it stays the same on all pages but it's all gone to the left? :/

    http://i.gyazo.com/fa7d50efc572955b84702680fc067aa8.jpg

  • #11
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,401
    Thanks
    11
    Thanked 297 Times in 296 Posts
    Well I picked 1000px for your width. You can make it wider if you want, and your text is centered in that width.

    As a general comment though, "fixed width, nothing moves" is not the current trend in web sites. With screens all the way down to 480px wide, typically the issue you're going to deal with is how/where/if to move around things so they still fit on the page.

  • #12
    New to the CF scene
    Join Date
    Nov 2014
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your help dude! I appreciate it.


  •  

    Posting Permissions

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