Z Index Web App

Report · Apr 20, 2012

I'm trying to build a Web App that looks like this-

And its coming out like this-

http://www.phillylite.com/message-board.html

Here is the code-

<tbody>

<tr>

<div style="border: 0px solid; position: relative; z-index: 2; color: #ffffff;">{tag_name_nolink}</div>

</td>

</tr>

<tr>

<td style="width: 389px; height: 192px;"> {tag_photo left}</td>

<td align="left" style="width: 409px; height: 192px;">{tag_description}</td>

</tr>

<tr>

</tr>

</tbody>

</table>

You can see with the diffrence between the image and whats online that there is a padding between the layers that shouldn't be there. There is also something wrong happening when I tried to add a z index so that I could have text over an image. And I didn't know how to get the tag_description to start in the top left of its divider. The bottom image doesn't appear and im not sure why. Can someone please, in detail, explain what I can do to get my code to generate an outcome that is identical to my picture.

Report · Apr 23, 2012

I think you should get rid of tables first and write a clean table less markup for web app layout.

Report · Apr 24, 2012

Why do you think I shouldn't use the tables? Does anyone have anyway to fix me exsisting code?

Report · Apr 24, 2012

Hello lilpillzz,

I agree with concypt, tables were initially designed to present tabular data not for making layouts.

Here is what a table-less fix could look like:

http://jsfiddle.net/chaddidthis/vznAb/

This is clean and uses a lot less code.

As for your existing code (if you really want to use tables) - I'm not sure you need to place an image in the header with the title. This can be accomplished with css just giving a background color. Or, as it looks like your using a png with some transparency, you can use a 1x1px png background image and just set it to repeat. Then you wouldn't have to worry about positioning and z-indexing. The text can be placed in the upper left hand corner by adding vertical-align: top; to your td's, it also could use some padding. The bottom image isn't showing up because the image path is /images/module/bottom..png, you'll need to remove one of the periods from the png. Try to give the image an alignment to the left, which might fix your unwanted padding problem.

Hope this helps,

Chad Smith | http://bcgurus.com/Business-Catalyst-Templates for only $7

Report · May 01, 2012

I changed the title and img to {tags}. I'd like both to link to a photo album. I'd like to be able to assign which photo album I'd like each to link to each time I create a new item. How would I go about putting thiat into the code when I am using tags.

http://www.phillylite.com/message-board.html

Report · May 01, 2012

lilpillzz,

For your title and img tags to link to a spesific photo album I would create a field within your web app that you could place that link, then you would set up your title and image tags like this:

<a href="{tag_photoAlbumLink}">{tag_name_nolink}</a>

<a href="{tag_photoAlbumLink}">{tag_image_nolink}</a>

Just replace the tags with what you're using.

Also, you've just placed the code I wrote in the list layout, but you don't need to put the css in there as well. Right now you're outputting the css with every item. Take the CSS out and put it in your style sheet, like your site_global.css.

Report · May 01, 2012

I don't know what I did wrong, since I know nothing about coding, but the image link isnt working and both are taking on a purple and blue font to represent a link.

Where can I read about the site global css? I didn't know about it before and don't know currently where it is.

Thanks for your help. Your quite skilled at all of this.

Report · May 01, 2012

Your images are purple and blue because that is the default colors for links. You can also change this in your site_global.css file.

I don't think there is a place to read about the site_global.css file. But it is in the css folder. So if your looking at your sites files in Dreamweaver, look in the css folder and open the site_global.css file.

For your image tag that is not working, I've tested the _nolink on images for my web apps and it should work if it is named right. So if you've named your image field "Image 1" the tag would look like {tag_image 1}. You can see your custom tags in the tags insert drop down in the list view layout. You have to add the _nolink to make the image not link. Then wrap the tag with the a tag, like I did above, so it will link to your photo album.

hope this helps.

Report · May 03, 2012

I couldn't get the CSS to work in the globals.css file.

I have 5 different "classifications" in this module under BC. How can I use this code in order to tell the font color to change when the classifcation is given.

Right now the module isn't coded to respond to any change in classification for an individual post. So only one class and therefore only one color

<h2><a class="sociallite" href="{tag_photoAlbumLink}">{tag_name_nolink}</a></h2>

This is the code added to tell it what font color to use, how do I get it to change when I give the post a classifcation? (and not by the 'class' within the html

	a.sociallite:link {color:#cc3333; text-decoration:none;}
	a.sociallite:visited {color:#cc3333; text-decoration:none;}
	a.sociallite:hover {color:#cc3333; text-decoration:none;}
	a.sociallite:active {color:#cc3333; text-decoration:none;}
	a.video:link {color:#9933ff; text-decoration:none;}
	a.video:visited {color:#9933ff; text-decoration:none;}
	a.video:hover {color:#9933ff; text-decoration:none;}
	a.video:active {color:#9933ff; text-decoration:none;}
	a.nightlite:link {color:#3366cc; text-decoration:none;}
	a.nightlite:visited {color:#3366cc; text-decoration:none;}
	a.nightlite:hover {color:#3366cc; text-decoration:none;}
	a.nightlite:active {color:#3366cc; text-decoration:none;}
	a.streetlite:link {color:#339933; text-decoration:none;}
	a.streetlite:visited {color:#339933; text-decoration:none;}
	a.streetlite:hover {color:#339933; text-decoration:none;}
	a.streetlite:active {color:#339933; text-decoration:none;}
	a.ladiesoflite:link: {color:#ff3399; text-decoration:none;}
	a.ladiesoflite:visited {color:#ff3399; text-decoration:none;}
	a.ladiesoflite:hover {color:#ff3399; text-decoration:none;}
	a.ladiesoflite:active {color:#ff3399; text-decoration:none;}

Report · Apr 24, 2012

Not the I thing at all as the other guys have poit ed out. It's all about your markup, web standards and using HTML elements that can handle the modern web, CSS properties etc.

I've Chad has shown the easier i

Fix and the one that will be the most cross browser comparable, full proof, cleaner and easier to mange is through table less layout ::)

Adobe Community

Z Index Web App

1 Correct answer