Quick CSS Question [Archive]

Yeldarb

February 18th, 2006, 11:54 PM

This is a really easy question (I think) but I'm just blanking out on how to do it. I'm making a layout in CSS, what I want is something like this in part of the layout:

Image Image Image
Text Text Text

I want the text to be centered under each image, but I don't want to use tables. Is there an easy way to do this in CSS? (and it has to be able to support an indeterminate amount of images/text)

Thanks =)

techo

February 19th, 2006, 10:56 AM

Yep.

Have your images placed wherever you want them, then directly underneath that have this in the html:

<div id="text">
This is the text that will be centered under the images.
</div>

And then add this to your css file:

.text
{
background-color: #FFF;
text-align: center
}

--

I think thats what you want..?

Yeldarb

February 19th, 2006, 12:33 PM

The problem is that that centers them on the whole page, I only want the text centered under the image.

techo

February 19th, 2006, 01:22 PM

Sorry, I made a mistake, this will fix that. Add this to the css:

.text
{
width: 100px;
height: 200px;
background-color: #FFF;
text-align: center
}

--

Yeldarb

February 19th, 2006, 02:26 PM

Thanks, that poses another problem though. When I add more images, that won't expand, it will put them on new lines rather than having them go across the page.

Edit: Maybe it would be helpful to show it: scriptscribbler.com/nes/page3.htm

See at the bottom where I have two images, I want those to have the text centered under them (like it is) but be on the same line. I tried doing float: left; and it worked, but then the next <div> came up to the right side of it which I don't want.

techo

February 19th, 2006, 05:17 PM

Hmm, I will have a wild shot.

Make a div that stretches 100% page width, where you want the two images and text to be.

Then make this in your css:

.image1
{
position: absolute;
left: 100px;
text-align: center;
width: 100px;
height: 100px
}

.image2
{
position: absolute;
left: 130px;
text-align: center;
width: 100px;
height: 100px
}

--

The, inside your 100% width div, add two divs to make use of the CSS. Should look something like this:

<div width="100%" height="30%">
<div id="image1">
Text for image 1.
</div>
<div id="image2">
Text for image two.
</div>
</div>

--

I know it's very messy code, and I have no idea if it will work, but give it a shot. :)

And there was an article on how to neaten your divs but the sites down now. :(

Yeldarb

February 19th, 2006, 05:30 PM

I don't want a seperate entry in my CSS for each image. There should be a way to do this without doing that shouldn't there? I mean, what if I wanted 100 images, would I have to have 100 CSS classes?

techo

February 19th, 2006, 05:47 PM

You could just use 1 class, but then it may go onto the next line. The reason I used two classes was because the postioning of each one is different.

Jeff Wheeler

February 19th, 2006, 06:15 PM

Look at this:
http://nokrev.com/dump/kirupa/brad-floats.html

Is that what you wanted?

Yeldarb

February 19th, 2006, 07:40 PM

No, hang on I'll do an image of what I want.

Edit: Image Attached

FrankieB

February 19th, 2006, 09:08 PM

Just put the image in the div and give it the class you want to. If the div is the same size as the image specified in the CSS then the text will go underneath it and center.

So...

.imageAndText {
position: absolute;
width: 200 //or whatever width your images will be
text-align: center;
font-family: Verdana; //or whatever
}

If any of this doesn't work just repost and I'll fix it.

Jeff Wheeler

February 19th, 2006, 10:28 PM

Um… that's exactly what mine looks like. I'm confused. I just did additional styling… :huh:

mmubashar

February 19th, 2006, 10:43 PM

Yeldarb, you can use the caption-side property, but it is so not good to use it. That's because IE doesnt support the feature. I would suggest you to use tables and divs. That way you can achieve your final image easily.

Yeldarb

February 19th, 2006, 11:17 PM

Nokrev - I see yours as

Image
Text
Image
Text
Image
Text

FrankieB - problem with that is that another Div right next to it drops down to the next line instead of being side-by-side

mmubashar

February 19th, 2006, 11:34 PM

Alright Yeldarb, Im going to give you this main solution and you can personalize it to your taste. Here is what you can do for your stuff. What you need is just 3 divs for one content. And keep repeating them for next contents. Remember to flaot the main container to left. Here is the main code:

<style>
.main{ float:left; }

<div class="main"> //main container
<div> //image container
<img>
</div>
<div> //caption container
Your caption (align it to center or left or however you want it to be)
</div>
</div>

<div class="main"> //main container
<div> //image container
<img>
</div>
<div> //caption container
Your caption (align it to center or left or however you want it to be)
</div>
</div>

As you follow this, your div's will be close to each other. Set the indents etc and suit it to your style. Hope it helps.

Yeldarb

February 20th, 2006, 12:03 AM

Thanks mmubashar, here's the result:
scriptscribbler.com/nes/page3.htm

It throws off the layout of pretty much everything on the page. The float: left; it looks like gets applied to everything. Even though I have it in a wrapper div anyway.

mmubashar

February 20th, 2006, 01:38 AM

yeldarb you should then identify the float:left as some identifier, which then, will only be applied to the div containing the identifier. eg:
This goes in the <head> section:

<style>
.floateddiv {
float:right;
}
</style>

And this is the div which will ONLY be floated:

<div class="floateddiv">
...contents...
</div>

Hence, any <div> which does not have the class="floateddiv" property will not be floated. You have to use it wisely. Good luck~

ditt0

February 20th, 2006, 03:33 AM

In the css put:

.image {
float: left;
margin: 0 20px 20px 0;
}
.caption {
display:block;
text-align:center;
}

and in the html

<div class="image">
<img src="image1.jpg" width="150" height="90" alt="" />
<span class="caption">some text</span>
</div>
<div class="image">
<img src="image2.jpg" width="150" height="90" alt="" />
<span class="caption">some text</span>
</div>
<div class="image">
<img src="image3.jpg" width="150" height="90" alt="" />
<span class="caption">some text</span>
</div>
<div class="image">
<img src="image4.jpg" width="150" height="90" alt="" />
<span class="caption">some text</span>
</div>
<div class="image">
<img src="image5.jpg" width="150" height="90" alt="" />
<span class="caption">some text</span>
</div>

Yeldarb

February 20th, 2006, 04:47 PM

Ditto - same problem ( scriptscribbler.com/nes/page3.htm )

I know there is (or at least should be) a way to do this in CSS, but I'm tempted to just use a table.. seems like it would be easier :-\

mikkomikko

February 20th, 2006, 05:52 PM

me me me, i want to try this too:

<style>
.imagesAndText {

}
.imagesAndText div{
width: 210px;
float: left;
}
.imagesAndText img {
margin: 5px;
border: solid 1px #000000;
}
.imagesAndText p {
margin: 5px;
text-align: center;
}
</style>
</head>

<body>

<div class="imagesAndText">
<div>
<img src="http://www.scriptscribbler.com/nes/thumbs/coming_soon.jpg" width="200" height="154" />
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div>
<img src="http://www.scriptscribbler.com/nes/thumbs/coming_soon.jpg" width="200" height="154" />
<p>Lorem ipsum.</p>
</div>
<div>
<img src="http://www.scriptscribbler.com/nes/thumbs/coming_soon.jpg" width="200" height="154" />
<p>Lorem ipsum dolor .</p>
</div>
</div>

</body>

Yeldarb

February 20th, 2006, 06:05 PM

mikkomikko - Nice try, but the float: left; that everyone is using seems to be the problem. It is shifting all of the page content rather than just the div that I'm floating. I just want it to float relative to the other picture divs, but not the content divs. Is this possible?

mikkomikko

February 20th, 2006, 06:18 PM

Is this what you are trying to achieve?

.photoBox {
height: 200px;
}
.frame {
width: 200px;
float: left;
}

Yeldarb

February 20th, 2006, 06:47 PM

Nope, didn't work, but intuitive try =)

mikkomikko

February 20th, 2006, 06:58 PM

:D here's the whole page, it should be ok, ... i think ... maybe ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>HOWTO: Hack your Nintendo Zapper Light Gun</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript" src="http://www.scriptscribbler.com/nes/explorer_destroyer.js"></script>

<style>
body {
background-color: #FFFFFF;
}
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #666666;
}
h1 {
margin: 0px;
font-family: Impact;
font-size: 24px;
font-weight: bold;
color: 0x000000;
}
h2 {
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #000000;
}
h3 {
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #333333;
}
a:hover {
text-decoration: underline;
}
.navLink {
font-size: 10px;
font-weight: normal;
text-decoration: none;
}
#title {
font-family: Impact;
font-weight: bold;
font-size: 24px;
color: 0x000000;
}
#subtitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
#font-style: italic;
color: #000000;
}
#description {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
color: #333333;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 15px;
margin-right: 15px;
}
#body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
#sitemap {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
text-decoration: none;
margin-top: 10px;
margin-bottom: 5px;
color: #000000;
}
.adsTop {
margin-bottom: 10px;
margin-left: 15px;
}
.adsBottom {
margin-top: 10px;
margin-left: 15px;
}
#author {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 10px;
font-size: 10px;
color: #DDDDDD;
}
.list {
margin-top: 5px;
margin-bottom: 15px;
margin-left: 50px;
margin-right: 10px;
}
.photoBox {
height: 200px;
}
.frame {
width: 200px;
float: left;
}
.caption {
display: block;
text-align: center;
}
.sqrt {
line-height: 20px;
text-decoration: overline;
}
</style>
</head>

<body onload="javascript:hasIE_hideAndShow();">




<span style="position:absolute; width: 0px; height:0px; left:-1000px; top: -1000px"><img id="getIE_pingimage0"/></span>
<div id="hasIE_level1" style="display: none;">
<span style="position:absolute; width: 0px; height:0px; left:-1000px; top: -1000px"><img id="getIE_pingimage1"/></span>
<div style="padding: 20px; background-color: #ffffbb; font-family: arial; font-size: 15px; font-weight: normal; color: #111111; line-height: 17px;">
<div style="width: 650px; margin: 0 auto 0 auto;">
<div style="padding-left: 8px; padding-top: 0px; float: right;">
<script type="text/javascript"></script>
<script type="text/javascript" src="show_ads.js">
</script>
</div>
<strong>We see you're using Internet Explorer.  Try Firefox, you'll like it better.</strong>
<br /><br />
      <strong>·</strong> Firefox blocks pop-up windows.
<br />
      <strong>·</strong> It stops viruses and spyware.
<br />
      <strong>·</strong> It keeps Microsoft from controlling the future of the internet.
<br /><br />
Click the button on the right to download Firefox.  It's free.<br /><br />

<span class="note" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:bolder; font-size: 10px; line-height: 14px;">
Note: <br />
Yes, we do make $1 when you run Firefox for the first time, but that's not why we're recommending it. We honestly believe it is the better browser.
</span>
</div>
</div>
<br />
</div>


<div id="title"><h1>Hacking your Zapper</h1></div>
<div id="subtitle"><h2>How to add a Laser Sight to your NES Light Gun</h2></div>
<div class="adsTop">
<script type="text/javascript"></script>
<script type="text/javascript"
src="show_ads.js">
</script>
</div>
<div id="body">
<h3>Wiring</h3>

<p>
Our circuit is going to go from the laser pointer to the battery box to the trigger and then back to the laser. So we need to put the wires where we need them. It will
be something like this:
</p>

<div class="photoBox">
<div class="frame">
<img src="coming_s.jpg" title="Wiring Diagram" /><br />
Wiring Diagram
</div>
</div>

<p>
You'll want to lay out your wires and connections first before you solder them just to make sure that they are going to work.
</p>

<h3>Batteries</h3>

<p>
The laser pointer should use two triple A (AAA) batteries. Since the whole pointer won't fit on the barrel in a straight line, we have to disassemble it and store the batteries in
their own case that is then wired to both the trigger and the laser. So you'll need a battery holder. I got mine
<a href="http://www.radioshack.com/product/index.jsp?productId=2062246" title="2 AAA Battery Holder">at Radioshack for about a dollar</a>.
</p>

<p>
Hook it up to your circuit like this:
</p>

<div class="photoBox">
<div class="frame">
<img src="coming_s.jpg" title="Connect the Battery Box" />
<span class="caption">Connect the Battery Box</span>
</div>
<div class="frame">
<img src="coming_s.jpg" title="Connect the Battery Box" />
<span class="caption">Connect the Battery Box (2)</span>
</div>
</div>
</div>
<div id="sitemap">
Page: <a href="http://www.scriptscribbler.com/nes/page2.htm" title="Disassembly" class="navLink">« Prev</a> <a href="http://www.scriptscribbler.com/nes/" title="Introduction" class="navLink">1</a> <a href="http://www.scriptscribbler.com/nes/page2.htm" title="Disassembly" class="navLink">2</a> <b>3</b> 4 5 Next »
</div>
<div class="adsBottom">
<script type="text/javascript"></script>
<script type="text/javascript"
src="show_ads.js">
</script>
</div>
<div id="author">
Tutorial written by Brad Dwyer (aka Yeldarb). Copyright 2005-2006.
</div>
</body>
</html>

Yeldarb

February 20th, 2006, 07:14 PM

Wow, Bingo, what'd you change that made it work?

Great job, thanks a ton. :D