Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Positioning Images and Text

Options
  • 01-06-2007 11:02am
    #1
    crybaby
    Registered Users Posts: 862 ✭✭✭


    Hello,

    Bit of a newbie question here Im afraid. Im trying to position images and text on a website that will stay where I put them in Dreamweaver. I have tried absolute positioning which looks fine in Dreamweaver but is completley different in Internet Explorer where the images are suddenly all over the shop

    Whats the best method for doing this?


Comments

  • Options
    #2
    Seth Brundle
    Moderators, Politics Moderators Posts: 39,920 Mod ✭✭✭✭Seth Brundle


    In what way are they different?
    You also have to remember that browsers can render pages differently and also users have the ability to make text larger or smaller and this can make the page look wrong.
    If you use DIVs you should be able to create a structure within which you can place your images and text.


  • Options
    #3
    crybaby
    Registered Users Posts: 862 ✭✭✭crybaby


    i did attempt to use divs but just found that the images were appearing on different parts of the screen when i opened it up in different browsers etc

    its a very simple design really theres 4 buttons on one side and three buttons on the other side and text will need to go into a specific spot, i just want to make sure that it will look right


  • Options
    #4
    Seth Brundle
    Moderators, Politics Moderators Posts: 39,920 Mod ✭✭✭✭Seth Brundle


    Sorry - I meant nested DIVs

    Are you using buttons or images? Use transparent gifs to space items out horizontally.


  • Options
    #5
    crybaby
    Registered Users Posts: 862 ✭✭✭crybaby


    Hi,

    Heres some code below which is basically the background image and then the four images that will act as buttons for the left hand side

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body {
    background-image: bg.jpg);
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    background-position:center
    }
    -->
    </style></head>

    <body>
    <div id="firstbutton"

    style="

    top: 150px;

    left: 235px;

    position: absolute;

    z-index: 1;

    visibility: show;">

    <img src="button-one.jpg" width="175" height="38" />
    </div>

    <div id="secondbutton"

    style="

    top: 199;

    left: 235;

    position: absolute;

    z-index: 1;

    visibility: show;">

    <img src="buttontwo.jpg"/>

    </div>

    <div id="thirdbutton"

    style="

    top: 245;

    left: 235;

    position: absolute;

    z-index: 1;

    visibility: show;">

    <img src="buttonthree.jpg"/>

    </div>

    <div id="secondbutton"

    style="

    top: 300;

    left: 235;

    position: absolute;

    z-index: 1;

    visibility: show;">

    <img src="buttonfour.jpg"/>

    </div>



    </body>
    </html>


    any help on the best way to lay it out would be mucho appreciated


  • Options
    #6
    Seth Brundle
    Moderators, Politics Moderators Posts: 39,920 Mod ✭✭✭✭Seth Brundle


    Nah - don't use fixed positioning.


  • Advertisement
  • Options
    #7
    El_mariachi
    Closed Accounts Posts: 381 ✭✭El_mariachi


    yeah i am having the same problem! can anyone help?


Advertisement