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.
Related
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'm new to css and have done several exercises on websites such as code academy but am now experimenting with my own page and lack much practical experience.
I know that you can wrap text around an image using "float" but I want to keep the text in a straight line and border. However, the border and background ignore the position of the image and run behind it. Whats the best way to position then a paragraph and border with an image so that the border will stop against the image?
these are the sections that would be relevant to this:
img {
margin:5px;
float:right; }
p {
background:white;
margin-left:40px;
margin-bottom:0px;
margin-right:0px;
font-family:veranda;
border:2px solid #045FB4;
padding:5px; }
p and img tags have no styling in the body section
example here: http://jimbob.webatu.com/
Any other tips in positioning would be appreciated :)
not sure what you mean when referring to the border, but in order for the text to align around the image properly, use:
p {
text-align: justify;
}
Currently, I am modifying a css document to make a website compatible in IE 6 and including it using a conditional statement. Everything is slowly starting to look as it should EXCEPT....I can't seem to modify the height of the background image in the css below. I can make it bigger by increasing the height, but decreasing the height does not make it smaller. The original image is quite thin, so I don't see why this is a problem.
#title{
text-align:left;
margin-left:170px;
margin-top:0px;
background-image:url(images/gradient.jpg);
background-repeat:repeat-y;
padding: 0px 0px 0px 0px;
width:680px;
height:42px;
color:white;
font-family:Helvetica, Georgia, "Times New Roman", Times, serif;
position:relative;
top:0px;
}
You can see in the attached image that the red gradient background image underneath the cork header image is too big and the text inside is too large also. However, no matter what I change in the css, it doesn't seem to alter anything.
Image of webpage
The div tag is:
<div id="title">
<h1>
Historia </h1>
</div>
Any thoughts as to why I can't seem to change this?
I would try first by using firebug lite for IE, that way at least you aren't guessing whats going wrong and you can identify the padding/height/etc;
My thought is that the height is simply being stretched by the h1 element (perhaps something else sneaking in too), thats my best guess as I don't have IE6 to test, but since your height is defined for the #title it must be whats inside of it that stretches it. Try setting overflow: hidden; for the #title see if that helps, or at least shows your 42px height.
http://bodegacooperativacigales.com/historianew.html
Try firebuglite, and view the element, it will show you what to get rid of in IE.
EDIT
to define your h1 simply do this:
#title{
text-align:left;
margin-left:170px;
margin-top:0px;
...
}
#title h1 {
height: 20px;
margin: 0; // remove margin
padding: 0; // remove padding to check if this is the issue
}
in your IE6 CSS sheet. Don't set a background image into the h1. The above piece is separate from your #title css definition.
I think you might be having issues regarding the height due to the child element creating overflow. Try adding the following rule to prevent the parent element from displaying any overflow:
#title {
overflow: hidden;
}
I'm using VS2010,C# to develop my ASP.NET web app, I'm using a .js file to display some small tool tips in my program, there is a CSS file also that should be used in my ASPX files so that this tooltip is displayed correctly, but when I use this CSS all my page (including tables) are displayed at left side of page while I've aligned them to be at the center of page, I'm not an expert in CSS files, how can I fix this problem, here is my CSS file:
* {margin:0; padding:0}
body {font:12px/1.5 Tahoma, Arial, Helvetica, sans-serif; background:#FFF}
#text {margin:50px auto; width:500px}
.hotspot {color:#900; padding-bottom:1px; border-bottom:1px dotted #900; cursor:pointer}
#tt {position:absolute; display:block; background:url(images/tt_left.gif) top left no-repeat}
#tttop {display:block; height:5px; margin-left:5px; background:url(images/tt_top.gif) top right no-repeat; overflow:hidden}
#ttcont {display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#666; color:#FFF}
#ttbot {display:block; height:5px; margin-left:5px; background:url(images/tt_bottom.gif) top right no-repeat; overflow:hidden}
#tt is set to position: absolute. This is probably the cause of your problems since you are not telling it what position you want so I suspect it is defaulting to top left.
What CSS are you using to align things to the center? And what is your HTML structure? I am assuming that #tt is ta main container on your page...
To actually find out which part of your CSS is wrong though then the easiest way of doing it is to just remove each line/property from your CSS file and retest until the positioning stops dying.
Also if that CSS is there purely for your tooltip then you probably shouldn't be using a * selector. Something more specific like .Tooltip * would minimise any interference from anyting outside.
And in general if styles are meant to only apply to one given piece of content I would use a class (or id) on that content as a prefix to every selector to guarantee that you cannot possibly change anything outside of that.
Going on your code and comments, all I can see that would be effecting the layout of your page is that you are resetting all the margins and padding on your elements using the style
* { margin: 0; padding: 0 }
Also since you are not properly centring your elements (using a wrapping <div> with a fixed width and margin: 0 auto;, then it seems as though it is just your margins and padding that are now off.