rain13 Posted December 23, 2014 Share Posted December 23, 2014 Hello, I found prev and next buttons example. I tried to modify it for my needs. However I have few questions:1) How to make those prev and next button's height to be 100% of parent div, and not of body?2) How to move image next to prev button? It's currently under it, I want it to be next to it.3) How to move next button right next to image? It's currently at the right side of screen, away from image, how can I move it right next to image? <!DOCTYPE HTML><html> <head> <style> .nvgt{ position:absolute; top: 0px; height: 100%; width: 30px; opacity: 0.6; } .nvgt:hover{ opacity: 0.9; } #prev{ background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/prev.png') no-repeat center; left: 0px; } #next{ background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/next.png') no-repeat center; right: 0px; } </style> </head> <body> <div> <img src="https://dl.dropboxusercontent.com/u/65639888/image/4.jpg"> <a class="nvgt" id="prev" href="#prev"></a> <a class="nvgt" id="next" href="#next"></a> </div> </body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted December 24, 2014 Share Posted December 24, 2014 The position: absolute; element position and in this case the height is determined by a parent element using position: relative; if none is found, then it is determine by the browser window or viewport area of the browser. Link to comment Share on other sites More sharing options...
rain13 Posted December 24, 2014 Author Share Posted December 24, 2014 (edited) .nvgt{ position:relative; top: 0px; height: 100%; width: 30px; opacity: 0.6; }now buttons aren't displayed at all. Could you give some actually working advise please? Edited December 24, 2014 by SoItBegins Link to comment Share on other sites More sharing options...
dsonesuk Posted December 24, 2014 Share Posted December 24, 2014 if the position: absolute; elements (anchor links) are the children, then the parent of these child elements would be the div container they are in. Link to comment Share on other sites More sharing options...
rain13 Posted December 24, 2014 Author Share Posted December 24, 2014 Didn't understand how to use this. So remade it a little.So I tried something else: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head></head><body><table style="text-align: left; width: 100px;" border="0" cellpadding="2" cellspacing="2"> <tbody> <tr> <td style="margin: 0px; cursor: auto ! important; background: #0f0;"><div style="font-size: 28px; padding-left: 7px; width: 40px; height: 100%;"><a href="#p" style="background-color: red; height: 100%; display: inline-block;">fgh</a></div></td> <td><img src="https://dl.dropboxusercontent.com/u/65639888/image/4.jpg"></td> <td> </td> </tr> </tbody></table></body></html>But what do I have to do now to make this div or link take 100% of height? Link to comment Share on other sites More sharing options...
dsonesuk Posted December 24, 2014 Share Posted December 24, 2014 I'm not going to even look at it if a table is used. Link to comment Share on other sites More sharing options...
rain13 Posted December 24, 2014 Author Share Posted December 24, 2014 What's wrong with table?Could you be so nice and give some coding ideas for previous code? Basically the problem is that I dont understand your replies enough to use them. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 24, 2014 Share Posted December 24, 2014 So you have never heard that tables should never be used for anything else but showing tabular data...really. OK since its almost Christmas, well its been almost Christmas for nearly 5 months now but nevermind <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> #slide-wrap {text-align: center;} #slide-wrap-inner {position: relative; display: inline-block; font-size: 0;} .nvgt{ position:absolute; top: 0px; height: 100%; width: 30px; opacity: 0.6; } .nvgt:hover{ opacity: 0.9; } #prev{ background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/prev.png') no-repeat center; left: 0px; } #next{ background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/next.png') no-repeat center; right: 0px; } </style> </head> <body> <div id="slide-wrap"> <div id="slide-wrap-inner"> <img src="https://dl.dropboxusercontent.com/u/65639888/image/4.jpg" alt=""> <a class="nvgt" id="prev" href="#prev"></a> <a class="nvgt" id="next" href="#next"></a> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
rain13 Posted December 24, 2014 Author Share Posted December 24, 2014 (edited) Thanks for example.Sorry for bothering you a little too much. I dont know why I didn't manage to understand it from your previous messages.Yes, I never thought there was anything wrong with tables.And If I want those links to be next to image instead of on the image then is it fine if I use negative (-30)left and right values in #prev and #next? Edited December 24, 2014 by SoItBegins Link to comment Share on other sites More sharing options...
dsonesuk Posted December 24, 2014 Share Posted December 24, 2014 (edited) Yes you can use left:, right: properties or margin-left: margin-right: with -30px both will give same effect. Edited December 25, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now