PDA

View Full Version : AP Divs???


Tomcat104
04-03-2014, 11:25 PM
I'm just starting to work on a restaurant site that would use a "menu bar" placed over a "slide show". I can't think of a way to do it except to use AP Divs and I remember reading something here about that being a "no-no".

What are the "cons" of those Divs? What should I be considering as an alternative?

David

edbr
04-04-2014, 01:27 AM
no its ok to use that positioning , just be sure to use them in a way that is consistent, ie absolute positioned elements in relative positioned parent divs.
most errors with them are through not understanding how ,or from what they are positioned

Ricky55
04-04-2014, 04:27 AM
Just to add. The biggest issue we've found on here with absolutely positioned elements is when people try to base an entire layout on them and that maybe when you have heard us say they are a bad idea.

Used correctly there's nothing wrong with absolute positioning as Ed correctly says.

Tomcat104
04-05-2014, 12:12 AM
Ricky55...I bet you're right that sure sounds like what I remember.

I started today on a design but I'm not sure if I like it.

I think I have used the AP Div correctly, at least it seems to work the way I want it to.

Would you guys take at look at and tell me what flaws you see. I would appreciate any constructive criticism that you guys might have.

David

http://cafe49.com/indexB.html (http://www.cafe49.com/indexB.html)

d a v e
04-05-2014, 07:11 AM
i get quite a large horizontal scroll @1280 x 1080 (latest firefox win7)

the bevels, gradients and drop shadow are overdone on the logo - i would take them away altogether and go with a white or subtle cream ;)

nav could have a slight opacity perhaps?

the font on the menu/'enjoy an evening...' is a bit fancy maybe for the subject - why not use the one from the "pesto risotto" below? or try google fonts/font squirrel for a more cafe related one

make your gradients more subtle, and reign in the drop shadow on the "enjoy an evening..." (evening breakfast?! why not)

drop the "click here to" from the browse the menu button

at lower resolutions the menu is cut off (the AP i assume?) and the pictures are squashed horizontally - are you not going to make this responsive?

the layout looks a bit messy because elements don't line up (e.g. main text and the right column edge of Sally Brown and images in the header are different sizes

titles e.g. "chef's recommendations" needs touch more contrast

main text could be #333 not quite so stark #000

Ricky55
04-05-2014, 09:26 AM
Yes I agree with Dave the logo doesn't look right. Like Dave says lessen the shadow and change the colour.

The font in the menu could a little bigger.

Made me want my breakfast looking at this so that's all for now as I'm on my iPad.

Cheers

Ricky55
04-05-2014, 09:29 AM
Use real text for the customer testimonials header text. Using images is out of date now.

If I'm being 100% honest the whole design just looks a little dated.

I'd perhaps look around the web and see what other folks are doing and use this to inspire your design.

I'll help you if you want to have a fresh go at it.

Tomcat104
04-13-2014, 09:15 PM
I hear what you guys are saying and I think I understand.

I'll be working on the site again this week and just wonder; can I use AP Divs in a FGL? I'm trying to learn FGL but still like some of my general designs and I want to try and incorporate the two.

What do you guys think!

Ricky55
04-14-2014, 07:29 PM
Yes you can.

A very basic example


<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8">

<title>Enter a Title</title>

<style type="text/css">

* {
margin: 0;
padding: 0;
}

.wrap {
background: url(http://placehold.it/350x150) left top repeat;
width: 96%;
height: 500px;
margin: 0 auto;
position: relative;
}

.inner {
background: rgba(25, 12, 15, 0.4);
width: 50%;
height: 150px;
position: absolute;
left: 0;
top: 0;
z-index: 100;
}

</style>

</head>
<body>


<div class="wrap">

<div class="inner">
<p>I'm an inner paragraph</p>
</div>

</div>

</body>
</html>

edbr
04-17-2014, 01:32 AM
just FYI here's a similarly themed (responsiveand free template) might give you a thought or starting point
http://www.zerotheme.com/demo/index.php?cat=full&temp=zValencia