I can't seem to find a way to make my button icons align to the very right of my header, while keeping "About" "Gallery" and "Resume" to the left.
As well, does anyone know how I can make the text fit evenly on the page, I have a strange gap on the right and want it to fit evenly on the page. It looks like I need help with CSS.
HTML
body {
background-image: url("images/robot.jpg");
background-position: bottom-left;
margin-right: 200px;
text-align: justify;
width: 800px;
height: 400px;
text-decoration: none;
color: white;
font-family: 'Marvel', sans-serif;
}
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: right;
padding: 10px 13px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.circular--portrait {
margin-top: 70px;
margin-left: 30px;
width: 200px;
height: 200px;
float: left;
overflow: hidden;
border-radius: 50%;
}
.circular--portrait img {
width: 100%;
}
.circular--portrait {
width: 25%;
float: left;
}
.column-one p {
width: 65%;
float: right;
margin-top: 150px;
margin-left: 10px;
}
.column-two {
float: left;
width: 100%;
}
img {
transition: transform .5s;
}
img:hover {
transform: scale(1.75);
}
<body>
<ul>
<li>About</li>
<li>Gallery</li>
<li>Resume</li>
<li>
<a href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on
Deviant Art" target="_blank">
<img src="images/icons/deviantart.png" width="30" height="30"></a>
</li>
<li>
<a href="eddie.ark.munoz#gmail.com" title="Contact" target="_blank">
<img src="images/icons/email.png" width="30" height="30"></a>
</li>
<li>
<a href="https://www.linkedin.com/in/eddie-munoz-351a9428/"
title="Follow on Linkedin" target="_blank">
<img src="images/icons/linkedin.png" width="30" height="30"></a>
</li>
<li>
<a href="https://www.instagram.com/eddiearkmunoz/" title="Follow on
Instagram" target="_blank">
<img src="images/icons/instagram.png" width="30" height="30">
</a>
</li>
</ul>
<div class="circular--portrait">
<img src="images/profile.jpg">
</div>
<div class="column-one">
<p>Eddie Munoz has been creating art from the age of 13. While he was
completing his Bachelors of Applied Science in Human Relations he was
freelancing on the side. Eddie has created numerous character artists.</p>
</div>
<div class="column-two">
<h1>What others are saying</h1>
<p>"Eddie is the best young talent I have had the pleasure to work with.
He has a great eye for detail and really finds the fun in whatever
project he is given no matter the size. Eddie strives to learn every
nuance of 3D gaming tech as well as distributing
that knowledge once learned. Eddie is an amazing talent that is bound
for superstar status." - Billy Ashlswede, Art Lead at Riot Games</p>
<p>"Eddie was a highly valued Character Artist with proficiency in many
different modeling programs. He was a very dedicated artist who
frequently helped others and went out of his way to produce additional
assets for our game. Eddie has not only a very
technical, but also a very artistic mindset. All of these qualities
make Eddie a great asset to any team." -Kyle Sarvas, Game Artist/Game
Designer</p>
</div>
</body>
Hello You can use the nth-last-child selector to control your child elements so if you have your image list fixed the you can use
li:nth-last-child(-n+4) { float:right; }
this will move the last 4 image list items to right
check the below fiddle demo
Fiddle Demo
I have made many changes to the structure. First, consider placing your header and content inside separate containers. This will give you greater control over each block. In the header, I separated the links <ul> from the icons <ul> and position the icons right using position:absolute.
Now, in the content, you must remember to clear any floats defined previously with clear:both. Here, I used a css grid layout to create two columns but you can opt for any number of other layout strategies.
body {
background-image: url("images/robot.jpg");
text-align: justify;
text-decoration: none;
font-family: 'Marvel', sans-serif;
margin: 0px;
padding: 0px;
}
.header {
background-color: #333;
}
ul.icons {
position: absolute;
right: 0px;
}
ul.links {
height: 50px;
}
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: right;
padding: 10px 13px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.content {
clear: both;
padding: 8px;
display: grid;
grid-template-columns: 48% 48%;
grid-column-gap: 4%;
}
.circular--portrait {
margin-top: 70px;
margin-left: 30px;
width: 200px;
height: 200px;
border-radius: 50%;
}
.circular--portrait img {
width: 100%;
}
.circular--portrait {
width: 25%;
}
.column-one p {}
.column-two {}
img {
transition: transform .5s;
}
img:hover {
transform: scale(1.75);
}
<div class="header">
<ul class="links">
<li>About</li>
<li>Gallery</li>
<li>Resume</li>
</ul>
<ul class="icons">
<li>
<a href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank">
<img src="images/icons/deviantart.png" width="30" height="30"></a>
</li>
<li>
<a href="eddie.ark.munoz#gmail.com" title="Contact" target="_blank">
<img src="images/icons/email.png" width="30" height="30"></a>
</li>
<li>
<a href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank">
<img src="images/icons/linkedin.png" width="30" height="30"></a>
</li>
<li>
<a href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank">
<img src="images/icons/instagram.png" width="30" height="30">
</a>
</li>
</ul>
</div>
<div class="content">
<div class="column-one">
<div class="circular--portrait">
<img src="images/profile.jpg">
</div>
<p>Eddie Munoz has been creating art from the age of 13. While he was completing his Bachelors of Applied Science in Human Relations he was freelancing on the side. Eddie has created numerous character artists.</p>
</div>
<div class="column-two">
<h1>What others are saying</h1>
<p>"Eddie is the best young talent I have had the pleasure to work with. He has a great eye for detail and really finds the fun in whatever project he is given no matter the size. Eddie strives to learn every nuance of 3D gaming tech as well as distributing
that knowledge once learned. Eddie is an amazing talent that is bound for superstar status." - Billy Ashlswede, Art Lead at Riot Games</p>
<p>"Eddie was a highly valued Character Artist with proficiency in many different modeling programs. He was a very dedicated artist who frequently helped others and went out of his way to produce additional assets for our game. Eddie has not only a very
technical, but also a very artistic mindset. All of these qualities make Eddie a great asset to any team." -Kyle Sarvas, Game Artist/Game Designer</p>
</div>
</div>
You can use flexbox for the layout of your header. Use margin property on the 4th nav item to push it right.
body {
background-image: url("images/robot.jpg");
background-position: bottom-left;
/* this margin is probably why you have a gap on the right */
/* margin-right: 200px; */
text-align: justify;
width: 800px;
height: 400px;
text-decoration: none;
color: white;
font-family: 'Marvel', sans-serif;
}
ul {
display: flex;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
list-style-type: none;
}
li a {
display: block;
color: white;
padding: 10px 13px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.nav-right {
margin-left: auto;
}
<ul>
<li>About</li>
<li>Gallery</li>
<li>Resume</li>
<li class="nav-right">
<a href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on
Deviant Art" target="_blank">
<img src="images/icons/deviantart.png" width="30" height="30"></a>
</li>
<li>
<a href="eddie.ark.munoz#gmail.com" title="Contact" target="_blank">
<img src="images/icons/email.png" width="30" height="30"></a>
</li>
<li>
<a href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank">
<img src="images/icons/linkedin.png" width="30" height="30"></a>
</li>
<li>
<a href="https://www.instagram.com/eddiearkmunoz/" title="Follow on
Instagram" target="_blank">
<img src="images/icons/instagram.png" width="30" height="30">
</a>
</li>
</ul>
I have created a fiddle: https://jsfiddle.net/o61xr75c/
display: flex;
justify-content: space-between;
align-items: center;
Basically, when you want to do such things you should divide the items in two or more containers, in this case one container for the left side (text only) and other contains for the right side (image only).
Hope it helps!
Related
I am trying to get the second navbar to align on the right, I have tried adding float:right and have tried adding a margin on the right to space out the words but does not work. Tried removing the nav tag and replacing it with section but it does not work.
/* NAV ON TOP*/
.pagetopTop{
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 500;
transition: ease-in-out 0.3s;
padding-bottom: 20px;
}
.topNav{
display: flex;
float: right;
}
.Topspan{
margin: var(--size-10);
}
/*navbar*/
.navbar .container{
top: 0;
right: 0;
left: 0;
z-index: 500;
transition: ease-in-out 0.3s;
display:flex
}
.navbar-brand{
height: var(--size-50);
margin-top: var(--size-40);
cursor: pointer;
}
.navbar-nav{
display: flex;
align-items: center;
}
.navbar-nav li{
align-items: center;
position: absolute;
}
body{
font-family: "Source Sans Pro", sans-serif;
font-weight: 400;
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: 0;
color: var(--font-color-base);
margin: 0;
padding: 0;
}
*,
::after,
::before{
box-sizing: border-box;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{ text-decoration: none;}
p{ margin-top: 0;}
h2{
font-size: 1.75rem;
font-weight: 500;
line-height: 1.2;
}
img{
max-width: 100%;
vertical-align: middle;
border-style: none;
}
.container{
width: 100%;
padding-left: 40px;
padding-right: 40px;
margin-left: auto;
margin-right: auto;
}
<body>
<section id="pagetopTop" class="pagetopTop">
<div class="container">
<i class="fas fa-angle-left"></i>
<span class="Topspan">Main Demos</span>
<ul class="topNav">
<li class="nav-link">
<span class="Topspan">Demos</span>
<i class="fas fa-angle-down"></i>
</li>
<li class="nav-link">
<span class="Topspan">Docs</span>
<i class="fas fa-angle-down"></i>
</li>
</ul>
</div>
</section>
<nav id="Nav" class="navbar nav">
<div class="container">
<a href="" class="">
<img src="Week5saasappassets-210323-142515 (1)/Week-5-saas-app-assets/project_logo/logo.svg" alt="Company logo" class="navbar-brand">
</a>
<ul class="navbar-nav">
<li class="nav-link">
Home
</li>
<li class="nav-link">
Features
</li>
<li class="nav-link">
Learn
</li>
<li class="nav-link">
Price
</li>
<li class="nav-link">
Hire us
</li>
</ul>
</div>
</nav>
</body>
Maybe because of the margins or parent elements overlapping each other.
want to move the ul list to the other side beneath demos and space it out
There are a few issues here, in terms of HTML semantics, it doesn't make a lot of sense to use <section> for a nav menu. The <section> represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. A page without content and only a navigation menu wouldn't make very much sense.
Use a more semantic element like <nav> which represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. At worse, a division element <div> which doesn't have semantic meaning would make more sense than a <section> for a navigation menu. Also, you have display: flex and float: right on the .topNav container. Flexbox is the "newer" way to distribute space for items along a single axis so use one or the other, not both.
Instead of using a float to create layouts by floating elements to the left or the right, flexbox allows you to create layouts by aligning items to a single axis. The axis can be horizontal or vertical. It is best used for distributing space for items in the same axis
Your using a bunch of FontAwesome icons but didn't include the <script> tag in your example so none of them rendered. Next, the position: fixed on the <section> container paired with absolute positioning of the <li> elements, this is causing some of the menu items to overlap since your taking the content out of the "normal flow". Unless that was intended, I'm not sure what the exact "expected output" is since you didn't include a picture.
For positioning two elements at opposite sides in a row, just use a Flexbox layout to distribute "space between" the two nav menus in the <body> using justify-content: space-between. I added a nested <div> to the <body> that will act as the flex container containing the two <nav> menus. You can also vertically align flex items (e.g. the two nav menus) along the cross-axis with align-items: center. I will let you take it from here to style the nav menus on each side of the viewport how you would like.
/* NAV ON TOP*/
.flexbox {
display: flex;
justify-content: space-between;
align-items: center;
}
.pagetopTop{
/*position: fixed;
top: 0;
right: 0;
left: 0;*/
z-index: 500;
transition: ease-in-out 0.3s;
padding-bottom: 20px;
}
.topNav{
display: flex;
justify-content: space-between;
align-items: center;
}
.Topspan{
margin: var(--size-10);
}
/*navbar*/
.navbar .container{
/*top: 0;
right: 0;
left: 0;*/
z-index: 500;
transition: ease-in-out 0.3s;
display:flex;
align-items: center;
margin-top: 1rem;
}
.navbar-brand{
height: var(--size-50);
margin-top: var(--size-40);
cursor: pointer;
}
.navbar-nav{
display: flex;
flex-direction: column;
align-items: center;
}
.navbar-nav li{
align-items: center;
/*position: absolute;*/
}
body{
font-family: "Source Sans Pro", sans-serif;
font-weight: 400;
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: 0;
color: var(--font-color-base);
margin: 0;
padding: 0;
}
*,
::after,
::before{
box-sizing: border-box;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{ text-decoration: none;}
p{ margin-top: 0;}
h2{
font-size: 1.75rem;
font-weight: 500;
line-height: 1.2;
}
img{
max-width: 100%;
vertical-align: middle;
border-style: none;
}
.container{
width: 100%;
padding-left: 40px;
padding-right: 40px;
margin-left: auto;
margin-right: auto;
}
<body>
<div class="flexbox">
<nav id="pagetopTop" class="pagetopTop">
<div class="container">
<i class="fas fa-angle-left"></i>
<span class="Topspan">Main Demos</span>
<ul class="topNav">
<li class="nav-link">
<span class="Topspan">Demos</span>
<i class="fas fa-angle-down"></i>
</li>
<li class="nav-link">
<span class="Topspan">Docs</span>
<i class="fas fa-angle-down"></i>
</li>
</ul>
</div>
</nav>
<nav id="Nav" class="navbar nav">
<div class="container">
<a href="" class="">
<img src="https://dynamic.brandcrowd.com/asset/logo/8cb54db0-7219-4bf6-bba3-1c9e94078516/logo?v=4" width="60" height="60" alt="Company logo" class="navbar-brand">
</a>
<ul class="navbar-nav">
<li class="nav-link">
Home
</li>
<li class="nav-link">
Features
</li>
<li class="nav-link">
Learn
</li>
<li class="nav-link">
Price
</li>
<li class="nav-link">
Hire us
</li>
</ul>
</div>
</nav>
</div>
<!-- Font Awesome Script -->
<script src="https://kit.fontawesome.com/e03d7ac5cf.js" crossorigin="anonymous"></script>
</body>
I am trying to build a simple navigation where some parts of the navigation items are hidden depending on the available space:
.container {
display: flex;
border: 1px solid red;
width: 100%;
max-width: 600px
}
ul {
margin: 0 30px 0px 0px;
display: flex;
list-style: none;
padding: 0;
flex-grow: 1;
}
li {
margin: 0;
padding: 0px 5px;
border: 1px solid green;
margin-left: 20px;
}
li:first-child{
padding-left: 0px;
margin-left: 0px;
}
li a {
line-height: 18px;
height: 18px;
overflow: hidden;
display: block;
}
.important {
color: red;
}
<div class=container>
<ul>
<li>
<a href=#>
<span class=important>my</span>
<span>elem</span>
</a>
</li>
<li>
<a href=#>
<span>my</span>
<span class=important>elem</span>
</a>
</li>
<li>
<a href=#>
<span class=important>my</span>
<span>elem</span>
</a>
</li>
<li>
<a href=#>
<span>my</span>
<span class="important">2nd</span>
<span>elem</span>
</a>
</li>
<li>
<a href=#>
<span>longerfirst</span>
<span class="important">elem</span>
</a>
</li>
</ul>
</div>
I successfully made some words disappear with using a fixed height and overflow:hidden on the a tag.
Now I'm looking for a solution to keep the red words (.important) visible and hide the others. Is there a way to do this?
If the word on the invisible line is longer than the visible one, the visible has too much whitespace, is there also a solution to this?
With Javascript it would be fairly easy, but I'm looking for a CSS only solution.
JSFiddle: http://jsfiddle.net/86qjexz3/
I want to make a flex-box layout where it looks like this:
I got the first 3 to look okay, then the next one isn't laying out well, not showing the text, and having a weird black background I can't figure out how to get rid of in CSS.
If I were to keep adding services and stuff to the first flex box structure, will it wrap automatically? When I used the flex-wrap command, it took the box display and stretched it out, and things went out of sorts.
here's the fiddle https://jsfiddle.net/b03q4zzc/
.container {
display: flex;
width: 100%;
height: 500px;
background-color: #fff
/* Make the parent a flex containter */
}
.container-two {
display: flex;
width: 100%;
background-color: #fff;
overflow: hidden;
}
.services {
flex: 1;
padding: 1em;
}
.service {
flex: 1;
/* Distribute free space among flex items */
padding: 1em;
}
h1 {
text-align: center;
display: block;
margin-top: 100px;
}
.service ul {
background-color: #fff;
overflow: hidden;
}
.service li{
list-style-type: circle;
text-align: left;
font-color: white;
max-height: 100px;
min-height: 50px;
max-width: 300px;
min-width: 200px;
}
.service--one h4, a {
text-align: left;
text-decoration: none;
color: red;
}
.service--one a:hover {
color: blue;
text-shadow: 0px 0px 3px white, 0px 0px 5 white;
}
.services--one {
background: #fff
}
.services--two {
background: #fff
}
.service h3 {
text-align: center;
}
.services p {
width: 200px;
display: block;
background: #fff
}
.service h6 {
width: 200px;
}
h5 {
margin-left: 25px;
display: inline-block;
text-align: center;
color: red;
}
.service {
margin-top: 50px;
margin-left: 0px;
display: inline-block;
flex: 1; /* Distribute free space among flex items */
padding: 1em;
}
.service h3 {
flex: 1;
text-align: center;
}
.service h5 {
text-align: center;
color: red;
}
.service--one h5 {
font-style: italic;
}
<ul class="container">
<li class="service service--one">
<h3>Business Services</h3>
<ul>
<li>Logo Design</li>
<li>Business Card Design</li>
<li>Letterhead Design</li>
<li>Namebadge Design</li>
<li>Signage and Window Decals</li>
<li>Pamphlets, Brochures, Menus and other business forms</li>
<li>Promotional Product Design</li>
</ul>
</ul>
</li>
<li class="service service--two">
<h3>Sports Services</h3>
<ul>
<li>Team Logo Design</li>
<li>Sellable Merchandise and Apparel Design</li>
<li>Promotional Product Design</li>
<li>Program Design</li>
</ul>
</li>
<li class="service service--three">
<h3>Personal Services</h3>
<ul>
<li>Wall Art</li>
<li>Slideshow Design</li>
<li>Custom Creations</li>
</ul>
</li>
</ul>
<ul class="container-two">
<h2>Popular Packages Include</h2>
<li class="services services--one">
<ul>
<li>"Start Me Up" <strong>$200.00</strong></li>
<p>This package includes <strong>Logo Design, Business Card Design,
Letterhead Design and Invoice Design</strong>.
This package is perfect for the start up, or someone reinventing their
company.</p>
<li class="services services--two"
<li>"Make Me A Brand" <strong>Buy 3 promotional product designs, get 2
free*</strong></li>
<p>This package is for the company that wants marketable merchandise.
These promotional products are great to hand out
at fairs and other events to get your name out there.
<h6>*Any promotional product utilized for sales and profit <i>
<strong>MAY</strong></i> fall under our
guidelines for "Royalties", and may be subject to royalties to Dave's
Logo Designs. For more information if your project would
fall under these guidelines, please <a href="contact.html">Contact
Us</a>.</h6></p>
<li>"Go Team Go" <strong>$250.00</strong></li>
</ul>
</li>
</ul>
<div class="footer">
<footer><h6>Some restrictions apply, contact us for more details.</h6>
<ul>
<h2>Find us on:</h2>
<li><a href="http://www.twitter.com/daveslogodesign" target="_blank"><img
src="https://s19.postimg.org/3tbo98443/twitter.png" height="25px"
width="25px" alt="twitter"></img>Twitter</a></li>
<li><a href="http://www.facebook.com/daveslogodesigns" target="_blank">
<img src="https://s19.postimg.org/amc15huxf/facebook.png" height="25px"
width="25px" alt="facebook"></img>Facebook</a></li>
<li><a href="http://www.linkedin.com/daveslogodesigns" target="_blank">
<img src="https://s19.postimg.org/t4kz3h237/linkedin.png" alt="linkedin"
height="25px" width="25px"></img>Linkedin</a></li>
<li><a href="http://www.skype.com/daveslogodesignd" alt="skype"
target="_blank"><img src="https://s19.postimg.org/y9hl7cpn7/skype.png"
height="25px" width="25px"></img>Skype</a></li>
<li><a href="https://www.instagram.com/daveslogos/"><img
src="https://s19.postimg.org/it8matadv/instagram.png" alt="instagram"
height="25px" width="25px"></img>Instagram</a></li>
<li><img>
</li>
</ul>
maybe something I'm doing is wrong. Thanks for the help.
For part of a site I'm making, I'm looking to have a grid of square objects, and have them pack together tightly so there's no spaces.
Here is what I have made:
But here's what I want it to look like:
So far I've only been doing this by padding and adding margins, and then by vertically aligning each list item. But I want it to go one step further than vertical alignment, I want each item to fit directly underneath the one above it.
I'm sure there's a very different, better approach than the one I've taken, which would be great too!
Here's what I have done:
HTML:
<header class="results">
<ul class="container">
<li>
<a id="name">Temp</a>
<a id="position">Temp</a>
</li>
<li>
<a id="name">Temp</a>
<a id="position">Temp</a>
<a id="position">Temp</a>
</li>
<li>
<a id="name">Temp</a>
<a id="position">Temp</a>
</li>
<li>
<a id="name">Temp</a>
<a id="position">Temp</a>
</li>
<li>
<a id="name">Temp</a>
<a id="position">Temp</a>
</li>
<li>
<a id="name">Temp</a>
<a id="position">Temp</a>
</li>
</ul>
</header>
CSS:
body {
margin: 0;
}
.page {
background: #fff;
}
header.results {
max-width: 100%;
}
header.results .container {
padding: 1em 0 2em;
margin: 0px auto 3px;
line-height: 1;
}
header.results .container li {
width: 30%;
display: inline-block;
padding: 2em 2em 0.75em;
margin: 0px auto 3px;
background: rgb(240,240,240);
vertical-align: top;
}
header.results .container li #name {
text-align: center;
display: block;
margin-top: 0.5em;
font-weight: 500;
}
header.results .container li #position {
text-align: center;
display: block;
margin-top: 0.5em;
font-weight: 250;
font-size: 85%;
}
If you're not supporting older browsers (IE 8 & 9), you could implement this with CSS columns, as shown here.
For full browser support, I'd go with the jQuery masonry plugin.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Hello Stack Overflow community! I am a complete beginner to programming and am attempting to learn my way around HTML and CSS at the moment. One of the projects I am working on is to re-create the Google homepage without looking at the source code. I am struggling right now with positioning of various elements (logo, search box, footer).
Can someone look at my code and tell me specifically why my positioning will not work on the three elements I mentioned?
Also, is my HTML semantically correct when it comes to "id" and "class"? Here is the code:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="main.css"/>
<title>Google</title>
<div class="container">
<nav id="nav">
<ul>
<li>+You</li>
<li>Search</li>
<li>Images</li>
<li>Maps</li>
<li>Play</li>
<li>YouTube</li>
<li>News</li>
<li>Gmail</li>
<li>Drive</li>
<li>Calendar</li>
<li>More</li>
</ul>
</nav>
<img src="https://www.google.com/images/srpr/logo4w.png" alt="Google" width=280 height=95/>
<div id="sign">SIGN IN</div>
<form>
<input type="text">
</form>
<div id="footer">
<ul>
<li>Advertising Programs<li>
<li>Business Solutions<li>
<li>Privacy & Terms<li>
<li>+Google<li>
<li>About Google<li>
</ul>
</div>
.container {
width: auto;
height: 600px;
position: relative;
}
#nav {
background-color: #333333;
height:30px;
}
li a {
text-decoration: none;
font-family: arial;
color: #ABABAB;
float: left;
padding: 5px;
font-size: 13px;
font-weight: 600;
margin-top: 2px;
margin-right: 13px;
}
img {
margin-left: 130px;
margin-top: 195px;
}
#sign {
border: 2px solid #D94A4A;
background-color: #D94A4A;
height: 16px;
width: 65px;
float: right;
margin-right: 40px;
margin-top: 20px;
border-radius: 3px;
font-size: 11px;
font-family: arial;
text-align: center;
color: white;
font-weight: 600;
padding-top: 7px;
}
input {
width: 550px;
height: 25px;
border: 1px solid #3492F7;
margin-top: 290px;
margin-left: 670px;
}
#footer {
position: relative;
bottom: 0;
font-family: verdana;
display: inline;
}
You forgot some basics : see Uzziel's answer for precisions, he pointed those accurately (comments too).
However, you should know that Stack Overflow is not a place to get all your code corrected for you, but I think it could be helpful for you to see where it was wrong.
I tried not to change the HTML structure too much, I did a few modifications mainly in the CSS.
There's a website, JSFiddle.net, where you can edit HTML and CSS (and JS) online and see the result ± instantly.
I put my code here, so you can tweak it as you wish afterwhile.
HTML
<div class="container">
<nav id="nav">
<ul>
<li>
<a href="#">
+You
</a>
</li>
<li>
<a href="#">
Search
</a>
</li>
<li>
<a href="#">
Images
</a>
</li>
<li>
<a href="#">
Maps
</a>
</li>
<li>
<a href="#">
Play
</a>
</li>
<li>
<a href="#">
YouTube
</a>
</li>
<li>
<a href="#">
News
</a>
</li>
<li>
<a href="#">
Gmail
</a>
</li>
<li>
<a href="#">
Drive
</a>
</li>
<li>
<a href="#">
Calendar
</a>
</li>
<li>
<a href="#">
More
</a>
</li>
</ul>
</nav>
<div id="sign">
SIGN IN
</div>
<img src="https://www.google.com/images/srpr/logo4w.png" alt="Google" />
<form>
<input type="text" />
</form>
<div id="footer">
<ul>
<li>
<a href="#">
Advertising Programs
</a>
</li>
<li>
<a href="#">
Business Solutions
</a>
</li>
<li>
<a href="#">
Privacy & Terms
</a>
</li>
<li>
<a href="#">
+Google
</a>
</li>
<li>
<a href="#">
About Google
</a>
</li>
</ul>
</div>
</div>
CSS :
.container {
width: 100%;
height: 1000px;
position: relative;
}
nav {
background - color: #333333;
height: 30px;
}
li {
list-style: none;
display: inline-block;
}
li a {
text-decoration: none;
font-family: arial;
color: # ABABAB;
float: left;
padding: 5px;
font - size: 13px;
font - weight: 600;
margin - top: 2px;
margin - right: 13px;
}
img {
width: 280px;
margin: 195px auto 0 auto;
display: block;
}
#
sign {
border: 2px solid# D94A4A;
background - color: #D94A4A;
height: 16px;
width: 65px;
float: right;
margin - right: 40px;
margin - top: 20px;
border - radius: 3px;
font - size: 11px;
font - family: arial;
text - align: center;
color: white;
font - weight: 600;
padding - top: 7px;
}
input {
width: 550px;
height: 25px;
border: 1px solid #3492F7;
margin: 20px auto;
display: block;
}
# footer {
position: absolute;
bottom: 0;
font - family: verdana;
}
You're missing some basic HTML structure - you don't close the HEAD tag; there is no BODY tag; you don't close the HTML tag.
No, the code you presented is not semantically correct when it comes to ID and CLASS because you're not closing all of your DIVs. The "container" DIV in particular isn't closed. Just remember when using ID and CLASS that an ID should only show up once in the document; CLASS can be re-used as often as you want.