html - How to stop an element that is position:fixed from overlapping static positioned elements -


i beginner when comes css positioning.

my problem: attempting create element contains links social networking sites. want element "position:fixed;" not scroll, want have margin between #social div (the element trying this) , #bodycontainer div (which contains rest of website) - not want margin referencing off browser window (but based off of #bodycontainer div.

basically want to:

  • disallow #social div overlapping #bodycontainer (rest of website), yet keeping #social 's position: fixed.
  • keep margin between #social , #bodycontainer. not want base margin off browser window, want based off #bodycontainer div. how do this? (i want #social 5px left of #bodycontainer.

my code (shortened):

 <body>  <div id="social">  <div id="socialimages"> <a href="http://facebook.com/connor.lydon" target="_blank"> <img src="fblogo.gif"> </a> <a href="http://instagram.com/connorlydon" target="_blank"> <img src="instalogo.gif"> </a> </div> </div>     <div id="bodycontainer"> <img src="lydon_websiteanimation.gif" id="header"> </div>  </body>   #social { position: fixed; float: left; width: 200px; height: 100px; margin-left: 10px; background-image: url(socialtalk.png); background-repeat: no-repeat; background-position: top-left; }  #socialimages { width: 45px; height: 100px; margin-left: 200px; margin-top: 60px; }  #bodycontainer { margin-left: auto; margin-right: auto; width: 726px; }

i guessing quite simple question, , apologize. have looked @ many guides , have been having trouble figuring out on own.

if rephrase part of question can better understand please - gladly will!

i appreciate receive.

thank you.

try this:

 <body>  <div id="social">  <div id="socialimages"> <a href="http://facebook.com/connor.lydon" target="_blank"> <img src="fblogo.gif"> </a> <a href="http://instagram.com/connorlydon" target="_blank"> <img src="instalogo.gif"> </a> </div> </div>     <div id="bodycontainer"> <img src="lydon_websiteanimation.gif" id="header"> </div>  </body>   #social { position: fixed; float: left; width: 200px; height: 100px; margin-left: 10px; background-image: url(socialtalk.png); background-repeat: no-repeat; background-position: top-left; }  #socialimages { width: 45px; height: 100px; margin-left: 200px; margin-top: 60px; }  #bodycontainer { width: 726px; position: absolute; left: 50%; margin-left: -363px; z-index: 1; }

Comments

Post a Comment

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

i've tried various ways coerce xterm (versions 285 , 292) copy selection clipboard clipboard whenever press ctrl-shift-c. promising way far has been, in ~/.xresources, put this: xterm*vt100.translations: #override \ ctrl shift <keypress> c: copy-selection(clipboard) \n\ ctrl shift <keypress> v: insert-selection(clipboard) ctrl-shift-v works perfectly, copying has nuance... if restart xterm, highlighting text puts things in primary clipboard; expected, proper, default behavior. if hit ctrl-shift-c, copies current selection clipboard clipboard. the bug, however, if highlight text after first time pressed ctrl-shift-c, you'll see highlighting copies both primary and clipboard. cannot figure out how stop xterm updating clipboard upon selection... , doesn't make sense me in first place. i said, @ specific point in time, copy selection clipboard... yet starts updating automatically upon selection after doing once... anyone have workaround...
Read more

qt - Errors in generated MOC files for QT5 from cmake -

i generated moc files qt5 using set (cmake_automoc on) set(cmake_include_current_dir on) then add moc files src using set(src src/main.cpp src/video_widget_surface.cpp src/video_widget.cpp src/video_player.cpp #moc files moc/moc_video_player.cpp moc/moc_video_widget.cpp moc/moc_video_widget_surface.cpp finally add executable using add_executable(somegui ${src}) but errors in moc files saying : /other/workspace/perception/somestuff/moc/moc_video_widget.cpp:54:6: error: 'videowidget' has not been declared /other/workspace/perception/somestuff/moc/moc_video_widget.cpp:62:19: error: 'videowidget' has not been declared /other/workspace/perception/somestuff/moc/moc_video_widget.cpp:68:20: error: 'videowidget' has not been declared /other/workspace/perception/somestuff/moc/moc_video_widget.cpp:68:46: error: non-member function 'const qmetaobject* metaobject()' cannot have cv-qualifier /other/qt5.0.1/5.0.1/gcc_64/include/qtcore/qo...
Read more