I know there are a bunch of questions about this already but none of the solutions actually work for my particular situation. This is what the layout looks like without any fixes for vertical centering: http://jsfiddle.net/4FsKG/9/
This is with tr#toolBar: height and line-height set to 2.25em: http://jsfiddle.net/4FsKG/10/. This centers everything but the border around my page numbers results in a gap that you can easily notice under the borders on the left. In addition, the border takes up the whole height of the cell instead of just being around the numbers as intended.
I've tried numerous other solutions to the problem but all of them end up as some variation of the two examples I've already shown.
I would like everything in the row to be centered vertically while allowing me to put a border around things like my page numbers. Anyone have any ideas?
The CSS for my example:
table {
background-color:#274F68;
font-size:0.85em;
white-space:nowrap;
border-collapse:separate;
border:1px solid #274F68;
border-radius:6px 6px 6px 6px;
-moz-border-radius:6px 6px 6px 6px;
-webkit-border-radius:6px 6px 6px 6px;
}
tr#input td { border-bottom:2px solid #6189A3; }
tr#input td form {
float:right;
}
tr#toolBar {
font-family:Arial;
background-color:#152939;
color:#6189A3;
}
tr#toolBar td { border-bottom:2px solid #6189A3; }
tr#toolBar td a {
padding:0;
margin:0 3px 0 3px;
}
.dataTables_length { float:left;}
.dataTables_info { float:left; }
.dataTables_filter { float:right; }
.dataTables_paginate { float:right; }
.paging_full_numbers a.paginate_button,
.paging_full_numbers a.paginate_active {
float:left;
border: 1px solid #6189A3;
}
Just replace floats with display:inline-block with vertical-align:middle and that will do the trick: http://jsfiddle.net/4FsKG/42/
But don't forget to also add _display: inline; zoom:1; if you want to support IE7 and below.
Related
I have a page with an image on the left side, and text on the right. When the browser window is resized, or a smaller resolution is used, the text goes behind the image. I want the text to always be beside of the image, and not go behind it.
Any suggestions? http://jsfiddle.net/TYpCq/ (The layout on jsfiddle is a bit off. Nevermind this, I just need to know how to prevent the text going behind the image)
HTML:
<div id="indishopmain">
<p><strong>Test shop image</strong> by <strong>no one</strong></p>
<div id ="canvasshopwrap">
<div id="canvasshophead">
<p>Blabla</p>
</div>
<div id="canvasshoptext"</p>
<p>The high-quality print on a <span style="color:#01A07E;font-family:Cusmyrb;">stretched canvas</span> lets the artwork just pop of the wall, it’s almost magical. It’s easy to hang up and will keep it’s color brillance as well as the shape for a long time. We are sure, you will love it forever. Note: the size 20 x 20cm comes with a complementary easel.</p>
</div>
</div>
<div id="indishopimg">
<img src="frontgallery/1.jpg" alt="gallery image 1" width="500px" />
</div>
</div>
CSS:
#indishopmain {
width:100%;
padding:0em;
}
#indishopmain p {
text-align:center;
font-family:Logo;
color:#343234;
margin-top:4em;
font-size:90%;
}
#indishopimg img {
margin-top:-11.9em;
margin-left:10%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#canvasshophead {
display:inline-block;
width:11em;
background-color:#5020B8;
height:2em;
border-radius:3px;
-moz-border-radius:3px;
}
#canvasshophead p {
font-family:Cusmyrb;
color:#ffffff;
font-size:30px;
text-align:center;
line-height:2;
margin-top:0;
}
#canvasshopwrap {
margin-left:60%;
width:11em;
display:inline-block;
}
#canvasshoptext p {
font-family:Cusmyr;
font-size:14px;
color:#343234;
text-align:left;
}
#canvasshoptext {
width:11em;
}
Without knowing what it is you're trying to accomplish (things in your code make me wonder if they are by design or not) I will assume you're trying to have a static element centered in the middle of the page. If you're going for a fluid layout (something that will automatically degrade into mobile devices for instance) the solution will look different.
jsfiddle here: http://jsfiddle.net/RbA92/
I find that adding temporary background colors to elements can be very helpful when debugging. For the purpose of this exercise I've left them in there for you so you can easily see what's going on. I would also suggest putting these colors on your original fiddle (and change margin to padding to REALLY see what's going on). You had a few things in there that weren't behaving as you intended... I think :)
Here's a little breakdown of the styles for you. I commented out the styles I "removed" and annotated the things I added and why.
body { text-align: center; } /* centers all content */
#indishopmain {
padding:0em;
/*width: 100%;*/
background-color: blue;
overflow: hidden; /* allows us to float elements inside a non-floated element */
width: 700px; /* gives the browser a literal size to render, which keeps the elements from moving when the window is resized */
text-align: left; /* keeps child elements from inheriting the text-aling: center we put on the body */
margin: 0 auto; /* this is what actually centers our item. use this with body {text-align: center;} */
}
#indishopmain p {
text-align:center;
font-family:Logo;
color:#343234;
margin-top:4em;
font-size:90%;
}
#indishopimg img {
/*margin-top:-11.9em;
margin-left:10%;*/
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
float: left; /* float this bad boy all the way to the left */
}
#canvasshopwrap {
/*margin-left:60%;*/
width:11em; /* having this in em could break your layout. consider putting this in px to keep it from getting too big for it's area and being pushed to the bottom */
/*display:inline-block;*/
background-color: red;
float: right; /* float this one all the way to the right */
}
#canvasshophead {
/*display:inline-block;*/
width:11em;
background-color:#5020B8;
/*height:2em;*/
border-radius:3px;
-moz-border-radius:3px;
padding: 0 0 .5em 0; /* it's better to size the CONTENT how you want, so this box will always contain it. size thie box but leave the contents dynamic and you could end up with the content outside of your container */
}
#canvasshophead p {
font-family:Cusmyrb;
color:#ffffff;
font-size:2em;
text-align:center;
line-height:2;
margin:0; /* remove any browser-specific formatting */
padding: 0; /* ditto */
}
#canvasshoptext {
width:11em;
}
#canvasshoptext p {
font-family:Cusmyr;
font-size:14px;
color:#343234;
text-align:left;
padding: 0; /* remove any browser-specific formatting */
margin: 0; /* ditto */
}
Hopefully this is the answer you are looking for.
Remove this margin-top:
#indishopimg img {
margin-top:-11.9em; <--- here
margin-left:10%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
If you want the image beside the text, move the image into the paragraph containing the text and add float:left to the CSS above.
I have a table and one side of the table is an array of links. Currently I have a background color change on hover to make it appear as if the cell in the table has been pressed. The problem with this is, after setting the display:block property on the cells, when the cell is hovered over it leaves out the rounded edges and looks bad. Any way to deal with this?
CSS
.bigtable {
text-align:left;
padding:0px 5px 0px 5px;
color:white;
border: 2px solid #999999;
margin:0px 5px 0px 5px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
text-shadow:0 1px 1px white;
font-size:x-large;
}
td {
padding: 5px 5px 5px 5px;
background-color:#0063dc;
-moz-border-radius:20px;
-webkit-border-radius:10px;
border-radius:10px;
text-shadow:0 1px 1px black;
}
td a:hover {
display:block;
background-color:blue;
}
snippet of table:
<table style="width: 100%; height: 730px;" cellspacing="5" cellpadding="5" class="bigtable">
<tr>
<td>news</td>
<td><ahref="">click on this box to read about what is
mmunity</a></td>
</tr>
<tr>
i know what the problem is, but i don't know how to fix it. it's the td a:hover part of the CSS that's doing it what i'm telling it to. how can i instruct the hover of a link to change the ENTIRE td color, not just the link part?
According to the spec, this is how border-radius in CSS3 works. The content inside the box with the radius "bleeds" through the rounded corner.
You'll have to give your links a border-radius as well.
Did you try re-applying the CSS for the :hover rule? Else the inline-block may be of assistance.
What browsers display this behavior?
A quick fix for modern browsers would be to apply overflow:hidden to the container with the border-radius:
td {
padding: 5px 5px 5px 5px;
background-color:#0063dc;
-moz-border-radius:20px;
-webkit-border-radius:10px;
border-radius:10px;
text-shadow:0 1px 1px black;
overflow: hidden; /* important bit */
}
This should clip the corners of your link and maintain the cell's rounded edges.
Now, if you still wanted to affect the cell from the link, you're going to have to use javascript. CSS, by design, is devoid of parent selectors.
This is my layout:
<div class="divContainer">
<div class="item">
<div class="itemHeader"></div>
<div class="itemBody"><div>
<div class="itemFlag"></div>
</div>
....
</div>
And the CSS:
.divContainer{
display:table;
border-spacing:0 5px; //bottom spacing
width:100%;
}
.item{
display:table-row;
height:45px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.itemHeader, .itemBody, .itemFlag{
display:table-cell;
}
.itemHeader{
width:100px;
}
.itemBody{
width:150px;
}
.itemFlag{
width:20px;
}
The round borders don't appear on the item elements.
If I put them separately in itemHeader and itemFlag they appear.
But I'd really like to clear some code and put them in the item
Also can't get the radius to work on the divContainer class. I want a rounded container which contains rounded rows.
What is the problem? Maybe another part of CSS is messing it up, but I don't thing that is the case.
I'm afraid this there is no way to apply border radius on table rows. However, the workaround is pretty simple: just apply the background color and the border radius to the cells.
If you remove the background color from the table rows, and you can add this:
.item > div {
background-color: #ccc;
}
.item > div:first-child {
border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
}
.item > div:last-child {
border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
}
It will work even if you change your class names.
You can see it in action here:
http://jsfiddle.net/jaSs8/1/
Maybe the problem is in divContainer class. Try to change the display attribute to table-row.
You also can fix this issue by setting float:left; on the table element. It doesn't effect the behavior of the table flexibility and works like a charm.
table {
float: left;
display: table;
width: 100%;
border-collapse: collapse;
}
tr {
display: table-row;
width: 100%;
padding: 0;
}
td {
font-weight: bold;
background: #fff;
display: table-cell;
border-radius: 10px;
}
I think best solution for this case is to create wrapper for table tag and apply all border styles to it.
<div class="tableWrapper">
<table>{tableContent}</table>
</div>
<style>
.tableWrapper {
border-radius:10px;
}
</style>
http://www.pressedweb.com/beta/#portfolio
My anchor tags (highlighted in red dashed border) are being created by their own free will. I have no idea how to get rid of them and have been working at this for hours now.
Any ideas? Is this some freaky cross-browser bug? Or is it just a problem with my markup?
Thanks.
I thinkg this fix will work for you:
div .portfolio .works a img {
-moz-box-shadow:1px 2px 3px #222222;
opacity:0.8;
}
div .portfolio .works a {
border:1px solid #FF0000;
display:block;
float:left;
height:220px;
margin:0 10px 10px 0;
padding:4px;
width:280px;
}
Basically what i did was just switched some styling from img to anchor. You can see in this image that it does work ok.
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.