kiedis Posted December 31, 2012 Share Posted December 31, 2012 Hi. I created two buttons. Here is an excerpt from my HTML code: <body><h1 class="test">Welcome</h1><p class="test_p">Hei</p><p id="schmuck">Here are some pictures</p><p class="left" id="hide"> <img class="thumbnail" src="flower.jpg"><img class="thumbnail" src="flower7.jpg"><img class="thumbnail" src="flower1.jpg"><img class="thumbnail" src="flower2.jpg"><img class="thumbnail" src="flower3.jpg"><img class="thumbnail" src="flower4.jpg"><img class="thumbnail" src="flower5.jpg"><img class="thumbnail" src="flower6.jpg"></p><input type="button" value="Hide flowers"onclick="document.getElementById('hide').style.visibility='hidden'" /><input type="button" value="Show flowers"onclick="document.getElementById('hide').style.visibility='visible'"/><br><p class="padding">Welcome Welcome Welcome Welcome Welcome Welcome Welcome Welcome Welcome Welcome Welcome Now, as you probably see in attached printscreen, these buttons look like they are "stuck" to the top pictures. I would like to raise the buttons up some 5px, and maybe increase the distance between them as well. I tried to insert float="top" into <input> tag but it had no effect. (I guess this attempt was nonsense, but at least i tried to do something ) Also tried to find the answer in this Forum's archives, but did not find anything by typing in 'change position button' in search field. If somebody could guide me how change position of buttons, it would be greatly appreciated. Thank you Link to comment Share on other sites More sharing options...
niche Posted December 31, 2012 Share Posted December 31, 2012 Please post your relevant css. Link to comment Share on other sites More sharing options...
kiedis Posted December 31, 2012 Author Share Posted December 31, 2012 h1.test{font-style:italic;color:white;font-size:40px;font-weight:800;}p.test_p{font-family:cursive;color:white;font-size:40px;}p.padding{padding-left:50%;}p{text-indent:40px;text-align:justify;letter-spacing:3px;color:black;font-family:cursive;}body{background-position:center bottom;background-repeat:no repeat;background-color:orange;}.thumbnail{float:left;width:110px;height:90px;margin:5px;}a{color:brown;text-decoration:none;}a:hover{color:green;}a:active{color:red;}.left{position:absolute;left:0px;width:50%;} Link to comment Share on other sites More sharing options...
niche Posted December 31, 2012 Share Posted December 31, 2012 use float for your positioning http://www.w3schools.com/css/css_float.asp 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