I'm creating a CSS button and it is working ALMOST perfectly. The problem is that when the button is larger than its allotted space, its end drops off to the next line. It also extends the page width to fit it properly, but then the end is on the next line >=(. Extending the page is perfectly fine, but the button should be whole.
Here is my example page...
http://www.lolstrategies.com/test/button_sample.html
It uses two tables and the button needs to also be in a table.
My current css uses float: left to push the images together as you can see by viewing the source. I'm hoping that it doesn't all need to be completely redone without float but I am willing to do so if that's the only answer.
The image I'm using is this:
You don't have to completely redo it. Just a couple of small changes. Live example: http://jsfiddle.net/tw16/Pwmcn/
.buttonLarge {
height:22px;
margin: 0 22px 0 12px; /* add this */
}
.primaryLargeButtonEnd {
width: 12px;
height:12px;
padding: 0px 0px 0px 5px;
display: inline-block; /* add this instead of float:left */
background: transparent url('./composite__V153767378_.png') no-repeat left -75px;
}
Related
while the global for the pagination is currently set up as the following:
.pagination {
float: right !important;
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
again, on the other pages it's correctly displayed on the bottom on the page, however, on this particular page with the same exact css, the pagination is at the top where again, I need it at the bottom.
I would recommend looking at this snippet which is the full code needed for a data table with pagination at the bottom.
http://bootsnipp.com/snippets/featured/bootstrap-snipp-for-datatable
I've been trying to customize Blogger's Simple template and have hit a wall in getting the background image for footer-outer to match up - I am still learning CSS and am not sure where the padding on left is coming from or how to get it to completely cover up the repeating background of body-fauxcolumn-outer at the very bottom. Or even if this is the best way to be coding it. Please help!
http://fantasyartofetsy.blogspot.com/
Here's my edited code -
.footer-outer {
width: 1000px;
background: url(http://i1192.photobucket.com/albums/aa324/faeteam/fae-bg-bottom.jpg) no-repeat top center;
background-color: #093e60;
}
.body-fauxcolumn-outer {
background: url(http://i1192.photobucket.com/albums/aa324/faeteam/fae-bg-middle.jpg) center;
background-repeat:repeat-y;
}
Seems better with the following modification:
.content-inner {
10px 60px 0 10px;
}
The background image is now displayed horizontally as intended I guess but there's still text displayed half on the image half on the blue background. Where do you want it to be displayed?
EDIT: maybe also modify that:
.footer-inner {
padding: 80px 15px 0 15px;
}
I want to nest a div inside another div so that the outer div grows with the inner div as the inner div has text placed inside it. Would appreciate any help. Here is a link so you get the idea. You will need to open your browser up to full screen to see the bottom of it correctly.
Hello Slalvenko, Have posted up both your code (thank you kindly) and my code which I know is not perfect but I'm learning. Yes I am aware of css reset styles that set browser default values to 0 and I did download one once. But I'm hoping that in a years time I will be aware of all of this and just write it into my code. I suppose a reset saves time and trouble but I'm enjoying pottering around what with all of this being new to me. Here is your code and my code. Mine is slightly different because I was wanting to add two more divs to it later which I will show you when I get there. Mike http://www.hnw7.com
.outer {
background-color: #CCF;
margin-top: 0px;
right: 0px;
margin-right: 0px;
bottom: 0px;
margin-bottom: 0px;
}
.inner {
width: 535px;
background-color: #E6E6FF;
color: black;
padding: 20px 50px 20px 50px;
overflow: hidden;
margin: 0 auto;
}
I'm not sure if this was your question but try this. The floats in your .inner div are making the parent's height 0, since the floats take those elements from the document flow. You need to clear those floats if you want your parent to have actual height. I find that easiest way to do so is to add overflow:hidden; to the parent element.
You can read about clearing floats here
I am trying to make a HTML page using two column layout.
I have a version in jsfiddle
http://jsfiddle.net/bobbyfrancisjoseph/eFMpJ/35/
I am unable to set a top margin for the the inner container.Though I have given a top-margin for the innerContainer its not been reflected in the page.
The reason I am using an inner container for containing the left-sidebar and innerContainer is that in the actual page I have two more divs side by side in the inner-container.I do not prefer to use three column layout for that reason.
Your issue is with margin collapsing. You can prevent the margins from collapsing by using a border or padding. There's a good explanation here: http://reference.sitepoint.com/css/collapsingmargins
http://jsfiddle.net/eFMpJ/46/
#outerContainer
{
background-color:#FFF000;
margin:10px 10px 10px 10px;
border-top: 1px solid black;
// or padding-top: 1px;
}
First of all the closing div is missing for the opening .
Then I added padding-top of 10px in outerContainer.
#outerContainer
{
background-color:#FFF000;
margin:10px 10px 10px 10px;
padding-top: 10px;
}
I think this will solve your problem.
Please let me know what is the result.
I am using the AJAX autocomplete add-on to the <asp:textbox> control. I have everything working with a <div> around the <ajaxToolkit:AutoCompleteExtender>.
I set the following CSS class:
.autocomplete_CompletionListElement
{
margin: 0px;
background-color: White;
cursor: default;
overflow-y: auto;
overflow-x: hidden;
height:180px;
text-align: left;
border: 1px solid #777;
z-index:10000;
}
Right now, when the list contains a reasonable amount of items, a vertical scrollbar appears (which is correct) and I can scroll through the drop down which is set to a height of 180px in the CSS (as seen above).
However, when there are only 1 or 2 items in the drop down, the height remains fixed at 180px with the 2 items and blank white space below. What I would ideally want is that the AJAX drop down would shrink to fit the height of its contents. If the contents are more than 180px, then the scrollbar should appear (as it is doing now).
Remove height:180px and change the CSS to use something like:
max-height:180px;
That should work (but I think only from IE7+) the other browsers should support it ok.