If you check out this link (http://noahsdad.com/state-fair-texas-2011/) you'll notice that scrolling side bar to the left of the content area. I'm trying to get it to be closer to the content area, any ideas how on to do this?
Thanks.
In the options of the plug in they give me this, I'm assuming I have to make the css changes in their code, instead of my own stylesheet?
#dd_ajax_float{
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #BBBBBB;
float:left;
margin-left:-120px;
margin-right:5px;
margin-top:10px;
position:absolute;
z-index:9999;
}
Change the margin-left element of #dd_ajax_float to something like -100px instead of -120px
I was able to add this to your page and make it work..not sure where you are linking the style sheet for that floating area
<style type="text/css">
#dd_ajax_float
{
margin-left: -100px !important;
}
</style>
Related
Repeat-x property for CSS is not working as required.
I have a 50px image (to be used as background image).
I take a 200px div and set the 50px image as background with repeat-x css property.
The problem I am facing is 4 images (4 * 50px = 200px) are correctly drawn and a little portion of the image is also drawn at the end. As I think this extra portion should not be drawn. Please help.
css property:
{
width:200px;
height:27px;
position:absolute;
background:url(./img/common/bg_grid.jpg) repeat-x left top;
background-size:50px 27px;
}
from above link you may find correct background image
There is a certain level of margin or padding that is inheriting its default value from the nested/parent elements. You need to reset them in order to get what you are looking for.
From your above code, For Instance,
{
width:200px;
height:27px;
position:absolute;
background:url(./img/common/bg_grid.jpg) repeat-x left top;
background-size:50px 27px;
padding:0; /* Reset values */
margin:0; /* Reset values */
}
EDIT:
As per the updated fiddle provided by the OP, below is the solution.
WORKING DEMO
The CSS Code Change:
<div style="width:900px;height:27px;position:absolute;top:150px;right:100px;background:url(http://i.stack.imgur.com/5ebiu.jpg) repeat-x left top;overflow:hidden;background-size:45px 28px;background-repeat: space;margin:0;padding:0"></div>
Hope this helps.
try this one
.content
{
display:block;
position:relative;
float:left;
width:1000px;
background:#ccc;
height:300px;
}
http://jsfiddle.net/c9j2D/7/
I'm trying to create this box, but it's a little over my head. I can't get the spacing after the white header text to display correctly.
The live version is here, and the current CSS is below. A standard < p > inside the div ignores the bottom padding on hblock and I can't help but think I'm going about this the wrong way. Is there a simpler way to create this element or something I'm missing in the code?
Many thanks.
#lheaderblock{display:block;
padding:0px 10px 0px 10px;
background-image:url('http://atlas.czg.net/atlas/wp-content/uploads/2012/12/caption_header_blue.gif');
height:160px;
width:90%;
border:1px solid #000000;
background-repeat:no-repeat;
overflow: hidden;}
hblock{position:absolute;
color:#FFFFFF;
font-size:14pt;
padding:10px 0px 20px 15px;}
I don't know what <hblock> is. When browsers don't know either, they will render them as inline element. You need to give it display: block and remove position: absolute. Tweak the padding and you'll be fine.
I'm using the jquery modal overlay pretty much out of the box as shown here:
http://flowplayer.org/tools/demos/overlay/index.htm
However, I have a dynamic search box within my overlay and when the contents are long I want to have a vertical scroll bar. So I added overflow:auto; to the CSS like this:
.simple_overlay {
/* must be initially hidden */
display:none;
overflow:auto;
/* place overlay on top of other elements */
z-index:10000;
/* styling */
background-color:#333;
width:675px;
min-height:200px;
max-height:600px;
border:1px solid #666;
/* CSS3 styling for latest browsers */
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
}
Unfortunately, this automatically adds a horizontal scroll bar because of the close button:
/* close button positioned on upper right corner */
.simple_overlay .close {
background-image:url(../img/overlay/close.png);
position:absolute;
right:-15px;
top:-15px;
cursor:pointer;
height:35px;
width:35px;
}
I've played around with a few different options but with no luck. I don't have a huge amount of CSS knowledge unfortunately. If anyone could help me get the overlayed cross but no horizontal scroll bar that would be lovely.
Thank you
Tom
EDIT A friend on twitter helped me fix it. Basically I've just added another div inside the popup and set the scroll on that like this:
HTML:
<div class="simple_overlay" id="asearch">
<div id="searchbox">
<form id="amazonsearch" style='float:left;'>
<input class="title" id="amazon-terms">
<button>Search!</button>
</form>
<div id="amazon-results"></div>
</div><!--seachbox-->
</div><!--Overlay-->
CSS:
#searchbox {
overflow:auto;
width:500px;
min-height:200px;
max-height:500px;
}
Then the close cross is always positioned correctly and doesn't intefere with the scroll since the scroll only applies to the inner div :)
Maybe try overflow-y:auto instead? I'm unsure of level of browser support of that property these days.
I am styling a asp:DropDownList element with custom CSS. I have set the height and am trying to get the text to appear in the middle of the element, rather than at the bottom. Vertical-align:middle does not seem to work, and if I add padding-bottom to push it up from the bottom, in IE there is an ugly gap between the arrow on the right of the drop-down and the border. This is my CSS currently:
.dropdowndiv
{
font-size:10pt;
margin-bottom:2px;
height:26px;
width:220px;
border:1px solid #d5d5d5;
text-transform:uppercase;
vertical-align:middle;
}
Try this:
.dropdowndiv
{
font-size:10pt;
padding-bottom:4px;
height:26px;
width:220px;
border:1px solid #d5d5d5;
text-transform:uppercase;
vertical-align:middle;
}
I changed the margin-bottom setting of 2px to a padding-bottom of 4px.
UPDATE:
Looked fine on mine, but you can add padding to any side to get it the way you wish.
Failing that you may want to look at Tag mapping - Lee Dumond suggested this on his blog in response to a similar problem I was experiencing at the time:
http://leedumond.com/blog/fixing-asp-net-server-control-rendering-issues-with-tag-mapping/
Adding a line height of 26px should align your text to the middle.
First of all here the work in progress website link http://jacobnlsn.com/wordpress/. I want the bars to be the same height. Here is what i have in CSS for both:
#bodybinblog {
width:546px;
float:left;
background:#400000;
border-left:solid 9px #cdba70;
border-right:solid 9px #cdba70;
margin:0 15px 0 30px;
padding:0;
}
#sidebarbinblog {
width:229px;
height:inherit;
float:left;
background:#400000;
border-left:solid 10px #cdba70;
border-right:solid 10px #cdba70;
margin:0 0 0 11px;
padding:0;
}
Any idea how to fix this?
I think one of the tricks designers use in webdesigns is the laying of background images. In this case, you want the sidebarbinblog to assume the same height as the bodybinblog because you want the background to fit nicely. If the sidebar's height is higher than the body, same problem will occur but this time on the body side.
The solution is to create a background image of maybe 1px horizontally capturing both for the body and the sidebar. Apply that background on the container div of both the body and the sidebar Repeat-y it so it spans the full height.
You want to use "faux columns". Here is a useful link - http://dustinbrewer.com/tutorials/fauxcolumns/
It should work like magic.