PDA

View Full Version : Layering and 'perfect' alignment?


TSG
05-26-2011, 05:28 AM
Through trial-n-error, I've found I can create the exact graphic layout I want. Ordinarily, [as it matters little in the 'brick-&-mortar' world,] I might just up-load this simple document and call it good.

Still, none of the permutations or code-swapping I have tried has left me with an elastic-layout with scroll bars where I need them. From that point, I'm hoping to save a template which would then form the basis of the remaining (*inDesign*) turnable pages with editable regions.

Specifically, the landing page shows a book cover with some border space around it. The padding [max] is roughly 1.5" on the Left, and 2.75" on the top of a Horizontal content field ~as it appears on the typical browser default~. The content should simply move to the Left [min padding of say .75"] with a reduction of the viewer's window. The text-headings are quite large, est. [24pt], although they must not scroll way outside the image if a _++_ view is sought by some visitors.

Which is the more reliable choice to use when the linkable text-overlays absolutely must fall in exact positions above a photo?

'embed' the text with {external javascript,} or something?
make individual AP lines of text (as one might do w/vector-layers)?
make a table, and convert it to an AP -element? (Bi-passing the
inherent line-height 'variables' of user-default text-blocks.)
use 'create list?' ..
...and 'tween' each line of text with a different <in-line> tag?
--use fireworks, slices, or placement methods which do not require any
combination or concern the above?

domedia
05-26-2011, 02:21 PM
My guess would be none of them 8)

Can you post a picture of your website graphic?
I'm sure someone here can point you in the right direction, and it's guaranteed to be based on web standards.

TSG
05-26-2011, 02:53 PM
Good idea. First, I'll try to downsize my browser screenshot as a .JPG.

TSG
05-26-2011, 03:07 PM
...drumroll :)

domedia
05-26-2011, 03:40 PM
Very distorted, but from what I could see there was four links. This is a list of links and should be marked like this:
<ul>
<li><a href="yourlink1.html">Your Link 1</a></li>
<li><a href="yourlink2.html">Your Link 2</a></li>
<li><a href="yourlink3.html">Your Link 3</a></li>
<li><a href="yourlink4.html">Your Link 4</a></li>
</ul>
(Use your own documents names and text of course.)
Then use CSS to make sure the links are directly over the right areas.

TSG
05-26-2011, 06:16 PM
Thanks L.G. Your suggestion looks great from the basis of outputting cleanly written code.

*In crunching that 1.2MB TIFF image down to a .pdf which I could upload, I had to down-scale it by 60%, and then select 'as small a file as possible.' (Aside from providing the file from my server,- What's the best way to convey similar picture info in the future?)

In Browser-view you can see everything lines up, but only at that screen-default. (OK, I'll experiment with the code-revision tonight.)

The other file, 'activeview' shows what it looks like as I am composing things in HTML/CSS. As a CMYK-guy, it's quite disconcerting to be designing things out-of-register.

'Tables,' (cantankerous as they may have become,) do seem to provide a level of placement assurance that other methods do not. Also, the 'hot-links' I require here on the splash page could just as well be done as picture elements with the type/colorfields 'inverted' on roll-over.

mangofreak
05-26-2011, 07:40 PM
Can you convert your photo to PNG and JPG and see what file size you come up with. Make it as big as possible 1920X1080 px and clear. Perhaps we can come up with an elastic design after all. No promises though.

Also, you can try slicing your background, the decorative part into corner elements and border elements. After that you can put together a sort of shell. After you can add the Sky, House, and menu.

That's that for now.

domedia
05-26-2011, 09:12 PM
The page takes any of us 10 minutes to make.
The only assurance you have to make things look right is to use web standards (which includes what we in the field consider good practices). You can try a using a table, but you're going to kick yourself later.

This really is a non-brainer.

Can you upload your TIFF somewhere (not here) on the web so we can show you?

There's also some resources out there for people that are trying to do the transition from traditional paper design media to web. It's not easy, but absolutely doable. The same main principle stays put; you have to know the medium you're working with. If you come from a print background, I can understand the frustration when dealing with Dreamweaver. It's not the same as print design software at *all*, and the approach you use to make it look the way you want is imperative for how it works in the browser and for the user.

TSG
05-28-2011, 07:31 AM
Uploading a TIFF, via FTP really ought to be a no brainer as well, but not for me. I had completely forgotten where the content folders go in my Joomla-based server config. At least I do have a fine rapport with my webmaster, Dennis, except that he spends 18Hrs a day helping the homeless, via his outreach center which I helped to create.

Dennis has never charged me a dime after hosting my other site since 1994. These last few weeks of tornadoes & flooding have doubled his caseload. Lately, he is often too tired to stand up, let alone remember MY details...

Doubtless, Dennis surmised that I would never get over this hump without participation in a group; "You're having trouble using Dreamweaver?, --I dunno, ask some guys in a forum, for Christ's sakes," says he!

...pondering.

TSG
05-31-2011, 07:23 PM
http://www.chezkiva.com/

Voila! = Big progress today. The homepage is looking exactly like I wanted, (as per those last fuzzy screenshots.) Haven't bothered with the other content pages, as I knew there were some file-organization & format issues I hadn't resolved.

I set up 4 mail accounts which all seem to work. This enables me to discontinue using G-mail in due course. I'm using 'cPanel' as the front-end, +plus+ "CyberDuck" as the ftp-client (or set-up assistant,) which is super Mac-friendly.

johnMoss
05-31-2011, 08:07 PM
TS do you have photoshop?

TSG
06-01-2011, 07:07 AM
'er since 1993... Sergeant!

domedia
06-01-2011, 02:30 PM
http://www.chezkiva.com/

Voila! = Big progress today. The homepage is looking exactly like I wanted, (as per those last fuzzy screenshots.)

Great! 8) Let us know if you need any other pointers.

johnMoss
06-01-2011, 03:01 PM
Sorry, just couldn't figure out why use a TIFF for display purposes... Or did I read that wrong?

domedia
06-01-2011, 04:38 PM
Sorry, just couldn't figure out why use a TIFF for display purposes... Or did I read that wrong?
No, you're perfectly right. TIFF is not a web format.