Centering Layout with CSS

I've usually built sites with tables but this time I've used
divs instead and I can't get the layout to center using CSS. It
looks fine in the Design view but not in a browser, any browser.
Here's a link to the page
http://westvillage.ca/index3.html
and here's a link to the style sheet
http://westvillage.ca/Assets/styles1.css
I have those funny little marks on my forehead that you get
from beating your head on the keyboard!
Thanks,
Geoff

Geoff Stanners wrote:
> I've usually built sites with tables but this time I've
used divs instead and I
> can't get the layout to center using CSS. It looks fine
in the Design view but
> not in a browser, any browser. Here's a link to the page
>
http://westvillage.ca/index3.html
and here's a link to the style sheet
>
http://westvillage.ca/Assets/styles1.css
> I have those funny little marks on my forehead that you
get from beating your
> head on the keyboard!
> Thanks,
> Geoff
>
>
center horizontally? if so add 'auto' to the 'wrapper'
margin, as below.
#wrapper {
width: 750px;
margin: 0 auto;
padding: 0px;

Similar Messages

ITSMobile - Problems when changing screen layout with CSS

Good afternoon,
I have a service ZLM00(SICF) with some public screens in the stile MOBILE4(Service of internet-se80), and I am trying change your layouts with CSS.
Steps taken:
    1 u2013 I activated the repository MIMES (/default_host/sap/public/bc/its/mimes);
    2 u2013 I copied the mobile.css from internet service standard ITSMOBILE for my service ZLM00(se80) with the name ZRF01.CSS;
    3 u2013 I added the parameter ~ITSMOBILECSSINCLUDE = ZRF01 in my service ZLM00(SICF);
    4 u2013 I published all screens and file ZRF1.CSS;
The problem:
      When I test the service in the browser, I see in the source code that the file CSS was added u201C<link rel="stylesheet" href="/sap/public/bc/its/mimes/zlm00/99/ZRF01.css" type="text/css" />u201D
      And the screens received some changes, however when I added a new line in file CSS for exemple
/* --- Basic Row -
      .MobileRow {
        white-space:pre;
        vertical-align:middle;
        background-color:#F3F3F3; "new lineu201D
        Is not ok. Just the command standard works.
        I am doing something wrong ? Is missing some step ?
        My configurations:
         - Version SAP ECC 6.0/SAP_APPL 604 SP8;
         - Device mobile Symbol/motorola MC3190;
         - Operating system Windows CE 6.0 with Internet Explorer 6.0;
         SICF:
         ~THEME                          99
         ~TRANSACTION                          LM01
         ~ITSMOBILE                          1
         ~SOURCES                          ZLM00,ITSMOBILE
         ~POPUPS                           1
         ~ITSMOBILECSSINCLUDE     ZRF01
         ~ITSMOBILEELEMUNITS      px
         ~DYNPRO_COMPRESSION     1
         ~ITSMOBILECUAINCLUDE     ZCUAAREA
         ~ITSMOBILEELEMFACTOR      6
      PS: I am trying change the layout of the screens only to remove blank spaces placed on the screen MOBILE4, the objects do not fit the device screen.
      Best regards,
      Gerson S. Livio

No.
If you want to see how the screen will look; look in the iPhone/ iOS 7 section of this site.

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....
~

How to use 2 different layouts with media query

I want to do my site for multiple devices. BUT some sections of the full page I do not want to use in the smartphone version. Responsive design changes the appearence of layout with CSS, but the elements are the same. Any idea?
Thanks in advance

Mobile browsers will see the mobile image.
Desktop browsers will see the desktop image.
See example below.
http://alt-web.com/FluidGrid/Fluid-4.html
Nancy O.

Centering the layout using CSS as opposed to tables

Hello all...I have spent about 4 hours with the trial version
of Dreamweaver 8 and have solved all but one of the troubles I used
to encounter when using GoLive.
I followed the tutorial in DW8, first building their sample
webpage using a table layout, then using a CSS layout.
The table layout is easy to center, click the body tag, then
select center justification in the Properties Inspector and the
page is now centered in the browser.
However...
I can't get DW8 to do this when building the page with CSS
layers. Should I enclose all of my layers within one main layer and
apply the div align="center" tag?
DW8 is an absolute BREEZE in comparison to GLCS2!!!
Many thanks,
Wordman

A layer in DW speak is an absolutely positioned div.
If you compare my #div code to what you have created - does
yours have
position: absolute defined in the style ?? That's a 'layer'.
Have a read of this article by Murray:
http://www.great-web-sights.com/g_positioning.asp
and this:
http://apptools.com/examples/pagelayout101.php
You may find the css tutorials here to be beneficial:
http://www.adobe.com/devnet/dreamweaver/css.html
Look for the beginner tuts by Adrian Senior
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
"Wordman-GL" <[email protected]> wrote in
message
news:[email protected]...
> Murray...In reviewing the link Nadia provided (Thanks,
Nadia!) I am
> comparing
> her code to the code I generated using 'layers' in the
CSS version of the
> DW
> tutorial website. If I use the Layer command to create a
layer in DW, I
> get
> styles in the head of the document beginning with #,
just as your wrapper
> code
> does. These styles generate when using layers, and they
look damn near
> like the
> styles created in Nadia's code. Are we arguing semantics
calling a 'layer'
> a
> layer, or am I missing something huge here?
>
> I'm barely able to convey what I think is the right
information, so
> although I
> am confused, I am nowhere near as confused as I was with
GL.
>
> All I want to generate are a couple of websites heavy on
photos and light
> on
> text...brochureware. As I'm also a photographer, I'll
want to build a site
> with
> galleries of my work. I have read that CSS is the only
way to go, and I'm
> all
> for it...
>
> So if I shouldn't use the layer command, are you
suggesting just raw
> coding
> instead? If so, why even use DW or GL?
>
> I reallyneed help here. I feel as though I am swimming
with boulders in my
> pockets and am nowhere near recshing the shore before I
drown...
>
> Cheers...
>
> Wordman
>
>

How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)

How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
and I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;

Abdelqader Alnobani wrote:
How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
and I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
Logically a structure something like below should work BUT whether or not it will upset the FG I don't know as I wouldn't ever use it.
<div class="gridContainer">
Top Code Section Goes Here
</div>

<div id="fullWidth">
Full width section goes here
</div>

<div class="gridContainer">
Bottom Code Section Goes Here
</div>

What controls the space above 'maincontent' in CSS layout with header?

In a freshly-downloaded CSS page layout with header (twoColHybLtHdr or similar), there is a space of about 20px between the bottom of the header box and the top of the maincontent box. Because of this space, when a bottom border is added to the header and a left border to maincontent, the two lines don't intersect, which is what I want. What controls this space so I can get rid of it?
Thanks, Joann

Hi Joann,
after formatting your text from "Ueberschrift 1" to "Kein" (translated from German DW)
Header 1
Header 2
all spaces were gone.
Hans-G.

Centering a file in the browser vertically with CSS

I remember there was an issue doing this with tables and I am
wondering
if this is also hard to to with CSS. I would like to center a
flash
file, both vertically and horizontally. I have it centered
horizontally
but not vertically. This is what I have so far.
body {
background-color: #fff;
margin: 0;
padding: 0;
#container {
width: 800px;
margin: 0 auto;
background-color:25231a;
My flash file is inside of the container in the html file.
What do I need to do, to get this centered vertically as
well?
I tried this, but with no luck.
#container {
width: 800px;
margin: auto;
background-color:25231a;
Thank you for any help!
Brian

If I don't hear anything positive from Adobe about fixing it,
I am going to
be much more vocal.
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
==================
".: Nadia :. **AdobeCommunityExpert**"
<[email protected]> wrote in
message
news:[email protected]...
> It is getting more and more difficult to support such
posts. I don't have
> that much time to copy and paste a link,find it's wrong
and then have to
> copy and paste again...........
>
>
> --
> Nadia
> Adobe� Community Expert : Dreamweaver
> --------------------------------------------
>
http://www.csstemplates.com.au
- CSS Templates | Free Templates
> --------------------------------------------
>
http://www.perrelink.com.au
- Web Dev
>
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
>
http://www.adobe.com/devnet/dreamweaver/css.html
> -------------------------------------------------
>
>
> "Murray *ACE*" <[email protected]>
wrote in message
> news:[email protected]...
>>I will no longer support posts that contain broken
links like 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
>> ==================
>>
>>
>> ".: Nadia :. ACE :."
<[email protected]> wrote in message
>> news:[email protected]...
>>> OMG - nothing against you Excavatorak, but links
posted via the web
>>> forum interface come through as an absolute mess
on the nttp forum :\
>>>
>>>
>>> --
>>> Nadia
>>> Adobe� Community Expert : Dreamweaver
>>> --------------------------------------------
>>>
http://www.csstemplates.com.au
- CSS Templates | Free Templates
>>> --------------------------------------------
>>>
http://www.perrelink.com.au
- Web Dev
>>>
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
>>>
http://www.adobe.com/devnet/dreamweaver/css.html
>>>
>>>
>>>
>>>
>>>
>>> "Excavatorak" <[email protected]> wrote
in message
>>> news:[email protected]...
>>>> <a target=_blank
class=ftalternatingbarlinklarge
>>>> href="
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html">http://www
>>>>
.jakpsatweb.cz/css/css-vertical-center-solution.html</a>
>>>> <a target=_blank
class=ftalternatingbarlinklarge
>>>> href="
http://milov.nl/code/css/verticalcenter.html">http://milov.nl/code/css/ver
>>>> ticalcenter.html</a>
>>>>
>>>>
>>>
>>>
>>
>>
>
>

Help with CSS Page Layout

I guess I am "old school" in that I have always used tables
to lay out my web pages. I decided I must learn to do it with CSS,
but I'm having a terrible time (and it shouldn't be so hard!). I
understand how to define the styles, add divs, etc. Here's what I'm
having trouble with:
How do I specify the normal page width to be 800 pixels,
however I want it to be relative to the browser (i.e., 100% of 800
pixels).
I understand the "float" tag, but if I have a right-hand
sidebar, I can't seem to get the text to the left (in a div called
"maincontent") to stop at the sidebar and wrap to the next line. I
tried specifying "Hidden" as my textbook suggests, but that has no
effect.
I can easily do all of this with tables, so do I really need
to abandon them?
Thanks!

Hi Jane,
I'll try to answer all your questions, then a tip or two to
stop the main
content from dropping when the browser window size is
reduced.
- " I didn't realize that
margin-top: 0px;
margin-right: auto;
is not the same as margin: 0px auto;
That's right.
margin: 0px auto; is actaully saying make the top margin 0,
the right margin
auto, the bottom margin 0 and the left margin auto.
It's just CSS shorthand.
For example, you might have:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 5px;
margin-left:15px;
You could just use margin: {10px 20px 5px 15px;}
Think of a clock to remember the directions.
12:00 top, 3:00 right, 6:00 bottom, 9:00 left.
If any of the values are the same, you can shorten it more.
For example, if top is 10, right is 20, bottom is 5 and left
is 20, it's
margin: {10px 20px 5px;}
If the 4th location (left) is missing a value, it makes it
the same as what
you have for right.
If top and bottom are 10px, and left and right are 20px,
it's:
margin {10px 20px;}
If the last two positions ( bottom and left vlaues ) are
missing, then it
will use the top value for the bottom, and the right value
for the left.
What auto right and left is doing is subtracting your content
width (the
container width) from the browser window width, and then
dividing the
remainder in 2 and applying each value to each side of the
container.
-"I found that they all took on the font of the maincontent
and I had to fix
them
individually. "
The only text that should be Time is the text in your main
content, where
you have that font defined. Everything else should be Arial
if you define
the body as such. I'll post a link at the end of this.
- "I put my bold sentence (Friendship, Fun, etc.) in h1, but
I had to change
the
color & size, so that added another style element. "
You don't need to give the h1 a class. You can actually just
style the h1
tag:
h1 {
margin: 10px 10px 2px;
font-size: larger;
color: #941238;
You can only use h1 once on a page.
You can use h2, h3, h4, etc, as many times as you would like,
and you can
style these just like the h1 style above.
- "I don't quite understand the .rightsidebar p { and
container p{
I am assigning the spacing to the <p> tag? What exactly
is that doing?"
That is saying, give all the <p> tags inside the
rightsidebar container the
follwing style.
So, in this example:
.rightsidebar p {
font-size: 18px;
margin: 2px 10px;
it's saying give all the <p> tags in this container a
size of 18 and margin
of 2px top and bottom, and 10px left and right.
It's a lot easier than giving a class to every <p> tag
- "I also don't quite understand the .clear {
Why not just choose clear:both on the next section <div
class="footer">"
You could, if the footer was in the container. It just needs
to be the final
element before the close of a container that contains the
float(s).
-Do you use the <div class="container"> technique all
the time?
Yes, most of the time. I usually put everything in it, and
use the
margin:0px auto; to center it.
That way, I don't have to try to get a number of different
elements to align
with the right and left sides by applying values to all of
them, which can
get tricky quickly.
-"If you'll indulge me one more question, I wonder if it's
possible to put a
graphic (say, of a putting green) underneath my
rightsidebar? I would want
the sidebar to lay on top of the putting green for an
interesting artistic
touch.
Yes, you can give that div a background image. You just need
to make the div
the same size as the image so you see it all (or vice-versa).
Now, to make that maincontent not drop like it does you can
remove the width
in the CSS. Now it will expand over to the left edge of the
rightsidebar.
You can control how close it gets by giving the right sidebar
a bigger left
margin. The point is, with no width assigned, the maincontent
will shrink
down to the longest word in it before it drops.
Here's what it looks like:
http://tnsgraphics.com/test2.htm
Let me know if you have any questions.
Take care,
Tim
"janeinpa" <[email protected]> wrote in
message
news:[email protected]...
> Hi, Tim...
>
> You have been very kind to help me learn CSS! I very
much appreciate it
> and
> am really delighted to have gained a better
understanding of this. I
> studied
> all your suggestions and started the page from scratch.
Take a look here:
>
http://www.allisonwebcreations.com/ewga_site/good_page/indexgood.htm
I'm
> very
> pleased with it. I discovered a couple of things:
>
> I didn't realize that
> margin-top: 0px;
> margin-right: auto;
>
> is not the same as margin: 0px auto;
>
> are they two different codes? Anyway, it didn't center
until I fixed
> that.
>
> I understand what you're saying about the font codes
being redundant,
> however
> I found that they all took on the font of the
maincontent and I had to fix
> them
> individually. This must be an error in how I'm coding
it. Is the order
> in
> which I did them to blame? I put it in the order that
I'm reading it, but
> perhaps I should do it differently.
>
> I also couldn't get the footer to move left to the
margin. I'm not sure
> why,
> since I think I followed all your suggestions.
>
> I put my bold sentence (Friendship, Fun, etc.) in h1,
but I had to change
> the
> color & size, so that added another style element.
I'm afraid that
> probably
> isn't correct. I also couldn't have my normal content
text follow
> immediately
> on the same line. Maybe that isn't possible.
>
> I don't quite understand the .rightsidebar p { and
container p{
> I am assigning the spacing to the <p> tag? What
exactly is that doing?
>
> I also don't quite understand the .clear {
> Why not just choose clear:both on the next section
<div class="footer"> ?
>
> Do you use the <div class="container"> technique
all the time? How do you
> decide what goes in it -- just floating items or can I
think of it as a
> table
> that holds all my main blocks of info? Why not include
the footer in it?
>
> If you'll indulge me one more question, I wonder if it's
possible to put a
> graphic (say, of a putting green) underneath my
rightsidebar? I would
> want the
> sidebar to lay on top of the putting green for an
interesting artistic
> touch.
>
> Thank you, thank you, thank you again. Here are my css
codes (which I
> have in
> an external file. Is it better to import or link to the
file?)
>
> Have a wonderful New Year.
>
>
>
>
>
>
> .body {
> padding: 0px;
> margin-top: 0px;
> font-family: Arial, Helvetica, sans-serif;
> }
> .masthead {
> width: 780px;
> margin: 0px auto;
> padding-top: 10px;
> padding-right: 0px;
> }
> .maincontent {
> background-color: #FFFFFF;
> text-align: left;
> width: 60%;
> margin-top: 0px;
> padding-top: 10px;
> padding-right: 0px;
> font-family: "Times New Roman", Times, serif;
> font-size: medium;
> color: #000000;
> }
> .maincontent p{
> margin-top: 2px;
> margin-right: 10px;
>
> }
> .rightsidebar {
> font-size: small;
> background-color: #DEEBE4;
> text-align: center;
> float: right;
> width: 250px;
> margin-top: 10px;
> margin-left: 20px;
> border: thick solid #941238;
> font-family: Arial, Helvetica, sans-serif;
> padding: 10px;
>
> }
> .leftbox {
> font-size: small;
> font-style: italic;
> color: #336600;
> background-color: #DEEBE4;
> text-align: center;
> clear: both;
> width: 300px;
> margin-top: 50px;
> border: thin solid #941238;
> font-family: Arial, Helvetica, sans-serif;
> padding: 10px;
> }
> .footer {
> font-size: small;
> margin: 100px;
> font-family: Geneva, Arial, Helvetica, sans-serif;
> font-style: normal;
> }
> .container {
> width: 90%;
> margin: 0px auto;
> }
> .clear {
> font-size: 1px;
> line-height: 0px;
> clear: both;
> height: 0px;
> }
> .event {
> font-size: 24px;
> font-weight: bold;
> color: #00493E;
> }
> .upcomingdate {
> font-size: 20px;
> color: #990134;
> font-weight: bold;
> font-family: Arial, Helvetica, sans-serif;
> }
>
> .eventitem {
> font-size: 18px;
> color: #000000;
> font-weight: bold;
> margin: 0px;
> }
> .eventlink {
> font-size: 14px;
> font-style: italic;
> margin: 0px;
> }
> .smallboxhead {
> font-size: large;
> color: #00493E;
> font-style: normal;
> font-weight: bold;
> }
> .companyname {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: small;
> font-style: italic;
> color: 990134;
> }
>

Layout with images query

Hi
I'll start with the website
www.ultimate-garden-care.com
I'm recreating this in DW. I want fluid grid and will hide most photos to minimise mobile view. But I am wonder what is the best order to html this
i.e. All content that's on the right first and on the left second?
or as if you were to read... First line heading then items list followed by image that's right of the list then the image that's currently under the heading then repeat...the second heading, items list, image from right etc etc?
I Was thinking Maybe...
heading and lower image in one parent div that sits lower (has more top margin 30px?) than stuff on the right
then
the items list and the corresponding image in another parent div that has boarder. With only say 5px top margin
i Think where I'm getting most confused is where hubby wants the headings on the left to be centred to the item boxes on the right but still have images centred between all the left hand headings.
he wanted this layout for our mobile-wash.com site as well but he got it more... Grid like I guess.
is it possible to do what he is asking in fluid grid? I'm not that clever yet. He wants practically the same layout for all 4 of his sites.
thanks
kelly
for curious beings, All my current goings on (4 of them for hubby rte is mine) incl...
www.tools-and-machinery.com (nothin there yet)
www.rtepyrography.com (really crappy publisher job that changed my shadows on angled images arggg.)
www.rte-pyrography.com (dreamweaver version of above one. Different layout (cos I couldn't figure out how to copy it), but I like it so far)
www.ultimate-garden-care.com (crappy publisher version. DW Remake in the process)
www.mobile-wash.com (first dreamweaver attempt ever, had a few evolutions before landing with fluid grid)
www.firewood-4-sale.com (another publisher version with silly lines that go all over the place, dw version in the process)

Responsive Web Design has limitations you must consider when planning your mobile, tablet and desktop layouts. Suffice it to say, RWD is not appropriate for everything. It's nothing like table based layouts which you have been using up until now. Now you must think "Responsively" to get professional looking results.    Simpify. The best RWD sites are uncluttered, uncomplicated and easy for people and search engines to read.
Horizontally centered elements are accomplished two ways.
#1 With CSS text-align:center.
#2 With CSS width and left- and right- margins set to auto.
In Responsive Layouts, the alignment of elements will naturally shift with viewport width and the text sizes that people use in their devices. This is expected. At some point, a 2-column layout will collapse into a 1-column layout. Put your most important content in the topmost portion of your HTML. Put your least important content near the bottom of your HTML. Don't get too hung-up on how things align. You'll drive yourself crazy because this is a variable you cannot control.
Nancy O.

Can't find Centered look with Top Menu

Can't find Centered look with Top Menu
In SharePoint 2013 (with O365 subscription), when I go to Site > Change the look I see mainly two types of layouts:
1. Left aligned with top menu
2. Centered with left-side menu
Is this some sort of best practice? I'm trying to find a "look" that is centered (or full screen) with top menu - which seems to be the most common in most cloud CMS'es out there. Is there one in-built?
I tried modifying the Stylesheet by adding margin:0 auto; to
.ms-pub-contentLayout class, but that did not make any difference. Any help greatly appreciated!
PS: After clicking submit on this post in previous attempt few minutes ago I got Internal Server Error.

Hi,
According to your description, my understanding is that you'd like to change the layout as centered with top menu as like below link.
https://zirlentechnologies-public.sharepoint.com/
I've done this by editing master page .css file.
#s4-bodyContainer {
min-height: 100%;
padding-bottom: 0px;
width: 1280px !Important;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
.ms-pub-contentLayout {
display: table-cell;
min-width: 1240px !Important;
Please 'propose as answer' if it helped you, also 'vote helpful' if you like this reply.
Prabhu

Please help with borders problem with CSS templates

I'm trying to redo my site using the great CSS templates that came with CS4. But I have something goofed up and can't figure out what. Here's the test page that I am using to make the main Template.
http://www.ausranch.com/start-for-2010.html
I want a photo in the upper left and a vertical line from top to bottom of the container that is 6 pixels wide. Then I want a 10 pixel border across the bottom of the photo and the header area. Of course I'd like all of these borders to line up. I thought it might be easier to move the sidebar1 div above the header div. Was that a mistake?
I thought I had it working. It works/displays fine on my Vista computer using both Firefox and IE8. That monitor is an old 1280 x 1024.
It doesn't work on Win 7 with IE8 and a 1600 x 900 widescreen display. Fine on Firefox on both computers. What happens is that the sidebar1 right border doesn't line up with the mainContent left border. I need both because the sidebar1 border is needed for the area that is in between the header and the mainContent (I can't figure out where that space comes from, actually.) The sidebar1 ends well above the end of the mainContent so it has to have a border too. But right now, on that Win7 widescreen computer, the two borders do not line up and appear to be off about 6 pixels. They touch but they don't line up.
In order to make the horizontal lines line up, I had to remove the 30 px margin at the top of the sidebar1 that was in the comments as a bug fix for IE.
Do I need a tweak somewhere or did I totally take the wrong approach here? Thank you.

Here you go:
http://wwww.martcol.co.uk/test/horses.html
That's my attempt and I think it might be a slightly more straighforward solution. basically, I guess it's now a two column layout with no header or footer. It's a bit clunky and if you want my opinion, I think you could get it a bit cleaner if you start again and build it on that basis a 2 Column, fixed, centered layout.
I also think that what you got caught up in was trying to fix a problem by adding and adding to the page. That way eventually, it's really easy to lose track of things. If you had seen it as a two column layout earlier on, it might have been a Eureka moment! I'm no expert but I think I've cobbled something together that will hold up in IE 6 and Firefox.
The two pages are below and if you open them up in DW you should be able to test the site in your local browser at least. I have taken out all your template instances - I just don't understand or use all that stuff - and the links are all absolute to your site. I've tried to comment the page to show you what I have done but, it won't explain everything probably because I am not sure how to explaing it all.
Both the main divs that hold the two columns are floated so if you start tinkering with margins and border width it will throw the page off because of the Box Model. If you want to push content away from the edge of something use padding. The other thing to say is that the page will hold up all the while the right panel content is greater than the left panel.
Gosh, I hope I haven't made things worse!
Regards
Martin

Centering layout

Hi there, I'm very new to dreamweaver and am using mx 2004. I
am designing a site using HTML and am trying to center my layout. I
was told to do this properly using css but i have no idea how.
Could someone please provide me with the coding i would need to do
so and advise me where and how to insert this code...This would be
great!!
Also if i center my layout using CSS does this mean the
layers will stay centered also? at the moment are not locked in
position once i preview in a browser they seem to change page
position when I restore or maximize the page.
Please Help!!!

It depends on whether you are using absolute positioning on
the page, as to
which method might be best, but in either event, this will
work -
Change this -
</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>
and see if that helps.
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
==================
"brettjohn" <[email protected]> wrote in
message
news:ft41e8$jik$[email protected]..
> Hi there, I'm very new to dreamweaver and am using mx
2004. I am designing
> a
> site using HTML and am trying to center my layout. I was
told to do this
> properly using css but i have no idea how. Could someone
please provide me
> with
> the coding i would need to do so and advise me where and
how to insert
> this
> code...This would be great!!
>
> Also if i center my layout using CSS does this mean the
layers will stay
> centered also? at the moment are not locked in position
once i preview in
> a
> browser they seem to change page position when I restore
or maximize the
> page.
>
> Please Help!!!
>

Using templates with css in mx

Hi,
I'm sure I'm being stupid but it's driving me insane - I'm
weaning myself off table based layout and using css (for the first
time) in mx. I'm (finally) happy with my stylesheet and how it's
all looking but can't seem to use css with a template - when I save
the page as a template and preview the style sheet does not seem to
be attached.
Any help MUCH appreciated,
Katy

> Good to know about mx as I was thinking about upgrading
to 8 - does it
> make
> like easier with css?
Very definitely!
Good grief - your stylesheet is ... big. Usually so many
custom classes
mean that the stylesheet is WAY overengineered.....
I'll take a look though.
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
==================
"katyoj" <[email protected]> wrote in
message
news:[email protected]...
> Thanks -
>
> I've uploaded it here :
>
>
>
http://kateortonjohnson.bulldoghome.com/pages/kateortonjohnson_bulldoghome_com/i
> ndex.html
> & have attached the style sheet to the message
>
> Good to know about mx as I was thinking about upgrading
to 8 - does it
> make
> like easier with css?
>
> Anyway thanks again
>
> Kate
>
> /* CSS Document */
>
> BODY {
> margin:0px;
> padding:0px;
> font-family: arial, helvetica, sans-serif;
> font-size: 11px;
> color: #000;
> background: #FFF;
> }
>
> /* Link properties */
>
> A:link {
> color: #333;
> text-decoration: none;
>
> }
>
> A:visited {
> color: #913c87;
> text-decoration: none;
>
> }
>
> A:active {
> color: #913c87;
> text-decoration: none;
>
> }
>
> A:hover {
> color: #913c87;
> text-decoration: none;
>
> }
>
> /* Main text headings */
>
> h1
> {font-family: tahoma, Arial, Helvetica, sans-serif;
> font-size:11px;
> color:#333;
> text-decoration:none;
> font-weight:bold;
> margin:3px 5px 5px 3px;}
>
> h2
> {font-family: tahoma, Arial, Helvetica,
sans-serif;font-size:11px;
> color:#154669;
> text-decoration:none;
> font-weight:bold;
> margin:0px 5px 5px 3px;
> padding:5px 0px 0px 5px;}
>
> h3
> {font-family: tahoma, Arial, Helvetica, sans-serif;
> font-size:11px;
> color:#525E6A;
> text-decoration:none;
> font-weight:bold;
> margin:5px 5px 5px 3px;
> text-align:right;
> }
>
> /* Footer text */
>
> .footertext {
> font-family: tahoma, Arial, Helvetica, sans-serif;
> margin:0px;padding:15px 0px 5px 0px;
> font-size:10px;
> color:#666;
> }
>
> /* Titles */
>
> .t3 {
> font-family:tahoma, Arial, Helvetica, sans-serif;
> font-size:20px;
> color:#154669;
> text-decoration:none;
> font-weight:bold;
> }
> .t2 {
> font-family: tahoma, Arial, Helvetica, sans-serif;
> font-size:14px;
> color:#96968A;
> text-decoration:none;
> font-weight:bold;
> }
>
> /* Main body */
>
> .maincontent {
> border-top-style
otted;
> border-top-width:1px;
> border-top-color:#989898;
> margin:3px 10px 30px 0px;
> padding:0px 10px 5px 10px;
> font-family: arial, helvetica, sans-serif;
> font-size: 11px;
> color:#333;
>
> } .maincontent img {float:left;margin:5px 5px 5px 0px;}
>
> .maincontent2 {
> border-top-style
otted;
> border-top-width:1px;
> border-top-color:#989898;
> margin:3px 220px 0px 0px;
> padding:0px 10px 5px 10px;
> font-family: arial, helvetica, sans-serif;
> font-size: 11px;
> color:#333;
> }
>
> .maincontent2 img {float:right;margin:5px 0px 5px 5px;}
>
> .lwrap {
> width:182px;
> margin-top:15px;
> margin-bottom:0px;
> margin-right:auto;
> margin-left:auto;
> padding:0px;
> }
>
>
> /* Left content */
>
> .lcontent {
> border-left-style:solid;
> border-left-color:#C5C5C5;
> border-left-width:5px;
> width:172px;
> margin:0px 0px 0px 0px;
> font-family: Arial, Helvetica,
sans-serif;font-size:11px;
> color:#666666;
> text-decoration:none;
> text-align:left;
> font-weight:normal;
> padding:5px 3px 10px 5px;
> background-color: #EEE;
> }
>
> .leftshadow {
> width:182px;
> height:6px;
> padding:0px;
> margin-top:0px;
>
> }
> .leftshadow img {padding:0px;margin:0px;float:right;}
>
> .separator {
> border-top-width:1px;
> border-top-style
otted;
> border-top-color:#989898;
> margin-right:5px;
> margin-left:5px;
> margin-top:10px;
> }
>
> /* News boxes */
>
> .newsheader{
> background-image:url(images/left_subh.gif);
> background-position:top;
> background-repeat:no-repeat;
> width:182px;
> margin-left:auto; margin-right:auto;
margin-top:15px;margin-bottom:0px;
> height:17px;
> text-align:right;
> padding:1px 5px 0px 0px;
> font-family: tahoma, Arial, Helvetica,
sans-serif;font-size:10px;
> color:#333;
> font-weight:bold;
> }
> .newscell{
> background-color:#EEE;
> width:182px;
> margin-left:auto; margin-right:auto;
margin-top:-1px;margin-bottom:0px;
> min-height:30px;
> font-family: Arial, Helvetica, sans-serif;
> font-size:11px;
> color:#666;
>
> }
>
> .newscell p {padding:5px 5px 15px 10px;margin-top:0px;}
>
> /* Right content */
>
> .rcontent {
> background-color:#EEE;
> width:168px;
> margin-left:auto;
> margin-right:auto;
> border-left-style:solid;
> border-left-width:5px;
> border-left-color:#C5C5C5;
> min-height:30px;
> margin-top:18px; margin-bottom:0px;
> font-family: tahoma, Arial, Helvetica, sans-serif;
> font-size:10px;
> color:#666;
> padding:5px 3px 10px 5px;
> text-align: left;
> }
>
> .rightshadow {
> text-align:right;
> width:168px;
> height:7px;
> padding:0px;
> margin-top:0px;
> margin-bottom:15px;
> float:right;
> }
> .rightshadow img {padding:0px;margin:0px;float:right;}
>
> /* Bullet list */
>
> ul {
> list-style-image:url(images/bullet.gif);
> list-style-type:none;
> }
>
> p img {margin-left:5px;}
>
>
> #wrap{
> margin:0px;
> padding:0px;
> width:100%;
> }
>
> /* Header section */
>
> #header{
>
> background:#EEE;
> margin:0px 0px 0px 0px;
> font-size: 11px;
> font-family : Verdana, Arial, Helvetica, sans-serif;
> color : #000000;
> border-bottom: solid #C5C5C5;
> }
>
> /* Top navigation */
>
> #topnav ul
> {
> padding-left: 0;
> margin-left: 5px;
> margin:0px 0px 0px 0px;
> background-color: #913c87;
> color: White;
> float: left;
> width: 100%;
> font-family: arial, helvetica, sans-serif;
> font-size: 11px;
> font-weight: bold;
> height: 18px;
> }
>
> #topnav ul li { display: inline; }
>
> #topnav ul li a
> {
> padding: 0.2em 1em;
> background-color: #913c87;
> color: White;
> text-decoration: none;
> float: left;
> border-right: 1px solid #EEE;
> }
>
> #topnav ul li a:hover
> {
> background-color: #C5C5C5;
> color: #fff;
> }
>
>
> /* Left positioning */
>
> #left {
> width:191px;
> margin:0px 0px 10px 0px;
> padding:0px 0px 20px 0px;
> background-color:#EBE8DE;
> border-right-width:3px;
> border-bottom-width:3px;
> border-left-width:5px;
> border-top-width:0px;
> border-style:solid;
> border-right-color:#EFEEEE;
> border-bottom-color:#EFEEEE;
> border-left-color:#fff;
> float:left;
> min-height:15px;}
>
> /* Right positioning */
>
> #right {
> margin-left:196px;
> background-color:#fff;
> min-height:30px;
> text-align:left;
> padding:10px 10px 15px 15px;
> min-width:560px;
>
> }
>
> /* Footer positioning */
>
> #footer {
> background-image:url(images/footer2.gif);
> height:55px;
> margin:0px 0px 0px 0px;padding:0px;
> width:100%;
> min-width:760px;
> overflow:hidden;
> clear:both;
> }
>
> #footer img {padding:0px;margin:0px;float:left;}
>
> #footer a {
> text-decoration:none;}
>
> /* Right positioning */
>
> #rightcol {
> width:180px;
> float:right;
> min-height:30px;
> background-color:#fff;
> margin:0px 0px 0px 20px;
> padding:0px;
> text-align:center;
> }
> /** BOX3 */
>
> #box3 {
> clear: both;
> margin-top: 20px;
> padding: 10px 0px;
> }
>
> #box3A {
> float: left;
> width: 200px;
> padding: 0px 13px 0px 43px;
> background: url(/csstemplatetts/images/homepage20.gif)
repeat-y right
> top;
> }
>
> #box3B {
> float: left;
> width: 200px;
> padding: 0px 50px 0px 11px;
> }
>
> #stretch {width:760px;height:1px;clear:both;margin:0px
0px 10px
> 0px;padding:0px;}
>

How to print a html document in landscape mode with css

Hi ,
below is my code that i need to print in landscape mode by defualt with css. is there any way to do this
<html><head><style type="text/css">
table.automatic {table-layout:fixed; width:100%; border-collapse: collapse; word-wrap:break-word;}TR.head{font-family: verdana; font-size: 10pt; vertical-align: top ; color: #ffffff; background-color: black; font-weight: bold; }TR.data{font-family: verdana; font-size: 8pt; vertical-align: top}</style></head><body><table width="100%" border="0" cellspacing="0" cellpadding="4"><tbody><tr><td></td><td align="center"><font size="2" style="verdana"><b>EMERGENCY ICE Installs by Manager And Production Install Date Range</b></font><br><td></td><table width="100%" border="0" cellspacing="0" cellpadding="4"><thead><tr><td width="74%" align="center"><font size="1" style="verdana"><b>From:</b>09/01/07</font><font size="1" style="verdana"><b>&nbsp&nbspTo:</b>01/08/08</font></td></tr></thead></table></td></tr></tbody></table><br></br>
<table border="1" class="automatic"><thead><tr class="head"><td width="8%">Manager</td><td width="5%">ICE # </td><td width="10%">Plan Prod Install Date</td><td width="10%">Doc Status</td><td width="10%">Doc Title</td><td width="7%">Owner</td><td width="5%">Risk Desc</td><td width="4%">AS/400</td><td width="4%">Unix</td><td width="4%">Win Srv</td><td width="4%">Win Dsk</td><td width="4%">Vax</td><td width="5%">Target Loc</td><td width="10%">No Chg Risk Desc</td><td width="15%">Brief Chg Desc</td></tr></thead><tbody>
<tr class="data"><td rowspan="12" width="5%">Randal Hockenberry</td><td width="8%">16926</td><td width="10%">Dec 31,2007</td><td width="10%">Pending Manager-Business Review</td><td width="10%">AUTO APPROVE</td><td width="7%">Padma Chirumalla</td><td width="5%">Low</td><td width="4%">N</td><td width="4%">Y</td><td width="4%">N</td><td width="4%">N</td><td width="4%">N</td><td width="5%">TEST</td><td width="10%">TEST</td><td width="15%">TESTzxdcxvsrfdgdsgfdffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</td></tr>
<tr class="data"><td width="8%">16933</td><td width="10%">Dec 28,2007</td><td width="10%">Pending Non-QS Testing</td><td width="10%">SR</td><td width="7%">Padma Chirumalla</td><td width="5%">Low</td><td width="4%">N</td><td width="4%">Y</td><td width="4%">N</td><td width="4%">N</td><td width="4%">N</td><td width="5%">XC</td><td width="10%">DFV</td><td width="15%">CX</td></tr>
<tr class="data"><td width="8%">16927</td><td width="10%">Dec 28,2007</td><td width="10%">Pending Risk Review</td><td width="10%">AUTO APPROVAL TEST</td><td width="7%">Padma Chirumalla</td><td width="5%">Low</td><td width="4%">N</td><td width="4%">Y</td><td width="4%">N</td><td width="4%">N</td><td width="4%">N</td><td width="5%">AUTO</td><td width="10%">AUTO APPROVE</td><td width="15%">AUTO APPROVE</td></tr>
<tr class="data"><td width="8%">15926</td><td width="10%">Nov 27,2007</td><td width="10%">Pending Code Review</td><td width="10%">CM Install LEVEL 3 QS will test</td><td width="7%">Gary Zhong</td><td width="5%">Low</td><td width="4%">N</td><td width="4%">N</td><td width="4%">Y</td><td width="4%">N</td><td width="4%">Y</td><td width="5%">pitt99</td><td width="10%">testing the app</td><td width="15%">CM Install LEVEL 3 QS will test</td></tr>
<tr class="data"><td width="8%">15712</td><td width="10%">Nov 22,2007</td><td width="10%">Rejected</td><td width="10%">Test Documentation Request</td><td width="7%">Autumn Priddy</td><td width="5%">Low</td><td width="4%">N</td><td width="4%">N</td><td width="4%">N</td><td width="4%">N</td><td width="4%">N</td><td width="5%">x</td><td width="10%">none</td><td width="15%">run-through for documentation purposes</td></tr>
<tr class="data"><td width="8%">16029</td><td width="10%">Nov 21,2007</td><td width="10%">Rejected</td><td width="10%">Contractor</td><td width="7%">Padma Chirumalla</td><td width="5%">Low</td><td width="4%">N</td><td width="4%">N</td><td width="4%">N</td><td width="4%">Y</td><td width="4%">N</td><td width="5%">Windows</td><td width="10%">testing</td><td width="15%">Testing</td></tr>
<tr class="data"><td width="8%">16030</td><td width="10%">Nov 19,2007</td><td width="10%">Rejected</td><td width="10%">Contractor</td><td width="7%">Padma Chirumalla</td><td width="5%">Low</td><td width="4%">N</td><td width="4%">N</td><td width="4%">N</td><td width="4%">Y</td><td width="4%">N</td><td width="5%">Windows</td><td width="10%">testing</td><td width="15%">Testing</td></tr>
<tr class="data"><td width="8%">15840</td><td width="10%">Nov 10,2007</td><td width="10%">Pending Follow Up Review</td><td width="10%">SMS Install LEVEL 3</td><td width="7%">Stephen Sciullo</td><td width="5%">Low</td><td width="4%">Y</td><td width="4%">N</td><td width="4%">N</td><td width="4%">N</td><td width="4%">Y</td><td width="5%">pitt88</td><td width="10%">system testing</td><td width="15%">SMS Install LEVEL 3</td></tr>
<tr class="data"><td width="8%">15719</td><td width="10%">Nov 08,2007</td><td width="10%">Pending Test Install</td><td width="10%">CM Install LEVEL 1 pitt3/col3</td><td width="7%">Stephen Sciullo</td><td width="5%">Low</td><td width="4%">N</td><td width="4%">N</td><td width="4%">N</td><td width="4%">N</td><td width="4%">Y</td><td width="5%">pitt88</td><td width="10%">testing</td><td width="15%">testing</td></tr>
<tr class="data"><td width="8%">14815</td><td width="10%">Nov 03,2007</td><td width="10%">Rejected</td><td width="10%">test</td><td width="7%">Stephen Sciullo</td><td width="5%">Low</td><td width="4%">N</td><td width="4%">N</td><td width="4%">Y</td><td width="4%">Y</td><td width="4%">N</td><td width="5%">pitt2</td><td width="10%">test</td><td width="15%">test</td></tr>
<tr class="data"><td width="8%">14915</td><td width="10%">Nov 01,2007</td><td width="10%">Pending Follow Up Review</td><td width="10%">Contractor</td><td width="7%">Padma Chirumalla</td><td width="5%">Low</td><td width="4%">N</td><td width="4%">N</td><td width="4%">N</td><td width="4%">Y</td><td width="4%">N</td><td width="5%">windows</td><td width="10%">test</td><td width="15%">Test</td></tr>
<tr class="data"><td width="8%">14816</td><td width="10%">Oct 31,2007;Nov 01,2007;Nov 02,2007</td><td width="10%">Production Install Complete</td><td width="10%">Contractor</td><td width="7%">Padma Chirumalla</td><td width="5%">Low</td><td width="4%">N</td><td width="4%">N</td><td width="4%">N</td><td width="4%">Y</td><td width="4%">N</td><td width="5%">windows</td><td width="10%">test</td><td width="15%">test</td></tr>
<tr></tr>
<tr class="data"><td rowspan="1" width="5%">Linda Humm</td><td width="8%">16034</td><td width="10%">Dec 06,2007</td><td width="10%">Pending Production Install</td><td width="10%">CM Install LEVEL 1 pitt3/col3</td><td width="7%">Randal Hockenberry</td><td width="5%">Low</td><td width="4%">N</td><td width="4%">N</td><td width="4%">N</td><td width="4%">N</td><td width="4%">Y</td><td width="5%">pitt88</td><td width="10%">testing</td><td width="15%">testing</td></tr>
<tr></tr>
</tbody></table><body></html>
Thanks,

Why are you asking a CSS question in a Java/JSP/JSTL forum? I would rather use a CSS forum for that. That HTML code is unnecessary too. Just post relevant code only, such as that CSS snippet.
Anyway, it may differ per web browser if this page rule will be picked up and it may also be a client side setting regarding printer settings. Nothing to do here.

Centering Layout with CSS

Similar Messages

Maybe you are looking for