AP div tags/positioning within a box/can't do it/?
*I've drawn a container box for my home page, into which I want to add an image, and then freely position my interactive/rollover buttons and/or images within the confines of that box. I've got the background...and the box...but Dreamweaver will not let me draw an apdiv tag within the box. I can draw outside the box, but get a circle with a slash when I try to draw within the box.
I have a page online www.bradmarsh.org. I created it by just placing the image and then drawing the button boxes and placing them. They are not placed relative to the confines of the box, so they move when I resize the browser. Also..I might add...it's just a mockup.
At this point, I still don't understand html, but I am starting to grasp it somewhat. If I can solve this little issue, I can carry on with creating my own site.
Help??
Thank you
I've drawn a container box for my home page,
DW is not a graphics application with which you freely draw boxes on a workspace. It's pro-level web authoring software that requires you to possess a working knowledge of Web Design concepts, HTML and CSS code.
Close DW.
Spend some time learning CSS and XHTML first.
Then work through this 3 part tutorial:
Taking a Fireworks comp to a CSS Layout in DW
Part 1 - Initial Design
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html
Part 2 - Markup preparation
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt2.html
Part 3 - Layout and CSS
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt3.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
Similar Messages
-
Layer or div tag positioning help wanted
Okay, actually I have two problems: 1) I have managed to
create a navigation bar, but I can't find out how to save it other
than saving the html page it was created on. The help literature
seems to vaguely indicate that a nav bar created can be saved and
used on other pages, but I'll be damned if I can find where there
are any details of this process.
*BTW, my navbar has multiple elements or buttons, so I can't
just copy paste, ctrl/shift doesn't seem to work selecting multiple
elements, tho it works on regular images*
2) Once I solve problem #1, I am goin to want to have the
navigation bar "stay put" in it's position on the screen, immune to
any scrolling that occurs on the page(s). So, I plan on putting
into a layer or div that can be given this behavior or property.
Unfortunately, I can't find or figure out how to do that, either.
Is this a good plan? Is there a better way to make the Nav bar
exempt from page scrolling?billuminatti wrote:
> Thank you very much for the help. As someone who has
done virtually ZERO
> coding, even something as simple as copying and pasting
code per
> instructions...well, let's just say, it's not my forte.
Needless to say, my
> attempts to do just that, copy and paste per "persistent
layer" instructions,
> have not succeeded yet. There could be several reasons
for this, that I have
> noted, anyway. One is, I have an animated timeline, so
when I replace my body
> tag:
> <body onload="MM_timelinePlay('Timeline1')">
> with the new one (per instructions), my timeline
animation goes bye bye.
> Plus, the "persistence" desired is still not achieved,
which leaves me to my
> next observation: I can't see how the code refers to the
layer that I want to
> persist. IOW, how does it "know" which layer to persist?
> I took the comon-sense measure of having that layer
selected when I pasted my
> code, but I'm not fool enough to think that this would
make any difference.
> I didn't even look into the Server Side Include yet, as
i am just aiming at
> making a layer, any layer, "persist". My comment at this
point is that it seems
> very hard for me to believe that a layer behavior
(persistence, or floating) so
> web-common wouldn't have a "design-view only" solution,
in a package as
> sophisticated as Dreamweaver. This is not a slander on
your answer, BTW, which
> I am sure is a fine one. Thanks again.
>
>
No offense, but I think your approach may be a bit off base
here (of
course I have not seen a link to a a page showing what you
are trying to
achieve, so I could be completely wrong). The first part of
your
question already makes me nervous, because it makes me think
you have
used Fireworks or another image program to create your
navbars.
Depending on which version of Fireworks you are using, that
could be
disastrous or only unwieldly. The navigation bars created by
Fireworks
are definitely not the best solution,and you can go through
years of
posts, particularly by Murray, advising against their use.
If you are interested in an easier way to create your
navigation, post back.
Second, wanting your navigation to stay put while the rest of
the page
scrolls is something I see here a lot, but it's not
necessarily how the
web works. People plunge into frame hell in order to
accomplish it,
but it is like trying to kill a mosquito with a jackhammer.
There is a good extension that will do this for you if you
insist, but
given the problems you are having now, I would first create a
properly
coded page that behaves as a normal web page should, and ONLY
THEN
worry about server-side includes
revisit the issue of fixed and scrolling page elements.
An excellent tutorial for creating a cross-browser friendly,
modern
(e.g.not relying on tables for layout) page can be found at
www.projectseven.com (search for "quickdraw" without the
quotation
marks), where you can also find an excellent tutorial for
creating
horizontal or vertical navigation menus that are simple and
can be used
in templates or server-side includes (search for "uberlink"
without the
quotation marks).
Good luck.
Oh, and don't apologize for not understanding code: learn to
understand
and write good, solid html and css. Elizabeth Castro's book
HTML for
the World Wide Web is excellent. For beginning css you might
want to
start here:
http://www.mako4css.com/
Bonnie in California
kroko at
sbcglobal dot net
http://www.theanimalrescuesite.com/cgi-bin/WebObjects/CTDSites.woa -
Position images at bottom of div tag?
How do I position images at the bottom of a div tag?
These images are going to be used as links and Im using a
template which will double there size on certain pages, so I cant
use background images.
Please help as I cant believe this isn't possible!
JamesI dont understand what you mean by;
'If you do not know the widths, and you want them all to flow
one after
the other, the make another div as their container, and move
the
"position:absolute;right:0px;" styles to the new div'
When I apply a rule for all images in the div tag, the images
all sit on top of one another;
.container img {
position: absolute;
bottom: 0px;
If I set the images individually I can stop them from doing
this;
.container #image1 {
position: absolute;
bottom: 0px;
left: 320px;
The problem however is that this design is for a template.
The images in the template will double in size when the user is on
that page.
If i use a pixel (or a %) value for the left position, then
the left hand side of the image is centered, not the centre of the
image. This means that the space between the images will vary when
one of them enlarges.
This could be solved if there was some way of making the
images sit next to each other, without specifying a position left
value (like when you insert images into a div tag with no rules).
Can this be done?
Alternatively, is there a way of using a position left value
which controlled the position via the center of the image, not the
left side? Then I could use % values and the images would still
look ordered. -
Div tag rendering issue in GroupLayout
Hi,
In my jspx page I have div tag to contruct a box with header inside that I am showing some data.
So I have div class="planHeaderBox" in panelGroupLayout in my jspx1 page and this grouplayout will be refreshed from my bean class when ever I click on button in jspx1 page.
Issue is every time I click on the button div tage is rendering and adding the headerbox in page(multiple boxes are coming), So how do I make div tag to be executed only once and when ever I click on button
only the data should get refreshed not the div tag. Do I need to use switcher or any other way do I have?
Please provide your inputs.
Thanks in advance.That is the reason why you shouldn't do this.
Can't you get your design using adf tags only?
Timo -
Div tags - I'm totally confused
I just finished a website that employed AP divs...and was
heartily chastised for doing so. So, I'm attempting to create
another site that employs div tags.
I created a new site and began working on the design. Banner
at the top (jpg image in a div tag - 760 px wide, no float, no
clear), left sidebar (jpg in a div tag - 154 px wide, no float, no
clear), attempted to create another div tag (right sidebar) but I
can't get the div tag to hug the right margin of the page at the
same height as the left tag. It keeps appearing below the left
sidebar div tag....I have no clue how to get the div tag to appear
on the right side of the page.....assistance would be greatly
appreciated. (I have lots of other questions, but if I can get past
this issue, I MAY be able to work those out myself).
David BirdWell, because #leftsidebar is a block tag, and because you
have not
controlled its width, it occupies the full width of its
container, so there
is no room to the right for anything. And by the way, why so
many rules for
#leftsidebar img? Also, you have misformed the selector for
#rightsidebar.
Anyhow, this may be what you are after - not sure, though....
<!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>Home</title>
<style type="text/css">
<!--
body {
background-color: #CCCCCC;
#wrapper {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #CCCCCC;
padding: 10px;
width: 760px;
margin-right: auto;
margin-left: auto;
overflow:hidden;
#leftsidebar {
float:left;
width:606px;
#leftsidebar img {
width: 154px;
padding: 0px;
#topbanner img {
width: 760px;
#rightsidebar {
width: 154px;
float:left;
-->
</style>
<link href="fsbstyle.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="wrapper"><div id="topbanner"><img
src="Art/topbanner.jpg"
alt="banner" width="760"
height="153" /></div>
<div id="leftsidebar">
<p><img src="Art/Sidebar.jpg" width="152"
height="474" /></p>
</div>
<div id="rightsidebar">Content for id "rightsidebar"
Goes Here</div></div>
</body>
</html>
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
==================
"SwampeastMO" <[email protected]> wrote in
message
news:[email protected]...
> Murrary....Here's the fsbstyle code
>
> #wrapper {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 10px;
> font-style: normal;
> color: #000000;
> background-color: #CCCCCC;
> padding: 10px;
> width: 760px;
> margin-right: auto;
> margin-left: auto;
> }
>
> #leftsidebar img {
> width: 154px;
> padding-top: 0px;
> padding-left: 0px;
> position: relative;
> left: auto;
> }
> #topbanner img {
> width: 760px;
> }
> #leftsidebar img {
> padding-left: 500px;
> }
> #leftsidebar img {
> padding: 0px;
> width: 154px;
> margin-left: 600px;
> }
> #leftsidebar img {
> width: 154px;
> margin-left: 0px;
> }
> #right sidebar {
> width: 154px;
> margin-left: 452px;
> -
Div tag - how do you keep text within box
I have looked at many of the sample documents where the
columns, div boxes, etc are layed out for you. Margins and padding
are set. However it seems when I type text within the boundry I can
just keep typing clear outside the boundries. Shouldn't the text
auto-wrap to stay within the box. What good does it do to have the
div tag settings if they don't enclose the text for you? What am I
missing here.Put a space in what you are typing, please. See what happens.
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
==================
"SnowmanTruckee" <[email protected]> wrote
in message
news:gkth4q$m1a$[email protected]..
>I have looked at many of the sample documents where the
columns, div boxes,
>etc
> are layed out for you. Margins and padding are set.
However it seems when
> I
> type text within the boundry I can just keep typing
clear outside the
> boundries. Shouldn't the text auto-wrap to stay within
the box. What good
> does
> it do to have the div tag settings if they don't enclose
the text for you?
> What
> am I missing here.
> -
Position Image at Bottom of Div Tag
OK, so this may be the stupidest question ever, but how do I
Position an Image at Bottom of the Div Tag? I named the image and
then set;
vertical-align: bottom;
But this doesn't seem to have worked. I could achieve the
bottom alignment with multiple div tags but this seems needlessly
complicated. How should i do this?> ok, is there a rule for when you should use an image as
a background as
> opposed to placing it normally?
No. But there are things you can do with a background image
that you cannot
do with a foreground one, and vice versa. I'm sure that's not
the answer
you wanted to hear however.
Anytime I need to place an image at a specific location
within a container
(like at the bottom, or the right edge), I'm thinking of
using a background
image.
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
==================
"jameswoody" <[email protected]> wrote in
message
news:fv5el0$dn1$[email protected]..
> ok, is there a rule for when you should use an image as
a background as
> opposed to placing it normally?
> Thanks -
None editable Div tag within a editable Div tag template
I am using a template i created to build a website and the only editable Div is the 'Content'. Using this template i have created a 2nd template for a portfolio page. On my 2nd template i have a Div tag within the 'Content' Div tag with list of all the jobs i have done with hyperlinked to photos. I want this list to be only editable on the template so when i update the 2nd template rest of the files related to this template get updated.
Is it possible to have a none editable Div tag within an editable Div tag?
I hope i have explained this well. Many thanks for your helpThank you for your respond.
I have a main template with just the 'Content' Div Tag editable. Using this template i created anyother template for my portfolio page. Inside the editable Div Tag i have another Div Tag with 2 sets of tables for my portfolio lists. I want this Div tag to be only editable through the 2nd template only as i will have portfolio lists of over 30 pages/links.
I selected the Div Tag with the 2 set of tables and selected 'Add Object to Library'. First message was that the CSS coding will not be copied but errors messages as follows;
'While executing canInspectSelectio in phatfusion slideShow_FAB75CA2.htm, a JavaScript error occurred.'
'While executing canInspectSelectio in Ken Burns Slideshow.htm, a JavaScript error occurred.'
'While executing canInspectSelectio in Shadowbox3b Gallery_2528933A.htm, a JavaScript error occurred.'
Everytime i click inside the Div Tag, i keep getting these messages.
I went to the library and amended the list but only the 2nd template changed, not the related pages linked to the 2nd template.
Is there a place where i can upload my page in this website so you can see it?
Please see below the coding for the 2nd template for my portfolio pages;
<!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"><!-- InstanceBegin template="/Templates/main_templateV4.dwt" codeOutsideHTMLIsLocked="false" -->
<!-- saved from url=(0014)about:internet -->
<!-- this and above comment should be removed for live, non-demo use -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META NAME="robots" CONTENT="index, follow">
<meta name="google-site-verification" content="a_way2ZMkNZuMTtOveF3o1bvtWsVMBQujbA5jw9i0Q0" />
<META name="y_key" content="d38873598f3b3934" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>???s</title>
<!-- InstanceEndEditable -->
<link href="../_css/main.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<link href="../Galleria/galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="../Galleria/jquery.min.js"></script>
<script type="text/javascript" src="../Galleria/jquery.galleria-0.9.js"></script>
<script type="text/javascript">
$(document).ready(function(){ $('ul.gallery_demo2').galleria({nextText:'Next portfolio item'}); }) // activates the gallery
</script>
<style media="screen,projection" type="text/css">
p,.caption{
font-size: 10px;
color:#006;
.demo2{
position:relative;
clear:both;
background:black;
width: 600px;
.gallery_demo2{
width: 600px;
.gallery_demo2 li{
width:68px;
height:50px;
border:thin solid #000;
background:#111;
padding-left: 5px;
overflow: hidden;
.gallery_demo2 li.active{
border-color:#623;
.gallery_demo2 li div{
top:60px;
left:0;
border:3px solid #111;
background:#111;
.gallery_demo2 li img.thumb{
opacity:.3;
padding-left: 3px;
.gallery_demo2 li.active img.thumb,.gallery_demo2 li:hover img.thumb{
opacity:.99;
</style>
<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
.gallery_demo2 li img.thumb { filter: alpha(opacity=30) !important; }
.gallery_demo2 li.active img.thumb, .gallery_demo2 li:hover img.thumb, .gallery_demo2 li img.hover { filter: alpha(opacity=100) !important; }
</style>
<![endif]-->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<!-- InstanceEndEditable -->
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #FFF;
background-image: url(../_images/background.jpg);
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="header2">
<h4><strong>ARCHITECTURAL & STRUCTURAL ENGINEERING SERVICES<br />
PROJECT MANAGEMENT & CONSTRUCTIONS</strong></h4>
</div>
<!-- end .header --></div>
<div class="linkBar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT US</a></li>
<li><a href="service.html" class="MenuBarItemSubmenu">SERVICES</a>
<ul>
<li><a href="service.html">Overview</a></li>
<li><a href="planning.html">Planning Permission</a></li>
<li><a href="building.html">Building Regulations</a></li>
<li><a href="partywall.html">Party Wall Act</a></li>
<li><a href="schedule.html">Schedule of Work</a></li>
<li><a href="project.html">Project Management</a></li>
<li><a href="structural.html">Structural Surveys</a></li>
</ul>
</li>
<li><a href="portfolio.html">PORTFOLIO</a></li>
<li><a href="contact.html">CONTACT US</a></li>
</ul>
<!-- end .linkBar --></div>
<!-- InstanceBeginEditable name="mainContent" -->
<div class="content">
<h3>PORTFOLIO- website under construction</h3><!-- #BeginLibraryItem "/Library/Untitled.lbi" --><div class="portfolioText">
<h2 class="textSubHeading">Commercial</h2>
<div class="portfolioCommercial">
<table width="374" align="right">
<tr>
<td width="181" height="20">AA Partner Ltd</td>
<td width="181" height="20">Railing London Ltd</td>
</tr>
<tr>
<td height="20">Pemon Ltd</td>
<td height="20"> </td>
</tr>
<tr>
<td height="20"> </td>
<td height="20"> </td>
</tr>
<tr>
<td height="20"> </td>
<td height="20"> </td>
</tr>
<tr>
<td height="20"> </td>
<td height="20"> </td>
</tr>
<tr>
<td height="20"> </td>
<td height="20"> </td>
</tr>
<tr>
<td height="20"> </td>
<td height="20"> </td>
</tr>
<tr>
<td height="20"> </td>
<td height="20"> </td>
</tr>
<tr>
<td height="20"> </td>
<td height="20">lhjffkhgkhg</td>
</tr>
</table>
</div>
<h2 class="textSubHeading"><br />
</h2>
<h2 class="textSubHeading"> </h2>
<h2 class="textSubHeading"> </h2>
<h2 class="textSubHeading"> </h2>
<h2 class="textSubHeading">Residential</h2>
<div class="portfolioResidential">
<table width="374" align="right">
<tr>
<td width="181" height="20">Batchworth Lane, <span dir="ltr">Northwood</span></td>
<td width="181" height="20">Derrylands, Harrow</td>
</tr>
<tr>
<td height="20">Pine Walk, Surrey</td>
<td height="20"> </td>
</tr>
<tr>
<td height="20"> </td>
<td height="20"> </td>
</tr>
<tr>
<td height="20"> </td>
<td height="20"> </td>
</tr>
<tr>
<td height="20"> </td>
<td height="20"> </td>
</tr>
<tr>
<td height="20"> </td>
<td height="20"> </td>
</tr>
<tr>
<td height="20"> </td>
<td height="20"> </td>
</tr>
<tr>
<td height="20">teytdytyt</td>
<td height="20"> </td>
</tr>
</table>
</div>
</div><!-- #EndLibraryItem --><div class="portfolioSlideshow">
<p>Project Title Goes Here:</p>
<div class="demo">
</div>
<div class="demo2">
<ul class="gallery_demo2">
<li class="active"><img src="../_images/portfolio/planning.jpg" alt="Planning sample drawing" width="600" height="400"></li>
<li><img src="../_images/portfolio/building.jpg" alt="Building Reg sample drawing" width="600" height="400"></li>
<li><img src="../_images/portfolio/structural.jpg" alt="Structural sample drawing" width="600" height="400"></li>
<li><img src="../_images/portfolio/fabrication.jpg" alt="Fabrication sample drawing" width="600" height="400"></li>
</ul>
</div>
</div>
<!-- end .content --></div>
<!-- InstanceEndEditable -->
<div class="footer">
<table width="1025" border="0">
<tr>
<td width="500"><h6>??? </h6></td>
<td width="10"> </td>
<td width="500" align="right"><h6>???</h6></td>
</tr>
</table>
<!-- end .footer --></div>
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
<!-- InstanceEnd --></html> -
How to Include More Than One Font and Font Color Within a Fluid Grid Div Tag?
Using CSS code, I can make all the words within a fluid grid div tag the same font, font size, and font color, but how do I make a few of the words different?
You can style the basic text and heading selectors with CSS:
p { }
h1 { }
h2 { }
h3 { }
h4 { }
etc...
And you can make classes:
.red {color:red}
.highlight {background-color:yellow}
Then apply classes to your text or sections of it using the HTML properties panel.
<div>
<p>This is a default paragraph style.</p>
<p class="red">This is red.</p>
<p class="highlight">This is highlighted.</p>
<p>Default style with <span class="red highlight">red, highlighted text</span> and normal text.</p>
</div>
Incidentally, this will work in any layout.
How to Develop with CSS?
http://phrogz.net/css/HowToDevelopWithCSS.html
Nancy O. -
Can you place an image in a div tag and then add type over top of it?
I told someone in class lastweek that I wanted to be able to
place type over an image. They said you can just add the image into
the div tag as a background image, which will allow you to then
type over it if you like. How is this done? I have tried and
failed. I have an image that is 200x590 going down the left side of
my page. I want to run type over it, and keep the image consistent
on every page, but change the header and type. I've seen this in
several sites. How do you do this with the div tag box model method
of building a page. Can I insert an image into the div and then run
type over it. What does the code look like?Here's an example of using a css and a background image to a
table cell...
sample principle for a div
#div {styles go here{
http://tinyurl.com/yqeptp
You may also want to go through the beginner css tutorials at
the Adobe
site:
http://www.adobe.com/devnet/dreamweaver/css.html
(pay attention to the ones
by Adrian), beginner moving onto to creating full css
layouts.
Hope this helps :-)
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
Forum Posting Guidelines:
http://www.adobe.com/support/forums/guidelines.html
>I told someone in class lastweek that I wanted to be able
to place type
>over an
> image. They said you can just add the image into the div
tag as a
> background
> image, which will allow you to then type over it if you
like. How is this
> done?
> I have tried and failed. I have an image that is 200x590
going down the
> left
> side of my page. I want to run type over it, and keep
the image consistent
> on
> every page, but change the header and type. I've seen
this in several
> sites.
> How do you do this with the div tag box model method of
building a page.
> Can I
> insert an image into the div and then run type over it.
What does the code
> look
> like?
> -
Why aren't my CSS and div tag boxes displaying the background images I'm plugging in?
I'm using the CSS dialog boxes to places images via the background image option into my dreamweaver site. Everything looks fine in dreamweaver but when I view it any of the browsers, two of the images I've place as div tag background images don't work....the overal background image of the site works, but these don't show up ....
here's my code if it helps to answer
<!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>Main</title>
<style type="text/css">
body {
background-image: url(images/realgrade.jpg);
background-repeat: repeat-x;
text-align: center;
html, body {
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-top: 0px;
padding-top: 25px;
#wrapper {
width: 930px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/images/possible%20image. jpg);
background-repeat: no-repeat;
#header {
height: 192px;
width: 237px;
background-image: url(images/logo_fill.jpg);
background-repeat: no-repeat;
position: absolute;
left: 35px;
top: -25px;
#mainNav {
background-color: #33F;
height: 200px;
width: 272px;
float: left;
margin-top: 233px;
#maincontent {
height: 600px;
width: 608px;
float: right;
margin-bottom: 45px;
padding-right: 25px;
background-repeat: no-repeat;
background-position: center 270px;
background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/images/opaqueMaincontent .png);
#sidebar {
background-color: #F36;
height: 250px;
width: 272px;
clear: left;
float: left;
#footer {
height: 525px;
width: 870px;
clear: both;
padding-top: 45px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
background-image: url(images/footer_image.jpg);
background-repeat: no-repeat;
margin-top: 45px;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="mainNav">
<p> </p>
</div>
<div id="maincontent"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
here's what I'm going for
here's what I'm getting in the browser
Please help!Your image files are pointing to your hard drive, not your server. You have this
background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/imag es/opaqueMaincontent.png);
and you should have this
background-image: url(imag es/opaqueMaincontent.png);
Also, is your images file named imag es?
Gary -
Trying to get content to fit better within a div tag
I've got a couple sliced up jpgs placed within a couple div tags (boxes) and aren't sure how to improve the fit. There's excess space vertically and it's not quite centered horizontally.
Here's the page: http://doughertyautomotive.com/New_Site/index.html
Thanks.First off, from your post, we don't know which "couple of div tags" concern you. In Firefox, I did notice some elements not aligned with others that I am presuming are supposed to square up, but without a specific example it would be a waste of time to review your code in detail. Hazarding a guess, I'd say that you have assigned widths and heights to the jpegs that make them larger than the container you put them in. So you're just going to have to comb through all of your CSS and double check any assigned widths and heights of elements. It's also possible that you've added a CSS style which conflicts with one in the Project 7 style sheets. And for troubleshooting the Project 7 app, you need to go to its web forum.
Chris
www.cdeatherage.net -
Where is the "Start New Row" check box when adding a div tag?
Ever since I updated Dreamweaver, when i add a div tag i no longer see the "Start A New Row" check box. The only checkbox i see is "Insert as a Fluid Element". Has this option been removed or has it been moved to a new location?
Hi MichaelMuirhead,
We have updated Fluid grid in 12.2 release of DW as well as in CC release.
Unlike before, Now DW smartly recognizes when a Fluid page is open and Converts Structure category to Fluid layout category.
I.e. when any element is inserted from Structure category on to a fluid page it will be inserted with required CSS to make it fluid, Unless user advices otherwise.
The idea is to enhance the support for almost all the structural elements as fluid elements, rather than just supporting Div as a fluid element. Hence, Insert Fluid Grid Layout Div Tag has been removed.
Steps to Insert a fluid element:
Select Insert > Layout.
Select the element that you want to insert. (i.e Div or Header or footer etc) 3. In the dialog that appears, enter a new class name, or enter a value for the ID. The selected element is inserted on the layout.
4) To insert a normal/non fluid element uncheck 'Insert as fluid element' check box in previous dialog.
Now to answer second part of your concern " Regarding missing "Start A New Row" check box"
All the elements inserted on a fluid page, start in a New row by default. If user wants to place the element in previous row then in can be achieved by clicking "Move Up a row" button which comes up on FG element HUD, after inserting that element.
Please refer Screen shot for clearer understanding.
For more details on update navigate to: http://helpx.adobe.com/dreamweaver/using/fluid-grid-layout-dreamweaver .html
Here is the link to new Video on how to design a FG page using new FG in DW 12.2.
http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Please note that "Layout" Category in 12.2 has been renamed to more appropriate sounding "Structure" Category in DW CC.
Hope it helps.
Kindly revert for any issues or concerns.
Thanks,
Puneet -
How do I position AP Div Tags relative to a Table?
Hi!
I know that it is possible to position an AP Div Tag relative to the header using a template in Dreamweaver. However, I am not able to position to relative when using a table so if you know how then help would be appreciated! Thank you! (I am using CS5 by the way)webdesigner3383 wrote:
Hi!
I know that it is possible to position an AP Div Tag relative to the header using a template in Dreamweaver. However, I am not able to position to relative when using a table so if you know how then help would be appreciated! Thank you! (I am using CS5 by the way)
Not sure why you want to do this as it can be hit and miss.
I would insert a <div> in a table cell and set its position to relative and then insert an absolutely positioned <div> inside of the relatively positioned one:
<td>
<div style="position: relative;">
<div style="position: absolute; top: 50px; left: 40px;">Content goes here</div>
</div>
</td>
I think that should work although I havent tried inserting <divs> inside a <td> cell for many moons. -
Help- check box on when the page is loaded first time have to show div tag
posted Yesterday 11:48 PM
Hi Friends,
I have a check box and the information of if it is checked or not comes from Actionform get, I want the div tag to be displayed when the jsp is first loaded and the check box is checked.
Can some one help me in sending the sample code for this.
with regards,
Bhargavi.Hi Scott,
Declare a SessionBean variable to hold the unique key field value for that table. Set that value when the user clicks on the button. Use the value to select only that row on the next iterattion of the page in RowSet.setCommand statement.. You will want to do some conditional initialization for this page depending upon whether or not this seesion bean variable has been initialized.
Maybe you are looking for
-
I am using Adobe XI Pro for educators. Every time I try to change a document into a PDF document the program asks me to sign up for a monthly fee. What's going on???
-
Why v r not configuring IDoc & HTTP adapters on sender side
Hi Gurus, Y v r nt configuring the Idoc and HTTP adapter on sender side. But on d receiver side v r configuring. Why? IDoc and HTTP Adapters are built on ABAP stack.That's y v r nt configuring on d sender side.It is the same thing also on d receiver
-
Hi I have to automate the update. I have 3 possible variables, VariantIdIN , QuestionIdIn and third is the column name. In the following example column name will be ACS_Sufferer. What are my options to automated the process? I tried to write a functi
-
Problem with changing background colors in JPanels
Hi, I have made an applet with Grid Layout and I have added JPanels in each grid. I have assigned a background color to all panels. Now what i am trying to do is, change the clicked JPanel's background color to "blue" on a mouse click and convert the
-
Can I change a part of HTML page from server without reload whole page?
Hey guys! I would like to make a page what shows a couple of information, some of these from database. I would like to refresh these datas every minute, but I don't want to reload whole page, because there are charts and other things that calculated