Help With CSS

  • 1
  • Question
  • Updated 6 years ago
  • Answered
Hi there!

I've been busy tweaking the CSS of my new site, more specifically, on my blog page. I have managed to liven up the appearance of the date of each blog post, as can be seen at:

http://www.thatbrandon.yolasite.com/b...

The CSS is as follows:


div.sys_blog div.post small {
font-size: 13px;
font-weight:bold;
color: #666666;
width: 77px;
height: 77px;
padding-top:18px;
text-align: center;
background-image:url('resources/date.png');
background-repeat: no-repeat;
position:relative;
margin-top:-75px;
margin-left:10px;
}


Now on my blog, you can see my headings and date icon align quite nicely (Well, on my screen they do, please let me know if they don't). However, note the -75px margin for my date. This was -45px, however if my heading runs over one line onto two, it pushes my date down, and so making it -75px is needed to align it again. Now when my blog is active, I am likely going to have blog titles of varying lengths, some only on one line and others on two. I can't have varying margins! It needs to be one or the other.

The CSS for my blog title:


#I12 .post h2 a:link{
position:relative;
margin-left:100px;
color:#333333;
text-decoration:none;
display:block;
}


I'm obviously missing something here. Please can someone help me!

Kind regards, Brandon
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
  • unsure

Posted 6 years ago

  • 1
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Can nobody help with this?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Try position: absolute (?)
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Bam, and it works! So simple! Thanks a bunch :)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Wait, it was working fine in the builder but I've just noticed it keeps the heading on one line on my live site. It extends beyond the post area. Check it out:

Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Never mind, I fixed it by specifying a width of 600px. :)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Sorry, I missed your previous comment but glad you got it sorted