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.
Related
I'm trying to setup a clean CSS to style a button to visually looks merged with the near input field.
I'm using this CSS currently:
button {
position: relative;
left: -4px;
box-sizing: border-box;
padding: 0 10px;
margin: 0;
font-size: 17px;
border: 1px solid gray;
border-radius: 0 3px 3px 0;
}
http://jsfiddle.net/GRwqL/
The main problem is the usage of the left property, I don't think it's a good practice, mostly because it's not handled correctly on all browsers.
The other problem is that this code in Internet Explorer and Firefox makes the button not high as the input field.
So I was looking for some help to write a better code cross-browser and cleaner.
Personally I don't care if is needed a wrapper element or any other HTML element, I just need a clean code, cross browser and that works well.
<span class="inputWithButton">
<input type="text"><button>Submit</button>
</span>
input, button{outline: none;}
.inputWithButton{
display:inline-block;
overflow:hidden;
border:1px solid gray;
border-radius: 3px;
}
.inputWithButton > *{
vertical-align:top;
border:0;
margin:0;
padding: 3px 10px;
}
.inputWithButton > input[type=text]{
width:150px;
}
.inputWithButton > button{
border-left:1px solid gray;
background:#eee;
cursor:pointer;
width:70px;
}
.inputWithButton > button::-moz-focus-inner {
border: 0;
}
DEMO with higher paddings and different borders colors : http://jsbin.com/OPiroyib/4/edit
(Just remove border from the span and add border to both input and button) That easy.
You need to override the default margin on the input element too.
jsFiddle example
input, button {
margin:0;
}
In doing so, there will no longer be space between the elements, assuming there is also no space between them in the markup. Note, that inline elements respect the whitespace in the markup.
For instance, even after resetting the default margin there is space between the elements, if there is space between them in the markup (example)
For your second problem (making the elements the same height), do the following:
input, button {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding:0;
margin:0;
vertical-align:top;
line-height:30px;
height:30px;
}
Basically, use box-sizing to change the box model, again reset the margin/padding, use vertical-align:top for alignment issues, and then set an equal line-height/height on both elements.
jsFiddle example
Take a look at css-reset or normalize.css to set the defaults in all browsers to "null".
Also css frameworks like bootstrap are very cool!
Have you thought about using a simple span tag instead of a button and then attach an onclick event to it?
The following seems to work ok for me - though you might need to use a reset / modenizer style sheet to make it more predictable on different browsers.
http://jsfiddle.net/GRwqL/13/
<input class="nospace"></input><span class="nospace">Submit</span>
.nospace {
margin: 0;
padding: 0;
}
span.nospace {
height: 1em;
margin: 0;
padding: 1px;
border: 1px solid black;
}
My inaugural post here, hope you all can help. :)
I have been working on creating a pure XHTML strict website no images but the products however I'm in a small jam. I can't seem to find a way to make the a button that appears as such as shown here:
Where it has a hover state, rectangle and currently is
<div class="topprodcartadd">Add to Cart</div>
I made a little CSS class that looks like this:
.topprodcartadd {
width: 190px;
height: 50px;
background-color: #000;
margin: 10px 0px;
padding:0px 10px 10px 0px;
float: left;
text-align: right;
vertical-align: middle;
}
.topprodcartadd:hover {
background-color: #00a7e6;
}
.topprodcartadd a {
text-decoration: none;
color: #00a7e6;
}
.topprodcartadd a:hover {
color: #fff;
}
I want to make it link somehow but in XHTML Strict it gives me validation errors when I rock the code like this:
<div class="topprodcartadd">Add to Cart</div>
So does anyone have any other ideas on what I can do to make the button appear that way?
Thanks!
Change your CSS for the anchor to:
.topprodcartadd a {
text-decoration: none;
color: #00a7e6;
display:block;
width: 190px;
height: 50px;
}
jsFiddle example
I added display:block and a width and height so that the link takes up all the room in the div.
So, if I get your problem right:
1) you can set display: block for a so it fill the parent element.
2) are you sure that you need XHTML Strict?
If you simple need mouse cursor to change into a hand, just add cursor:pointer to your DIV's style, you don't have to use an anchor.
This question already has answers here:
Line under text with spaces. Is it possible via html & css?
(5 answers)
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 8 years ago.
in CSS, how can i do something like:
---Item---
with the dash connected like a line?
i thought of :
border-bottom: 3px solid #000;
but then i can't move the line upward plus the line would be behind the text, not surrounding the text
my HTML
<ul>
<li class="sub-menu-item" >FACULTY&STAFF</li>
</ul>
(if possible, i would like to avoid touching the HTML)
is all the above possible via css or should i just use an image after all?
i'm aiming for ie8 and above(and all the new browsers of course)
Inject an — before and after your content using the CSS :before and :after selectors. You'll need to use the escaped unicode, as discussed here:
li.sub-menu-item:before, li.sub-menu-item:after {
content: "\2014"
}
See JSFiddle. For a shorter line you could use an ndash.
Here's a start:
.sub-menu-item
{
border-bottom:1px solid black;
height:0.6em;
width:200px;
text-align:center;
margin-bottom:1em;
}
.sub-menu-item > a
{
text-decoration:none;
background:white;
}
http://jsfiddle.net/NpP5F/3/ (updated to work with multiple items)
Tested to work in Firefox, IE and Chrome. Now keep in mind this works in isolation in a fiddle. Would probably require some tweaking to get it to work within other html elements and styles, etc. Proof of concept anyway. It "can" be done.
You can create a div with border-top and border-bottom, line-height: 0 with a span inside it that has a defined background color:
<div class="test">
<span>BLA BLA BLA </span>
</div>
And the CSS:
.test {
border-bottom: 1px solid #D7D7D7;
border-top: 1px solid #A1A1A1;
line-height: 0;
text-align: center; }
.test span {
background-color: #BABABA;
padding: 0 10px; }
In theory you could use the <hr/> and then just set the length of it and force it to display inline. Or use some special unicode characters if your encoding supports it.
Try this. :) It uses an image, which is a plus because it allows you to style your dashes however you want, and doesn't deal with any freaky margins or anything which may mess up the rest of your layout.
li.sub-menu-item
{
background-image: url('http://i.imgur.com/JIa6C.png'); /* Just a transparent PNG with a line in the middle */
}
li.sub-menu-item a
{
background-color: #FFF;
padding: 0 10px;
margin-left: 200px /* So you can see the left side of the line too */
}
http://jsfiddle.net/wAb8C
Without changing the code:
ul li{
position: relative;
border-bottom: 1px solid #000;
}
ul li a{
position: relative;
background: #fff;
left: 0;
bottom: -10px;
margin-left: 10px;
color: orange;
text-decoration: none;
}
Example here
What is the modern way of making a line half way across the screen? I saw this in a tutorial and it looks a bit old fashioned now.
Like:
<hr size="6" width="50%">
How would you do something similar if you were making a webpage now?
You can continue to use <hr />, but I would suggest omitting the inline attributes. It is just another element, and you can move your styling information to css:
hr {
width:50%;
}
You can use CSS to style the line
hr{
width:50%;
}
HTML:
<hr />
CSS:
hr { width: 50%; }
This should be controlled in CSS using something like:
hr {
width: 50%;
}
You can change borders etc too. Just make sure you reset the borders and backgrounds as different browsers use different methods to style it
Using a <div> and some styling:
#line {
width: 50%;
margin: 0 auto; /* Centered */
height: 4px; /* The border adds to height */
border: 1px solid #888888;
border-bottom: 1px solid #E9E9E9;
border-right: 1px solid #E9E9E9;
}
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.