I would like to reword this:
I would like to create a white background header with no hover (currently it is white), a full-width yellow box underneath which does not span the height of the screen, possibly expands when I add to it? A small white text box inside, and an image to the right-hand side of this.
So far I have:
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="header">
<a class="logo" target="_blank"><img src=".\images\logo.png" border="0" alt="logo" width="90"></a>
<div class="header-left">
<a class="active" href="index.html">Home</a>
Wall
Shop
Blog
FAQ
<div class="header-right">
<a class="active" href="http://instagram.com/woolybox" target="_blank"><img src=".\images\instagram.png" border="0" alt="instagram"img width="20" height="20"></a>
<img src=".\images\twitter.png" border="0" alt="twitter" img width="20" height="20">
</div>
</div>
<table><tr><td>
Hello
</td></tr></table>
</body>
CSS:
html, body {
height: 100%;
min-height: 100%;
border-width: 0;
border-style: solid;
border: #fff;
}
table {
height: 100%;
width: 100%;
background-color: #f4d442;
}
td {
height: 100%;
width: 100%;
vertical-align: middle;
text-align: left;}
.header {
overflow: hidden;
background-color: #ffffff;
padding: 20px 30px;
}
.header a {
float: left;
color: grey;
text-align: center;
background-color: #fff;
padding-top: 16px;
padding: 24px;
text-decoration: none;
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
padding-top: 4px;
font-weight: bold;
}
.header a:hover {
background-color: #fff;
color: black;
}
.header a.active {
background-color: #fff;
color: #f4d442;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
background-color: #fff;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
My outcome ends up as a thin yellow box like so:
Problem
I am following this mockup I have made using Adobe XD and MDL components. Again, I am extremely out of practice and trying to understand a lot of new things.
MockUp
Does this help? Set the body height and whatnot to 100%. Then play with the inner height relative %s.
<html>
<head>
<style>
html, body { height: 100%; min-height: 100%; border-width: 5; border-style: solid; }
table { height: 100%; width: 100%; }
td { height: 100%; width: 100%; vertical-align: middle; text-align: center;}
</style>
</head>
<body>
<table><tr><td>
Hello
</td></tr></table>
</body>
</html>
Give this a shot....
.boxed {
width: 100vw;
height: 100vh;
box-align: center;
background-color: #f4d442;
padding: 25px;
margin: 0 auto;
The main problem is that your padding and margin are adding extra space around your yellow div. If you right click on your yellow div in the web page and select "Inspect", you'll be able to see the effects of those styles.
Next, if you want the yellow div to be full-screen, you'll need it to take up 100% of its parent container. The parent container must have a defined height, and the grandparent container must have a defined height, etc. all the way up to the highest level: the html tag. In the code snippet below, I've set the yellow div's parent containers' height to make the yellow div full-scren.
html,
body {
height: 100%;
margin: 0 !important;
}
.boxed {
background-color: #f4d442;
height: 100%;
width: 100%;
}
<html>
<body>
<div class="boxed">
</div>
</body>
</html>
Try this:
<div class="boxed">Lorem Epsum</div>
.boxed {width: 100%;box-align: center;background-color: #f4d442;padding: 25px;margin: 0;}
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 am new to HTML and CSS as i am learning these things. I tried to write a very simple code with the help of the above. when i do it in fiddle it shows only the colored bars and when I am trying it in Sublime Text editor then it is showing text ONLY without any colored bars. here is the link to my code
https://jsfiddle.net/recklesswish/aw330go1/
#import url("https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css")
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans';
}
a {
text-decoration: none;
}
div#header {
width: 100%;
height: 50px;
background-color: #FF0000;
margin: 0 auto;
}
.logo {
float: left;
margin-top: 50px;
margin;left:15px;
}
.logo a {
font-size: 1.6em;
color: #fff;
}
.logo a span {
font-weight: 300;
}
div#container {
width:100%;
margin: 0 auto;
}
.sidebar {
width: 250px;
height: 100%;
background-color: #010101;
float: left;
}
<div id="header">
<div class="logo">
Xero<span>Source</span>
</div>
</div>
<div id="container">
<div class="sidebar">
klskdn
</div>
<div class="content"></div>
</div>
As stated above, you need to fix
<linl rel="stylesheet" type="text/css" href="styles/global.css" />
to
<link rel="stylesheet" type="text/css" href="styles/global.css" />
and fix your CSS markup in regards to
.logo {
float: left;
margin-top: 50px;
margin;left:15px;
}
to
.logo {
float: left;
margin-top: 50px;
margin-left:15px;
}
Next, the reason why you are not seeing any text and just a color bar for .sidebar is because the text is black. You need to add in the color property for that class or move it using margin.
.sidebar {
width: 250px;
height: 100%;
background-color: #010101;
float: left;
color:#fff; /* change to whatever you want */
}
As a first point you have an error:
.logo {
float: left;
margin-top: 50px;
margin;left:15px;
}
should be
.logo {
float: left;
margin-top: 50px;
margin-left:15px;
}
You're ending your line too early with the ; typo and likely messing up the rest of your document. jsFiddle is probably overlooking this error. Try changing it and loading it locally and seeing if it fixes it.
First you need to make sure the HTML links to your CSS, current spelling mistake on 'linl rel' needs to be 'link rel'
Second you need to change the colour of the text on the .logo a class in global.css, change to #000; and you will see the text, it is also worth adding a p tag around the random text in the container div and add a p tag to the css changing the color to white (#fff;) and you will get that text to display.
<head>
<style>
#import url("https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css")
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans';
color:green;
}
a {
text-decoration: none;
}
div#header {
width: 100%;
height: 50px;
background-color: #FF0000;
margin: 0 auto;
}
.logo a {
font-size: 1.6em;
color: blue;
}
.logo a span {
font-weight: 300;
}
div#container {
width:100%;
margin: 0 auto;
}
.sidebar {
width: 250px;
height: 100%;
background-color: #010101;
float: left;
}
</style>
</head>
<body>
<div id="header">
<div class="logo">
Xero<span>Source</span>
</div>
</div>
<div id="container">
<div class="sidebar">
klskdn
</div>
<div class="content"></div>
</div>
</body>
try this in local
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.
I am creating a web page with 2 <div>s side by side. Each <div> will have 2 sections.
I want to center them (bring them to the middle of the <div>). I am trying to make this <div> responsive. In the website, 2 <div>s will be in one line, while in mobile one <div> will appear on one line and the other <div> will appear on a second line. I am trying to center the image and text of each section.
How can I accomplish that?
.wrapper {
width: 100%;
overflow: hidden;
}
.wrapper div {
min-height: 45px;
padding: 1px;
}
#one {
background-color: gray;
float: left;
width: 50%;
}
#two {
background-color: red;
overflow: hidden;
min-height: 45px;
}
#media screen and (max-width: 400px) {
#one {
float: none;
margin-right: 0;
width: auto;
border: 0;
}
}
<div class="wrapper">
<div id="one">
<img src="http://livebodybuilding.com/images/fast-delivery.png" height="26" width="55" style="float:left; margin-top: 6px;" />
<p style=" font-size:13px; color:#fff; line-height:1.5; font-family: 'Montserrat',sans-serif;"><strong> FREE DELIVERY </strong>ORDERS OVER $100</p>
</div>
<div id="two">
<img src="http://livebodybuilding.com/images/free-gift.png" height="26" width="31" style="float:left; margin-top: 6px;" />
<p style="font-size:13px; color:#fff; line-height:1.5; font-family: 'Montserrat',sans-serif;"><strong> FREE GIFT</strong> ORDERS OVER $100</p>
</div>
</div>
My fiddle: https://jsfiddle.net/4okxw32v/
First of all, the use of floats in layout design is discouraged. It is generally not a good way of doing things, and usually if you're having a layout issue it comes down to a float problem. Instead you should use the display: inline-block setting. When using inline-block there are a couple of things to take into consideration.
Any white space between elements will be shown. To combat this you can set font-size: 0 on the wrapper and then set font-size: 1rem on the children. This will set the font size in the content to the same size as that of the html selector.
You can prevent line-breaking if you set white-space: nowrap on the parent and then set white-space: initial on the children.
Next instead of adding an image and floating it inside the child you can use the css pseudo element ::before (or css2 :before) on the text container inside the element.
Finally to center the contents use text-align: center on the parent
*, *::before, *::after {
box-sizing: border-box;
}
html,
body {
padding: 0px;
margin: 0px;
}
.wrapper {
font-size: 0;
}
.wrapper div {
font-size: 1rem;
min-height: 45px;
padding: 1px;
text-align: center;
font-size: 13px;
color: #fff;
line-height: 1.5;
font-family: 'Montserrat', sans-serif;
overflow: hidden;
display: inline-block;
width: 50%;
}
#one {
background-color: gray;
}
#one p:before {
content: "";
display: inline-block;
width: 4em;
height: 2em;
background-image: url(http://livebodybuilding.com/images/fast-delivery.png);
background-size: cover;
vertical-align: middle;
margin-right: 5px;
}
#two {
background-color: red;
overflow: hidden;
min-height: 45px;
}
#two p:before {
content: "";
display: inline-block;
width: 2.5em;
height: 2em;
background-image: url(http://livebodybuilding.com/images/free-gift.png);
background-size: cover;
vertical-align: middle;
margin-right: 5px;
}
#media screen and (max-width: 620px) {
.wrapper div {
width: 100%;
}
}
<div class="wrapper">
<div id="one">
<p><strong>FREE DELIVERY</strong> ORDERS OVER $100</p>
</div>
<div id="two">
<p><strong>FREE GIFT</strong> ORDERS OVER $100</p>
</div>
</div>
I've got some CSS and HTML that I'm working on, I wanted to sub out the content that is a div block for an image and keep the border with rounded edges with it. But the image isn't showing up when I preview the code. The CSS and HTML are linked correctly. Admittedly, this is just me tinkering to learn more about both CSS and HTML.
If you could look at this and give me some insight of how to get the image to show up in the rounded box, I would appreciate it.
EDIT: I'm afraid I wasn't entirely clear enough on what the issue was. The image in the title tag and that is associated with the "a.title" css code isn't the issue, that's just a header image.
The issue is that I want an image to appear in the div class="content" portion of the HTML with the image source coming from the CSS portion that is div.content.
I'm pretty bad at explaining my questions/problems, sorry. But thank you for all of your help thus far!
HTML:
<html>
<head>
<title>Some Title</title>
<link href="/Volumes/lastname/sitename/css/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="container">
<p class="title"><img src="/Volumes/last/sitename/media/header3.png"></img></p>
<div class="navbar">
<a class="nav" href="http://www.facebook.com">Facebook</a>
<a class="nav" href="http://www.twitter.com">Twitter</a>
</div>
<div class="content">
</div>
</div>
</body>
</html>
Here's the CSS - I know its more of the code than you need to know but here any way:
body {
background: #ffffff
width: 1000px;
height: 800px;
margin: 0 auto;
font-family: "Arial";
}
#container {
width: 900px;
height: 800px;
margin: 0 auto;
}
div.content {
background-image: url('/Volumes/last/sitename/media/imagename.jpg') no-repeat;
border-style: solid;
border-width: 2px;
width: 900px;
height: 500px;
margin-top: -20px;
border-radius: 7px;
border-color: #a0a0a0;
}
a.title {
margin-top:120px;
font-size: 36px;
}
div.navbar {
margin-top: -62px;
float: right;
font-size: 18px;
}
a.nav {
text-decoration: none;
color: #717171;
padding-right: 20px;
}
a.nav:hover {
color: #1299d6;
}
div.text {
margin-top: 100px;
}
p.text1 {
display: block;
text-align: center;
}
p.text2 {
display: block;
text-align: center;
}
p.text3 {
display: block;
text-align: center;
}
p.text4 {
display: block;
text-align: center;
}
div.links {
margin-top: 50px;
text-align: center;
}
a.links {
text-decoration: none;
color: #ffffff;
padding-left: 10px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
border-radius: 10px;
opacity: 0.6;
}
a.twitter {
background: #42a300;
}
a.contact{
background: #1299d6;
}
a.subbutton{
background: #690260;
}
a.links:hover {
opacity: 1.0;
}
First of all your image tag is wrong. It must be
<img src="/Volumes/last/sitename/media/header3.png" />
http://jsfiddle.net/vBRBM/
Test the code.
You should take the image out of the div and just make a rule for the class.
p.title {
background-image: url('/Volumes/last/sitename/media/imagename.jpg') no-repeat right top;
border-style: solid;
border-width: 2px;
width: 900px;
height: 500px;
margin-top: -20px;
border-radius: 7px;
border-color: #a0a0a0;
}
I suspect it could have something to do with the URL. maybe try the .. notation? It depends on where the picture is in relation to all your other files.
body
{
background-image:url(' *CHANGE THIS* ');
background-repeat:no-repeat;
background-position:right top;
border-style: solid;
border-width: 2px;
width: 900px;
height: 500px;
margin-top: -20px;
border-radius: 7px;
border-color: #a0a0a0;
}
img tags don't have anything in them so they don't need a separate closing tag. End it in the same tag by adding the slash on the end /> like
<img src="/Volumes/last/sitename/media/imagename.jpg" />