Help w/ CSS & Layers
Hi, Thank you for taking the time to read this. I am helping
design a site for a small non profit boating club. When I view the
site in IE is looks fine, but in Firefox, all the layers are moved.
I read the Apptools Page Layout 101, and think that this describes
my problem. However, I am still confused how to fix it. I have been
reading through all my dreamweaver books as well as class notes but
still don't get it. ( do I change the css code in code view or
through the css panel on the right?)
If anyone could please give me an example of the CSS code
that I need to use I would be very grateful.
http://www.a-y.us/new.html
Thank you so much
G. Hopkins
Hi, Thank you for taking the time to read this. I am helping
design a site for a small non profit boating club. When I view the
site in IE is looks fine, but in Firefox, all the layers are moved.
I read the Apptools Page Layout 101, and think that this describes
my problem. However, I am still confused how to fix it. I have been
reading through all my dreamweaver books as well as class notes but
still don't get it. ( do I change the css code in code view or
through the css panel on the right?)
If anyone could please give me an example of the CSS code
that I need to use I would be very grateful.
http://www.a-y.us/new.html
Thank you so much
G. Hopkins
Similar Messages
-
Hello I have created a template that has a css layer.
The problem being that the layer moves around when viewed in
different web browsers. In Dreamweaver the pink box is centered in
the white box and the text is centered. But when I preview it the
pink box moves around.
I have positioned the box using absolute values!
So I thought it would be where it views in Dreamweaver but it
is not!
Here is the link to the example I have uploaded.
http://www.chicnunique.ca/moving_Box.asp
If anyone can help that would be great, Thanks.
PS I am just learning!
Thanks,
Darren> Hope that makes sense.
Sorry - no.
Can you make a drawing?
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
==================
"weavingdream" <[email protected]> wrote in
message
news:fo6cvb$jt0$[email protected]..
> Ok so what i am trying to do is make a box say the top
half red the bottom
> half
> blue and have text in each box and then have a picture
that over lays the
> red
> and blue box to the side beside the words! Hope that
makes sense. I
> thought
> using css layers would be a good idea because you can
stack them on top of
> one
> another. Is there a better way to do this? thanks,
Darren
> -
Alternative to Save for Web/Export as CSS Layers?
I'm am SO DEVASTATED that CS6 got rid of the option to save as CSS layers in Save for Web. I just updated from 5 to 6 and now I'm looking for an alternative but am having no luck. I've tried some scripts I've found online but none of them work the way I need, or at all.
I do animation in AI where each layer is a frame on the animation. In CS5 I could Save for Web and check the Export as CSS Layers box. This would export all the layers in my AI file to pngs, where each layer is it's own png file, in one folder. I could then import them as an image sequence in Photoshop and turn layers on and off with each frame to create my animation.
I tried exporting my AI file to a PSD file with maximum editability but the more complicated the animation (meaning the more layers and the more objects on each layer) it would start flattening layers without warning. Not to mention the rendering time just opening the file in Photoshop and then trying to save it there once I had created all my frames. Photoshop froze on me 6 times this morning while I was trying things out.
I'm desperate for a simple way to do the CSS layer trick. If I can't find one, I'm going to have to go back to CS5 permanently, or until I can find a solution.here you go, let me know if it cuts it.
#target Illustrator
// script.name = exportLayersAsCSS_PNGs.jsx;
// script.description = mimics the Save for Web, export images as CSS Layers (images only);
// script.requirements = an open document; tested with CS5 on Windows.
// script.parent = carlos canto // 05/24/13; All rights reseved
// script.elegant = false;
* export layers as PNG
* @author Niels Bosma
// Adapted to export images as CSS Layers by CarlosCanto
if (app.documents.length>0) {
main();
else alert('Cancelled by user');
function main() {
var document = app.activeDocument;
var afile = document.fullName;
var filename = afile.name.split('.')[0];
var folder = afile.parent.selectDlg("Export as CSS Layers (images only)...");
if(folder != null)
var activeABidx = document.artboards.getActiveArtboardIndex();
var activeAB = document.artboards[activeABidx]; // get active AB
var abBounds = activeAB.artboardRect;// left, top, right, bottom
showAllLayers();
var docBounds = document.visibleBounds;
activeAB.artboardRect = docBounds;
var options = new ExportOptionsPNG24();
options.antiAliasing = true;
options.transparency = true;
options.artBoardClipping = true;
var n = document.layers.length;
hideAllLayers ();
for(var i=0; i<n; ++i)
//hideAllLayers();
var layer = document.layers[i];
layer.visible = true;
var file = new File(folder.fsName + '/' +filename+ '-' + i+".png");
document.exportFile(file,ExportType.PNG24,options);
layer.visible = false;
showAllLayers();
activeAB.artboardRect = abBounds;
function hideAllLayers()
forEach(document.layers, function(layer) {
layer.visible = false;
function showAllLayers()
forEach(document.layers, function(layer) {
layer.visible = true;
function forEach(collection, fn)
var n = collection.length;
for(var i=0; i<n; ++i)
fn(collection[i]); -
Rendering of Css Layers OUT on DW for some strange reason
For some reason the rendering of the Layers in DW has blow
out. I don't think anything changed in the css and it was
displaying correctly. I did DUMP my config file for DW to see if it
would resolve, but no.
See this screen shot:
Text
Someone said this is a known issue but I searched extensively
here on adobe and I didnt' see it. Using the keywords Render DW css
layers.
Any advice is appreciated.What does the page look like when viewed in a browser?
Which version of DW are you using ?
If the site is messed up when viewing in a browser, it may be
best to link
to a live example of the page, that way people can check the
code to see if
there's anything wrong that may be causing the issue.
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
Spry Widget Examples
http://www.dreamweaverresources.com/spry-widgets/
~ Forum Posting Guidelines ~
http://www.adobe.com/support/forums/guidelines.html
"manchomark" <[email protected]> wrote in
message
news:fk9hq0$2r9$[email protected]..
> For some reason the rendering of the Layers in DW has
blow out. I don't
> think
> anything changed in the css and it was displaying
correctly. I did DUMP my
> config file for DW to see if it would resolve, but no.
>
> See this screen shot:
http://www.ntfb.org/dev/problem-layers.gif
>
> Someone said this is a known issue but I searched
extensively here on
> adobe
> and I didnt' see it. Using the keywords Render DW css
layers.
>
> Any advice is appreciated.
>
> -
Photoshop Help | Copy CSS from layers | Creative Cloud
This question was posted in response to the following article: http://helpx.adobe.com/photoshop/using/copy-css-shape-or-text.html
benjamin_JFB wrote:
There is no way to have this option without creative cloud? This feature has nothing to do with the cloud. Why are photoshop versions fracturing in this manner?
Dont' be surprised. It's been Adobe's strategy since the Cloud was launched last year.
The extra Cloud-only features are designed to make the Cloud more and more attractive. The new features have little or no connection to Cloud functionality itself, they're just desirable new features designed to add value to the Cloud apps and make perpetual licensed customers want them.(Seems to be working).
Adobe has said that Cloud-only features in the CS6 cycle will be introduced into the next paid-for perpetual license upgrade (probably CS7) - but Cloud members will always get early access to them.
Same applies to new Cloud-only features introduced in other Cloud apps such as Illustrator and Dreamweaver. -
So it took me a wile and some playing around to make the page
centered. But I got what I needed. I put every thing inside a
#wrapper to get it centered but I needed some elements to stretch
out, so there width is 100%. And them being inside the #wrapper
stop that. So I took the div's out of the #wrapper and put them
back in after the </wrapper> line. That work great. In
preview. So I upload and to my shock it looks very wrong live. The
layer order is all out of whack. So I played with the z-index to
make sure they were underneath everything they needed to be. And
there was no change. Can some on have a look for me?>
http://winterslippers.com
there are 4 div's outside the #wrapper. You can see them way down
at the bottom of the code.
Thanks all!>>work's fine in Firefox the problem lies in good old
IE7
Not here. It's a disaster in FF2 & IE6. I don't think
this site can be
fixed. I can't believe the approach taken. The homepage is
not huge it's
humongous. Browser has to be 1300+ pixels wide to see the
entire page and it
doesn't create a horizontal scroll bar. Maybe some of this is
due to the 168
code errors.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwinterslippers.com%2FLibrary%2Fin dex.html
As to size, the page is 1.5MB compared to a preferred target
size of 40KB.
IOW 40 times too big. You're selling consumer products.
Consumers are likely
to be using dial-up. On dial-up this page will take 5+
minutes to load.
Check out
http://www.sitepoint.com/books/.
I think their books are great.
Buy a few, take a few weeks to study & learn and then
start over.
Remember the 1st Rule of Holes: When you find yourself in
one, stop digging.
Sorry...
Walt
"satrop" <[email protected]> wrote in
message
news:f4v5sb$3mp$[email protected]..
>I should say it work's fine in Firefox the problem lies
in good old IE7 -
Dreamweaver 8 help with aligning Layers
Hi all
I am completely stuck I want my layer AP (tag) to display in the center of my browser and any browser it displays in?????
I need help please I don’t know how to set this to the center using CSS
ThanksFantastic
Thanks a million for that, tried at diff screen resolutions and bang in the centre
only thing is i want the page to not have a scroll down the right hand side
I was trying to backspace the page back up as it only needs to be around 600 in height as this is the layer height??
Any ideas
Really appreciate the help BTW
Code below
<!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=iso-8859-1" />
<title>home</title>
<link href="background.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#Layer1 #Layer2 {
background-image: url(Images/460.gif);
-->
</style>
<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>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#Layer2 {
width:602px;
height:600px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 152px;
margin-left: auto;
.style2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
-->
</style>
</head>
<body class="background" id="Layer1" onload="MM_preloadImages('Images/Year_7_button_over.png','Images/Year_8_button_over.png', 'Images/OCR_Over.png')">
<div id="Layer2">
<div align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('YEAR7','','Images/Year_7_button_over.png',1)"><img src="Images/Year_7_button.png" alt="YEAR&" name="YEAR7" width="200" height="80" border="0" id="YEAR7" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Year8','','Images/Year_8_button_over.png',1)"><img src="Images/Year_8_button.png" alt="Year8" name="Year8" width="200" height="80" border="0" id="Year8" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('OCR','','Images/OCR_Over.png',1)"><img src="Images/OCR.png" alt="OCR" name="OCR" width="200" height="80" border="0" id="OCR" /></a></div>
<p> </p>
<p align="center" class="style2">Welcome to ICT </p>
<p align="center" class="style2">Please click on the button that you need </p>
<p align="center" class="style2">If you are in year 7 click the year 7 button </p>
<p align="center" class="style2">If you are in year 8 click the year 8 button </p>
<p align="center" class="style2">If you are working on OCR units click the OCR button</p>
<p align="center" class="style2">SIMPLES!</p>
</div>
</body>
</html> -
I am working on the porfolio section of my web, and I am
using the "show hide" function with layers to rollover and show
larger image. The layer in dreamweaver moves when you resizing the
screen. Is there a way of fixing that?These two links are not helping your cause -
<link rel="stylesheet"
href="file:///E|/webcentered/Templates/aboutus.css"
type="text/css">
<link rel="stylesheet"
href="Artistic%20Media%20Graphic%20Design_files/aboutus.css"
type="text/css">
The first one is broken, since it points to a file on your
hard drive. The
second one is liable to break because you have used spaces in
the
file/pathnames (which you should not do for the web).
The root of your problem is this -
<td>
<div id="sienna" style="position:absolute; width:242px;
height:302px; z-index:1; left: 349px; top: 357px; visibility:
visible"><img
src="Portfolio/images/sienna_04.jpg" width="245"
height="309"></div>
You must never put absolutely positioned elements directly
into table cells.
For your penance, you will visit this link and read -
http://www.great-web-sights.com/g_layerlaws.asp
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
==================
"artisticmedia" <[email protected]> wrote in
message
news:e4bfg2$4vd$[email protected]..
> sorry...try this link. I am out of control!
> <a target=_blank class=ftalternatingbarlinklarge
> href="
http://www.artisticmedia.org/newportfolio">http://www.artisticmedia.org/newportfolio</a> -
Hi,
I am having a time trying to get the Dreamweaver rollover
function with layers to work in creating webpage menus that you can
rollover and hyperlink to. The page I am working on is at
http://anne.swva.net/pcof/ ,
and if you scroll over Worship you can see what I mean...on rollout
it disappears without any time to select a hyperlink subpage (not
linked yet.)
An example of the page I need it to work like is
http://www.greenadvantage.org
, and any of the top bar menu items there.
I am working in Dreamweaver 4, and this is for a non profit,
a local church. Any help is appreciated!
- AVscorched earth wrote:
> Do you have a suggestion on what menu system would work
best for this?
Hi,
Note the show/hides on the images above and below the Worship
image,
note too the new layer ('closer' - you might want to give it
a temporary
background colour so that you can better see what is
happening - remove
the background colour when you have an understanding) which
also has
show/hides attached - anyway.....
try this - in code view replace everything with this....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>index_draft w slice.jpg</title>
<meta http-equiv="Content-Type" content="text/html;">
<!-- Fireworks 4.0 Dreamweaver 4.0 target. Created Mon Jan
28 22:08:13
GMT-0500 (Eastern Standard Time) 2008-->
<script language="JavaScript">
<!--
<!--
function MM_reloadPage(init) { //reloads the window if Nav4
resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW ||
innerHeight!=document.MM_pgH)
location.reload();
MM_reloadPage(true);
// -->
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
[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n);
return x;
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if
((obj=MM_findObj(args
))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style;
v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
//-->
</script>
<style type="text/css">
<!--
#closer {
position:absolute;
width:300px;
height:400px;
z-index:1;
top: 250px;
left: 145px;
visibility: hidden;
-->
</style>
</head>
<body bgcolor="#ffffff">
<div id="Worship" style="position: absolute; width: 150px;
height: 94px;
z-index: 2; left: 143px; top: 310px; visibility:
hidden;">
<table bgcolor="#312e4b" border="1" width="100%">
<tr>
<td bordercolor="#FFFFFF"><div
align="center"><font color="#ffffff"
face="Poor Richard"
size="4">Ministry</font></div></td>
</tr>
<tr>
<td bordercolor="#FFFFFF"><div
align="center"><font color="#ffffff"
face="Poor Richard"
size="4">Ministry</font></div></td>
</tr>
<tr>
<td bordercolor="#FFFFFF"><div
align="center"><font color="#ffffff"
face="Poor Richard"
size="4">Ministry</font></div></td>
</tr>
<tr>
<td bordercolor="#FFFFFF"><div
align="center"><font color="#ffffff"
face="Poor Richard"
size="4">Ministry</font></div></td>
</tr>
</table>
</div>
<table border="0" cellpadding="0" cellspacing="0"
width="800">
<!-- fwtable fwsrc="webpage start_W SLICE.png"
fwbase="index_draft w
slice.jpg" fwstyle="Dreamweaver" fwdocid = "742308039"
fwnested="0" -->
<tr>
<td><img src="spacer.gif" border="0" height="1"
width="118"></td>
<td><img src="spacer.gif" border="0" height="1"
width="41"></td>
<td><img src="spacer.gif" border="0" height="1"
width="469"></td>
<td><img src="spacer.gif" border="0" height="1"
width="91"></td>
<td><img src="spacer.gif" border="0" height="1"
width="81"></td>
<td><img src="spacer.gif" border="0" height="1"
width="1"></td>
</tr>
<tr>
<td colspan="5"><img name="index_draftwslice_r1_c1"
src="index_draft@20w@20slice_r1_c1.jpg" border="0"
height="164"
width="800"></td>
<td><img src="spacer.gif" border="0" height="164"
width="1"></td>
</tr>
<tr>
<td colspan="3"><img name="index_draftwslice_r2_c1"
src="index_draft@20w@20slice_r2_c1.jpg" border="0"
height="31"
width="628"></td>
<td><img name="index_draftwslice_r2_c4"
src="index_draft@20w@20slice_r2_c4.jpg" border="0"
height="31"
width="91"></td>
<td><img name="index_draftwslice_r2_c5"
src="index_draft@20w@20slice_r2_c5.jpg" border="0"
height="31"
width="81"></td>
<td><img src="spacer.gif" border="0" height="31"
width="1"></td>
</tr>
<tr>
<td><div id="closer"
onMouseOver="MM_showHideLayers('Worship','','hide','closer','','hide')"></div>
<img name="index_draftwslice_r3_c1"
src="index_draft@20w@20slice_r3_c1.jpg" border="0"
height="28"
width="118"></td>
<td rowspan="9"><img name="index_draftwslice_r3_c2"
src="index_draft@20w@20slice_r3_c2.jpg" border="0"
height="505"
width="41"></td>
<td rowspan="9"> </td>
<td rowspan="3" colspan="2"> </td>
<td><img src="spacer.gif" border="0" height="28"
width="1"></td>
</tr>
<tr>
<td><img src="index_draft@20w@20slice_r4_c1.jpg"
name="index_draftwslice_r4_c1" width="118" height="76"
border="0"
onMouseOver="MM_showHideLayers('Worship','','hide','closer','','hide')"></td>
<td><img src="spacer.gif" border="0" height="76"
width="1"></td>
</tr>
<tr>
<td rowspan="2"><a href="javascript:;"
onMouseOver="MM_showHideLayers('Worship','','show','closer','','show')"><img
name="index_draftwslice_r5_c1"
src="index_draft@20w@20slice_r5_c1.jpg"
border="0" height="69" width="118"></a></td>
<td><img src="spacer.gif" border="0" height="29"
width="1"></td>
</tr>
<tr>
<td rowspan="3" colspan="2"> </td>
<td><img src="spacer.gif" border="0" height="40"
width="1"></td>
</tr>
<tr>
<td><img src="index_draft@20w@20slice_r7_c1.jpg"
name="index_draftwslice_r7_c1" width="118" height="71"
border="0"
onMouseOver="MM_showHideLayers('Worship','','hide','closer','','hide')"></td>
<td><img src="spacer.gif" border="0" height="71"
width="1"></td>
</tr>
<tr>
<td rowspan="2"><img name="index_draftwslice_r8_c1"
src="index_draft@20w@20slice_r8_c1.jpg" border="0"
height="72"
width="118"></td>
<td><img src="spacer.gif" border="0" height="46"
width="1"></td>
</tr>
<tr>
<td rowspan="3" colspan="2"> </td>
<td><img src="spacer.gif" border="0" height="26"
width="1"></td>
</tr>
<tr>
<td><img name="index_draftwslice_r10_c1"
src="index_draft@20w@20slice_r10_c1.jpg" border="0"
height="62"
width="118"></td>
<td><img src="spacer.gif" border="0" height="62"
width="1"></td>
</tr>
<tr>
<td><img name="index_draftwslice_r11_c1"
src="index_draft@20w@20slice_r11_c1.jpg" border="0"
height="127"
width="118"></td>
<td><img src="spacer.gif" border="0" height="127"
width="1"></td>
</tr>
</table>
</body>
</html>
HTH
chin chin
Sinclair -
I'm new to CSS as a design element. I'm trying to learn to
layout my pages using some CSS. I've coded the whole page as to how
I want it to look and work, and so for so good. The last thing I
need (and maybe it should have been the first thing I did) is to
create a white border. But not a simple white border. It's one that
will look like [ ] around all the content. I actually want the
white border to be behind some of the images. Do I have to use
layers for this? I am attaching the code of the page and my
existing CSS. I hope this is enough info without seeing the page
itself.
Thanks
ps: please comment on any other improvements I can make to
the code.The page design itself looks a bit overly complicated.
Do you have an url?
From what I can see by putting your code into DW (i dont'
have your images)
it looks like you only need one table, which would help you a
ton.
Do you have this page published?
For your images, if you want to have a border "behind" them,
you can simply
put
.ClassImageIsIn img {border: 5px solid #fc0;}
or, to put them around all images in your site
img {border: 5px solid #fc0;}
"dawndawg" <[email protected]> wrote in
message
news:[email protected]...
> I'm new to CSS as a design element. I'm trying to learn
to layout my pages
> using some CSS. I've coded the whole page as to how I
want it to look and
> work,
> and so for so good. The last thing I need (and maybe it
should have been
> the
> first thing I did) is to create a white border. But not
a simple white
> border.
> It's one that will look like around all the content. I
actually want the
> white
> border to be behind some of the images. Do I have to use
layers for this?
> I am
> attaching the code of the page and my existing CSS. I
hope this is enough
> info
> without seeing the page itself.
>
> Thanks
>
> ps: please comment on any other improvements I can make
to the code.
>
> .text {
> font-family: Helvetica, Verdana, Arial, sans-serif;
> font-size: 9px;
> font-weight: normal;
> line-height: 18px;
> color: #FFFFFF;
> }
> .thumb {
> border-top: 10px;
> border-bottom: 14px;
> color: none;
> }
> .description {
> font-family: Helvetica, Verdana, Arial, sans-serif;
> font-size: 9px;
> font-weight: normal;
> line-height: 18px;
> color: #FFFFFF;
> padding: 15px;
> }
> .main {
> z-index: 5;
> }
> .border {
> z-index: 10;
> position: absolute;
> top: 10px;
> left: 120px;
> border: 1px #FFF;
> height: 588px;
> }
>
>
>
> <!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=ISO-8859-1" />
> <title>Tapestry Landscapes</title>
> <link href="TapestryStyles.css" rel="stylesheet"
type="text/css" />
> </head>
>
> <body background="spacer.png">
> <div align="center" class="main">
> <p><img src="logo.png" alt="logo" border="0"
align="top"></p>
> <table width="200px" border="0" cellspacing="0"
cellpadding="0">
> <tr>
> <td><div align="center"><img
src="tagline.jpg" alt="Landscape &
> Hardscape Installation & Restoration"
width="401" height="31" /><br />
> <span class="text">products & services
<img src="spacer.png"
> width="20" height="2" />customer service<img
src="spacer.png" width="20"
> height="2" /> contact
</span></div></td>
> </tr>
> <tr>
> <td><div align="center"><img
src="portfolio.png" alt="Portfolio"
> width="161" height="21" align="top"
/></div></td>
> </tr>
> <tr>
> <td><div align="center"><img
src="pf1.jpg" width="401" height="251"
> align="top" /></div></td>
> </tr>
> <tr>
> <td><table width="100%" border="0"
align="center" cellpadding="10"
> cellspacing="0">
> <tr align="center" valign="top">
> <td><img src="spacer.png" width="10"
height="10" /></td>
> <td><div align="center"><img
src="thumb1.jpg" width="24"
> height="24"
> /></div></td>
> <td><div align="center"><img
src="thumb1.jpg" width="24"
> height="24"
> /></div></td>
> <td><div align="center"><img
src="thumb1.jpg" width="24"
> height="24"
> /></div></td>
> <td><div align="center"><img
src="thumb1.jpg" width="24"
> height="24"
> /></div></td>
> <td><div align="center"><img
src="thumb1.jpg" width="24" height="24"
> /></div></td>
> <td><img src="numbers.jpg" width="100"
height="25" border="0"
> usemap="#one" /></td>
> </tr>
> </table></td>
> </tr>
> <tr align="left" valign="middle">
> <td><p
class="description"><strong>Client: Greg & Helen
> Smith</strong><br />
> Tranquil backyard retreat. Small brick patio and brick
path. Water
> feature with aquatic plants. Perinneal garden and
landscape planting.
> </p>
> </td>
> </tr>
> </table>
> <br />
> <p><img src="contact.jpg" width="401"
height="30" border="0"
> usemap="#info"
> />
> <map name="info" id="info"><area shape="rect"
coords="220,1,401,31"
> href="mailto:[email protected]"
> alt="[email protected]" />
> </map></p>
> </div>
> <p> </p>
>
> <map name="one" id="one">
> <area shape="rect" coords="0,0,16,23" href="#" />
> <area shape="rect" coords="16,0,32,23" href="#" />
> <area shape="rect" coords="32,0,48,23" href="#" />
> <area shape="rect" coords="48,0,64,23" href="#" />
> <area shape="rect" coords="64,0,80,23" href="#"
/></map></body>
>
> </html>
> -
I need help with CSS and floating
Okay, I know I need to get up on CSS and get rid of tables in
my sites.
However, I'm running up against a problem, and after banging
my head
against it for a while, I realize I need help. I've stripped
this down
so as to only show the area where I'm having difficulty.
What I want is a page that has everything down the center,
taking up no
more than 750 pixels and no more than 550 pixels of width. No
problem there.
After the header and the top content, I'd like to have two
"columns",
each in it's own separately-colored box. I would like the
right-side
column/box to be a static size, while the left-side
column/box sizes
dynamically.
Where I'm having problems is that when one column is boxed,
it's fine,
but whenever I wrap each column in its own box, the
fixed-size box
either jumps below or above the other box (depending on which
one has
been floated and which order the div's appear in the code).
Here are the links:
CSS:
http://www.afice.org/stylesheet/floatmestyles.css
ex 1:
http://www.afice.org/floatme1.html
ex 2:
http://www.afice.org/floatme2.html
Before sending, I took a look again, just to see if I was
missing
anything. I did notice that it doesn't seem to be that the
box is
jumping down so much as it is that it's getting written over.
Anyway, sorry for the long-winded explanation. I hope I've
managed to
explain what I'm trying to do well enough that someone can
tell me where
I'm going wrong.
Thanks,
--KevinDo you want something like this:
http://www.pmob.co.uk/temp/spointfooter.htm
You will need to look at the code to see how it was done.
Otherwise, there are different examples here on Pauls' site:
http://www.pmob.co.uk/temp/3colfixedtest_4.htm
Nadia
Adobe� Community Expert : Dreamweaver
http://www.csstemplates.com.au
- CSS Templates | Free Templates
http://www.perrelink.com.au
- Web Dev
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
http://www.adobe.com/devnet/dreamweaver/css.html
"Kevin D-R" <[email protected]> wrote in
message
news:[email protected]...
> Okay, I know I need to get up on CSS and get rid of
tables in my sites.
> However, I'm running up against a problem, and after
banging my head
> against it for a while, I realize I need help. I've
stripped this down so
> as to only show the area where I'm having difficulty.
>
> What I want is a page that has everything down the
center, taking up no
> more than 750 pixels and no more than 550 pixels of
width. No problem
> there.
>
> After the header and the top content, I'd like to have
two "columns", each
> in it's own separately-colored box. I would like the
right-side column/box
> to be a static size, while the left-side column/box
sizes dynamically.
>
> Where I'm having problems is that when one column is
boxed, it's fine, but
> whenever I wrap each column in its own box, the
fixed-size box either
> jumps below or above the other box (depending on which
one has been
> floated and which order the div's appear in the code).
>
> Here are the links:
>
> CSS:
http://www.afice.org/stylesheet/floatmestyles.css
>
> ex 1:
http://www.afice.org/floatme1.html
>
> ex 2:
http://www.afice.org/floatme2.html
>
> Before sending, I took a look again, just to see if I
was missing
> anything. I did notice that it doesn't seem to be that
the box is jumping
> down so much as it is that it's getting written over.
>
> Anyway, sorry for the long-winded explanation. I hope
I've managed to
> explain what I'm trying to do well enough that someone
can tell me where
> I'm going wrong.
>
> Thanks,
>
> --Kevin -
I have beaten my brains trying to get a third column to
display correctly. After rereading several tutorials and helps in
Dev Center, I am still stumped! Can you take a look at my code here
http://www.mlundy.net/tigerswrestlingnew/lsTigersTemplate.html
- CSS file is
http://www.mlundy.net/tigerswrestlingnew/css/lsWrestling.css.
The absolut wierdest thing just happened. After I uploaded it
for you to see, it seems to display correctly! However, inside DW8,
it still shows the sponsors div being pushed down below content.
I'm very confused now! Can anyone give me a hand? Thanks.
Markquote:
Originally posted by:
mlundy
I have beaten my brains trying to get a third column to
display correctly. After rereading several tutorials and helps in
Dev Center, I am still stumped! Can you take a look at my code here
http://www.mlundy.net/tigerswrestlingnew/lsTigersTemplate.html
- CSS file is
http://www.mlundy.net/tigerswrestlingnew/css/lsWrestling.css
The absolut wierdest thing just happened. After I uploaded it
for you to see, it seems to display correctly! However, inside DW8,
it still shows the sponsors div being pushed down below content.
I'm very confused now! Can anyone give me a hand? Thanks.
Mark
Actually, it still does not work correctly. Because I have
already applied a background image to the containing div, it
appears correct. The sponsors div content actually still falls
below the center, content div, instead of being top-aligned with
the headlines and content divs. -
Help needed with layers and project files....
Hello
I am new to after effects so this might be a simple issue for most. I am having an issue with my layers not matching the files in my project window. I accidently deleted a comp file the other day so I had to remake a few layers but they are not showing up in the project window/solids folder. I have 5 layers on my timeline and only 4 files in the project/solids folder. Some of the files names do not match the ones in the timeline. Is there a way to create a new comp with the files that I have open in my timeline or to replace the ones in the project window? I started a project a few days ago, Im trying to make a few partical orbs dancing on there own path then they will come together and then creates a few smaller ones. Im at the point where I want to copy one comp to another or copy the layers over but the particals follow one light instead of the original light from its own comp. I think the file names in the project window might be the issue but I really don't know. Any help or comments would greatly be appreciated
Thanks a million
Adam
Using trapcode particular and AE CS6
Windows systemLayers on the timeline are just instances of the source footage. If you rename them on the timeline, that won't affect the number or naming of the sources in the project window. Toggle the column header in the TL to see which laywer uses which source.
Mylenium -
Beginner needs help with css layout
i'm new to using dw (cs3) and css, though i have some
background in html and coding. i'm creating a page using the "one
column elastic, centered, header and footer" layout and i have a
banner header with a horizontal spry menu bar at the bottom of the
header. the background color of the buttons on the menu bar is red,
and there's a yellow 5px border on the top and bottom of the red
menu bar, so it looks like there's red bar with yellow piping above
and below it, and this bar is between the header and body section
of the page. i've set these colors in the "ul.MenuBarHorizontal a"
rule.
now, the issue i have is that my menu bar does not extend
across the entire column, so there's empty space to the right of my
menu bar (between the end of the menu bar and the far right
column). i'd like the look of the red and yellow menu bar to extend
all the way across, but i can't figure out how to do this in css.
do i:
extend the menu bar all the way across the width of the page?
i can't figure out how to do this.
insert an image to make it appear as though the red and
yellow bar keeps extending to the right? if so, how will that image
remain elastic along with my page?
or is there a better solution?
i'm very new to css and i'm doing my best to figure out how
everything fits together. the last web site i built was in 1997 and
it was done in notepad. any help would be tremendous. i'm in
kinshasa, in the democratic republic of congo, and truth be told
there aren't a lot of dw gurus out here.
thanks in advance...Can you post a link to your page, please?
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
==================
"charliemooreiv" <[email protected]> wrote
in message
news:[email protected]...
> i'm new to using dw (cs3) and css, though i have some
background in html
> and
> coding. i'm creating a page using the "one column
elastic, centered,
> header
> and footer" layout and i have a banner header with a
horizontal spry menu
> bar
> at the bottom of the header. the background color of the
buttons on the
> menu
> bar is red, and there's a yellow 5px border on the top
and bottom of the
> red
> menu bar, so it looks like there's red bar with yellow
piping above and
> below
> it, and this bar is between the header and body section
of the page. i've
> set
> these colors in the "ul.MenuBarHorizontal a" rule.
>
> now, the issue i have is that my menu bar does not
extend across the
> entire
> column, so there's empty space to the right of my menu
bar (between the
> end of
> the menu bar and the far right column). i'd like the
look of the red and
> yellow menu bar to extend all the way across, but i
can't figure out how
> to do
> this in css.
>
> do i:
>
> extend the menu bar all the way across the width of the
page? i can't
> figure
> out how to do this.
>
> insert an image to make it appear as though the red and
yellow bar keeps
> extending to the right? if so, how will that image
remain elastic along
> with
> my page?
>
> or is there a better solution?
>
> i'm very new to css and i'm doing my best to figure out
how everything
> fits
> together. the last web site i built was in 1997 and it
was done in
> notepad.
> any help would be tremendous. i'm in kinshasa, in the
democratic republic
> of
> congo, and truth be told there aren't a lot of dw gurus
out here.
>
> thanks in advance...
> -
Help my css in dreamweaver isn't working
i entered my new css rule in html mode
margin:0;
padding:0;
#container {
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
#body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #000000;
background-image: url(../IMAGES/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
and nothing is changing on my page. Any suggestionsAnyone?
Please help...
Maybe you are looking for
-
I deleted a calendar tab. How can I get the data back?
I accidently deleted the calendar tab of my wife and deleted all her apoointments on her iphone and the iMac. I am in ****. How can I get the calendar data back=?
-
Hi, I am looking to upgrade from an old '06 Macbook to a new Macbook Pro. What I like about my Macbook now is that I can upgrade the RAM and hard drive myself. Thus when I bought it, I chose the cheapest RAM and hard drive, and then upgraded for abou
-
ISE 1.2 - Authorization Policy for Digital Certificates
Hi Everyone. I have Cisco Ise 1.2 when I created authorization Policy rule for PEAP(MSCHAPv2) and the ISE can match on the rule e permit based on AuthProfile. BUT, authentications using digital certificates (EAP_TLS) I can´t do some AuthorizationPoli
-
Disable pushbuttons from Attachment list for Service Object
Hi, I want to disable push buttons for delete and edit from the toolbar of Attachment list from service objects. how can this be achieved ? thanks in advance. Best Regards, Vinayaka
-
Upgraded to Xorg 7.0 - Where is GLXgears?
I have just upgraded to xorg 7.0. glxgears and glxinfo are no longer present on my system. What is the package that I need to install to get them back?