I am trying to put a bottom border on my link but despite using code pretty much straight from the internet it doesnt seem to want to work.
http://codepen.io/anon/pen/oeLqc
lll {
font-weight:normal;
margin-bottom:5px;
border-bottom: 3px solid blue;
background: #EEE;
display: table;
}
If I wanted a thick border on the bottom of my links, how should I be doing it?
When declaring class selectors in CSS, they must start with .:
.lll {
font-weight:normal;
margin-bottom:5px;
border-bottom: 3px solid blue;
background: #EEE;
display: table;
}
http://codepen.io/anon/pen/hwsak
Here is a useful article on CSS selectors:
http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
The selector lll wont work as is.
If your class is lll then your code needs to be .lll
If it's an ID then it needs to be #lll
Also, is there a reason you're using display: table? That probably isn't helping your link. Maybe try display: inline-block instead? Obviously without knowing the site you're working on it's hard to say.
But changing those two things will definitely help!
You missed a class assignment try:
.lll {
font-weight:normal;
margin-bottom:5px;
border-bottom: 3px solid blue;
background: #EEE;
display: table;
}
You forgot to use dot(.) before writing the css.
It should be like
.lll {
font-weight:normal;
margin-bottom:5px;
border-bottom: 3px solid blue;
background: #EEE;
display: table;
}
Related
Im trying to implement some part of a page that needs some custom styled table (I know tables are a big no no for this but that is wat im doing so please try to only look at the question.)
The problem is that when I include Bootstrap the line gets destroyed. The easisest way to explain is by looking at this jsfiddle and then remove the bootstrap dependency.
The problem I think is in the following CSS:
td span {
background-color: #fff;
color: #000;
}
hr {
border: none;
color: blue;
background-color: blue;
height: 1px;
position: absolute;
display: block;
width: 100%;
z-index: -1;
}
This implementation is borrowing ideas from an earlier question.
Bootstrap applies a number of styles to elements directly- in your layout the (main) conflicting rule is line 159 of bootstrap-combined.min.css for hr elements:
hr {
margin:20px 0;
border:0;
border-top:1px solid #eeeeee;
border-bottom:1px solid #ffffff;
}
To rectify, add:
Demo Fiddle
hr{
margin:10px 0;
}
To your CSS. Note you may also want to change styling for a and table elements.
To see what styling Bootstrap applies to each element, use the DOM inspector in you browsers developer tools to step through into the element in questions and its CSS.
I think an image best describes this: JS FIDDLE HERE: http://jsfiddle.net/fp2Ak/
What I want to do, is for those lines to actually touch. Each one is a span with a number in. within a td. Note: some Tds contain multiple spans, for example, 218 and 222. (you can see tr with faint blue lines.)
As you can see it does touch at one point, as this is the biggest element in the column (including header). But this is rarely the case. How would I stretch it to touch in ALL Cases.
You can suggest using someting other than span, but please note that I do need more than one thing in a td, and hence cant be applied to the td.
The CSS that governs most of this so far:
table.Timetable td , table.Timetable th
{
border-spacing: 0px;
padding: 0px;
}
.bookingStart, .bookingMiddle, .bookingEnd
{
background-color: white;
color: Black;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.bookingStart
{
border-left: 2px solid black;
}
.bookingEnd
{
border-right: 2px solid black;
}
Oh and preferabblly Id like to be able to pad the cells again, as the th clearly have been merged together.
JSfiddle of it here: http://jsfiddle.net/fp2Ak/
spans have to be floated in order to be affected by width, so you could do something like:
td span{float:left; width:100%; min-width:100%;}
or more accurately if I am understanding your css properly:
.bookingStart, .bookingMiddle, .bookingEnd
{
background-color: white;
color: Black;
border-top: 2px solid black;
border-bottom: 2px solid black;
float:left;
width:100%;
min-width:100%; /*some browsers like this better*/
}
Your should put your borders on the td's not the spans. This will allow you to also put some padding on the td's to make even the long numbers look good.
I am using a hr tag on our page but it looks weird in
IE9 http://img580.imageshack.us/img580/1295/unleddlz.png
Notice the left-hand-side
CSS is
.greyLine {color: rgb(252,252,252); height: 1px; background-color: rgb(252,252,252);}
What's wrong here?
Thanks in advance.
.greyLine
{
border: none;
border-top: 1px solid rgb(252,252,253);
}
.greyLine {
height: 1px;
color: rgb(252,252,252);
background-color: rgb(252,252,252);
border: none;
}
You had it right, just needed to remove the border. Doing it your way plus border:none allows you to change the height if needed. Good luck. Source: How To Style HR with CSS
In a page I use a tabstrip with its own stylesheets. This tabstrip writen with divs and anchors.
I add some other divs into tabs but they inherit stylesheet from the outer tabstrip. This new divs has their own css classes.
Here is my question, are there a way to break this inheritance without changing the structure of css ?
Tabs' CSS Styles :
div.tabs {
padding: .5em;
}
div.tabs div.tabs {
padding: 0;
}
div.tabs div.tabs div {
clear: left;
height: 4em;
padding: .5em;
border: 1px solid #003366;
}
New added divs use this classes :
.graphTextItem{ font-family:sans-serif; font-size:12px; border: solid 1px #78ACFF; text-align:center; width:150px; }
.graphImageItem{ border-left: solid 1px #78ACFF; border-right: solid 1px #78ACFF; text-align:center; height:70px; }
You could always try using different elements for each nested level instead of all divs:
<div>
<ul>
<li></li>
</ul>
</div>
In the above example you can style the div, ul and li anyway you want and you can target them individually to apply style rules. Inheritance won't be a problem.
Override each element you need to not inherit in your most specific classes.
e.g. in .graphTextItem, override height and padding.
Not really. Inheritance is part of CSS. If you want a specific value then specify it.
By removing div from this stylesheet solved my problem :
div.tabs div.tabs {
clear: left;
height: 4em;
padding: .5em;
border: 1px solid #003366;
}
But I still wonder whether there is a way ?
I'm trying to use divs instead of tables to style boxes around my content. The content can be any size and needs to allow the browser to be resized to any degree. Need the background color and border to contain the content. This works fine with tables. How do I get a div to work the same way?
Note: I added "_"s because my non-breaking spaces were getting lost.
Sample Page
Sample image
(source: c3o.com)
Content:
<style type="text/css">
div.box, table.box
{
padding: 10px 1000px 10px 10px;
}
div.box-header, td.box-header
{
border: solid 1px #BBBBBB ;
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
}
div.box-body, td.box-body
{
padding: 6px;
border: solid 1px #BBBBBB ;
border-top: none;
}
</style>
<div class="box">
<div class="box-header">please_help_make_these_divs_stop_overlapping</div>
<div class="box-body">please_help_make_these_divs_stop_overlapping</div>
</div>
<table class="box" width="100%" cellpadding="0" cellspacing="0">
<tr><td class="box-header">tables_make_good_containers_tables_make_good</td></tr>
<tr><td class="box-body">tables_make_good_containers_tables_make_good</td></tr>
</table>
There is no easy way to do this that is crossbrowser friendly that I know of.
At least in firefox you can create an simulated table by setting divs with
display:table;
display:table-row;
display:table-cell;
So that those divs work like table elements. Then the box will contain it's content. Wether that's a good solution or not is debateable.
I've been having similar issues with page layouts myself. Usually I've solved those by setting min-width and overflow:auto;
If you really don't want to use a table you can do this:
div.box div {
overflow: hidden;
zoom: 1; /* trigger haslayout for ie */
}
Next time this kind of problem comes up go to giveupandusetables.com.
One way is to make your boxes floats. Add float:left; to box, box-header, and box-body. Add clear:both; to box-body to force it below box-header. You'll probably need to add clear property to whatever content follows as well.
You will not get right edges of box-header and box-body to align, though. If you want their widths to be the same, you really want a table. Table is a tool to make all cells in the same column to share the widths.
For other ideas, check out this SO question.
Firstly, you should be using semantic markup. If something is a header and content mark it up as such with header and paragraph tags. That will help you move out of the 'table-way' of thinking were you try to emulate your markup and styles like a table, markup should come first, CSS can come after.
The following should do what you want:
<style type="text/css">
* {
margin:0px;
padding:0px;
}
.box {
border: solid 1px #BBBBBB;
margin:10px;
}
.box h3 {
padding: 4px;
border-bottom: solid 1px #BBBBBB;
background-color: #DDDDDD;
}
.box p {
padding: 6px;
}
</style>
<div class='box'>
<h3>please help make these divs stop overlapping</h3>
<p>please help make these divs stop overlapping</p>
</div>
Thinking about markup and style separately is the path to CSS Zen Mastery :o)
This works (actually holds together better than tables in ie7 too)
div.box{
float:left;
width:auto;
margin: 10px 1000px 10px 10px;
}
div.box-header{
float:left;
width:100%;
border: solid 1px #BBBBBB ;
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
}
div.box-body{
clear:left;
float:left;
width:100%;
padding: 4px;
border: solid 1px #BBBBBB ;
border-top: none;
}
NOTE: both boxes have to have same left and right padding or one juts out a bit.
Floats are not needed, but you seem to be confusing the uses of margin vs. padding. The following minor tweaks to your style works as you need it to:
<style type="text/css">
div.box, table.box
{
margin: 10px 1000px 10px 10px;
border: solid 1px #BBBBBB ;
padding: 0px;
}
div.box-header, td.box-header
{
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
border-bottom: solid 1px #BBBBBB ;
}
.box-body, td.box-body
{
padding: 6px;
}
</style>
I've changed the padding on the box to a margin, moved the border to your box, and added an underline to the header.
I had this problem also using Firefox 6.0.1, Opera 10.62, Safari 5.1, but not in IE 9, and the overflow:auto fixed it in all browsers. Nothing else did. I also tried overflow:contain, which also fixed the problem, but it appears that contain is not a valid value for overflow, so I am assuming that, since the value was not valid, auto was substituted.