Solved

Help with HTML & CSS Positioning.

Posted on 2016-11-15
6
15 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
Comment Utility
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
Comment Utility
Are you intending for the website to be responsive?
0
 
LVL 35

Expert Comment

by:Terry Woods
Comment Utility
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 35

Expert Comment

by:Terry Woods
Comment Utility
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
Comment Utility
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
Comment Utility
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

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.
Read about why website design really matters in today's demanding market.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

763 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

11 Experts available now in Live!

Get 1:1 Help Now