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.
Related
Alright so I have a page that's title always changes based on what person is logged in (their name is the title of the page). However because of the fact that the name is always going to be different that means that it needs to be positioned via the center of the text so that it will expand out horizontally both ways. I'm uncertain as to how to approach this and I have tried a few things however due to the variable length of the title none of the suggestions have panned out. So to give you the basics of where I'm at code wise:
#profteamName{
position:absolute;
text-align:center;
top:220px;
left: 550px;
color: white;
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em darkblue;
text-decoration:underline;
I wouldn't be against using relative positioning. Just so long as it will expand horizontally.
(prefer to use absolute positioning long story there but I will take what I can get)
Thank you for your guys time.
Rather than positioning the div from the left side of the page, stretch it across the entire window (or container div on the page) using width:100%;. It'll take up the entire width and align the text - regardless of the length - in the middle of the div.
CSS
.header {
position:absolute;
text-align:center;
top:50px;
width:100%; /* take the width of the window or container div */
/* rest of your code */
}
Here's a CodePen mockup you can play with.
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.
Okay, been struggling with this for a bit now and I have pretty much the appearance I want but am now struggling with positioning the items. Basically I want a stroked text with the stroke on the outside, meaning the webkit text stroke is useless.
So I figured I'll position two text elements on top of each other and do it that way. And that works great, except since I am using position:absolute the element essentially has no height.
The HTML looks like this:
<div class="hcontainer"
<h2>A Framework For Web Artisans</h2>
<span class="h2white">A Framework For Web Artisans</span>
</div>
The CSS like this:
h2{font-size:2em;
margin: 10px 0;
color:#234F70;
-webkit-text-stroke: 10px #531A16;
-webkit-text-fill-color:#FFF;
letter-spacing:-2px;
position:absolute;
top:10px;
left:0px;}
.h2white{font-family:dom_bold,arial black;
font-size:2em;
margin: 10px 0;
color:#FFF;
position:relative;
top:10px; left:0px;
letter-spacing:-2px;
position:absolute;}
.hcontainer{position:relative;clear:both;height:2em;}
So here's the issue. The hcontainer needs to have a set height because the element it contains is positioned absolutely therefore has no height and messes up the flow. The problem is making that height dynamic so I can space the elements properly.
I could make a separate container for each heading but that just seems a bit much. Can anyone think of a better way to do what I'm trying to do here? Or a way around the height issue?
http://jsfiddle.net/calder12/9M7YZ/
I don't really understand what it means that "The problem is making that height dynamic so I can space the elements properly." But if you want to not have to declare a height on .hcontainer, you can use a negative top margin on .h2white to place it on top of the red h2 instead of using absolute positioning. Like so:
http://jsfiddle.net/9M7YZ/10/
.h2white{
font-family:lemon;
font-weight:bold;
font-size:4em;
color:#FFF;
letter-spacing:-2px;
margin-top:-86px;
position:absolute;
}
I have horizontally stacked divs using the following code below:
.basic {
width:100px;
position:relative;
display:inline-block;
border: 1px solid red;
text-align:center;
margin:0;
padding:0;
}
#container {
white-space: nowrap;
border: 1px solid black;
width:300px;
overflow:auto;
}
The 'container' has white-space:nowrap for stacking it's children horizontally. However, the horizontal children have spaces to their right. Here's a fiddle showing the demo. Inspecting box layout there doesn't seem to be any margin/padding. But just some mysterious 'dark matter' pushing it out :P
The queer thing is that the same code is used at different places in my application but this anomaly shows up in one place as shown in the image below:
Don't worry about the garbled text on the top. I haven't rotated the div 90 degrees CCW as yet :)
However, pay attention to the bottom part of the image. The textbox divs are stuck to each other whereas the ones on the top aren't. They use the same CSS as above, but differ in structure. The top Div has two floats which are cleared by the div with the arrow towards the bottom. So no 'uncleared' floats there. Rather than posting the entire HTML/CSS I recreated the problem in the fiddle.
What I fail to understand is that even after having 0 margin/padding and display:inline-block for the child divs why is there still some space? I'm sure this has been asked quite a few times here but why would this happen once and not in another place? Besides, how best to 'fix it'??
display: inline-block places a margin to the right if there exists a whitespace between the current and the next element. This space is calculated as a product of 4px and the current font-size in ems. Notice the difference between the first and second rows in this fiddle: http://jsfiddle.net/MkasM/
In your case, this can be controlled simply by setting margin-right: -4px since you haven't changed the font-size.
More here: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Also, it is good practice to give your elements 'box-sizing: border-box' if you haven't already. It will contain the 'padding' and border-widths within the blocks so it wont interfere with the layout.
To read: http://paulirish.com/2012/box-sizing-border-box-ftw/
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