I am having trouble getting a background-image to overlay the border of another div. We have a sidebar panel with various sidebars, including a navigation menu. To the right is the content panel. We'd like anything selected on the sidebar to appear connected to the content panel:
In the example above, there is a background image on the Personal Info <li> tag. I'd like to extend this image one pixel to the right so that the line next to the selected value isn't visible.
Here is my CSS for the submenu (selected) and the Content area to the right:
.submenu-item li span{
padding: 4px 0 4px 16px;
min-height: 16px;
border-bottom:0px;
}
.submenu-item li{
font-size:12px;
border: none;
padding: 0px 0 0px 16px;
}
.submenu-item span.Active{
background-image: url(../images/submenu-select.png);
background-repeat: no-repeat;
}
#Content {
margin-left:190px;
border-left: 1px solid #b0b0b0;
padding: 20px;
background: #FFFFFF;
min-height:600px;
}
Is there a way to do this other than putting a right border on my sidebar (and excluding it on the list item tag)?
If you have a border on that right, you just can't eliminate that part of the border.
However, you're in luck. Try using margin-right: -1px; in your CSS. This will drag the
element to the right 1 pixel, and hopefully over the border. You may need to also set
position: relative;
z-index: 100;
Also, because it's over to the right 1 pixel, to make it align on the left with the others, you may need to make the active element 1 pixel wider.
Alex's solution should work, but another way to do it would be to remove the border-left CSS atrtribute from #Content and instead use a 1 pixel wide gray GIF or PNG image on the DIV containing the submenu items.
Like this:
#SubMenu { background: url(grayline.gif) #CCCCCC top right; }
That would remove the need to worry about the selected submenu element not being aligned.
Related
As in this test page https://play.pianohub.it/
I'm using three carousel sliders with two navigation arrows
If you hover over either the nav arrows, you'll see that this div covers only a portion of the picture height, while I need it to span top to bottom.
I'm using this CSS
.arrow {
font-size: 18px;
padding-right: 7px;
padding-left: 7px;
background-color: rgba(22,22,22,0.29);
color: #ffffff;
}
I tried to use padding:auto for top and bottom but it is not a thing. I should fix it by counting the needed pixel but it wouldn't be responsive.
How can I set automatic padding?
If the list-container and the arrow have the same father, you can set:
height: 100%;
so the height of the arrow will be as 100% as the father
I am trying to stick my pop up to top and make it a bit smaller to fit the screen.
Here is my landing page URL - yogavoga.com/2weekdiet
Any help will be appreciated.
.modal-content {
margin: 5px auto;
background-color: #fefefe;
border: 1px solid #888;border-width:3px;
width: 90%;
}
I'm not sure if this solves your question in full, because your sample code is a bit short and it doesn't show the element itself. I tried visiting your website, but can't find the element. So it is very difficult for us to say what you actually want.
margin is the space around your div element, in this case your modal. With your code you say your browser to put your element at the top, (0 margin at the top), and do the rest automatically. It does that and will center your element based on the width of your element.
You can scale your element with width. Make it smaller by reducing the percentage.
.modal-content {
margin: 0 auto; // 0 from top, left, bottom and right auto.
background-color: #fefefe;
border: 1px solid #888;
border-width: 3px;
width: 60%; // Width of your element.
}
TIP: remove the margin and padding presets from your body to have your element at the absolute browser border.
I have a simple set of links at the top of a page with a black border underneath. The active link should show a white border underneath. This border should sit directly over the black border.
I am unable to change the HTML at this stage, only the styling.
Here is a fiddle - http://jsfiddle.net/grimmus/8E4D5/
<div class="c-landing-pg-tabs-container">
<div class="c-landing-pg-tabs paymentsLeft">
<div>Payments</div>
<div>Inquiries</div>
<div>Trade</div>
</div>
</div>
I am having difficulty getting it positioned over the black border. I can change the display to inline-block, increase the height of the A element, but it sits underneath all the time. Tried also to change to position:relative and nudge it down a bit. It seems some sort of z-index might work but not sure if it's possible because all elements are contained within the same parent.
Thanks for any tips.
Remove the overflow:hidden from .c-landing-pg-tabs-container and add padding-bottom: 12px; to .c-landing-pg-tabs a.active-tab. The new rules will look like this:
.c-landing-pg-tabs-container {
position: relative;
height: 41px;
width: 100%;
min-width: 240px;
border-bottom: 2px solid #282828;
margin-bottom: 16px;
}
.c-landing-pg-tabs a.active-tab {
border-bottom: 2px solid #FFF;
color: #FFF;
padding-bottom: 12px;
}
Here's your modified fiddle: http://jsfiddle.net/sc5pB/
i'm new to css sprits. i have added a small red color arrow like image to all links in a DIV ID. it looks like this.(image attached)
how to get some padding after the background image ? i mean some space between image and text using CSS.
CSS
#maincontent a:link {
background: url(images/css-images.png) no-repeat top left;
background-position: 0 0;
width: 4px;
height: 12px;
display:inline;
}
HTML
<div id="maincontent">
Btech III
</div>
i tried adding to css padding right, but it is giving some space after text not after image.
You want to use padding on your link, this will leave the background where it is but move the text, try padding-left: 25px;. But adding padding will add to the width so you will want to adjust the width of your link and reduce it by the amount of padding you have added (maybe not in this example)
Also your example image isn't loading
Try this:
#maincontent a:link {
background: url(images/css-images.png) no-repeat top left;
background-position: 0 0;
width: 4px;
padding-left: 25px;
height: 12px;
display:inline;
}
just apply a padding-left or a text-indent to your link
I'm looking to have a full page image with a section of the image that, when hovered over, changes the image to a colored version of the original black & white image. I tried doing this with image maps & onMouseOver, but didn't have any success. There are only two images being used, a color and a black and white one.
I just want to have it so that when you hover over a section of the black and white image, the whole thing turns to the color version, and onMouseOut reverts back to the black and white. I'm using this as a splash screen for a blog and the hovered section will serve as a link into the site.
Thanks for the help
If you don't mind your hover area being "square" then using pure css this should work (note, replace the background colors with your appropriate image and the border on the a is just for illustration). Tested in Firefox, IE7, IE8:
HTML:
<span class="img"></span>
CSS (EDITED FOR IE7-8 BUGS):
body {
margin: 300px 218px 178px 400px; /*see explanation below css*/
width: 22px; /*total width of a tag including padding and borders*/
height: 22px; /*total height of a tag including padding and borders*/
}
a { /*warning, do not give this position: use margin to position it*/
width: 20px;
height: 20px;
display: block;
border: 1px solid red;
overflow: visible;
/*deleted margin from this: moved to body*/
}
a span.img {
position: absolute; /*this gives it block display by default*/
top: 0;
left: 0;
z-index: -1;
background-color: yellow; /*bw image here*/
width: 640px; /*image width*/
height: 500px; /*image height*/
}
a:hover span.img {
background-color: blue; /*color image here*/
}
/*deleted the a:hover span.img:hover as it was not needed after all*/
Of course if IE6 is a concern, then you need to do something with javascript for it to recognize the span:hover.
ADDED ON EDIT: I discovered that the a tag would hover sometimes outside of the defined area for the IE browsers. To avoid that, the body must have margins placed on such that the left and top position the a tag, and the right and bottom must make up the difference in the image size minus the total width of the a tag.