I have a menu system which uses an image 170px wide by 1px tall (repeated indefinite) It has a 10px border on the left, but a 30px border on the right.
is there a way to center the text, but accounting for the extra 20px on the right side?
Fiddle SiteCode: http://jsfiddle.net/jgallaway81/AXVT5/1/
Relevant Code:
.menubuttonthin {margin-left:0px; margin-top:0px; margin-bottom:0px; width:170px; height:30px; display:block; line-height:30px; font-family:courier; font-size:small; color:#C8C8C8; text-decoration:none; font-weight:900; background-image: url(../_pic-lib/lcars-frame-button-thin.png); }
FCCorp.US Story
As you can see, I don't have the links div'd, because they are encapsulated by a div that created the menu area box. Also, I've tried margining and padding both sides, but all that does is increase the size of teh box, throwing off the background image so it doesn't match up to the background image of the site.
Place your text in a <div> and use the following style for it:
text-align:center;
margin-right:-20px;
For example, if you want to use inline style:
<div style="text-align:center; margin-right:-20px;">
</div>
If I'm understanding you're question, one approach would be to do something along these lines:
CSS;
foo {
width: 130px;
padding: 0 30px 0 10px;
text-align: center;
}
HTML:
<div class="foo">Whatevs</div>
That'll confine the contents of the div to just the non-border area.
Okay, one opinion... I'm a real idiot.
Answer:
It wasn't until madhushankarox mentioned text-indent that the answer came to me. Reduce the size of the link area to eliminate the difference between both sides as far as the text-centering was concerned, but then use padding to increase thesize to ensure the entire button image was displayed.
.menubuttonthin { padding-right:10px; width:160px; }
(only included the changes) width was shrunk from 170px to 160px, which created the centering; the padding increased teh size of the box, showing the last 10px of the background (button) image
Thanks for all the help!
Course, after I posted this, I realized that Ultranaut was right all along. Sorry about that. I checked your answer as the right one. Thanks.
Related
I'm using CSS box-shadow to mimic a background that "bleeds" to the edges of the browser window. It works great in Chrome, Firefox, Safari, and Internet Explorer 9 & 10. However, Internet Explorer 11 renders a transparent 1px "space" before the left (negative) box-shadow.
Take this HTML:
<div class="wrapper">
<div class="widget">Test</div>
</div>
And this CSS:
.wrapper {
background:red;
padding:20px 0;
}
.widget {
width:600px;
height:400px;
margin:0 auto;
text-align:center;
background:white;
box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
}
In most browsers, the widget DIV has a white background and white left & right box shadows that fill the width of the browser window with no spaces, breaks or red from the wrapper bleeding through. In IE11 there is a 1px red line that runs vertically along the left side of the widget DIV.
Take a look at this fiddle for an example: http://jsfiddle.net/Bxsdd/. (You may need to manually adjust the width of the fiddle Results pane as slight differences in the width of the window show the issue more apparently - again, only in IE11.)
Things I've tried to remove the transparent space:
Changing the box-shadow from using em's to using px's
Adding or subtracting 1px from the other box-shadow attributes
Adding a border around the widget DIV
Adjusting the padding, display, position and other CSS elements for the widget
So many things I can't even remember right now
Any ideas how to remove the 1px transparent space in IE11?
Now that we know it's a bug, here's one acceptable workaround:
.widget {
width:600px;
height:400px;
margin:0 auto;
text-align:center;
background:white;
box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
position:relative;
z-index:2;
}
.widget:before, .widget:after {
position:absolute;
content: " ";
width:1em;
left:-1em;
top:0;
height:100%;
background:white;
z-index:1;
}
.widget:after {
left:auto;
right:-1em;
}
Basically, I'm adding absolutely positioned :before & :after pseudo elements that contain nothing more than the same background color as the widget DIV and that DIV's box-shadow. These pseudo elements are offset just to the outside-left and outside-right of the widget DIV and positioned behind it so that they provide the correct color for the box-shadow bleed through.
Obviously this adds complication if one is already using the :before & :after elements, but this works for my purposes. I suppose one could also try setting negative margins on the widget DIV.
Checkout the fiddle here: http://jsfiddle.net/TVNZ2/
THE PROBLEM:
This appears to be an graduated alpha transparency/aliasing issue to do with even/odd pixelation calculations.
As best I can tell, colour is spilling into that pixel line but the antialiasing calculation is stripping its alpha value in an attempt to try graduate the distinction of the box-shadow with its surrounds.
That is fine on the outside border of the box shadow, but not so great in the inside border - which is why we are all here!
WHAT (PRETTY MUCH) WORKED FOR ME (PURE CSS):
In my use case, this was fixed by adding several additional box-shadows (of different and lesser values) like so:
div {box-shadow: 10px 0px 0px 0px red,
4px 0px 0px 0px red,
3px 0px 0px 0px red,
1px 0px 0px 0px red;}
Though not elegant, this cumulatively increase the "spill" into the inner pixel line. About three additional box-shadows were required to achieve the desired value - suggesting the antialiasing spill is set at about 25%. Different device densities may change that?
Simply repeating the same box-shadow didn't work - so I am guessing IE treated them as an repetition error and ignored them.
THE "PRETTY MUCH" PART (FOR ME):
In my use case I was adding a purely horizontal box shadow to the right of a text span to create the impression of padding if the line broke and became more than one line. I wasn't adding a shadow to the top or bottom or around a div.
The "pretty much" part for me is that there is a little vertical spill "dot" of about 1px or 2 pixels at the top and bottom of pixel line at certain widths. Essentially, the same problem above in reverse.
Not ideal, but far more preferable than having a whole line transparent.
I hope this will work for you (the reader) in similar other scenarios, but I haven't tested this.
Good luck, and let's all thank good ol' IE for its "challenges"!! ;)
You can fill the space with outline:1px solid color; It worked for me.
.container{
display:block;
position: relative;
width:450px;
height:450px;
margin: 0 auto;
background-color: #654d7f;
}
.header-emphasis{
position: absolute;
bottom:5px;
max-width: 420px
}
span{
position: relative;
left:8px;
background-color: white;
padding:4px 4px 4px 0px;
color: #666666;
box-shadow: 6px 1px 0px 2px #ffffff, -8px 1px 0px 2px #ffffff;
outline: 1px solid white;
}
<div class="container">
<h3 class="header-emphasis">
<span class="highlight">
If there are no dogs in heaven then when i die i want to go where they went.
</span>
</h3>
</div>
I thought I would share my answer to this issue. I cannot be sure that I have had the same exact problem as everyone else, but what I have observed is this: The problem occurs in EI11 (and EI10 according to other which I have not tested) when an element with a set width of pixels is centered using margin: auto; (my case was a left/right issue). I noticed that on resize, the div would shift over to the right 1px on every other pixel width of the screen.
I used a transparent background to observe that instead of just a gap appearing on the left, the div did in fact shift 1px to the right.
Changing the width of the div 1px does work on the current screen width. However, change the screen width will bring back the problem on every other pixel.
To solve the issue, we need to identify the screen width as even or odd. In my case, on even I added a css rule to my culprit div. The new rule changes the left positioning by 0.5px.
Furthermore, the function needs to be executed on the screen resize.
Below is the script I used to fix the issue:
(function (window, document) {
function isEven() {
var windowWidth = window.innerWidth;
// Find out if size is even or odd
if (windowWidth % 2 === 0) {
document.querySelector("#container").classList.add("container_left_1px");
} else {
document.querySelector("#container").classList.remove("container_left_1px");
}
};
document.addEventListener("DOMContentLoaded", isEven);
window.addEventListener(('onorientationchange' in window) ? 'orientationchange':'resize', isEven);
})(this, this.document);
And the css rule
.container_left_1px {left: .5px;}
Executing the script only on EI10 and 11 would be optimum. Please forgive my scripting as this is the first js I have made. Please feel free to correct any issues. This solved my problem; I hope someone finds it helpful!
DaveE gave a nice solution. I played with this myself as well. I had an issue with the top and bottom blur of a box-shadow, instead of left and right. I eventually solved it by just adding a border on top and use important next to it.
.class
{
border-top:1px solid $colorBg !important;
border-bottom:1px solid $colorBg !important;
}
Perhaps not as well tought out as the previous solution, but it worked for me.
Found this solution(Small space between box shadow and div when alpha set) and it works for me: div width must be an odd number.
width: 800px; => not working, but width:799px; => works and white gap disappeared!
In my case, I had a white line between the div bottom and the shadow and I resolved the issue adding a height to the div with decimals:
height:30px; -> height:30.1px;
i hope someone can answer this question because my client wants this and right now i dont know how to build this in css.
Does anyone know how to build something like this ?
It should be something like if you align your image to the right your text will align nicely with the image.
Here what i want to do is to build a div make a border around all the text that has been typed and then align it with the image. how could i do this?
After the help of Pete.
Problem here is the
box-shadow
Also the box needs to be transparant later in the stage.
This is my result right now http://jsfiddle.net/peteng/cu59r/.
Edit : Thank you for all the answers and support to help me solve this css issue.
The following thing it should happen is :
See the picture.
See the jsfiddle link i posted.
The content with the border needs a box-shadow, a border radius and a gradient.
This needs to be dynamic.
And again thank you community for helping me means alot to me.
with the use of a couple of images you should be able to create what you want
html
<div id="wrapper">
<div id="imageHolder"><div class="inner"><img src="http://lorempixel.com/200/200" /></div></div>
<!--put text here-->
<p>Text</p>
</div>
css
#wrapper {width:400px; border-radius:10px; border-top-right-radius:0px; background-color:#7ab37a; overflow:auto; padding:15px;}
#imageHolder {float:right; margin:-15px -15px 0 0; background:#ffffff url(http://i.imgur.com/gMIy72D.gif) left top no-repeat;}
#imageHolder .inner {background:url(http://i.imgur.com/RLBbLYV.gif) right bottom no-repeat; padding:10px 10px 20px 20px;}
Example
Update
With all your edits as to what you now want (instead of the simple l-shape in your original question). This is not possible for the following reason
The text has to have a background colour which means that you need the background colour on the main wrapper so that it will make the l-shape. This means the only way to get the desired effect of the rounded corners for the image is to place another background over the wrapper background (meaning you cannot have anything transparent otherwise the wrapper background-color will just show through)
The best you can hope for is to tell the client, if they want that shape, they will have to keep the images to an exact size and their text to a specific length and then you can use a simple background image
I think there isn't a easy way to style your text-box like this.
My suggestion: designs the box with Photoshop and then add it as a background image in two different divs (the text box should have a transparent background where the image should be). After this you position the divs in the right way, if necessary with a wrapper div.
disadvantages: not responsive, static, and so on
You can simply float the image and it will look like this: http://www.homeandlearn.co.uk/wd/images/chapter3/text_wrap_final.gif
Just add
float: right/left;
margin: 0;
See if that works.
see this DEMO . Is this what you are expecting.
<figure style="float:right;">
This is a very good question in my opinion :)
My short answer would be - yes, it's possible - see Pete's answer. I understand the difficulty of the situation and also I understand the fact that this kind of solution lacks flexibility because it combines css border-radius and an image - so => a) it will look weird in IE8 and below and b) it will look weird if we change some css :)
My own answer would be to use css only to do that, but the main issue will be unsolved, the corners close to the image will not be rounded by any means in css that I'm aware of.
Consider looking at this fiddle - http://jsfiddle.net/skip405/m6cpb/1/
I would prefer my variant because it's a bit more flexible - if there is a need of change - only css will change, no need of re-making any images of another color or of a different radius... no images needed at all :) Although you will need to style the images floated to the left differently and those - in the middle of the text as well.
Skull3r7 had a good idea with background-images. In addition, it is possible to use two divs with (dynamic) text and one other with the 'top border'.
Layer one contains the text as 'placeholder' and 'bottom border',
Layer two contains the 'top border image' (covers the top of Layer one)
Layer three contains the visible text.
Example
However, it is easier to implement Pete's solution, but I hope this example can help too. :)
A further alternative to those suggested, given the following HTML structure:
<div class="imgContainer">
<img src="http://placekitten.com/150/150" />
<p><!-- text excised for brevity --></p>
</div>
And CSS:
.imgContainer {
border: 1px solid #000;
padding: 0;
width: 80%;
margin: 0 auto 1em auto;
border-radius: 1em;
}
.imgContainer img {
float: right;
margin: -1px -1px 0 0;
padding: 0 0 0.5em 0.5em;
border: 1px solid #fff;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
.imgContainer p {
margin: 0.5em;
padding: 0;
text-indent: 0.5em;
}
JS Fiddle demo.
This should allow any size image to be used (so long as it fits within the container element, of course), and be responsive, and adaptable to changed sizes.
Unfortunately, though, I can't think of a way to provide the curve on the borders of the img itself. On the plus-side, it avoids needlessly wrapping and re-wrapping elements, so the HTML itself could, and should, stay pretty lean.
Fiddle: http://jsfiddle.net/jgallaway81/ax9wh/
<a href="lcars.jfx.php" class="leftbuttons buttonlinks antibutton">
LCARS Locomotive O.S.
</a>
My problem is the text label in the graphic. I'm using this button design all over my site, with only the text and its size varying. When I originally designed the system (on page: http://www.fccorp.us/development/index.php and then again on http://www.fccorp.us/development/index.fccorp.php), I used the margins & padding CSS controls to get the text centered vertically within the button. But that depended on a static font height. Now I want to use a taller font and can't get the thing to auto center height wise. I tried
.leftbuttons {
width:335px;
height:40px;
padding:**auto**
20px **auto**
45px; font-size:1em;
border-style:solid;
border-width:0px;
font-family:Arial;
font-weight:900;
margin-left:10px;
margin-right:20px;
margin-top:20px;
margin-bottom:20px;
text-align:center;
display:inline-block;
background-image: url(http://img580.imageshack.us/img580/1461/lcarssitebutton.png);
}
But all that ended up doing was chopping the image up.
I'm using the .antibutton to try to override a few details from the other classes in order to get what I'm trying to get. If I can solve the text vertical-align problem (or some nice coder here can figure out what the heck I screwed up), I also want to get the button's bottom aligned even with the text line.
Any thoughts?
Why don't you just add a line-height: to your unique cases?
for example, i added line-height: 40px; to a.buttonlinks and it centers vertically just fine.
I have a group of rectangular Divs, all of class 'Bar', these are all floated far right inside the container which also contains a similar set-up floated left inside it.
In Google Chrome this works fine and the bars are stacked on top of each other with spacing of a between them. However in IE the bars are shown below the floated left content and are not stacked on top of each other.
Please say if more info is needed I tried to include only most important so the post isnt too long.
Thanks in advance
.Bar {
border-color: #666;
background-color: #eee;
width:200px;
height:25px;
border-style:solid;
border-width:1px;
border-radius:6px;
padding: 2px;
margin:6px 0 0 0;
float:right;
line-height:25px;
font-size:12px;
}
Removing bdInnerBar class's float:right fixes situation on my side, even more the right bars get blue color.
Sorry, I can't get the reason for this, if possible please clean-up the html and css to have only relevant parts in them, if you want to get more general answer.
I have an image with rounded corners(png transparent on the corners), about 150px wide, and 25px height, so i'm trying to use it, but it doesn't work for me:
<button><span>Click me</span></button>
And the css:
button{
border:0;
background:url(../images/button.png) no-repeat top left;
height:24px;
padding-left:10px;
}
And
button span{
display:block;
background:transparent url(../images/button.png) no-repeat top right;
height:24px;
padding-right:10px;
}
But it doesn't work correctly, the right corner isn't displayed correctly.Any help?
Best Regards,
Using Firebug (use it!) it is clear what is happening. Your right corner shows, but as the the button underneath it continues, you simply don´t see it.
You can solve that using two images, a small one (not so wide, minimum width the padding on the left side) for the left corner and a very wide one for the right corner. That way your buttons don´t overlap and you get the desired effect.
First things first: How is it displayed?
You're using the same background images for both left and right corner. Is that in order? (I realize that technically it could be) Also, you might want to try and switch the two (left/right), as span is not a block element, and that might be causing your problems (much in the same way that you can't, say, set a width to a span, unless you also set it to render as a block)
your span and button elements have the same height (which is smaller than image height by the way). Another observation: why do you need span element at all?
start with the simplest way to do something:
<button>Click me!</button>
button {
border: 1px solid #ff0;
padding: 10px;
display:block;
background:transparent url(../images/button.png) no-repeat top centre;
height:25px;
}
this should display your image. Use border property to debug CSS