- This topic is empty.
-
AuthorPosts
-
November 20, 2010 at 5:28 pm #30760neliuzMember
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 RegardsNovember 20, 2010 at 7:34 pm #73510cybershotParticipantyou 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;November 21, 2010 at 12:27 am #73449cooljaz124MemberHi 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.
November 21, 2010 at 11:58 am #73359neliuzMemberHei 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;}
November 21, 2010 at 12:51 pm #73136cybershotParticipanttry 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/
November 22, 2010 at 4:01 am #72774neliuzMemberAhh :) Thanks guys! Got great help from you! I appreciate it !!!! :D
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.