feb 17 2014 03:43 Alan L.S. Steytler <[email protected]>:
> ...but I don't have it.
>
> http://robertgarritylaw.com/Alt_index.html
>
> The image should stand by itself, centered, with the succeeding text below.
> Viewed in various devices, and various browsers, it's all over the place.
Center the image in your solution with descendant selectors using the margin
method, here with some upper and lower margins:
.container img {
margin: 0 1em auto; /*center with some upper and lower margins. These three
rules here are: top bottom left/right*/
float: none; /*cancel the float for this element*/
}
Lose the non-semantic break element in your h2 element and make that the phone
number it is, for starters adding a ”tel” reference (Your current number format
will however make the number callable on both Android and iPhone):
<h2>Attorney at law
<a href="tel:440.468.0482">440.468.0482</a>
</h2
You could also use microformats and make it a part of a hcard (look . Styling
this link as a block makes it appear on a new line inside the h2 element:
.container h2 a {
display: block;
color: black;
text-decoration: none;
}
Another suggestion is the rule
.container p, .container p+h2 { /*selecting also the adjacent h2 element, only
next to paragraphs*/
text-align: left;
}
to make a much nicer left align in the body text. Centered body text look very
amateurish.
Also, elsewhere you may want to add a phone symbol, or not, depending on your
audience
[any descendant element here to make it unique for some places]
a[href^="tel:"]:before {
content: "\260E";
margin-right: 0.23em;
}
I wouldn’t use this in the header though.
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
