We're a community of 1077K IT Pros here for help, advice, solutions, professional growth and fun. Join us!
1,076,466 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Start New Discussion Reply to this Discussion

positoning a link with css

Hi all thanks for reading,

i am having trouble getting my link button postioned in the correct place and the image. how i want it to look can be seen in fig-1 and what i am getting can be seen in fig-2. the relevant code i am using is as follows

code on page

div id="body"><div class="body_img"><img src="xxxxxx/xxxxx/xxxxxxxxxx.png" /></div>
                   <div class="body_text"><h1>xxxxx</h1><br />
                   <h3>xxxxxxxxxxxxxxxxxxxxxxxxxx<br />
                   <br />
                   xxxxxxxxxxxxxxx<br />
                   <br />
                   xxxxxxxxxxxxxxxxx</h3></div>
                   <div class="body_link"><ul>
                                            <li><a href="index.xhtml" class="panel_link">More Info</a></li>
                                          </ul></div> 
   </div>

code from external css

#body{
    overflow : hidden;
    height:200px;
    zoom : 1;
    border : solid #45bf55;
    border-width : 2px;
    background-color : #FFF;
}

.body_text h1{
    font-family : Arial, Helvetica, sans-serif;
    font-size : 16pt;
    font-weight : bolder;
    color : #45bf55;
    padding-top : 25px;
    margin : 0; 
}

.body_text h3{
    font-family : Arial, Helvetica, sans-serif;
    font-size : 12pt;
    font-weight : bolder;
    color : #45bf55;
    margin : 0;

}

.body_img{
    float : left;
    width : 200px;
    height : 200px;
    background-color : #e0e0e0;
    text-align : center;
    display : table-cell;
    vertical-align : middle;
    margin-right : 25px;
}

.body_link{
    float : right;
    margin-right : 25px;
}

.body_link li{
    list-style-type : none;
    margin : 0;
    margin-left : 0;
    background : url(../xxxxxxx/xxxxxxxxxx/xxxxxxxxxpng) no-repeat;
    width : 107px;
    height : 30px;
    text-align : center;
}

any help with this would be much appriciated.

3
Contributors
4
Replies
1 Day
Discussion Span
9 Months Ago
Last Updated
5
Views
kevwood
Newbie Poster
7 posts since Aug 2012
Reputation Points: 0
Solved Threads: 0
Skill Endorsements: 0

You didn't attach the images you mentioned. Could you please attach them so we can see the issue?

Helianthus
Junior Poster in Training
64 posts since Jul 2012
Reputation Points: 12
Solved Threads: 2
Skill Endorsements: 0

ha ha sorry i will up load them now. fig-1fig-2

Attachments fig-1.gif 10.96KB fig-2.gif 11.12KB
kevwood
Newbie Poster
7 posts since Aug 2012
Reputation Points: 0
Solved Threads: 0
Skill Endorsements: 0

and use margin-top:-100px; or more

dany12
Posting Whiz in Training
223 posts since Aug 2010
Reputation Points: 21
Solved Threads: 15
Skill Endorsements: 1

thanks for the reply i fixed by floating the first two sections to the left the using a margin-top to move the link down.

thanks again

kevwood
Newbie Poster
7 posts since Aug 2012
Reputation Points: 0
Solved Threads: 0
Skill Endorsements: 0

This article has been dead for over three months: Start a new discussion instead

Post: Markdown Syntax: Formatting Help
 
You
 
© 2013 DaniWeb® LLC
Page rendered in 0.3117 seconds using 2.86MB