CSS Equivalent to Photoshop's Justify-All

CSS equivalent to Photoshop's Justify-All

CSS:

h2 {text-align: justify;}
h2 span {width: 100%; display: inline-block;}

HTML:

<h2>This is a h2 heading<span></span></h2>

Note that this adds a unvisible extra line, resulting in too much height. You might want to compensate for that:

h2 {text-align: justify; height: 1.15em;}

And for a very neat markup, only working for browsers other then IE7 or below, you could use the ::after selector:

h2::after {
    width: 100%;
    display: inline-block;
    content: ".";
    visibility: hidden;
}

See demo fiddle of all three solutions.

Full-justify for li elements

Use this solution (or this one). Translating that answer to a list results in:

Markup:

<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>

Style sheet:

ul {text-align: justify}
ul::after {width: 100%; display: inline-block; content: "."; visibility: hidden}
li {display: inline-block}

This is an IE7+ solution. For IE7 you need an extra element adjacent to the list items.

CSS making text align left and justify at same time

Left-justified means that the left edge of the text is aligned. Justified text means that both the left edge and the right edge of the text is aligned. So "left-aligned and justified" is no different from "justified", so your question doesn't make any sense to us.

Left-aligned:

Four-score and seven years ago, our fathers 
brought forth on this continent a new nation, 
conceived in liberty, and dedicated to the 
proposition that all men are created equal.

Justified:

Four-score  and  seven years  ago, our fathers 
brought forth on this continent a  new nation, 
conceived  in  liberty, and  dedicated to  the 
proposition that all men are created equal.

Right-aligned:

  Four-score and seven years ago, our fathers 
brought forth on this continent a new nation, 
   conceived in liberty, and dedicated to the 
  proposition that all men are created equal.

Perhaps there's some other kind of alignments you're trying to achieve?

How can I space three images evenly, and avoid them overlapping when the browser window is small?

Add a min-width to the wrapper to be sure the images don't shift down to the next line.

.wrapper {
  padding:10px;  
  position:relative;
  min-width: 750px;
}

Then move the images with absolute positioning to their desired locations:

img {
  width:250px;
  height:250px;   
  display:block;
  position: absolute;
}
.one {
  left: 0%;
}    
.two {
  left: 50%;
  margin-left: -125px;
}
.three {
  right: 0%;
}

Note the margin-left on the second image. That number is half the width of the image. So you are basically putting the image at 50% and then shifting it back half the width.

Also, if you don't want .one and .three right on the edges you could use left: 10px and right: 10px respectively.

Fiddle: http://jsfiddle.net/neilheinrich/ADUg2/

What's the best way to go from a Photoshop mockup to semantic HTML and CSS?

I have a fairly natural way of coding. The key is to treat the page like a document or an article. If you think of it like this the following becomes logically clear:

1. The page title is a top level heading

   • Whether you make the site title or actual page title the h1 is up to you - personally I'd make About Us the h1 rather than Stack Overflow.

2. The navigation is a table of contents, and thus an ordered list - you may as well use an ol over a ul.

3. Section headers are h2, sections within those sections are h3s etc. Stack them up.

4. Use blockquotes and quotes where possible. Don't just surround it with ".

5. Don't use b and i. Use strong and em. This is because HTML is structural rather than presentational markup. Strong and emphasis tags should be used where you'd put emphasis on the word.

6. <label> your form elements.

7. Use <acronym>s and <abbr>s where possible, but only in the first instance.

8. The easiest: always, always give your images some alternate text.

9. There's lots of HTML tags you could use that you probably haven't - address for postal addresses, screen code output. Have a look at HTML Dog for some, it's my favourite reference.

That's just a few pointers, I'm sure I could think of more.

Oh, and if you want a challenge write your XHTML first, then write the CSS. When CSS-ing you aren't allowed to touch the HTML. It's actually harder than you think (but I've found it's made me quicker).

HTML and CSS Aligning Images and Text

First of all edit the CSS as

.footer ul li {
   display: inline; // in a straight line
}

Edit the HTML part as:

<div class="footer">
  <ul>
    <li class="image"><img src="Images/facebook.png" />
    <img src="Images/twitter.png" /></li>
    <li class="twitter">@TWITTERADRESS</li>
    <li class="address">POSTAL ADDRESS </li>        
    <li class="number">TEL NUMBER</li>
  </ul>
</div>

Edit the CSS part now as:

.image {
   float: left; // float to the left
}

.number {
   float: right; // float to the right
}

Try it here: http://jsfiddle.net/afzaal_ahmad_zeeshan/6zYeA/

Image overlays,text on images and other effects through CSS or Photoshop?

Image with text are inflexible and maintainability is problematical as you need to change the image evry time you change the text.

A common technique is to wrap the image in a div that is shrink-wrapped to the size of the image and the position the overlay absolutely (after adding position:relative to the wrapping div.

Then you can add any text you like to the overlay and style it anyway you like...you can even fade it in and out.

Like so.

.wrap {    display: inline-block;    position: relative;}
.wrap img {    display: block;    max-width: 100%;    height: auto;}
.wrap .overlay {    position: absolute;    top:0;    left:0;    height: 100%;    width: 100%;    background: rgba(255,0,0,0.5);    text-align: center;    color:white;    transition: opacity .5s ease;    opacity:0;}
.wrap:hover .overlay{    opacity:1;}

<h2>Hover the image</h2>
<div class="wrap">    <img src="http://lorempixel.com/output/city-q-c-200-200-2.jpg" alt="Sample Image" />    <div class="overlay">        <h3>Las Vegas</h3>        <p>A city dedicated to a good time</p>    </div></div>

---

Related Topics