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>
Related
I am trying to make a footer for a div element, with a <p> tag, however, depending on the font size, the footer would be outside of the box.
How can I make it align at the bottom of the page, with correct padding?
Here's the HTML & CSS file:
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body {
background-color: #202020;
font-family: 'Montserrat', sans-serif;
color: #ffffff;
}
#list {
width: 70%;
height: 250px;
padding: 10px;
overflow: auto;
background-color: #303030;
color: white;
}
.currency {
background-color: #202020;
height: 20%;
color: white;
}
.currency-flag {
float: left;
padding: 5px;
}
.currency-name {
text-align: left;
font-size: 120%;
/* padding-top: 5px; */
}
.currency-value {
text-align: left;
font-size: 50%;
}
<center>
<div id="list">
<div class="currency">
<img class="currency-flag" src="flags/eur.svg"></img>
<p class="currency-name">European Euro</p>
<p class="currency-value">1 R$ = 2 EUR</p>
</div>
</div>
</center>
The problem is that you have set fixed height to .currency insted of height:20% use height:auto;
.currency {
background-color: #202020;
height: auto;
color: white;
}
to fixed it at botton use positions like
#list {
width: 70%;
height: 250px;
padding: 10px;
overflow: auto;
background-color: #303030;
color: white;
position: absolute;
bottom: 0;
}
.currency {
background-color: #202020;
height: auto;
color: white;
}
Set the height property to auto instead of fixing it it will make your p tag inside the div
One suggestion :- Do not use the center dag as its outdated instead try to do similar thing with css property of text-align center
I have 3 main sections to the site I'm practising on: Nav, Header and Section.
My header bar contains an image with some text in the middle, I spent a long time trying to find how to allow the image to accept the text on top of it and then have it go straight in to the centre(both vertically and horizontally) of the img.
I found something that worked, but after finding that solution, my Section decided to also go on top of the image, which I'm certain it is because of the position: absolute; on the image.
The help I need; how do I get the section to go under the header, with keeping the piece of text on top of the image and in the centre of it?
* {
box-sizing: border-box
}
body {
margin: 0px;
padding: 0px;
background-color: #f2f2f2;
}
html {
margin: 0px;
padding: 0px;
}
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: "Open Sans", arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
nav {
margin-bottom: 0;
}
header {
margin-top: 0;
margin-bottom: 10px;
width: 100%;
height: auto;
text-align: center;
display: table;
font-family: arial;
font-size: 18px;
color: orange;
}
h1 {
margin: 0;
padding: 0;
vertical-align: middle;
display: table-cell;
}
#bannerImage {
height: 500px;
width: 100%;
position: absolute;
z-index: -1;
}
section {
background-color: white;
font-family: arial;
width: 100%;
border: 1px solid #e7e7e7;
text-align: center;
}
<nav>
<ul>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif" />
<li>Game 1
</li>
<li>Game 2
</li>
<li>Game 3
</li>
</ul>
</nav>
<header>
<img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png" />
<h1>Codewarts</h1>
</header>
<section>
<h2>Welcome!</h2>
<div id="content">
<p>Do you have a name?.....Great!</p>
<p>Insert it in the box below!</p>
</div>
</section>
Do You want somenthing like this?
header {
position: relative;
}
header h1 {
top: 50%;
left: 50%;
transform: translate(-50%,-50% )}
Looking for a little help with a project, I am trying to get a nav bar centered inside a header with a logo on the left.
HTML
<header>
<img src="http://s32.postimg.org/5bebu6mbl/Image_5_8_16_at_12_10_PM.jpgHome" />
<div id="nav">
<span>Home</span>
<span><button>Televeisions</button></span>
<span>Electronics</span>
<span>Services</span>
</div>
</header>
CSS
header {
height: 5.5em;
background: gray;
color: Black;
text-align: justify;
}
#nav {
width: 100%;
text-align: center;
}
#nav span a {
color: black;
text-decoration: none;
padding: 10px;
}
JSFiddle
Your nav width 100% is forcing the nav below the image. I added overflow: hidden to the header, floated the img left, and put a margin-top on the #nav.
Adjust your CSS to something like this:
header {
height: 5.5em;
background: gray;
color: Black;
text-align: justify;
overflow: hidden;
}
img {
float: left;
}
#nav {
width: 600px;
text-align: center;
margin-top: 2.5em;
}
#nav span a {
color: black;
text-decoration: none;
padding: 10px;
}
You can adjust the margin, etc. to style how you want from there on out.
Codepen: http://codepen.io/Tambe257/pen/XdGdLZ
Use positioning on your parent element and your child elements that will be nested inside. Here's a quick example
header {
height: 5.5em;
background: gray;
color: Black;
text-align: justify;
position:relative;
}
#nav {
width: 100%;
text-align: center;
top:2em;
position:absolute;
}
#nav span a {
color: black;
text-decoration: none;
padding: 10px;
}
Hey I want to make a website with a frontpage just like this one: http://foreword.io/ .
I need help with the horizontal list to get it just like the one on foreword.io.
I want the yellow area to be stretched all the way to the sides. When I hover over a link it only marks the upper part of the square, so I want it to mark the whole square for each link.
Please help and thanks in advance.
Here is my code:
body {
font-family: Times New Roman;
}
.h1 {
position: absolute;
height: 200px;
top: 90px;
width: 1585px;
text-align: center;
font-size: 350%;
font-family: Times New Roman, Georgia;
}
u {
text-decoration: none;
border-bottom: 5px solid black;
}
.fakta {
position: absolute;
height: 190px;
top: 340px;
width: 700px;
left: 500px;
font-size: 50px;
}
ul {
position: absolute;
height: 100px;
top: 600px;
left: 100px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: yellow;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 20px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: white;
}
<div class="h1">
<h1>
<u>DatabaseNavn</u>
</h1>
</div>
<div class="fakta">
<p>Database med ansatte <br> og avdelinger</p>
</div>
<ul>
<li>Side1</li>
<li>Side2</li>
<li>Side3</li>
<li>Side4</li>
<li>Side5</li>
</ul>
You can do this just adding the Height option to "li a" section in the css as below:
li a {
display: block;
color: black;
height: 100px;
text-align: center;
padding: 20px;
text-decoration: none;
font-size:20px;
}
it will set the height of the square so the whole yellow part will change to white.
in the case of the yellow bar size and item positions:
set the width of the ul to 100% so it will use the whole available space on the browser also remove the "left" and finally add 'position:relative', 'left:20%' and 'width:10%; to the li section.
li {
position: relative;
left: 20%;
width: 10%;
float: left;
}
SOURCE: My head :-P
Use display: inline-block; instead of display: block; and you will get an horizontal list.
Weave: http://kodeweave.sourceforge.net/editor/#2b1da7103aeec07f8b53045481c63c77
For something so simple you're using position absolute in places where it's not needed which could be replaced with margin. Thus your code is fairly WET (especially with me being on a tablet right now) So I made a simple mockup that's DRY and can work for RWD as well if you utilize media-queries.
I removed a lot of the unnecessary positioning. By setting the ul tag to text-align center I was able to center the anchors by telling the li tag to be displayed as an inline-block. Then I filled the width using width: 100%; margin: 0; padding: 0;
How this snippet helps.
body {
font-family: Times New Roman;
}
.h1 {
width: 100%;
text-align: center;
font-size: 350%;
font-family: Times New Roman, Georgia;
}
u {
text-decoration: none;
border-bottom: 5px solid black;
}
.fakta {
width: 100%;
font-size: 50px;
text-align: center;
}
ul {
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: yellow;
text-align: center;
}
li {
display: inline-block;
}
li a {
display: block;
color: black;
text-align: center;
padding: 20px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: white;
}
<div class="h1">
<h1>
<u>DatabaseNavn</u>
</h1>
</div>
<div class="fakta">
<p>Database med ansatte og avdelinger</p>
</div>
<ul>
<li>Side1</li>
<li>Side2</li>
<li>Side3</li>
<li>Side4</li>
<li>Side5</li>
</ul>
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.