I am programming a website for work (have almost no coding experience, so I might be missing crucial info - will update as needed). DOCTYPE html Public, link href="includes/style.css" rel="stylesheet" type="text/css" media="all"
<div id="main">
<table border="1" style="width:100%">
<...>
</table>
</body>
</html>
</div><!--#main -->
I've set up a table of names using following formatting in the .html doc:
<div id="main">
<table border="1" style="width:100%">
<...>
</table>
</body>
</html>
</div><!--#main -->
Now, in style.css, tables are defined as follows
table.hist-table {
width:98%;
border: 1px solid #CCC;
font-size:12px;
border-spacing:0px;
}
.hist-table tr{
border:1px solid #CCC;
}
.hist-table .row1 td {
padding: 4px;
margin: 3px;
border: 0px solid #ccc;
vertical-align: text-top;
background-color: #eff0f1;
}
.his-table th {
padding:4px;
text-align: left;
background-color: #00274c;
color: #FFF;
font-weight: bold;
}
#header {
margin-top: 30px;
clear:both;
background: #536a93;
background: #00274c;
padding: 0px 0 10px 60px;
margin: 0 4.6%
font-size: 11px;
max-width: 1000px;
}
For some reason, when opening the .html webpage, the table does not include a border, so it is very difficult to distinguish the rows of text from one another. Does anyone have a possible solution?
You're .html document should be set up as follows,
<...DOCTYPE etc...>
<html>
<head>
</head>
<body>
<div id="main">
<table>
Table contents...
</table>
</div>
</body>
</html>
This is because your tags should encompas almost all of your document. The and tags should both be encompased by the tag. Then within your tag should be all of your external links to your css files, external fonts etc.
Inside of your tag should be all of the , , and all of the other tags.
I hope this helps. I may not have understood all of your points but it looks the be the arrangement of your html document that is the problem. :)
Related
I'm attempting to break my html into separate php files and have an error I can't seem to crack. Here is the first file, index.php
.topheader {
background-color: #404040;
color: white;
padding: 16px;
}
.footer {
background-color: #404040;
color: white;
padding: 16px;
}
<head>
<link rel="stylesheet" href="./css/main.css">
</head>
<div class="topheader">
<h1>KivaGIS</h1>
</div>
<div class="footer">
<h1>Footer</h1>
</div>
As of right now, only .topheader is applying to the html. I understand that both classes are identical, I plan to expand on each once I confirm they are applying individually. Can someone please take a look and advise why .footer wouldn't be applying to the sheet?
Here is a sample of the output on my machine
Seems working for me, .topheader and .footer having different styles
.topheader {
background-color: #404040;
color: blue;
padding: 16px;
}
.footer {
background-color: #404040;
color: red;
padding: 16px;
}
<head>
<link rel="stylesheet" href="./css/main.css">
</head>
<div class="topheader">
<h1>I AM BLUE</h1>
</div>
<br>
<div class="footer">
<h1>I AM RED</h1>
</div>
This is Applying to your file, both .topheader and .footer class contain same style. just change the style values, you can see the difference
.topheader {
background-color: #404040;
color: white;
padding:16px;
}
.footer {
background-color: #FFEE00;
color: Red;
padding:16px;
}
Check this code once and in your code check once href of your stylesheet.
<!DOCTYPE html>
<html>
<head>
<style>
.topheader {background-color: #404040;color: white;padding:16px;}
.footer {background-color: #404040;color: white;padding:16px;}
</style>
</head>
<body>
<div class="topheader">
<h1>KivaGIS</h1>
</div>
<div class="footer">
<h1>Footer</h1>
</div>
</body>
As many on here pointed out, the code itself was fine. I did not realize that Chrome would cache the CSS file. I've spent all night updating the file without seeing any changes because Chrome was using an older version.
As you can see from the attached screencap, I disabled the cache and everything is working perfectly now.
<html>
<head>
<title>QuickLinks</title>
<style>
body{
overflow: all;
width: 100px;
height: 100px;
}
a{
color: blue;
text-decoration: none;
}
</head>
<body>
Back to main
<hr id="85">
<hr id="85">
<div id="83">
Issues
</div>
</body>
</html>
Will Not render in chrome. Not sure about others. File is saved as google.html and it is for a directory style chrome extension and will not render anywhere within chrome.
http://validator.w3.org/#validate_by_input
use this more.
There are 7 errors I think according to the validator.
I noticed that your missing the <./style> tag. (ignore the '.').
I founded some errors in your code.
1.In your code there is no end style tag.
2. tag end with after end style tag.
I modifed your code. It's wroking fine.
<style>
body{
overflow: all;
width: 100px;
height: 100px;
}
a{
color: blue;
text-decoration: none;
}
</style>
<head> </head>
<title>QuickLinks</title>
<body>
Back to main
<hr id="85">
<hr id="85">
<div id="83">
Issues
</div>
</body>
I'm currently working on some simple gallery, that should show thumbnails of a fixed size of 148px.
When I specify <!doctype html> at the very beginning of the file it messes up my style so that it looks like on this picture.
Without this line (I guess the browser is working in HTML4 mode then) it looks correct:
Take a look at the file by yourself: http://ablage.stabentheiner.de/2013-08-10_gallery.html
New file version: http://ablage.stabentheiner.de/2013-08-10_gallery2.html same file with different doctype: http://ablage.stabentheiner.de/2013-08-10_gallery2_html4.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Gallerie</title>
<base target="Hauptframe">
<style>
body {
background-color: #CCFFCC;
background-image:url(../background.gif);
}
table {
border:none;
border-spacing:0;
}
img {
border:none;
}
A:hover {
color: #FF0000;
font-weight: bold
}
.imagefloat {
border: medium solid #FFF;
float: left;
margin-top: 0px;
margin-right: 16px;
margin-bottom: 20px;
margin-left: 0px;
}
.nowrap {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 16px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.nowrapline2 {
font-size: 12px;
}
.nowrapline3 {
font-size: 10px;
}
.error {
font-weight: bold;
color: #F00;
}
.caption_cell {
background-color: #FFF;
width: 148px;
height: 80px;
}
</style>
</head>
<body>
<div class="imagefloat">
<table>
<tr>
<td><img src="http://placehold.it/148x148" width="148" height="148" alt=""></td>
</tr>
<tr class="caption_cell">
<td>
<p class="nowrap">Title</p><p class="nowrap nowrapline2">Subtitle</p><p class="nowrap nowrapline3">Copyright</p>
</td>
</tr>
</table>
</div>
<div class="imagefloat">
<table>
<tr>
<td><img src="http://placehold.it/148x148" width="148" height="148" alt=""></td>
</tr>
<tr class="caption_cell">
<td>
<p class="nowrap">Title</p><p class="nowrap nowrapline2">Subtitle</p>
</td>
</tr>
</table>
</div>
</body>
The solution is simple enough. Images by default are handled as inline objects. For inline rendering, a minimum vertical clearance between rows is generally required and this is added by the browser for better readability. To remove this additional clearance try applying 'display: block' to these images.
Okay, your problem here's simple: you aren't using valid HTML5. The first thing you should always check is that your code validates as well-formed HTML, which yours doesn't. After that, check your CSS too; but just be aware that if the problem is that your site displays more nicely in HTML4 mode than HTML5 mode, then that's not a bug, that means that you've done something wrong writing your code.
Your first step here is to fix all of the glitches which the W3C validator has pointed out; if that doesn't fix the problem, then take another look at your CSS.
I have this html and css code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div.container{
border: 1px solid #F00;
}
a.padded
{
font-size: 14px;
font-weight: bold;
text-decoration: none;
background-color: #F0F0F0;
border: 1px solid #666666;
padding: 15px;
margin: 10px;
border-radius: 5px;
box-shadow: #CCC 2px 2px 2px;
color: #333333;
}
</style>
</head>
<body>
<div class="container">
my padded link
</div>
<div>Some other content</div>
</body>
</html>
I was expecting the padded link to be contained in it's parent DIV block where the DIV would expand to whatever height of the padded link. However it seems the link padding is ignored by the DIV and everything else on the page.
Why does this happen and how do I properly pad a link?
What you need to do is, give your anchor tag an display:block property.
a.padded {
display: block;
/* display:inline-block; should
work too but is not supported in some version of IE */
}
Anchor tags are inline objects.
Add display: inline-block; to .padded. and it should work.
http://jsfiddle.net/6h7MY/
Because I've asked myself this question recently, this article is a big help as to why this is happening. The relevant bit is:
The W3C’s CSS2 spec states that for Inline, non-replaced elements,
the ‘height’ property doesn’t apply, but the height of the box is given
by the ‘line-height’ property.
I want to define the style of Div based on a CSS file. The CSS code I have written is:
.body
{
text-align: center;
padding: 1px;
margin: 1px;
color: black;
background-color:lightgrey;
}
I want the background of each Div section to be light-grey. What's wrong with the above code?
Edited:
This is my HTML code. I changed the Div class as suggested below, but it is not working. Please also check whether the Link tag contains path correctly or not. The CSS file is located in a Lib folder, up-one-level.
<!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=iso-8859-1">
<title>Add/Update Political Party</title>
<link rel="stylesheet" href=".\Lib\entryformstyle.css" type="text/css"/>
</head>
<body>
<div id="sectionEntryForm" class="div">
<table id="tblEntryForm" cols="2">
<tr>
<td colspan="2" align="center">Add/Update Political Party</td>
</tr>
<tr>
<td>Party full name:</td>
<td><input id="inPartyFullName" name="inPartyFullName" accept="text/plain" maxlength="80" class="inputBoxStyle"></td>
</tr>
<tr>
<td>Party short name (initials):</td>
<td><input id="inPartyShortName" name="inPartyShortName" accept="text/plain" maxlength="80" class="inputBoxStyle"></td>
</tr>
</table>
</div>
</body>
</html>
Nothing, you just have to use <div class="body"> to make the DIV pick it up.
ALL DIVs:
div
{
text-align: center;
padding: 1px;
margin: 1px;
color: black;
background-color:lightgrey;
}
DIVs with class "body":
div.body
{
text-align: center;
padding: 1px;
margin: 1px;
color: black;
background-color:lightgrey;
}
If your CSS file is up one level, you have to include it like this:
<link rel="stylesheet" href="../lib/entryformstyle.css" type="text/css"/>
This only works on the class "body", that is
<div class="body">
If you want it to work on any divs, the selector (".body" in your sample code) should be div.
try deleting the period (.) before 'body'
edit: it is also probably worth having a quick read of this post
it explains the difference between "." and '#' when defining styles.
For this style to work, your div needs to be written like this:
<div class="body">Your text here</div>
In other words, the . in front of the body in your css tells the browser to apply the style in the braces to an element whose class is named body.
Try changing:
background-color:lightgrey;
to
background-color:silver;
or
background-color:#CCC;
This is assuming that your div has the body class applied:
<div class="body"></div>
Either use
div
{
text-align: center;
padding: 1px;
margin: 1px;
color: black;
background-color:lightgrey;/*#CCC*/
}
to set background color of all div
Or use
div.body
{
text-align: center;
padding: 1px;
margin: 1px;
color: black;
background-color:lightgrey;
}
and set <div class="body"></div> for each div.
You can use inline stylesheet as :
<div style="background-color:lightgrey;"></div>