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.
Related
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/
This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
Closed 5 years ago.
I'm trying to make a nav bar with an image and I'm having trouble with the image affecting the alignment of the other elements in the nav bar. I can't get the links to be flush with the very top of the page. If I remove the image there is no issue.
.logo {
max-height: 80px;
border-radius: 80px;
}
.link-group-wrapper {
display: inline;
margin: 0;
padding: 0;
}
.link-wrapper {
list-style: none;
text-align: center;
font-size: 1.2em;
background-color: #0b215c;
width: 120px;
display: inline-block;
height: 90px;
line-height: 90px;
}
.link {
color: white;
display: block;
text-decoration: none;
}
<div class="navbar-wrapper">
<img class="logo" src="https://image.ibb.co/cVNZww/logo.jpg">
<ul class="link-group-wrapper">
<li class="link-wrapper">
<a class="link" href="">Roster</a>
</li>
<li class="link-wrapper">
<a class="link" href="">Roster</a>
</li>
<li class="link-wrapper">
<a class="link" href="">Roster</a>
</li>
</ul>
</div>
Easy fix ! Just put the image html element after your nav bar and add a float style to it (float: left;) with CSS
.logo {
max-height: 80px;
border-radius: 80px;
}
.link-group-wrapper {
display: inline;
margin: 0;
padding: 0;
}
.link-wrapper {
list-style: none;
text-align: center;
font-size: 1.2em;
background-color: #0b215c;
width: 120px;
display: inline-block;
height: 90px;
line-height: 90px;
}
.link {
color: white;
display: block;
text-decoration: none;
}
<div class="navbar-wrapper">
<ul class="link-group-wrapper">
<li class="link-wrapper">
<a class="link" href="">Roster</a>
</li>
<li class="link-wrapper">
<a class="link" href="">Roster</a>
</li>
<li class="link-wrapper">
<a class="link" href="">Roster</a>
</li>
</ul>
<img class="logo" style="float: left; "src="https://image.ibb.co/cVNZww/logo.jpg">
</div>
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!
^^ The above images show =900px, >900px, <900px...I just want to center and shorten padding as window shrinks.(at 15px)
^^Using 1.666666666666666%
Right now im trying to make my webpage navbar work with changes in widths. When the window is exactly 900px The navbar fits perfectly. I have 30px spacing around each block (15px left and right; 15px start and end of list). I took 900 and divided by 60 to get 15px and that is my percentage (%/60). When i use the formula calc(1/60*100%) the navbar has the wrong spacing. Am i misunderstanding something.
I dont think this is google chrome issue assuming something is wrong with the above logic. I can post the html file if anyone needs it. Don't know if its neccessary.
body {
margin:0px;
font-family:avenir, sans-serif;
}
.nav {
margin: 0px 0px 0px 0px;
overflow:hidden;
width:100%;
<!--box-shadow: 0px 0px 10px 0px #000000;-->
}
.link-header {
background-color:rgb(242,242,235);
}
.school-header {
background-color:rgb(40,110,123);
}
.nav-left {
display: inline-block;
float:left;
}
.nav-right {
display: inline-block;
float:right;
}<!--
.nav-center {
text-align: center;
}-->
a {
text-decoration: none;
}
.school-header a {
color:white;
}
.link-header a {
color:rgb(40,40,40);
}
.nav-li-outer {
padding-left:calc(1/60*100%);
padding-right:calc(1/60*100%);
display: inline-block;
margin-top: 0px;
vertical-align: top;
}
.school-header li {
line-height:80px;
}
.link-header li {
line-height:30px;
}
.link-header li:hover {
box-shadow:inset 0 -3px 0 rgb(40, 40, 40);
}
ul {
margin: 0;
list-style-type: none;
padding-left: calc(1/60*100%);
padding-right:calc(1/60*100%);
}
html:
<html>
<head>
<link rel="stylesheet" href="kamsc.css">
</head>
<body>
<div class="school-header">
<div class="nav">
<div class="nav-left">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
<img src="Logo-Test.png" width=600px style="vertical-align:middle">
</li>
</div>
</a>
</ul>
</div>
<div class="nav-right">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
Login
</li>
</div>
</a>
</ul>
</div>
</div>
</div>
<div class="link-header">
<div class="nav">
<div class="nav-left">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
Home
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
KAMSC
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Staff
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Admissions
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Curriculum
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Sizzling Summer
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
KAMSC Connection
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Alumni
</li>
</div>
</a>
</ul>
</div>
</div>
</div>
</body>
</html>
You can significantly simply your HTML, particularly for the nav section. Here's a JSFiddle: http://jsfiddle.net/vanu2ynx/
I didn't completely recreate what you're trying to do, but you can probably fill in the details.
Here's the HTML I used:
<header>
<h1>Title</h1>
<div class="login">Login</div>
</header>
<nav>
<ul>
<li>Home</li>
<li>KAMSC</li>
<li>Staff</li>
<li>Adminssions</li>
<li>Curriculum</li>
<li>Sizzling Summer</li>
<li>KAMSC Connection</li>
<li>Alumni</li>
</ul>
</nav>
And the CSS:
header {
background: teal;
overflow: hidden;
padding: 2% 2%;
}
header h1 {
float: left;
margin: 0;
padding: 0;
}
header .login {
float: right;
}
nav {
background: lightgray;
padding: 2% 2%;
}
nav ul {
font-size: 0;
margin: 0;
padding: 0;
text-align: justify;
}
nav ul:after {
content: '';
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
font-size: 16px;
}
The trick here is the text-align: justify; on nav ul and then the :after creates a full width child element for the justify to work.
You'll need to add media queries to have this break properly, but that should be pretty straight-forward.
Read more here: How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container
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.