Build resume-email position in header


#1

my email isn't positioned in the div header why?


#2

Could you post your full html + css code? (so copy and paste your code to the forum


#4

div {
    border-radius: 5px;
}
#header {
    width: 97%;
    height: 60px;
    background-color: #F0E68C;
    border: 2px solid black;
    z-index: 1;
    position: fixed;
}
#name {
    padding-left: 10px;
    font-family: serif;
    color: brown;
    font-size: 20px;
    margin-left: 10px;
    padding-top: 2px;
    
}

#email {
    font-family: cursive;
    float: right;
}
    
    
.left {
    width: 15%;
    height: 600px;
    background-color: #6495ED;
    margin-top: 80px;
    border: 2px solid black;
    margin-bottom: 20px;
    float: left;
  
}

.right {
    width: 84%;
    height: 600px;
    background-color: #A0522D;
    margin-top: 80px;
    border: 2px solid black;
    margin-bottom: 20px;
    float: right;
}

#footer { 
    width: 100%;
    height: 60px;
    background-color: #F0E68C;
    border: 2px solid  black;
    clear: both;
}

#5

you need something else to post?? thank you


#6

Your html code?
to make your code/indent is visible: (if you don't succeed, don't delete it, i can make it visible for you)

select your code and press ctrl + shift + c (or cmd + shift + c if you use a mac)

if this instructions are unclear, you can also insert 3 backticks before and after your code, like so:

```
<p>visible</p>
```

the backtick is located above the tab key on your keyboard


#7

my problem is with my domain name position. i upload an image if you saw it and you can easily see that my domain name is not in my header. so what i've done wrong?


#8

But now i have to retype the html code from your image..., can you just provide me with the html code? I can see the email isn't in, but i need the code in order to resolve the problem, i can't use a inspector on a image


#9

Okay, i just reconstructed your html, the link is not in because the paragraph element (#name, is a block level element) which takes the entire width, as you can see here, the link will be below it. You need to use float/display: inline-block to resolve this issue, depending on the desired output


#10

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body>
	     <div id="header">
	        <p id="name">your name</p>
	        <a href="mailto:you@yourdomain.com"><p id="email">domain name@gmail.com></p></a>
         </div>
	     <div class="left"></div>
	     <div class="right">
	        <ol>
	         <h2>About me</h2>
	            <li class="square">Objective</li>
	                <p class="circle">To take a position as a software engineer.</p>
	            <li class="square">Experience</li>
	                 <ul>
	                     <li class="circle">Junior Developer, Software Company (2010 - Present)</li>
	                     <li class="circle">Designed and implemented end-user features for Flagship Product
Wrote third-party JavaScript and Ruby libraries
</li>
	                  </ul>
	            <li class="square">Skills</li>
	                  <ul>
	                       <li class="circle">Languages: C#, JavaScript, Python, Ruby
</li>
	                        <li class="circle">Frameworks: .NET, Node.js, Django, Ruby on Rails</li>
	                   </ul>
	            <li class="square">Educatiom</li>
	                <p class="circle">BS, Economics, My University</p>
	         </ol>
	            
	            
	     </div>
	     <div id="footer"></div>
	    
	    
	    
	    
	    </body>
</html>

#11

Thank you, but point still stands, your #name should have a float: left; property.


#12

ok thank you a lot,
i put in #name{ display:inline-block} and the problem is resolved,..