Centering page in CSS

Hi! Can anyone help me with this problem?
I am fairly new to Dreamweaver 8.
Have worked on tables where each page can be centered.
Now working on CSS and doing quite well (sometimes). However,
when using absolute positioning, I always get the page on the left
(of course)! How can I center the whole page in CSS?
Thanks for any advice.

On Sun, 23 Mar 2008 01:17:04 +0000 (UTC), "FullofEnergy"
<[email protected]> wrote:
>Hi! Can anyone help me with this problem?
> I am fairly new to Dreamweaver 8.
> Have worked on tables where each page can be centered.
> Now working on CSS and doing quite well (sometimes).
However, when using
>absolute positioning, I always get the page on the left
(of course)! How can I
>center the whole page in CSS?
You need to put all your content in a centered container. For
example,
add this to your css:
#wrapper {
position: relative;
width: 750px;
margin: 0 auto;
Adjust the width as desired.
However, I would urge you to avoid absolute positioning
whenever
possible. It creates many more problems than it solves.
Gary

Similar Messages

Highlighting Current Page with CSS

This morning I post my first Dreamweaver/CSS site. It is for
a DVD I produced about infant massage. www.BabyBabyOhBaby.com.
What I'd like to do is highlight the current page in the
navigation bar using either a border or color change. I've found
some sites like
http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css
but, sorry to say, I'm a beginner at both Dreamweaver & CSS and
I can't quite follow the code.
Is there some way within Dreamweaver to accomplish the
highlighting in design view without writing the code? Or perhaps
someone has some very basic elementary CSS guidance?
Thanks for your time,
David

Oh, yeah. 8)
Get that....
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
==================
"E Michael Brandt" <[email protected]> wrote
in message
news:[email protected]...
> <informative but also self-serving>
>
> Really we have made this much much easier. divaGPS
creates you-are-here"
> menu highlighting and is easy to add to any number of
pages at once - even
> Templates' Child pages. It is a commercial DW Extension
that will save
> you lots of time and effort.
>
>
http://divahtml.com/products/divaGPS/current_menu_location.php
>
> <informative but also self-serving />
>
> --
>
> E. Michael Brandt
>
> www.divaHTML.com
> divaGPS : you-are-here menu highlighting
> divaFAQ : FAQ pages with pizazz
>
> www.valleywebdesigns.com
> JustSo PictureWindow
> JustSo PhotoAlbum
>
> --
>
>
> Murray *ACE* wrote:
>> You need to know the downside to using layers as a
primary layout
>> device - open your page in Firefox (or any non-IE
browser) and bump the
>> text size up a tick or two. Ugh....
>>
>> Here's your navbar -
>>
>> <div id="navbar"><a
href="index.html">Home</a> | <a
>> href="about_dvd.html"> the DVD</a> | <a
href="preview.html">Preview</a> |
>> <a href="reviews.html">Reviews</a> |
<a href="infant_massge.html">Infant
>> Massage</a> | <a
href="contact_us.html">Contact Us</a> | <a
>>
href="shopping.html">Shopping</a></div>
>>
>> Change it to this -
>>
>> <div id="navbar"><a href="index.html"
id="button1">Home</a> | <a
>> href="about_dvd.html" id="button2"> the
DVD</a> | <a href="preview.html"
>> id="button3">Preview</a> | <a
href="reviews.html"
>> id="button4">Reviews</a> | <a
href="infant_massge.html"
>> id="button5">Infant Massage</a> | <a
href="contact_us.html"
>> id="button6">Contact Us</a> | <a
href="shopping.html"
>> id="button7">Shopping</a></div>
>>
>> Then on each page, embed a little stylesheet in the
head by changing
>> this -
>>
>> </head>
>>
>> to this -
>>
>> <style type="text/css">
>> a#buttonX { your highlight styles }
>> </style>
>>
>> and just change the "X" to whatever number button
you want to highlight.
>>
>> You can do this in Design view, but it's too
tedious.
>>

Problem centering page when printing: Lion and CS 5

Just installed Apple's Lion. Am running Illustrator CS 5.
Went to print a file, chose the center on page option from the new icon in Adobe's Print dialog box. The page does not print centered on the paper. It prints way off!
I can get the page to print to fit the page, borderlessly, which is what I would like to do now; but, I have to select the option to fit in the upper left corner. I am now anticipating problems in the future when I simply want to print a page centered.
This could be an Adobe, Apple, or Epson problem (I have an Epson Stylus Photo 1400); or a combination.
Has anyone else experienced this? Does it happen on other apps? Is there a place to report bugs to Adobe?

Good call! After your post, I did run Software Update, but the only thing there was an iTunes update. I do recall seeing an Epson printer update in the last day or two; but, I don't recall which of my computers called for it. In any case, on this computer, after checking Software Update and finding nothing, there is still an issue printing centered pages from Illustrator CS 5 15.0.2.

If I copy/duplicate a page my css-layout changes

If I copy/duplicate a page my css-layout changes, even though the pages are identical and use the same (external) css-file.
This is what happens:
I have a 2-column fixed css container. The sidebar and mainContent align perfectly on the original page, but on the duplicate page the mainContent suddenly moves to the right (it somehow adds the width of the sidebar to the margin of the mainContent).
Does anyone know what to do about this?
Thanks!

Hang on. I just checked, and it only happens in the design-view inside dreamweaver. When I preview the pages in my browsers (Safari and Opera, still need to check in IE) the problem doesn't occur. So it isn't as big of a problem as I thought it was. Still very annoying though, so if anyone knows how I can fix the problem in the design/split-view, thanks...

How to create a multi-page collapsible & CSS styleable table of contents box?

How to create a multi-page collapsible & CSS styleabe table of contents box?
Is there a tool available for Dreamweaver or for standalone operation that can create for multi-page articles a collapsible & CSS styleabe table of contents box based on the page titles?

You could do this with jQuery.
Table of Contents -
http://www.downloadjavascripts.com/list/javasiteccc68/Details.aspx
Collapsible Panels, Tables & Accordions -
http://www.downloadjavascripts.com/Collapsible_And_Free_Accordion_Panels.aspx
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Need help centering DIV in CSS

Hi- I had a "coming to jesus" last night regarding my website. I've been out of the professional web design world for about 7 years. I'm getting back in it. I used to design in tables and after some reading, I know I need to design in DIV. My problem is I do not know how to get my main section centered on the page.
I did a sketch up of what I want in layout terms.
Any suggestions on how to center a 980px div?
Here's a link to my current page with table layout.
http://www.prodentite.com/patient_edu/index.htm
Any help is appreciated.

This is a very common question, so an article has been published in the Dreamweaver FAQ
Centering a page:
http://forums.adobe.com/thread/454036
Nadia
Adobe® Community Expert : Dreamweaver
http://www.perrelink.com.au
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
http://twitter.com/nadiap

Problem with rollover hotspot behaviors & centering page

Good Morning,
I have reviewed numerous forums and tutorials in search of an answer to my problems but have failed to resolve them.
I am hoping that the experts in this forum can assist.
Here are my current issues:
Cannot seem to apply ANY behaviors to my hotspots. I would like to have the hotspots be highlighted or fade in/out upon mouseover. When I try to apply, nothing happens.
I would like to have the page centered at all times with a black background around it. Can't seem to get this to happen either.
I do not have any code in place for either of these because they would not work. So I figured I would start here.
Below is the link to my project, please let me know if you need anything further so that I can help you help me.
Thank you in advance.
http://www.saintleo.edu/uploads/VirtualTour_test-Copy.html

Hi Nancy,
Thank you SO very much for your response. I followed your instructions to center the page and it appears that it worked!
However, I am having trouble with the suggested maphighlight script.
I added the suggested code via Dreamweaver, however, when I view source code after saving, I don't see it.
I'm so confused.
This is the code that I have in Dreamweaver:
<!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>

<script type="text/javascript" src="http://www.saintleo.edu/uploads/jquery.maphilight.min.js"></script>

<script type="text/javascript" src="http://www.saintleo.edu/uploads/jquery.maphilight.js"></script>

<script type="text/javascript">
$(function() {
$('img[usemap]').maphilight();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background: #000;
width: 1000px;
margin: 0 auto;
</style>
</head>
<body>
<img src="http://www.saintleo.edu/uploads/virtual_tour_board.jpg" width="1024" height="640" border="0" align="absmiddle" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="73,147,193,249" href="http://www.saintleo.edu/uploads/Merit_Andrew_Rough_Cuts/STLEO_Abbey_4.0.mov" target="_blank" alt="St. Leo Abbey" />
<area shape="rect" coords="266,147,398,250" href="http://www.saintleo.edu/uploads/Merit_Andrew_Rough_Cuts/STLEO_Athletics_4.0.mov" target="_blank" alt="Athletics" />
<area shape="rect" coords="476,146,607,249" href="http://www.saintleo.edu/uploads/Merit_Andrew_Rough_Cuts/STLEO_CommunityCtr_4.0.mov" target="_blank" alt="Student Community Center" />
<area shape="rect" coords="63,303,191,404" href="http://www.saintleo.edu/uploads/Merit_Andrew_Rough_Cuts/STLEO_CrawfordHall_3.0.mov" target="_blank" alt="School of Education & Social Services" />
<area shape="rect" coords="267,305,397,405" href="http://www.saintleo.edu/uploads/Merit_Andrew_Rough_Cuts/STLEO_Freshman%20Dorm_4.0.mov" target="_blank" alt="Freshman Residence Halls" />
<area shape="rect" coords="475,306,605,407" href="http://www.saintleo.edu/uploads/Merit_Andrew_Rough_Cuts/STLEO_LewisHall_4.0.mov" target="_blank" alt="School of Arts & Sciences" />
<area shape="rect" coords="63,457,193,558" href="http://www.saintleo.edu/uploads/Merit_Andrew_Rough_Cuts/STLEO_Quads_4.0.mov" target="_blank" alt="Residence Apartments" />
<area shape="rect" coords="268,459,396,559" href="http://www.saintleo.edu/uploads/Merit_Andrew_Rough_Cuts/STLEO_StudentAct4.0.mov" target="_blank" alt="Student Activities Building" />
<area shape="poly" coords="464,467,582,513,546,608,427,559" href="http://www.saintleo.edu/uploads/Merit_Andrew_Rough_Cuts/STLEO_TapiaBusiness_4.0.mov" target="_blank" alt="School of Business" />
<area shape="poly" coords="887,8,1015,50,980,158,853,116" href="http://www.saintleo.edu/uploads/Merit_Andrew_Rough_Cuts/STLEO_Overview_4.0.mov" target="_blank" alt="Overview" />
<area shape="circle" coords="806,348,51" href="http://www.saintleo.edu/admissions/undergraduate/visit-saint-leo.aspx" target="_blank" alt="Schedule A Visit!" />
<area shape="rect" coords="625,598,736,624" href="http://www.saintleo.edu/admissions/undergraduate/request-information.aspx" target="_blank" alt="Request More Information!" />
<area shape="circle" coords="965,604,28" href="http://www.saintleo.edu/admissions/apply-online.aspx" target="_blank" alt="Apply Now!" />
</map>
</body>
</html>
Could you possibly take a look and see what I am missing?
I can't express how much I appreciate your expertise and assistance.
I am extremely thankful for your time and guidance.
http://www.saintleo.edu/uploads/VirtualTour_test-Copy.html
Kind regards,
Jason

Need Help Centering Page in Browser Window

I'm designing my pages by creating a graphic framework in
Photoshop, slicing and exporting images into css using Fireworks to
a Dreamweaver html page. These pages look great; but they load into
the upper left corner of the browser window
I was taking a Dreamweaver class at the Denver Art Institute,
that was worthless. I dropped the class after the 4th week and am
now teaching myself. I asked the teacher how to center this kind of
page in a browser window, so the page would behave like most
webpages, centering as you change the width of the browser window.
I also wanted to add a repeating pattern in a background image. She
told me that she didn't know how, that I would have to build the
background into my Photoshop file. So, that's what I've been doing.
However, when people with smaller monitors change pages within a
site the built-in background requires them to recenter the page
manually each time.
Is there a way to center the page and add a background image
that is not built in? I've tried using Dreamweaver's background
image and margins in the Page Properties; but that just pushes the
page to the upper left and adds the background to the right and
bottom of the page.
Please visit:
http://www.livingwater.la,
http://www.renegadegraphics.biz
and
http://www.dentalmatchmakers.net
for examples.
Thanks for your help.
Mary

>I was taking a Dreamweaver class at the Denver Art
Institute, that was worthless
Yes, those classes usually are worthless because they focus
on using the tool without giving you the proper foundation for
understanding and managing html and css. Unfortunately, all of the
example sites you gave you AP Divs (layers) as a primary layout
method, which is a terrible approach. AP Divs should be used rarely
if ever, and only when you understand how they work. When the
visitors font is sized differently than you expected, the site
falls apart. The correct approach is to learn web
design/development outside of the context of a specific
application.
http://www.w3schools.com/html/
is a good place to start for a basic understanding of html and css.
And some basic layout techniques can be found here:
http://apptools.com/examples/pagelayout101.php

Advice on vertically and horizontally centering page content

Hello
can any one offer advice on how to veritcally and
horizontally center the content. On this page
http://www.karenandersonphotography.com.au/
I want the red top/bottom borders to be the same height regardless
of screen size currently in larger screens the red at the bottom of
the page expands.
any advice appreciated.
thanks Shontelle

There is no such thing as auto height.
Vertical centering is only achievable reliably with two
approaches -
1. Using frames. <ptui>
2. Using tables - the method is described on Gary's site -
http://www.apptools.com/examples/tableheight.php
Realistically, just center things horizontally. Nobody will
care that you
forget the vertical part.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"SnakEyez02" <[email protected]> wrote in
message
news:g35s91$f7$[email protected]..
> Just put a container around the header, footer and
content to the width
> you
> want. Then set height of the footer since that is not
defined in your
> CSS.
> And lastly set the margin of the container to auto.
>

Centering page and photo optimizing

HI...I'm a newbie here with yet another question. I created
an intitial index page, but it does not come out centered when you
look at it online. How do i do this.
Also, someone suggested I optimize the photo ("you might want
to optimise the large Walktocows image as it is currently 898.12Kb
in size. You can make this a much smaller filesize without losing
acceptable image quality")...how do i do this?
Thank you!!!

Here's some code you can copy into a new DW window. It's a
quick and dirty
layout method (meaning I didn't clean up anything in the code
except to
remove the 'centre' from your <p> tags and created a
class in the head of
the document to centre content in your cells...... There are
better ways to
do this, but hopefully it will get you started. You really
should learn
some html and css before you go any further into your project
Not exactly sure why you are using the <blockquote>
tag - no need for it at
all.
Personal opinion : - choose a different font for your text
rather than comic
sans :-)
You also realise that with a graphic at that width, you will
have people
with their browser windows set at less than the width of that
picture, will
get a horizontal scroll.
Anyway, here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />

<title>Index</title>

<style type="text/css">

</style>
</head>
<body>
<table width="100%" border="0" align="center"
cellpadding="0"
cellspacing="0">
<tr>
<td class="centertext"><img src="Cowwalk.JPG"
width="1132" height="476"
/></td>
</tr>
<tr>
<td class="centertext"><p class="style2">Petit
Singe Photo</p>
<p class="style2">Photographing your
family...naturally.</p></td>
</tr>
<tr>
<td class="centertext"><p
class="style4">elizabeth devos</p>
<p class="style4">(860) 307.2809 </p></td>
</tr>
<tr>
<td><form id="form1" name="form1" method="post"
action="">
<div align="center">
<input name="radiobutton" type="radio" value="radiobutton"
/>
<a href="mailto:[email protected]"
class="style6">email me for
further information</a></div>
</form></td>
</tr>
</table>
<p align="center"><span class="style5">Page under
construction...more to
come very soon. </span></p>
</body>
</html>
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
Customisation Service Available:
http://www.csstemplates.com.au
CSS Tutorials for Dreamweaver
http://www.adobe.com/devnet/dreamweaver/css.html

Centering page content

I have a site where my content (banner, navbar, content box, etc) is all fixed. When I preview and scale the browser window the background image (1366 x 768 no-repeat cover) will stretch but the content is fixed to the left. I would like all my content and divs to stay in the center when i stretch but I have so many divs inside divs that the usual method of setting the width to 90% and 5% on the left and right margins is difficult to achieve. Is there a way to place all my page content inside 1 div that i can keep centered?

I don't need to see everything. I just need to see one example HTML page with the corresponding CSS. 2 files shouldn't be any big deal to upload.
A less preferred 2nd option is for you to copy & paste your HTML & CSS code into this web forum using the advanced editor > Syntax highlighting > Plain. Do not use email for this, it won't come through.
Nancy O.

Centering page in browser

Hi
I have used the following code to centre a site i am working
on.:
</head>
to this -
<style type="text/css">

</style>
</head>
change this -
<body ...>
to this -
<body ...>
<div id="wrapper">
and this -
</body>
to this -

</div>
</body>
It centres the pages but they take a long time to load now
compared to when they weren't centered.
Is there a different centering technique i can use that won't
cause the same problem?
P.S - The have built the site with layers and some image
ready slices.

The page load times are not affected by your centering
method. They are
affected by your server speed, your net congestion, and your
page weight.
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
==================
"Dilroy" <[email protected]> wrote in
message
news:efgskn$p11$[email protected]..
> Hi
> I have used the following code to centre a site i am
working on.:
> </head>
> to this -
> <style type="text/css">
> 
> </style>
> </head>
> change this -
> <body ...>
> to this -
> <body ...>
> <div id="wrapper">
> and this -
> </body>
> to this -
> 
> </div>
> </body>
>
> It centres the pages but they take a long time to load
now compared to
> when
> they weren't centered.
>
> Is there a different centering technique i can use that
won't cause the
> same
> problem?
>
> P.S - The have built the site with layers and some image
ready slices.
>

Centering a Horizontal CSS only, jQuery, or Spry navigation bar within a Div

Hello all. I need a solution for centering a horizontal style nav bar whether it be css only, jQuery or Spry based. I've been trying to use widgets from the adobe widget browser or other ones I've been able to find online. I have been able to get the graphic that goes behind the links to span the entire width of the Div, but I can't move the actual links to the center of the screen and get it to stay in the middle like the rest of the elements do when you resize the page. The links always stay anchored to the left side of the page. I've been able to move them all the way to the right side of the page through a certain css change, but that is not what I'm looking for. Do I need to resize the Div, or add a div within the div? Do I need to split the horizontal width of the single div into three div's and put the nav bar into the middle one? If that is the solution, how do I add the div's next to each other, I tried adding a div within the div, but nothing really appears to show up, so that must essentially be a wrong way of going about it.
Well anyways, I need some advice, somebody please lead me in the right direction on how to get this right. In the div above the one I'm trying to make this happen in, I have a flash object and it just centers itself perfectly with the div and moves with the rest of the page fluidly when you resize. And the same goes for a div right above that which contains the company logo.
Thanks for help in advance.

This is what I mean by the dotted lines not lining up evenly at the ends.
Here is the source code for the page, followed by the css:
<!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 name="description" content="Common Wealth Web Solutions: Web Development, Graphic Design, Media Consultant, Community Engagement" />
<meta name="keywords" content="Common,Wealth,Web,Solution,Design,Graphic,Development,Interactivity,services,fla sh,php,javascript,ajax,professional,Caleb Wright, Peter Wallis,artist,video,multimedia,production,search engine optimization,SEO,video production design" />
<meta http-equiv="Content-Type" content="text
/html; charset=UTF-8" />
<title>Common Wealth Web Solutions: Web Development, Graphic Design, Media Consultation, Community Engagement</title>
<link href="stylesMain.css" rel="stylesheet" type="text/css" />



<script type="text/javascript" src="scripts.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css">
#apDiv1 {
    position:absolute;
    width:1844px;
    height:43px;
    z-index:1;
    left: 64px;
    top: 253px;
body {
    background-color: #FFF;
</style>
<link href="SpryAssets/SpryAccordion_flexible.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:link {
    color: #00F;
</style>
<style type="text/css">
#menu {
width: 700px;
margin: 0 auto;
#menu ul {
padding: 0;
margin: 0;
text-align:center;
list-style:none
#menu li{
padding: 0;
margin: 0;
display:inline;
margin-right: -2px;
#menu a {
background-color:#66F;
padding: 6px 15px;
color: #fff;
text-decoration: none;
#menu a:hover {
background-color:#39C;
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-5']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-6']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<link href="CSSOnlyMenu4/css/menu4.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141545: #OAWidget */
#menu4 ul {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 30px;
    letter-spacing: -3px;
    border-top:5px dotted #003399;
    border-bottom:5px dotted #003399;
    margin:20px;
#menu4 ul li a{
    color: #003399;
    padding: 10px 5px 10px 10px;
    width: 170px;
#menu4 ul li a:hover span.title{
    color:#00adef;
#menu4 ul li a span.text{
    font-family: Georgia, serif;
    font-size: 13px;
    color:#c7e7f3;
/* EndOAWidget_Instance_2141545 */
</style>
<script type="text/xml">

</script>
</head>
<body>
<div id="wrapper-body">
<div id="wrapper-1">
    <div id="branding">
      <h1>
      <div>
        <p><img src="images/lorentzpaintinglogo_cropped2.png" width="317" height="110" alt="Lorenz Painting Co." longdesc="http://www.lorenzpainting.com" /></p></div>
      <div id="flash">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700" height="250" id="FlashID" title="Lorenz Painting Co Flash Widget">
        <param name="movie" value="LorentzBanner.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        
        <object type="application/x-shockwave-flash" data="LorentzBanner.swf" width="700" height="250">
          
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="6.0.65.0" />
          <param name="expressinstall" value="Scripts/expressInstall.swf" />
          
          <div>
            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
          </div>
          
        </object>
        
      </object>
      </h1>
<div>
<div id="menu4">
    <ul>
      <li><a href=""> <span class="title">Home</span> <span class="text">Why us?</span> </a> </li>
      <li><a href="">Services<span class="text">What we do</span> </a> </li>
      <li><a href=""> <span class="title">Testimonials</span> <span class="text">What they say</span> </a> </li>
      <li><a href=""> <span class="title">Contact</span> <span class="text">How to get in touch</span> </a> </li>
    </ul>
</div>
<p> </p>
<p> </p>
<p> </p>
</div>
      <div></div>
    </div>
    <div id="wrapper-2">
      <div id="content-top" class="png"></div>
      <div id="wrapper-3">
        <div id="content-1">
          <div class="content-wrap">
            <p>Home</p>
            <p>Contact</p>
          </div>
        </div>
        <div id="content-2">
          <div class="content-wrap">
stuff
<p> </p>
          </div>
        </div>
        <div id="content-bottom"></div>
      </div>
      <div id="footer">
        <p><strong>Lorentz Painting Co., 2011</strong><strong></strong></p>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
jQuery("#jQueryUIAccordion").accordion({
        event: "click",
        collapsible: false,
        autoHeight: true
</script>
</body>
</html>
Be forewarned, there are a bunch of rules in here that don't apply to anything anymore, as it's from a recycled rules from another site I built. Sorry.
I will first put the CSS for the main style sheet, and I will put the CSS for the Horizontal Nav Bar in after.
CSS:
Main style sheet:
@charset "UTF-8";
body
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    color: #6B6B6B;
    background: #8D927C url(images/bg_body.jpg) repeat-x;
    margin: 0;
    padding: 0;
    min-width: 800px;
    text-align: center;
    background-color: #000;
h2, h3, h4
    font-size: 16pt;
    font-weight: normal;
    margin: 15px 0 0 0;
#wrapper-3 p
    padding: 0;
    line-height: 1.35em;
    margin-top: 8px;
    margin-right: 0;
    margin-bottom: 8px;
    margin-left: 0;
#wrapper-3 ul
    list-style-type: none;
    margin: 8px 0;
    padding: 0;
#branding
    margin: 0 0 0 0;
@Generic anchor (link) styles
a:link, a:visited
    color: #4f4f3f;
a:hover, a:active
    color: #000000;
@Inline image styles
img.float-left
    float: left;
    margin: 0 6px 6px 0;
img.float-right
    float: right;
    margin: 0 0 6px 6px;
img.border
    background: #FFF;
    padding: 2px;
    border: 1px solid #999;
@Tab navbar styles
#hornav ul
    margin: 0;
    list-style-type: none;
    line-height: normal;
    padding: 0;
    text-align: center;
    margin-bottom: 60px;
    font-size: 0.8em;
    text-transform: uppercase;
#hornav ul li
    display: inline;
    margin: 0 2px 0 0;
    padding: 3px 0 3px 10px;
#wrapper-body #wrapper-1 #hornav ul li a br {
    height: 400px;
#hornav ul li a
    text-decoration: none;
    margin: 0;
    background-repeat: inherit;
    background-position: center center;
    padding-top: 50%;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
#hornav ul li a:link, #hornav ul li a:visited
    color: #3e3f2f;
#hornav ul li a:hover, #hornav ul li a:active
    color: #000000;
@Secondary navigation styles
#navcontainer
    background: transparent url(images/bg_navlist-top.jpg) no-repeat top center;
    margin: 0;
    padding: 12px 0 0 0;
#navcontainer ul
    margin: 0;
    list-style-type: none;
    line-height: normal;
    padding: 0 0 12px 0;
    border-top: 1px solid #FFF;
    background: transparent url(images/bg_navlist-bottom.jpg) no-repeat bottom center;
#navcontainer a
    display: block;
    padding: 3px 6px;
    width: 168px;
    margin: 0 10px;
    background-color: #c4bfac;
    border-bottom: 1px solid #FFF;
#navcontainer a:link, #navlist a:visited
    color: #FFF;
    text-decoration: none;
#navcontainer a:hover
    background-color: #90937e;
    color: #FFF;
@Masthead text styles
#branding
    margin: 0;
    padding: 0;
#branding h1
    color: #000;
    padding: 10px 0 0px 0;
    border-top: 4px solid #656e5d;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 28px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    margin: 0;
@Layout styles
#wrapper-body
    background: transparent url(images/bg_wrapper-body.jpg) no-repeat top right;
    width: inherit;
    margin: 0;
    padding: 0;
#wrapper-1
    width: auto;
    background: transparent url(images/bg_wrapper-1.jpg) no-repeat;
    margin: 0;
    padding: 0;
#wrapper-2
    width: 45em;
    text-align: center;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
#wrapper-3
    background: url(images/bg_wrapper-3.jpg) repeat-y;
    color: #333;
    text-align: left;
#content-top
    margin: 0;
    height: 1em;
    background: url(images/bg_content-top.jpg) no-repeat;
    font-size: 0;
    line-height: 0;
#content-1
    float: left;
    width: 12em;
    font-size: 0.9em;
    padding: 0;
    margin-top: 2em;
    margin-right: 2em;
    margin-bottom: 0em;
    margin-left: 0em;
#content-2
    float: left;
    width: 40em;
    padding: 0;
    font-size: 0.8em;
    margin-top: 2em;
    margin-right: 0px;
    margin-bottom: 0em;
    margin-left: 0em;
#content-3
    float: left;
    width: 250px;
    font-size: 10pt;
    margin: 0;
    padding: 0;
#content-4 {
    width: 190px;
    padding: 0px;
    line-height: 0px;
#content-bottom
    clear: both;
    height: 1em;
    background: url(images/bg_content-bottom.jpg) no-repeat;
    font-size: 0;
    line-height: 0;
.content-wrap
    margin: 0;
    padding-top: 0px;
    padding-right: 2em;
    padding-bottom: 5px;
    padding-left: 0px;
#footer p
    font-size: .75em;
    margin: 12px 0;
p.content-wrap {
    font-size: 9pt;
    color: #999;
@Blog post styles
.date
    float: left;
    height: 52px;
    width: 52px;
    background: url(images/date.png) no-repeat;
    margin-right: 10px;
    padding-top: 0px;
    line-height: normal;
.date .month
    display: block;
    text-align: center;
    color: #FFF;
    font-size: 11px;
    padding-top: 4px;
    text-transform: uppercase;
.date .day
    display: block;
    text-align: center;
    padding-top: 5px;
    color: #222;
    font-size: 18px;
    font-weight: bold;
.meta
    display: block;
    font-size: 11px;
    color: #666;
    clear: right;
.blog-entry
    clear: both;
    padding-top: 2px;
#searchform
    margin: 8px 0;
    padding: 0;
@Search form styles
#searchform fieldset
    margin: 0;
    padding: 0;
    border: 0;
#searchform label
    color: #999;
    display: none;
#searchform input
    width: 160px;
    color: #222;
#searchform #submitquery
    display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap p {
    line-height: 1.35em;
    text-align: justify;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-1 .content-wrap #Accordion1 .AccordionPanel.AccordionPanelOpen .AccordionPanelContent p {
    line-height: 1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #sprytextarea1 span .content-wrap {
    font-size: .5em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website {
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website {
    display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website label {
    display: none;
#website {
    display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
    font-size: 1.1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
    font-size: 1.1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
    font-size: 4em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset .AccordionPanelContent {
    font-size: 1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset .AccordionPanelContent {
    font-size: 3em;
.fieldname {
    font-size: .9em;
CSS for Horizontal Nav Bar:
#menu4 {
    width: 829px;
    margin: 0 auto 0 auto;
#menu4 ul {
    list-style:none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 30px;
    letter-spacing: -3px;
    line-height: 1.2em;
    border-top:5px dotted #c7e7f3;
    border-bottom:5px dotted #c7e7f3;
    float:left;
    clear:both;
    margin:20px;
    text-align:center
#menu4 ul li{
    float:left;
#menu4 ul li a{
    display:block;
    text-decoration:none;
    padding:10px 10px 5px 10px;
    color:#66b8d8;
    width:170px;
#menu4 ul li a span{
    display:block;
#menu4 ul li a span.title{
#menu4 ul li a:hover span.title{
    color:#00adef;
#menu4 ul li a span.text{
    padding:0px 5px;
    font-family: Georgia, serif;
    font-size: 13px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.6em;
    color:#c7e7f3;
    visibility:hidden;
#menu4 ul li a:hover span.text{
    visibility:visible;
Thanks!

Can't change the background of table cells on a page with CSS

New CSS guy here, so excuse me if I sound stupid! I built up
a site with DW8 using CSS for basic page formatting. The site is a
new version of an old one I did in GoLive. I copied/pasted a fairly
large table onto the new site in DW, and the table came in fine,
the text was now the font and style of the main style sheet. But, I
can't format the table itself now. The header rows were filled blue
with white text, as an example.
I can change the bg color down in the toolbar like old times,
but nothing actually changes on the screen. I'm assuming it's being
overridden somehow by my CSS style sheet?
What would I have to do to get back this formatting
functionality?
here is an example page:
http://www.curtlo.com/prototype/pricing.html

> The header rows were
> filled blue with white text, as an example.
There is no such style on this 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
==================
"synterx" <[email protected]> wrote in
message
news:eig96t$oir$[email protected]..
> New CSS guy here, so excuse me if I sound stupid! I
built up a site with
> DW8
> using CSS for basic page formatting. The site is a new
version of an old
> one I
> did in GoLive. I copied/pasted a fairly large table onto
the new site in
> DW,
> and the table came in fine, the text was now the font
and style of the
> main
> style sheet. But, I can't format the table itself now.
The header rows
> were
> filled blue with white text, as an example.
>
> I can change the bg color down in the toolbar like old
times, but nothing
> actually changes on the screen. I'm assuming it's being
overridden somehow
> by
> my CSS style sheet?
>
> What would I have to do to get back this formatting
functionality?
>
> here is an example page:
>
>
http://www.curtlo.com/prototype/pricing.html
>

Promoted links in center of page using CSS code in a script editor

I do not have access to the sharepoint designer (company policy) but I'm trying to get my promoted links in the center of my SharePoint-page. This all in a way that they stay centered when I change form laptopview (1366x768) to desktopview (1920x1080).
I've googled the problem but no solution is (yet) presented.
Can you help me to the script editor code I need?

Hi,
Have you tried using javascript inside a Content Editor Web Part (CEWP) ?
Here is an example : https://social.msdn.microsoft.com/Forums/office/en-US/b7cf5f24-f970-44d9-a50d-382d77d0def9/how-do-i-center-a-list-view-webpart-style-boxed?forum=sharepointcustomizationlegacy
Regards
Samuel Levesque | Sharepointerie.com |
Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.

Centering page in CSS

Similar Messages

Maybe you are looking for