...

View Full Version : CSS positioning of buttons help



tommydamic68
02-11-2012, 01:38 PM
Hi all,
Hoping you can help me with an issue on my website. Here is the issue. I have a Javascript ticker that updates threads on my forum, the problem is there is a next-back and pause button set that i can't position correctly inside the ticker area see example:

Here is how it should look-the buttons fall nicely inside the ticker area:
http://i284.photobucket.com/albums/ll38/tommydamic68/correct.png

This is what mine looks like-the buttons are under the ticker to the left:
http://i284.photobucket.com/albums/ll38/tommydamic68/incorrect-1.png

Example of what i'm trying to do:
http://i284.photobucket.com/albums/ll38/tommydamic68/thread.png


Here is the css code -I made a section of the code bold as to where i think the adjustments are need-not sure though.
Any help would greatly appreciated.
#ticker-wrapper * {
margin-left: auto;
margin-right: auto;
}
#ticker-wrapper.has-js {
margin: 20px auto 20px auto;
padding: 0px 20px;
width: 870px;
height: 30px;
display: block;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background-color: #f8f0db;
font-size: 1.1em;
}
#ticker {
width: 830px;
height: 30px;
display: block;
position: relative;
overflow: hidden;
background-color: #f8f0db;
}
#ticker-title {
padding: 5px;
color: #990000;
font-weight: bold;
background-color: #f8f0db;
text-transform: none;
}
#ticker-content {
margin: 0px;
padding: 5px;
position: absolute;
color: #1F527B;
font-weight: normal;
background-color: #f8f0db;
overflow: hidden;
white-space: nowrap;
line-height: 1.2em;
}
#ticker-content:focus {
none;
}
#ticker-content a {
text-decoration: none;
color: #1F527B;
}
#ticker-content a:hover {
text-decoration: underline;
color: #0D3059;
}
#ticker-swipe {
padding-top: 9px;
position: absolute;
top: 0px;
background-color: #f8f0db;
display: block;
width: 800px;
height: 23px;
}
#ticker-swipe span {
margin-left: 1px;
background-color: #f8f0db;
border-bottom: 1px solid #1F527B;
height: 12px;
width: 7px;
display: block;
}
#ticker-controls {
padding: 8px 0px 0px;
list-style-type: none;
float: left;
}
#ticker-controls li {
padding: 0px;
margin-left: 5px;
float: left;
cursor: pointer;
height: 16px;
width: 16px;
display: block;
}
#ticker-controls li#play-pause {
background-image: url('../images/controls.png');
background-position: 32px 16px;
}
#ticker-controls li#play-pause.over {
background-position: 32px 32px;
}
#ticker-controls li#play-pause.down {
background-position: 32px 0px;
}
#ticker-controls li#play-pause.paused {
background-image: url('../images/controls.png');
background-position: 48px 16px;
}
#ticker-controls li#play-pause.paused.over {
background-position: 48px 32px;
}
#ticker-controls li#play-pause.paused.down {
background-position: 48px 0px;
}
#ticker-controls li#prev {
background-image: url('../images/controls.png');
background-position: 0px 16px;
}
#ticker-controls li#prev.over {
background-position: 0px 32px;
}
#ticker-controls li#prev.down {
background-position: 0px 0px;
}
#ticker-controls li#next {
background-image: url('../images/controls.png');
background-position: 16px 16px;
}
#ticker-controls li#next.over {
background-position: 16px 32px;
}
#ticker-controls li#next.down {
background-position: 16px 0px;
}
.js-hidden {
display: none;
}
#no-js-news {
padding: 10px 0px 0px 45px;
color: #F8F0DB;
}
.left #ticker-swipe {
left: 80px;
}
.left #ticker-controls, .left #ticker-content, .left #ticker-title, .left #ticker {
float: left;
}
.left #ticker-controls {
padding-left: 6px;
}
.right #ticker-swipe {
right: 80px;
}
.right #ticker-controls, .right #ticker-content, .right #ticker-title, .right #ticker {
float: right;
}
.right #ticker-controls {
padding-right: 6px;
}

tommydamic68
02-12-2012, 11:58 AM
Anyone?

muftdagyan
02-12-2012, 12:55 PM
First off all change the float:left to float:right (in #ticker-control)
so that these buttons will move to right hand side.
Now what else do you want to get?

tommydamic68
02-12-2012, 01:15 PM
First off all change the float:left to float:right (in #ticker-control)
so that these buttons will move to right hand side.
Now what else do you want to get?

Did this, it changed nothing. the closest i got was when i added width in the code it put the buttons on the right but made them vertical.

#ticker-controls {
padding: 8px 0px 0px;
list-style-type: none;
float: left;
width 7px;

SB65
02-12-2012, 01:26 PM
Doing this is impossible without the html.

However, with the aid of my crystal ball....


#ticket-wrapper{position:relative}

#ticker-controls {
list-style-type: none;
margin: 0;
padding: 8px 0 0;
position: absolute;
right: 30px;
top:0;
}

tommydamic68
02-12-2012, 03:01 PM
Doing this is impossible without the html.

However, with the aid of my crystal ball....


#ticket-wrapper{position:relative}

#ticker-controls {
list-style-type: none;
margin: 0;
padding: 8px 0 0;
position: absolute;
right: 30px;
top:0;
}

Ok, some progress, the buttons need to come down quite a bit and to the left some. see here www.sphynxlair.com the buttons with your change put them in the far right corner.

SB65
02-12-2012, 03:06 PM
#ticket-wrapper{position:relative}..

oh, and:


#ticker-controls {
right: 30px;
top:0;
}

are all missing.....

What we're doing here is using absolute positioning to place the buttons element (#ticker-controls) with relation to its parent element #ticket-wrapper. To do this the buttons need to have position:absolute and the parent needs position:relative. Once this is implemented the location of #ticker-controls can be controlled using the left and top settings.

Without position:relative on #ticket-wrapper, #ticker-controls is positioned with relation the the previous parent element with position:relative, which is your body tag. So, as it is now with your setting of left:1310px, it's set 1300px to the left of <body> and at its default position height-wise, in the absence of a top setting.

Add the missing css and it should be pretty much where you want it.

tommydamic68
02-12-2012, 03:20 PM
Ok, some progress, the buttons need to come down quite a bit and to the left some. see here www.sphynxlair.com the buttons with your change put them in the far right corner.

thought i had it. it weird, i placed this code

#ticker-controls {
list-style-type: none;
margin: 0;
padding: 8px 0 0;
position: absolute;
left: 1305px;
top:45;

in safari, it worked, placed the buttons exactly where they needed to be. on the ipad, the css change moved my entire forum to the left. i thought i had it! darn it!

tommydamic68
02-12-2012, 03:22 PM
#ticket-wrapper{position:relative}..

oh, and:


#ticker-controls {
right: 30px;
top:0;
}

are all missing.....

What we're doing here is using absolute positioning to place the buttons element (#ticker-controls) with relation to its parent element #ticket-wrapper. To do this the buttons need to have position:absolute and the parent needs position:relative. Once this is implemented the location of #ticker-controls can be controlled using the left and top settings.

Without position:relative on #ticket-wrapper, #ticker-controls is positioned with relation the the previous parent element with position:relative, which is your body tag. So, as it is now with your setting of left:1310px, it's set 1300px to the left of <body> and at its default position height-wise, in the absence of a top setting.

Add the missing css and it should be pretty much where you want it.

im confused on the ticker wrapper- are you asking me to replace this

#ticker-wrapper * {
margin-left: auto;
margin-right: auto;

with this?

#ticket-wrapper{position:relative}

SB65
02-12-2012, 03:24 PM
Just add it.

No, actually, you don't have a css statement for #ticket-wrapper. So you can add the whole thing.

tommydamic68
02-12-2012, 03:25 PM
Just add it.

Any where?

SB65
02-12-2012, 03:30 PM
Right.

Looking at your current live css you have:


#ticker-wrapper * {
margin-left: auto;
margin-right: auto;
#ticker-wrapper{position:relative}
}

Make all this:


#ticker-wrapper{
position:relative
}

#ticker-wrapper * {
margin-left: auto;
margin-right: auto;
}

EDIT: Sorry, as above - you can't have the nested css. I don't think that second statement has any effect though.

EDIT AGAIN: My typo - should be #ticker-wrapper not #ticket-wrapper

tommydamic68
02-12-2012, 03:33 PM
Right.

Looking at your current live css you have:


#ticker-wrapper * {
margin-left: auto;
margin-right: auto;
#ticker-wrapper{position:relative}
}

Make all this:


#ticket-wrapper{
position:relative
}

#ticker-wrapper * {
margin-left: auto;
margin-right: auto;
}

EDIT: Sorry, as above - you can't have the nested css. I don't think that second statement has any effect though.


no, makes it all out of whack.

SB65
02-12-2012, 03:38 PM
It should be #ticker-wrapper not #ticket-wrapper, but you've lost some other css now for #ticker-wrapper.has-js.

Ah, that seems OK now. Just replace #ticket-wrapper with #ticker-wrapper

EDIT: You've sent me a link to the page by PM, but I don't know why. And now an email as well. Not sure why this thread forum isn't sufficient....

In your css, find this, around line 319:


#ticker-wrapper.has-js {
background-color: #F8F0DB;
border-radius: 15px 15px 15px 15px;
display: block;
font-size: 1.1em;
height: 30px;
margin: 20px auto;
padding: 0 20px;
width: 870px;
}

following this add:


#ticker-wrapper{position:relative}

#ticker-controls {
list-style-type: none;
margin: 0;
padding: 8px 0 0;
position: absolute;
right: 30px;
top:0;
}

tommydamic68
02-12-2012, 11:05 PM
It should be #ticker-wrapper not #ticket-wrapper, but you've lost some other css now for #ticker-wrapper.has-js.

Ah, that seems OK now. Just replace #ticket-wrapper with #ticker-wrapper

EDIT: You've sent me a link to the page by PM, but I don't know why. And now an email as well. Not sure why this thread forum isn't sufficient....

In your css, find this, around line 319:


#ticker-wrapper.has-js {
background-color: #F8F0DB;
border-radius: 15px 15px 15px 15px;
display: block;
font-size: 1.1em;
height: 30px;
margin: 20px auto;
padding: 0 20px;
width: 870px;
}

following this add:


#ticker-wrapper{position:relative}

#ticker-controls {
list-style-type: none;
margin: 0;
padding: 8px 0 0;
position: absolute;
right: 30px;
top:0;
}

With your settings in Safari on a large screen mac computer it puts the button too far right. The only adjustments i made was adding top: 45px; where you had 0. see screen shot. In windows on a small lap top it puts them dead on but loses the rounded corners. if i put the right: adjustment to right:1315 px; on the larger mac screen-it's dead on with rounded corners. Perfect but puts the buttons too far left on the small windows computer. On the ipad the buttons fall a little too far to the right. Any Suggestions?

I feel so close yet so far away!LoL!

SB65
02-13-2012, 08:44 AM
Any Suggestions?

Yes, you still do not have this in your css:


#ticker-wrapper{position:relative}

tommydamic68
02-13-2012, 10:18 AM
Yes, you still do not have this in your css:


#ticker-wrapper{position:relative}

I do have it here, perhaps it's in the wrong place? (p.s-you have been a great help so far-THANK YOU!)

Also please understand my access and editing to this code on my site. Basically i just have an empty box for "additional CSS." There i can add or edit code-i don't have access to "line" items. It looks prtty much as you se below in a box. So if you need me to change anything-it works best if you just change the code where you want and let me copy the whole new code top to bottom and i just paste over the old code. Sorry, surely a noob here.



#ticker-wrapper * {
margin-left: auto;
margin-right: auto;

}

#ticker-wrapper.has-js {
margin: 20px auto 20px auto;
padding: 0px 20px;
width: 870px;
height: 30px;
display: block;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background-color: #f8f0db;
font-size: 1.1em;
#ticker-wrapper{position:relative}
}
#ticker {
width: 830px;
height: 30px;
display: block;
position: relative;
overflow: hidden;
background-color: #f8f0db;
}
#ticker-title {
padding: 5px;
color: #990000;
font-weight: bold;
background-color: #f8f0db;
text-transform: none;
}
#ticker-content {
margin: 0px;
padding: 5px;
position: absolute;
color: #1F527B;
font-weight: normal;
background-color: #f8f0db;
overflow: hidden;
white-space: nowrap;
line-height: 1.2em;

}
#ticker-content:focus {
none;
}
#ticker-content a {
text-decoration: none;
color: #1F527B;
}
#ticker-content a:hover {
text-decoration: underline;
color: #0D3059;
}
#ticker-swipe {
padding-top: 9px;
position: absolute;
top: 0px;
background-color: #f8f0db;
display: block;
width: 800px;
height: 23px;
}
#ticker-swipe span {
margin-left: 1px;
background-color: #f8f0db;
border-bottom: 1px solid #1F527B;
height: 12px;
width: 7px;
display: block;
}
#ticker-controls {
list-style-type: none;
margin: 0;
padding: 8px 0 0;
position: absolute;
right: 30px;
top:45;
}
#ticker-controls li {
padding: 0px;
margin-left: 5px;
float: left;
cursor: pointer;
height: 16px;
width: 16px;
display: block;
}
#ticker-controls li#play-pause {
background-image: url('../images/controls.png');
background-position: 32px 16px;
}
#ticker-controls li#play-pause.over {
background-position: 32px 32px;
}
#ticker-controls li#play-pause.down {
background-position: 32px 0px;
}
#ticker-controls li#play-pause.paused {
background-image: url('../images/controls.png');
background-position: 48px 16px;
}
#ticker-controls li#play-pause.paused.over {
background-position: 48px 32px;
}
#ticker-controls li#play-pause.paused.down {
background-position: 48px 0px;
}
#ticker-controls li#prev {
background-image: url('../images/controls.png');
background-position: 0px 16px;
}
#ticker-controls li#prev.over {
background-position: 0px 32px;
}
#ticker-controls li#prev.down {
background-position: 0px 0px;
}
#ticker-controls li#next {
background-image: url('../images/controls.png');
background-position: 16px 16px;
}
#ticker-controls li#next.over {
background-position: 16px 32px;
}
#ticker-controls li#next.down {
background-position: 16px 0px;
}
.js-hidden {
display: none;
}
#no-js-news {
padding: 10px 0px 0px 45px;
color: #F8F0DB;
}
.left #ticker-swipe {
left: 80px;
}
.left #ticker-controls, .left #ticker-content, .left #ticker-title, .left #ticker {
float: left;
}
.left #ticker-controls {
padding-left: 6px;
}
.right #ticker-swipe {
right: 80px;
}
.right #ticker-controls, .right #ticker-content, .right #ticker-title, .right #ticker {
float: right;
}
.right #ticker-controls {
padding-right: 6px;
}

SB65
02-13-2012, 10:45 AM
This


#ticker-wrapper.has-js {
margin: 20px auto 20px auto;
padding: 0px 20px;
width: 870px;
height: 30px;
display: block;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background-color: #f8f0db;
font-size: 1.1em;
#ticker-wrapper{position:relative}
}

Should be this


#ticker-wrapper.has-js {
margin: 20px auto 20px auto;
padding: 0px 20px;
width: 870px;
height: 30px;
display: block;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background-color: #f8f0db;
font-size: 1.1em;

}
#ticker-wrapper{position:relative}

tommydamic68
02-14-2012, 12:39 AM
This


#ticker-wrapper.has-js {
margin: 20px auto 20px auto;
padding: 0px 20px;
width: 870px;
height: 30px;
display: block;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background-color: #f8f0db;
font-size: 1.1em;
#ticker-wrapper{position:relative}
}

Should be this


#ticker-wrapper.has-js {
margin: 20px auto 20px auto;
padding: 0px 20px;
width: 870px;
height: 30px;
display: block;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background-color: #f8f0db;
font-size: 1.1em;

}
#ticker-wrapper{position:relative}


Alas....it works! Thank you for your help! You have been a gentleman and a scholar!:thumbsup:

tommydamic68
04-19-2013, 01:20 AM
Hi guys- need help with this code again. I am trying to make this status bar have a shadow as the "share" box above it in the attachment. the code i use for that is below as well. Any help would greatly be appreciated.

The code for the news ticker~


#ticker-wrapper * {
margin-left: auto;
margin-right: auto;

}
#ticker-wrapper.has-js {
margin: 20px auto 20px auto;
padding: 0px 20px;
width: 870px;
height: 30px;
display: block;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background-color: #e5dcdc;
font-size: 1.1em;
}
#ticker-wrapper{position:relative}

#ticker {
width: 830px;
height: 30px;
display: block;
position: relative;
overflow: hidden;
background-color: #e5dcdc;
}
#ticker-title {
padding: 5px;
color: #990000;
font-weight: bold;
background-color: #e5dcdc;
text-transform: none;
}
#ticker-content {
margin: 0px;
padding: 8px;
position: absolute;
color: #1F527B;
font-weight: normal;
background-color: #e5dcdc;
overflow: hidden;
white-space: nowrap;
line-height: 1.2em;

}
#ticker-content:focus {
none;
}
#ticker-content a {
text-decoration: none;
color: #1F527B;
}
#ticker-content a:hover {
text-decoration: underline;
color: #0D3059;
}
#ticker-swipe {
padding-top: 9px;
position: absolute;
top: 0px;
background-color: #f8f0db;
display: block;
width: 800px;
height: 23px;
}
#ticker-swipe span {
margin-left: 1px;
background-color: #f8f0db;
border-bottom: 1px solid #1F527B;
height: 12px;
width: 7px;
display: block;
}
#ticker-controls {
list-style-type: none;
margin: 0;
padding: 8px 0 0;
position: absolute;
right: 30px;
top:45;
}
#ticker-controls li {
padding: 0px;
margin-left: 5px;
float: left;
cursor: pointer;
height: 16px;
width: 16px;
display: block;
}
#ticker-controls li#play-pause {
background-image: url('../images/controls.png');
background-position: 32px 16px;
}
#ticker-controls li#play-pause.over {
background-position: 32px 32px;
}
#ticker-controls li#play-pause.down {
background-position: 32px 0px;
}
#ticker-controls li#play-pause.paused {
background-image: url('../images/controls.png');
background-position: 48px 16px;
}
#ticker-controls li#play-pause.paused.over {
background-position: 48px 32px;
}
#ticker-controls li#play-pause.paused.down {
background-position: 48px 0px;
}
#ticker-controls li#prev {
background-image: url('../images/controls.png');
background-position: 0px 16px;
}
#ticker-controls li#prev.over {
background-position: 0px 32px;
}
#ticker-controls li#prev.down {
background-position: 0px 0px;
}
#ticker-controls li#next {
background-image: url('../images/controls.png');
background-position: 16px 16px;
}
#ticker-controls li#next.over {
background-position: 16px 32px;
}
#ticker-controls li#next.down {
background-position: 16px 0px;
}
.js-hidden {
display: none;
}
#no-js-news {
padding: 10px 0px 0px 45px;
color: #F8F0DB;
}
.left #ticker-swipe {
left: 80px;
}
.left #ticker-controls, .left #ticker-content, .left #ticker-title, .left #ticker {
float: left;
}
.left #ticker-controls {
padding-left: 6px;
}
.right #ticker-swipe {
right: 80px;
}
.right #ticker-controls, .right #ticker-content, .right #ticker-title, .right #ticker {
float: right;
}
.right #ticker-controls {
padding-right: 6px;
}

This code in the "share" box code~


<div class="shadow1">
<div class="content">SHARE CONTENT

</div>
</div>

SB65
04-19-2013, 09:16 AM
Add class shadow1 to your html for #ticker-wrapper.

tommydamic68
04-19-2013, 10:32 AM
Add class shadow1 to your html for #ticker-wrapper.

Thanks for the reply, where exactly do I add it? not in the css? Here is the html - there are two parts to it, where would it be added? Your help is appreciated. Would i use the entire piece of code shadow1? Close it with </div>?


<div class="shadow1">
<div class="content">

</div>
</div>



<!--ticker-->
<div id="ticker-wrapper" class="no-js">
<ul id="js-news" class="js-hidden">
<script type="text/javascript" src="{vb:raw vboptions.bburl}/external.php?&type=js"></script>
<script type="text/javascript">
<!--
for (var i = 0; i < threads.length; i++)
{
document.write('<li><a href="{vb:raw vboptions.bburl}/showthread.php?t=' + threads[i]['threadid'] + '">' + threads[i]['title'] + '</a>' + '&nbsp;&nbsp;&nbsp;' + '<span style="color: red;">Posted By:</span>'+ '&nbsp;' + threads[i]['poster'] + '</a>' + '</li>');
}
//-->
</script>
</ul>
</div>



<!--ticker-->
<script src="js/jquery.ticker.js" type="text/javascript"></script>
<script type="text/javascript" src="{vb:raw vboptions.bburl}/external.php?&type=js"></script>
<script type="text/javascript">
$(function () {
$('#js-news').ticker();
});
</script>

SB65
04-19-2013, 10:37 AM
The shadow is applied to the other element because that element has the class shadow1, which is applying the shadow through css.

So, you need to add the class to the element in your html:


<div id="ticker-wrapper" class="no-js shadow1">

tommydamic68
04-19-2013, 10:48 AM
The shadow is applied to the other element because that element has the class shadow1, which is applying the shadow through css.

So, you need to add the class to the element in your html:


<div id="ticker-wrapper" class="no-js shadow1">

I added it here with no luck. Do I need to add anything on the css end?


<!--ticker-->
<div id="ticker-wrapper" class="shadow1">
<ul id="js-news" class="js-hidden">
<script type="text/javascript" src="{vb:raw vboptions.bburl}/external.php?&type=js"></script>
<script type="text/javascript">
<!--
for (var i = 0; i < threads.length; i++)
{
document.write('<li><a href="{vb:raw vboptions.bburl}/showthread.php?t=' + threads[i]['threadid'] + '">' + threads[i]['title'] + '</a>' + '&nbsp;&nbsp;&nbsp;' + '<span style="color: red;">Posted By:</span>'+ '&nbsp;' + threads[i]['poster'] + '</a>' + '</li>');
}
//-->
</script>
</ul>
</div>

SB65
04-19-2013, 10:56 AM
It's not added on your site. That element now has the additional class left however.

SB65
04-19-2013, 11:05 AM
You actually have two elements with id ticker-wrapper in your html. You've added the class to the wrong one - the one within #slidebox. You should only have one element with any given id.

Add the class to the other element.

tommydamic68
04-19-2013, 11:06 AM
It's not added on your site. That element now has the additional class left however.

Sorry, not sure what you mean? Where does the change take place? Not in the HTML code? Or is it on my server end in the script you mean?

SB65
04-19-2013, 11:07 AM
See my previous reply...

tommydamic68
04-20-2013, 11:38 AM
See my previous reply...


Got it! I had a duplicate code in there for some unknown reason, removed it and aded to the right one. Thanks once again SB65!

:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum