?
Solved

Help with HTML & CSS Positioning.

Posted on 2016-11-15
6
Medium Priority
?
28 Views
Last Modified: 2016-11-16
Hi, I am in my 1st month of uni on a web development course and I have an assignment to build a html and css website. I have designed it in illustrator but I am having trouble aligning the image and text also the bottom-border for the menu, Any help would be highly appreciated. I have attached the original design of the header to show what its suppose to look like,


Here is the original Design in illustrator, I need it to look exactly like this.
design-.png

Here is my code :

HTML

<!DOCTYPE html> 
<html> 
    <head>
        <link rel="stylesheet"  type="text/css" href="style.css"> 
        <meta charset="utf-8">    
    </head>

    <!-- Start Container -->
    
    <body> 
    
     <!-- Start Header Section --> 
            
    <div id="header">
            
    <!-- Start Logo --> 
            
    <div id="logo"><a href="#"><img src="Assets/logo.png"></a></div>
            
    <!-- End Logo --> 
            
    <!-- Start Main Nav Bar --> 
            
    <div id="mainnav">
        <ul> 
            <li><a href="#">Home</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Reviews</a></li>
            <li><a href="#">Pricing</a></li>
            <li class="download"><a href="#">Download</a></li>
        </ul>
     </div>     
    
            
    <!-- End Main Nav Bar -->
        
        <div id="headtext">
            
            <h1>Download The IOS App Today!</h1>
            
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tristique orci sed ipsum maximus, sed rutrum ipsum cursus. Curabitur id ullamcorper mi. Nulla vehicula leo risus, ut ornare risus elementum vel. Proin quis rhoncus purus. Nunc eget egestas lectus. Praesent laoreet velit ut est efficitur tristique. Cras non elementum sapien, ac tri
            </p>
            
            <p>Nulla eget velit semper, vehicula elit vel, imperdiet lectus. Suspendisse laoreet consequat felis quis aliquet. Sed sagittis faucibus enim, ut dapibus sapien mollis eu. Phasellus ex dui, vestibulum quis sapien in, commodo euismod quam. Curabitur sem diam, vulputate vitae tempor ut, vulputate a velit. Proin iaculis pharetra neque, sit amet interdum tellus. Suspendisse potenti. Pellentesque mauris felis, pretium sit amet neque nec, venenatis pulvinar purus. Sed pellentesque tempor porttitor. Curabitur non lobortis nulla, vitae dictum justo.</p>
            
            
        
        </div>
        
        <div id="head"><img src="Assets/iphone-hand.png"></div>
        
    
        </div>
    <!-- End Header Section --> 

      
        
    <!-- End Container --> 
   
    </body>   
    
</html>

Open in new window


CSS

/* START CSS RESET */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* END CSS RESET */


/* START CONTAINER  */

#container {
    
    width: 1250px; 
    margin: 0 auto;
}

/* END CONTAINER  */

/* START HEADER SECTION  */

#header {
    
    background-color: #0C2633;
    height: 700px; 
    width: 100%;
}

/* END HEADER SECTION  */



/* START LOGO  */

#logo { 
float: left; 
Width: 200px; 
height: 200px; 
padding: 10px; 
margin: 5px; 
margin-left: 80px;

}

/* END LOGO  */




/* START MAIN NAV  */

#mainnav {
    width: 100%;
    background-color: green; 
}

#mainnav ul {
    
border-bottom: 1px solid white; 
padding-bottom: 30px;


}

#mainnav ul { 
float: right;
margin-top: 90px; 
margin-right: 50px;

   

}

#mainnav ul li {

display: inline; 
list-style-type: none;
font-weight: bold; 
margin-left: 20px; 


    
}

#mainnav ul li a {

color: white; 
text-decoration: none;


    
}
#mainnav ul li a:hover{
    
    color: #AF2621;
    
}


/* END MAIN NAV  */


/* START DOWNLOAD BUTTONS */

.download {
    
    padding: 10px 30px;  
    border: 1px solid black; 
    border-radius: 10px; 
    background-color: #1DA6C4;
    height: 70px; 
    text-align: center; 
    margin-left: 350px;
    margin-right: 80px;
}

/* END DOWNLOAD BUTTONS */

#head img{
    
    float: left; 
    width: 370px; 
    height: 470px; 
    margin-top: 93px;
 
}

#headtext {
    
    float: left; 
    width: 600px; 
    height; 300px; 
    margin-right: 120px; 
    margin-top: 120px;
}

#headtext p {
    
  color: white;  
}

#headtext h1{
    
  color: #1da6c4; 
  font-size: 35px; 
  text-transform: uppercase;
}

#clear {
    
    clear: both;
}

#header {
    
    width: 1439px; 
}

Open in new window

0
Comment
Question by:Mike Moore
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
6 Comments
 
LVL 35

Expert Comment

by:Terry Woods
ID: 41889044
To get started on resolving this, here's a jsfiddle of the code with the images replaced by placeholder lorempixel images (since the original images haven't been provided as separate files):

https://jsfiddle.net/dzx3mog7/
0
 
LVL 35

Accepted Solution

by:
Terry Woods earned 2000 total points
ID: 41889047
Are you intending for the website to be responsive?
0
 
LVL 35

Expert Comment

by:Terry Woods
ID: 41889051
The main text content of the page, (ie starting with DOWNLOAD THE IOS APP TODAY!) is contained with the div with id="header". Generally the page content should be clearly separate from the page header, so the page content should be a separate div, perhaps called "main" that comes after the "header" div and before the footer div.

Once you've got that sorted out, the text on the left and the image on the right will be able to be lined up easily.
0
Get MySQL database support online, now!

At Percona’s web store you can order your MySQL database support needs in minutes. No hassles, no fuss, just pick and click. Pay online with a credit card.

 
LVL 35

Expert Comment

by:Terry Woods
ID: 41889057
A good way to think about layout of rectangular page elements is to imagine boxes around each element, and consider how they should sit relative to the side of the window and the other elements on the page. eg If you want all the content, when viewed on a wide screen, to line up nicely down the centre of the page then you'll create a div for that then create another inside it as necessary for each imaginary box that contains an element. Consider the margin and the padding for each box, and if designing responsively then consider what will happen when the window gets too narrow.
0
 
LVL 35

Expert Comment

by:Terry Woods
ID: 41889077
The "main" div should have style
clear: both;

Open in new window

to ensure the floated elements in it aren't affected by the header elements.
0
 

Author Closing Comment

by:Mike Moore
ID: 41889342
Hi, Thabks for your help. Yes it is suppose to be responsive but I just wanted to get the normal layout 1st before I make it responsive thanks
0

Featured Post

Get proactive database performance tuning online

At Percona’s web store you can order full Percona Database Performance Audit in minutes. Find out the health of your database, and how to improve it. Pay online with a credit card. Improve your database performance now!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question