CSS website layout problems

Hi guys,
I am new to CSS, I have considerable knowledge HTML and several programing languages, very much outdated. I have a informational website that is several years old.
www.woodgas.net
I used frontpage to do my website and to do the updates over the years. It is time for a face lift.
I have dreamweaver CS5 installed and am having one heck of a time getting my page to do what I want. I am trying to style it similar to a frame set of a top banner and 3 columns. And a flydown menu at the top of the center column. The right and left columns need to be 160X600 and the center column to be centered between the right and left.
I want the banner to center on the page top. And the right and left columns to move as far as possible to the screen edge away from my center column. This will keep my ads as far away from my content as possible. My website has been completely supported out of my pocket and I am hoping to generate a little income to keep the site updated.
I don't want to use frames, as this would keep new ads from loading as a person navigates to a new page on my site.
Any help would be appreciated I am sure that if you check out my current site, you will find two things it is about a pretty cool subject and it could use a face lift!
Thanks
Jonathan

Gary is right. APDivs as a primary layout method seldom works well. Here is why:
http://apptools.com/examples/pagelayout101.php
Learn CSS positioning in 10 Steps
http://www.barelyfitz.com/screencast/html-training/css/positioning/
While you learn the finer points of CSS positioning, it's very helpful to start a project with a pre-built CSS layout. You can learn a lot from looking at the code.
PVII CSS Templates or Page Pack - Rock solid. Thoroughly tested to perform well in all browsers.
http://www.projectseven.com/products/index.htm
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
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

Help with CSS beginner layout problem?

Making my first CSS website. See http://www.capeannphysicaltherapy.com/index-test.html
The DIV layout held up fine even after I copied text into the #main_text DIV. But when I turn it into html the #main_content DIV jumps down even though the text stays in place. I'd appreciate any help.
Thanks

Increase text size in browser (Ctrl+++) Zoom, text only - to test your pages.
Get rid of DIV container HEIGHT-itis:
#container {
width: 812px;
background: #FFFFFF;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 566px; **remove me, no height is needed here**/
#left_container {
width: 222px;
float: left;
background-image: url(images/banner_left.gif);
height: 566px; /**remove me**/
min-height: 566px /**for non-IE browsers only**/
#main_content {
background-image: url(images/content_area.gif);
height: 370px; /**remove me**/
min-height: 370px; /**for non-IE browsers only**/
width: 590px;
Web pages need to be flexible. Do a Google search for "CSS Min- & Max width" and "CSS Min- & Max heights."
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.com/blogspot.com

Css centering layout problem

Hi,
I'm building a website from a photoshop design and I have a
problem with the layout I can't see how to fix:
I have a header and a footer which both need to stay centered
and expand to whatever the browser window width is set to.
Between them I have a div of the main content of the pages
which also needs to be centered.
All seems very simple. I would normally just have a big div
around the whole page with an align="center". Job done.
But the problem is the space to the left of the content div
needs to be grey and the space on the right needs to be black.
Therefore I assume I'm going to need 3 divs. 2 for the left and
right spaces and another with the main content between them.
Both the side divs will need to expand somehow to fill the
space while keeping the fixed width content div centered. But I
think they will also have to be floated to sit side by side.
I cant seem to get the divs to stay in the correct places or
keep the side ones filling the space between the content div and
the edges of the browser.
Can anyone help?
Thanks,
Olliebear

Is this what you au trying to do?
http://starttoweb.com/
If so, you are welcome to grab the CSS file and mostly to fit
your needs.
Cheryl D Wise
Adobe Community Expert
http://starttoweb.com
"Olliebare" <[email protected]> wrote in
message
news:fpn0q2$p1v$[email protected]..
> Hi,
>
> I'm building a website from a photoshop design and I
have a problem with
> the
> layout I can't see how to fix:
>
> I have a header and a footer which both need to stay
centered and expand
> to
> whatever the browser window width is set to.
>
> Between them I have a div of the main content of the
pages which also
> needs to
> be centered.
>
> All seems very simple. I would normally just have a big
div around the
> whole
> page with an align="center". Job done.
> But the problem is the space to the left of the content
div needs to be
> grey
> and the space on the right needs to be black. Therefore
I assume I'm going
> to
> need 3 divs. 2 for the left and right spaces and another
with the main
> content
> between them.
>
> Both the side divs will need to expand somehow to fill
the space while
> keeping
> the fixed width content div centered. But I think they
will also have to
> be
> floated to sit side by side.
>
> I cant seem to get the divs to stay in the correct
places or keep the side
> ones filling the space between the content div and the
edges of the
> browser.
>
> Can anyone help?
>
> Thanks,
>
> Olliebear
>

Dreamweaver website layout problems

Hello new here
an someone pls tell me why my website is perfect on my computer where as on other computer the layout is all over the place
pls help
thank you

hans-g. wrote:
Hi SnakEyez02,
to explain my suggest (I quote killer): "the problem is i have tried the webpages on other computers and they are out of place where as on my pc its pefect images are out of place and the layout doe not fit to screen which prompted me to take this action because ..."
I think it would be a good interim solution if killer could search for the error first in offline way, as long as he does not have access to the server.
Hans-G.
Ok. But how does downloading the Typo3 CMS help view it offline? Wouldn't this person be better downloading:
WAMP -http://www.wampserver.com/en/
MAMP - http://www.mamp.info/en/index.html
XAMPP - http://www.apachefriends.org/en/xampp.html

CSS Liquid Layout Problem

I'm trying to do a simple masthead that will span the width
of the page. The masthead consists of a logo on the left, and a big
graphic on the right (it is a long story...). The left side of the
big graphic fades into the background, and the logo and .the
graphic move apart as the page is made wider.
Everything is fine as long as the browser window is wide
enough for both. As I shrink the window, however, the graphic drops
below the logo and the masthead is suddenly twice as high. What I
want to happen is for horizontal scroll bars to appear when the
extra space between the logo and the graphic has been squeezed out.
Here is the HTML:
<div id="masthead">
<div id="logo"><img src="images/logo.jpg"
/></div>
<div id="graphic"><img src="images/graphic.jpg"
/></div>
</div>
And the CSS:
#masthead {
background-image: url(images/masthead-bg.gif);
white-space: nowrap;
max-height: 89px;
#logo {
width: 148px;
height: 89px;
float: left;
#graphic {
width: 736px;
height: 89px;
float:right;
I'd be grateful for any suggestions.

Luke,
Put the background image on the body. By default, it will
tile to fill
the entire browser window.
HTH,
Randy
> I'm trying to make a simple page that has a background
image at the top of the
> page that expands to fix 100% of the page. just under
that I have an area set
> at 960px width and is centered on the page.
>
> The problem I have is that is you make the window
smaller than 960px you will
> see the scroll bars, scrolling left you can see the rest
of the fixed width div
> area but the 100% area at the top stops repeating and
does not fill the page.

CSS Layout Problem?

Can someone please help me with a layout problem.
As far as I can tell the page looks as it should in Netscape,
Firefox, etc., but IE6 and 7 refuse to work correctly.
The page I am working on is:
http://www.vmtampademo.com/localangler/testpage.html
Most of the picture caption and headline of the middle column
is behind the picture. I attempted to force the info with a
seperating div which seems to work sometimes. I doubt that this is
the correct solution. What am I doing wrong?
Thank you for the help!

It looks fine in Firefox 2.0.0.1, Opera 9.10, and IE 7.

Problems with Firefox 5.0.1 website layouts in Lion

After I downloaded Lion, I ran Firefox 5.0.1. Immediately, I noticed significant layout problems in CNN.com and MSNBC.com. And on Facebook, the friends, message, and notification icons at the upper left didn't work. Nor did entering comments to Facebook posts. Even the button that says "View X Comments" in friends' posts didn't work. For comparison, all of them work fine on Safari 5.1.
I rebooted Firefox 5.0.1 with plugins disabled, and still encountered the same problems.

I am also having problems with Google Mail and Yahoo mail.
Buttons are un-selectable and operations just time out.
Seems like a major number of issues.
In Yahoo mail when trying to check boxes to delete email - the box will not fill with the check.
When opening some email all that opens is totally blank.
Other email upon opening will download the text of the email (visible) with the timer circling endlessly.
Thanks

Text layout problem

I apologize for the plethora of stupid questions I am about to ask - I am brand new to dreamweaver and atempting to design a very simple website layout for myself. My most glaring problem is this: I wish for text to be in the centre of the webpage and I wish it to stay there. I have drawn an apDiv in the centre of the page and added my text. As you most likely have guessed, as soon as I rezise my browser the background floats under the text.
How can I fix the text so it moves with the browser and stays in the centre?
thanks everyone. here is my code thus far.
~L
<!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">

</style></head>
<body bgcolor="#666666">
<div id="text">
<div align="center">
    <p>lukas peters photography</p>
</div>
</div>
<p>                                                             </p>
<p>                     </p>
</body>
</html>

1) To horizontally center your web site, use default CSS positioning (which is no positioning at all). APDivs cannot be centered.
2) Define a container width in pixels, ems or percentages.
3) Add margin-left and margin-right of auto (browser default).
CSS:
body {
width: 900px;
background: #666 url(webpageB.jpg) no-repeat center fixed;
margin: 0 auto; /**centers on screen**/
text-align: center; /**centers older browsers**/
#text {
background: #FFF;
color: #000;
width: 300px;
margin: 0 auto;
HTML:
<body>
<div id="text">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Your text goes here</p>
</div>   
</body>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

"inc" extension wont display in css page layout

i am new to building pages with css. all i know is table based layouts. im trying to make a new template for my sites. also they are ASP pages. my problem is when im trying to use the "inc" code for my headers, footers, navigation, and a right menu. they dont display.
what would be different for getting those files to display in a css page layout?

You're close but you're missing quotes around your include file names. And your includes contain too much information.
Include files are nothing more than snippets of html code. An include statement is inserted into the parent page where you want the content to appear. For this demo, I have three pre-built SSI files in my Includes folder:
HeadMenu.ssi
LeftLinks.ssi
Footer.ssi
My parent page has been saved as Untitled.shtml (.shtml or .shtm tells the server there are include statements in the page). You may also use .php or .asp if your server supports these, however those include statements look different from the ones in this demo.
<!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="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">

 </div>
<div id="sidebar1">

 </div>
<div id="mainContent">
<h1>Main Content H1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing odio.</p>
 </div>
<div id="footer">

 </div>
 </div>
</body>
</html>
My HeadMenu.ssi file looks like this with only the relevant menu code.
<div id="menu">
<a href="#content">skip menu ></a>
<a class="intro" href="index.shtml">home</a>
<a class="gallery" href="gallery.shtml">gallery</a>
<a class="tools" href="tools.shtml">tools</a>
<a class="portfolio" href="portfolio.shtml">portfolio</a>
<a class="fees" href="Fees.shtml">fees</a>
<a class="links" href="links.php">links</a>
<a class="contact" href="contact.shtml">contact</a>
</div> 
You can see a working example of this on my website: http://alt-web.com
One last thing, you won't see includes appear on in browser until you publish to a web server. If you want to test pages locally, you'll need to install a local testing server (WAMP, XAMP, MAMP) on your computer.
Ask your server host if they support SSIs and whether or not .shtml or .shtm files are set-up up to parse includes. Sometimes you need to add this to your .htaccess file.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

This Connection is Untrusted and few websites layout is broken

I have tried almost all the solution to get rid of the issues but could not find a solution.
My Chrome and IE is working fine as its expected in same machine but not firefox.
Issues - 1
Website layout is disorted eg.
https://support.mozilla.org/en-US/products/firefox?as=u&utm_source=inproduct
https://www.facebook.com/
Issues - 2
This Connection is Untrusted
You have asked Firefox to connect securely to www.facebook.com, but we can't confirm that your connection is secure.
Normally, when you try to connect securely, sites will present trusted identification to prove that you are going to the right place. However, this site's identity can't be verified.
I have tried following Solution:
1. Uninstalling firefox completly including deleting profile + reboot + install
2. Reset the Firefox
3. Clear the caches and evreything.
But could not solve my problem so now I am posting this questions. I am using Latest Firefox with Windows 7.
Please help me to get rid of these issues as I am highly dependent on Firefox.
-Rajesh
troubleshoot info
Application Basics
Name: Firefox
Version: 33.1.1
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:33.0) Gecko/20100101 Firefox/33.0
Multiprocess Windows: 0/1
Crash Reports for the Last 3 Days
All Crash Reports
Extensions
Name: Troubleshooter
Version: 1.1a
Enabled: true
ID: [email protected]
Name: WebEx Productivity Tools
Version: 2.0
Enabled: false
ID: [email protected]
Graphics
Adapter Description: Intel(R) HD Graphics 4600
Adapter Drivers: igdumdim64 igd10iumd64 igd10iumd64 igdumdim32 igd10iumd32 igd10iumd32
Adapter RAM: Unknown
Device ID: 0x0416
DirectWrite Enabled: false (6.1.7601.18245)
Driver Date: 6-3-2013
Driver Version: 9.18.10.3204
GPU #2 Active: false
GPU Accelerated Windows: 0/1 Basic (OMTC)
Vendor ID: 0x8086
WebGL Renderer: Google Inc. -- ANGLE (Intel(R) HD Graphics 4600 Direct3D9Ex vs_3_0 ps_3_0)
windowLayerManagerRemote: true
AzureCanvasBackend: skia
AzureContentBackend: cairo
AzureFallbackCanvasBackend: cairo
AzureSkiaAccelerated: 0
Important Modified Preferences
browser.cache.disk.capacity: 358400
browser.cache.disk.smart_size.first_run: false
browser.cache.disk.smart_size.use_old_max: false
browser.cache.frecency_experiment: 4
browser.places.smartBookmarksVersion: 7
browser.sessionstore.upgradeBackup.latestBuildID: 20141113143407
browser.startup.homepage_override.buildID: 20141113143407
browser.startup.homepage_override.mstone: 33.1.1
dom.mozApps.used: true
extensions.lastAppVersion: 33.1.1
gfx.direct2d.disabled: true
layers.acceleration.disabled: true
network.cookie.prefsMigrated: true
places.history.expiration.transient_current_max_pages: 104858
plugin.disable_full_page_plugin_for_types: application/pdf
plugin.importedState: true
privacy.sanitize.migrateFx3Prefs: true
Important Locked Preferences
JavaScript
Incremental GC: true
Accessibility
Activated: false
Prevent Accessibility: 0
Library Versions
NSPR
Expected minimum version: 4.10.7
Version in use: 4.10.7
NSS
Expected minimum version: 3.17.2 Basic ECC
Version in use: 3.17.2 Basic ECC
NSSSMIME
Expected minimum version: 3.17.2 Basic ECC
Version in use: 3.17.2 Basic ECC
NSSSSL
Expected minimum version: 3.17.2 Basic ECC
Version in use: 3.17.2 Basic ECC
NSSUTIL
Expected minimum version: 3.17.2
Version in use: 3.17.2
Experimental Features
---------------------

hello, first please make sure that the date, time & timezone are set correctly on your system. if this doesn't solve the issue (or it is already set properly), a possible solution depends on different factors:
* what is the '''error code''' shown under ''technical details'' on the error page?
in case the error code equals ''sec_error_unknown_issuer'', please attempt to add an exception on the bottom of the error page & inspect the certificate (see the screenshot attached for instructions):
* which '''issuer information''' does the certificate contain?
thank you!
[["This Connection is Untrusted" error message appears - What to do]]

Creating template areas when using CSS based layout

Hi:
I'm ransitioning to pure CSS based layouts. When I used tables for layouts I could select a table cell and make that an editable template region. But when I'm setting everything up in Divs, you can't "select" a div in Layout mode. Indeed, layout mode doesn't really work at all - things are shown all jumbled and you have to use Preview or open in a browser window to see how things will look. (I'm not using the grid - maybe I should?) Is there a way to select a div and make it an editable template region?
I'm using GoLive CS2 on a Mac.
Thanks!

Is this affecting ALL text on that page?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"matthewtrefz" <[email protected]> wrote in
message
news:eo5o8v$aqa$[email protected]..
> We have recently performed an upgrade to our site. The
entire layout is
> css
> based. The problem we have run into is that Contribute
users can no longer
> select the content using the mouse. In fact the only way
to edit the
> content is
> to use the arrow keys on the keyboard. Though it is
possible to edit
> content
> this way it is very time consuming and confusing to most
of our users.
>
> I have tired to edit pages based on a template, and
pages not based on a
> template and get the same issue.
> What can I do to fix this problem?
>
> The web address is
http://engineering.osu.edu
>
> Thanks,
> Matthew
>

Mac 10.5.7 update has made golive 9 stop rendering css in layout view

Has any one else on Mac with the mac 10.5.7 update have new issues with golive 9 not rendering css in layout view. It works still in pdf preview and if I boot to 10.5.6 all is normal again. Also in the live rendering engine it works as well...just not in layout view- its very disconcerting. Any workarounds? anyone else with this issue?
thanks
Adam

I have been using an external CSS file simply for defining font styles
site wide. The rendering of them on screen in layout view is now just
the plain default font prior to showing the CSS altered version of it.
Sorry, I'm not sure I understand what you mean here. You mean it shows your text in the default and *then* renders it correctly using the CSS after a delay?
I tried torching the prefs...perhaps I did the wrong file...what file is to be deleted?
~/Library/Preferences/Adobe GoLive 9.0 Prefs
~/Library/Preferences/Adobe/GoLive/Settings9 (a folder)
~/Library/Preferences/com.Adobe.GoLive.plist
Move them out to, say, the Desktop. If they are not the cause of the problem, put them back replacing the newly-created versions.
I cloned my os prior to the update and all was fine. Rebooting to clone
css renders normal...but in 10.5.7 its not rendering in layout view.
I'm not seeing the same thing here with GL9/OS X 10.5.7, so it may be its something specific to your particular update. You might also want to consider doing a re-import of the site to recreate the site file and see if that helps.
John

Website layout not good on Internet Explorer 7 - Help please?

I created an html/css website using Dreamweaver CS5. The site layout looks great on almost all browsers except for Internet Exploder 7. It looks like all of the text of the home page is shifted toward the top. In IE7, the header titles of the bottom three boxes; news, renewable energy and success stories are pushed up into the large green content box.
website: http://www.directnuenergy.com/
Does anyone have any suggestions? I will appreciate any advice or tips.
designshop286

Hi,
as Nick said, "I wouldn't worry TOO much about that one". To support that, please have a look to these statistics:
http://gs.statcounter.com/#browser_version-ww-monthly-201003-201103
I think this is tremendously comforting. If you only want to see how the different versions of the IE browser present your side, you can use this link:
http://www.my-debugbar.com/wiki/IETester/HomePage
Otherwise, it's certainly good, if you validate your Web page. To cut it short, you did very well!
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.directnuenergy.com%2F&charset=%28detect +automatically%29&doctype=Inline&group=0
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.directnuenergy.com%2F&pr ofile=css21&usermedium=all&warning=1&vextwarning=&lang=en
http://validator.w3.org/check?uri=http%3A%2F%2Fjigsaw.w3.org%2Fcss-validator%2Fvalidator%3 Furi%3Dhttp%253A%252F%252Fwww.directnuenergy.com%252F%26profile%3Dcss21%26usermedium%3Dall %26warning%3D1%26vextwarning%3D%26lang%3Den&charset=%28detect+automatically%29&doctype=Inl ine&group=0&user-agent=W3C_Validator%2F1.2
Good luck!
Hans-Guenter

Design/Layout Problem in OOTB SP "Docs I'm following" page

Hello
The "Docs I'm following" My Sites page in SP 2013 has the following layout problem:
Long document titles overlap with other elements (see also screenshot).
Note: This is default SP, i.e. we have not deployed any custom branding.
I guess this is a problem which can easily be corrected even without having to wait for a SP update. Since I'm not very good with design changes I would be grateful if you could provide
us with a quick fix, e.g. an updated css file.
Thanks a lot.
Best regards
John

Hi ,
For your issue, you can add the following code into your MySite MasterPage:
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".ms-contentFollowing-itemTitle a").each(function(i){
$(this).text(shorten($(this).text(),32));
function shorten(text,maxLength) {
var ret = text;
if (ret.length > maxLength) {
ret = ret.substr(0,maxLength-3) + "...";
return ret;
</script>
Best Regards,
Eric
Eric Tao
TechNet Community Support

Can no longer open PDF files from my emails sent from other websites. Problem seems to correlate with automatic upgrade of free adobe software (from version 11 to Reader DC)?

Can no longer open PDF files from my emails sent from other websites. Problem seems to correlate with automatic upgrade of free adobe software (from version 11 to Reader DC)?

To configure the browser to use Acrobat or Adobe Reader to open PDF files:
1. Quit Internet Explorer(any other browser)
2. Start Acrobat or Adobe Reader.
3. Choose Edit > Preferences.
4. Select Internet in the list on the left.
5. Deselect(Uncheck) Display PDF in Browser, and click OK.
6. Restart Internet Explorer

CSS website layout problems

Similar Messages

Maybe you are looking for