PDA

View Full Version : HTML/CSS> ? <...a 'no brainer' ?


TSG
05-24-2011, 09:08 PM
[DW-CS4/ Macintosh]

Yesterday, I received a very succinct answer to a problem I didn't even know I had. Thankfully, I am beginning to sort out the rationale behind CSS & amending HTML w/remote style sheets. I simply want BOTH a picture and the TEXT OVERLAY to be elastic, -formated to accommodate the usual range of window sizes.

The instruction was (in paraphrase): "HTML tag for text, set background as the image layer to use w/CSS, and type over it. To expand/contract, set width on your tag using CSS again."

This is the closest I've come since. >> NO ELASTIC ATTRIBUTES <<And, I'm beginning to think I want the THREE column layout, so I can actually position this text justified near the right. It also requires two other text placement positions, which I *might* be able to place as I've done here, as AP-elements... ??

*BTW, I need to up-load something asap, before going on the road on a less than desirable research assignment. Most of the conceptual/layout work has been done in Dreamweaver 8, on my old Mac. {..If we can forget all the proper training & jargon just for now, I am simply trying to figure out which format, (or part of the code) I am supposed to use to maintain the elastic quality of this particular [static] 'landing page.'} Do I need to start with a HTML1. template instead?

_______________________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #22044F;
margin-top: 20px;
display: inherit;
margin-left: 0px;
}
.oneColElsCtr #container {
width: 880px;
background: #22044F;
margin: 0 auto;
text-align: center;
font-size: 10pt;
line-height: 16pt;
}
.oneColElsCtr #mainContent {
padding: 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
position: relative;
left: 25px;
visibility: visible;
overflow: visible;
z-index: 1;
}
body,td,th {
color: #3FF;
top: auto;
float: left;
font-style: normal;
font-size: 18pt;
text-align: center;
}
#apDiv1 {
position:relative;
width:265px;
height:83px;
z-index:1;
overflow: visible;
visibility: visible;
font-size: 36pt;
}
#apDiv2 {
position:relative;
left:0px;
top:76px;
width:261px;
height:0px;
z-index:2;
visibility: visible;
overflow: auto;
line-height: normal;
font-size: 20px;
}
.oneColElsCtr #apDiv1 #apDiv2 p {
font-size: 16px;
}
.oneColElsCtr #apDiv1 #apDiv2 p {
font-size: 20px;
position: relative;
}
.oneColElsCtr #mainContent h2 {
font-size: 12pt;
position: relative;
}
-->
</style>
<link href="chezkiva.com/CSS/textlayer.class.css" rel="stylesheet" type="text/css" />
</head>

<body class="oneColElsCtr">
<div id="mainContent">
<div id="mainContent2">
<h2><img src="assets/Images/chezkiva.assets.1.jpg" width="770" height="615" alt="revolutionary pastries" longdesc="/assets/Images/chezkiva.assets.1.jpg" />
<!-- end #mainContent -->
</h2>
</div>
</div>
<div class="oneColElsCtr" id="apDiv3" style="line-height: 12pt; position: absolute; width: 234px; height: 272px; z-index: 2; text-align: center; vertical-align: inherit; overflow: visible; left: 601px; font-size: 13pt; visibility: visible; top: 236px;"><p> Boulangerie </p>
<p>&nbsp;</p>
<p> Savory! </p>
<p>&nbsp;</p> Patisserie
<p>&nbsp;</p> specialties du Chef </div>
</body>
</html>

TSG
05-25-2011, 06:10 AM
*Sorry, I must have written a confusing post, above. I just posted the latest build over on the General board. As I mentioned there, it looks like I have to resort to a simple, pre-formatted CSS page and insert a single table with a background.

Else fail, I could take my old blue Mac {400MHz/G3} on the road with me. No tears if it gets swiped in the big city, but it won't help me learning CS..

mangofreak
05-25-2011, 04:00 PM
You can't have an image to be elastic. Not as far as I know unless it is Flash or if it is a big image that is then manipulated by some sort of script that will resize according to the screen resolution of your users.

Backgrounds Tile X and Y on the screen thus covering it or you can tile horizontally or vertically.

to have a elastic (fluid layout) you have to work using as dimensions percentages.

As per your first post I got lost. ESL it's hard wall to climb. ;)

gentleone
05-25-2011, 04:58 PM
It is possible to get an image resizing with screen resolution. I was experimenting a bit myself a couple of months ago with a full-screen photo gallery. It's a well known CSS trick, but you will have to crop the image with the overflow: hidden property.
http://www.gentlemedia.nl/experiments/full-page-gallery/

There is also a way to do it which is called 'responsive images'. You need a HTML5 and a bit of javascript to do this.
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware _image_sizing/

mangofreak
05-25-2011, 05:08 PM
There is always something new to know. Thanks gentleone.

TSG
05-25-2011, 05:56 PM
Although I deeply distain fashion in general, these are very nice photography samples!

As to the image 'down-sizing,' I had no trouble doing this with my old Sys 8.5.6 /9.2 Mac with the world's simplest shareware Ap. Of course, all software pre OS-X 10.4.11 is completely incompatible with todays I'net. -Crash guaranteed!

mangofreak
05-25-2011, 06:22 PM
;) I have no idea where this is going. One question, can you explain in simple terms what kind of help you need?

gentleone
05-25-2011, 06:23 PM
There is always something new to know. Thanks gentleone.
You're welcome, but both methods have there drawbacks.
In my experiment I used pretty big sized photo's, because if you would optimize them they will look shitty on the huge screen resolutions and you can only use width: 100% in the css for the image, so the height you have to crop with overflow: hidden to eliminate the scrollbar.

The big size image goes for the responsive images too. This way is invented for serving mobile devices too. Responsive web design... building one site for desktop and mobile devices. So a mobile device will display a small image, but it has to load the big image for that. This will slow down the loading time of the site.

I really like the idea of responsive web design, but it has still its many downsides. These will eventually be solved by some smart devs, so it's always good to dive already into the theory behind it.

http://www.alistapart.com/articles/responsive-web-design/

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Downsides:
http://csswizardry.com/2011/01/forget-responsive-web-design/

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

gentleone
05-25-2011, 06:25 PM
can you explain in simple terms what kind of help you need?
Yes, please... because I don't get you too just like mangofreak :confused:

mangofreak
05-25-2011, 06:36 PM
Yes, gentleone. I really like those approaches to fluid images but as you mention I don't think we can comfortably apply them to current projects - you did it well on your "experimental page." We can still use a few css pages to show various backgrounds depending on the screen size.

Thanks for sharing your findings.

domedia
05-25-2011, 08:49 PM
I really like the idea of responsive web design, but it has still its many downsides. These will eventually be solved by some smart devs, so it's always good to dive already into the theory behind it.

Here's some great screenshots of how responsive design adapts to devices. Note how the netbook and tablet is included as well.

http://mediaqueri.es/

.

TSG
05-26-2011, 07:06 AM
Here, gentleone has certainly brought us to consider the cutting edge of web design issues, and is right to suggest we begin to investigate these issues before presuming we need to use them.

Each of you seem quite advanced in your capability to read and interpret code-view. For me, it's like I've just stepped off the plane in Tokyo!

Sensing your confusion, I've restated the first part of my quest on the General Forum earlier tonight. After just 5 days in town, my first *index.* page looks absolutely perfect-on my default browser. However, my method of achieving this astounding success is relatively similar to the first (currently online) build which I did in PageMill2.0/System 9.2. {Truly circa, 1996!}

Since I remain more or less adept at 'reverse engineering,' There, I've re-stated my leading questions, from the top down. Having a set of text elements that behave as I want should enable me to figure out where I need to place these </div>s< et, all..

On a personal note, after over two yeas of creative brooding on this virtual business ID-package, I met with my benefactor today. He's ready to send me to work with a real group of pros back east, asap; "it's time to wrap-up all this fantasy stuff, and get down to the production-phase.." Thus, I need to launch a simple set of descriptive placeholders, unlike the rough drafts which are online as we speak. http://chezkiva.com and http://positivelysweetmarie.com -which simply says "under construction."