I'm trying to replicate a webpage template solely for the purpose of becoming more familiar with the works of HTML/CSS. I want to use an image in my documents as a background for a DIV, but for some odd reason, it will not import. Keep in mind, I'm still pretty new to coding.
I pulled a random stock photo address off of Google as a test, and that would work. So, I'm thinking either I have the photo located in the wrong folder (It's in the same exact folder as the document I'm calling it from), or there's something else in my code that is conflicting with the called image/file. I'm still not sure, though.
HTML file:
<html>
<head>
<title>conquer</title>
<link rel="stylesheet" type="text/css" href="conquer.css" />
</head>
<body>
<div class="navbar">
Homepage
About Us
Services
Contact
External
</div>
<div class="topbanner"></div>
</body>
</html>
CSS file:
body {
background-color: #fff;
margin: 0;
}
/** Navigation Bar **/
.navbar {
background-color: #383E4C;
height: 100px;
width: 100%;
position: fixed;
text-align: center;
margin-top: 0px;
}
.navbar a {
color: #F6F6F7;
text-decoration: none;
font-size: 22px;
font-family: "Helvetica", sans-serif;
border: 1px solid #646D7C;
padding: 15px;
margin-top: 20px;
margin-right: 20px;
display:inline-block;
}
.navbar a:hover {
background-color: #49505F;
}
/** Top Banner **/
.topbanner {
height: 500px;
width: 300px;
background-image: url('/city.jpg');
background-repeat: no-repeat;
}
I want the image to display in the DIV, but when I open the console elements, it's just a huge invisible block.
In paths, the leading slash /, tells the browser to goto the ROOT folder.
So you will want to change this:
background-image: url('/city.jpg');
to
background-image: url('city.jpg');
Related
I just switched from VSC to Adobe Dreamweaver and i don't know if I should keep it or not; but that's besides the point.
When I try to add a background to some text, it fills the whole screen with the background with the background, and if I try to change the width it only adds on to the background which is filling the whole screen.
I don't know if it's user error, something changed in HTML/CSS overnight or if it's because of the Dreamweaver display box thing on the top of my screen
#charset "utf-8";
* {
margin: 0;
padding: 0;
}
.Container {
padding: 25%;
padding-left: 50%;
padding-right: 50%;
font-family: comfortaa;
font-style: normal;
font-weight: 600;
color: white;
background: #00C3FF;
margin: 0;
}
body {
background-image: url(http://www.incomeactivator.com/images/freebg5.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="file:///C|/Users/REDACTED/Documents/style.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>
var __adobewebfontsappname__ = "dreamweaver"
</script>
<script src="http://use.edgefonts.net/comfortaa:n3:default.js" type="text/javascript"></script>
</head>
<body>
<div class="Container">
<h1>Hello</h1>
</div>
</body>
</html>
p.s: let me know if you need a ss of the results I get.
Instead of using the class, you can change the texts background color by adding
background-color: rgb(255, 236, 139)
in the h1 tag
Demo:
YOURTEXT
It should work as expected if you apply the css to the H1 tag:
.Container h1{}
You have used padding property incorrectly. Reference
Correct syntax: padding: top right bottom left
padding:0 50% 0 50%;
So the css should be:
.Container{ margin: 0; }
.Container h1{
padding:0 50% 0 50%;
font-family: comfortaa;
font-style: normal;
font-weight: 600;
color: white;
background: #00C3FF;
}
I want to add a background image on my webpage but when I add in my code it doesn't show the image. The page is linked to the home page but how would I get my background image to appear when the user selects the help guide tab, which it then takes them to another page.
<html>
<head>
<meta charset="utf-8" />
<style>
h1 { text-align: center; font-family: "Comic Sans MS", "Comic Sans", cursive; font-size: 50; }
p.p-stage { text-align: center; font-family: Arial; font-size: 150%; }
p.p-help { text-align: center; font-family: Arial; font-size: 100%; }
body {
background-image: url("assets/images/Festival.jpg");
background-height: 100%;
backgroud-width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
#rcorners2 {
margin: auto;
text-align:left;
border-radius: 25px;
border: 2px solid #000000;
padding: 20px;
width: 1000px;
height: 750px;
overflow: auto;
}
</style>
</head>
<body>
<h1>Help Guide</h1>
<p class ="p-stage" id="rcorners2">Stages:<br><br>1. How to add a stage?<br><br>
To create a stage please do this.................<br><br>
2. How to delete a stage?<br><br>
To delet a stage please do this.................<br><br>
3. Add a help guide with a questions users may come up with and then com up with answers.
</p>
</body>
</html>
Here is my webpage
I fixed the problem. it is due to path of the root directory. To go back in the root directory where the image file might be in use:
background: url("../../assets/images/Wallpaper4.jpg");
the 2 dots go back one folder so two .. means you have gone back 2 folders
I am having trouble adding an image to a div. I have both the file and the image in the same folder and the image is a jpg. I have also tried putting the online image link (http://www.aussieinfrance.com/wp-content/uploads/stockholm-4.jpg) in with no success. Here is my html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="topnav" id="myTopnav">
<a class="active" href=“#home”>Sweden</a>
<a href=“government.html”>Government</a>
<a href=“borders.html”>Borders</a>
Iconography
</div>
<div class="overview" id="overview">
<p>Sweden is a northern country that specializes in trading machinery, paper products, and iron and steel products</p>
</div>
</body>
</html
and here is my css file:
/* Add a black background color to the top navigation */
.topnav {
background-color: #262228;
overflow: hidden;
margin: 0;
padding: 0;
}
/* Style the links inside the navigation bar */
.topnav a {
font-family: verdana;
float: left;
color: #f2f2f2;
text-align: center;
padding: 25px 27px;
text-decoration: none;
font-size: 19px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #FFCE00;
color: white;
}
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.overview p {
font-size: 20px;
padding-top: 30px;
padding-right: 50px;
padding-left: 550px;
color: #262228;
text-align: right;
}
.overview {
background-image: url(“stockholm.jpg”);
}
Use plain quotes " instead of typographic quotes “” in the CSS url directive.
In CSS a path to an image is specified relative to the CSS file, not the HTML file. So make sure that the image is in the same folder with the CSS file.
Try to use ./stockholm.jpg instead of stockholm.jpg.
The Image Your Referenced Is It On The Same Directory Where the style.css file Located. If not then specify the path relative path of the image like background-image: url('./img/stockholm.jpg'); (if the file is on the img folder). See the relative and absolute file path declaration to understand. Hope it helps. Thank you.
Question:
How do I style different elements of a HTML website properly? I've looked all over the internet and read books but am still sort of struggling.
Issue:
My problem is that I have a main heading, which is like the main "title" for my website which displays the website name, but to the left of my heading, I want to style a vertical navigation bar which will be in-line with my heading. Yet I am having trouble styling the navbar and heading to work next to each other, rather than one of them being on top of the other.
JSFiddle
HTML:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="homepage.css">
<head>
<title>CSGOWin | Win Big!</title>
</head>
<body>
<div class="navbar">
<ul>
<li>Jackpot</li>
<li>Coinflip</li>
<li>Giveaways</li>
<li>About Us</li>
<li>Contact Us<li>
</ul>
</div>
<h1>CSGO Win</h1>
</body>
</html>
CSS:
body {
padding: 0;
margin: 0;
background-image: url(bgimg.jpg);
width: 100%;
height: 100%;
background-size: 100%;
}
h1 {
font-family: Arial, Verdana, sans-serif;
background-color: #FFA500;
border-style: solid;
border-radius: 25px;
text-align: center;
margin-top: 50px;
margin-left: 350px;
margin-right: 350px;
padding-top: 1%;
padding-bottom: 1%;
font-size: 45px;
}
ul {
list-style-type: none;
margin-left: 50px;
margin-right: 85%;
margin-top: 50px;
background-color: #FFA500;
}
li a {
font-family: Arial, Verdana, sans-serif;
display: block;
}
.navbar{
}
Finally, I am very new to stack overflow, so I apologise if my question is not fully detailed. I will answer questions if there are any. Thanks for your kind help.
Like mentioned in the comment you can use float: left see this pen http://codepen.io/anon/pen/bpWzeK?editors=1100. Another way to do it is by using flex.
you can add class or id attributes to certain html tags and then in your stylesheet reference that class or id
->.navbar{
}
that references any tag with "navbar" class will get the style in that block
->#thisIsAnID{
}
that references any tag with the id " thisIsAnID" id
so . is used for classes
is used for ids
I am trying to place a solid color banner that stretches across the top of the screen like on this website, facebook, and others. For some reason I am encountering difficulties doing this
I created a div tag in my HTML file for the banner and tried to apply CSS to the div tag but nothing is working.
<!DOCTYPE html>
<html>
<head>
<style>
#banner {
background-color: #333FF;
font-family: Arial;
position: absolute;
left: 0;
right: 0;
padding:15px;
height:800px;
background-size:100%;
}
</style>
<title>Random Password Generator</title>
</head>
<body>
<div id="banner"><h1>fdsfdsfdsfds</h1></div>
</body>
</html>
I also tried linking to an external CSS file but that isn't working either.
How can I make a simple, solid color banner at the top of the page, on every page?
#333FF is an incorrect color. It should be like this: #333FFF. See the W3C Specification for more info on the length of hex codes (hint: they need to be six characters long).
Working example : http://jsfiddle.net/ntim/SKnxP/
position:absolute; also doesn't seem necessary in your case.
You don't actually need to use position absolute unless you want it to be over the top of anything. Instead, you can just use the following:
<style>
#banner {
background-color: #333FFF;
font-family: Arial;
padding:15px;
height:800px;
background-size:100% 100%;
}
</style>
here is something based on a template I use:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="CSS-STYLE-SHEET.css">
<style type="text/css">
body
{
background-color: #E7E7E7;
text-align: center;
font-family: Arial, Helvetica;
font-size: 15px;
color: #000000;
border-spacing: 0;
border-collapse:collapse;
padding: 0;
margin: 0;
}
#Banner {
background-color: #333FFF;
top: 0; /* Probably not necessary... */
height: 40px;
width: 100%; /* Also probably not necessary */
}
#ContentMain
{
background-color: #FFFFFF;
height: 100%;
}
</style>
</head>
<body>
<div id="ContentMain">
<div id="Banner">Banner goes here</div>
Content goes here
</div>
</body>
</html>
should work.. the grey bit at the back is because the html and body tags dont fill the entire screen - something like this should fix it (I would use min-height), but I have not included it here as then if you want a page taller than the browser window and works in Internet Explorer things get annoying...
Jsfiddle here