Alright so what I want is each image to appear under the other, with the text to the right. I'm not sure why it's displaying like it is. Also, it seems that the spacing is different from Firefox to Chrome/Safari.
Well if you're going to list videos like that I would put each one in an unordered list and style it with CSS, much easier. I would also refrain from styling paragraph tags in your HTML.
I don't think I've worked with anything like that before, sounds more efficient though. I would appreciate it if you would explain a bit more on how I would use an unordered list styled with CSS to create what I'm trying to do. Thanks.
Well think of it like this. Look at your design, are you listing multiple things without them being in order ( 1. 2. 3. ), Yes. Therefore, we will use an unordered list
<ul>
There are multiple ways of doing this including scrapping the idea of using ul's and instead using div's. But I think using ul's would be the correct way.
Can you do me a favor and just post that code along with using the correct links and paths to the images? From there I will style it and then explain it to you.
title="Swimming Lessons" src="http://aarongmoore.com/wp-content/themes/MinimilistAstronomy/images/vsl.png" alt="" width="178" height="100" class="swimming-lessons"></a> <h2><strong>Swimming Lessons </strong>(<em>2010</em>)</span></h2> This video short is about a man trying to say goodbye to his past. Based on the screenplay by David Oliver. <em>This is the last dramatic project I made as part of my BFA.</em> </ul> <ul class="video"> <a title="A Star Crossed Echo" rel="lightbox[set2 853 505]" href=" style="padding-right: 3px;" title="A Star Crossed Echo" src="http://aarongmoore.com/wp-content/themes/MinimilistAstronomy/images/vasce.png" alt="" width="178" height="100" class="asce" /></a> <h2><strong>A Star Crossed Echo</strong> (<em>2009</em>)</h2> Part psychological thriller, part ghost story. This video short follows a man who is haunted by the memory of a lover who left his life.<em>This is my BFA third year project.</em> </ul>
title="Swimming Lessons" src="http://aarongmoore.com/wp-content/themes/MinimilistAstronomy/images/vsl.png" alt="" width="178" height="100" class="swimming-lessons"></a> <h2><strong>Swimming Lessons </strong>(<em>2010</em>)</span></h2> This video short is about a man trying to say goodbye to his past. Based on the screenplay by David Oliver. <em>This is the last dramatic project I made as part of my BFA.</em> </li> <li> <a title="A Star Crossed Echo" rel="lightbox[set2 853 505]" href=" style="padding-right: 3px;" title="A Star Crossed Echo" src="http://aarongmoore.com/wp-content/themes/MinimilistAstronomy/images/vasce.png" alt="" width="178" height="100" class="asce" /></a> <h2><strong>A Star Crossed Echo</strong> (<em>2009</em>)</h2> Part psychological thriller, part ghost story. This video short follows a man who is haunted by the memory of a lover who left his life.<em>This is my BFA third year project.</em> </li> </ul>
I've tweaked it a bit to get the look I'm after. However, I noticed two problems.
First, the text begins nicely aligned with the top of the image in Firefox and that's how I want it. Yet in Chrome and Safari it's indented a line or so.
Second, the text seems to start a few pixels further to the left in the second image than it does in the first.
Something similar is happening with my contact form. In Chrome and Safari it looks good yet in Firefox the message box is pushed down too far, seen here: http://aarongmoore.com/Picture2.png
Alright so what I want is each image to appear under the other, with the text to the right. I'm not sure why it's displaying like it is. Also, it seems that the spacing is different from Firefox to Chrome/Safari.
How do I fix this?
There are multiple ways of doing this including scrapping the idea of using ul's and instead using div's. But I think using ul's would be the correct way.
Idk, something like that.
title="Swimming Lessons" src="http://aarongmoore.com/wp-content/themes/MinimilistAstronomy/images/vsl.png" alt="" width="178" height="100" class="swimming-lessons"></a>
<h1>Swimming Lessons <span>(2010)</span></h1>
blahblahblahblah
</ul>
The rel is for the MediaBoxAdvanced lightbox code.
@aarongmoore - use h2 instead
I also meant for you to post the code on your site so I can use developer tools to style it while its live.
Alright, the following is now posted and live on my site:
title="Swimming Lessons" src="http://aarongmoore.com/wp-content/themes/MinimilistAstronomy/images/vsl.png" alt="" width="178" height="100" class="swimming-lessons"></a>
<h2><strong>Swimming Lessons </strong>(<em>2010</em>)</span></h2>
This video short is about a man trying to say goodbye to his past. Based on the screenplay by David Oliver. <em>This is the last dramatic project I made as part of my BFA.</em>
</ul>
<ul class="video">
<a title="A Star Crossed Echo" rel="lightbox[set2 853 505]" href=" style="padding-right: 3px;" title="A Star Crossed Echo" src="http://aarongmoore.com/wp-content/themes/MinimilistAstronomy/images/vasce.png" alt="" width="178" height="100" class="asce" /></a>
<h2><strong>A Star Crossed Echo</strong> (<em>2009</em>)</h2>
Part psychological thriller, part ghost story. This video short follows a man who is haunted by the memory of a lover who left his life.<em>This is my BFA third year project.</em>
</ul>
Unordered lists always have List Items as children.
The general syntax is:
A valid example of the above would be:
title="Swimming Lessons" src="http://aarongmoore.com/wp-content/themes/MinimilistAstronomy/images/vsl.png" alt="" width="178" height="100" class="swimming-lessons"></a>
<h2>Swimming Lessons <span>(2010)</span></h2>
<p>blahblahblahblah</p>
</li>
</ul>
title="Swimming Lessons" src="http://aarongmoore.com/wp-content/themes/MinimilistAstronomy/images/vsl.png" alt="" width="178" height="100" class="swimming-lessons"></a>
<h2><strong>Swimming Lessons </strong>(<em>2010</em>)</span></h2>
This video short is about a man trying to say goodbye to his past. Based on the screenplay by David Oliver. <em>This is the last dramatic project I made as part of my BFA.</em>
</li>
<li>
<a title="A Star Crossed Echo" rel="lightbox[set2 853 505]" href=" style="padding-right: 3px;" title="A Star Crossed Echo" src="http://aarongmoore.com/wp-content/themes/MinimilistAstronomy/images/vasce.png" alt="" width="178" height="100" class="asce" /></a>
<h2><strong>A Star Crossed Echo</strong> (<em>2009</em>)</h2>
Part psychological thriller, part ghost story. This video short follows a man who is haunted by the memory of a lover who left his life.<em>This is my BFA third year project.</em>
</li>
</ul>
HTML
Now clear the float right above your wrapper and copy
I've tweaked it a bit to get the look I'm after. However, I noticed two problems.
First, the text begins nicely aligned with the top of the image in Firefox and that's how I want it. Yet in Chrome and Safari it's indented a line or so.
Second, the text seems to start a few pixels further to the left in the second image than it does in the first.
I've taken a screen shot to show what I mean:
http://aarongmoore.com/Picture1.png
Something similar is happening with my contact form. In Chrome and Safari it looks good yet in Firefox the message box is pushed down too far, seen here:
http://aarongmoore.com/Picture2.png
Is there a way to fix these problems?