...

View Full Version : layout questions



grhino
07-10-2007, 04:56 PM
hello,
I have a basic grasp of x/html and css but have a couple of questions regarding layout.

First: How can I best create a structure within a centre content div that holds small images, with captions. Each image/caption to be a link to another page.
Although my page has currently only got two such images, I want to ultimately have a grid of them.

Second: How can i best centralise an embedded object, in my case an embedded flash/youtube object.
I can think of ways, ie a container tag of some sort, but I'm not sure what would be best

Thanks for any advice..

srule_
07-10-2007, 05:21 PM
For the images/caption

try somting like:

HTML:


For each img put in:
<div class="photowrap">
<div class="photo">
<img src="...your image">
</div>
<p> your caption </p>

-------IMG TWO--------

<div class="photo">
<img src="...your image">
</div>
<p> your caption </p>


----IMG THREE -----

<div class="photo">
<img src="...your image">

<p> your caption </p>
</div>

-----ECT------



CSS



.photowrap {
float:left;
width: "your photos widths";
additional style, padding, margins ect...
}

.photo img {
any formating you want here, borders, padding ect...
}

.phototwrap p {
any formating you want here, borders, padding ect...
}

ahallicks
07-10-2007, 05:59 PM
I hope you're using the correct method to embed your flash/youtube object? The flash satay (http://alistapart.com/articles/byebyeembed) method works wonders and is cross browser compatible, however, for accessibility purposes and in order to create nice, semantic code, it's a better idea to use something like SWFObject (http://blog.deconcept.com/swfobject/) to embed you video via javascript, and then have an HTML backup, in case the user has disabled flash on their computer (such as a link to the actual video).

To center it, give it an id, or class if you want multiple videos and in your CSS use text-align center on that div. Should work...

grhino
07-10-2007, 11:40 PM
thanks for the help!

srule: using that as my starting point I've gotten to this:

html

<div id="centercontent">

<div class="photowrap">
<div class="photo">
<a href="/animations/curse.html">
<img src="/media/SEA_DISC/site/testing/curseThumb.jpg" />
<p>Alien Curse</p>
</a>
</div>



<div class="photowrap">
<div class="photo">
<a href="/animations/tentacle.html">
<img src="/media/SEA_DISC/site/testing/myTentacleThumb.jpg" />
<p>Tentacle Test</p>
</a>
</div>

css:

.photowrap {
float:left;
height:141px;
width: 120px;
}

.photo img {
border:1px solid grey;
padding-left:5px;
}

.photowrap p { margin:0px 10px 10px 10px;
color:#990099;font-family: Arial Rounded MT Bold;
}

this works great (i am testing locally hence the seadisc, and not using apache, just looking at the files)
...except it seems to have put the equivalent of a line break between my two images. They are now arranged in a column rather than side by side, can you tell me where I'm going wrong?

Also the photo border doesn't show up, even if i change it to high contrast pink. The text links aren't using the sites link css, but I've got an idea how to solve that once the imgs are looking right.

Thanks for any ideas anyone posts..

grhino
07-12-2007, 12:55 PM
ahallicks:
Thanks, I've had a quick look at SWFObject, and will try it out once I have sorted my grid of image/links problem out.

grhino
07-12-2007, 01:23 PM
This method of setting up a grid of image/links just isn't working. I've tried uploading it to my webhost, but there is still a line break or equivalent between the images. I've tried playing with the code, but can only think that there is something major missing, or wrong that i just can't see:

http://www.alternicity.com/animations/animation.html

html:

<div id="centercontent">

<div class="photowrap">
<div class="photo">
<a href="/animations/curse.html">
<img src="/animations/images/curseThumb.jpg" />
<p>Alien Curse</p>
</a>
</div>
</div>

<div class="photowrap">
<div class="photo">
<a href="/animations/tentacle.html">
<img src="/animations/images/myTentacleThumb.jpg" />
<p>Tentacle Test</p>
</a>
</div>
</div>


<br>

<p>.</p>

</div>

css:

.photowrap {
float:left;
height:141px;
width: 120px;
}

.photo img {
border:1px #282828;
padding-left:1px;
}

.photowrap p { margin:0px 10px 10px 10px;
color:#990099;font-family: Arial Rounded MT Bold;
}

Can anyone see any blunders? Or suggest another method? Is a grid of images tabular data..should I be using a table?

grhino
07-12-2007, 03:02 PM
Seem to have sussed part of it out...
If your interested:

css:
.photowrap {
float:left;

}

.photo img {
height:41px;
width: 120px;
border:1px #282828;
padding-left:1px;
padding-right:1px;
}

.photowrap p { margin:0px 10px 10px 10px;
color:#282828;font-family: Arial Rounded MT Bold;
}

Image dimensions were wrong (141 instead of 41) and dimensions were appiled to the photowrap class rather than the photo class.

Is there a way to make a centrecontent div a minimum depth?

ahallicks
07-12-2007, 06:07 PM
Is there a way to make a centrecontent div a minimum depth?

Depth? Are you coding in 3D? Amazing! :p

If you mean a minimum height, then yes... min-height: works in Firefox and IE7 I believe. But for IE6 you will need a conditional statement that uses just height: as IE6 automatically expands div given a set height, if the content within is larger than the dimensions given.

grhino
07-12-2007, 07:38 PM
Hi again!
I've managed to temporarily solve this one with a bunch of <br> tags, while I work on my emergent problems...
I seem to have broken my right content div completely, border and position are gone, the content just floats beneath the left content div.

As for ie compatability... the site is at the moment mainly to educate myself and my sons, so I may look up a way to redirect ie users to a standards compliance article somewhere or a firefox download page. Its all too much to think about without thinking about the ie problems. This is as difficult as 3d animation..
mind you i doubt very much my pages come anywhere near compliance themselves yet! ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum