Tables: Shadow effect and "pop down" menu

[nicky9499]

Hi everyone,

I'm a novice, been doing web design for about 2 weeks, so please be patient with me. At present I am using Dreamweaver CS5 on Mac.

I'm trying to create a shadow effect, example is shown below.

The website in question is pretty simple from a design view point, just a big table with images that double up as hyper links, this approach chosen because it is the fastest and nicest given my zero web design experience and image editing capabilities.



After bringing it live, there has been feedback that a "traditional" navigation bar would be good, however this would also make the website look cluttered. I would like to have a menu that "drops" down as shown below.

How can I go about doing this?
Thanks to all in advance.

Cheerio,
Nicholas.

 

[Phreaddee]

<div class="example">
this box will have a drop shadow
</div>

.example {
width:150px;
height:100px;
box-shadow:3px 3px 3px #ccc;
}

tables are not a good idea.

try jquery show/hide for the menu.

 

[nicky9499]

Hi there Phreadee,

I appreciate your advice on this, but as a beginner I am completely unable to comprehend what your are trying to say. Where do the codes go? I notice the second part looks like CSS? I have no idea how to do CSS and the site in its current form is just a bunch of "old school" HTML. You say that tables are not a good idea. Perhaps you would like to explain why this is so and some better alternatives?
And what is a jquery to begin with?
The menu can also pop in from the left, if this is easier to implement.

Here it is, if anyone is willing to give feedback: singaporevirtualairlines.org

Cheerio,
Nicholas.

 

[Phreaddee]

Im not going to rehash a 10 year old arguement re:table layouts.
suffice to say tables ought to be used for their intended use, that is tabular data.

markup (html) presentation (css) and behaviour (js) should all be separate.

use divs instead.

i have to disagree with you, and agree with all the feedback, that a navigation is a wise idea. if it "clutters" your design, you havent thought it out enough.
without a navigation most people will see the site, then leave. and hovering over an image and the cursor changing to a hand isnt enough of a visual cue for people to get it.
a simple navigation at the top would not clutter it at all (and IMHO its not that fantastic a "design" to be so precious as to not add one!)

I don't mean to be rude, but that's just the way it is.

 

[nicky9499]

Good day Phreadee,

First of all I understand that you may have 10 years of web design experience and able to come up with fantastic designs and I completely respect that. But I also ask that you understand that I am a complete beginner at web design and your original post obviously would make no sense to me. Along those same lines, I am doing this not because I want to but because there's no one else in my organization who's willing to do it.

So essentially I am just trying to come up with the most professional design in as little time as possible and learning and grasping whatever information I can come across. Your responses have been too technical and in-depth for a beginner to comprehend. Yes, you comment that tables are undesirable and suggest I use jquery or divs instead, but provide no information on these.

No, you do not come across as rude, but rather unwilling to help if I am honest.

I have read the "floating divs" sticky and have no idea how it relates to what I am trying to accomplish. I am also following this thread [http://www.webdesignforum.com/17926-simple-jquery-help.html]] as the user is facing the same issue that I have.

Cheerio,
Nicholas.

 

[Phreaddee]

Sorry for being unhelpful.

OK. in the example I provided I first showed you the html. this can be placed anywhere on the html document within the body tags.

<div class="example">
This Box will have drop shadow
</div>

you can make as many of these as you wish, one for each image block for example. so...

<div class="wrapper">
<div class="example">
This Box will have drop shadow
</div>
<div class="example">
 This Box will have drop shadow
 </div>
<div class="example">
 This Box will have drop shadow
 </div>
<div class="example">
 This Box will have drop shadow
 </div>
</div>

theoretically we could have these four "boxes" stack nicely 2 rows of 2 perhaps, yet by default they would stack on top of each other as a div by default is a block element
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
(as opposed to an inline element)http://www.w3.org/TR/CSS2/visuren.html#inline-boxes

so in order to get them to sit next to each other we have to use the floating property.
http://www.w3.org/TR/CSS2/visuren.html#floats

so if we have a design which is 800px wide and you want a 2x2 square. you would then make your div 400px. work out your margins, padding, borders etc. stick to the box model.
http://www.w3.org/TR/CSS2/box.html

and to add your drop shadow it will require using the box-shadow property
http://www.w3.org/TR/css3-background/#the-box-shadow
and a demonstration here.
http://www.css3.info/preview/box-shadow/

so to add a drop shadow to all of the four boxes in one go, you just edit the css class.

you may have noticed I put the example divs inside a wrapper. It does as its name suggests.

.wrapper {
width:800px;
margin:0 auto;
overflow:hidden;
}
.example {
float:left;
position:relative;
margin:20px;
border:1px solid #ccc;
padding:10px;
width:338px;
box-shadow:3px 3px 3px #000;
}

how you adapt that to fit your design you work out.

I didn't mean to appear harsh in regards to the navigation, although I still believe you should have a basic menu. a bit of breathing space with your images and you should be able to accommodate one.

this example is a good start
http://www.webdesignforum.com/10971-tutorial-css-menu-basic.html

jquery is a javascript library and you use it to make funky things happen, such as a fly in menu, which is what I was assuming you were wanting to implement.
http://www.jquery.com

...

 

[nicky9499]

Yes a menu is absolutely in order, which is why I have created this topic.

Your last post was most informative and helpful, I will take my time to carefully follow the steps and post back if there are any further questions. I do understand the effort it takes to create such detailed responses and sincerely thank you for your help.

Learning something new everyday.

Cheerio,
Nicholas.

 

[anna]

Yes a menu is absolutely in order, which is why I have created this topic.

Your last post was most informative and helpful, I will take my time to carefully follow the steps and post back if there are any further questions. I do understand the effort it takes to create such detailed responses and sincerely thank you for your help.

Learning something new everyday.

Cheerio,
Nicholas.

Nicholas, go to W3schools and HTMLdog.com to learn. If there is no one else in your organization that will do the site, then you'll have to step up to the plate and learn how. You need to fully grasp the concept of design and semantic mark up to have an effective website, anyhow. Just post whenever you have questions, and we will always try to help. Lynda.com is also a great resource to learn. Good luck!