Can someone take a look at my code please and tell me:
How can I get the image to go over the <header> and <nav> so that everything else centres properly. I have tried playing with z-index and nothing seems to work.
How do I get the <section> to start under the <nav> rather than right at the top of the page behind the other elements without using loads of <br>s?
#CHARSET "ISO-8859-1";
body {
font-family: "Comic Sans MS", cursive, sans-serif
}
header {
background-color: #ffd800;
color: black;
height: 119px;
width: 100%;
margin: -20px -10px;
min-width: 800px;
position: fixed;
margin: -20px -10px;
text-align: center;
}
.logo {
float:left;
width: 118px;
height: 118px;
margin-right: 50px;
}
header h2 {
min-width: 800px;
}
nav ul {
background-color: #ffd800;
text-align:center;
list-style: none;
width: 800px;
margin: 0 auto 0 auto;
}
nav li {
display: inline;
}
nav a {
display: inline-block;
padding: 0 30px;
text-decoration: none;
}
nav a:hover {
color: white;
}
section {
width: 800px;
margin: 0 auto 0 auto;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 0 40px 5px 40px
}
section h3 {
text-align: center;
}
.clear {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Chris Atkinson</title>
<link rel="stylesheet" type="text/css" href="resources/css/styles.css">
</head>
<body>
<header>
<img class="logo" src="resources/img/chris.gif" alt="logo">
<br>
<h2>Web Design by Chris Atkinson</h2>
<nav>
<ul>
<li>home</li>
<li>projects</li>
<li>blog</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
</header>
<section>
<br>
<br>
<br>
<br>
<h3>Welcome to my site</h3>
<p>Please take a good look around, and send me some feedback in
the 'contact' section. I'd love to hear from you</p>
</section>
</body>
</html>
Change these css properties and you should be able to get rid of all the breaks:
section {
width: 800px;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 100px 40px 5px 40px
}
.logo {
position: absolute;
width: 118px;
height: 118px;
z-index: 20;
}
No need to float left on the logo if you are doing an absolute position. Also, you you want to add top padding (the first value in the padding property) of your section to shift it down below the nav.
http://jsbin.com/woyilesoka/2/edit?html,css,output
You need to break your logo away from your other stuff. Make your logo position: absolute; and create a z-index greater than the divs below it. This way it's above your other divs, and not included in the divs. This will keep the rest of your stuff centered.
Directions:
.logo {
position: absolute;
z-index : 9000;
float:left;
width: 118px;
height: 118px;
}
then move the logo left.
You can make your logo position absolute so that the float of other elements do not interfere with your logo:
.logo {
position: absolute;
width: 118px;
height: 118px;
margin-right: 50px;
}
This is how your make your section below the nav bar by changing margin on the top of the section:
section {
margin: 2opx auto 0 auto;
width: 800px;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 0 40px 5px 40px;
}
Related
Hello I want to try get this title to be in the centre. as shown here it just does not go to the centre and its really annoying me.
screenshot of issue: https://i.imgur.com/tJhbKS1.jpg
If there is anyway in which you can also make this better that would be great. My goal is eventually to maker the centre box stretch 100% of the screen down
My main focus for this post is to make the text in the centre body box to basically have the title test to be in the centre and then the
test to be underneath a little bit in the centre so when I write it will be in the centre and when it reaches the end of the box it will make a new line/.
I also want it so the box is fixed to where it is and it doesn't ever move.
* /*Main Navbar (at top) */ .navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: darkgrey;
border-bottom: 0.05px solid black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: #a0a0a0;
border-bottom: 0.05px solid black;
border: 0.05px solid black;
}
/*The body in the center of website */
.body-container {
height: 100%;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.menu {
padding: 20px;
display: flex;
margin-left: auto;
margin-right: auto;
width: auto;
background-color: darkgrey;
text-decoration-color: black;
}
.body-container .menu .title {
margin-left: auto;
margin-right: auto;
text-align: center;
padding-left: 50%;
}
.body-container .body-text {
text-align: center;
margin-top:10%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/header.css">
<link rel="stylesheet" type="text/css" href="./css/site.css">
</head>
<body>
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li style="float: right; ">Login</li>
</ul>
<div class="body-container">
<div class="menu">
<div class="title">
<h1>test</h1>
</div>
<div class="body-text">
<p>test </p>
</div>
</div>
</div>
</body>
</html>
Remove padding-left:50%; in .body-container .menu .title to center your headline. Furthermore, you used display:flex, this will occur that the subline doesn't get centered.
Have a look into this Codepen.
https://codepen.io/dmnktoe/pen/wOyxor
(Update: I would recommend you, not to use an absolute position for your element, since it isn't very responsive.)
I tried this and worked:
.body-container .menu .title {
margin-left: auto;
margin-right: auto;
text-align: center;
.body-container .body-text {
text-align: center;
margin: auto;
display: block;
position: absolute;
top: 115px;
left: 315px;
I always use margin: 0 auto; and it works almost all the times
I am making a website for my family and I am stuck on how to make the menu stay at a specific place. I want it under the picture so it looks better. Also when I am resizing the browser the menu appears in a different place and the picture resizes also, I don't know how to fix that. Here is my code so far.
<!DOCTYPE html>
<head>
<title>King Buffet</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<img src="images/LOGO.png" />
</head>
<body>
<ul>Menu</ul>
<ul>Map</ul>
<ul>Contact</ul>
<ul>Order Now</ul>
</body>
body {
background: #db2811;
margin: 0 auto;
padding: 2em 2em 4em;
max-width: 500px;
box-shadow: 0 0 2px rgba(0,0)
}
img {
width: 50%;
height: auto;
position: fixed;
top: 15%;
left: 25%;
}
ul {
color: #fff200;
font-size: 20px;
font-weight: 600;
display: inline-block;
}
Try this code
body {
background: #db2811;
margin: 0 auto;
padding: 2em 2em 4em;
max-width: 500px;
box-shadow: 0 0 2px rgba(0,0)
}
img {
width: 100%;
}
div.wrapper {
width: 50%;
height: auto;
position: fixed;
top: 15%;
left: 25%;
}
ul {
display: block;
position: absolute;
bottom: 0;
}
ul li {
color: #fff200;
font-size: 20px;
font-weight: 600;
display: inline-block;
list-style: none;
}
<div class="wrapper">
<img src="http://www.logoopenstock.com/media/users/379/777/raw/e6d45448a69242d3c681de28cdd9b470-logo-design-download-free-psd-file.jpg" clas="logo"/>
<ul class="menu">
<li>Menu</li>
<li>Map</li>
<li>Contact</li>
<li>Order Now</li>
</ul>
</div>
I'm struggling with this project I'm doing for practice. I'm having trouble with the innovation cloud project. Please explain me how to fix this.
I can't manage to get the "Learn More" button to be below the paragraph in the header section.
I can't manage to get the image in the main section to float left of the Header and paragraph.
I also can't manage the jumbotron DIV to appear below main. The image fuses with main, it doesn't appear below it where it should be.
Here is the pen for a visual: http://codepen.io/alejoj/pen/xGBbwv
Thanks for your help.
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.container {
margin: 0 auto;
max-width: 940px;
padding: 0 10px;
}
/* Header */
.header {
height: 800px;
text-align: center;
background-image: url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg');
background-size: cover;
}
.header .container {
position: relative;
top: 200px;
}
.header h1 {
font-size: 80px;
line-height: 100px;
margin-top: 0;
margin-bottom: 80px;
color: white;
}
#media (min-width:850px) {
.header h1 {
font-size: 120px;
}
}
.header p {
font-weight: 500;
letter-spacing: 8px;
margin-bottom: 40px;
margin-top: 0;
color: white;
}
.btn{
width: 30%;
height: 40px;
border: none;
margin: 25px auto 0 auto;
font-family: 'Roboto', sans-serif;
font-size: 15px;
background-color: black;
color: white;
}
.btn:hover {
background: #117bff;
cursor: pointer;
transition: background .5s;
}
/* Nav */
.nav{
background-color: black;
}
.nav ul {
display: table;
list-style: none;
margin: 0 auto;
padding: 30px 0;
text-align: center;
}
.nav li{
display: cell;
vertical-align: middle;
float: left;
padding-left: 10px;
color: white;
font-family: 'Roboto', sans-serif;
}
/* Main */
.main .container {
margin: 80px auto;
}
.main h2, p{
display: inline-block;
float: left;
}
.main img{
height: 150px;
width: 35%%;
margin: 50px -5px 50px 0px;
display: inline-block;
float: left;
}
/* Jumbotron */
.jumbotron {
margin: 10px 0;
height: 600px;
text-align: right;
background-image:url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/jumbotron_bg.jpg');
}
.jumbotron .container {
position: relative;
top: 220px;
}
/* Footer */
.footer {
font-size: 14px;
}
/* Media Queries */
#media (max-width: 500px) {
.header h1 {
font-size: 50px;
line-height: 64px;
}
.clearfix{
clear: both;
}
.main, .jumbotron {
padding: 0 30px;
}
.main img {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="header">
<div class="container">
<h1> INNOVATION CLOUD </h1>
<p>CONNECT YOUR IDEAS GLOBALLY</p>
<input class="btn" type="button" value="Learn More">
</div>
</div>
<div class="nav">
<div class="container">
<ul>
<li>Register</li>
<li>Schedule</li>
<li>Sponsors</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="main">
<div class="container">
<img id="mainImage" src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" />
<h2>The Innovation Cloud Conference</h2>
<p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
<p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
<p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
</div>
</div>
<div class="clreafix"></div>
<div class="jumbotron">
<div class="container">
</div>
</div>
</body>
</html>
Not entirely sure about your desired outcome, but it seems that this css was throwing off a lot of what you want to fix:
.main h2, p {
display: inline-block;
float: left;
}
If you remove that and change the right margin on your image from -5 to 50 it looks pretty good like this: http://codepen.io/anon/pen/BNbyEP
Floating elements can really throw off your layout if you don't "clear" the floats. Sometimes I add a br style="clear:both" after floated elements to keep the flow looking as expected (in the case of not seeing your jumbotron image where it should be)
You have your p set to inline-block. Remove this:
.main h2, p {
display: inline-block;
float: left;
}
You have negative right margin on your image. Change this:
margin: 50px -5px 50px 0px;
to:
margin: 50px 50px 50px 0px;
Not sure what you mean.
Here is my relevant css (just the phone version. the difference from the computer version is the "(max-width : 1223px)" turns into "(min-width : 1224px)"):
* {
margin: 0;
padding: 0;
}
body {
background: #f5f5f5;
font-family: 'Open Sans', sans-serif;
height: 100%;
margin: 0 0 100px; /* bottom = footer height */
}
html {
position: relative;
min-height: 100%;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: blue;
}
section {
background: #fff;
box-shadow: 0px 2px 2px #ebebeb;
}
header {
width: 100%;
margin: 0 auto;
text-align: center;
position: relative;
}
nav li {
display: inline-block;
/*padding: 40px 30px 37px 30px;*/
padding-top: 3%;
padding-right: 2%;
padding-bottom: 3%;
padding-left: 2%;
}
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (max-width : 1223px) {
.logo {
/*background: url(logo.png) 50% 0 no-repeat;*/
background: url(http://i48.tinypic.com/2mob6nb.png);
background-size: 140px 59px;
width: 140px;
height: 59px;
position: absolute;
top: 2%;
/* left: 405px; */
left: 38%;
}
nav li:nth-child(2) {
padding-right: 10%;
}
nav li:nth-child(3) {
padding-left: 10%;
}
}
/* Desktops and laptops ----------- */
#media only screen and (min-width : 1224px) {
.logo {
/*background: url(logo.png) 50% 0 no-repeat;*/
background: url(http://i48.tinypic.com/2mob6nb.png);
background-size: 140px 59px;
width: 140px;
height: 59px;
position: absolute;
top: 20%;
/* left: 405px; */
left: 44%;
}
nav li:nth-child(2) {
padding-right: 10%;
}
nav li:nth-child(3) {
padding-left: 10%;
}
}
#sectionLeft {
width: 48%;
float: left;
padding: 5px;
}
#section {
width: 48%;
float: right;
padding: 5px;
}
#sectionLeft h2, #section h2 {
text-align: center;
}
#wrap {
width: 100%;
margin: 0 auto;
}
#newsSection {
background: #fff;
box-shadow: 0px 2px 2px #ebebeb;
text-align: center;
margin: 0px 0px 10px 0px;
}
#newsText {
font-size: 12px;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 2.5%;
width: 100%;
text-align: center;
background-color: #fff;
-webkit-box-shadow: 0px -2px 2px 0px #ebebeb;
-moz-box-shadow: 0px -2px 2px 0px #ebebeb;
box-shadow: 0px -2px 2px 0px #ebebeb;
bottom: 0;
}
#footerText {
font-size: 10px;
}
and the html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aversion Gaming</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans'
rel='stylesheet' type='text/css'>
<link href='css/style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<header>
<nav>
<ul>
<li>Home</li>
<li>Teams</li>
<li>Contact</li>
<li>Sponsors</li>
</ul>
</nav>
<div class="logo"></div>
</header>
</section>
<div id="wrap">
<div id="sectionLeft">
<h2>News</h2>
<section id="newsSection">
<h3>Test news post</h3>
<p id="newsText">This is just a test news post.</p>
<a style="font-size: 12px;" href="#">Read More...</a>
</section>
<section id="newsSection">
<h3>Finally, a website!</h3>
<p id="newsText">We have finally created a website thanks to
#AversionRastro!</p>
<a style="font-size: 12px;" href="#">Read More...</a>
</section>
</div>
<div id="section">
<h2>About</h2>
<section id="newsSection">
<p id="newsText">
<b>Aversion Gaming</b> is a newly founded gaming organization.
</p>
</section>
</div>
</div>
<footer>
<p id="footerText">Copyright 2014 Aversion Gaming. Designed and
coded by Robert Trainor.</p>
</footer>
</body>
</html>
When I load the page on my Windows 7 laptop, it shows the logo (got it from another post, so its just an example) and all of the formatting code in the #media works.
When I pin the browser to a side on the same computer, the code for the smaller window size doesn't kick in.
The logo never shows and the formatting for the 2nd and 3rd list items don't get their padding.
If there is something I'm missing or doing wrong here, please tell me.
I have checked your code and on my macbook with safari it works just fine (meaning in my browser the source code kicks in correctly by scaling down/up).
Have you checked if the code kicks in (so does it show up in your source code), or does it only not look as you wish?
You want to add the padding to the navigation to add additional white space next to the logo I guess, so that it looks a little bit more tidied up? If so my suggestions:
Currently your logo is not centered in mobile version. Thats the first point to make a little adjustment:
.logo {
background: url(http://i48.tinypic.com/2mob6nb.png);
background-size: 140px 59px;
width: 140px;
height: 59px;
position: absolute;
top: 2%;
left: 50%; /* center the left side of the logo */
margin-left: -70px; /* go half of the logos width backwards, so that the logos center is centered */
}
Then your <li>s receive the additional padding, but they are centered as text, not as "blocks". You can't the same amount of white space on the left and on the right side. To achieve this the next adjustment would be to add a widthto your <li>s like so:
nav li {
display: inline-block;
padding: 3% 2%;
width: 50px; /* change this to whatever you want in px or % */
}
The difference looks like this (first before, then after):
Does this fix your problem? If not feel free to correct my understanding of your question or let me know, if you need further information.
Best regards,
Marian.
I'm having some trouble with a fixed nav bar at the top of my page. It's supposed to be flush with the top of the page, but isn't. Here's my HTML:
<nav>
<a href="#">
<div id="logo">
lorem
</div></a>
</nav>
<ul>
*enough li's to go past the bottom of the screen*
</ul>
and my CSS:
body {
margin: 0px;
padding: 0px;
}
nav {
position: fixed;
display: block;
color: white;
margin: 0 auto;
padding: 0;
width: 100%;
height: 60px;
background-color: #4d4d4d;
}
#logo {
padding-left: 1%;
padding-right: 1%;
color: #75cc83;
width: 180px;
height: 100%;
background-color: #333333;
font-size: 3em;
font-family: candara, sans-serif;
}
It seems like there are only problems with the fixed nav once I put content in there (the list items, in this case)
Add top:0 to you nav's rules:
nav {
position: fixed;
display: block;
color: white;
margin: 0 auto;
padding: 0;
width: 100%;
height: 60px;
background-color: #4d4d4d;
top:0;
}
jsFiddle example