Trouble with CSS div column
Just got DW CS3 and having a good time learning the new
features. About to pull my hair out regarding one issue though, and
I have definitely hit the wall, I pretty sure I tried every option,
but maybe I am missing something. Here is the page in question:
http://www.grpg.org/NewDesign
I cannot get the right and left hand columns to just stop
where the main container stops, i.e. the white section, before the
footer. As you can see on the right hand column, if I make the
height 100%, it goes past the footer, and if I make it a fixed
length, like on the left column, it does not extend all the way to
the bottom...I need them both to stretch with the main container,
i.e. the white part. I have tried all the positioning tags,
relative, absolute, etc. and none of them seem to give me what I
want. Please HELP!
The best (i.e., non-javascript) method to make columns look
to be the same
height is to use a faux-column method. Google that....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"SnakEyez02" <[email protected]> wrote in
message
news:g6snvo$6c8$[email protected]..
> Divs do not work like tables, so if you expand 2 divs
down next to each
> other
> they will keep their respective heights unlike tables
which expand. I
> would
> recommend taking a look at the source code of the
following example and
> read
> over the tutorial that accompanies it:
>
>
http://www.projectseven.com/tutorials/css/pvii_columns/col3fluid.htm
> Example
>
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
>
> Project Seven also has some other good tutorials so I'll
just give you
> that
> link for a later time:
>
>
http://www.projectseven.com/tutorials/index.htm
>
>
Similar Messages
-
I am really in trouble with AP Div-How do I fix it on the web?
Hi,
I am really in trouble with my website. I have added some pictures and text on top of Fireworks Image and have published it on the website.
But the concern is, when I zoom in & zoom out, I can see the previous text on the screen and also the picture and texts I have added using Ap Div tag are scattered moving all to the left when I zoom out. Can someone help me how to fix this in one particular place so that it doesn't move when I zoom in or zoom out!!! I am using Adobe Dreamweaver CS3, if this will help.
Appreciate your sincere help on this.
Thanks in advance.Frankly, there's a lot that is wrong with that page:
1. Most of your content is in the images - this means that you will get very poor search engine ranking
2. Your extensive use of absolute positioning for layout - this means that when you enlarge the text size in the browser, you will have overflow problems on the page (for example, the terrible problems at the bottom of the page)
3. You have used tables for layout - this is because of your use of Fireworks to create the HTML
Each of these problems is solvable but none of them are solvable easily without a redesign of the page. A web page should be built from the top down, stacking content containers (i.e., <div>, <section>, <article>, <aside>, etc.) vertically or floating them horizontally or both. These containers would be loaded with the text content of the page, and images would be used only for cosmetic appearance. Using CSS to style/locate the content will allow you to completely move away from tables for layout. Most typical pages can be created without the use of absolute positioning which should be used only for special purposes, not for layout of the page elements. -
Hey guys, I am having trouble with some code. I have nested divs inside of a container dive for the body copy, but I am having trouble with the background of the container div going behind the nested divs. I only have this issue with the background when I go to float the nested divs.
Below is a copy of my html and a copy of my linked css style sheet.
<!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>Welcome to Optimus Lens</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<style type="text/css">
#sector {
background-repeat: no-repeat;
background-position: left;
width: 869px;
margin-top: -51px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
#oag {
width: 574px;
margin-left: 23px;
float: left;
/* [disabled]position: relative; */
#small_col {
width: 279px;
margin-right: 23px;
float: right;
/* [disabled]position: static; */
</style>
</head>
<body onload="MM_preloadImages('images/home_over.jpg','images/our_mission_over.jpg','images/products_over.jpg','images/news_over.jpg','images/order_over.jpg','images/contact_over.jpg')">
<div id="CONTAINER">
<div id="header"><img src="images/header_top.png" width="916" height="39" />
<img src="images/header_logo.jpg" width="916" height="95" />
<img src="images/header_image.jpg" width="916" height="266" />
<img src="images/header_bar.jpg" width="916" height="9" />
</div>
<div id="menuContainer">
<!-- NAVIGATION -->
<ul>
<li>
<img src="images/fold_left_top.png" width="22" height="35" /><img src="images/menu_left.jpg" width="197" height="35" />
</li>
<li>
<div class="menu n1"><a href="index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/home_over.jpg',1)"><img src="images/home_up.jpg" alt="home" name="home" width="66" height="35" border="0" id="home" /></a></div></li>
<li>
<div class="menu n2"><a href="mission.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Our Mission','','images/our_mission_over.jpg',1)"><img src="images/our_mission_up.jpg" alt="Our Mission" name="Our Mission" width="124" height="35" border="0" id="Our Mission" /></a></div></li>
<li>
<div class="menu n3"><a href="products.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Products','','images/products_over.jpg',1)"><img src="images/products_up.jpg" alt="products" name="Products" width="98" height="35" border="0" id="Products" /></a></div></li>
<li>
<div class="menu n4"><a href="news.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('News','','images/news_over.jpg',1)"><img src="images/news_up.jpg" alt="News" name="News" width="77" height="35" border="0" id="News" /></a></div></li>
<li>
<div class="menu n5"><a href="order.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Order','','images/order_over.jpg',1)"><img src="images/order_up.jpg" alt="Order" name="Order" width="77" height="35" border="0" id="Order" /></a></div></li>
<li>
<div class="menu n6"><a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/contact_over.jpg',1)"><img src="images/contact_up.jpg" alt="Contact" name="Contact" width="80" height="35" border="0" id="Contact" /></a></div></li>
<li>
<img src="images/menu_right.jpg" width="197" height="35" /><img src="images/fold_right_top.png" width="22" height="35" /> </li>
</ul>
</div>
<div id="header_bottom"><img src="images/fold_left_bottom.png" width="22" height="38" /><img src="images/header_bottom.jpg" width="916" height="38" /><img src="images/fold_right_bottom.png" width="22" height="38" />
</div>
<div id="bodycopy">
<div id="sector">
<img src="images/home/sector_top.png" width="869" height="341" alt="sector frames" />
</div>
<p> </p>
<div id="oag">
<img src="images/home/oag_join.png" width="574" height="281" alt="save with oag" />
<p> </p>
<img src="images/home/bottom.png" width="574" height="132" />
</div>
<div id="small_col">
<img src="images/home/optimize_small.png" width="279" height="132" />
<p> </p>
<img src="images/home/intuition_small.png" width="279" height="132" />
<p> </p>
<img src="images/home/intuition_small.png" width="279" height="132" />
</div>
</div>
<div id="footer"><img src="images/footer.png" width="916" height="52" />
</div>
</div>
</body>
</html>body {
margin: 0px;
background-image: url(images/background_fade_04.jpg);
background-repeat: repeat-x;
background-position: top;
background-color: #DCDCDC;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
#box1 {
background-image: url(images/bodycopybox_01.png);
background-repeat: no-repeat;
background-position: left;
height: 54px;
width: 869px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
#box2 {
background-image: url(images/bodycopybox_02.png);
background-repeat: repeat-y;
background-position: left;
width: 869px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
.bodycopybox {
padding-right: 40px;
padding-left: 40px;
.bodycopyboxheader {
padding-right: 40px;
padding-left: 40px;
font-weight: bolder;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #21368b;
#box3 {
background-image: url(images/bodycopybox_04.png);
background-repeat: no-repeat;
background-position: left;
height: 31px;
width: 869px;
margin:0 auto;
#box4 {
background-image: url(images/bodycopybox_03.png);
background-repeat: no-repeat;
background-position: left;
height: 31px;
width: 869px;
margin:0 auto;
p {
margin: 0px;
#header_bottom {
width: 960px;
margin:0 auto;
#CONTAINER {
width: 100%;
margin:0 auto;
#header {
width: 916px;
margin:0 auto;
#menuContainer {
width: 960px;
margin:0 auto;
height: 35px;
#menuContainer ul{
list-style:none;
height:35px;
margin:0;
padding:0;
#menuContainer li{
float:left;
height:35px;
margin:0;
padding:0;
#menuContainer li a{
text-align:center;
float:none;
height:35px;
margin:0;
padding:0;
div.menu{position:relative;}
.n1{
width:66px;
float:left;
display:inline-block;
clear:both;
.n2{
width:124px;
float:left;
display:inline-block;
clear:both;
.n3{
width:98px;
float:left;
display:inline-block;
clear:both;
.n4{
width:77px;
float:left;
display:inline-block;
clear:both;
.n5{
width:77px;
float:left;
display:inline-block;
clear:both;
.n6 {
width:80px;
float:left;
display:inline-block;
clear:both;
#bodycopy {
background-color: #FFFFFF;
width: 916px;
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
#footer {
width: 916px;
margin:0 auto;
padding: 0px;Try this:
#CONTAINER {
width: 900px;
margin:0 auto;
background: #FFF;
overflow:hidden; /**float containment**/
/**There is no need for #sector division, you can delete it.**/
#oag {
width: 574px;
float: left;
margin-left: 25px;
#small_col {
width: 279px;
float: right;
margin-right: 25px;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Hello,
I am still having trouble with a web page that I was asked to
redesign. I decided to implement CSS into the page to change the
appearance and navigation, however, the javascript (inherited) that
was used on the page is having problems. I don't not know
javascript, therefore I really can't address that issure right now.
The page is centered in all of the browsers, along with the
header and the container for the tab menu. The issue is the other
containers that have side navigation or the content within the tab
menu container.
My concern is that the page is viewing correctly in IE6 and
Opera but not in Netscape and Firefox. When I preview the page in
the browsers, I get an error message in the status bar "done but
errors on page" (still views correctly in IE & Opera).
Hopefully, this all makes sense and everyone is not off
enjoying pre-4th July celebrations to respond. -Thanks!
css styleDid you post a link to your page?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Iwannaknow2" <[email protected]> wrote in
message
news:e8b5du$9q2$[email protected]..
> Hello,
>
> I am still having trouble with a web page that I was
asked to redesign. I
> decided to implement CSS into the page to change the
appearance and
> navigation,
> however, the javascript (inherited) that was used on the
page is having
> problems. I don't not know javascript, therefore I
really can't address
> that
> issure right now.
>
> The page is centered in all of the browsers, along with
the header and the
> container for the tab menu. The issue is the other
containers that have
> side
> navigation or the content within the tab menu container.
>
> My concern is that the page is viewing correctly in IE6
and Opera but not
> in
> Netscape and Firefox. When I preview the page in the
browsers, I get an
> error
> message in the status bar "done but errors on page"
(still views correctly
> in
> IE & Opera).
>
> Hopefully, this all makes sense and everyone is not off
enjoying pre-4th
> July
> celebrations to respond. -Thanks!
> [email protected]
> -
Hello-
I am working with a built-in Dreamweaver CSS template (2
Column, Fixed, Header & Footer). I am trying to get the two
divs that are nested inside the container div to always be 100%
height of that container div... Just can't seem to get it right.
For example, I have a div named "Container". Then I have two
nested divs, one called "LeftSideBar" (set to float: Left), the
other named "MainContent" (no float). When I go to set the
positioning, I put the height of the interior divs to 100%, but
only the "MainContent" div is adjusting to the height of the
outside "Container" div. The "LeftSideBar" stays the same and does
not grow to fill 100% of the Container.
Below is the code for the three Divs mentioned above... Any
help would be much appreciated.
PS - Here is a link to the page...
Executive.html
Here is the CSS code for the three Divs:Anyone? I would really appreciate the help!
-
Trouble with CSS background scaling
Hi,
Please take a look at the following page I am working on at
the moment
http://www.dpweddingphotography.co.uk/test.html
I am trying to acheive the look of
http://tomwickyphotography.com/index2.php?v=v1
Is this possible in Dreamweaver using CSS/Java? When I reduce
my browsers window and make it really narrow, up pops the white
blank space at the bottom of the page which I am trying to avoid.
You can see on the other site that when it gets to a certain point
it stops scaling down. The same with it vertically also.
Now I know this other site is done in flash but can it be
done in dreamweaver and if so how please?
Thanks
Here's the code I am using for testing:Im not really sure I understand your question, but if you
were to make this
graphic (ContactSheet-001.jpg ) a background image and set it
to repeat,
would that not solve the issue?
"bensmithhull" <[email protected]> wrote in
message
news:gmvntr$icj$[email protected]..
> Hi,
>
> Please take a look at the following page I am working on
at the moment
>
http://www.dpweddingphotography.co.uk/test.html
>
> I am trying to acheive the look of
>
http://tomwickyphotography.com/index2.php?v=v1
>
> Is this possible in Dreamweaver using CSS/Java? When I
reduce my browsers
> window and make it really narrow, up pops the white
blank space at the
> bottom
> of the page which I am trying to avoid. You can see on
the other site that
> when
> it gets to a certain point it stops scaling down. The
same with it
> vertically
> also.
>
> Now I know this other site is done in flash but can it
be done in
> dreamweaver
> and if so how please?
>
> Thanks
>
> Here's the code I am using for testing:
>
>
>
> <html>
> <head>
> <title>BG</title>
> <style type="text/css">
> body {
> /* for IE; otherwise, BG isn't fully stretched */
> margin: 0px;
> }
>
> #bg {
> position: fixed;
> margin: 0px;
> border: 0px;
> padding: 0px;
> left: 0px;
> top: 0px;
> width: 100%;
> height: 100%;
> overflow: hidden;
> z-index: 0;
> }
>
> #bg img {
> width: 100%;
> }
>
>
> #body {
> position: absolute;
> left: 0%;
> top: 0%;
> width: 100%;
> height:100%;
> padding: 0;
> z-index: 10;
> }
>
> li {
> margin-bottom: 2em;
> }
> </style>
> <!--[if IE]>
> <style type="text/css">
> body {
> margin: 0px;
> overflow: hidden;
> }
>
> #body {
> padding: 1em;
> width: 100%;
> height:100%;
> overflow: auto;
> }
> </style>
> <![endif]-->
> </head>
>
> <body>
> <!-- img must be encased in div to keep proper image
aspect ratio -->
> <div id="bg"><img
src="images/ContactSheet-001.jpg"></div>
>
> <div id="body">Put the page's content
here.</div>
> </body>
> </html>
> -
I am having trouble with CSS. Displays right in DW but not in web browser
Hello,
I am having difficultiy getting my webpage to look the way it does in Dreamweaver in a browers (All 5 of them). My problems are with:
- Title Heading Content
- Sidebar
I have two lines in my heading with the name of the organization. I made two rules. Header H1 and a sub header. For some reason while previewing them in a browser there is a gap between the two words. But in DW there is not. I do not want the gaps. How can I fix it?
In a browser the side bar does not come all the way down. There is a small gap between it and the footer. Like the other problem this does not appear in DW only in the browers.
Any help would be appreciated! I am still learning CSS.
I believe these are the only two files you need to look at.
Thanks for the help!Also how can you see if your ISP offers the free web server space?
Contact your internet service provider (ISP). Often this is your telephone or cable broadband provider too. If not, there are many free or very low cost remote server hosts around. Do a Google search.
I did do the validator and it told me I was fine. I did not do a CSS one though.
Good. So we know it's not an HTML error. Get the FF Web Developer Toolbar. It permits you to edit CSS in your browser to see how changes effect the layout plus a lot of other cool stuff.
Sorry I'm still new to all of this.
Don't fret, Tim. We all started in the same place. You'll catch on soon enough.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb -
Help with css 3 column layout with background
So I'm really not much of a web designer and usually deal in
print but a friend wanted help with her site so I'm taking a crash
course in css. so I was wondering if anyone a little more web savvy
than I can spot why my sites background Is sliding around.
this is the site as it
stands
this is the
main css i found a site to generate the codes to get around browser
specific glitches
what
I see in Safari
what
i see in firefox
what
background should look like
any help would be greatly appreciated thanksPeter Llamas posted in macromedia.dreamweaver:
> So I'm really not much of a web designer and usually
deal in print
> but a friend wanted help with her site so I'm taking a
crash
> course in css. so I was wondering if anyone a little
more web
> savvy than I can spot why my sites background Is sliding
around.
>
http://whiskeylemonade.x10hosting.com
I have no idea what you mean by "sliding around", but could
it have
something to do with your missing old_break.css file?
http://whiskeylemonade.x10hosting.com/css/old_break.css
HTTP/1.x 404 Not Found
Mark A. Boyd
Keep-On-Learnin' :) -
UPDATED: Trouble with duplicate div tag...
I am working on validating the code for my blog now as I
think that might solve some of the issues I am having. I was able
to clear out all of the xhtml errors except for one... a duplicate
sidebar div tag. One of them is at the bottom of the header file
and the other is at the top of the sidebar file.
My first thought was just to delete one of them so I tried
that and it validated. Problem is that it screwed up the layout on
my pages in Safari and Firefox when you do a search or look at any
of the archives, etc.
So I deleted the other one and it was worse.
I think this issue is what is making my search results and
archive results load below the sidebar... so it obviously needs to
be fixed, but Im not sure how.
The page is at
http://www.babybumps.net/blog
and the code is attached.
Any thoughts?Try leaving the duplicate tag in, but renaming it to
something that is not a
duplicate first.
If that doesn't work, then we will have to take a closer look
at your code
and particularly your floated elements.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"ArtsyAndi" <[email protected]> wrote in
message
news:g01mke$6cr$[email protected]..
> Ok... I deleted the duplicate tag on the top of the
sidebar, then deleted
> the
> close div tag at the bottom of that file and the code
now validates.
>
> However, it didn't solve my issue with the content
loading below the
> sidebar
> when you do a search or view archives in safari or
firefox.
>
> Any ideas?
> -
Trouble with css borders- won't show in browser
When I link my external style sheet, my borders work when I preview them in ie, but when I put my site (including the external style sheet) I cannot see the borders. My borders are around tables and inside tables and around images. In some docs, the css border will show if I attach it to the doc, but if I make the css an external style sheet, it won't work. Any suggestions?
Thank You!BossDJ is just asking for a link to your page. Do you have it uploaded anywhere? Even if it's not a good looking page, it might be the easiest way for you to get help.
From what you say, I would guess the problem might be the way you are linking to your external style sheet.
Try looking in the head of your document and copy the code for that into the forum post.
<link href="../css/contact.css" rel="stylesheet" type="text/css" media="all" />
That's an example of a link to a style sheet in one of my pages. It's the red part that might be going wrong for you.
Martin -
Having trouble with CSS Properties panel
copying all from a button (example). Many properties such as gradient don't always seem to be shown in the properties and therefor not carried across to the external (DW) page? What am I doing wrong? No problem modifying CSS but shouldn't it be there?
In fact if I don't put in a border to the button only the dimensions seem to be there?The .tif file format isn't generally recommended for web use; it's intended more for print. Historically, some browsers haven't supported the format, if I recall correctly, though many of them may do so now. (Just checked Firefox and Safari, and both seem to display the format just fine.)
It could be that Dreamweaver doesn't recognize the .tif format. (I'm a little lazy to test this theory at the moment, but it seems quite likely.) Here's one rather old thread on this topic: http://forums.adobe.com/thread/26977
Incidentally, this is straying from the topic of your original post and would have been better posted as a new discussion. -
HT2506 Trouble with Annotating by Column
I'm trying to annotate (highlight) a column of text that's in a grid in a PDF file. I can select the column using the option button, but when I choose to "highlight" it, it reverts to text that's highlighted by whole lines (NOT a column). It took me a while to learn about using the option button to be able to SELECT a column of text, so maybe this just involves another "trick" I haven't learned yet.
I'm assuming that I should be able to annotate whatever I have highlighted. If this is correct, how do I do this?You can try something like this example:
SQL> select decode(gr,1,dname,null) dname, ename, job
2 from (
3 select count(1), d.dname,e.ename,e.job, grouping(e.ename) gr
4 from dept d, emp e
5 where d.deptno = e.deptno
6 group by grouping sets (d.dname, (d.dname, e.ename, e.job))
7 order by d.dname,gr desc
8 )
9 /
DNAME ENAME JOB
ACCOUNTING
KING PRESIDENT
CLARK MANAGER
MILLER CLERK
RESEARCH
FORD ANALYST
ADAMS CLERK
JONES MANAGER
SMITH CLERK
SCOTT ANALYST
SALES
WARD SALESMAN
ALLEN SALESMAN
BLAKE MANAGER
JAMES CLERK
MARTIN SALESMAN
TURNER SALESMAN
17 rows selected.Rgds. -
Trouble with spacing of divs vertically
Hi all,
I am having trouble with CSS and vertically stacking my divs, In the following code there are a number of identical divs and I want them to stack one upon the other like in a list. At the moment I need to hit returns after each div to get below the one above and it puts way too much room in between each div doing this. I am at a loss how to do set the amount of spcae between them and also to make one go directly below the other.
Any and all help greatly appreciated
Thanks Rick
<bodystyle="margin:0; padding:0;">
<div class="logo">
<p><img src="images/spinlogonewsml.jpg" alt="Spin City Logo" border="0" style="position: absolute; top: 10px; left: 500px; /></p>
<p> </p>
<p> </p>
</div>
<div class=main">
<div class="imagebutton" id="left"><img src="images/img_16_n.png" width="40" height="40" alt="left button" /></div>
<div class="help">Rotate the Object or Panorama left one increment.</div>
<p> </p>
<div class="imagebutton" id="right"><img src="images/img_17_n.png" width="40" height="40" alt="Right Button" /></div>
<div class="help">Rotate the Object or Panorama right one increment.</div>
<p> </p>
<div class="imagebutton" id="Plus"><img src="images/img_18_n.png" width="40" height="40" alt="Plus Button" /></div>
<div class="help">Zoom into the image a step at a time.</div>
<p> </p>
<div class="imagebutton" id="minus"><img src="images/img_19_n.png" width="40" height="40" alt="Minus Button" /></div>
<div class="help">Zoom out of the image a step at a time.</div>
<p> </p>
<div class="imagebutton" id="AutoRotate"><img src="images/img_20_n.png" width="40" height="40" alt="Auto Rotate Button" /></div>
<div class="help">Starts or stops auto rotation of the Object or Panorama.</div>
<p> </p>
<div class="imagebutton" id="DefaultView"><img src="images/img_23_n.png" width="40" height="40" alt="Default Vew Button" /></div>
<div class="help">Resets the Object or Panorama to it's starting position.</div>
<p> </p>
<div class="imagebutton" id="RotateMode"><img src="images/img_25_n.png" width="40" height="40" alt="RotateMode" /></div>
<div class="help">
Sets the mouse interactive mode to 'Rotate' allows for rotating the Object when zoomed in, toggles with 'Move' button below.
</div>
<p> </p>
<div class="imagebutton" id="MoveMode"><img src="images/img_24_n.png" width="40" height="40" alt="Move Mode Button" /></div>
<div class="help">Sets the mouse interactive mode to 'Move' allows for dragging the Object when zoomed in, toggles with 'Rotate' button above.</div>
<p> </p>
<div class="imagebutton" id="SoundButton"><img src="images/img_28_n.png" width="40" height="40" alt="Sound Button" /></div>
<div class="help">Use this button to mute the sounds played by the interactive presentation.</div>
<p> </p>
</div>
</body>
</html>Way too many divisions. All you need is one main division or possibly two. The rest is easily contained inside <p> tags.
Copy and paste this into a new HTML document.
<!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>Vr help File</title>
<style type="text/css">
/**zero out browser default settings on everything**/
* {margin:0; padding:0; line-height: 100%; font-size: 100%;}
p {
line-height: 1em;
font-size: 16px;
margin-bottom: 12px; /**space between paragraphs**/
#logo {
float:right;
width: 35%;
margin-right: 150px /**adjust as req'd**/
</style>
</head>
<body>
<div id="logo">
<img src="http://www.spincityimaging.com/images/spinlogonewsml.jpg" width="74" height="53" class="logo" />
<!--end logo --></div>
<p><img src="http://www.spincityimaging.com/images/img_16_n.png" width="40" height="40" alt="left button" />Rotate the Object or Panorama left one increment.</p>
<p><img src="http://www.spincityimaging.com/images/img_17_n.png" width="40" height="40" alt="Right Button" />Rotate the Object or Panorama right one increment.</p>
<p><img src="http://www.spincityimaging.com/images/img_18_n.png" width="40" height="40" alt="Plus Button" />Zoom into the image a step at a time.</p>
<p><img src="http://www.spincityimaging.com/images/img_19_n.png" width="40" height="40" alt="Minus Button" />Zoom out of the image a step at a time.</p>
<p><img src="http://www.spincityimaging.com/images/img_20_n.png" width="40" height="40" alt="Auto Rotate Button" />Starts or stops auto rotation of the Object or Panorama.</p>
<p><img src="http://www.spincityimaging.com/images/img_23_n.png" width="40" height="40" alt="Default Vew Button" />Resets the Object or Panorama to it's starting position.</p>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Having Trouble with Faux Columns
I've reviewed several websites that have code for Faux Columns but I still can't get my sidebar to stretch along the length of the page. Here's my code:
<!--
body
.twoColLiqLtHdr #container
.twoColLiqLtHdr #header
.twoColLiqLtHdr #header h1
/* 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.
.twoColLiqLtHdr #sidebar1
.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {
margin-left: 5px; /* the left and right margin should be given to every element that will be placed in the side columns */
margin-right: 5px;
/* 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.
.twoColLiqLtHdr #mainContent
.twoColLiqLtHdr #footer
.twoColLiqLtHdr #footer p
/* 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;
-->
</style><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
.twoColLiqLtHdr #mainContent
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
<!--
h1
h2
-->
[Item 1 | #]
[Item 1.1 | #]
[Item 1.2 | #]
[Item 1.3 | #]
[Item 2 | #]
[Item 3 | #]
[Item 3.1 | #]
[Item 3.1.1 | #]
[Item 3.1.2 | #]
[Item 3.2 | #]
[Item 3.3 | #]
[Item 4 | #]
Special
PURPOSE
This guide does not replace policy, procedures, or training
Home Page
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", );
//-->
</script>
</body>
</html>Faux Columns will not work in a Fluid Layout (responsive web design)
Fortunately PVII have written a nifty little JS-file that will allow you to do that. See the example here http://www.projectseven.com/tutorials/css/pvii_columns/ -
Trouble with IE8 placing div in the right spot. Other browsers work fine.
My layout is working in all browsers (Firefox, Safari, Chrome, Opera, IE6 & 7) but not in IE8 or 9beta.
The trouble is with a div containing text not displaying below a "lightbox gallery". In IE8 the text div jumps up and appears behind the gallery.
I've tried using negative pixel definitions in the css (margin-top, margin-bottom) and other simple tricks to no avail. This site is still in development but I do have a few sample pages online. Here's a link to one. http://www.redhousepottery.com/chimerasite/hanks.html
I have a feeling a css hack is all I need to fix this. I don't have enough practice at this yet. Any help is appreciated!<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Add the above to your meta code to emulate 7.0 and probably fix the problem, at least until you can find a fix in IE8.
Best,
DR
Maybe you are looking for
-
Dear All, time evaluation is throwing an error msg "No entry in table T001P for key" for only one employee in the time evaluation display log. Its happening in the initialization part in time evaluation. for example, If i run the time evaluation for
-
Hmm. Last night I took the QT upgrade and somehow during the 'optimization' process after it installed, a whole bunch of the unix files went walking - over a dozen files in the /sbin/ folder, including the mach_init (oh joys!). Thankfully I have a se
-
Is there any way to copy music from your ipod to your itunes library
i have a relative that gave me their ipod and i want to save the music from the ipod to my itunes library how can i do that without deleting the music from the ipod?
-
How to get 0PERS_SAREA description in cube
Hi I have a char 0PERS_SAREA (Personnel Subarea) of length 4 and TYPE:CHAR . When Click On Its Maintain Masterdata Button Its shows me 3 columns 1) Persnonnel Area , 2) Personnel SUBAREA & 3)Short descreption of Personnel Subarea. When I Moved thi
-
MOS Credentials setup in Grid Control 11g Error
Hi All I have a 11g Grid Control Environment setup on a W2K8 R1 32 bit with a 11g db. Everything works ok apart from the patching setup. When I setup the proxy settings and test the patch url it works, but says need to setup MOS When I do this i get