I am trying to do a simple website for training purposes, in order to get into some more advanced CSS. However, I am running into an issue, as none of the url() images do show up.
Here is the HTML Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" />
<head>
<title>Mark in Japan</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
</head>
<body>
<div id="wrap">
<header>
<h1>Mark in Japan</h1>
</header>
<nav>
<ul>
<li> <a class="active" title="home" href="#">Home</a></li>
<li><a title="reisenotizen" href="#">Reisenotizen</a></li>
<li><a title="essen" href="#">Essen</a></li>
<li><a title="medien" href="#">Medien</a></li>
<li><a title="japan" href="#">Über Japan</a></li>
</ul>
</nav>
<section>
<article>
<h2>Blog-Überschrift</h2>
<p>Lorem ipsum dolor sit amet...</p>
</article>
</section>
<aside>
<h3>Überschrift Seitenleiste</h3>
<ul>
<li>List Content</li>
<li>List Content</li>
<li>List Content</li>
</ul>
</aside>
<footer>
<p>Copyright ©2016 Mark in Japan, alle Rechte vorbehalten.</p>
</footer>
</div>
</body>
</html>
And here follows the CSS:
body {
margin: 0;
padding: 0;
background: #026dc0 url('../bilder/bg.gif') repeat-x top;
font-family: Helvetica, sans-serif;
line-height: 1.4em;
}
h1, h2, h3, p, ul, li {
margin: 0;
padding: 0;
}
p, h2, h3 {
margin: 0 0 10px 0;
}
ul {
list-style-type: none;
}
#wrap {
margin: 0 auto;
margin-top: 40px;
margin-bottom: 40px;
padding: 10px;
width: 780px;
background: #fff;
border: 10px solid #044375;
}
header {
background: url('../bilder/insel.jpg') no-repeat;
height: 250px;
}
header h1 {
padding: 30px 0 30px 30px;
color: #fff;
background: url('../bilder/dot.png') no-repeat 10px 50%;
font-weight: normal;
letter-spacing: -1px;
}
nav {
margin: 10px 0 0 0;
padding: 10px;
background: #044375;
border-top: 5px solid #033761;
}
nav ul li {
display: inline;
margin: 0 10px 0 10px;
}
nav a {
color: #fff;
}
section {
margin: 10px 0 0 0;
padding: 10px;
float: left;
width: 505px;
}
aside {
margin: 10px 0 0 0;
padding: 10px;
float: right;
width: 225px;
}
aside ul {
margin: 0 0 40px 0;
}
aside h3 {
padding: 5px;
background: #eee;
border-bottom: 2px solid #ddd;
font-weight: normal;
}
footer {
clear: both;
background: #eee;
border-bottom: 2px solid #ddd;
}
I have done all code exactly, as provided in the excercise given to me. I have also ran the code through both CSS and HTML validation. They pass with no error at all, yet the images don't show up.
I have changed the <header> element to a <div> one, assigned an ID and tried moving the images from the folder to the page root, to see if that makes any difference, yet it was without avail.
If you have any suggestions, ideas, etc. I would be very happy.
Thanks in advance.
Adding as an answer with respect to the comment by the OP.
Adding a height and width for empty elements might fix this. Try it out.
Without Dimensions
The elements like <div> and <header> do not take up space, since they are empty and you are using background-image as CSS.
div {background: url("//placehold.it/500x100?text=Hello") center center no-repeat;}
header {background: url("//placehold.it/500x100?text=Hello") center center no-repeat;}
<div></div>
<header></header>
With Dimensions
The elements like <div> and <header> just need a height, as by default, they take up the full width.
div {background: url("//placehold.it/500x100?text=Hello") center center no-repeat; height: 100px;}
header {background: url("//placehold.it/500x100?text=Hello") center center no-repeat; height: 100px;}
<div></div>
<header></header>
This is the same issue that caused your problem.
Related
This question already has answers here:
Remove white space below image [duplicate]
(9 answers)
Image inside div has extra space below the image
(10 answers)
Closed 4 years ago.
I know you guys prefer stackcode, but this is a lot and didn't display properly when I tried that, however, I'll provide the basic context.
Here is the entire thing
And here is the summarized HTML & CSS:
#logoDiv{
}
#jqueryLogo{
height: 60px;
padding: 0;
margin: 0;
}
/*vvv HEADER BELOW vvv*/
#header{
height: 50px;
background-color: #05568D;
border-radius: 10px 10px 0px 0px;
}
#header > ul{
list-style-type: none;
padding: 0px 20px 0px 20px;
margin: 0px;
}
#header > ul > li{
padding: 0px 10px 0px 10px;
color: white;
font-size: 20px;
line-height: 54px;
float: left;
}
<div id="logoDiv">
<img id="jqueryLogo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/JQuery_logo_text.svg/2000px-JQuery_logo_text.svg.png" alt="" >
</div>
<div id="header" class="container">
<ul>
<li>Download</li>
<li>API Documentation</li>
<li>Blog</li>
<li>Plugins</li>
<li>Browser Support</li>
</ul>
</div>
The issue: There is a 7.5px margin between the logo image and the header. I did not set any margins to cause this, and when I inspect the elements, nothing shows up there... but when I encapsulated the logo img with a div, it now shows the space as equalling that div.
How can I get rid of that margin between the header and logo image?
Add just a display block to your image element as below as #Sol commented to your question
#jqueryLogo {
height: 60px;
display: block;
}
Display: block removes all the spaces from all side of your parent element and adjust it as per the actuall height and width of child element.
It is because the image's display style is automatically set to inline
if you set the style on it to be the following, then it will remove that gap.
#jqueryLogo {
display: flex;
height: 60px;
padding: 0;
margin: 0;
}
I'm not exactly sure why the inline property adds that gap, but this should remove it.
https://jsfiddle.net/bg8oad8d/
Here's a fixed issue
body{
background: #0769AD;
margin: 0;
padding: 0;
font-family: 'Teko', sans-serif;
}
.container{
width: 96%;
margin: 0 auto;
}
/*vvv TOPBAR vvv*/
#topbar{
height: 30px;
width: 100%;
background: linear-gradient(#494949, #272727);
}
#leftTopbar{
float: left;
}
#rightTopbar{
float: right;
}
#rightTopbar > ul{
list-style-type: none;
display: inline-block;
font-family: 'Helvetica', sans-serif;
margin: 0;
}
#rightTopbar > ul > li{
color: white;
float: left;
padding: 0px 12px 0px 12px;
height: 30px;
line-height: 30px;
border-left: 1px solid black;
font-size: 14px;
}
#rightTopbar > ul > li:hover{
background-color: #242424;
}
/*vvv LOGO IMAGE vvv*/
#jqueryLogo{
height: 60px;
padding: 0;
margin: 0;
display:table;
}
/*vvv HEADER BELOW vvv*/
#header{
height: 50px;
background-color: #05568D;
border-radius: 10px 10px 0px 0px;
}
#header > ul{
list-style-type: none;
padding: 0px 20px 0px 20px;
margin: 0px;
}
#header > ul > li{
padding: 0px 10px 0px 10px;
color: white;
font-size: 20px;
line-height: 54px;
float: left;
}
#hero{
background-color: white;
border-radius: 0px 0px 10px 10px;
}
#hero-container{
margin: 25px 100px 0px 100px;
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet">
<title>Demo</title>
</head>
<body>
<div id="topbar">
<div id="leftTopbar">
</div>
<div id="rightTopbar">
<ul>
<li>Plugins</li>
<li>Contribute</li>
<li>Events</li>
<li>Support</li>
<li>JS Foundation</li>
<li></li>
</ul>
</div>
</div>
<div id="logoDiv">
<img id="jqueryLogo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/JQuery_logo_text.svg/2000px-JQuery_logo_text.svg.png" alt="" >
</div>
<div id="header" class="container">
<ul>
<li>Download</li>
<li>API Documentation</li>
<li>Blog</li>
<li>Plugins</li>
<li>Browser Support</li>
</ul>
</div>
<div id="hero" class="container">
<div id="hero-container">
<p>This is a lot of text</p>
<p>This is a lot of text</p>
<p>This is a lot of text</p>
<p>This is a lot of text</p>
</div>
</div>
</body>
</html>
Somehow there is this fixed white space between the name "Larry Rosenburg" and the picture below it. No matter how I change the margin, it doesn't affect the distance. Here is a screen shot screenshot!
How can i shorten the white space?
here is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Larry Rosenburg Official Website </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Crimson+Text:400,700,700i|Rakkas" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cherry+Swash|Cinzel|Gentium+Basic|Muli" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">
</head>
<body>
<header>
<div id="logo">
<img src ="lincoln.jpg" width ="27%" alt="Lincoln logo" id="logo_picture">
<nav>
<ul>
<li> Home </li>
<li> Lincoln </li>
<li> About </li>
<li> Contact </li>
</ul>
</nav>
</div>
</header>
<div class="clearfix"> </div>
<div id="title">
<p>Larry Rosenburg </p>
</div>
<div id="profile">
<img src="picture.jpg" width="25%" alt="" id="profile-pic" >
</div>
</body>
<footer>
</footer>
</html>
And here is the css:
body{
width: 100%;
}
#logo_picture{
margin-left: 80px;
}
#logo img, #logo nav{
float: left;
}
#logo nav{
line-height: 120px;
margin-left: 250px;
}
nav ul{
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li{
display: inline;
}
nav a{
color: black;
font-size: 20px;
font-family:'Arsenal', 'sans-serif';
font-weight: 300;
padding: 2px 38px;
text-decoration:none;
}
nav a, nav a:visited {
color: black;
}
nav a.selected, nav a:hover{
color: grey;
}
#title{
font-size: 70px;
margin-top: 70px;
margin-bottom: 0;
text-align: center;
font-family: 'Anton','sans-serif';
}
#profile-pic{
border-radius: 30px;
background: url('picture.jpg');
margin: 30px auto;
display: block;
padding: 0;
border-top: 0;
}
.clearfix {
clear: both;
}
Your CSS margin: 30px auto; of #profile-pic sets the top and bottom margin as 30px. That is the white space you are seeing. Either set the margin individually or set it all at once. Don't use the current style.
Before posting questions like this, please try to inspect the html element using any Web Browser. All web browsers shows the layout and margins of elements. It would help you in solving issues faster.
I have edited this. now you may try this because it works fine in my device.
#profile-pic {
background: rgba(0, 0, 0, 0) url("picture.jpg") repeat scroll 0 0;
border-radius: 30px;
border-top: 0 none;
display: block;
margin: -60px auto;
padding: 0;
}
[here the screenshot][checked]
Try this.
<p style="margin-bottom:0px">Larry Rosenburg </p>
There might be some margin-top on the image as well.
I have a header with 100% width and grey line under it. The line should use 100% width of the browser window. But when I reduce the browser width the grey line doesn't take the whole width of the webpage. Why? Strange, but a body tag takes certain width value although no width setted up for the body in css. Please, check the picture below and the code. Thanks a lot!
If you reduce browser width, there is a problem: no grey border on the right any more!
https://drive.google.com/file/d/0B35EX-b9d628ZmxBWFJjOTF1eFU/view
Here is the code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Max's Icebrrrg</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="headerInner">
<div class="logo">
<h1>Icebrrrg</h1>
</div>
<div class="mainNav">
<ul>
<li>Home</li>
<li>Three Column</li>
<li>Sidebar Right</li>
<li>Sidebar Left</li>
<li>Full Width</li>
<li>Contact</li>
</ul>
</div>
</div>
</header>
<div class="contentWrapper">
</div>
<footer>
</footer>
</body>
</html>
CSS
* {
box-sizing: border-box;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
}
body {
font: 14px/21px "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #444;
}
/******************** HEADER ************************/
header {
border-bottom: 1px solid #E3E3E8;
margin-bottom: 30px;
}
.headerInner {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.logo {
width: 157px;
height: 63px;
background: url(../img/icebrrrg-logo.png) no-repeat;
background-size: contain;
margin: 22px 0;
float: left;
display: inline;
}
.logo h1 {
text-indent: -99999px;
}
.mainNav {
float: right;
display: inline;
}
.mainNav ul {
margin: 44px 0;
padding: 0;
list-style: none;
}
li {
display: inline;
}
.mainNav a {
text-decoration: none;
color: #2C88C9;
padding: 48px 10px 43px;
font-size: 12px;
border-bottom: 3px solid white;
}
.mainNav a:hover {
font-weight: bold;
border-bottom: 3px solid #2C88C9;
}
The thin is your .headerInner has a fixed width: 960px and the body as well the <header> stretch to the width of the screen by default so when it is less than 960px your .headerInner overflow the <header>
To fix it just move the border-bottom: 1px solid #E3E3E8; from <header> to .headerInner
Here a working jsfiddle example
Or keep the border in its place and set width: 960px; and margin: 0 auto to header .
Here the jsfiddle in this way
If you want that the border stretch to the screen do this:
header {
margin-bottom: 30px;
min-width: 960px;
border-bottom: 1px solid #E3E3E8;
}
And here the jsfiddle for this one
You can check with the below link. I have removed the css related to .logo h1 mentioned below.
http://jsfiddle.net/57k17amb/1/
.logo h1 {
text-indent: -99999px;
}
So I have to make a web page for school using HTML and CSS. Everything appears to be 100% fine when I view it in my code preview but once I put it on my server the navigation bar is no longer aligned with my main body
Here is my CSS
body {
background-color:#2AA890
}
nav {
margin: auto;
width: 1000px;
}
ul {
padding: 0px;
margin: 45px;
list-style: none;
}
li a:link, li a:visited, li.selected {
float: left;
width: 110px;
line-height: 3em;
background-color: #e9e9e9;
color: #000000;
font-size: 16px;
text-align: center;
text-transform:capitalize;
text-decoration: none;
border-right: 3px #ba0000 solid;
}
li:last-child a {
width: 110px;
border-right: 0px #6e2525 solid;
}
.head {
text-align: left;
padding: 10px 10px 10px 10px
}
.box {
margin-left: 185;
width: 882;
height: 450;
background-color: #acacac;
text-align: left;
padding: 30px 10px 10px 10px
}
.pic1 {
width:900px;
}
.pic1 img {
float:right;
}
.pic1 p {
text-indent: 40px;
line-height: 1.5em;
font-family: sans-serif;
font-size: 17px;
margin-right:400px;
}
.head {
padding: 25px 0px 0px 45px
}
.pic1 p {
padding: 0px 5px 10px 8px
}
.pic1 img{
padding: 30px 20px 20px 10px;
}
and here is my HTML
<! DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Supplies</li>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
<li>Step 6</li>
</ul>
</nav>
<div class="box">
<div class="pic1">
<img src="drew_brophy.jpg" alt="Art" title="Drew Brophy" width="480" height="374">
<div class="head">
<h2>How to Paint a Surfboard</h2>
</div>
<p>The surfboard, one of the most fun toys around. There is just one problem with it. The majority of them are plane white. There is no color and adding some stickers isn't a true way to express yourself! With a little time and some common items from your garage or hardware, you can make it so much better. You don't have to be a great artist or have lots of money to truly make that board your own. This site is a simple guide with some tips and tricks for painting your surfboard. When the waves aren't breaking and your looking at that board in the corner of your room, take some time and change it up! </p>
</div>
</div>
</body>
</html>
In your CSS, please add 'px' for height, width, height for 'box' class.
For Nav UL, remove the margin.
Sample:
http://jsfiddle.net/mrUqK/
margin-left: 185px
width: 882px
height: 450px
Hi please review the margin in your ul and in the .box class set an equal margin-left.
ul {
margin:45px 0px;
}
.box {
margin-left:0px;
}
Check it here http://jsfiddle.net/
So basically I can't remove the top section of the page. It is just white space, and no matter how much I alter my css, I can't seem to change anything. I want to have my navbar at the top of the page, with no padding or border or anything. Here is my code, and I am aware it is probably the most easiest thing, it's just that i can't find it at the moment.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="Description" content="This is a test website!"/>
<meta name="author" content="Me!"/>
<title>test | Home</title>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div id="wrapper">
<nav id="navmenu">
<ul>
<li>Home</a>
<li>About</li>
<li>Tutorials</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
<aside id="sidenews">
</aside>
<div id="center">
<section id="mainsection">
<article>
<header>
<hgroup>
<h1>This is a test</h1>
<h2>I like tests!</h2>
</hgroup>
</header>
<section>
<p>This is the main section of my section (sectception)</p>
</section>
<footer>
<p>Time and date</p>
</footer>
</article>
</section>
</div>
<footer id="cright">
<p>This is the copyright section. All rights reserved.</p>
</footer>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
header, section, footer, aside, nav, article, hgroup{
display: block;
}
a{
text-decoration: none;
color: #FFF;
}
a:hover{
color: #333399;
}
#wrapper{
width: 1000px;
margin: 20px auto;
text-align: left;
background-color: #FFF;
}
#navmenu{
background: #3366CC;
color: #eee;
text-align: center;
height: 100px;
padding: 0;
margin:0;
float: top;
width: 100%;
}
#navmenu li{
display: inline-block;
list-style: none;
padding: 20px;
}
#navmenu li:hover{
color: #FFF;
background: #3399FF;
border-radius: 15px;
-moz-border-radius: 5px;
}
#mainsection{
float:left;
width: 630px;
margin:30px;
margin-top: 2
background-color:#FFF;
color: #222;
text-align: left;
}
#cright{
text-align: center;
background-color: #AAA;
clear: both;
}
#center{
width: 1000px;
height: 1000px;
background-color:#FFF;
}
#sidenews{
float:right;
width: 250px;
height: 940px;
margin: 0px 0px;
padding: 30px;
background-color:#FFF;
}
Change the margin of the wrapper to 0 ?
#wrapper{
margin: 0 auto;
}
Your #wrapper element has a top margin of 20px - is that it?
#wrapper{
width: 1000px;
margin: 0 auto;
text-align: left;
background-color: #FFF;
}
Set margin to 0 on wrapper
#wrapper {
background-color: #FFFFFF;
margin: auto;
text-align: left;
width: 1000px;
}