- This topic is empty.
-
AuthorPosts
-
October 19, 2014 at 4:35 pm #186619khaan85Participant
Hi , i have problem with z-index and fixed position.I have two div , first
#out {
border: 1px solid #e3aff1;
width:280px;
position: relative;
background-color: #45619D;
margin-top:3px;
z-index:2;
}
second
#profil_names {
position: fixed;
background: none repeat scroll 0 0 #e9edf1;
font-size: 16px;
height: 20px;
padding:10px;
color: #0084c6;
width: 708px;
z-index:1;
}My idea is #out to see first and then #profil_names.The code work fine of IE,Firefox , but other browsers , #profil_names overlapping first , other div (#out).How can I decide this issue?
October 19, 2014 at 5:09 pm #186622__ParticipantCould you make an example (maybe use codepen) so we can see what you’re talking about?
From your description, I would suspect that your two
div
s overlap simply because of their size, and the fact that they are absolutely positioned.* But I couldn’t be sure without seeing a demo.* in many cases, absolute positioning is not actually what you want.
October 20, 2014 at 2:37 am #186640khaan85ParticipantHi , i make same code like my site, it’s work right here , but on my site not work .I will show you.
http://codepen.io/khaan85/pen/ufFsq , #out div is “none” it’s become “block ” and jump when i start to search people in my site.
it’s my site in Mozilla , IE , https://www.flickr.com/photos/128102071@N08/15395681687/
it’s my site in Opeta,Chrome
https://www.flickr.com/photos/128102071@N08/14961549753/October 20, 2014 at 2:47 am #186641Paulie_DMemberHi , i make same code like my site, it’s work right here , but on my site not work
Then perhaps we need to see the site…do you have a link?
October 20, 2014 at 4:41 am #186643khaan85Participantit’s on the localhost server :((,but today i will put it on the host server
October 20, 2014 at 9:48 am #186675__Participanti make same code like my site, it’s work right here
This? Are you saying that this is correct?
Looking at your css, you seem to be using fixed and/or absolute positioning almost exclusively. This is almost always not a good approach. The result is usually fragile, and tailored to only one browser and/or screen size.
However, I will wait to see your actual site before offering suggestions.
October 20, 2014 at 10:21 am #186676khaan85ParticipantHi again
My site is http://www.bestbody.eu . You may use for login in site
mail: [email protected]
pass: passwordThanks
October 20, 2014 at 11:25 am #186677__Participantlogin doesn’t work.
October 20, 2014 at 12:18 pm #186680khaan85ParticipantTry again , i check now and work always ,copy it without whitespace.
October 21, 2014 at 4:07 am #186723khaan85ParticipantDo you someone else help me ?
October 21, 2014 at 11:25 am #186764__ParticipantAlright:
I’m fairly sure that your problems are a result of using fixed/absolute positioning basically everywhere. I’m sure there is one “magic” screen size (i.e., your screen size) where everything looks basically correct, but I can’t find it. I can’t even see the whole site unless the window is greater than 1080 pixels wide. It is very difficult to work with.
As for the #out and #profil_name divs, they don’t appear to “overlap” each other at all, in any browser I have available. #out is an empty 280×0px div in your search box; it’s not even close to #profil_name.
Perhaps you can explain your problem in more detail?
October 21, 2014 at 1:37 pm #186769khaan85ParticipantOkay resolution of my display 1366 x 768
Firefox work right
https://www.flickr.com/photos/128102071@N08/14974214364/
Chrome Opera work wrong
https://www.flickr.com/photos/128102071@N08/15408863698/
I understand a little bit CSS sorry.October 22, 2014 at 12:43 pm #186839khaan85Participanti fix some responsible design problems , do you have someone to help me with my big problem?
October 23, 2014 at 11:06 am #186932khaan85Participanti understand that problem is z-index and webkit ,but not decide it
October 23, 2014 at 12:15 pm #186941Paulie_DMemberi understand that problem is z-index and webkit ,but not decide it
Actually no…
I’m fairly sure that your problems are a result of using fixed/absolute positioning basically everywhere. I’m sure there is one “magic” screen size (i.e., your screen size) where everything looks basically correct, but I can’t find it. I can’t even see the whole site unless the window is greater than 1080 pixels wide. It is very difficult to work with.
Try learning better ways of laying out pages.
Absolute/Relative positioning has its place for specific effects but as a page layout method…its worse than tables.
-
AuthorPosts
- The forum ‘Design’ is closed to new topics and replies.