Expand a centered div's width incrementally

I have a gallery in which I want to to expand to the width of the screen doing "auto width", but then add as many thumbnails across as possible. Then center that main gallery div so it's in the middle of the screen.
Keep in mind the number of images being displayed across each row is dynamically controlled by the width of the users screen. Below is the html I have so far.
Thanks
Here is the result I have right now.
I want this though.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
@charset "utf-8";
/* HTML5 RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
          margin: 0;
          padding: 0;
          border: 0;
          font-size: 100%;
          font: inherit;
          vertical-align: baseline;
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
          display: block;
body {
          line-height: 1;
ol, ul {
          list-style: none;
blockquote, q {
          quotes: none;
blockquote:before, blockquote:after,
q:before, q:after {
          content: '';
          content: none;
table {
          border-collapse: collapse;
          border-spacing: 0;
#wrapper {
          height: auto;
          width: auto;
          background-color: #0CC;
#gallery {
          height: auto;
          background-color: #09C;
          margin-right: auto;
          margin-left: auto;
          padding-right: 20px;
          padding-left: 20px;
          width: auto;
          overflow: auto;
.clearboth {
          clear: both;
          height: 0px;
          width: auto;
.itempreview {
          height: 300px;
          width: 300px;
          background-color: #3FF;
          float: left;
          margin-right: 10px;
          margin-bottom: 20px;
          margin-left: 10px;
</style>
</head>
<body>
<div id="wrapper">
<div id="gallery">
                <div class="itempreview"> </div>
                <div class="itempreview"> </div>
                <div class="itempreview"> </div>
                <div class="itempreview"> </div>
                <div class="itempreview"> </div>
<div class="itempreview"> </div>
<div class="itempreview"> </div>
                <div class="itempreview"> </div>
                <div class="itempreview"> </div>
          </div>
</div>
</body>
</html>

I wasn't sure if there was a way to incrementally adjust the width of that wrapper div so it would then always be centered.
To do so it would take an equation. One which would take the total width of the viewport and divided it by "320px" which each div is 300 and then the additional 20px for the padding on each side. Then it would round down to the nearest whole number. Then making the div wide enough to fit that "number of divs" and then centering the wrapper div in the viewport.
Example:
screen size = 1800 x 1200px
thumbnail/div size = 300 x 300px
-equation for seeing how many divs can fit width wise on the screen (screen width / thumbnail size)
1800 / 300 = 5.625
round 5.625 to the nearest whole number which eaquals 5.
so then there will be 5 thumbnails displayed in each row. Then center that wrapper div.
I don't know how to write js or else I'd write up an equation.
Is something like that possibe? And then have it update is the user changes there viewport size.

Similar Messages

Why is my container div expanding past the 1170px max width in preview mode?

Why is my container div div expanding past the 1170px max width in preview mode?
Thanks again,
Marc

#wrapper #leftside img {
float: left;
width: 399px;
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
==================
"Ruby7829" <[email protected]> wrote in
message
news:gdkr52$m6b$[email protected]..
> I'm trying to get the image on my homepage (which is 320
x 214) to sit
> inside
> my "leftside" div (which is 380 width). Why is it
expanding to 380 px if
> I put
> it in it's own div which is 320 px? What am I doing
wrong? Should I not
> have
> nested divs?
>
> Originally I sliced the leftside out of Fireworks but
I'm really trying to
> learn CSS and I want to do this the "right" way.
>
>
http://www.faceyourspaceorganizing.com/test_index.html
>
>

Is there a way to Customize a div Scrollbar Width or Appearance

Hi,
I'm trying to figure out if there's a way to customize standard a div scrollbar width or appearance. Any sort of customization would be helpful.
Thanks for your help!

Can you upload a little example to box.com?
I'm trying to implement slimScroll, perfectScrollBar, or tinyScrollBar but do something wrong because it does not work me.
The reason is that in mobile devices, native scroll bars of Edge work slowly and without inertia (you can test in http://www.VolGastronomic.com).
Thanks.

Centering div makes design view too wide

<div style="width: 100%;">
<div style="width: 100px; margin-left: auto;
margin-right: auto;">
BODY CONTENT
</div>
</div>
Ok, I've been wrapping my body content in the div tags shown
above rather
than using a centred table as I did before. The problem I
have is that
design view is too wide and I have to use the horizontal
scroll bars when I
am using my laptop. It's not a big problem, but was wondering
if it was
necessary to have to live with this? Also, is there any
particular reason
the div appears yellow in design view?
Cheers
ss.

> an HTML retard
This is the most important thing for you to work on if you
want to stick
with DW.
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
==================
"Synapse Syndrome"
<[email protected]> wrote in message
news:[email protected]...
>
> "Gary White" <[email protected]> wrote in
message
> news:[email protected]...
>> On Sat, 13 May 2006 15:45:12 +0100, "Synapse
Syndrome"
>> <[email protected]> wrote:
>>
>>><div style="width: 100%;">
>>> <div style="width: 100px; margin-left: auto;
margin-right: auto;">
>>> BODY CONTENT
>>> </div>
>>></div>
>>>
>>>
>>>
>>>Ok, I've been wrapping my body content in the div
tags shown above rather
>>>than using a centred table as I did before. The
problem I have is that
>>>design view is too wide and I have to use the
horizontal scroll bars when
>>>I
>>>am using my laptop. It's not a big problem, but
was wondering if it was
>>>necessary to have to live with this? Also, is
there any particular
>>>reason
>>>the div appears yellow in design view?
>>
>> What's the point of the outer 100% wide div? You get
exactly the same
>> thing without it. Your body content is only 100
pixels wide? There is no
>> reason for the posted code to show up in yellow.
Perhaps, if you show
>> *all* of the code, someone can spot the problem.
>
>
> Thanks, from what you say it seems obvious now. I got
that code from an
> earlier post here and was using it without knowing what
I was doing 'cos
> I'm an HTML retard.
http://tinyurl.com/rd6zq
> I changed the 100px to the max width of the real
contents and now
> everything is fine. I don't know what the point of the
outer div was for
> in the example, but it does make the design view look a
bit better for
> working out my layout I think.
> Cheers
>
> ss.
>

CSS issues - centering divs, floats, & margins

OK,
Have my CSS with wrapper....several different divs. My issue
was centering a div, then centering a div below it, so I used
margin-left:auto and margin-right:auto. I also have another div
that SHOULD reside on the right side of the page, however, it has a
float:right, so I know that the auto margins will push the right
floated div below where I want it to reside.
Here's the CSS code:
html,body {
margin-left: 0px;
margin-right: 0px;
background:;
#wrapper {
font-family:Georgia, Times New Roman, Times, serif;
font-size: 14px;
font-style: normal;
line-height: normal;
color: #000000;
height: px;
width: 760px;
left:50%;
top:75px;
margin:0 auto 0 auto;
#toprule {
float:left;
width: 725px;
padding-left:15.5px;
padding-right:15.5px;
height: 6px;
border:#00000;
border-style:solid;
background:none;
#leftrule {
float:left;
width: 6px;
height: 600px;
border:#000000;
border-style:solid;
border-size:1px;
background:none;
margin-top: 75px;
#topbanner
width: 686px;
height: 136px;
margin-left:auto;
margin-right:auto;
margin-top:25px;
border:#000000;
border-style:solid;
border-size:1px;
background:#000000;
#rightrule
float:right;
width: 6px;
height: 600px;
margin-top:75px;
border:#000000;
border-style:solid;
border-size:1px;
background:none;
#topmenu
width: 623px;
height: 26px;
margin-left:auto;
margin-right:auto;
border:#000000;
border-style:solid;
border-size:1px;
background:none;
#lowermenu
float:left;
width: 325px;
height: 124px;
margin-top:30px;
margin-left:40px;
border:#000000;
border-style:solid;
border-size:1px;
background:none;
#images
float:right;
width: 306px;
height: 306px;
border:#000000;
margin-top:30px;
margin-right:30px;
border-style:solid;
border-size:1px;
background: none;
#content
float:left;
width:325px;
height:177px;
margin-left:40px;
margin-top:15px;
border:#000000;
borderstyle:solid;
border-size:1px;
background:none
#footer
width: 686px;
height: 73px;
border:#000000;
margin-top:15px;
margin-left:auto;
margin-right:auto;
border-style:solid;
border-size:1px;
background:none;
and the HTML 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=utf-8" />
<title>Welcome to EB's Food</title>
<link href="ebsfoods.css" rel="stylesheet" type="text/css"
/>
</head>
<body>
<div id="wrapper">
<div id="toprule"></div>
</div>
<div id="leftrule">leftrule</div>
<div id="topbanner">topbanner</div>
<div id="rightrule">rightrule</div>
<div id="topmenu">
<div align="left">topmenu</div>
</div>
<div id="lowermenu">lowermenu</div>
<div id="images">images</div>
<div id="content">content</div>
<div id="footer">footer</div>
</body>
</html>
Assistance greatly appreciated.......
David Bird
BTW,
The "lowermenu" and "content" are supposed to line up with
the left edge of the "topbanner" and the "images" is supposed to
line up with the right edge of the "topbanner". The footer is the
same size as the topbanner and is supposed to be centered.
db

This is a bit confused, as is your CSS. What is it you are
trying to
accomplish?
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
==================
"mobirdman" <[email protected]> wrote in
message
news:[email protected]...
> OK,
> Have my CSS with wrapper....several different divs. My
issue was centering
> a
> div, then centering a div below it, so I used
margin-left:auto and
> margin-right:auto. I also have another div that SHOULD
reside on the right
> side
> of the page, however, it has a float:right, so I know
that the auto
> margins
> will push the right floated div below where I want it to
reside.
>
> Here's the CSS code:
>
> html,body {
>
> margin-left: 0px;
> margin-right: 0px;
> background:;
> }
>
> #wrapper {
> font-family:Georgia, Times New Roman, Times, serif;
> font-size: 14px;
> font-style: normal;
> line-height: normal;
> color: #000000;
> height: px;
> width: 760px;
> left:50%;
> top:75px;
> margin:0 auto 0 auto;
>
> }
>
> #toprule {
> float:left;
> width: 725px;
> padding-left:15.5px;
> padding-right:15.5px;
> height: 6px;
> border:#00000;
> border-style:solid;
> background:none;
> }
>
> #leftrule {
> float:left;
> width: 6px;
> height: 600px;
> border:#000000;
> border-style:solid;
> border-size:1px;
> background:none;
> margin-top: 75px;
> }
>
> #topbanner
> {
>
> width: 686px;
> height: 136px;
> margin-left:auto;
> margin-right:auto;
> margin-top:25px;
> border:#000000;
> border-style:solid;
> border-size:1px;
> background:#000000;
>
>
> }
>
> #rightrule
> {
> float:right;
> width: 6px;
> height: 600px;
> margin-top:75px;
> border:#000000;
> border-style:solid;
> border-size:1px;
> background:none;
> }
>
> #topmenu
> {
>
> width: 623px;
> height: 26px;
> margin-left:auto;
> margin-right:auto;
> border:#000000;
> border-style:solid;
> border-size:1px;
> background:none;
> }
>
> #lowermenu
> {
> float:left;
> width: 325px;
> height: 124px;
> margin-top:30px;
> margin-left:40px;
> border:#000000;
> border-style:solid;
> border-size:1px;
> background:none;
> }
>
> #images
> {
> float:right;
> width: 306px;
> height: 306px;
> border:#000000;
> margin-top:30px;
> margin-right:30px;
> border-style:solid;
> border-size:1px;
> background: none;
> }
>
> #content
> {
> float:left;
> width:325px;
> height:177px;
> margin-left:40px;
> margin-top:15px;
> border:#000000;
> borderstyle:solid;
> border-size:1px;
> background:none
> }
>
> #footer
>
> {
>
> width: 686px;
> height: 73px;
> border:#000000;
> margin-top:15px;
> margin-left:auto;
> margin-right:auto;
> border-style:solid;
> border-size:1px;
> background:none;
>
> and the HTML 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=utf-8" />
> <title>Welcome to EB's Food</title>
> <link href="ebsfoods.css" rel="stylesheet"
type="text/css" />
> </head>
>
> <body>
> <div id="wrapper">
> <div id="toprule"></div>
>
> </div>
> <div id="leftrule">leftrule</div>
> <div id="topbanner">topbanner</div>
> <div id="rightrule">rightrule</div>
> <div id="topmenu">
> <div align="left">topmenu</div>
> </div>
> <div id="lowermenu">lowermenu</div>
> <div id="images">images</div>
> <div id="content">content</div>
> <div id="footer">footer</div>
> </body>
> </html>
>
> Assistance greatly appreciated.......
>
> David Bird
>

AP a Div inside a centered DIV

I've never got this understood. I have a Container DIV, set
to auto center. I'm using one of the presets that DW8 gives you. I
need put a small DIV in the upper right corner, that stays in the
exact spot even when browsers are widened...let me re-phrase. I
want the little DIV to be Absolutely Positioned, but using the XY
coordinates of my main, centered container.
I made a DIV, called it Absolute, moved it where I want it,
and of course it stays put when I widen the browser window. It is
using the whole browser window for the XY coordinates. That's fine,
and I understand it's supposed to work that way.
But, I also thought that if you put a DIV inside another, it
will use the XY of that div, not the whole page.
How do I do this?

This may help you understand positioning a bit -
There are 4 different types of positioning:
Absolute
Relative
Fixed
Static
Here is a brief explanation of each kind of positioning (with
regard to
placement of elements on the page only)....
Position:absolute (or A/P elements)
This does several things -
1. It 'removes' the element from the flow of the code on
the page so that
it can no longer influence the size or position of any other
page element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from
the position of
its closest PARENT *positioned* element - in the
absence of any explicitly
positioned parent, this will default to the <body> tag,
which is always
positioned
at 0,0 in the browser viewport.
This means that it doesn't matter where in the HTML code the
layer's code
appears (between <body> and </body>), its
location on the screen will not
change (this assumes that you have not positioned the A/P
element within
a table or another A/P element, of course).
Furthermore, the space in
which
this element would have appeared were it not positioned
is not preserved
on the screen. In other words, absolutely positioned elements
don't take
up any space on the page. In fact, they FLOAT over the page.
Position:relative (or R/P elements)
In contrast to absolute positioning, a relatively positioned
page element is
*not* removed from the flow of the code on the page, so
it will use the
spot
where it would have appeared based on its position in
the code as its
zero point reference. If you then supply top, right,
bottom, or left
positions
to the style for this element, those values will be
used as offsets from
its
zero point.
This means that it DOES matter where in the code the
relatively positioned
element appears (, as it will be positioned in that location
(factoring in
the offsets) on the screen (this is true for any placement in
the code).
Furthermore, the space where this element would have
appeared is
preserved in the display, and can therefore affect the
placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.
Position:static
As with relative position, static positions also "go with
the flow". An
element with a static position cannot have values for
offsets (top, right,
left, bottom) or if it has them, they will be ignored. Unless
explicitly
positioned, all div elements default to static positioning.
Position:fixed
A page element with this style will not scroll as the page
content scrolls.
Support for this in elements other than page backgrounds is
quirky
There are several other things you need to know:
1. ANY page element can be positioned - paragraphs, tables,
images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that
if it is not
positioned or explicitly styled otherwise, a) it will always
begin on a new
line on the screen, and b) it will always force content to a
new line below
it, and c) it will always take up the entire width of its
container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of
other
elements
on the page. For example, a 'layer' placed over a hyperlink
will mask that
hyperlink.
You can see a good example of the essential difference
between absolute and
relative positioning here -
http://www.great-web-sights.com/g_layersdemo.asp
You can see a good demonstration of why using layers for a
page layout tool
is dangerous here -
http://www.great-web-sights.com/g_layer-overlap.asp
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
==================
"synterx" <[email protected]> wrote in
message
news:[email protected]...
> I've never got this understood. I have a Container DIV,
set to auto
> center. I'm
> using one of the presets that DW8 gives you. I need put
a small DIV in the
> upper right corner, that stays in the exact spot even
when browsers are
> widened...let me re-phrase. I want the little DIV to be
Absolutely
> Positioned,
> but using the XY coordinates of my main, centered
container.
>
> I made a DIV, called it Absolute, moved it where I want
it, and of course
> it
> stays put when I widen the browser window. It is using
the whole browser
> window
> for the XY coordinates. That's fine, and I understand
it's supposed to
> work
> that way.
>
> But, I also thought that if you put a DIV inside
another, it will use the
> XY
> of that div, not the whole page.
>
> How do I do this?
>

Centering divs horizontally

I have 4 divs on a fluid grid that I am trying to center inside a a navigation div. does anyone know how to do that?
As you can see the 4 divs will be used as navigation buttons. what I would like to do is get them spread out so they are always center to each other no matter how big the screen is.
I would like to see:
space - div - space - div - space - div - space - div - space.

Use an unordered list for your menu items. To Illustrate, copy & paste the following code into a new, blank document. SaveAs test.html and preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Menu</title>

<style>
/***add these to your CSS Reset***/
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
nav {
width: 960px;
/**with width, this is centered**/
margin:0 auto;
background: #555;
color: #FFF;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
nav li {
list-style:none;
box-shadow: inset 1px 2px 12px #F00;
display:inline-block;
width: 9em;
line-height:6em;
/**space between items**/
margin: 10px 4.75%;
border: 1px solid #CCC;
text-align: center;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
cursor:pointer;
nav li:hover {
background-color:#FFF;
color:#000;
</style>
</head>
<body>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
</body>
</html>
This is what it looks like in Firefox:
Nancy O.

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

Missing right side on a div 100% width

Anyone knows why a div with a css class with attribute width : 100% is missing the right side ? See image ! Blank app (Universal Apps)

I think the issue might be related with the HTML CSS layout, see the following image I captured from Visual Studio.
As we see the width 100% is applied to the div, therefore the div width is 1366 in simulator.
And we have Border which is not calculated in the width, for this reason, there is no space for right side to display the border.
simply to make it work, I set div width as 1366 - 3*2 = 1360 (screen width - left border width - right border width), the border display without any problem.
--James
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey.

Expanding and Centering ImageItems appearing as Buttons

Hi,
I am developing a midlet for school which has a Form as main menu. I've added StringItems appearing as Buttons to this menu and I want them to fill the complete screen so I used the LAYOUT.EXPAND. No problems so far, everything works but I want the my button's label to be centered as well. I've tried everything and searched everywhere but nothing works. My current source;
      roosterVandaag = new StringItem("Rooster vandaag", null, Item.BUTTON);
      datumKiezen = new StringItem("Datum kiezen", null, Item.BUTTON);
      settings = new StringItem("Opties", null, Item.BUTTON);
      roosterDownloaden = new StringItem("Rooster Downloaden", null, Item.BUTTON);
      afsluiten = new StringItem("Afsluiten", null, Item.BUTTON);
      //Set de layout voor de StringItems
      roosterVandaag.setLayout(Item.LAYOUT_EXPAND);
      datumKiezen.setLayout(Item.LAYOUT_EXPAND);
      settings.setLayout(Item.LAYOUT_EXPAND);
      roosterDownloaden.setLayout(Item.LAYOUT_EXPAND);
      afsluiten.setLayout(Item.LAYOUT_EXPAND);Now I need to center the text which appears in the Expanded Button..please help me, I'm desperate because this is for school!!

Hi,
Problems regarding the layout of items on the screen is a common problem in MIDP when developing for a specific target device.
Where did you encounter those problems? You didn't mention it, but does your solution -- including the correct hint from jack -- work as expected on the Wireless Toolkit simulator? I know that there are some devices out there that have a different implementation regarding the layouting of items...
Cheers,
Jasper

Centering a full width image in Adobe Muse

Can anyone help. I am trying to centre a full width image in adobe muse but I am getting nowhere! I am trying to keep the center of the image in the middle of the browser no matter what the browser width. I am using the image as a fill in a full width box and have tried centering it using the fill options (top centre) and using the align (central ) tool for the box but neither seem to work. My page can be viewed at
www.helioswebdesign.co.uk
Any help would be much appreciated
Yours
martin

To add images press CTRL+D and then select the image and place it where you want.
To hyperlink it go to the top menu and there should be Hyperlink folowed by a box. Enter your URL to link in there.
You can also use the slideshow widget should you want to make a slideshow.

Help centering divs

Okay I'm tearing my hair out here!
I'm working on a Web design for a class. I'm trying to make a fixed header that is centered on the screen. The block containing the header is 950 pixels wide and should auto-center.
Here's a link:
http://pjutter.com/Sessions/AdvancedCSS/Lesson3/indexNew.html
This is working on Firefox and Google Chrome but not on Internet Explorer (where it is totally messed up and unreadable).
I cannot figure out how centering works. Supposedly margin: 0 auto should center a div, but that only occasionally works. I've used negative margins to center the 950-pixel div, and that works on everything except IE which is ALL messed up.
The CSS file for the header is the one called headernav. The others are part of the Blueprint framework which I'll be using on the grid underneath the header. So just ignore the others.
Can anyone help me with this?
Thanks, Phyllis

Can't see your page. But static (unspecified) positioning is all that's required for 98% of page layouts. I very rarely use APDivs except for special situations like disjointed rollovers, lightbox windows or flyout menus. And then I wrap them inside a position:relative container.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Div full width with narrower container

Is there any way to create for example a menu bar that is the full width of the screen when your container is say 960px as I can't see that it's possible.
I think for this to be possible you would need to be able to add divs to the body element before the default container div, and then be able to add a container within this new div.

Your question sounds very similar to this idea:
http://forums.adobe.com/ideas/2664
Maybe you can write your use case in the comments there and add you vote!

How to make the finder window expand to full height AND width of my screen, but not "full screen mode".

The new green button on the finder window makes the screen go into full screen takeover mode - alt clicking this makes it 100% height of the screen.
How can I make this 100% width and height (just like it used to be in Mavericks)?
I have 2 x 27" monitors, so the "full screen takeover" mode is not right as I only want the finder window to be on one monitor whilst I work on another.
Any ideas?! Thank you!

Was about to post the same question.
Ever since I upgraded to Yosemite (about a month ago), this odd behavior has irked me.
Could it be that it only plagues those of us running dual displays? And therefore nobody else cares?

New design for site - need feedback

I am still learning web design, and now that I know I little
more I decided to re-design my website. I need feedback from all of
you. Does this new design look better? What do you think needs to
be changed, added or removed?
Here is the current design:
http://northshoreclassifieds.com
Here is the new design:
http://northshoreclassifieds.com/new.htm
Thank you in advance.

On Sun, 24 Sep 2006 21:16:57 +0000 (UTC), "Salabinha"
<[email protected]> wrote:
>I am still learning web design, and now that I know I
little more I decided to
>re-design my website. I need feedback from all of you.
Does this new design
>look better? What do you think needs to be changed, added
or removed?
>
> Here is the current design:
http://northshoreclassifieds.com
> Here is the new design:
http://northshoreclassifieds.com/new.htm
>
> Thank you in advance.
Hi, I just now saw this post. it looks like you are trying
several
methods to center the table.
<body><div class="centered"></div>
<table width="760" align="center" cellpadding="0"
cellspacing="0">
(The rest of the table)
</body>
</html>
Either method works, you don't have to do it twice. :)
Your table is centered in IE 6 on XP Pro SP2, are you still
not seeing
it centered? Try emptying your cache.
You can ditch every single font tag; you're using CSS in the
head, so
just do this:
body {
background: #62758C;
margin: 0;
padding: 0;
text-align: center;
background-image: url(images/backgroundimage.gif);
font-family: Arial, Helvetica, sans-serif;
Everything is a "child" of the body, so you don't have to
have this in
your other style definitions unless you wanta different font
for some
style.
Hope this helps!

Expand a centered div's width incrementally

Similar Messages

Maybe you are looking for