PDA

View Full Version : simply frustrated w/ layering


TSG
05-19-2011, 01:59 AM
To wit, I could have done this pretty easily in Dreamweaver8, assuming we still used tables and layers in CS4.

To asnwer my first and second questions effectively, it would help if you had seen my existing, partially built site. http://chezkiva.com

I've just done a screenshot of the current 'looks right' page, yet I don't believe I can post images on my first post...

thanks for any insight you might provide.

edbr
05-19-2011, 02:05 AM
what first and second questions?

TSG
05-19-2011, 02:19 AM
(image attached?)

edbr
05-19-2011, 02:21 AM
no thanks code is what counts

TSG
05-19-2011, 02:23 AM
First, am I correct to try to build this main splash-page within the simple [new html] template: [one column-elastic] ?

Second, what form of box, or CSS -style easily enables me to place a photo and build fixed text areas, which 'flow' with the browser window resizing?

TSG
05-19-2011, 02:27 AM
<!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;
}
.oneColElsCtr #container {
width: 880px;
background: #22044F;
margin: 0 auto;
text-align: center;
}
.oneColElsCtr #mainContent {
padding: 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
position: absolute;
left: 25px;
top: 33px;
}
body,td,th {
color: #FF0;
top: inherit;
float: inherit;
font-style: normal;
font-size: 18pt;
text-align: center;
}
#apDiv1 {
position:relative;
left:545px;
top:100px;
width:265px;
height:331px;
z-index:1;
overflow: visible;
visibility: visible;
}
#apDiv2 {
position:static;
left:508px;
top:76px;
width:261px;
height:336px;
z-index:2;
visibility: visible;
overflow: visible;
line-height: normal;
font-size: 24px;
}
.oneColElsCtr #apDiv1 #apDiv2 p {
font-size: 16px;
}
.oneColElsCtr #apDiv1 #apDiv2 p {
font-size: 24px;
}
-->
</style></head>

<body class="oneColElsCtr">

<div id="apDiv1">
<div id="apDiv2">
<p class="oneColElsCtr">~ le MENU ~</p>
<p>&nbsp; </p>
<p>• Boulangerie •</p>
<p>• Savory! • </p>
<p>• Patisserie •</p>
<p> •specialties du Chef•</p>
</div>
</div>
<div id="container">
<div id="mainContent">
<h2><img src="/assets/Images/chezkiva_.gif" alt="" name="bkgnd" width="822" height="563" align="texttop" id="bkgnd" /></h2>
<p>&lt;&lt; navigation&gt;&gt;</p>
<!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>

edbr
05-19-2011, 02:33 AM
First, am I correct to try to build this main splash-page within the simple [new html] template: [one column-elastic] ?


personally i dont like splash pages and but i also prefer centred fixed width pages , as there are so many varieties of screen sizes and resolutions. but thats just an opinion


Second, what form of box, or CSS -style easily enables me to place a photo and build fixed text areas, which 'flow' with the browser window resizing?

in general terms always use relative positioning for layout then you can control the flow

TSG
05-19-2011, 02:48 AM
I finally got the image to show up in the browser...
(By choosing: relative to document / root )

TSG
05-19-2011, 02:53 AM
Yes. I just discovered that I can select exact positioning, to place the box, and that 'relative' enables it to re-size.

For blogs, etc, I couldn't agree with you more. It is always good to land on a page which fits the screen, and enables you to easily scan the info you may seek.

My 'homepage' is nothing more than a business card, with these active links to some (temporary) horizontaly aligned / book-like pages. I saw a tutorial about InDesign that would enable me to complete the book-like page turns later...

TSG
05-19-2011, 03:30 AM
Thanks for your support edbr. Did reading that code reveal any major issues? I'm fiddling with another (!@%*--table) based on the need to resolve the line-spacing of the [relative] 'floating' links-text box. Can't seem to work out how to go from HTML/CSS and the old style of layering via the eyeballed-list.

edbr
05-19-2011, 03:46 AM
not sure why you use static positioning .

TSG
05-19-2011, 04:02 AM
I'm still experimenting. ..There comes a point when you just have to randomly slash through the thicket to see if there is a trail worth following at all.

Sleepy time here. Thanks Capt'n, I'll ring again tomorrow.

edbr
05-19-2011, 04:14 AM
no prob , completely understand that,take all the wires out of te box and try to put them back

Corrosive
05-19-2011, 06:06 AM
no prob , completely understand that,take all the wires out of te box and try to put them back

But don't cut the red one...

edbr
05-19-2011, 06:25 AM
or is it the blue one.....

Corrosive
05-19-2011, 06:41 AM
or is it the blue one.....

Nah, definitely the green one.

TSG
05-25-2011, 04:56 AM
(Points taken!) BTW, I've found I can delete gray warning text in its entirety, but haven't quite the courage to cut all the green wires... (another day, back to the help-files.)

I've just come up with a near perfect looking document, except it's justified upper Left, and won't be particularly browser text scale -friendly.

NOW, it appears I've erred considerably in certain assumptions. Obviously, a New CSS-blank page with an external CSS file is rudimentary. However, affixing *these* properties via tags, or cascading rules alone isn't going well in this case.

Can't I use [NEW-HTML-1] w/a two column TABLE, consolidating all the rows of the Left column, and placing the text I need in each of my Right column-rows, with an image as the background of the single HTML table?

Here's the current build, [up-dated from my other post under: ../'coding CSS'



<!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 {
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: #F4FFBD;
background-color: #22044F;
margin-top: 30px;
display: inherit;
margin-left: 0px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 100%;
font-style: normal;
}
.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: absolute;
left: 35px;
visibility: visible;
overflow: visible;
z-index: 1;
}
body,td,th {
color: #F2E5A7;
top: auto;
float: left;
font-style: normal;
font-size: 18pt;
text-align: center;
background-position: top;
}
#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" />
<style type="text/css">
<!--
#apDiv4 {
position:absolute;
left:481px;
top:62px;
width:232px;
height:65px;
z-index:3;
}
#apDiv5 {
position:absolute;
left:67px;
top:569px;
width:638px;
height:38px;
z-index:4;
font-style: italic;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #DFD173;
font-size: 14pt;
text-decoration: none;
}
#symbols {
font-size: 14pt;
}
h3 {
font-size: 24pt;
font-style: italic;
color: #FFF;
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
color: #E9E1A8;
text-decoration: none;
}
a:hover {
color: #FF0;
text-decoration: none;
}
a:active {
color: #FFC94F;
text-decoration: none;
}
pagelinks {
text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
font-weight: bold;
}
-->
</style>
</head>

<body text="#FFFFCC" class="oneColElsCtr">
<div id="mainContent">
<div id="mainContent2">
<div id="apDiv4">
<h3><a href="/assets/leMenu/le_MENU.html" target="_self">~le <strong>MENU</strong>~</a></h3>
</div>
<div id="apDiv5">* We're turning back the pages of culinary history * &gt;&gt;&gt;</div>
<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="text-decoration: none; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; line-height: 38pt; position: absolute; width: 239px; height: 306px; z-index: 2; text-align: center; vertical-align: inherit; overflow: visible; left: 512px; font-size: 18pt; visibility: visible; top: 180px;"><p>• <a href="/assets/Boulanger/boulangerie.html">Boulangerie</a> •</p>
<p>• <a href="/assets/Savory/savory.html">Savory!</a> •</p>
<p>• <a href="/assets/Patisserie/patisserie.html">Patisserie</a> •</p>
<p>• <a href="/assets/Specialties/specialites.html">specialties du Chef</a> •</p>
</div>
</body>
</html>

TSG
05-25-2011, 05:00 AM
>who created this 'default' number #66666 ../satan?<