quick links!

[ashycat!]

So we're waiting like absolute last minute to change our site over to V5. And currently we have a quick links that hovers off to the side, and with most screen resolutions it's okay. But when someone is mobile or when they have a different screen size, it will  i.snag.gy/RJWu6.jpg do this. I can't have this, and I was hoping someone could help me, move those links to maybe in the center of the banner. [preferably in the white portion, but I won't be - like entirely picky considering it's going to be up for like two months.]

sidewayshappyface.proboards.com/index.cgi

is the forum and I would appreciate any help! hopefully this is - easy.

[Tumbleweed]

This works on my test site so hopefully it will work on yours. Save your css that you have for those links to notepad, just in case.

This will replace all those .amenamy classes you have and I redid your links to simplify it.


<style type="text/css">
.amenamy{
position: relative;
top: -100px;
left: 30%;
width: 190px;
text-align:left;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
}
.amenamy a:link, .amenamy a:visited{
z-index: 100;
text-align:left;
font-family: century gothic;
font-size: 10px;
letter-spacing: 2px;
color: #80232a;
}
.amenamy a:hover{
color: #760c14;
font-style: bold;
text-decoration: none;
}
</style>



<div class="amenamy">

<a href="http://sidewayshappyface.proboards.com/index.cgi?board=general&action=display&thread=1" target="_blank">THE RULES</a><br />
<a href="http://sidewayshappyface.proboards.com/index.cgi?board=general&action=display&thread=13" target="_blank">THE INFORMATION</a><br />
<a href="http://sidewayshappyface.proboards.com/index.cgi?board=app&action=display&thread=6" target="_blank">THE TEMPLATE/BANS</a><br />
<a href="http://sidewayshappyface.proboards.com/index.cgi?board=claims&action=display&thread=1959" target="_blank">THE FACE CLAIM</a><br />
<a href="sidewayshappyface.proboards.com/index.cgi?board=wantedcharacters" target="_blank">WANTED CHARACTERS</a><br />
<a href="http://sidewayshappyface.proboards.com/index.cgi?action=display&board=claims&thread=15795&page=1" target ="_blank">THE SITE DIRECTORY</a><br />
<a href="http://sidewayshappyface.proboards.com/index.cgi?board=announcements&action=display&thread=8" target="_blank">THE OPEN THREADS</a><br />
<a href="https://docs.google.com/spreadsheet/ccc?key=0AuZsGSnXxjbUdFYzbUx2M05NM2dLbl9rb2dqdHh0RUE" target="_blank">THE SITE CALENDAR</a><br />
<a href="http://myeconfessions.tumblr.com/" target="_blank">CONFESSIONS TUMBLR</a><br />
<a href="http://missyourembraceonlin.cbox.ws" target="_blank">IN CHARACTER CHAT</a><br />
<a href="http://yourworldoftext.com/bluewater3" target="_blank">BATHROOM WALL</a><br />
<a href="http://bluewater-gazette.tumblr.com" target="_blank">BLUEWATER GAZETTE</a><br />

</div>

Now notice in the css here...


position: relative;
top: -100px;
left: 30%;

you have top and left positioning. Adjust that so it sit on your banner how you like.

[ashycat!]

Oct 2, 2013 16:23:31 GMT -8 Tumbleweed said:

This works on my test site so hopefully it will work on yours. Save your css that you have for those links to notepad, just in case.

This will replace all those .amenamy classes you have and I redid your links to simplify it.


<style type="text/css">
.amenamy{
position: relative;
top: -100px;
left: 30%;
width: 190px;
text-align:left;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
}
.amenamy a:link, .amenamy a:visited{
z-index: 100;
text-align:left;
font-family: century gothic;
font-size: 10px;
letter-spacing: 2px;
color: #80232a;
}
.amenamy a:hover{
color: #760c14;
font-style: bold;
text-decoration: none;
}
</style>



<div class="amenamy">

<a href="http://sidewayshappyface.proboards.com/index.cgi?board=general&action=display&thread=1" target="_blank">THE RULES</a><br />
<a href="http://sidewayshappyface.proboards.com/index.cgi?board=general&action=display&thread=13" target="_blank">THE INFORMATION</a><br />
<a href="http://sidewayshappyface.proboards.com/index.cgi?board=app&action=display&thread=6" target="_blank">THE TEMPLATE/BANS</a><br />
<a href="http://sidewayshappyface.proboards.com/index.cgi?board=claims&action=display&thread=1959" target="_blank">THE FACE CLAIM</a><br />
<a href="sidewayshappyface.proboards.com/index.cgi?board=wantedcharacters" target="_blank">WANTED CHARACTERS</a><br />
<a href="http://sidewayshappyface.proboards.com/index.cgi?action=display&board=claims&thread=15795&page=1" target ="_blank">THE SITE DIRECTORY</a><br />
<a href="http://sidewayshappyface.proboards.com/index.cgi?board=announcements&action=display&thread=8" target="_blank">THE OPEN THREADS</a><br />
<a href="https://docs.google.com/spreadsheet/ccc?key=0AuZsGSnXxjbUdFYzbUx2M05NM2dLbl9rb2dqdHh0RUE" target="_blank">THE SITE CALENDAR</a><br />
<a href="http://myeconfessions.tumblr.com/" target="_blank">CONFESSIONS TUMBLR</a><br />
<a href="http://missyourembraceonlin.cbox.ws" target="_blank">IN CHARACTER CHAT</a><br />
<a href="http://yourworldoftext.com/bluewater3" target="_blank">BATHROOM WALL</a><br />
<a href="http://bluewater-gazette.tumblr.com" target="_blank">BLUEWATER GAZETTE</a><br />

</div>

Now notice in the css here...


position: relative;
top: -100px;
left: 30%;

you have top and left positioning. Adjust that so it sit on your banner how you like.

Before any changes are being made, what are the chances - that we can keep the links where their at, but have them locked over in the side like a sidebar? that follows when you scroll DOWN? but not inward like if you use a apple phone and browse [or if you have a lower screen resolution?] I suppose it's similar to a sidebar, I just don't know if it's something that we can have outstanding to scroll with the forum. without being a hinderance for mobile&screen resolution.

[Tumbleweed]

You should be able to use exactly what I gave you. Just change the left positioning to be 0px; and then adjust the top to where you think it looks good.


.amenamy{
position: relative;
top: -100px;
left: 30%;