Quick CSS layout question

This should be a quick one - I have just added in some links to the other countries on the page below. Basically all the links under the main Botswana image on the left hand side.
Trouble is, that they have knocked the second row of lodges down to their right (this is how they should appear: http://www.goodsafariguide.com/botswana/index.php)
I thought the culprit might be a clear:both; in the #outerWrapper #contentWrapper #content #row_two rule in the botswana_layout.css file, but apparently not.
If anyone could quickly spot how to fix this that would be great.
The page is here:
http://www.goodsafariguide.com/botswana/botswana.php
Thank you!

Good news with the solution!
Iain71 wrote:
So its all looking as it should now:
http://www.goodsafariguide.com/botswana/botswana3.php
Its interesting that you mention the <a href="someurl.php"><div>Some content</div></a> thing. Although it seems to work, it wa something I wasn't entirely convinced was technically correct. I'm not sure how else you would do that though, and it seems a fairly common thing on sites (if not achieved the same way), ie having a large area that acts as a link. Maybe it should be contained in an outer DIV.
Thanks again for your help.
As I understand it, strictly speaking a <div> cannot be a link so, it should not be wrapped in an anchor tag. I think it has something to do with the fact that a <div> is a block level element and <a> is in line. This link http://htmlhelp.com/reference/wilbur/special/a.html is a reference for <a> it lists what other elements it can occur in and what it can contain. An <a> can be placed inside a <div> but not the other way around. Having said that, your use of the two elements kind of proves that they work but then you can fix wood together with nails and screws but some situations call for one or the other! Reading up on this, I learn that it's different now in HTML5 but then I imagine, that was done to confuse me!
The way I work out a page these days is based on my simple understanding of semantic code which for me means that the best element to use will always be the one that was intended for that job. The most obvious are <ul> and <li> for lists and <p> for a paragraph. I suppose <head> and <body> give even stronger clues. I also understand that search engines and in particular, Google, appreciate the proper use of these elements when pages are crawled. I know that SEO is a dark art but it kind of makes sense that a stupid robot will understand only the information is sees. It knows a list is a list but it doesn't know that a div is a list.
I have had a go at building your box of images using Dreamweaver Javascript rollover and the list elements. It's quick and dirty and the javascript makes it look more complicated than it is. However, if you compare my code with yours, I think that you will agree that my alternative is more straight forward and easier to read.
One other thing about this idea is that but putting your image in the page, you can get a bit more content in there with your alt="" and title"" attributes. At the moment, your option is a string of content-less divs.
martcol.co.uk/test/africa.html
Regards
Martin
You have to bear in mind that I am a serious hobbyist web developer who trys his hardest understand this shizzle.

Similar Messages

Another CSS layout question

Hi!
I have finally ditched tables and I'm now doing my first div-based css layout. At times I still feel totally lost like in this example. I can't seem to get the page subtitle ("Etusivu") to move down from the top of the div it is in. I tried different kinds of paddings and margins but either Firefox or IE always screws it up, even if I get it to work in the other browser. If anyone can take a look, I appreciate it a lot!
Here's my markup:
<!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>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>
<style type="text/css">

</style>
</head>
<body onload="MM_preloadImages('images/doktor_streetwear_otsikko_ro.gif','images/etusivu_ro.gif ','images/tuotteet_ro.gif','images/tietoa_ro.gif','images/ehdot_ro.gif','images/palaute_ro .gif','images/linkit_ro.gif')">
<div id="wrapperi">
<div id="logo"><img src="images/kannulogo.jpg" alt="logo" /></div>
<div id="otsikko"><a href="index.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('otsikko','','images/doktor_streetwear_otsikko_ro.gif',1)"><img src="images/doktorwear_otsikko.jpg" alt="otsikko" name="otsikko" width="487" height="87" border="0" id="otsikko2" /></a></div>
<div id="kielet">
    <div id="kielet_pusher"> </div>
    <div class="kieli">SUOMEKSI </div>
    <div class="kieli">IN ENGLISH </div>
</div>
<div id="navi"> <a href="index.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('etusivu','','images/etusivu_ro.gif',1)"><img src="images/etusivu.jpg" alt="etusivu" name="etusivu" width="130" height="56" border="0" id="etusivu" /></a><a href="tuotteet.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tuotteet','','images/tuotteet_ro.gif',1)"><img src="images/tuotteet.jpg" alt="tuotteet" name="tuotteet" width="130" height="55" border="0" id="tuotteet" /></a>
<a href="tietoa.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tietoa','','images/tietoa_ro.gif',1)"><img src="images/tietoa.jpg" alt="tietoa" name="tietoa" width="130" height="55" border="0" id="tietoa" /></a>
<a href="ehdot.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ehdot','','images/ehdot_ro.gif',1)"><img src="images/ehdot.jpg" alt="ehdot" name="ehdot" width="130" height="55" border="0" id="ehdot" /></a>
<a href="palaute.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('palaute','','images/palaute_ro.gif',1)"><img src="images/palaute.jpg" alt="palaute" name="palaute" width="130" height="55" border="0" id="palaute" /></a>
<a href="linkit.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('linkit','','images/linkit_ro.gif',1)"><img src="images/linkit.jpg" alt="linkit" name="linkit" width="130" height="55" border="0" id="linkit" /></a> </div>
<div id="vasen_palkki">Content for id "vasen_palkki" Goes Here</div>
<div id="main_content">
<div class="otsikko" id="tekstiotsikko">ETUSIVU</div>
<div class="style1" id="iso_alue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec risus at lorem posuere pellentesque. Sed a tellus lorem. Nullam justo mauris, ultrices sed interdum in, egestas eu leo. Duis interdum elementum gravida. Curabitur eu rutrum nibh. Maecenas molestie turpis ac leo tristique nec pellentesque felis mattis. Etiam placerat laoreet tortor, ac dignissim magna tempor ac. Mauris iaculis vestibulum pellentesque. Proin eu scelerisque ipsum. Sed tincidunt nibh sed ipsum pulvinar iaculis. Cras egestas imperdiet mi. Suspendisse tempus, tortor eget vehicula sagittis, diam massa lobortis odio, vel dictum risus nulla vitae mauris. Praesent tellus erat, pharetra eu fermentum vitae, sodales eu sapien. Aenean odio lectus, mattis in egestas id, auctor at nisl. Donec viverra pharetra auctor. Fusce lectus neque, ullamcorper a ultricies at, auctor at mauris. Proin semper orci quis risus dignissim non cursus tellus lobortis. In hac habitasse platea dictumst. </div>
</div>
</div>
</body>
</html>
And here's the stylesheet:
@charset "utf-8";
body {
    background-color: #330000;
#wrapperi {
    margin: auto;
    padding: 0px;
    width: 800px;
#logo {
    float: left;
    border: 1px solid #800000;
#otsikko {
    float: left;
    border: 1px solid #800000;
#kielet {
    float: right;
    border: 1px solid #800000;
    height: 87px;
    width: 130px;
.kieli {
    font-family: "Courier New", Courier, monospace;
    font-size: 18px;
    color: #FFFFFF;
    font-weight: bold;
    border-top-width: 1px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #800000;
    border-right-color: #800000;
    border-bottom-color: #800000;
    border-left-color: #800000;
    padding: 5px;
#kielet_pusher {
    height: 25px;
#navi {
    border: 0px none #800000;
    float: left;
    width: 130px;
#navi img {
    padding-top: 4px;
    border-top-width: 0px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #800000;
    border-right-color: #800000;
    border-bottom-color: #800000;
    border-left-color: #800000;
    padding-bottom: 4px;
#main_content {
#otsikko {
#tekstiotsikko {
    margin-top: 30px;
    margin-bottom: 30px;
#iso_alue {
    font-size: 14px;
    text-align: left;
    margin-left: 160px;
    margin-right: 200px;
#vasen_palkki {
    float: right;
    height: 400px;
    width: 130px;
    border: 1px solid #800000;
#main_content {

Hi
As I am getting different layout (depending on browser), and you are missing much of the text mark-up (h1, h2, h3, p, etc.), which also changes the display, try replacing your section of the code with the one below, and let me know if this is somewhere near what you wish..
<div id="tekstiotsikko"><h2></h2></div>
<div id="iso_alue"><h2>ETUSIVU</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec risus at lorem posuere pellentesque. Sed a tellus lorem. Nullam justo mauris, ultrices sed interdum in, egestas eu leo. Duis interdum elementum gravida. Curabitur eu rutrum nibh. Maecenas molestie turpis ac leo tristique nec pellentesque felis mattis. Etiam placerat laoreet tortor, ac dignissim magna tempor ac. Mauris iaculis vestibulum pellentesque. Proin eu scelerisque ipsum. Sed tincidunt nibh sed ipsum pulvinar iaculis. Cras egestas imperdiet mi. Suspendisse tempus, tortor eget vehicula sagittis, diam massa lobortis odio, vel dictum risus nulla vitae mauris. Praesent tellus erat, pharetra eu fermentum vitae, sodales eu sapien. Aenean odio lectus, mattis in egestas id, auctor at nisl. Donec viverra pharetra auctor. Fusce lectus neque, ullamcorper a ultricies at, auctor at mauris. Proin semper orci quis risus dignissim non cursus tellus lobortis. In hac habitasse platea dictumst.</p> </div>
PZ

Quick CSS box question

Hi guys,
Firstly a very Merry Christmas to you all !
I'm just getting to grips with converting all the text on my
site to CSS and have a quick question.
On some of my pages I add an 'Also see' links box aligned to
the right - it's a CSS div tag thingy someone kindly talked me
through once. All of my pages are built from a template with an
editable region.
My question is, can I add this box (perhaps with a standard
'Also check out' title and then spaces for my links) at the
template level? This will save me having to go to Insert>Layout
Objects>DivTag on every page. I've tried simply adding this to
the editable region of the template but it simply pushed the
editable region box over to the right and then didn't appear on my
pages
Also, the links box would ideally appear about half way down
my pages on the right...
Hope you can help, many thanks in advance!
James
Here's an example page where I have manually added my link
box on the right of the page...
http://www.fyrne.com/james_journalism/Pages/Mosaic_of_the_med.html

Your CSS link implies that the CSS file is in the Templates
folder. You
shouldn't have anything there other than the template (dwt)
files
themselves. Please move it out to any other location in your
site.
<link href="../../Templates/Box.css" rel="stylesheet"
type="text/css">
Changes made to template editable regions would not propagate
to existing
child pages - that's why you aren't seeing that addition in
them....
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
==================
"JamesFryer" <[email protected]> wrote in
message
news:[email protected]...
> Hi guys,
>
> Firstly a very Merry Christmas to you all !
>
> I'm just getting to grips with converting all the text
on my site to CSS
> and
> have a quick question.
>
> On some of my pages I add an 'Also see' links box
aligned to the right -
> it's
> a CSS div tag thingy someone kindly talked me through
once. All of my
> pages are
> built from a template with an editable region.
>
> My question is, can I add this box (perhaps with a
standard 'Also check
> out'
> title and then spaces for my links) at the template
level? This will save
> me
> having to go to Insert>Layout Objects>DivTag on
every page. I've tried
> simply
> adding this to the editable region of the template but
it simply pushed
> the
> editable region box over to the right and then didn't
appear on my pages
>
>
> Also, the links box would ideally appear about half way
down my pages on
> the
> right...
>
> Hope you can help, many thanks in advance!
>
> James
>
> Here's an example page where I have manually added my
link box on the
> right of
> the page...
>
http://www.fyrne.com/james_journalism/Pages/Mosaic_of_the_med.html
>

CSS layout question regarding browser sizing

Hi,
Basically I want the basis of my site to be - A header, Main content with a background image, A Footer.
I'm having problems however, I can't seem to get my footer to position where I want it i.e. at the bottom of the browser window at all times. I'm doing it as an AP div and how it should work is that it's fixed at the bottom of the page and then if the user resizes their browser in the y direction the footer moves up with it, over the top of the main content (but not the header which will have a higher z-index).
The way I THOUGHT to do it was to firstly create a div tag for the whole page (780 pixels wide, auto left and right margins, auto height) and then inside that put my ap div header fixed height at the top and have another ap div as the footer, fixed height and tell it to position 0 pixels from the bottom. However this doesn't seem to do the trick, I'm sure I'm missing something really really simple. Anyone who's vaguely familiar with the program will be able to answer this I'm sure. If my question isn't clear please let me know and I'll rephrase,
Ta

There is no reason to use APDivs for such a simple layout. Default CSS positioning (which is no positioning at all) is typically all you need for most layouts. Build your HTML markup logically from top to bottom of page and your footer will naturally appear at page bottom.
Live Demo (view page source to see the code)
http://alt-web.com/TEMPLATES/Basic-1-col-fixed.html
Or, for a Sticky Footer using Fixed positioning:
http://alt-web.com/DEMOS/CSS2-Sticky-Footer.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

CSS layout question - height of outer DIV

Hopefully this is a quick one - In the past I've used CSS for the main layout of a page, but still used tables within a DIV. But I'm trying to be good and used DIVs there too.
Anyway - I have a basic example here:
http://www.learners-guide.co.uk/lessons/cockpit-drill/layout.php
With the row in the main content split into two columns, using:
#outerWrapper #contentWrapper #content #row_one {
          width:580px;
          border:2px solid #333;
          background-color:#99FF99;
          padding:10px;
#outerWrapper #contentWrapper #content #row_one #row_one_left {
            width: 288px;
          height:auto;
          padding:0px;
          float:left;
          margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
#outerWrapper #contentWrapper #content #row_one #row_one_right {
            width: 288px;
          height:auto;
          padding:0px;
          float:right;
          margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
The problem is that the #row_one_left and #row_one_right colums spill out of the containing #row_one DIV.
How would I make the containing DIV expand to contain the columns? I can do it by specifying a height of the #row_one DIV, but assume this is bad form, and would produce varying results depending on screen / resolution / browser etc.
I thought maybe using height: auto; but no joy with that either.
I'm assuming it must be possible, as it seems a fairly basic layout requiement.
Thanks.

You have to use some style that forces that div to clear the floats (since floated elements are removed from the flow, containing elements act as if they aren't even there). To do that, something like "overflow:hidden" works wonderfully well. So remove the height:auto styles (which is the default anyhow), and change this -
#outerWrapper #contentWrapper #content #row_one {
          width:580px;
          border:2px solid #333;
          background-color:#99FF99;
          padding:10px;
to this -
#outerWrapper #contentWrapper #content #row_one {
          width:580px;
          border:2px solid #333;
          background-color:#99FF99;
          padding:10px;
          overflow:hidden;

Beginners CSS layout question - expanding a layer and not overlapping another

Having got well and truly fed up of using tables to layout
pages I am trying to gem up on CSS layer based layout. All well and
good but despite the various tutorials I can't find an answer to
this question...
Q. I have a layout with layers to make a three column layout,
however, I want to have a footer section at the bottom of the page
that runs the same width as the three columns (you can see my WIP
example here
http://www.spiralfilm.com/clients/broadoak/index_css.html
). Problem is, as the centre section expands with more content, how
do I make that section expand and not overrun the current footer
section? I want it to expand like a table does and push the footer
down.
I'm sure it is simple but I just can't get my head around it!
Thanks in advance for any pointers...

> However, is the use of div tags the way to seperate
blocks of content? The
> DW8
> help file seems a little unclear on this?
Yes, it would be one way to do that. A div tag is simply a
container for
other HTML elements, like a table. The problem you are having
comes with
using DW 'layers' to contain text. As Thierry suggested, this
is because
absolutely positioned elements (i.e., DW 'layers') are
removed from the
normal flow, preventing them from interacting with adjacent
page elements -
this means that when the text inside them expands, it will
begin to overlap
other content. See my demonstration of this here -
http://www.great-web-sights.com/g_layers-overlap.asp
Try these tutorials -
http://www.macromedia.com/devnet/mx/dreamweaver/css.html
http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html
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
==================
"Benfrain" <[email protected]> wrote in
message
news:elgpba$qds$[email protected]..
> Hi, thanks for those links. Sorry to confess they are
all a little beyond
> my
> knowledge. I will read on and see if I can understand
them.
>
> However, is the use of div tags the way to seperate
blocks of content? The
> DW8
> help file seems a little unclear on this?
>

CSS Layout Questions

Only making baby steps in CSS still but I am learning a lot. Here's a link to the page I am trying to create: http://www3.telus.net/~jessum/details_layout.html
Here's what I have managed to create so far: http://www3.telus.net/~jessum/details.html
When explaining any steps please explain it using Dreamweaver. I will be looking in the code to see how it all works but I want to be able to get proficient using Dreamweaver so I can see how things flow etc. before I try and hand code.
Questions
1. Is it a good practice to use a "container" to hold all of the div's or is it better to start by adding a header without a container?
2. How can I centre a div in the page?
I read that to align the div so it's "centred' in the page I can use: margin: auto;
but I'm not sure how to do this. Please explain.
3. How do I remove the space around the "container"? I've set the margin and padding to: "0" but the space is still there.
Thanks

osgood_ wrote:
Not sure where this notion of using the body as a container came from but for years a wrapper or container was considered standard practice.
The idea is being promoted by several of the most active and knowledgeable members of this forum. I think the idea first came from Altruistic Gramps, and I remember debating the issue with him about a year ago. It has also been picked up enthusiastically by Murray, and I've seen Nancy O suggest the same idea.
I've been doing a lot of research into CSS3 recently, and discovered that the Borders and Backgrounds module specifically advises against styling the <html> element (http://www.w3.org/TR/css3-background/#special-backgrounds). It doesn't give a reason for this recommendation.
I suppose the idea of giving the body a width instead of using a container might come from the HTML5 definition of the body as representing the main content of the document (http://dev.w3.org/html5/spec/the-body-element.html#the-body-element).
I suspect that this is likely to develop into the same type of fruitless argument as we had several years ago about the "superiority" of ems over pixels. Adding a single <div> to act as the container or wrapper for the content doesn't strike me as being less efficient. It also has the advantage of avoiding styling the <html> element.

CSS Layout Questions [locked]

Here's a link to the page I am trying to create: http://www3.telus.net/~jessum/details_layout.html
Here's what I have managed to create so far: http://www3.telus.net/~jessum/details.html
When explaining any steps please explain it using Dreamweaver. I will be looking in the code to see how it all works but I want to be able to get proficient using Dreamweaver so I can see how things flow etc. before I try and hand code.
Questions
1. Is it a good practice to use a "container" to hold all of the div's or is it better to start by adding a header without a container?
2. How can I centre a div in the page?
I read that to align the div so it's "centred' in the page I can use: margin: auto;
but I'm not sure how to do this. Please explain.
3. How do I remove the space around the "container"? I've set the margin and padding to: "0" but the space is still there.
Thanks

Murray *ACP* wrote:
You already have a "container" - the body tag. You can center the page by giving the body an explicit width and then left/right margins of auto, e.g.,
body {
width:960px;
margin:0 auto;
The idea of using the body to centre the page seems to have become fashionable of late. The problem with doing so is that it leaves an unstyled area on the body's background extends into the left and right margins when displayed on a screen that is wider than the body. So, followers of this fashion then style the <html> element.
The CSS3 Borders and Backgrounds module specifically advises against styling the <html> element. See http://www.w3.org/TR/css3-background/#special-backgrounds.
Message was edited by: David_Powers to correct description of what happens in the margins.

Quick css name question...

I created a simple file in dw main.css. It worked fine in dw and firefox testing - but failed in safari... many times I resent to web and cleared cache etc... but no joy
then I changed the name to something else and all worked
what went wrong? Is main.css some kind of 'protected term' or non permitted words that safari does not like?
btw this was the only code for it:
body {
background-color: #000;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
color: #FC0;
a:link {
color: #FF0;
a:visited {
color: #FC6;
a:hover {
color: #FFC;
text-decoration: underline;

Filenames are not protected, but if the browser does not recognize the file type then it will do unpredictable things with it. If you pointed your browser to main.css, you would probably see just text. Files with the htm, html, etc. extensions are interpreted by the browser as .html and processed as such.

Css layout problems - css and tables

Hi guys,
Well as some of you suggested months ago, I've been trying to
learn to layout with CSS... It's actually getting a bit rewarding
now as I start to figure a few things out but there's still plenty
of questions!!!
If anyone can take a look at what I'm working on at the
moment and give me some help I'd REALLY REALLY appreciate it!!
My main trouble (I think) is working with a drop-down menu
system that I found on the web and I'm dying to use it because it's
perfect for this design. It's layed out using a table so I'm trying
to incorporate that...
Click
[url=http://home.iprimus.com.au/jediwdog/ltc/mockup2.jpg]here[/url]
for a picture of what i'm trying to get this page to look like and
[url=http://home.iprimus.com.au/jediwdog/ltc/example1.html]here[/url]
to see how far I've got. You can download the stylesheet from
[url=http://home.iprimus.com.au/jediwdog/ltc/example1.css]here[/url].
Here's what I need to know:
1. I'm trying to push the table down so it looks better lined
up with the logo but when I tell it to be further from the top, it
doesn't seem to move. Any ideas on why?
2. As you can see, I've inserted some blank space into the
middle of the menu so that the logo doesn't cover any of the menu
items. I can't seem to get the same 1px black border on this
section.
I assume this is because the border on the other parts is a
layer/div border? Will I have to somehow put a div in there so as
to create the same border effect?
3. I'd really like to keep the header and footer visible at
all times, even if there's lots of content to scroll through. I
found this:
http://www.cssplay.co.uk/layouts/basics2.html#Top
but when I tried to implement this on my page, it all went haywire!
Is this going to be a possibility?
4. I guess other than that, have I completely stuffed this
up!? I don't think I have but it's worth asking I guess!
THANKS IN ADVANCE! I'm really loving using css layout rather
than tables - it's soooo much more versatile. I just need to get
past some obstacles I think!
Cheers
Neil

On Wed, 24 Jan 2007 22:17:20 +0000 (UTC), "Barb S."
<[email protected]> wrote:
>Ok, I made your suggested changes and have this:
>
> body {
> font-family: Georgia, "Times New Roman", Times, serif;
> text-align: center;
> font-size: 1em;
> font-style: normal;
> text-decoration: none;
> top: 15px;
> background-image:
url(/images/backgrounds/background1.gif);
> padding-top: 15px;
>>>> width: 70%;
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
> }
>
> #body {
> margin: 0 auto;
> text-align:left;
> width: 760px;
> padding-right: 20px;
> padding-bottom: 20px;
> padding-left: 20px;
> background-color: #FFFFCC;
> padding-top: 20px;
> font-family: Georgia, "Times New Roman", Times, serif;
> font-size: 1em;
> color: #003366;
>
> }
>
>
http://www.japanesetemari.com
>
> The page is on the left size of the screen and the
yellow box does not expand
>out. Not exactly what I'd wanted. I like to take
advantage of larger screens
>and have the page expand out but not so far out so the
lines of text are real
>long.
> Barb
It's this in the body style that is limiting the width -
change that
to 100%
>>>> width: 70%;
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
> }
~Malcolm N....
~

CSS layout

Hi
A couple of embarrassingly basic questions but would
appreciate help:
1. I'm using a CSS layout template and need to alter the
position of a div border (to coincide with another border). How do
you physically do this? Can't seem to "drag and drop" the border
2. I've aligned a Heading to the "left" but when I display it
on the browser it either stays to the left or moves to the center
of the div. depending on the size of my window. How do you prevent
this?
3. Currently my html and css codes are in 2 different
(linked) documents. When I publish to the web do I simply load both
files or do I need to copy and paste the css coding into my html
document?
Thanks once again

Posting our code would be helpful
> 1. I'm using a CSS layout template and need to alter the
position of a div
> border (to coincide with another border). How do you
physically do this?
> Can't
> seem to "drag and drop" the border
I'm not sure what you're asking here ... positioning a
border? the div
border is always, well, on the perimeter of the div. Do you
want to move one
edge of the div over 10 px? If so (and assuming its the left
border...) ,
try subtracting 10 px from the div width and giving the div a
margin-left of
10px. As for "drag and drop," what are we dragging? What are
we dropping?
> 2. I've aligned a Heading to the "left" but when I
display it on the
> browser
> it either stays to the left or moves to the center of
the div. depending
> on the
> size of my window. How do you prevent this?
can we see the code here? It sounds to me like you're running
into problems
with an element being set to 500px wide and then a browser
window that is
400px wide. A wide img maybe? I'm only guessing at things
without seeing th
ecode though
> 3. Currently my html and css codes are in 2 different
(linked) documents.
> When
> I publish to the web do I simply load both files or do I
need to copy and
> paste
> the css coding into my html document?
Yep. Just make sure they stay relative to each other in the
same way. In
other words, if both your htm file and css file are in the
same folder on
your local machinge then they must remain in the same folder
on your server.
If your css is in a subfolder called "css" then you need to
make sure your
css file is in a similar subfolder on the server
Alex

Forms builder layout questions

Hi guys
I have three questions on forms builder:
1. Is there a way to evenly space records? I see all the allign features but not arrange evenly. It really takes a lot of time to space 10 fields evenly vertically
2. Is it possible to have a fram with an auto tabular layout that is vertical instead of horizontal? What's the use of being able to adjust the block but the form is always vertical when you use tabular format?
3. Is there a way to have the layout autogenerate again? I can see it works when I move a frame in a simple canvas, but I use the same datablock across multiple tabs. If I assign the block in the frame, then it will autoload all items into my single tab.
Thanks for any assistence.
I guess what I'm suferring with is the 'old school' forms developer. I'm on 6i. Is there any better layout features in later releases? Maybe any other tools to generate a form? (I'm pushing my luck now :-) )
Regards

Hi Andreas
Ok I found the menu now: Arrange-> Allign objects. And then there's DISTRIBUTE for both vertical and horizontal.
Ok, that will save me a lot of effort :-) Thanks!
Question 2:
- I have my Data Block's Record Orientation set to Horizontal. But the Frame completely ignores it. The Frame's Layout style is Tabular. So when I UPDATE LAYOUT to auto-layout my page there is no different if I toggle the Record orientation between horizontal and vertical.
Question 3: Ok, it seems like UPDATE LAYOUT will autogenerate the layout only if you have the frame linked to a datablock. My problem is this: I have 3 tabs (too many fields for a singe tab). I'm still deciding which fields should go to wich tab. Every time I add an item to a new tab, I have to manually position it within that tab. I cannot make they program quickly auto-layout the tab with the additional item.
Missing features:
I'm missing a few hotkeys. Don't like using the mouse so much :-)

How to create new pre-designed CSS layouts in DW CS4?

Since I'm a relative newcomer to Dreamweaver and CSS, I normally begin my new pages with one of Dreamweaver CS4's pre-designed CSS layouts in the Blank Page HTML section - 2 column fixed left sidebar, 1 column elastic centered, 3 column fixed header and footer, etc.
Lately I'm expanding to some more elaborate layouts and I'll like to be able to create new pre-designed CSS layouts of my own to add to this list. So I have a couple of questions:
1) What types of files are these layouts? They all seem to have an accompanying style sheet in addition to having a page template. What I'm getting at is, if I were to revise one of these, how would I save my revised version so that it would show up in this list of pre-designed layouts in the future?
2) Related to the first question, where are these pre-designed CSS layouts stored within Dreamweaver's file and folder structure? I can't seem to find them anywhere.
I appreciate your input on this.

Adobe scrapped the old Starter pages. Many things have changed since they were first introduced.
You'll find newer Templates and Starter Layouts below:
Dreamweaver CSS Templates for beginners
http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html
New DW Starter Pages --
http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
Ultimate Multi-Column Layouts -
http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-width s
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

Still practicing my CSS layout, and IE 7 issues.

I've revamped my site, and I've been practicing with the last 4 sites or so with mostly CSS layout....definitely a work in progress. My site is the first I've tried with overlapping images and the whole z-index thing. Everything looks great, for the most part. My issue is ALWAYS ie7, and then my issue is monitors with lower screen resolution. My sticky notes are showing up at the top of the page in IE7, looks great in 8. Every other browser seems to look great as well, as long as the resolution of the monitor is higher. I'm hoping someone can help me with positioning my sticky notes, so they don't shove my flash out to the right side of the page. Here's the URL www.theresasheridan.com.
Another site with another IE 7 issue....www.viewcamera.com. Here the issue is that the image in the maincontent div is shoved way down the page. I want to keep my width at 450 px so that I can have my side borders. Anyone have any other suggestions for me pretty please?
Last IE 7 issue (thanks so much), www.losvaquerosridingclub.org. The background color is white under the spry menu, but again...only in IE7.
Thank you!!

You are absolutely right about the validator. Some of it is way beyond me too!
However, it seems to indicate that you have some tag confusion going on there, usually that's about missing a closing element. Fixing that is a good thing because it can screw your layout. Another thing the validator points out is the omission of a few of your alt="" text. That won't muck about with any layout issues but is worth adding if you have the time or inclination. I'm afraid I don't have time to look right now but if I get the chance I'll have a go later.
With your sticky notes, it struck me that you could use absolute positioning. The trick there is to place those elements in to a containing element, set that element to position: relative and then absolutely position the sticky notes using px dimensions where you want them in the page. At the moment, you are using floats on those two parts of the page but again, I haven't quite got the time to look in detail now.
With the float drop thing and width, you would do well to Google "Box Model CSS" or something similar. Width is not just the content width but also takes into account margin, border and padding. When you add those up, the width may be too big for the containing element width which will cause the content to "drop" or to be forced into a space that can accommodate it. The other snag with the Box Model is that different Browsers handle it differently. Sometimes what you need to do to create space in the page is to put padding on the nested element which constrains it's content without affecting the width of the container.
I'm a bit of a novice myself at this and it sounds a lot to get your head around. However there is a a logic to it and once you crack it, it gets easier.
One other tip is to use FireFox browser and get the Firbug plug-in. That lets you view the page in the browser and you can tweak your CSS "live" to get an idea of how things work together. Once you have what you want you then turn to DW to make your edits.
I hope that helps rather than misleads! As I say, I'll try to look later on but in the mean time, an expert might drop by.
And while I'm here, my feeling is that you might have done better to put each of your queries in different threads. Sometimes, to see several questions in one hit is a bit daunting and I think people here tend to leave the longer questions a bit until they have time.
Regards
Martin

CSS Layout in DW CS 3

I'm kinda wondering why the id's are preceded with a class if
you open any of the premade CSS layouts in DW CS3.
example:
Two Columns, all widths in percent, with right sidebar header
and footer.
CSS:
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and
padding of the body element to account for differing browser
defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5*
browsers. The text is then set to the left aligned default in the
#container selector */
color: #000000;
.twoColLiqRtHdr #container {
width: 80%; /* this will create a container 80% of the
browser width */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a
width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center
on the body element. */
.twoColLiqRtHdr #header {
background: #DDDDDD;
padding: 0 10px; /* this padding matches the left alignment
of the elements in the divs that appear beneath it. If an image is
used in the #header instead of text, you may want to remove the
padding. */
.twoColLiqRtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the
#header div will avoid margin collapse - an unexplainable space
between divs. If the div has a border around it, this is not
necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will
allow you to keep the element away from the edges of the div */
/* Tips for 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 ".twoColLiqRtHdr #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.
.twoColLiqRtHdr #sidebar1 {
float: right; /* since this element is floated, a width must
be given */
width: 24%;
background: #EBEBEB; /* the background color will be
displayed for the length of the content in the column, but no
further */
padding-top: 15px 0; /* top and bottom padding create visual
space within this div */
.twoColLiqRtHdr #sidebar1 h3, .twoColLiqRtHdr #sidebar1 p {
margin-left: 10px; /* the left and right margin should be
given to every element that will be placed in the side columns */
margin-right: 10px;
/* Tips for mainContent:
1. the space between the mainContent and sidebar1 is created
with the right margin on the mainContent div. No matter how much
content the sidebar1 div contains, the column space will remain.
You can remove this right 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.
.twoColLiqRtHdr #mainContent {
margin: 0 26% 0 10px; /* the left margin should mirror the
margin on the header and footer for proper alignment. */
.twoColLiqRtHdr #footer {
padding: 0 10px; /* this padding matches the left alignment
of the elements in the divs that appear above it. */
background:#DDDDDD;
.twoColLiqRtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in
the footer will avoid the possibility of margin collapse - a space
between divs */
padding: 10px 0; /* padding on this element will create
space, just as the the margin would have, without the margin
collapse issue */
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right
in your page. The floated element must precede the element it
should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left
in your page. The floated element must precede the element it
should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or
break element and should be the final element before the close of a
container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
take a look at this
.twoColLiqRtHdr #container {
width: 80%; /* this will create a container 80% of the
browser width */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a
width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center
on the body element. */
how do you interpret
.twoColLiqRtHdr #container?
in the code, .twoColLiqRtHdr is a class for the <body>
tag only.
So i guess I just need some enlightenment on how this CSS
works, maybe I'm used to just defining the ID of <div> tags
(ex: #wrapper {}).
Is this use for inline styles only?
what's the advantage of using this type of styles?
I hope someone can take a look at this, thank you in advance!
:)

Yeah.... I can't really see a use for class here at all. But
that's me
(and now you!)....
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
==================
"Thierry | www.TJKDesign.com" <[email protected]>
wrote in message
news:f0lh1l$ng$[email protected]..
> Murray *ACE* wrote:
>> I use this often when I have a single template with
variable layout
>> (i.e., section-specific layouts). You can use either
>> server-scripting or template parameters to change
the ID attribute on
>> the body tag, which will trigger an entirely
different set of CSS
>> selector assignments.
>
> FWIW, I believe it makes more sense to use an ID
attribute - as you do -
> rather than a class on "BODY" as this element is unique
through the
> document.
>
> --
> Thierry
> Articles and Tutorials:
http://www.TJKDesign.com/go/?0
> The perfect FAQ page:
http://www.TJKDesign.com/go/?9
> CSS-P Templates:
http://www.TJKDesign.com/go/?1
> CSS Tab Menu:
http://www.TJKDesign.com/go/?3
>
>

Quick CSS layout question

Similar Messages

Maybe you are looking for