The HTML div for the navigation bar design in CSS will not work.
CSS
/* CSS Document */
*{
margin: 0px;
padding: 0px;
}
.clear {
clear:both;
height:0px;
}
body {
background:url(../images/bg.jpg) no-repeat scroll center top #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg {
background: url('../images/navigation.png') no-repeat center top;
height: 198px;
width: 737px;
}
This is just a short example.
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="robots" content="index, follow"/>
<meta name="keywords" content="bla"/>
<meta name="description" content="bla"/>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link rel="shortcut icon" href="favicon.png"/>
</head>
<body>
<div id="header_menu_bg">
Any help will be much appreciated!
Make sure the URL to your image is correct.
Place the URL in between ' or " tags (url("../images/navigation.png"))
Add a width to your div, f.e. width: 200px;
EDIT: When looking at your full HTML, you also need to close your <body> and <html> tags.
Your full code will look like this:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="robots" content="index, follow"/>
<meta name="keywords" content="bla"/>
<meta name="description" content="bla"/>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link rel="shortcut icon" href="favicon.png"/>
</head>
<body>
<div id="header_menu_bg"></div>
</body>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
.clear {
clear:both;
height:0px;
}
body {
background-color: #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg {
background: url('http://placehold.it/737x198') no-repeat center top;
height: 198px;
width: 737px;
}
DEMO: JSBin (JSFiddle doesn't seem to work at the moment)
You need to assign it a width attribute.
#header_menu_bg {
background: url(../images/navigation.png) no-repeat center top;
height: 280px;
width: 200px; }
EDIT
Check in the console log, to see if there are issues with the browser finding your image. Perhaps you have the wrong path.
EDIT 2
Close your <body> and <div> tags.
Assuming you have referenced the css file correctly and no error in your html coding structure I suggest clearing your browser cache.
background: url(../images/navigation.png) no-repeat center top;
you need "" or '' like this:
background: url('../images/navigation.png') no-repeat center top;
probably this helps you
The following css works and puts an image in the DIV. Fiddle is not working at the moment and I can't put a link for it now.
#header_menu_bg
{
background-image: url('fnordware.com/superpng/pngtest16rgba.png');
height: 32px;
width: 32px;
}
You either have a wrong url or something else is wrong if this css doesn't work for you.
Try this :
Download the sample image from Here and save it as bg.jpg.
Create a new folder and put the 2 below files & a image in same folder.
HTML (index.html)
<!DOCTYPE html>
<head>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div id="header_menu_bg">
</body>
</html>
CSS (main.css)
body
{
background-color: #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg
{
background: url('bg.jpg') no-repeat center top;
width: 280px;
height: 500px;
}
RESULT:
Related
In the index.html file I am able to do this an it works as designed:
<!DOCTYPE html>
<html>
<head>
<body style="background-color: #A8E4A0;">
<meta charset="utf-8" />
<title>Demo</title>
My partner would like to keep the background-color in our css file user-interface.css. Which makes sense to me but it is not working as I would expect.
When I enter the background-color it doesn't show up and leaves my background-color as white.
What am I missing?
* Universal Settings */
.body{
background-color : AE8E4A0;
font-family: Arial;
}
/* Search bar */
.heading {
font-size: 30px;
padding: 16px 0;
color: #444;
text-align: center;
}/*Container*/`enter code here`
Thanks
Scott
You have a minor error on your code. You should not put the dot (.) in front of body as it is not a class name, it's an element. Same for the heading. So your code should be like:
/* Universal Settings */
body{
background-color : #AE8E4A0;
font-family: Arial;
}
/* Search bar */
heading {
font-size: 30px;
padding: 16px 0;
color: #444;
text-align: center;
}/*Container*/
<!DOCTYPE html>
<html>
<head>
<link href="cssfilename.css">
<body style="background-color: #A8E4A0;">
<meta charset="utf-8" />
<title>Demo</title>
Also, you would need to link your CSS to your HTML file. Not that the "cssfilename.css" need to be replaced by the filename of your css file, and they need to be in the same directory.
added to CSS background-color: #A8E4A0; and verified the link in my htlm was correct
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My first Website!</title>
<style>
body {
background-color: #A8E4A0;
font-family: arial;
}
p {
color: green;
}
</style>
</head>
<body>
<p>This is a paragraph!</p>
</body>
</html>
If you want the style in a seperate .css file, try this:
/* style.css */
/* Needs to be in the same folder/directory as the .html file is. */
body {
background-color: #A8E4A0;
font-family: arial;
}
p {
color: green;
}
<!-- Index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<title>My first Website!</title>
</head>
<body>
<p>This is a paragraph!</p>
</body>
</html>
Not too sure why, but it is showing up as a blank screen.
How it looks:
Here is my file structure:
css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #ffffff;
color: #555;
font-family: 'lato', 'Arial';
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
header{
background-image: url(/resources/css/images/hero.jpg);
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="resources/vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="resources/vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OmniFoods</title>
<header>
<div class="hero-text-box">
<h1>Goodbye junk food. Hello super Healthy meals</h1>
I’m hungry
Show me more
</div>
</header>
</head>
<body>
</body>
</html>
I guess you are looking for this in wrong directory, beacuse your style is already in "resources/css/". Try to continue this directory by doing this:
header{
background-image: url("./images/hero.jpg");
}
You need to wrap the soure in quotes like this
background-image: url("./resources/css/images/hero.jpg");
Would anyone know why css is not working in my html? It is linked to my html, but not working. It is also showing empty in chrome inspect - css tab. I see that css is linking , but not sure why it is not working.. Thank you in advance!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quierra Marriott</title>
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px
font-family: 'Roboto', sans-serif;
color: #eee;``
}
body {
width: 100%;
height: 100%;
background: url() no-repeat center fixed;
background-size: cover;
}
Your css is invalid:
html {
font-size: 10px /* You're missing a semi-colon here*/
color: #eee;`` /* You don't need the strings `` here...*/
...
It may be of interest to you to find a tool like w3c css validator: https://jigsaw.w3.org/css-validator/.
Missing semicolon and empty string are problem but they are only affecting font-size property of html selector.
If your intention was to add background to body then you should fill image url
body {
width: 100%;
height: 100%;
background: url('http://image-url.com/image') no-repeat center fixed;
background-size: cover;
}
These is main reason for empty page
Didn't see any 'body' tag in your HTML that's why I think it's not working
I'm trying to create a hero image for a website, and I'm receiving a random white bar the bottom of my website.
This is the HTML
* {
margin: 0;
padding: 0;
box-sizing: padding-box;
}
img {
width: 100%;
overflow: hidden;
}
body {
margin: 0px 0px;
}
<img src='https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg' />
img element is by default display:inline-block; vertical-align:baseline;
That baseline alignment is what you see.
So either display:block; or vertical-align:top;:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel='stylesheet' type="text/css" href="styles.css"/>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<img style="display:block" src='https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg'/>
</body>
</html
Another option - to set your image to background:
body {
background: no-repeat url(https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg);
background-size:cover;
}
<body>test</body>
Right this is going to sound really weird, but.
I'm doing a mobile site, nothing fancy etc, and basically in the middle is my content with divs around it, which I have made to float left. but I would like the whole content itself to be in the center without loosing the boxes being next to each other if that makes sense?
index.php
<a name="top"></a>
<!doctype html>
<html>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="en-gb">
<head>
<title>michae|dylanEdwards - artistic blog</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link href = "_includes/style.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="_includes/style.css" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="_includes/simplemenu.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="_includes/simplemenu.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="http://www.michaeldylanedwards.co.uk/admin/uploads/op-image.png"/>
<meta property="og:description" content="michae|dylanEdwards is a contemporary British Art and Design Student at Liverpool John Moores University. In which creates works in which provide a sociological question in regards to how society sees itself. Also by means of design."/>
<meta name="description" content="michae|dylanEdwards is a contemporary British Art and Design Student at Liverpool John Moores University. In which creates works in which provide a sociological question in regards to how society sees itself. Also by means of design.">
<meta name="keywords" content="art blog mickword michaeldylanedwards michae|dylanEdwards michael dylan edwards liverpool john moores university sociological history"/>
</head>
<body>
<center>
<?php include("_includes/header.html"); ?>
<div id="content">
<center>
<?PHP
$category = "6";
$template = "Mobile_new_home";
$number = "6";
include("../admin/show_news.php");
?>
</center>
</div>
<?php include("_includes/bottom.html"); ?>
</center>
</body>
</html>
style.css
div#content {
width: 85%;
}
/* Front News Styles */
div#news_base {
background-image: url(../_img/1.fw.png);
width: 235px;
height: 240px;
float: left;
}
div#articles_base {
background-image: url(../_img/1.fw.png);
width: 235px;
height: 240px;
margin-bottom: 20px;
float: left;
}
div#news_float {
width: 20px;
height: 20px;
float: left;
}
div#newscontent {
width: 235px;
height: 205px;
}
div#newsshadow {
background-image: url(../_img/shadow.png);
width: 215px;
text-align: left;
color: #F0F0E1;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
div#newsshadowbottom {
background-image: url(../_img/shadow.png);
width: 215px;
height: 15px;
text-align: left;
font-size: 10px;
color: #F0F0E1;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
Haha any help would be great, thanks in advance!
edit: oh and here is the mobile site: www.michaeldylanedwards.co.uk/m
Remove float:left in your .news_float class.
And add display:inline-block into .bloglink class. That is all you need to do since you already give align-content: center; to the main div.
.bloglink{
display: inline-block;
}
div#news_float {
width: 20px;
height: 20px;
}