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.
Related
im getting a white space when im putting text into the div. How to remove that ? i would like to ask you aswell how to make the text "welkom op dennis website" automatic center in the middle of the div.
here you can see the code :
.container {
max-width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
display: inline-block;
}
html,
body {
margin: 0px;
padding: 0px;
}
.nav {
height: 5%;
width: 100%;
background-color: white;
}
.top {
height: 40%;
width: 100%;
background-color: #1E90FF;
}
.nav {
background-color: #444;
}
.nav a {
display: inline-block;
background-color: #444;
font-family: Arial;
padding: 10px 20px;
text-decoration: none;
color: white;
float: right;
}
.nav a:hover {
background-color: #1E90FF;
}
.logo {
color: white;
display: inline-block;
padding: 10px 20px;
font-family: Arial;
text-decoration: none;
}
p.center {
padding: 150px 550px;
color: white;
font-family: Arial;
font-size: 25px;
{}
<header>
<title>Dennis Zwart Home Pagina</title>
<link href="css/MyStyle.css" rel="stylesheet" style="css" />
</header>
<body>
<div class="container">
<div class="nav">
<text class="logo">Dennis Zwart</text>
Contact
Games
Foto's
Hobby's
Home
</div>
<div class="top">
<p class="center">Welkom op de website van Dennis Zwart</p>
</div>
</div>
</body>
The space between your navigation and blue text field is from collapsing margins. You'll need to remove the margins created by your <p> element in .top, more on Collapsing Margins.
If you need the text vertically centered as well, you can use relative positioning and translate.
Other Notes
<text> is not a valid HTML element, use <p>, <span>, <div>, <a> etc. instead. I switched it to an <a> in my answer.
I see that you're using percentage heights. Those can be tricky. In order for percentage heights to work a height has to be set on the parent element. If that parent element's height is a percentage, then it's parent needs a height set. So on and so forth all the way to the root element <html> if percentages are used. In my answer I switch the heights to px values.
A number of block level elements (<div>, <nav>) had width: 100%; applied to them, I removed them as they're not needed. A block level element will always take up 100% width of it's containing element by default.
To vertically center your navigation items I set the line-height of the <a> elements equal to the height of the <nav> element.
I removed your .container element as it wasn't doing anything useful. You might need it later (likely in a different location) if you decide to add media queries and limit it's width for various viewport sizes.
html,
body {
margin: 0px;
padding: 0px;
}
.nav {
height: 45px;
background-color: white;
}
.top {
height: 300px;
background-color: #1E90FF;
}
.nav {
background-color: #444;
}
.nav .logo {
float: left;
}
.nav a {
display: inline-block;
background-color: #444;
font-family: Arial;
padding: 0 20px;
text-decoration: none;
line-height: 45px;
color: white;
float: right;
}
.nav a:hover {
background-color: #1E90FF;
}
p.center {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0;
color: white;
font-family: Arial;
font-size: 25px;
text-align: center;
}
<header>
<title>Dennis Zwart Home Pagina</title>
<link href="css/MyStyle.css" rel="stylesheet" style="css" />
</header>
<body>
<div class="nav">
<a class="logo" href="#">Dennis Zwart</a>
Contact
Games
Foto's
Hobby's
Home
</div>
<div class="top">
<p class="center">Welkom op de website van Dennis Zwart</p>
</div>
</body>
This is because p element has natural margins (defined by browser). Remove it:
p {
margin-top: 0;
}
Then remove the p horizontal padding and center your text with
text-align: center;
In order to remove the blank area on the right side of the screen.
p {
margin-top: 0;
text-align: center;
}
.container {
max-width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
display: inline-block;
}
html,
body {
margin: 0px;
padding: 0px;
}
.nav {
height: 5%;
width: 100%;
background-color: white;
}
.top {
height: 40%;
width: 100%;
background-color: #1E90FF;
}
.nav {
background-color: #444;
}
.nav a {
display: inline-block;
background-color: #444;
font-family: Arial;
padding: 10px 20px;
text-decoration: none;
color: white;
float: right;
}
.nav a:hover {
background-color: #1E90FF;
}
.logo {
color: white;
display: inline-block;
padding: 10px 20px;
font-family: Arial;
text-decoration: none;
}
p.center {
padding: 150px 0px;
color: white;
font-family: Arial;
font-size: 25px;
}
<header>
<title>Dennis Zwart Home Pagina</title>
<link href="css/MyStyle.css" rel="stylesheet" style="css" />
</header>
<body>
<div class="container">
<div class="nav">
<text class="logo">Dennis Zwart</text>
Contact
Games
Foto's
Hobby's
Home
</div>
<div class="top">
<p class="center">Welkom op de website van Dennis Zwart</p>
</div>
</div>
</body>
I've all of a sudden got a problem trying to display a background-image in CSS.
The image is invisible!
I'm trying to use this background image specifically for a certain location on the page, before scrolling down further to another image or background.
Can anyone shed some light on this situation and possibly provide the correct code/explain why I was wrong?
Thanks in advance!
HTML:
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="main">
<div class="container">
<h1>Move</h1>
<p> Form healthy habits to take your fitness to the next level. </p>
Start Now
</div>
</div>
<div class="supporting">
<div class="container">
<div class="col">
<h2>Move</h2>
<p>Become more active by tracking your runs, rides, and walks.</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="feature">
<div class="container">
</div>
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
}
h1, h2, a {
font-family: 'Oswald', sans-serif;
}
p {
font-family: Helvetica, Arial, sans-serif;
}
.container {
width: 940px;
margin: 0 auto;
}
/* Main */
.main {
background-image: url ("https://yt3.ggpht.com/-QkqvzArFkYs/AAAAAAAAAAI/AAAAAAAAAAA/qw97foQDUbQ/s900-c-k-no/photo.jpg");
height: 600px;
}
.main h1 {
font-size: 150px;
color: white;
text-align: center;
}
.main p {
font-size: 18px;
}
/* Supporting */
.supporting {
text-align: center;
padding: 50px 0 80px;
}
.supporting .col {
float: left;
width: 28%;
padding: 10px;
}
.supporting h1,
.supporting h2 {
color: #ffa800;
font-size: 20px;
margin-bottom: 10px;
}
.clearfix {
clear: both;
}
.supporting p {
color: #efefef;
margin-bottom: 20px;
line-height: 20px;
font-size: 12px;
}
.supporting .btn {
background-color: #eee;
color: #1c1c1c;
font-size: 18px;
padding: 8px 30px;
text-decoration: none;
display: inline-block;
}
/* Feature */
.feature {
height: 600px;
}
.feature h1,
.feature h2 {
color: #fff;
font-size: 40px;
margin: 0;
padding:50px 0 0;
}
/* Footer */
.footer {
height: 600px;
}
.footer h1,
.footer h2 {
color: #fff;
font-size: 40px;
margin: 0 0 20px 0;
padding:50px 0 0;
}
.footer p {
color: #fff;
margin: 0 0 20px 0;
font-size: 18px;
}
#media (min-width:600px) {
.main h1 {
font-size: 200px;
}
.supporting .col {
width: 30%;
}
.supporting h2 {
font-size: 40px;
}
.supporting p {
font-size: 14px;
}
.feature h2 {
font-size: 60px;
}
}
Remove space between url and ( in your CSS.
Copy paste URL in Browser if u can see it then may be add Id to div and hard code inside div, try to modify image size and style using view element in any one of the popular browsers.
Then create css for id and try it again .. Even I m new to Css but it always works ..
Or replace HTTP instead of HTTP.. if u dont have certificate then may be it will not show up ..
Maybe just remove the space in the CSS?
background-image: url("https://yt3.ggpht.com/-QkqvzArFkYs/AAAAAAAAAAI/AAAAAAAAAAA/qw97foQDUbQ/s900-c-k-no/photo.jpg");
I have a project where I need to align certain elements just so. For whatever reason, it's not working. My HTML:
<div class="heading">
<h1>Exotic <strong>Travel</strong></h1>
<div class="left">
<ul>
<li>homepage</li>
<br>
<li>about us</li>
<br>
<li>destinations</li>
<br>
<li>book a ticket</li>
<br>
<li>contact us</li>
</ul>
</div>
<div class="rightimg">
<img src="banner.jpg" alt="Beachside Hotel" />
</div>
<div class="righttext">
<h2>The Perfect Destination</h2>
</div>
</div>
and the CSS:
body {
background-image: url(sky.jpg);
font-family: "Verdana", sans serif;
}
h1 {
font-family: "Calibri Light", sans serif;
color: gray;
}
h2 {
background-color: green;
display: inline-block;
border: 0;
margin: 0;
text-align: center;
width: 750px;
}
a {
color: white;
margin: 4px;
padding: 5px 0 5px 0;
text-decoration: none;
}
.left{
background-color: red;
display: inline-block;
float: left;
height: 200px;
width: 350px;
}
.heading {
background-color: white;
margin: 0 auto;
overflow: auto;
width: 1000px;
}
.righttext {
display: inline-block;
float: right;
height: 60px;
width: 750px;
}
.rightimg {
display: inline-block;
float: right;
margin: 0;
padding: 0;
width: 750px;
}
This SHOULD be working, based on other similar examples I've seen on the site, but it's not taking. Any help here would be appreciated.
I think you are breaking it with your fixed widths, I used 40% width on the left and righttext and that seemed to get everything inline:
.left{
background-color: red;
display: inline-block;
float: left;
height: 200px;
width: 40%;
}
.righttext {
display: inline-block;
float: right;
height: 60px;
width: 40%;
}
https://jsfiddle.net/bkyLojx4/
Also as an fyi br tags are not valid in a ul. Rather use css to handle the styling of the list.
It is because you have the elements at a fixed width which means the combined width of all 3 elements is more than the space available. Try using a percentile widths for adaptive design or adjusting it to the resolution you want to support.
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;
}
I've been meaning to replace the tables in my site with css positioning and have been trying to teach myself through tutorials etc. I've had some early success but it all came crashing down when I tried to create a sidebar. I'm hoping the problem has some kind of simple solution. The relative/absolute positioning of the elements is not going anywhere close to what I wanted to do. My goal is to have a sidebar with images that stack (float?) from top to bottom, with the middle elements being part of an unordered list. I got it to work once but now that stack on top of each other. It has to be the way I am setting the float and the absolute/relative positioning. After reading some articles here I tried adding a div wrapper to put them inside but I think I got myself even more confused. Is it possible someone could nudge me in the right direction? Here is the code:
CSS
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 50px;
padding: 0px;
color: #696969;
height: 160px;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS ----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* PRIMARY LAYOUT ELEMENTS ---------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
top: 0px;
left: 0px;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 0px 4px 4px 4px;
min-height: 420px;
width: 500px;
float: left;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* MISC ----------------------------------------------------------*/
.clear
{
clear: both;
width: 936px;
height: 35px;
}
.title
{
display: block;
float: left;
text-align: justify;
}
.bold
{
font-weight: bold;
}
p.clear
{
clear: both;
height: 0;
margin: 0;
padding: 0;
}
#wrapper
{
position:relative;
height: 500px;
width: 900px;
}
#insidemain
{
position:absolute;
float: left;
width: 500px;
height 180px;
}
/* ---------------- Sidebar Items ---------------------*/
#sidebar /* Sidebar container */
{
position:absolute;
border-top: 1px solid #99CC33;
border-left: 1px solid #99CC33;
height: 300px;
width: 180px;
margin-right: 5px;
padding: 5px 0 0 5px;
}
#sidebarHeader
{
position:absolute;
height: 37px;
width: 172px;
float: left;
background-image: url(../img/TopMenu.jpg);
background-repeat:no-repeat;
}
#sidebarItems ul
{
position:absolute;
height: 27px;
width: 172px;
float:left;
background-image: url(../img/MenuItems.jpg);
background-repeat:no-repeat;
/*left: 6px;
top: 45px;*/
background-position: 0px -27px;
}
#sidebarFooter
{
position:absolute;
height: 46px;
width: 172px;
float:left;
background-image: url(../img/BottomMenu.jpg);
background-repeat:no-repeat;
}
And the HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<link href="Styles/Simple.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div class="header">header
<div class="title">
<h1>
Test Page
</h1>
</div>
</div>
<p class = "clear">clear</p>
<div id="wrapper">
<div id="sidebar">
<div id="sidebarHeader">
</div>
<div id="sidebarItems">
<ul>
<li>test item</li>
</ul>
</div>
<div id="sidebarFooter">
</div>
</div>
</div>
<div id="insidemain">
main
</div>
</div>
<div class="clear">clear</div>
<div class="footer">
<a href="http://www.google.com/">
Blah blah test to see how far this will go across the page blah blha lorem ipsum and various other stuff that is meaningless etc
</a>
</div>
</body>
</html>
Typically (for non-responsive sites especially), you'd have your .wrapper div around the entire content (header, content, sidebar, footer, etc). Then set your .wrappers width. Your .sidebar would have a set width and it would either float: left; or float: right; depending on the side you want it on. Set your .content div's width which would be less than or equal to your .wrapper width - your .sidebar width. Then add your .clearfix below so the .footer falls beneath everything. In most cases (at least for the large page chunks) you can avoid position:absolute; which helps make things more easily fall into place.
You really shouldn't have to float your div's or list. Those are block elements by default and will stack vertically regardless.
Also, as Scrimothy mentioned, you do not want absolutely positioned elements as that will take the element out of the page flow. In other words, they no longer take up "real" space in the page, and instead render at whatever coordinates you position them.
Similarly, floats also take up no space, except with other floated elements. That's why some UI developers will float almost every element on the page and "clear" them using a footer or at key breaks in the page. I personally don't recommend positioning in that fashion, but to each his own.
See if this quick tutorial helps you with some key positioning concepts: HERE
Don't target the same element with both float and position:absolute. It doesn't make much sense. Anywhere where you have float, you should get rid of position:absolute
Next, get rid of those silly class="clear" elements. Instead, target .footer with clear:both and .page with overflow-y:hidden;