CODEWITHSUNDEEP
cssbuttonpositioning
Masteryogurt
Masteryogurt

Reputation: 175

Positioning a button and preventing movement?

As you can see from this image of my site:

https://www.flickr.com/photos/77598212@N03/33735427334/in/dateposted-public/

My button is crammed right underneath the randomly generated text. Instead, I'd like to lower it. But additionally, I'm trying to keep it completely "anchored" to the page, because right now when I click the button, a random image generates, but that image is moving the button vertically depending on the size of the image. Not good.

Instead, I'd like that button to remain in the same position, always.

Any thoughts/help would be appreciated. I'm still quite new to all this. Thank you. -Wilson

link to the actual website http://www.wilsonschlamme.com/test4.html

css: *It's pretty simple. First two elements here are controlling centering the page. The rest are self explanatory, showtext refers to the random text generator.

*{
margin:0;
padding:0;

}

body{
text-align:center; /*For IE6 Shenanigans*/
}

button {
color: #900;
font-weight: bold;
font-size: 150%;
  text-transform: uppercase;

}

h1{
margin-top:20px;
font-size: 250%;
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;



}

img {
max-width:600px;
max-height:440px;
box-shadow: 1px 5px 5px grey;
border-style: groove;
border-width: 1px;
margin-top:20px;
}

#ShowText{

overflow:hidden; /* older browsers */
word-wrap: break-word;
padding-top: 100px;
max-width: 1000px;
font-size: 25px;
font-family: vendetta, serif;
line-height: 25px;
margin: 0 auto;
}

Upvotes: 1

Views: 41

Answers (1)

Chris Happy
Chris Happy

Reputation: 7295

Use:

#buttonfun {
  margin-top: 20px;
}

Wrap the img with a div: 

<div class="image-wrapper">
   <img src="images/297.jpg" />
</div>

and add the CSS:

.image-wrapper {
  height: 440px;
}

Upvotes: 1

Related Questions