Linking external .css file to Html page - html

I'm having trouble linking my external file sheet to the separate html page. The .css file and html file are in the same folder also but when i run it the content is only appearing. Any help is appreciated. Thanks!
CSS Code
div
{
border-radius:5px;
}
#header
{
z-index:1;
width:97.%;
height:60px;
background-color:red;
margin-top:-20px;
margin-bottom:10px;
position:fixed;
}
#name
{
float:left;
margin-left:5px;
padding-top:5px;
font-size:16px;
font-family:Verdana, sans-serif;
color: #ffffff;
}
#email
{
float:left;
margin-left:5px;
padding-top:5px;
font-size:16px;
font-family:Verdana, sans-serif;
color: #ffffff;
}
#sidebar
{
left:90px;
top:160px;
position:fixed;
width:200px;
height:600px;
background-color:gray;
}
#content
{
left:290px;
top:160px;
position:fixed;
width:600px;
height:600px;
background-color:lightblue;
}
p
{
padding-left: 50px;
padding-top: 50px;
}
HTML Code
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="homepage.css" />
<title>HTML Project</title>
</head>
<body>
<div id="page">
<div class="topNaviagationLink">Home</div>
<div class="topNaviagationLink">About</div>
<div class="topNaviagationLink">Portfolio</div>
<div class="topNaviagationLink">Services</div>
<div class="topNaviagationLink">Contact</div>
</div>
<div id="mainPicture">
<div class="picture">
<div id="headerTitle">Project</div>
<div id="headerSubtext">HTML Project</div>
</div>
</div>
<div class="contentBox">
<div class="innerBox">
<div class="contentTitle">The Title of an Article</div>
<div class="contentText"><p>content </p><br />
<p>Content.</p><br />
<p>Other Content.</p></div>
</div>
</body>
</html>

That's what you need. See there please. I noticed lost div , check your code.
http://jsfiddle.net/vo9hLzqf/
If you feel problems with other styles like #email #name etc. check that in HTML you set right type
if your css is #email you should use <div id="email">%yourcode%</div>
and .email will be <div class="email">%yourcode%</div>
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="homepage.css" />
<title>HTML Project</title>
</head>
<body>
<div id="page">
<div class="topNaviagationLink">Home</div>
<div class="topNaviagationLink">About</div>
<div class="topNaviagationLink">Portfolio</div>
<div class="topNaviagationLink">Services</div>
<div class="topNaviagationLink">Contact</div>
</div>
<div id="mainPicture">
<div class="picture">
<div id="headerTitle">Project</div>
<div id="headerSubtext">HTML Project</div>
</div>
</div>
<div class="contentBox">
<div class="innerBox">
<div class="contentTitle">The Title of an Article</div>
<div class="contentText"><p>content </p><br />
<p>Content.</p><br />
<p>Other Content.</p></div>
</div>
</div>

Related

My CSS style sheet only affected 3 out of my 4 pages. How do I update that 4th page?

My main problem here is that I have one .css stylesheet hooked up to 3 page because this really is just forming a template for the time being until I can decide how I want each page to look individually.
I preformed some div positioning on the website and I think it looks nice and centered on most of the pages...most. I have one page that is hooked up to the correct style sheet and will change anything I add to the style sheet, except where some divs won't shift on this one page. Here is a screenshot of a page that works:
Click here
And one that doesn't:
Click here
If you look closely, you are can see that my links are shifted more to the upper-right corner and so are my main content sections. The other two links that are used in this website look the same as the working page, by the way.
CODING (Warning, there may be a tad unnecessary code there, but the coding is exactly the same on all websites except for the img src attributes, so there is no reason that all page wouldn't look the same):
Page that works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teens For Antarctica Preservation</title>
<link href="template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
<div>
<p><a id="firstlink" href="index.html">TAP</a>
<a id="rollover" href="whatis.html">Who is TAP</a>
<a id="rollover" href="why.html">Why we do it</a>
<a id="rollover" href="resources.html">Resources</a></p>
<p> </p>
</div>
<p> </p>
<p> </p>
<img id="image" src="images/14_Seal2.jpg" /> <!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>
<div id="footer"><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>
</body>
</html>
This is the code for the website that doesn't work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Who is TAP?</title>
<link href="template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
<div>
<p><a id="firstlink" href="index.html">TAP</a>
<a id="rollover" href="whatis.html">Who is TAP</a>
<a id="rollover" href="why.html">Why we do it</a>
<a id="rollover" href="resources.html">Resources</a></p>
<p> </p>
</div>
<p> </p>
<p> </p>
<img src="images/14_Teens.jpg" id="image"/><!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>
<div id="footer"><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>
</body>
</html>
And here is my CSS stylesheet:
#charset "utf-8";
/* CSS Document */
.header
{
height: 150px;
width: 100%;
margin-left: 25px;
margin-right: 50px;
position:relative;
left:0px;
top:0px;
}
html
{
width: 1000px;
height: 650px;
background-color:#D7D7FF;
}
a#rollover:link, a#rollover:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#B8B8B8;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
border:1px solid #000;
float:left;
margin-top:30px;
}
a#rollover:hover, a#rollover:active
{
background-color:#A7A7A7;
}
a#firstlink:link, a#firstlink:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#B8B8B8;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
border:1px solid #000;
float:left;
margin-top:30px;
margin-left:265px;
}
a#firstlink:hover, a#firstlink:active
{
background-color:#A7A7A7;
}
#image
{
height:230px;
width:300px;
float:left;
border: 3px solid #B5B5B5;
margin-left:150px;
margin-top:10px;
border-radius:25px;
box-shadow:10px 10px 6px #A3A3A3;
}
#main
{
height:250px;
width:450px;
border:3px solid #B5B5B5;
margin-left:500px;
margin-top:15px;
border-radius:25px;
box-shadow:10px 10px 6px #A3A3A3;
padding-left:10px;
padding-top: 6px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight:400;
background-color:#FFF;
}
#footer
{
height:100px;
bottom:0px;
text-align:center;
width:100%;
padding-top:100px;
padding-left:25px;
}
#pfoot
{
margin-left:50px;
}
Please provide any insite on how to fix this problem.
Working
<div class="header">
<div style="margin-left:200px;">
<img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
Not working
<div class="header">
<div style="margin-left:200px;">
<img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
On the not working version, you've missed out the closing div for 'header'
I see, your html code is not the same.
1st document
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
<div>
and the second document:
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
<div>
the second document is not correct, as you forgot to close the second div.

My divs are ontop of each other

This is my website layout but for some reason my div left-menu goes through the footer instead of pushing it down where it belongs. I have tried clear:both; and overflow auto but i cant get it to go down. What am I doing wrong here?
here is a jsfiddle: http://jsfiddle.net/Qd3Rr/1/
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Perfect Fluid Width Layout</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
</head>
<body>
<div id="inside">
<div id="header">
<table>
<form action="index.php" method="GET">
<tr><th>Zoek: </th><td><input type="text" name="searchword" value=""></td></tr>
<tr><th><input type="submit" value="submit"></td></tr>
</form>
</table>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>Nieuwe Advertentie</li>
<li>Advertenties</li>
<?php
session_start();
if(isset($_SESSION['username'])){
echo '<li>Logout</li>';
}else{
echo'<li>Register</li>';
echo'<li>Login</li>';
}?>
</ul>
</div>
<div id="mainpage">
<div id="left-menu">
<h2>Kleding</h2>
<a href=>Shirts</a><br>
<a href=>Broeken</a><br>
<a href=>Jassen</a><br>
<a href=>Mutsen</a><br>
<a href=>Sjaals</a><br>
<a href=>Wanten</a><br>
<a href=>Schoenen</a><br>
<a href=>Sportkleding</a><br>
<a href=>Sweaters</a><br>
<a href=>Vesten</a><br>
<a href=>T-shirts</a><br><br>
<a href=>overig</a><br><br>
<h2>Geslacht</h2>
<a href=>Jongens</a><br>
<a href=>Meisjes</a><br>
<a href=>Beide</a><br>
<h2>Maten</h2>
<a href=>50(0-1 mnd)</a><br>
<a href=>56(1-2 mnd)</a><br>
<a href=>62(2-4 mnd)</a><br>
<a href=>68(4-6 mnd)</a><br>
<a href=>74(6-9 mnd)</a><br>
<a href=>80(9-12 mnd)</a><br>
<a href=>86(1-1,5 jaar)</a><br>
<a href=>92</a><br>
<a href=>98</a><br>
<a href=>104</a><br>
<a href=>110</a><br>
<a href=>116</a><br>
<a href=>122</a><br>
<a href=>128</a><br>
<a href=>134</a><br>
<a href=>140</a><br>
<a href=>146</a><br>
<a href=>152</a><br>
<a href=>158</a><br>
<a href=>164</a><br>
<a href=>176</a><br>
</div>
<div id="main-content">
<form action="login.php" method="post">
<table>
<tr><th><td><input type="text" name="username"></td></tr></th>
<tr><th><td><input type="password" name="password"></td></tr></th>
<tr><th><td><input name="submit" type="submit" value="submit"></td></tr></th>
</table>
</form>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
</body>
</html>
css:
#inside{
margin:8%;
padding:10px;
background:white;
}
#header{
border:1px solid;
background:#6F4E37;
height:60px;
}
#navigation{
border:1px solid;
height:29px;
margin-top:2%;
margin-top:1%;
margin-bottom:1%;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
text-decoration: none;
border-right: 1px solid#ccc;
}
#navigation li a:hover {
background:#E42B2B;
}
#mainpage{
margin-top:1%;
margin-bottom:1%;
min-height:300px;
}
#left-menu{
float:left;
width:18%;
background:#6F4E37;
border:1px solid;
}
#left-menu h1{
float:left;
width:18%;
background:#6F4E37;
border:1px solid;
padding:10px;
}
#left-menu a{
padding: 15px;
text-decoration: none;
}
#main-content{
border:1px solid;
width:78%;
padding:5px;
margin-left:21.20%;
min-height:500px;
}
#footer{
border:1px solid;
margin-top:1%;
height:60px;
text-align:center;
}
You should use clear:both; at the end of <div id="mainpage">. Like in the DEMO (below the code).
<div id="mainpage">
<div id="left-menu">
...
</div>
<div id="main-content">
...
</div>
<div class="clear"></div>
</div>
Css:
.clear {clear:both;}
DEMO
Add:
<div style="clear: both;"></div>
just before the 'mainpage' closing div tag.
add display:inline-block to the div so it pushes the footer down

Horizontal Rule between <div>'s

Right now, I have 3 divs Content1, Content2, Content3
I want to add a simple stylized rule to separate the content in each. Here is the code that I am working with.
HTML
<div id="Content1">
<p><strong>Content1</strong></p>
</div>
<div id="Content2">
<p><strong>Content2</strong></p>
</div>
<div id="Content3">
<p><strong>Content3</strong></p>
</div>
I want to add a Horizontal Rule inbetween Content1 and Content2 and between Content2 and Content3.
I have included an image so you can see exactly what I mean.
Thanks!
Don't use <hr> for this, as it's chiefly a semantic element rather than presentational. A bottom border is ideal for this. E.g. http://codepen.io/pageaffairs/pen/pjbkA
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div {width: 500px; padding-bottom: 10px; }
#Content1, #Content2 {border-bottom: 3px solid #4588ba; margin-bottom:10px;}
div p {background: #4588ba; line-height: 150px; font-size: 2em; font-family: sans-serif; color: white; margin: 0; padding-left: 30px;}
</style>
</head>
<body>
<div id="Content1">
<p><strong>Content1</strong></p>
</div>
<div id="Content2">
<p><strong>Content2</strong></p>
</div>
<div id="Content3">
<p><strong>Content3</strong></p>
</div>
</body>
</html>
You can use an hr tag to separate your div elements
<div id="Content1">
<p><strong>Content1</strong></p>
</div>
<hr />
<div id="Content2">
<p><strong>Content2</strong></p>
</div>
<hr />
<div id="Content3">
<p><strong>Content3</strong></p>
</div>
Demo
You can reset the default 3d style of an hr tag using solid border
hr {
margin: 20px 0;
border: 1px solid #f00;
}
if you don't want to use hr tag. you can bound every div with another div and decorate it. Like this:
See demo at : jsfiddle
<div id="Content1" class="divOutside">
<div class="divInside">
<strong>Content1</strong>
</div>
</div>
<div id="Content2" class="divOutside">
<div class="divInside">
<strong>Content2</strong>
</div>
</div>
<div id="Content3" class="divOutside last">
<div class="divInside">
<strong>Content3</strong>
</div>
</div>
And the Css:
.divOutside {
border-bottom:2px blue solid;
width:200px;
padding-bottom:5px;
padding-top:5px;
}
.divInside {
width:200px;
height:80px;
color:#fff;
background-color:blue;
}
.last {
border-bottom:0;
}
Try like this
demo
HTML
<div id="Content1" class="content">
<p><strong>Content1</strong></p>
</div>
<div class="break"></div>
<div id="Content2" class="content">
<p><strong>Content2</strong></p>
</div>
<div class="break"></div>
<div id="Content3" class="content">
<p><strong>Content3</strong></p>
</div>
CSS
.content {
padding:20px;
background:#3E87BC;
font-size: 24px;
margin-bottom:10px;
font-family: Arial;
color: #FFF;
}
.break {
background: #3E87BC;
height: 2px;
margin: 5px 0 10px 0;
width: 100%;
}
<div id="Content1" style="background-color:#2554C7;width:300px;height:50px;">
<p style="padding-left:40px;padding-top:10px;color:white;font-size:26px;"><strong>Content1</strong></p>
</div>
<div id="Content4" style="background-color:#2554C7;width:300px;height:5px;">
<hr style="color:#2554C7;"></hr>
</div>
<div id="Content2" style="background-color:#2554C7;width:300px;height:50px;">
<p style="padding-left:40px;padding-top:10px;color:white;font-size:26px;"><strong>Content2</strong></p>
</div>
<div id="Content5" style="background-color:#2554C7;width:300px;height:5px;">
<hr style="color:#2554C7;"></hr>
</div>
<div id="Content3" style="background-color:#2554C7;width:300px;height:50px;">
<p style="padding-left:40px;padding-top:10px;color:white;font-size:26px;"><strong>Content3</strong></p>
</div>
<div id="Content6" style="background-color:#2554C7;width:300px;height:5px;">
<hr style="color:#2554C7;"></hr>
</div>

Image not Going into Divider?

Im working on a website, and Im trying to put a navigation bar in the navigation divider I made, however when I put the image in, it doesnt go into the divider, even though its between the tags.
Heres what it looks like:
Heres My code:
CSS:
body{background-color:#030303}
#wrapper {width:800px;
margin:0 auto;
}
#header {background-color:yellow;
text-align:center;
height:50px;
}
#footer{clear:both;
background-color:yellow ;
text-allign:center;
}
#logo {float:left;
width: 139px;
background-color: black;
text-align: left;
height:70px;}
#navigation {width: 800px;
background-color:#EDEDED;
height:50px;
}
#sidebar {float:left;padding:20px; background-color:green;text-align:right;width:100px;height:460px;}
#content {float:right;width: 620px;
padding:20px; background-color:gray;
text-align:left; height:500px;
border-color:#0017FF;
}
HTML:
<! DOCTYPE html>
<html>
<head> <title>Website</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
This is my header.
</div>
<div id="logo">
<br/>
<img src="images/SubZer0-logo-and-name.png" width="140" height="50" align="left"></div>
<div id="navigation">
<img src="images/subzero-banner-new.png" width="750" height="45" align="top">
</div>
<div id="content">
This is my content box.
</div>
<div id="sidebar">
This is my sidebar.
</div>
<div id="footer">
This is my footer.
</div>
</body>
</html>
How Do I fix this?
Thank you!
Never Mind, I fixed it... Turns out the image was too big for the container.. I dont understand why though, Since the Containter was 800x50 and the image was 750x45, but it works now and thats what matters.

Container Div Won't Appear

My page has a layout with a top, middle and bottom section (they are all divs.) So far I have only been able to get the top and bottom areas to appear correctly. Even though the content of the middle is exactly the same as the bottom it just wont appear, therefore I am assuming a simple and obvious syntax era has most likely occurred, the thing is I have spent hour reading and troubleshooting to no avail, so please help!
Here is my HTML...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Saspadidious</title>
<link rel="stylesheet" type="text/css" href="CSS\home.css">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>
<a href="home.html">
<div id="top">
<h1 class="header9">Sarspadidious</h1>
</div>
</a>
<div id="middle">
<div class="subOrange">
<h1 class="header6">Who?</h1>
</div>
<div class="subOrange">
<h1 class="header6">What?</h1>
</div>
<div class="subOrange">
<h1 class="header6">Why?</h1>
</div>
</div>
<div id="bottom">
<div class="subRed">
<a href="software.html">
<h1 class="header4">Software</h1>
</a>
</div>
<div class="subRed">
<a href="support.html">
<h1 class="header4">Support</h1>
</a>
</div>
<div class="subRed">
<a href="about.html">
<h1 class="header4">About</h1>
</a>
</div>
<div class="subRed">
<a href="news.html">
<h1 class="header4">News</h1>
</a>
</div>
</div>
</body>
</html>
And my CSS
body {
margin:0;
padding:0;
background-image:url('../Images/arches.PNG');
font-size:100%;
}
a {
text-decoration:none;
color:rgb(44,44,44);
}
#font-face {
font-family:"Mission Script";
src:url('../Other/Mission-Script.OTF');
}
#top {
position:relative;
width:90%;
margin-left:5%;
margin-right:5%;
margin-top:5%;
padding-top:4%;
padding-bottom:3%;
background-color:rgb(197,129,84);
border-color:rgb(44,44,44);
border-style:solid;
border-width:5px;
border-radius:15px;
-moz-border-radius:15px;
}
#middle {
position:relative;
width:95%;
margin-top:5%;
margin-left:2.5%;
margin-right:2.5%;
}
#bottom {
position:relative;
width:95%;
margin-top:5%;
margin-bottom:5%;
margin-left:2.5%;
margin-right:2.5%;
}
.subOrange {
position:relative;
width:26.6%;
margin-left:2.5%;
margin-right:2.5%;
padding-top:3%;
padding-bottom:3%;
background-color:rgb(255,159,72);
border-color:rgb(44,44,44);
border-style:solid;
border-width:5px;
border-radius:15px;
-moz-border-radius:15px;
float:left;
}
.subRed {
position:relative;
width:18.75%;
margin-left:2.5%;
margin-right:2.5%;
padding-top:3%;
padding-bottom:3%;
background-color:rgb(255,69,70);
border-color:rgb(44,44,44);
border-style:solid;
border-width:5px;
border-radius:15px;
-moz-border-radius:15px;
float:left;
}
.header4 {
font-family:"Mission Script";
font-size:4em;
text-align:center;
margin:0;
color:rgb(44,44,44);
}
.header6 {
font-family:"Mission Script";
font-size:6em;
text-align:center;
margin:0;
color:rgb(44,44,44);
}
.header9 {
font-family:"Mission Script";
font-size:9em;
text-align:center;
margin:0;
padding:0;
color:rgb(44,44,44);
}
So there it all is, the text in the middle div also does not display correctly, it does not become the right size or use Mission Script as its font.
EDIT: Here is a screenshot of what my browser does when it renders it.
I have figured it out! Yes the problem was simple. The page that has the problem in question is an about page, (about.html.)
During it's creation I copied and pasted much of it's code from the home page, (home.html.) What I forgot to do was link it to the new CSS sheet I created for it (about.css) as you can see in my original code above it is still linked to home.css.
I knew it was going to be obvious! THE RELIEF IS UNCANNY!
Here is the problem in code...
<link rel="stylesheet" type="text/css" href="CSS\home.css">
Change to
<link rel="stylesheet" type="text/css" href="CSS\about.css">
Thanks everyone, sorry for wasting your expertise on such an obvious error. Bloody hell.
Works fine for me on chrome for windows as well. However it fails the w3c validation for the doctype specified in your html either way, id start here http://validator.w3.org/ and make sure your markup matches the doctype you're going for.
For a start, you'll need to change this:
<a href="home.html">
<div id="top">
<h1 class="header9">Sarspadidious</h1>
</div>
</a>
to this:
<div id="top">
<h1 class="header9">Sarspadidious</h1>
</div>