I have tried many things but cannot get these two documents to work together. I am sure the CSS file is linked correctly with the correct file name. I'm attempting this after watching this YouTube video tutorial below on coding a blog. https://www.youtube.com/watch?v=24QmGjcqIiw
Here is the HTML:
<!doctype html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="new 1.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="content">
<div class="post">
<h1>Post Title</h1>
<p>Testing Testing 123...</p>
</div>
<div class="post">
<h1>Post Title</h1>
<p>Testing Testing 123...</p>
</div>
<div class="post">
<h1>Post Title</h1>
<p>Testing Testing 123...</p>
</div>
<div class="post">
<h1>Post Title</h1>
<p>Testing Testing 123...</p>
</div>
<div class="post">
<h1>Post Title</h1>
<p>Testing Testing 123...</p>
</div>
</div>
</div>
</body>
</html>
Now here's the CSS:
*{
margin:0px;
padding:0px;
}
body{
background-color: #f0f0f0;
font-size:14px;
color:#000000;
}
wrapper{
width: 80px;
margin-left:auto;
margin-right:auto;
}
#header
{
background-color:#cZazqqcccccaccccc;
height:800px;
width: 100%;
margin-bottom:10px;
}
#.post
{
background-color:#ffffff;
padding: 5px;
border: 1px solid #cccccc;
margin-bottom:5px;
}
I'd try the 2 most common culprits:
Incorrect filename
Incorrect file location
If your filename is definitely correct, go straight to 2. It is considered best practice to avoid spaces, even though browsers should be able to read them as #zzzzBov points out.
There's 3 main ways you can reference your files:
a direct link to the file, without specifying a path
a relative link, which points to your file relative to where the file requesting it is located
an absolute link, which specifies a complete file path from a domain or a hard drive
And if you file structure (how you've organised all your stuff) looks like this:
public_html
L css
L myStyles.css
L index.html
L aboutMySite.html
Your links inside index.html and aboutMySite.html would look like this:
direct link: /css/myStyles.css (the first / represents the root directory, or the highest level folder in which your site lives)
relative link: ../css/myStyles.css
absolute link: www.mysite.com/css/myStyles.css
Avoid using space characters in your filenames.
Rename new 1.css to new1.css (make sure both the reference and the actual filename match) and make sure all CSS files are in the same folder as your HTML file since you are not specifying any path.
If you really wish to use the space character (an invalid character for URIs), encode them with %20, but it's a lot simpler to avoid them.
Related
I have checked the file order and closed off tags. It seems whatever I put at the top of the CSS file will not be read, however, everything below the very top segment of cod ,in this case, #tribute-info will not be applied to the HTML. If I moved #title to the top and refreshed the browser #title will not have its CSS anymore. Same situation for #img-caption.
<style>
#tribute-info{ /* <-- anything I put at the top of the file is not getting read. If I moved #img-caption here, and #tribute-info below it, #img-caption will not work. */
color: blue;
}
#img-caption{
color: red;
}
#title{
text-align: center;
color: red;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/design.css" />
<meta charset="utf-8">
</head>
<body>
<div id="main">
<h1 id="title">History´s First Programmer</h1>
<div id="img-div">
<div class="row">
<div class="column">
<img src="images/ada_lovelace_house_emblem.jpg" alt="Ada Lovelace depicted in an emblem" id="image">
</div>
</div>
<p id="img-caption">The Mother of computer programming</p>
<div id="tribute-info">
<p>“The more I study, the more insatiable do I feel my genius for it to be.”</p>
<p>“Your best and wisest refuge from all troubles is in your science.”</p>
<p>“Mathematical science shows what is. It is the language of unseen relations between things.
But to use and apply that language, we must be able to fully to appreciate, to feel, to seize the unseen, the unconscious.”</p> <!-- this segment of code is not changing -->
</div>
<a href="https://en.wikipedia.org/wiki/Ada_Lovelace" target="_blank" id="tribute-link">Click here to learn
more about Ada Ada_Lovelace</a>
</div>
</div>
</body>
</html>
The code works fine if you remove the <style> tag from your css file
I'd like to have an html file that organizes certain files scattered throughout my hard drive. But after saving file, my text i.e "Indian" got underlined. My code is
<a href="file:///G:\work files\project\indian.html" target="_blank">
<div class="button-1">
Indian
</div>
</a>
My question: is there any rule or tag in css or html to remove that underscore?
I'd keep my <div> under <a>, so why text contained in <div> got underlined
Add you must use css to change the way your links look like. Use a selector ("a") and set the text-decoration property to none:
<html>
<head>
<title>TITLE</title>
<style>
div a {
text-decoration: none;
}
</style>
</head>
<body>
<h1>PAGE CONTENT</h1>
<div>
Link here
</div>
</body>
</html>
body{
margin:0;
padding:0;
background-color:white;
font-family:sans-serif;
font-size:14px;
}
#wrapper{
margin-top:10px;
margin-bottom:50px;
margin-left:auto;
margin-right:auto;
width:550px;
}
<!DOCTYPE html>
<html>
<head>
<title>advanced website one</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="advanced1.css">
</head>
<body>
<div id="wrapper">
<header id="header">
<img id="logo" src="images/logo.png" alt="logo image"/>
<ul id="menu">
<li>Home</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<content>
<h2>About Blue Micro</h2>
<p>Blue Micro is meant for a site that doesn't necessarily need a huge amount of content. I've found that trying to put a small amount of text onto a large template ends up in a site that looks slightly off. So this template is for those that need a quick and simple site</p>
<h2>Titles are H1 Tags</h2>
<p>Try to include your keywords in the titles since they are what seach engines pick up, it's also a good idea to try to include those same keywords in the title as well (only one of two of your best ones).</p>
<h2>Background Image</h2>
<p>I debated using a fancy background for this template, but ultimately just decided to keep it blank. I did however create all the images with Alpha transparency, which means that regardless of what background you choose, it will always look good. So keep it white, or experiment with it if you please.</p>
<h2>XHTML 1.1</h2>
<p>This template validates as XHTML 1.1 - this is to ensure it'll work for many years to come, and it makes it really easy for you to modify.
Try to include your keywords in the titles since they are what seach engines pick up, it's also a good idea to try to include those same keywords in the title as well (only one of two of your best ones).</p>
</content>
<footer>
free xhtml template by web page designer
<!-- begin snippet: js hide: false console: true babel: false -->
</footer>
</div>
</body>
</html>
I want to do this "see border" border in css, its not that hard but i'm newbie at web development. This border is linear gradient and has radius and i think internal radius
here is the logo image logo image
border
.border {
float: left;
background-image: url(gradient_rectangle_back.png);
background-repeat: repeat-x;
background-color: #4586F1;
width: 547px;
margin-left: 14px;
clear: both;
margin: 0 auto 0 auto;
}
You also need to download this graphic
http://www.quackit.com/html/templates/download/bryantsmith/bluemicro/gradient_rectangle_back.png
My background-image won't show up. Do I need to tag the image in the HTML? Maybe position reference or something? Please help!
<html>
<head>
<link type="text/css" rel="stylesheet" href="sespe.css"/>
<title>Sespe Pizza Co.</title>
</head>
<body>
<div id="header1">
<h1>Sespe Pizza Co.</h1>
</div>
<div id="mb1"></div>
<div id="mb2"></div>
<div id="mb3"></div>
<div id="mainPage">
<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>
<div id="b4"></div>
<div id="b5"></div>
</body>
</html>
CSS.....
body {
background-image: url('/Users/Username/Downloads/3634195609_f6b7edac1b_b.jpg');
}
Your path is the problem. You are navigating to your downloads folder. Place your image in a folder in your site folder, call it say 'images' and then call it into your css like this. If your new 'images' folder is on the same level as your css folder, the first option would work. ../because you are going up one folder to get to images.
body {
background-image: url('../images/3634195609_f6b7edac1b_b.jpg');
}
Edit: Seems in your case, your css file is not in a css folder, so you can just get to your images folder without going to a different level:
body {
background-image: url('images/3634195609_f6b7edac1b_b.jpg');
}
I am newbie so don't mind my question.
I am trying to insert an image using css bt it doesn't show in the page.
Here is my code :
<div id="outerWrapper">
<div id="header">
<div id="wave">
</div>
</div>
</div>
and my css is :
#outerWrapper #header #wave{background:url("generic/wave.png") bottom left no-repeat;position:absolute;top:0;left:0;width:960px;height:193px;z-index:100;}
The image path is correct. So help me please :)
Bilal Zafar, created files with your code, it worked for me here, here the link with the test neows.com.br/imagem-bg.rar might help you.
If you have recently modified your css file, try clearing your cache as sometimes the old css file is saved.
Your code works for me.
Sometimes a file extension will be uppercase, you may want to double check that.
Here is my source:
<html>
<head>
<style>
#outerWrapper #header #wave{
background:url("PathToImage.png") bottom left no-repeat;
position:absolute;
top:0;
left:0;
width:960px;
height:193px;
z-index:100;
border:1px solid black;//This is to make sure the size of div and position of background image are correct.
}
</style>
</head>
<body>
<div id="outerWrapper">
<div id="header">
<div id="wave">
</div>
</div>
</div>
</body>
</html>