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;
}
Related
Creating a very simple webpage for DIV testing. I have a DIV that creates a header at the top of my page, which is fixed so it does not scroll off the page. Within this DIV, I have an H1 header that I want to be centered vertically, left justified but away from the left edge of the page by a certain amount (20 pixels).
Here is my code:
CSS:
body {
font-family:"Calibri";
margin:0px;
}
div.header {
top:0px;
left:0px;
width:100%;
height:50px;
position:fixed;
background-color:#7fc7f4;
border-bottom:thick double black;
z-index:2;
}
h1 {
color:black;
margin-left:20px;
font-variant:small-caps;
}
HTML
<!Doctype html>
<html>
<body>
<div class="header">
<h1>Website Heading</h1>
</div>
</body>
</html>
When it renders on my C:\ drive, the H1 text is at the bottom of my DIV block. I copy the files to a network drive, and open it from there. When it renders from the network drive using the same browser on my computer (IE9), it is centered all on its own.
For my C:\ drive, I tried adding the following to my H1 in the CSS:
h1 {
color:black;
line-height:50px;
vertical-align:middle;
margin-left:20px;
font-variant:small-caps;
}
This has absolutely no effect when rendered on my C:\ drive. Rendered on the network, it is still centered as I want it, just as it was before I added these lines which appear to be ignored. I obviously want this to be consistent in both the C:\ drive and network locations, so I know that my pages are working properly when both building/testing and deploying for all to consume. It also has to be consistent across Chrome and Firefox as well.
Thoughts anyone?
One thing I'm not sure about is where to add these lines of code. Do I add them to the H1 tag as I have done, or do I add them to the DIV tag? Does it matter? I have tried both, and it doesn't seem to make a difference.
You'll have to forgive me, as I am relatively new to CSS, and am trying to get a better understanding. I have searched through the answers on similar topics on here, and all the suggestions that people have given don't seem to work. So I am hoping that I am just missing something simple.
Ensure you 0 out the other H1 margin values:
h1 {
color:black;
margin:0 0 0 20px;
font-variant:small-caps;
}
You should be implementing a normalize CSS file to baseline your HTML elements if you aren't already.
For example, I use http://html5boilerplate.com/
What you're looking for is 'line-height' on the H1 element, the following makes the line-height of the h1 element the same height as the containing div, giving it the effect of vertically aligning in the middle.
You'll also need to remove the margins that are on the h1 element by default, by using margin:0;
h1 { line-height:50px; margin:0; }
See here: http://jsfiddle.net/2RtkT/1/
I'd like to achieve the shape I've posted in link below for all my h2s on a page. I have a rough idea how I could do it using png background images with a couple of spans inside the heading perhaps.
http://vurtmedia.net/header.png
Any ideas on if this would be possible in pure CSS? I'd much prefer this, as I am not bothered about IE9 or lower in this instance.
Sorry if my post description isn't the best, not sure how to describe this shape!
Thanks in advance :)
Pat
You could just set a padding, border radius and use absolute positioning in order to get the positions of the elements straight, see this jsFiddle
HTML:
<h1 class="shaded">lorem</h1>
<h2 class="shaded bottomright">ipsum</h2>
CSS:
.shaded
{
padding:10px;
background-color:#000;
border-radius:12px;
font-family:verdana;
}
.topleft
{
}
.bottomright
{
position:absolute;
left:40px;
top:6px;
}
h1
{
font-size:20px;
color:#FFF;
display:inline-block;
}
h2
{
font-size:60px;
color:#FFF;
display:inline-block;
}
But that does not allow you to smooth the corners between the two elements, which is not possible to achieve in CSS only.
You could smooth the corners out with pictures, but that would leave you with some positioning problems.
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 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
I have placed the corresponding code at http://cssdesk.com/QSwDG
The sprite (referenced as 'circle.png' in the code) is at:
http://i54.tinypic.com/34jas79.png
Objectives:
- To get the list items inline while maintaining the 60x60 size of each.
- To have the lower part of the sprite apear when each link is hovered over: A circle should appear around the link.
- To vertically centre the text within each 60 x 60 container.
I know I can create separate images for each of the links and achieve the desired visual outcome but I want to see if the above is possible.
Thanks
#caseyc
For horizontally and vertical centralization, try it:
li{
float:left;
width:60px;
height:60px;
border:1px dotted green;
display:block;
text-decoration:none;
display:table;
}
a.roll{
vertical-align:middle;
display:table-cell;
text-align:center
}
Now, make the background property on "a.roll".
Cleber.
well... if you don't have to support IE < 8 then you can use display:table-cell;. I'm not entirely versed in display:table so I just floated the lis.
http://cssdesk.com/3hKth
a.roll{
...
vertical-align: middle;
display: table-cell;
}