I am trying to style h1 using following image...
Currently my code as following...
h1{
background:#add2cb;
padding:15px 20px;
color:#387475;
font-size:16px;
font-weight:bold;
}
But i want yours help to add left and right bottom curve using css. I have tried lots of ways, please help me to rewrite css code to achieve this. thanks.
You should totally check out Harry Roberts version, the beauty is you won't be requiring any additional elements to pull it off.
http://csswizardry.com/2011/02/css-powered-ribbons-the-clean-way/
This method will include a few images, however because they're only for the curled under parts there will be less weight to download and will degrade better.
You cannot add curves like that with CSS alone, those will have to be a single image. If the H1's are all going to be the same size, then you can have an image of the bottom of that and then add this line to your h1 CSS
background: url("path/to.image") bottom center no-repeat;
I'm not sure if it is possible to make it work with H1's that are different sizes unless you want to use <div>s instead.
With 1`s you can do this:
HTML:
<div class="heading"><span>Text Goes Here</span><div>
CSS:
.heading { background: url("left-curve-image.jpg") left center no-repeat #add2cb;
padding:15px 20px;
color:#387475;
font-size:16px;
font-weight:bold; }
.heading span { background: url("right-curve-image.jpg") right center no-repeat #add2cb; }
Just please note that you will need snips of the left and right side of the curve from top to bottom
Related
I am fairly new to code and taking baby steps with an issue I am having: swapping out background images. I made very slight adjustments to the three images that make up the background of the site. One was a main background image (in a bodywrap container) that loaded just fine. The next was a wrapper image with a repeat-y attribute that is no longer taking since the swap - the image shows up, but is just showing up as a single white line, while it is meant to 'fill' the rest of the page. Finally, the footer image is not showing up at all.
I thought that swapping out the current images with ones that were only slightly adjusted in photoshop (all I did was remove drop-shadows and red margins) would be an easy task - my mistake!
I tried adjusting the code and got nowhere, so I've copied the original code. I believe that the problem lies within my CSS:
#wrapper, footer, .pagetop, .copyright {
width:942px;
margin:0 auto;
padding:0px 37px 0px 37px;
overflow:hidden;
clear:both;
}
.bodywrap {
background: url(images/background.png) 49.9% 0% repeat-x;
width:1016px;
margin:auto;
overflow:hidden;
}
#wrapper {
background: url(images/wrapper.png) 49% repeat-y;
clear:both;
padding-bottom:25px;
min-height:225px;
}
.footer {
background: url(images/footer.png) no-repeat 51% 0%;
overflow:hidden;
min-height:107px;
font-size:1.2em;
padding-top:17px;
font-family: 'Francois One', sans-serif;
}
Thanks in advance for sharing your expertise!
First thing I see that your background instructions are not consistent. Your no-repeat is before and after your alignment values. I would suggest to try keeping it the same everywhere in your code. when your code gets heavy it can be confusing.
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
right means align the image on the x axe to the right and
top means align the image on the y axe to the top
Do you understand that your 49.9% values are telling the background image to start repeating at 49% to the left from the edge of the box you as it to be in.
Also your .bodywrap does not have a height. if you only see a small line, this is because your element is only taking up the space the content inside this element is taking. you might have a space or 1 line of code. hard to say without the HTML.
So you need to give the .bodywrap element a min-height or height equal to your image height. The image you provide AS background to an element, does not define that element's height. The <img> tag and an image background don't work the same. an <img> tag will determine its height on its own but you cannot repeat it like a background.
Here you can see more information on background here: http://www.w3schools.com/css/css_background.asp
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'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;
}
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.
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