• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 38
  • Last Modified:

Help with HTML & CSS Positioning.

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
Mike Moore
Asked:
Mike Moore
  • 5
1 Solution
 
Terry WoodsIT GuruCommented:
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
 
Terry WoodsIT GuruCommented:
Are you intending for the website to be responsive?
0
 
Terry WoodsIT GuruCommented:
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Terry WoodsIT GuruCommented:
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
 
Terry WoodsIT GuruCommented:
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
 
Mike MooreAuthor Commented:
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

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now