The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Text/image positioning in one Div element
Seniorbfc
post Mar 1 2017, 10:37 AM
Post #1


Newbie
*

Group: Members
Posts: 17
Joined: 16-January 17
Member No.: 26,267



I am trying to get the text in the image below where the blue rectangle is. I have a header, paragraph (the text i want to move/"my name is...") and two images in one Div. Is this the best way to do it, and if so how?
CODE

<div id="about">
    <h3>About</h3>
    <img id="printer" src="Printer.jpg" alt="Printer" style="width:30px; height:30px;">
    <img id="lin" src="Linkedin2.jpg" alt="LinkedIn Logo" style="width:30px; height: 30px;">
    <p>My name is....</p>
    
</div>

CODE

#about{
    background: rgba(64,64,64,1);
    width: 100%;
}
#about h3, #about p, img#printer, img#lin{
    display: inline-block;
    padding-top: 40px;
}
#about h3{
    padding-left: 550px;
    color: rgba(153,153,153,1);
    float: left;
}
#about p{
    color: white;
    margin-left: 40%;
    margin-right: 60%;
    width: 500px;
    text-align: left;
    margin-top: 0px;
    padding-bottom: 50px;
}
img#printer{
    float: right;
    margin-right: 600px;
}
img#lin{
    float: right;
    margin-right: -31px;
    padding-top: 80px;
}



Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
Seniorbfc
post Nov 9 2017, 04:23 PM
Post #2


Newbie
*

Group: Members
Posts: 17
Joined: 16-January 17
Member No.: 26,267



Back again XD, I have fixed the problem by using a table however I now have a new problem sad.gif. I want the "About" "My name is..." and printer image to all be inline with each other (The paragraph is higher up). This is the html and CSS coding I am now using. Any solutions? Thanks
CODE

#about{
    background: rgba(64,64,64,1);
    width: 100%;
}
#about h3{
    padding-top: 0px;
    padding-left: 550px;
    padding-right: 0px;
    padding-bottom: 50px;
    color: rgba(153,153,153,1);    
}
#about p{
    padding-top: 30px;
    padding-left: 80px;
    padding-right: 80px;
    padding-bottom: 50px;
    color: #ffffff;    
    font-size: 105%;
}
img#printer, img#lin{
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 600px;    
    
}

CODE

<div id="about">
    <table style="width:100%">
    <td>
    <h3>About</h3>
    </td>
    <td>
    <p>My name is . I am currently a third-year student at , studying BSc Hons Accounting and Finance. I am Currently searching for a Graduate job to start my career in Finance. I have created this website purely for fun and to act as a CV for potential employers</p>
    </td>
    <td>
    <img id="printer" src="Printer.jpg" alt="Printer" style="width:30px; height:30px;">
    <img id="lin" src="Linkedin2.jpg" alt="LinkedIn Logo" style="width:30px; height: 30px;">
    </td>
    </table>

</div>


This post has been edited by Seniorbfc: Nov 9 2017, 04:58 PM


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 03:14 AM