Similar Threads
1. Text not showing up right in side-by-side Section - Adobe Dreamweaver
2. thumbnail photo gallery right side to enlarging pic on left side
Do you know how to build thumbnails on the right side, that when click on, will
enlarge the picture of the thumbnail clicked into a space on the left side.
(Not open another page with the enlarged picture? If so, can you give me a step
by step procedure on how to create within Dreamweaver CS3?
thanks,
Carol
3. css: How can I make a vertical side division stretch in keeping with the main division - Adobe Dreamweaver
4. css: How can I make a vertical side division stretch in keeping with the main division
css: How can I make a vertical side division stretch in keeping with the main
division Hi All, I use Dreamweaver MX, am learning css, and am trying to do
with divisions ( <div> ) what I used to do with tables and cells in the past.
I am creating a template with three vertical divisions: left, main, right.
Position: absolute. The main division will contain the text etc of several
pages, some long, some short. The left division will have a background image
(simple square pattern, which can be repeated) and will contain the vertical
menu. The main division will be stretched as required by the content it
receives. Therefore the 'height' of the main division will change
automatically, whatever I specify initially. Question: How can I make sure
that the left division (with the pattern background) stretches when the main
division stretches. Whatever height I specify for the left division it may
turn out to be shorter than the main division, whereas I want it to continue.
Your help will be much appreciated. Adrian
5. DW 8, vertical lines on the sides - Adobe Dreamweaver
6. How can I make a vertical side division stretch in keeping with the main division
7. vertical lines / one-sided table borders - Adobe Dreamweaver
8. Spry horizontal menu becomes vertical menu
In IE my spry horizontal menu becomes vertical but is stretched to the same
width as the horizontal menu is suppose to be? Any ideas?
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
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: left; /* 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: #999999;
}
#mainContent/* Tips for mainContent:
1. the space between the mainContent and sidebar1 is created with the left
margin on the mainContent div. No matter how much content the sidebar1 div
contains, the column space will remain. You can remove this left margin if you
want the #mainContent div's text to fill the #sidebar1 space when the content
in #sidebar1 ends.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements
within the mainContent div should be 430px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is
used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
*/
{
background-color: #8296B7;
height: auto;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 25%;
padding-bottom: 0px;
margin-top: 1px;
}
#column1 {
margin-left: 60px;
float: left;
margin-right: 25px;
}
#column2 {
margin-left: 50%;
margin-right: 25px;
}
#container {
width: 80%;
margin-bottom: 0;
background-color: #8296B7;
margin-right: auto;
margin-left: auto;
}
#header {
background-color: #003366;
font-family: Georgia, "Times New Roman", Times, serif;
width: auto;
height: 13.5em;
background-image: url(Images/header%20copy.jpg);
}
#header h1 {
color: #FFFFFF;
font-size: 1.8em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 0;
float: none;
padding-top: 2em;
text-align: right;
}
/* Tips for sidebar1:
1. since we are working in percentages, it's best not to use padding on the
sidebar. It will be added to the width for standards compliant browsers
creating an unknown actual width.
2. Space between the side of the div and the elements within it can be created
by placing a left and right margin on those elements as seen in the
".twoColLiqLtHdr #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you
may occasionally run into unexplained bugs with percentage-based columns. If
you need more predictable results, you may choose to change to pixel sized
columns.
*/
#navigation {
color: #FFFFFF;
font-size: 12px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
left: 312px;
top: 129px;
height: 29px;
margin-left: 25%;
text-align: center;
}
#footer {
width: auto;
padding: 0;
height: 10.5em;
background-color: #003366;
font-size: medium;
background-image: url(Images/footer%20copy.jpg);
}
#footer p {
margin: 0;
color: #FFFFFF;
font-family: Georgia, "Times New Roman", Times, serif;
float: none;
padding-top: 1.2em;
padding-right: 0;
padding-left: 0;
text-align: center;
width: auto;
font-size: 12px;
line-height: .1em;
}
#sidebar1 {
float: left;
width: 180px;
margin-top: 15px;
margin-right: 15px;
margin-left: 30px;
color: #002664;
}
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The
floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and
should be the final element before the close of a container that should fully
contain a float */
clear:both;
height:0;
font-size: 1px;
}
h1, h2, h3, h4, h5, h6 {
color: #003366;
font-family: Georgia, "Times New Roman", Times, serif;
}
p {
margin-right: 2em;
margin-left: 1em;
color: #FFFFFF;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
margin-top: 1em;
margin-bottom: 1em;
}
h1 {
color: #003366;
font-size: medium;
float: right;
}
h2 {
float: none;
font-size: medium;
line-height: normal;
margin: 1px;
}
h3 {
text-align: left;
font-size: large;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: normal;
}
img {
border: medium double #003366;
background-color: #CCCCCC;
padding: 4px;
}
#imgbox {
background-color: #CCCCCC;
border: thin solid #003366;
margin-right: 10px;
padding-top: 4px;
padding-bottom: 8px;
padding-left: 4px;
padding-right: 50px;
}
li {
color: #002664;
list-style-type: square;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
li p {
}
a {
}
a:link {
color: #003366;
font-size: small;
}
a:visited {
color: #CCCCCC;
font-size: small;
}
a:hover {
color: #CCCCCC;
}
#navigation a {
color: #FFFFFF;
font-size: 12px;
text-decoration: none;
list-style-type: none;
}
#navigation a:hover {
color: #CCCCCC;
}
#sidebar1 p a {
white-space: normal;
}
#indeximg {
margin-left: 25%;
margin-right: 25%;
background-color: #8296B7;
margin-top: -62px;
margin-bottom: -14px;
}