So I'm making a webpage in html5 for a school project, and some of my hyperlinks that were working before have become completely broken, so much so that even the a:hover attribute doesn't work.
Here is the exact code (comments included) for my About page, on which the hyperlinks on the left do work:
#charset "UTF-8";
/* CSS Document */
#container {
width:1024px;
height:800px;
background-image:url(Images/All%20Pages/Background.png);
}
header{
width:1024px;
height:100px;
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
background-image:url(Images/All%20Pages/Top_Banner.png);s
display:inline;
}
footer{
width:1024px;
height:80px;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
background-image:url(Images/All%20Pages/Bottom_Border.png);
}
#content{
width:869px;
height:620;
padding-left:155px;
padding-bottom:80px;
position:absolute;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
}
h2{
color:#FFF;
}
h4{
color:#FFF;
}
p{
color:#FFF;
}
#left_bar{
background-image:url(Images/All%20Pages/Sidebar.png);
height:700px;
width:155px;
text-align:center;
}
a{
text-decoration: none;
color:#FFF;
}
a:hover{
color:#000;
text-decoration: none;
}
<!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>
<link rel="stylesheet" type="text/css" href="About.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>[Title Goes Here]</title>
</head>
<body>
<div id="container">
<header>
<div style="line-height:5%;">
<br>
</div>
<h2>[Title Goes Here]:</h2>
<h4>Adventures in Design</h4>
</header>
<!-- CONTENT DIV HERE -->
<div id="left_bar">
<br />
<h2>ABOUT</h2>
<br />
<h2>PORTFOLIO</h2>
<br />
<h2>CONTACT</h2>
</div>
<footer>
<br />
<p>Last Updated: 05-08-2017</p>
</footer>
</div>
</body>
</html>
<!--<div style="border-left:1px solid #000;height:500px"></div>
for vertical line -->
Here is the complete code for my main page, on which only the link leading back to the main page works:
#charset "UTF-8";
/* CSS Document */
#container {
width:1024px;
height:800px;
background-image:url(Images/All%20Pages/Background.png);
}
header{
width:1024px;
height:100px;
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
background-image:url(Images/All%20Pages/Top_Banner.png);s
display:inline;
}
footer{
width:1024px;
height:80px;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
background-image:url(Images/All%20Pages/Bottom_Border.png);
}
#content{
width:869px;
height:620;
padding-left:155px;
padding-bottom:80px;
position:absolute;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
}
h2{
color:#FFF;
}
h4{
color:#FFF;
}
p{
color:#FFF;
}
#left_bar{
background-image:url(Images/All%20Pages/Sidebar.png);
height:700px;
width:155px;
text-align:center;
}
a{
text-decoration: none;
color:#FFF;
}
a:hover{
color:#000;
text-decoration: none;
}
<!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>
<link rel="stylesheet" type="text/css" href="Front_Page.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>[Title Goes Here]</title>
</head>
<body>
<div id="container">
<header>
<div style="line-height:5%;">
<br>
</div>
<h2>[Title Goes Here]:</h2>
<h4>Adventures in Design</h4>
</header>
<div id="content">
<h2> Hello and welcome to [Title Goes Here], <br />
one adventure in design, from websites to photos and beyond!</h2>
<div style="line-height:217px;">
<br />
</div>
<img src="Images/Front Page/Landscape.png" />
</div>
<div id="left_bar">
<br />
<h2>ABOUT</h2>
<br />
<h2>PORTFOLIO</h2>
<br />
<h2>CONTACT</h2>
</div>
<footer>
<br />
<p>Last Updated: 05-08-2017</p>
</footer>
</div>
</body>
</html>
Any answers to this would be much appreciated, as I have yet to find anything wrong. Thank you in advance for any advice you could throw my way
Two things to note:
First, you have an improperly formatted link href.
href="Title Goes Here.html"
As a rule, it is best practice to omit spaces in file names and replace them with dashes instead.
href="title-goes-here.html"
Second, when it comes to writing URL paths for things like images, if the goal is to grab files from a relative root directory, you should lead all URLs with a forward slash.
background-image:url(/Images/All%20Pages/Background.png);
Your #content element is overlaid on top of your #left_bar element because of the padding-left. You can use margin-left instead.
#charset "UTF-8";
/* CSS Document */
#container {
width:1024px;
height:800px;
background-image:url(Images/All%20Pages/Background.png);
}
header{
width:1024px;
height:100px;
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
background-image:url(Images/All%20Pages/Top_Banner.png);s
display:inline;
}
footer{
width:1024px;
height:80px;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
background-image:url(Images/All%20Pages/Bottom_Border.png);
}
#content{
width:869px;
height:620;
margin-left:155px;
padding-bottom:80px;
position:absolute;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
}
h2{
color:#FFF;
}
h4{
color:#FFF;
}
p{
color:#FFF;
}
#left_bar{
background-image:url(Images/All%20Pages/Sidebar.png);
height:700px;
width:155px;
text-align:center;
}
a{
text-decoration: none;
color:#FFF;
}
a:hover{
color:#000;
text-decoration: none;
}
<!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>
<link rel="stylesheet" type="text/css" href="Front_Page.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>[Title Goes Here]</title>
</head>
<body>
<div id="container">
<header>
<div style="line-height:5%;">
<br>
</div>
<h2>[Title Goes Here]:</h2>
<h4>Adventures in Design</h4>
</header>
<div id="content">
<h2> Hello and welcome to [Title Goes Here], <br />
one adventure in design, from websites to photos and beyond!</h2>
<div style="line-height:217px;">
<br />
</div>
<img src="Images/Front Page/Landscape.png" />
</div>
<div id="left_bar">
<br />
<h2>ABOUT</h2>
<br />
<h2>PORTFOLIO</h2>
<br />
<h2>CONTACT</h2>
</div>
<footer>
<br />
<p>Last Updated: 05-08-2017</p>
</footer>
</div>
</body>
</html>
There's also an extra "s" in the .header css section. Check the background-image line after the ";".
header{
width:1024px;
height:100px;
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
background-image:url(Images/All%20Pages/Top_Banner.png);s
display:inline;
}
Related
I don't know how to get rid of the bars on the side when I hover over the navbar. Can anyone help? I dont want to change the look or position of the navigation bar. I only want to make the parts that are not affected by hovering affected by it.
HTML:
<!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>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Site</title>
</head>
<body>
<div id="container">
<div id="body">
<center>
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Biography</li>
</ul>
</center>
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
#container {
margin-left:auto;
margin-right:auto;
width:960px;
background-color:#666666;
}
#body {
background-color:#666666;
width:960px;
height:500px;
border:2px solid #FFFFFF;
margin-top:50px auto;
}
.navbar {margin:0px;
background-color:#66FF33;
text-align:center;
list-style:none;
border-bottom:none;
padding-left:0px
}
ul.navbar li {
width:19%;
display:inline-block;
}
ul.navbar a {
display:block;
width:100%;
margin:0px;
padding:10px 0px;
text-decoration:none;
}
ul.navbar a:hover {
background-color:#33FFD7;
}
body {
background-color:#333333;
}
Try removing all the space between your <li> elements. The spaces are creating extra, well, space between links. This adds to the 100% width 5 elements at 20% width should be creating.
<li>Home</li><li>About</li><li>Contact</li><li>Services</li><li>Biography</li>
I hope that there is a more satisfying answer than this, but if you just want the quick and easy, this will work.
JSFiddle
Hi,
I am trying to code a design but I cannot get it aligned correctly no matter what I try it wont stay in the same place nicely.
Here is what it looks like
http://postimg.org/image/tuctjuglz/
Here is what it is meant to be like
http://postimg.org/image/4aajdev87/
and here is my code hopefully it can be fixed.
<!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>a</title>
<link rel="stylesheet" type="text/css" href="style/css/reset.css"/>
<style>
body {
color:#ffffff;
background:#1f1f1f url(style/images/background.png) repeat-x center top;
}
.profileMidSection {
height:239px;
width:860px;
color:#ffffff;
background:#2e2e2e;
clear:both;
}
ul.profileMidSection {
list-style:none;
vertical-align:middle;
line-height:47px;
}
ul.profileMidSection li {
height:47px;
vertical-align:middle;
clear:both;
}
ul.profileMidSection li a{
height:47px;
width:175px;
background:#333333;
text-decoration:none;
color:#737373;
float:left;
text-align:left;
padding-left:25px;
font-family: 'Open Sans', sans-serif;
font-weight:600;
font-size:10.5pt;
margin-left:-40px;
}
ul.profileMidSection li a:hover{
color:#ffffff;
border-left:3px solid #83bdf2;
width:172px;
}
.profileCaption {
background:#3c3c3c;
width:200px;
height:35px;
font-family: 'Open Sans', sans-serif;
font-weight:600;
font-size:11pt;
color:#ffffff;
border-radius:0 0 4px 4px;
-webkit-border-radius:0 0 4px 4px;
}
</style>
</head>
<body>
<div class="profileMidSection">
<ul class="profileMidSection">
<li>Recommended Games</li>
<li style="margin-top:1px;">Your Friends Played</li>
<li style="margin-top:1px;">You Liked</li>
<li style="margin-top:1px;">Your Friends Liked</li>
<li style="margin-top:1px;">Disliked</li>
</ul>
<img src="games/images/caption1.png" />
<div class="profileCaption">Angry Birds™</div>
<img src="games/images/caption2.png" />
<div class="profileCaption">Mario Kart Pro™</div>
<img src="games/images/caption3.png" />
<div class="profileCaption">Lazy™</div>
</div>
</body>
</html>
Wrap each image and caption in a div with a class like game-thumb and float the class left. Then, enclose all games in another div container, and set overflow:hidden on it.
I have a from inside a div (with a border). This looks good on Firefox and IE 10 (not sure about older versions of IE). However, sometimes IE activates the compatibility mode and then the form (input box and submit button) fall out of the div. Is there some css tweak to prevent this?
My HTML:
<!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>
<title>test</title>
</head>
<body>
<div class="box">
<h2 style="display:inline;">Some sample text</h2>
<form id="frm">
<input type="text" id="tb" />
<input type="submit" class="button" />
</form>
</div>
</body>
</html>
and my css
.box {
display:block;
height:40px;
magin-left:5px;
padding:5px 0 0 10px;
width:740px;
background:green;
border:1px solid black;
}
h2 {
margin:0 0 7px;
padding:0;
font:1.6em Arial;
letter-spacing: -1px
}
#tb {
width:225px
}
.button {
float:right;
width:93px;
margin-left:5px;
padding:2px 0
}
form {
float:right;
}
#frm {
margin-right:10px;
margin-top:2px;
width:330px;
}
Live example at jsfiddle:
http://jsfiddle.net/d3EdW/1/
Screenshot:
Since your form is floated, try clearing it by putting overflow: auto; on a parent of the form, such as .box.
I'm having a problem, which already searched the internet but can not solve. I have an iframe, and inside I have a page that is loading the following CSS.
html, body {
position:relative;
height:100%;
}
.c1{
float:left;
text-align:left;
margin-top:1px;
margin-bottom:1px;
width:100%;
}
.c2{
float:left;
text-align:left;
margin-top:1px;
margin-bottom:1px;
width:50%;
}
.cvalue{
float:left;
width:40%;
padding-right:3px;
text-align:right;
}
.titulo{
DISPLAY: inline-block;
padding-left:5%;
}
.abaA{
display:inline-block;
text-align:center;
position:relative;
margin-top:1px;
width:100px;
border:#000 solid 1px;
border-bottom:0px;;
background-color:#F9F9F9;
}
.abaA:hover {
background-color: #F9F9F9;
cursor: pointer;
}
.abaF{
display:inline-block;
text-align:center;
position:relative;
margin-top:1px;
width:100px;
border:#000 solid 1px;
border-bottom:0px;
background-color:#EEE;
}
.abaF:hover {
background-color: #F9F9F9;
cursor: pointer;
}
.areaA{
float:left;
position:relative;
border:#000 solid 1px;
border-top:0px;
background-color:#F9F9F9;
}
.areaF {
float:left;
position:relative;
border:#000 solid 1px;
border-top:0px;
display:none;
background-color:#F9F9F9;
}
And the following HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script language="JavaScript" type="text/javascript" src="/csp/broker/cspxmlhttp.js"></script>
<script language="JavaScript" type="text/javascript" src="/csp/broker/cspbroker.js"></script>
<script language="JavaScript" type="text/javascript" src="/csp/cratera/sys/function.js"></script><script language="JavaScript">cspHttpServerMethod("KJnjcEnDVCs$h8WvTvpH0LQbuqWLNC_moK_PLd1scC8cNx6fZxqGz_mS6Q0_HRLRO2oUxExyIGwafKPhULXcfw--")</script>
<link rel="stylesheet" type="text/css" href="/csp/cratera/themes/default/css/style.css">
<title>Cadastro de Empresa</title>
<script language="JavaScript">
function Salvar(){
$CR.Submit("xiHqkWth9sV+2005/P0B5LY6k4AfsjV4hbGb3cevM8A",$("form"));
}
function Consultar(){
$CR.Submit("tD3yLZP6yievtRoRMZLtjvnyw4Udr3eWUQNev/osmtg",$("form"));
}
function Novo(){
$CR.ClearAll($("form"));;
$CR.Submit("4evrj0yE4oGqBy1wKeKE+RJP0R4192anMoOcSNx5gJE",$("form"));
}
</script>
</head>
<body>
<div class="titulo">Cadastro de Empresa</div><br><hr size="1" style="margin:0px">
<div class="c1" style="text-align:right;">
<input id="btnCad1" name="btnCad1" onClick="Salvar();" type="button" value="Cadastrar"></input>
<input id="btnNov1" name="btnNov1" onClick="Novo();" type="button" value="Novo"></input>
<input id="btnCon1" name="btnCon1" onClick="Consultar();" type="button" value="Consultar"></input>
</div>
<br>
<span class="abaA" id="aba.endereco.cad" onClick="mudarAba(this);">Cadastro</span>
<span class="abaF" id="aba.endereco.ent" onClick="mudarAba(this);">Entrega</span>
<span class="abaF" id="aba.endereco.cob" onClick="mudarAba(this);">Cobrança</span>
<br>
<div class="areaA" id="area.endereco.cad" style="width:100%;height:90%;">
<br>
<form id="form">
<!-- ALL FORM CODE HERE -->
</form>
</div>
<div class="areaF" id="area.endereco.cob" style="width:100%;height:90%;">
<br>
Hello!
</div>
<div class="areaF" id="area.endereco.cob" style="width:100%;height:90%;">
<br>
Hello!
</div>
</body>
</html>
As can be seen in the settings tab (class = "abaA" and class = "abaF") I am not able to put the "height: 90%." It works in Mozilla and Internet Explorer, but in Chrome and Safari - both important to my project - it does not work. I have looked on the internet, and many people have this problem, and none of the solutions suggested worked for me.
Appreciate any help.
Thanks
Have a div before
<div class="areaA" id="area.endereco.cad" ...
So something like
<div>
<br>
<span class="abaA" id="aba.endereco.cad" onClick="mudarAba(this);">Cadastro</span>
<span class="abaF" id="aba.endereco.ent" onClick="mudarAba(this);">Entrega</span>
<span class="abaF" id="aba.endereco.cob" onClick="mudarAba(this);">Cobrança</span>
<br>
</div>
<div class="areaA" id="area.endereco.cad" style="width:100%;height:90%;">
<br>
<form id="form">
<!-- ALL FORM CODE HERE -->
</form>
</div>
will do the trick.
By the way you should check your code, it is far from being valid.
I know this question gets asked a lot because I have looked at many "solutions" trying to get this to work for me. I can get it to work if I hack up the html but I want to use all CSS. All I want is a header with two columns below it, and I want these three items to fill the entire page/screen, and I want to do it with CSS and without frames or tables. The XAMPP user interface looks exactly how I want my page to look, but again, I do not want to use frames. I cannot get the two orangeish colored columns to extend to the bottom of the screen. I do have it so it looks like the right column extends to the bottom of the screen just by changing the body background color to the same color as the background color of the right column, but I would like both columns to extend to the bottom so I didn't have to do that. Here is what I have so far:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY SITE</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="masthead">
MY SITE</div>
<div id="left_col">
Employee Management<br />
Add New Employee<br />
Edit Existing Employee<br />
<br/>
Load Management<br />
Log New Load<br />
Edit Existing Load<br />
<br/>
Report Management<br />
Employee Report<br />
Load Report</div>
<div id="page_content">
<div id="page_content_heading">Welcome!</div>
Lots of words</div>
</div>
</body>
</html>
CSS
#masthead {
background-color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size:xx-large;
font-weight:bold;
padding:30px;
text-align:center;
}
#container {
min-width: 600px;
min-height: 100%;
}
#left_col {
padding: 10px;
background-color: #339933;
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: large;
font-weight: bold;
width: 210px;
}
#page_content {
background-color: #CCCCCC;
margin-left: 230px;
padding: 20px;
}
#page_content_heading {
font-family:Arial,Helvetica,sans-serif;
font-size:large;
font-weight:bold;
padding-bottom:10px;
padding-top:10px;
}
a {
color:#0000FF;
font-family:Arial,Helvetica,sans-serif;
font-size:medium;
font-weight:normal;
}
a:hover {
color:#FF0000;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
background-color: #CCCCCC;
}
Something like this should work
<div id="header" style="position:absolute; top:0px; left:0px; height:100px; width:100%; overflow:hidden; background-color:#00FF00">
</div>
<div id="leftnav" style="position:absolute;top:100px; left:0px; width:100px; bottom:0px; overflow:auto;background-color:#0000FF">
</div>
<div id="content" style="position:absolute;top:100px; left:100px; bottom:0px; right:0px; overflow:auto;background-color:#FF0000">
</div>
Well, this is your code altered to fit what you want:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY SITE</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
html, body {padding:0;margin:0;background-color:#CCCCCC;height:100%;}
#hd{position:absolute;top:0;left:0;width:100%;height:100px;background-color:green;z-index:1;}
#col{float:left;width:230px;height:100%;background-color:red;}
#bd{width:100%;height:100%;background:pink;}
.content{padding:100px 0 0 230px;}
</style>
</head>
<body>
<div id="hd">MY SITE</div>
<div id="col">
Employee Management<br />
Add New Employee<br />
Edit Existing Employee<br />
<br/>
Load Management<br />
Log New Load<br />
Edit Existing Load<br />
<br/>
Report Management<br />
Employee Report<br />
Load Report
</div>
<div id="bd">
<div class="content">
Lots of words
</div>
</div>
</body>
</html>
Please not that inside containers like the one on the body div may be required to allow proper format of your html elements!
Hope this helps... :)