The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Text/image positioning in one Div element
Seniorbfc
post Mar 1 2017, 10:37 AM
Post #1


Newbie
*

Group: Members
Posts: 16
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
pandy
post Mar 1 2017, 11:34 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,505
Joined: 9-August 06
Member No.: 6



Can you provide the actual images? Can't see from the screen cap where they begin and end.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Seniorbfc
post Mar 1 2017, 05:24 PM
Post #3


Newbie
*

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



Actual images of what?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 1 2017, 05:46 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,505
Joined: 9-August 06
Member No.: 6



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Seniorbfc
post Mar 3 2017, 07:53 AM
Post #5


Newbie
*

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



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 3 2017, 02:18 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,505
Joined: 9-August 06
Member No.: 6



But the sample you provided doesn't look anything like the image.... I'm confused.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 24th March 2017 - 07:09 AM