Hi all,
http://www.landingapollo.com/apollodocumentation.php
I'm trying to find out the best way to align these so that the heading and picture match up (with CSS). Basically I need 5 badges per row with Apollo 1 Apollo 2 Apollo 3 Apollo 4 Apollo 5 as the headings, but I need the badges aligned with the headings.
Any help would be appreciated.
Cheers
calculator posted this at 12:45 — 26th November 2007.
They have: 40 posts
Joined: Nov 2007
Hi Trinitrotoluene,
First you have too many 's on your page - you should only have one per page.
Then you've got some coding error:
<p><h2>Apollo 1</h2></p>'You can't put tags around 's
What I would do then is use the image as a h2 background and use padding to put the text in the middle.
Let's say your image is a 100px square, what you would get is:
in the html
<h2 id="ap1" class="imgbg">Apollo 1</h2><p>Text about Apollo 1</p>
<h2 id="ap2" class="imgbg">Apollo 2</h2>
<p>Text about Apollo 2</p>
...
'
and in your CSS you have something like:
.imgbg{ padding:45px 0 45px 110px; background-position:0 50%; background-repeat:no-repeat; }#ap1{ background-image:url("/missionbadges/apollo1badge.png"); }
#ap2{ background-image:url("/missionbadges/apollo2badge.png"); }
'
BTW I wouldn't use png as img file types, use jpg or gifs.
Hope this helps.
Websites for Accountants
Trinitrotoluene posted this at 13:25 — 26th November 2007.
They have: 5 posts
Joined: Nov 2007
Thank you calculator! Unfortunately I can't seem to get them to stay on one line. Ideally I need four next to each other
calculator posted this at 14:02 — 26th November 2007.
They have: 40 posts
Joined: Nov 2007
Hi Trinitrotoluene,
I am confused about what you want
Are you after something like
[image]Apollo 1 [image] Apollo 2 [image]Apollo 3 [image] Apollo 4
If that's the case, using the model before, add the following to the .imgbg class
width:250px;float:left;
'
if the above is not what you want, could you make a picture - or find an example - of what you want to achieve.
Websites for Accountants
Trinitrotoluene posted this at 14:44 — 26th November 2007.
They have: 5 posts
Joined: Nov 2007
http://img255.imageshack.us/img255/7180/mockupyv6.jpg
That's how I'd like it! Once again thanks for all your help and advice
calculator posted this at 16:24 — 26th November 2007.
They have: 40 posts
Joined: Nov 2007
Hi Trinitrotoluene,
Cool, so here's the code for it
Let's say your image is a 100px square, what you would get is:
in the html
<ul id="apollo"><li id="ap1">Apollo 1</li>
<li id="ap1">Apollo 2</li>
<li id="ap1">Apollo 3</li>
<li id="ap1">Apollo 4</li>
<li id="ap1">Apollo 5</li>
</ul>
'
and in your CSS:
#apollo, #apollo li{margin:0; padding:0; }#apollo li{ width:19% float:left; text-align:center; padding:0 0 100px 0; margin-right:1%; background-position:50% 100%; background-repeat:no-repeat; }
#ap1{ background-image:url("/missionbadges/apollo1badge.png"); }
#ap2{ background-image:url("/missionbadges/apollo2badge.png"); }
#ap3{ background-image:url("/missionbadges/apollo3badge.png"); }
#ap4{ background-image:url("/missionbadges/apollo4badge.png"); }
#ap5{ background-image:url("/missionbadges/apollo5badge.png"); }
'
If the blocks are stacked one above the other and not one next to each other change the width 19% to 18.9% - IE6 - flunked maths and the box model exam
Hope this helps.
Websites for Accountants
Trinitrotoluene posted this at 16:39 — 26th November 2007.
They have: 5 posts
Joined: Nov 2007
Hi Calculator!
Thanks once again. The only problem now is they are stacking instead of side by side. I'm in firefox but I changed the width anyway and they are still stacking!
Thanks again pal
calculator posted this at 16:43 — 26th November 2007.
They have: 40 posts
Joined: Nov 2007
ok then try a width of 150px instead and also add a clearing p after the list.
You can remove the #apollo, #apollo li{ margin:0; padding:0; }, I checked your code and you do the *{ margin:0; padding:0; }
Websites for Accountants
Trinitrotoluene posted this at 16:48 — 26th November 2007.
They have: 5 posts
Joined: Nov 2007
Tried that, didn't work
!
calculator posted this at 17:03 — 26th November 2007.
They have: 40 posts
Joined: Nov 2007
you missed the semi-column after the 150px;
BTW using
#apollo li{width:18.9%;
float:left;
text-align:center;
padding:0 0 100px 0;
margin-right:1%;
background-position:50% 100%;
background-repeat:no-repeat;
}
'
seem to work as well- I've got the css edit toolbar with firefox and can see it work
Websites for Accountants
webwiz posted this at 01:51 — 29th November 2007.
He has: 343 posts
Joined: May 2007
Perhaps I'm a bit late for this, but there is a tutorial at css.maxdesign.com. If that is not suitable, try the rest of the "Floatutorials".
Cordially, David
--
"Old web developers don't die, they degrade gracefully..."
Reece S posted this at 13:54 — 30th November 2007.
He has: 175 posts
Joined: Oct 2007
This is just a rough example of a code I made to do exactly what you want. but you will need to add your own attributes and properties to complete it, you cannot just copy and paste. I recommend using this as a guide, rather than a code.
Let us know if you need any more help.
If you want,k you could always try W3 Schools.
http://www.w3schools.com/css/default.asp