Last Updated
Viewed 32 Times
     

Resume contact form

I am unsure how to get the correct HTML and CSS for the bottom part of the resume contact form. When I tried my HTML and CSS, the text would not go to the right of the image. All of the text just goes under the logo box. I am still learning HTML and CSS would like an explanation if possible.

Here is my HTML so far:

<div class="resume">My Resume</div>
<div class="text">Lorem ipsum . . . </div>
<div class="logo-box">
     <div class="logo"></div>
</div>
<div class="job">Director of Web Development</div>
<div class="company">ABCD Company</div>
<div class="year">1999 - 2010</div>
<div class="show-more">SHOW MORE</div>

Here is my CSS so far:

.resume {
    width: 584px;
    height: 65px;
    font-family: Bitter;
    font-size: 48px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #575159;
}

.text {
    width: 699px;
    height: 262px;
    font-family: Lato;
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 2;
    letter-spacing: normal;
    color: #575159;
}

.logo-box {
    justify-content: center;
}

.logo {
    width: 146px;
    height: 146px;
    border-radius: 80px;
    border: solid 1px #979797;
}

.job {
    width: 561px;
    height: 41px;
    font-family: Bitter;
    font-size: 30px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #575159;
}

.company {
    width: 560px;
    height: 53px;
    font-family: Lato;
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #575159;
}

.year {
    width: 418px;
    height: 22px;
    font-family: Lato;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #575159;
}

.show-more {
    width: 181px;
    height: 19px;
    font-family: Lato;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #92719e;
}

I am attempting to float an image to the right of some text currently wrapped in the P tag inside a parent div. using float: right for the image takes it all the way to the right but under the text.

I would like to see them aligned side by side, please check screenshot here: https://drive.google.com/file/d/0B3STRGf0b16iNWhMVDBETEpaczQ/view?usp=drivesdk

My css

h1 {
    font-family: 'open sans';
    font-size: 35px;
    font-weight: 200;
    padding: 0;
    margin: 0;
}

p {
    max-width: 550px;
    padding: 0;
    margin-top: 15px;
    font-size: .9em;
    line-height: 1.8em;
}

.why-nexishost {
    width: 980px;
    overflow: hidden;
    margin: 70px auto 0 auto;
    background-color: #f2f2f2;
}

.quality-badge {
    float: right;
}

My html

<head>
    <title>NexisHost</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="header">
            <div class="header-content">
                <a href="#"><img src="images/twitter-icon.png" class="twitter-icon" alt="Twitter icon"></a>
                <ul>
                    <li>Support 513.571.7809</li>
                    <li><a href="#">Account Manager</a></li>
                </ul>
            </div>
            <div class="navigation">
                <img src="images/logo.png" alt="Site Logo">
                <ul>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Domains</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Something</a></li>
                    <li><a href="#">Design</a></li>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">Signup</a></li>
                </ul>
            </div>
            <div class="home-banner"></div>
            <div class="why-nexishost">
                    <h1>Quality is our #1 priority</h1>
                    <p>A domain name, your address on the Internet, says a lot about who you are and what you do. New domain endings like .guru and .photography can help you find a meaningful address that stands out on the web. Every domain includes website forwarding, email forwarding (help@your_company), simple management tools and other helpful features.</p><img src="images/premium_quality-01-256.png" class="quality-badge" alt="Quality Guarantee badge">
            </div>
    </div>
</body>

</html>

Similar Question 2 : How to write text on image in html

Is it possible that we can write text on image using html or javascript.

I have done this

Created an em tag and create spans inside it and now we can write any text in spans and adjust the position of em tag such that it appears over image. Set the z-index of em tag to be larger value then image. Then it appears that text is written over image.

But I want to provide option using which a visitor can edit the text. How i can do it ?

Code Sample:-

$("#em1").html("<p><span>Hi I am</span><br>
<span> Trying to </span><br><br>
<span> To write text</span></p>");


#em1{
    display: block;
    /*border: 1px solid black;*/
    position: absolute;
    top: 160px;
    right: 145px;
    z-index : 10;
}

I am using a background (blank-nothing written on it) image

I want to align text content and the avatar circle. Here are the classes that I have defined

.user-detail {
    display: inline-block;
    text-transform: uppercase;
    text-align: right;

    .user-detail__username {
        margin: 18px 16px 0px 10px;
        display: block;
        float: left;
        font-size: $font-size;
        font-weight: 500;
    }
    .user-detail__role {
        margin: 18px 16px 0px 10px;
        display: block;
        font-size: $font-size * 0.9;
        font-style: normal;
        line-height: 13px;
        font-weight: 300;
    }
    .user-detail__avatar-circle {
        display: inline-block;
        margin: 8px 11px 0px 0px;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        border: 1px solid $lightstroke;
    }
    .user-detail__avatar {
        position: relative;
        font-size: 51px; 
        line-height: 43px; 
        left:-4px;
    }
}

and here is the HTML markup

<div class="user-detail right">
    <div style="display:inline-block">
        <span class="user-detail__username">
            Adminstrator
        </span>
        <span class="user-detail__role">Adminstrator</span>
    </div>

    <div class="user-detail__avatar-circle">
        <i class="material-icons user-detail__avatar">account_circle</i>
    </div>
</div>

it shows like this here

enter image description here

I want to text and avatar circle should be bottom aligned. If I inspect element there is space on the top of text div. If I could remove this space problem will be solved. But I don't know how could I do that? Even changing the margin of text div not working? Any help?

Similar Question 4 (1 solutions) : CSS Image and text on the right

Similar Question 6 (1 solutions) : Avatar not placed correctly on a podium CSS

cc