Home/ Questions/Q 8690031
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T23:48:42+00:00

I wanted to design something like this. I tried hard to style my code

  • 0

I wanted to design somethin like this
I wanted to design something like this.

I tried hard to style my code and still I couldn’t do it
in my html I have this:

    <div id="main">
    <div class="box1">
    <div class='up'><a href="" class="vote" id="<?php echo $id; ?>" name="up">
    <?php echo $up; ?></a></div>
    <div class='down'><a href="" class="vote" id="<?php echo $id; ?>" name="down"><?php echo $down; ?></a></div>
    </div>
    <div class='box2' >
    <table cellspacing="10">

    <tr>
    <td>
    artist:<?php echo $artist; ?>
    </td>
    <td>
    Song:<?php echo $title; ?>
    </td>
    </tr>
    <tr>
    <td>
    album:<?php echo $album; ?>
    </td>
    <td>
    genre:<?php echo $genre; ?>
    </td>
    <td>

    <button type = "button" name = "Download" onClick = <?php echo $filename;?>>
    Download
    </button>
    </div>
    </td>
    </tr>
    </table>
    </div>
    </div>

and in style I have this:

#main
{
height:80px; border:1px dashed #29ABE2;margin-bottom:7px;
width:600px;
}
a
{
color:#DF3D82;
text-decoration:none;

}
a:hover
{
color:#DF3D82;
text-decoration:underline;

}
.up
{
height:40px; font-size:24px; text-align:center; background-color:#009900; margin-bottom:2px;
-moz-border-radius: 6px;-webkit-border-radius: 6px;
}
.up a
{
color:#FFFFFF;
text-decoration:none;

}
.up a:hover
{
color:#FFFFFF;
text-decoration:none;

}
.down
{
height:40px; font-size:24px; text-align:center; background-color:#cc0000; margin-top:2px;
-moz-border-radius: 6px;-webkit-border-radius: 6px;
}

.down a
{
color:#FFFFFF;
text-decoration:none;

}
.down a:hover
{
color:#FFFFFF;
text-decoration:none;

}
.box1
{
float:left; height:80px; width:50px;
}
.box2
{
float:left; width:500px; text-align:left;
margin-left:10px;height:60px;margin-top:5px;
font-size:15px;
}
.box3
{
float:right; height:80px; width:60px;
}
img
{
border:none;
padding-top:7px;
}

my result looks like this:

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Place the button out of the .box2 div. and wrap the button with a div.

    altered css

    #main
{
height:80px; border:1px dashed #29ABE2;margin-bottom:7px;
width:600px; position:relative
}
    .box2
    {
    float:left; width:430px; text-align:left;
    margin-left:10px;height:60px;margin-top:5px;
    font-size:15px; background:#993
    }
    .button{float:right; position:absolute; bottom:0; right:0}

    HTML 

    <div class="button">
<button type = "button" name = "Download" onClick = <?php echo $filename;?>>Download</button> 
 </div>

    Demo http://jsfiddle.net/GPqS2/

    • 0