Aligning pictures and text with CSS
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.
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.
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.
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; }
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
webwiz posted this at 01:51 — 29th November 2007.
He has: 629 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".
DarkLight posted this at 13:54 — 30th November 2007.
He has: 287 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
All the best news here: https://newsbotnet.com
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.