Is there any way to vertically align an image element generated by a "content" property as part of a ":before" selector, next to adjacent inline text? In other words, I have
Share on Facebook
As I don't want to pollute my markup with unnecessary IMG elements that only have to do with style, I resort to adding a small icon to the left of the link, via CSS (except that it does not align properly, hence the question):
a.facebook:before
{
content: url(/style/facebook-logo.png);
}
I tried adding a "vertical-align: middle" (one of the most notoriously difficult aligning concepts to grasp in CSS, in my opinion, is that very property) but it has no effect. The logo aligns with text baseline, and I don't want to hardcode pixel offsets, because frankly text size differs from browser to browser, etc. Is there any solution for this?
Thanks.
Vertical-align only aplies to table-cell elements.
you can add a display:table-cell to "a.facebook"
Personally, instead I'd use a background-image:
HTML:
Share on Facebook
CSS:
a.facebook
{
background-image: url(/style/facebook-logo.png);
background-position: TOP LEFT;
background-repeat:NO-REPEAT;
padding-left:20px; /* or whatever the width of facebook-logo.png is */
}
If you're really married to the idea of using :before then you can use positioning:
a.facebook
{
position:relative;
top:0px;
left:0px;
padding-left:20px; /* or whatever the width of facebook-logo.png is */
}
a.facebook:before
{
content: url(/style/facebook-logo.png);
position:absolute;
top:0px;
left:0px;
}
I'd add a few transparent pixels above (or below) the logo, it's the simplest thing to do with images.
Otherwise you can play with line-height, but I wish you good luck to understand clearly what you're doing ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Aligning generated content vertically</title>
<style type="text/css" media="screen,projection">
a, a:before {
/*display: inline-block;*/
}
a {
vertical-align: super;
line-height: 3;
background-color: yellow;
border-top: 1px solid darkred;
border-bottom: 1px solid red;
}
a:before {
vertical-align: bottom;
line-height: 1;
content: 'bottom :';
}
</style>
</head>
<body>
<div>
<p>Share sth with people you didn't think they'd have access to it</p>
</div>
</body>
</html>
You can uncomment display: inline-block; too
Line-height and a background-image will get you what you want:
CSS:
a.share-on-facebook {
background: url(facebook.png) no-repeat top left;
line-height: 40px; /* height of facebook logo */
padding-left: 40px; /* width of Facebook logo */
}
Mark-up:
<a class="share-on-facebook" href="...">Share on Facebook</a>
Related
I'm working on a layout with a container (div), inside the container there are two elements, a div for the header and another div for the content.
The header div has a fixed height, the div for the content must fill the available space.
The container div has own style and cannot be overlapped.
My goal is to create simple div based elements to dispose simple widgets on a web page.
I checked the other similar questions like:
How to make a div expand to fit available vertical space?
Force to fill all available vertical space
Add a DIV that takes up all available vertical space
But none of this solutions applies to me.
I managed to get this html/css:
<?xml version="1.0"?>
<html>
<head>
<style type="text/css">
.workbench {
width: 100%;
height: 100%;
background: white;
}
.widget {
width: 100px;
height: 500px;
position: absolute;
top: 50px;
left: 50px;
border: solid 1px black;
margin: 2px;
}
.widget-header {
height: 50px;
border: solid 1px red;
margin: 2px;
}
.widget-body {
position: absolute;
top: 50px;
bottom: 0px;
left: 0px;
right: 0px;
border: solid 1px blue;
overflow: hidden;
margin: 2px;
}
</style>
</head>
<body>
<div id="workbench" class="workbench">
<div id="widget" class="widget">
<div id="widget-header" class="widget-header">
Header
</div>
<div id="widget-body" class="widget-body">
Body
</div>
</div>
</div>
</body>
</html>
This is working like a charm on FireFox and Chrome, but doesn't work on Internet Explorer 8:
Can you help me?
realizing you're not aiming at the IE5.5 / IE6 market, and by your descriptions (renders fine on jsFiddle, while not from a file), the issue seem to originate from the absence of a doctype declaration.
in order for the document to render correctly you must specify a doctype, to deny the browser from falling to quirksmode. your document seem to conform to a valid XHTML convention, therefore you can use the XHTML transitional doctype to instruct IE8 to render in standards mode, or use the HTML5 doctype (along with an HTML5 shim/shiv, if you'll be using HTML5's semantics as well).
just for convenience, the XHTML transitional doctype declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
note: Modernizr contains an HTML5 shiv of its own, and is recommended regardless to ease up the development.
here's the jsFiddle for you to mess around with
As you have a height on the widget of 500px and the widget header is 50px; why not just make the widget-body 450px; (also subtracting any additional margin and padding) and make the whidget-header and widget-body relative positioning.
jquery can help with this.
$('.workbench').each(function(){
var total=$(this).height();
var headerHeight=$(this).find('.widget-header').height();
$(this).find('.widget-body').height(total-headerHeight);
});
I'm trying to resize a div with an id of "homeLink". I'll start by stating that I'm a n00b to CSS and I'm looking to be thrown a bone, only because I know this is so simple. I'm also sure that it would explain something fundamental to usage of CSS that I don't understand, so any pointers to links that will help would be appreciated.
I saw this post, but I'm not sure that I understand why I can't do what I'm trying to.
I did RTFM (the one I could find), and I still don't get it. I would like to avoid invoking js for this, but maybe I wouldn't need to regardless.
Thanks for any help; code below.
<html>
<head>
<style>
#homeLink {
/*this doesn't work */
// width: 50%;
position:absolute;
left:10px;
top: 770px;
}
/* nor does this */
#homeLink a {
width: 10%;
}
</style>
</head>
<body>
<div id="homeLink"><img src="homebutton.png"/></div>
</body>
</html>
As #Mr D stated, You need to resize the image itself not the div.
This part:
#homeLink a {
width: 10%;
}
is actually wrong in terms of CSS as a has no width property. You can preformat certain behaviors or links using CSS, such as underline whilie hovering mouse over link and changing the color of visited links:
a.hover {text-decoration: underline}
a.visited {color: #999999}
<img class="image" src="homebutton.png"/>
then in your css style it:
.image {
height: 200px;
width: 300px;
}
this is not resizing because of image in container div that may be larger than the container widht and height
you can achive this by adding overflow hidden to container div.
or using following css
#homeLink,#homeLink a img {
width: 50%;
position:absolute;
left:10px;
top: 770px;
}
or
#homeLink{
width:50%;
position:absolute;
left:10px;
top:770px;
overflow:hidden;
}
I'm having a problem with setting the height of <div> tags using CSS.
I'm using the following CSS & HTML code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title></title>
</head>
<style>
body, p, b, ul, li, div
{
padding:0;
margin:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
}
div
{
display:block;
}
#ph_container
{
margin:0 auto;
width:980px;
height:auto;
border: 1px solid #00CC33;
clear:both;
background: #F0F0F0;
}
#cp_search
{
height:100px;
clear:both;
margin:10px 0px 0px 0px;
border: 1px solid #0099FF;
}
#cp_search_ex
{
clear:both;
background:none;
margin-top:5px;
margin-left:27px;
}
#cp_search_tx
{
width:210px;
float:left; /*try here whitout float and see the difference that I want to get*/
margin:0px;
background:none;
}
.txtx
{
color: #000000;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
</style>
<body>
<div id="ph_container" class="space">
<div id="cp_search">
<div id="cp_search_ex" class="space">
<div id="cp_search_tx" class="txtx" >SEARCH</div>
</div>
</div>
</div>
</body>
</html>
My problem is that the parent div id="cp_search_ex" doesn't get the height of the div id="cp_search_tx" which is inside it, it has the height: 0px.
I want the div id="cp_search_ex" to take the height from the div id="cp_search_tx"?
I wrote a comment in the CSS code please follow.
I believe you are describing the problem solved by using a "clearfix".
try adding this to the style for the parent divs (so they wholly-contain their floated children):
overflow:hidden;
pretty complex post - it would help if you could pare it down to a specific example that exhibits the problem you're having.
You have at least one error in your CSS. You've set the height twice...
#ph_container{
margin:0 auto;
width:980px;
height:auto; /* duplicated height */
border: 1px solid #00CC33;
clear:both;
background: #F0F0F0;
height:100%; /* duplicated height */
}
So if you want the parent to take the height of its content, then you need to remove height:100% as that is telling the parent to be 100% of whatever is just outside the parent... in your case, that's 100% of the body's height.
And cp_search_tx cannot expand the size of its container since it's a float:. By definition, floats are outside of the normal content flow and therefore their container elements will appear to be empty.
Add an empty clearing div under the content which forces the container div to dynamically expand.
<div id="cp_search_ex" class="space">
<div id="cp_search_tx" class="txtx" >SEARCH</div>
<div style="clear:both;"></div>
</div>
Alternatively, simply adding overflow:hidden to the container will also force it to expand to encompass any floats.
Use a clearfix method. I usually use
.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
* html .clearfix,
*:first-child+html .clearfix {
zoom: 1;
}
Apply the class clearfix to ph_container and see if that fixes it.
The question does not really make much sense, the outer block takes 100px + margin, so it works.
The text element has float defined so it doesn't take space.
I have this anchor tag that has text between to be vertically align text. I'm using this css attribute vertical-align: middle. Nothing happens tho.
You can make it inline-block and give it a line-height:
a {
line-height: 50px;
display: inline-block;
}
JSFiddle with working example: http://jsfiddle.net/KgqJS/
vertical-align only works on elements with display: table-cell, and that property value isn't supported in < IE8.
Known text
If you know the text to be centred, it is rather easy. You have two options.
<style type="text/css">
#container {
padding: 10px 0;
}
</style>
<div id="container">
Example of some lovely<br />
multiline text.
</div>
You can use CSS's padding to add padding top and bottom, to make the text appear in the middle. This is useful for multiline text.
<style type="text/css">
#container {
height: 100px;
line-height: 100px;
}
</style>
<div id="container">
Example
</div>
You can exploit the line-height property to make the text vertically centred. This only works with one line of text. You can guess what happens if there is more than 1.
Dynamic multiline text
Here is where things start to get somewhat tricky, and may have you crying for tables.
<style type="text/css">
#container {
display: table-cell;
vertical-align: middle;
}
</style>
<div id="container">
<?php echo $content; ?>
</div>
Workaround for < IE8.
Source.
<div><p>test test test test<p></div>
div{
border:1px solid red;
width:400px;
height:400px;
position:relative;
}
p{
height:30px;
position:absolute;
top:50%;
margin-top:-15px; /* negative half of height*/
}
Check working example at http://jsfiddle.net/Z2ssq/1/
I've been struggling for days trying to get a page working with CSS and DIVS. Basically I need a masthead with logo/banner ad at the top, then a three column layout (nav, main content and additional side content), then ending the page with a footer.
I will need to set a background color and put a 1 px border around the three content columns so I have a wrapper div around them. And the three columns may also need there own background colors too.
What I am aiming for is to have each of the three content columns be the same height and grow as required. However, if I add a lot of content to one of them, the content spills out below the footer. I've done lots of searches on this and tried various combinations of height and min-height but still can't get it working.
I have placed HTML (with the CSS in it) at http://solomon.ie/so and screen grabs taken in FF3 on WinXP
The tidied code is also here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html, body {
height:100%;
}
body, td, p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
#content_wrapper{
width: 980px;
margin: 0 auto;
border:1px solid #3300FF;
background:#FFFF66;
min-height:100%;
height:100%;
}
#middlecol{
float:left;
min-height:100%;
height:100%;
background:grey;
width:540px;
}
#leftcol{
float:left;
min-height:100%;
background:green;
width:170px;
}
#rightcol{
float:right;
min-height:100%;
background:#66FFCC;
width:250px;
}
#header_wrapper {
width: 980px;
margin: 0 auto;
border:1px solid #FF0000;
clear:both;
margin-bottom:8px;
}
#footer_wrapper {
width: 980px;
margin: 0 auto;
border:1px solid #000000;
clear:both;
margin-top:8px;
}
</style>
<title>test </title>
</head>
<body>
<div id="header_wrapper"><h1>logo/ad</h1></div>
<div id="content_wrapper">
<div id="rightcol"><h1>RHS column</h1></div>
<div id="leftcol"><h1>LHS</h1></div>
<div id="middlecol"><h1>Main content column</h1></div>
</div>
<div id="footer_wrapper"><h1>footer</h1></div>
</body>
</html>
Try http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
i've used it on various projects and it works extremely well.
There is nothing wrong, content wrapper is 100% of screen, but you have other elements (top, bottom). That means 100% + n px.
Remove header and footer, and you will see for yourself. You should wrap everything in a div, and set height to 100% and overflow:hidden, but this is dangerous.
You also need to add this rule on top, because some elements like body have margin/padding by default.
*{margin:0;padding:0;}
Note that borders add height/width to overall height/width so you will always have vertical scroll even if the border is 1px, thats 100% + 1px