Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Need some help with an image placement on my website!

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #30760
    neliuz
    Member

    Hi guys :)

    I am designing a website for a friend of mine!
    At the moment i have an image of a flower ornament on the top right corner of the site.
    The thing is, i want this site to work on all screen resolutions. But i have a problem with this ornament image.
    If i browser the site on a 11 inch screen or an old dell computer, the ornament image breaks the design.
    Cause i want this flower thing to always stay in the right top corner.
    Have been tryng several thing for 2 days with css , but i cant get it to work…
    Could someone help me out?

    Thanks !
    Best Regards

    #73510
    cybershot
    Participant

    you need to always post your code. But if you position the flower, it should be fine. Have relative positioning on the parent element and then put absolute on the flower image like this

    position: absolute;
    top: 0;
    right: 0;

    #73449
    cooljaz124
    Member

    Hi nelius,

    Yes. positioning the element will solve your problem.

    position:absolute;
    top:0;right:0;

    The element will stay at the top right hand corner of the screen, whichever screen resolution you chose.

    #73359
    neliuz
    Member

    Hei guys :)

    Thanks for your help! It works, but i got another problem..
    The ornament img is partly displayd on the screen.. it looks like it is behind an element!
    I did what you told me to cybershot. The main is the parent element and it´s relative positioned
    but i have the same problem :(
    Here is the css code (dno if you need the html):

    body {
    margin:0px; padding:0px;
    background-color:#413C29;
    overflow: visible;
    }

    #main {
    background: url(../images/bg.png) repeat-x;
    position: relative;
    }

    #main .conta iner {
    background-image: url(../images/background_light.jpg);
    background-repeat:no-repeat;
    min-height:400px;

    }

    #footer {
    background-image:url(../images/background_footer_light.jpg);
    background-repeat:repeat-y;
    color:white;
    padding:40px;
    }

    .container {
    width:950px;
    margin:0 auto;
    position:relative;
    }

    #header {
    padding-top:10px;
    }

    #logo h1, #logo small {
    margin:0px;
    display:block;
    text-indent:-9999px;
    }

    #logo {
    background-image:url(../images/logo.png);
    background-repeat:no-repeat;
    width:673px;
    height:183px;
    margin-left: -120px;
    }

    #navigation {
    position: relative;
    width: 950;
    margin: 0 auto;

    }

    ul#menu {
    margin:0 81.5px 0 0; padding:0px;
    position: absolute;
    right:0px;
    height: 74px;
    width: ;
    top: -20px;
    }
    ul#menu li a:hover {
    background: url(../images/hover_arrow.png) no-repeat scroll center 73px;
    text-align: center;
    font-weight: bold;
    color: white;
    font-size: 18px;
    display: block;
    width: 130px;
    height:62px;
    text-decoration: none;
    margin-top: -26px;
    padding: 23px 0 0 0;
    }

    ul#menu li {
    display: inline;
    width: 130px;
    height:55px;
    text-align: center;
    float: left;
    text-decoration: none;
    background: url(../images/nav_line.png) no-repeat scroll 0px 0px;
    margin-top: -22px;
    padding: 23px 0 0 0;
    outline: none;
    }
    ul#menu li a {
    text-align: center;
    font-weight: bold;
    color: white;
    font-size: 18px;
    display: block;
    width: 130px;
    height:55px;
    text-decoration: none;
    overflow: hidden;

    }
    ul#menu li#line {
    display: block;
    width: 2px;
    height:40px;
    float: left;
    background: url(../images/nav_line.png) no-repeat scroll 0px 0px;
    margin-top: -22px;
    padding: 23px 0 0 0;
    }

    #main img#ornament {

    background-repeat:no-repeat;
    position: absolute;
    top: 0px ;
    right: 0px;

    }

    #73136
    cybershot
    Participant

    try putting z-index on the element like this

    z-index: 999;

    the element that you put it on has to be a positioned element. the z-index tells it to appear before other elements in the stacking order.

    Watch the video that Chris made on the matter

    https://css-tricks.com/video-screencasts/40-how-z-index-works/

    #72774
    neliuz
    Member

    Ahh :) Thanks guys! Got great help from you! I appreciate it !!!! :D

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.