Make divs sit still! WordPress
- SOLVED
Hello!
I am working on a site built on genesis, and I have added two divs via the simple hooks plugin ABOVE the header. This makes them run the full width of the site, which I want, but I can't get them to stay in the same place, no matter what size the browser is open to.
Can someone help with the css?
Thanks!
http://asmallbrightidea.com/slch/
Answers (2)
Eric P. answers:
Do you want them "stuck" to the top of the window, no matter where you scroll to in the page?
Try adding this to what you have (or replacing same properties with these):
.socialtoptext {
position:fixed;
top:0px;
left: 0px;
}
.socialtopbtns {
position:fixed;
top: 0px
right: 0px
}
That will "stick" the text to the top left, and the buttons to the top right.
If you want to move the text over, and you want it "responsive" use something like "left: 35%" for the .socialtoptext class to move it over. If you use pixels, it will be the same distance from the left no matter what size the window. In %, it will move when the window is resized.
Eric P. comments:
Following up, you also might want the .socialtop class to be fixed, to keep the background with the text and buttons.
Also, set the width on your text and button divs. Set in % and the sum of "left:__%" plus "width:__%" from the text plus the "width:__%" and "right:__%" for the button div should add up to ~95% (so there's ~5% space between the divs at the center).
ohlivia13 comments:
Percentage is more what I am looking for - which I implemented. But it's still moving around when I resize the browser.
Eric P. comments:
Looking at it, and playing with it a bit in my browser, you might try "right:52%" on your text div, and "left:52%" on your button div.
That sticks them really close to the center of the window, and they stay there when you resize.
ohlivia13 comments:
I think I worked it out! Thank you :)
MDan answers:
Hi,
Try this css:
.socialtoptext {
display: block;
font-family: 'gabriela',serif;
font-size: 16px;
padding-top: 17px;
position: static;
left: 425px;
text-align: center;
}
And for the social buttons:
socialtopbtns {
display: block;
float: right;
padding-top: 5px;
position: static;
}