CODEWITHSUNDEEP
cssalignmentcss-float
rlab
rlab

Reputation: 449

Aligning objects

This is the complete design I'm going for: enter image description here

And this is the code: http://jsfiddle.net/rlesko/f3R7r/4/

A couple of questions:

  1. Why doesn't a code margin-left do nothing when changed for the object #date?
  2. Do you know of a code that I can use to center a #separator object on a .post-bg (the white background)? I used margin-left for that in my CSS.
  3. How can I align the <h2> text's right border to the <p> text's right border but keep the <h2> text alignment to the right?
  4. Why doesn't a custom font code work for this fiddle?

Upvotes: 0

Views: 138

Answers (2)

CAP
CAP

Reputation: 317

  1. The margin works, but the h5 is weird and the appropriate margin to place it like you want to is : margin: 0 0 0 135px; (tested in firebug)

  2. margin: 0 auto;

  3. text-align: justify ?

  4. Because media fire makes a redirection and transforms your url into : http://www.mediafire.com/?f9selsldbgm6dnw and then only you can dl the file. This is not a real direct download, that's why your font won't work. Upload it on you own domain for example.

Try this one instead : http://www.amws.fr/Univers.ttf

Edit : I'd also suggest using a complete @font-face code, so that all browsers support your css well : 

@font-face {
    font-family: 'LiberationSansRegular';
    src: url('http://www.amws.fr/Univers.eot');
    src: url('http://www.amws.fr/Univers.eot?#iefix') format('embedded-opentype'),
         url('http://www.amws.fr/Univers.woff') format('woff'),
         url('http://www.amws.fr/Univers.ttf') format('truetype'),
         url('http://www.amws.fr/Univers.svg#LiberationSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Upvotes: 0

Kyle
Kyle

Reputation: 67194

lots of points are best put into separate questions, but anyway...

  1. It does work! Margin is set to 550px to prove

  2. You can use margin: 0 auto; on the separator element to center it. See here.

  3. Use text-align: justify; for your desired text alignment on both sides. See it here.

  4. I think it has to do with not being able to serve fonts cross-domain. But I am not 100% sure.

Upvotes: 2

Related Questions