I'm trying to use classes and/or id's to style paragraphs and other elements. I've used them successfully before, but on this page the only id that works is for styling an image. However, if I use the tag for a paragraph then the styling works in CSS. I would like the id "#1p" in the CSS to allow me to style the corresponding paragraph. Right now this id acts as if it is not there. Below is my code:
table {
position: absolute;top: 50px;
left: 225px;
width: 650px;
border: 10px solid black;
border-collapse: collapse;
padding: 5px;
}
th {
font-family: sans-serif;
font-size: 24px;
text-align: left;
color: #f2f2f2;
background-color: black;
}
.positionImage {
position: absolute;
top: 50px;
left: 140px;
border: 10px solid black;
}
h2 {
text-align: center;
position: absolute;
top: 160px;
left: 300px;
}
#1p {
position: absolute;
top: 200px;
left: 175px;
font-size: 18px;
}
<img src="Pen_MLA.jpg" class="positionImage">
<table>
<th colspan="2">The Writing Center at Bristol Community College</th>
<tr>
<td><b>Building B - Room 117</b></td>
<td><b><i>E-mail: writing.center#bristolcc.edu</i></b></td>
</tr>
<tr>
<td><b>508-678- 2811 X2544<b></td>
<td><b><i>Website: www.bristolcc.edu/writingcenter</i></b></td>
</tr>
</table>
<h2>Quoting and Citing Poetry (MLA)</h2>
<p id="1p">(Material is drawn from the <u>MLA Handbook for Writers of
Research Papers</u>, 6th Edition.)</p>
A CSS ID selector consists of:
a "number sign" (U+0023, #) immediately followed by the ID value, which must be an CSS identifiers.
An identifier:
cannot start with a digit
If you want to represent an ID starting with a digit then you must either:
use an escape sequence: #\31p {}
use an attribute selector (warning: this changes the specificity): [id="1p"]
change the HTML ID
HTML IDs cannot start with numbers. You site is styled fine if you use p1 rather than 1p.
You can read more about this, and a possible workaround (you can use [id='1p'] if you really need to) here.
Related
I'm trying to use external css to format a 3-column table with 100% width and column widths of 10%, 80%, and 10% respectively. All my td attributes work from the external stylesheet except width.
<td style="width:10%">
works in inline css, but not as an internal style or from the external stylesheet.
It will read td widths from the external css if I remove the 100% width attribute from the table, but then the width of my table changes depending on the amount of text in it.
I have tried using
table-layout: fixed;
with no success. I've also tried removing width from one column at a time with no effect. All the examples I can find use pixels instead of % widths.
Have I missed something simple about table design?
Here's the relevant part of my external css:
table.border td {
border-width: 5px;
padding: 10px;
border-style: ridge;
border-color: white;
border-collapse: collapse;
-moz-border-radius: 0px 0px 0px 0px;
vertical-align: top;
width: 100%;
}
td.edge {
background-color: green;
width: 10%;
}
td.center{
width: 80%;
background-color: pink;
}
and here's the table's html:
<table class="border" >
<tr>
<td class="edge"> hi there</td>
<td class="center">it's me</td>
<td class="edge"> bye there</td>
</tr>
</table>
The table it gives me has a wide first column and narrow second and third columns.
Correct the CSS as follows (just removing "td" from this line: "table.border td") and it will work as expected:
table.border{
border-width: 5px;
padding: 10px;
border-style: ridge;
border-color: white;
border-collapse: collapse;
-moz-border-radius: 0px 0px 0px 0px;
vertical-align: top;
width: 100%;
}
td.edge {
background-color: green;
width: 10%;
}
td.center{
width: 80%;
background-color: pink;
}
This is jsfiddle example: https://jsfiddle.net/r281bv1z/
Hope this may help.
I can't find error, trying this for the last 1h.
Here is page http://kushke.5gbfree.com/SecondPage.html
I want to center "To do list" header
table {
border: 3px solid orange;
background-color: yellow;
width: 100%;
text-align: center;
}
td, th {
color: black;
border: 2px dashed black;
}
#th1 {
padding-right: 160px;
text-align: center;
}
<table>
<tr>
<th id="th1" nowrap><h3>To do list</h3></th>
<th><h3>Done</h3></th>
<th><h3> Hard</font></h3></th>
</tr>
</table>
The problem appears to be
#th1 {
padding-right:160px;
}
If you need padding, add it to both sides of the th:
#th1 {
padding-left: 20px;
padding-right: 20px;
}
You shouldn't use the padding property to maintain a certain width for the column of your table. By adding a padding property, you lose the center alignment.
So, remove
#th1 {
padding-right: 160px;
align: center;
}
and replace it with the code below:
#th1 {
width: 180px;
padding: auto;
}
Of course, you can set your custom width by modifying the value at the code snippet above.
Try to add this to th element: To do list
Because of your help, I have solved this.
No further comments needed, but if you want upvotes, write anything,
I will respond.
Best regards!
First off the title may not be clear but i dont know to come up with a better one.
i have text that I put in a td cell in a velocity template, something like below
* My name
is what?
what i want is something that more formatted like below.
* My name
is what?
"My name is what?" is variable i print and all i do is concatinate * to it and put in the cell for display
what can be done to make it happen. i am not sure of the best way to start off with. I use IE8
Here is one possible solution that may work for you:
Demo Fiddle
Instead of separating content into different elements and positioning them (or nesting them). I thought a simple before class could work well in this situation.
HTML:
<div class="copy-block">
My name is what?
</div>
CSS:
.copy-block {
width: 60px;
position: relative;
}
.copy-block:before {
content: "*";
position: absolute;
left: -15px;
top: 3px;
}
The name is variable. The output on two lines can be solved with adding a break in the table cell.
table {
border: 1px solid gray;
font: 12px arial;
border-collapse: collapse;
}
td {
border: 1px solid gray;
}
.asterix-name {
position: relative;
padding: 5px 5px 5px 15px;
}
.asterix-name:before {
content:'* ';
position: absolute;
left: 5px;
top: 0.5em;
}
<table>
<tr>
<td>
<div class="asterix-name">My name<br> is what?</div>
</td>
</tr>
</table>
http://jsfiddle.net/Fb7jT/49/
Ok, i have a wordpress site, i added a table and use the
white-space: no-wrap;
Since i want the table headers to stay on a single line, the table have too many headers and need to make to stay outside of the content "boundary" (that is fine with me).
The problem is that when i zoom in and out with the browser, the table change position (moves a lil bit left or right and dosnt stay centered) i center it manualy with the "margin".
Im very new to css, hope i describe the issue enough.
.dataTables_wrapper .tablepress {
white-space: nowrap;
clear: both;
margin-left: -50px;
}
.entry table {
border: 1px solid #DFDFDF;
background-color: #F9F9F9;
width: 100%;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font-family: Arial,"Bitstream Vera Sans",Helvetica,Verdana,sans-serif;
color: #333;
border-collapse: separate;
border-spacing: 0;
}
.tablepress {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
margin-bottom: 1em;
border: 0;
}
Does setting a width not work?
<table>
<tr>
<td>stuff</td>
<td>stuff</td>
</tr>
</table>
table{border:1px solid #000;width:100%}
link to fiddle
It might also help if you provided a little more information, like where abouts on your page you want to put this table
What is the basic difference between CSS ID and CSS Class?
Someone told me that, ID can be used only once in a page. But I found that it can be used multiple times.
like
body
{
background-color: #3399FF;
}
div#menuPane{
position: absolute;
left: 25px;
top: 25px;
width: 25%;
}
div.menu {
display: block;
font-size: 14px;
margin: 0;
padding: 0;
border: 2px solid #7FC07F;
}
div.menu a {
display: block;
font-weight: bold;
text-decoration: none;
text-align: right;
letter-spacing: 1px;
margin: 0px;
color: black;
border-top: 1px solid #487048;
}
div.menu a:link{
background: #33CCFF;
}
div.menu a:visited{
background: #33CCFF;
}
div.menu a:hover{
background: #3FC73F;
letter-spacing: 2px;
}
div.menu h4{
padding: 2px;
margin: 0px;
}
div#content{
position: absolute;
left: 30%;
top: 25px;
width: auto;
border: 2px double #7FC07F;
background-color: #33CCFF;
padding: 2px;
margin-right: 5px;
}
div#content h3{
background-color: #A3F4A3;
text-align: right;
letter-spacing: -1px;
color: #386938;
border-bottom: 1px solid black;
}
div#content a:link, a:visited{
background:#0099FF;
color: #A3F4A3;
letter-spacing: 1px;
}
div#content a:hover{
background: #FF0000;
color: #A3F4A3;
letter-spacing: 1px;
}
Think of ID like your Student ID. Only one exists in your school - yours. Think of class like a group of kids...all of whom belong to the same class: "Biology". If you want to address a specific student, you would do so by acknowledging his/her ID - since that will never address more than one student. If you wanted to address a group of students, you could do so by acknowledging their class - "The biology class will be enjoying pizza today" vs "Jonathan Sampson will be enjoying pizza today".
<students>
<student id="jonathan-sampson" class="biology" />
<student id="lizza-matthews" class="earth-science" />
<student id="michelle-andrews" class="biology" />
</students>
Takeaway:
ID = Student ID (Schools don't issue identical IDs to multiple students)
CLASS = Group of Students (Like 'The Biology Class' will be going on a fieldtrip)
It can only be assigned to one element in the page, but it can be used in multiple CSS rules. Class names can be assigned to multiple elements in the page.
See this answer for a description of the differences.
Generally speaking, you use id's for
styling something you know is only
going to appear once, for example,
things like high level layout divs
such sidebars, banner areas etc.
Classes are used where the style is
repeated, e.g. say you head a special
form of header for error messages, you
could create a style h1.error {} which
would only apply to
One final note -- some browsers will allow multiple identical "id" values, but you should definitely not do this as it is will break on standards-following browsers.
.class will affect elements matching value in "class" attribute.
style by id will affect elements matching value in "id" attribute.
it is recommended that you do not repeat ID value in elements, since that is suppose to be unique identifier of element on current page.