My fiddle: http://jsfiddle.net/f5e5d/1/
.item-data {
width:34px;
height:34px;
background-size: 34px auto !important;
margin: 2px;
border: 1px solid #000;
display:table-cell;
}
.test_div {
background-color: #eee;
width: 100%;
padding: 20px;
}
.match_details {
display:table-cell;
}
I want to show only 3 pictures in one line. How can I do it?
Now I have displayed all 6 items in 1 line.
Thanks in advance!
Like this: http://jsfiddle.net/NicoO/f5e5d/4/
.item-data {
width:34px;
height:34px;
background-size: 34px auto !important;
margin: 2px;
border: 1px solid #000;
float: left;
}
.item-data:nth-child(3n+1)
{
clear: left;
}
.test_div {
background-color: #eee;
overflow: hidden;
padding: 20px;
}
Related
I'd like to know how to make my wrapper use percentage and grow/shrink with the width of the page instead of staying in one fixed size? I do not want the page to be cut off when I zoom in, would anyone help me with this please, thanks :)
here is a link to the entire phpbb stylesheet
https://gist.github.com/25c59943b244a3e150e8/75c6dd240980864d4872eb6cacccdf980fa9d84c
/* Main blocks
---------------------------------------- */
#wrap {
background-color: #080808;
padding: 0 0px;
min-width: 650px;
width: 960px;
margin: 0px auto;
border: 1px solid #161616;
background-repeat: repeat-x;
background-attachment: fixed;
}
#middle {
padding: 0 0px;
min-width: 650px;
width: 900px;
margin: 0px auto;
}
#header_1 {
background-image: url("http://i57.tinypic.com/m81pc0.jpg");
height: 170px;
width: 960px;
}
#menus {
height: 40px;
border-top: 1px solid #161616;
border-bottom: 1px solid #161616;
background: url() repeat-x;
}
#simple-wrap {
padding: 6px 10px;
}
#page-body {
margin: 4px 0;
clear: both;
}
#page-footer {
clear: both;
}
#page-footer h3 {
margin-top: 20px;
}
#logo {
float: left;
width: auto;
padding: 10px 13px 0 10px;
}
a#logo:hover {
text-decoration: none;
}
I am trying to make a parent div fit it's width to an image displayed. I am having a lot of trouble in doing so, it seems to auto adjust to very large.
Image: http://puu.sh/1vsqA
content is the body part
image is the white box the image is contained in
image img is the actual image inside the box itself.
CSS:
html, body
{
margin:0;
padding:0;
border:0;
height:100%;
width:100%;
}
body
{
background-image: url('./page_bg.gif');
background-repeat: repeat;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:12px;
}
#navlinks
{
width: 100%;
height: 28px;
line-height: 28px;
background-color: #000;
color: #FFF;
}
#links
{
list-style-type: none;
float: left;
padding-left: 5px;
margin: auto;
}
#links li
{
float: left;
padding-left: 5px;
padding-right: 5px;
}
#content
{
display: block;
padding: 40px 40px 40px 40px;
}
#image
{
display: inline-block;
border: 1px solid #CCC;
border-color: #CCC #AAA #AAA #CCC;
padding: 3px;
margin-left: auto;
margin-right: auto;
background: #fff;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow: 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
max-width: 1107px;
}
#image img
{
}
You could try setting #image to display: inline-block. I could be wrong but I 'think' that's what you're looking for.
Here is a link example: http://jsfiddle.net/RBWYL/
Please try to float:left your parent div
For some reason I can't align my divs next to each other. "Right" goes under "left"
What is wrong with my code?
HTML:
<div id="activity-container">
<div id="activity-left">left</div>
<div id="activity-right">right</div>
</div>
CSS:
#activity-container
{
width:90%;
background-color:#FFFF00;
Height:400px;
margin-left: auto;
margin-right: auto;
}
#activity-left {
border: 1px solid black;
color:#000;
margin: 0 auto;
width: 20%;
float: left;
position: relative;
}
#activity-right {
border: 1px solid black;
margin: 0 auto;
color:#000;
width: 80%;
float: left;
position: relative;
}
Live demo: Tinkerbin
Your borders on the div-s adding 2px to their width. Remove them and they will be next to each other - jsFiddle
If you really need the borders, then mimic them with outline - jsFiddle
#activity-left {
outline: 1px solid #000;
color:#000;
margin: 0 auto;
width: 20%;
float: left;
position: relative;
}
#activity-right {
outline: 1px solid #000;
margin: 0 auto;
color:#000;
width: 80%;
float: left;
position: relative;
}
You only need to remove float and margin properties from CSS
#activity-right
{
border: 1px solid black;
color: #000;
width: 80%;
position: relative;
}
Than it will work as per your expectation.
If you want to retain the border, you can try changing the width:
#activity-container
{
width:90%;
background-color:#FFFF00;
Height:400px;
margin-left: auto;
margin-right: auto;
}
#activity-left {
border: 1px solid black;
color:#000;
margin: 0 auto;
width: 19%;
float: left;
position: relative;
}
#activity-right {
border: 1px solid black;
margin: 0 auto;
color:#000;
width: 80%;
float: left;
position: relative;
}
Check Jsfiddle
I want to fix the table width using Display Tag.
.displayTable table {
border: 1px solid #666;
width: 100%;
margin: 20px 0 20px 0 !important;
}
.displayTable th, .displayTable td {
padding: 2px 4px 2px 4px !important;
text-align: left;
vertical-align: top;
width: 100%
}
.displayTable thead tr {
background-color: #9999CC;
}
.displayTable th.sorted {
background-color: #9999CC;
}
.displayTable th a,.displayTable th a:visited {
color: black;
}
.displayTable th a:hover {
text-decoration: underline;
color: black;
}
.displayTable th.sorted a,.displayTable th.sortable a {
background-position: right;
display: block;
width: 100%;
}
.displayTable th.sortable a {
background: url(../img/arrow_off.png) no-repeat right center ;
}
.displayTable th.order1 a {
background: url(../img/arrow_down.png) no-repeat right center ;
}
.displayTable th.order2 a {
background: url(../img/arrow_up.png) no-repeat right center;
}
.displayTable tr.odd {
background-color: #fff
}
.displayTable tr.tableRowEven,.displayTable tr.even {
background-color: #fff
}
.displayTable div.exportlinks {
background-color: #eee;
border: 1px dotted #999;
padding: 2px 4px 2px 4px;
margin: 2px 0 10px 0;
width: 79%;
}
.displayTable span.export {
padding: 0 4px 1px 20px;
display: inline;
display: inline-block;
cursor: pointer;
}
.displayTable span.excel {
background-image: url(../img/ico_file_excel.png);
}
.displayTable span.csv {
background-image: url(../img/ico_file_csv.png);
}
.displayTable span.xml {
background-image: url(../img/ico_file_xml.png);
}
.displayTable span.pdf {
background-image: url(../img/ico_file_pdf.png);
}
.displayTable span.rtf {
background-image: url(../img/ico_file_rtf.png);
}
.displayTable span.pagebanner {
background-color: #eee;
border: 1px dotted #999;
padding: 2px 4px 2px 4px;
width: 79%;
margin-top: 10px;
display: block;
border-bottom: none;
}
.displayTable span.pagelinks {
background-color: #eee;
border: 1px dotted #999;
padding: 2px 4px 2px 4px;
width: 79%;
display: block;
border-top: none;
margin-bottom: -5px;
}
Depends on the data loaded, the table width varies. So, I want to make it look better by fixing the width of table. But I can't. How can I make it to fix the table width?
I try to wrap the Display with Div and set the css class of Div too. But It still doesn't work (for both display:table-cell or display:inline-block;. Thanks.
.commonList{
overflow: hidden;
background: #c0c0c0;
display: table-cell
text-align: center;
width: 100%;
height: 100%;
}
Edited: When I try to wrap the display table with Div of the above css setting, table width become 100% . but as each of the column of table has various width, it becomes so ugly because the first column becomes so wide (which only display id ,1 ,2 ,3 etc) And even my display tag pagination gone. How can I solve it? Thanks.
.displayTable table {
table-layout:fixed;
}
Specify table layout as fixed and that will solve ur problem
Here is my solution. for each columns, specify a certain class and use in Display Tag.
.displayTable {
border: 1px solid #666;
width: 100%;
margin: 20px 0 20px 0 !important;
}
.colId{
width: 2%;
}
<display:column class="colId">
I am not very good at this I know some but I am having some issues with my CSS I can not figure out.
My mainContent ID overlaps with under my Sidebar ID. I am sure I messed up my css trying to fix this but I have no idea how to fix t his. I have changed things so many times I have become lost.
Any help would be nice.
#charset "utf-8";
body {
background: #A00;
margin: 0;
text-align: center;
color: #A00;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
}
.twoColHybLtHdr #container {
width: 80%;
background: #CFF;
margin: 0 auto;
border: 2px solid #A00;
text-align: left;
border-color: #A00;
float: right;
}
.twoColHybLtHdr #header {
background-image:url(img/background3.png);
padding: 12px;
background-repeat: repeat-x;
background-position: left;
}
.twoColHybLtHdr #sidebar1 {
float: left;
width: 14em;
background: #006633;
padding: 5px 0;
background-color: #D4DFAA;
border: #A00;
}
.twoColHybLtHdr #sidebar1 h3, {
margin-left: 10px;
margin-right: 10px;
padding: 10px 10px 10px;
}
.twoColHybLtHdr #sidebar1 p {
margin-left: 10px;
margin-right: 10px;
padding: 10px 10px 10px;
}
.twoColHybLtHdr #mainContent {
margin: 5px 20px ;
padding-left: 15px;
color: #000;
}
.twoColHybLtHdr #footer {
padding: 50px 8px;
background:#FFFF99;
background-color: #FF9;
}
.twoColHybLtHdr #footer p {
font:Georgia, "Times New Roman", Times, serif, 10px;
margin: 0;
padding: 10px 0;
border-color: #666666;
}
.fltrt {
float: right;
margin-left: 10px;
}
.fltlft {
float: left;
margin-right: 10px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.twoColHybLtHdr #table {
font:
margin: 0;
padding: 10px;
color: #FFF;
y background-color: #8B0000;
; background-color: #A00;
border: #A00;
}
Make sure you specify a width on BOTH the .fltrt and .fltlft columns
Your css should look like this:
/** Assuming the parent element (container) is 940px wide **/
.fltlft {
float: left;
width: 540px;
}
.fltrt {
float: right;
width: 380px;
}
Also, make sure you replace/remove **y** with .y and remove that unused **font** attribute.
Not sure what's happening as there isn't a visual on whats actually happening.
.twoColHybLtHdr #sidebar1 h3, {
Just remove the , and all should be good
The bottom there is a few errors.
.twoColHybLtHdr #table {
**font:**
margin: 0;
padding: 10px;
color: #FFF;
**y** background-color: #8B0000;
; background-color: #A00;
border: #A00;
}
I'm guessing it should be more like
.twoColHybLtHdr #table {
font-family: helvetica, arial, sans-serif;
margin: 0;
padding: 10px;
color: #FFF;
.y{
background-color: #8B0000;
background-color: #A00;
border: #A00;
}
Take the float right off of the container
put a float left on the main content
add a div after the main content that clears both.
.twoColHybLtHdr #container {
width: 80%;
background: #CFF;
margin: 0 auto;
border: 2px solid #A00;
text-align: left;
border-color: #A00;
******** removed Float:right;
}
.twoColHybLtHdr #sidebar1 {
float: left;
width: 210px; ****** Change this to pixels unless you are specifying the font-size as !important otherwise you could have problems with this width scaling unintentionally.
background: #006633;
padding: 5px 0;
background-color: #D4DFAA;
border: #A00;
}
.twoColHybLtHdr #mainContent {
margin: 5px 20px ;
padding-left: 15px;
color: #000;
float: left; ****** Added float left to mesh it with your sidebar float right would work as well but wouldn't mesh it with your floated sidebar.
}
*********** add another div after your mainContent and assign it the ID="clear"
.twoColHybLtHdr #clear {
clear: left;
}
There are some other errors in your css but I think these are the ones where you are having your problems.