In the code below, both $dt and $points display on one horizontal line, which is what I want. However, I would like these two variables to have different styling. I would like the keep the sitename3name stying on $dt but change the styling on $points.
sitename3name has a width of 585 pixels. I would like $points to appear flush against the right side of this 585-pixel area, and have a different style than $dt.
EDIT: The .pointlink style is not applied in the code below, because I’m not sure how to and make it do what I want.
How can I do this?
The styles are also listed below.
The code:
`echo '<div class="sitename3name">Submission date: '.$dt->format('F j, Y').''.$points.'</div>'`;
CSS currently applied to both, which I would like only to be applied to $dt:
.sitename3name {
width:585px;
margin-left:23px;
margin-top:0px;
color: #000000;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 15px;
font-weight: normal;
height: 25px;
padding-bottom: 0px;
padding-left: 10px;
padding-top: 0px;
background-color: #CAE1FF;
}
.sitename3name a{
position:absolute;
color: #004284;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
height: 25px;
padding-right: 5px;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 0px;
}
.sitename3name a:hover{
position:absolute;
color: #FFFFFF;
background-color:#FF0000;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
height: 20px;
padding-right: 5px;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 0px;
}
CSS I would like to apply to $points:
.pointlink {
float:right;
margin-right: 0px;
font-size:16px;
font-weight:bold;
padding-top: 2px;
padding-right: 3px;
padding-left: 5px;
background-color:#004993;
color:#FFFFFF;
}
You need to actually have an element with class “pointlink” in your markup. If you wrap the date (i.e. your “
$dtvariable”) in an element too, you can style it separately when you’re ready.Example: http://jsfiddle.net/wesley_murch/Eh7HZ/2/