dslreports logo
 
    All Forums Hot Topics Gallery
spc
Search similar:


uniqs
483

Stealth42
join:2005-05-20
San Diego, CA

2 edits

Stealth42

Member

Web Page Design Question

Hello,
My wife is working on a project for school. She has created a page that has and image that place in the upper right hand corner. The problem is when we view it on different monitor the image moves. Is there any way to lock that image to that location no matter what monitor it viewed with.

Correct
»www.geocities.com/shaan_ ··· dsl1.jpg

Incorrect
»www.geocities.com/shaan_ ··· dsl2.jpg

Can anyone help with this.

Thanks in advance.

tao
Frazzlebats
Premium Member
join:2000-12-03
Lansing, MI

tao

Premium Member

In the two images posted, the one labeled correct seems to exhibit the positioning you state is incorrect. But I can tell you that your question is incorrect and not the image.

Since this is for school, I will not directly answer your question, but I will tell you to look at the positioning of the div in the scheme of the page. Just looking at the image hinted to me that this is a Dreamweaver, or some other WYSIWYG editor 3 column template. If so, did you pick the correct base file? Unless you use absolute positioning, and you should not, the image will float in the div and the div will float in it's container, both according to the parameters placed in the .css file for the project.

If this is Dreamweaver CS3, I can tell you that using that interface to create that banner is a bit buggy AFA positioning goes and might be better placed as a background for the div.

Hope I was sufficiently evasively clear.

Stealth42
join:2005-05-20
San Diego, CA

Stealth42

Member

Tao,
Thanks for the reply. Yes this was done in Dreamweaver CS3. The background at the top was created in photoshop. She tried to make the lady image part of the background but can't because it will only be placed in the top column. The idea is to have the lady overlapping the top and right column.

jayco4376
Premium Member
join:2001-08-11
Lincoln, NE

jayco4376

Premium Member

Archive.zip
11,841 bytes
Take a look at the enclosed zip file. I got the sample 3 column CSS layout from a google search. Made some minor changes to the CSS and added a picture of my own to illustrate the concept. The key things here are the zindex and positioning. Couple other things:

I'd recommend sitting a min-width on your main wrapper div. I'd also make your header graphic so that it doesn't wrap. Set the CSS so it won't wrap and also make the image longer than it needs to be width-wise. That way when someone with a high resolution comes and views your site at full screen it won't show blank space or the repeating background. I don't know if I'm explaining it clearly, but it looks like your header graphic is 800px wide. Design it so that it shows everything the visitor needs is within those 800px wide but make the actual graphic 1200px wide (extend the color, design/space, etc.)

Stealth42
join:2005-05-20
San Diego, CA

Stealth42

Member

Joyco437,
Thanks for the example.. I understand your concept but have no idea how to put that into her project. Is there away you can help with this. This was done in Dreamweaver CS3. This site has 8 page and thar top colume is one everypage. So think you can help.

I found this but don't no where to insert it into our project:

#header img {
overflow: visible;
z-index: 400;
top: 0px;
right: 0px;
clear: both;
float: right;
position: absolute;

jayco4376
Premium Member
join:2001-08-11
Lincoln, NE

jayco4376

Premium Member

You put it either in the external CSS file, or in the inline CSS in between the HEAD tags.

This is assuming your header div is actually called header... If the site is online PM me the URL and I'll take a look at it.

tao
Frazzlebats
Premium Member
join:2000-12-03
Lansing, MI

tao

Premium Member

Jayco,

Just to butt in here a bit, only because I have Dreamweaver. The user does not need the .zip file, all he has to do in Dreamwever is to open a Liquid, 3 column layout under File - New.

That process creates a .css file in a directory of your choice, best choice being the same folder as the index.html file.



and Dreamweaver automatically constructs a CSS shell and names it: thrColLiqHdr.css

BEGIN CSS

@charset "utf-8";
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;
}
.thrColLiqHdr #container {
width: 80%; /* this will create a container 80% of the browser width */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.thrColLiqHdr #header {
background: #DDDDDD;
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.thrColLiqHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}

/* Tips for sidebars:
1. Since we are working in percentages, it's best not to use side padding on the sidebars. 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 ".thrColLiqHdr #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.
*/
.thrColLiqHdr #sidebar1 {
float: left; /* this element must precede in the source order any element you would like it be positioned next to */
width: 22%; /* since this element is floated, a width must be given */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual space within this div */
}
.thrColLiqHdr #sidebar2 {
float: right; /* this element must precede in the source order any element you would like it be positioned next to */
width: 23%; /* since this element is floated, a width must be given */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual space within this div */
}
.thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
margin-right: 10px;
}

/* Tips for mainContent:
1. the space between the mainContent and sidebars is created with the left and right margins on the mainContent div.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px 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.
*/
.thrColLiqHdr #mainContent {
margin: 0 24% 0 23.5%; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
}

.thrColLiqHdr #footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
}
.thrColLiqHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

/* 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 The floated element must precede the element it should be next to on the 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 its child floats */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

jayco4376
Premium Member
join:2001-08-11
Lincoln, NE

jayco4376

Premium Member

The zip I posted was just a demo of the CSS to float the header image in the header DIV, but above the right sidebar. I did it so he could see how the float worked without all the extra Dreamweaver crap.

The OP sent me the stuff that DW built, I implemented the changes, and sent it back.

Stealth42
join:2005-05-20
San Diego, CA

4 edits

Stealth42

Member

Jayco437,
Thanks for all your help. I have been looking over the my.css sheet that you made some change. I'm trying to figure out whats on the my.css page thats controlling the image up in the upper right hand corner.

Thanks
.html

 


my.css
.thrColElsHdr #container #sidebar1 img {

}

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;
}

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: 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;
width: inherit;
background-color: #000000;
}

/* Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
*/

.thrColElsHdr #container {
width: 46em;
/

* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
background: #FFFFFF;
margin: 0 auto;


/* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left;

/* this overrides the text-align: center on the body element. */
}

.thrColElsHdr #header {
background: #DDDDDD;
padding: 0 10px;
background-image: url(»spec-works.com/stratamed ··· m1.jpg);
}

.thrColElsHdr #header h1 {
margin: 0;

/* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0;

/* using padding instead of margin will allow you to keep the element away from the edges of the div */
}

.thrColElsHdr #container #footer {
background-color: #BF777A;
}

.thrColElsHdr #sidebar1 {
float: left;
width: 11em;

/* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0;
background-repeat: no-repeat;
background-color: #BF777A;
}

.thrColElsHdr #sidebar2 {
float: right;
width: 11em;

/* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0;

/* top and bottom padding create visual space within this div */
background-color: #BF777A;
}

.thrColElsHdr #sidebar1 h3, .thrColElsHdr #sidebar1 p, .thrColElsHdr #sidebar2 p, .thrColElsHdr #sidebar2 h3 {
margin-left: 10px;

/* the left and right margin should be given to every element that will be placed in the side columns */
margin-right: 10px;
}

/* Tips for mainContent:
1. If you give this #mainContent div a font-size value different than the #sidebar1 div, the margins of the #mainContent div will be based on its font-size and the width of the #sidebar1 div will be based on its font-size. You may wish to adjust the values of these divs.
2. 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.
3. To avoid float drop, you may need to test to determine the approximate maximum image/element size since this layout is based on the user's font sizing combined with the values you set. However, if the user has their browser font size set lower than normal, less space will be available in the #mainContent div than you may see on testing.
4. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs that may occur.
*/

.thrColElsHdr #mainContent {
margin: 0 12em 0 12em;
/

* the right margin can be given in ems or pixels. It creates the space down the right side of the page. */
}

.thrColElsHdr #footer {
padding: 0 10px;
background-color: #EBEBEB;
}

.thrColElsHdr #footer p {
margin: 0;

/* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0;

/* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
background-color: #BA777A;
}

/* 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;
line-height: 0px;
}

.thrColElsHdr #container #header h1 {
font-size: 36px;
}

.thrColElsHdr {

}

#apDiv1 {
position: absolute;
width: 200px;
height: 115px;
z-index: 1;
left: 608px;
top: 106px;
}

#apDiv2 {
position: absolute;
width: 111px;
height: 103px;
z-index: 1;
left: 289px;
top: 7px;
}

#apDiv3 {
position: absolute;
width: 200px;
height: 115px;
z-index: 1;
left: 822px;
top: 0px;
}

#apDiv4 {
position: absolute;
width: 68px;
height: 51px;
z-index: 2;
}

#apDiv5 {
position: absolute;
width: 149px;
height: 219px;
z-index: 2;
left: 96px;
top: 173px;
}

#apDiv6 {
position: absolute;
width: 200px;
height: 115px;
z-index: 2;
left: 57px;
top: 190px;
}

#apDiv7 {
position: absolute;
width: 159px;
height: 605px;
z-index: 2;
left: 69px;
top: 179px;
}

.thrColElsHdr #container #sidebar1 img {

}

#apDiv8 {
position: absolute;
width: 104px;
height: 415px;
z-index: 2;
left: 119px;
top: 175px;
}

#apDiv9 {
position: absolute;
width: 200px;
height: 115px;
z-index: 2;
left: 65px;
top: 167px;
}

.style1 {
font-size: x-large
}

.thrColElsHdr #container #sidebar1 .style1 img {
background-color: #ECE9D8;
text-align: justify;
}

#header {
height: 122px;
overflow: visible;
visibility: visible;
z-index: 100;
vertical-align: top;
position: relative;
width: auto;
}
#container{
background: #fff;
}
#header img {
overflow: visible;
z-index: 200;
top: 0px;
right: 5px;
clear: both;
float: right;
position: absolute;
}
#sidebar2, #sidebar1{
margin-top: 20px;
}
#sidebar2 h3{
margin-top: 70px;
}

jayco4376
Premium Member
join:2001-08-11
Lincoln, NE

jayco4376

Premium Member

"#header img" is whats floating the image.

That grabs all img elements underneath the element with an ID of header.