Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Text/image positioning in one Div element

Posted by: Seniorbfc Mar 1 2017, 10:37 AM

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

Posted by: pandy Mar 1 2017, 11:34 AM

Can you provide the actual images? Can't see from the screen cap where they begin and end.

Posted by: Seniorbfc Mar 1 2017, 05:24 PM

Actual images of what?

Posted by: pandy Mar 1 2017, 05:46 PM

I probably misunderstood. I thought you wanted to place the text over an images, but I see now the images are just icons.

Well, I'm not sure what you want. With the sample you posted the text (My name is...) is just about the only thing that is where you have it in the image you posted. Is that your problem, where the other stuff is?

Posted by: Seniorbfc Mar 3 2017, 07:53 AM

I wanted the text (which is the red box on the image) moved further up (so it is where the blue box is) and so that the top line of the text is in-line with the "about" text and printer icon. Basically, I want it all to be aligned together

Posted by: pandy Mar 3 2017, 02:18 PM

But the sample you provided doesn't look anything like the image.... I'm confused.

Posted by: Seniorbfc Nov 9 2017, 04:23 PM

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>



Attached thumbnail(s)
Attached Image

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)