Solved

Help with HTML & CSS Positioning.

Posted on 2016-11-15
6
18 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
  • 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 500 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

910 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now