DIV Layout - Vertically Centre

Hello, how can i centre my div based layout Vertically and
Horizontally?
Tried a lot but vain.
Please See the Code and Help accordingly.

Horizontal is easy. Vertical is not. In your example, a 100%
width element
won't center anyhow, since there is nothing to center! And a
fixed height
element is BEGGING for trouble - if the text size is changed
larger by the
visitor, you will get an overlapping mess.
<!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 the Wrong Side of the
Web...</title>
<link href="styles.css" rel="stylesheet" type="text/css"
/>
</head>
<body>
<div id="mainCentre">Content for class mainCentre Goes
Here</div>
</body>
</html>
CSS External
========================================
body {
margin: 0px;
#mainCentre {
width: 980px;
margin:0 auto;
background-color: #999;
http://www.apptools.com/examples/tableheight.php
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
==================
"manofspirit" <[email protected]> wrote in
message
news:[email protected]...
> Hello, how can i centre my div based layout Vertically
and Horizontally?
> Tried a lot but vain.
> Please See the Code and Help accordingly.
>
>
>
> XHTML PAGE
>
=============================================================
> <!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 the Wrong Side of the
Web...</title>
> <link href="styles.css" rel="stylesheet"
type="text/css" />
> </head>
> <body>
> <div class="mainCentre">Content for class
mainCentre Goes Here</div>
> </body>
> </html>
>
>
>
>
>
>
>
>
>
>
> CSS External
> ========================================
> body {
> margin-left: 0px;
> margin-top: 0px;
> margin-right: 0px;
> margin-bottom: 0px;
> }
> .mainCentre {
> height: 400px;
> width: 100%;
> background-color: #999;
> }
>

Similar Messages

Help with DW & FW8 nav position in vertical centred page

I have a FW8 CSS navbar which is contained within a wrapper
div for a horizontally and vertically centred page (table layout).
Works ok in Firefox and looks ok in IE but when IE browser is
resized the navbar isn't staying in place. I've changed the
position elements but can't get the combination right. Can anyone
help please?

For what it's worth,
td img {
/* Another Mozilla/Netscape bug with making sure our images
display
correctly
display: block;
this is not a Moz bug. It's an IE one. Moz is displaying
images according
to the standards - it's IE that is creating your problems.
And what you
have done here is to bludgeon Moz into compliance by making
an image
something it's not.... For what it's worth.
With regard to the FW menus, I have decided not to help
people with them.
I'm sorry, but since MM created them this way against the
advice of their
many consultants, I think they need to support their
creation. Just look at
that stupid mess of CSS....
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
==================
"Mdsign" <[email protected]> wrote in
message
news:[email protected]...
>I have a FW8 CSS navbar which is contained within a
wrapper div for a
> horizontally and vertically centred page (table layout).
Works ok in
> Firefox
> and looks ok in IE but when IE browser is resized the
navbar isn't staying
> in
> place. I've changed the position elements but can't get
the combination
> right.
> Can anyone help please?
>
> html, body, #wrapper {
> background-color: #E8EFF7;
> height:100%;
> margin: 0;
> padding: 0;
> border: none;
> text-align: center;
> }
>
> td img {
> /* Another Mozilla/Netscape bug with making sure our
images display
> correctly
> */
> display: block;
> }
>
> #FWTableContainer841513528 {
> /* The master div to make sure that our popup menus get
aligned correctly.
> Be
> careful when playing with this one. */
> position:relative;
> margin:0px;
> width:750px;
> height:30px;
> text-align:left;
> }
>
> #MMMenuContainer0314150012_0 {
> /* This ID is related to the master menu div for menu
> MMMenuContainer0314150012_0 and contains the important
positioning
> information
> for the menu as a whole */
> position:relative;
> left:188px;
> top:30px;
> visibility:hidden;
> z-index:300;
> }
>
> #MMMenu0314150012_0 {
> /* This class defines things about menu
MMMenu0314150012_0's div. */
> position:absolute;
> left:0px;
> top:0px;
> visibility:hidden;
> background-color:transparent;
> width:148px;
> height:110px;
> }
>
> .MMMIFVStyleMMMenu0314150012_0 {
> /* This class determines the general characteristics of
the menu items in
> menu
> MMMenu0314150012_0 */
> width:148px;
> height:22px;
> voice-family: "\"}\"";
> voice-family:inherit;
> width:140px;
> height:14px;
> }
>
> .MMMIVStyleMMMenu0314150012_0 {
> /* This class determines the general characteristics of
the menu items in
> menu
> MMMenu0314150012_0 */
> width:148px;
> height:22px;
> voice-family: "\"}\"";
> voice-family:inherit;
> width:140px;
> height:14px;
> }
>
> #MMMenu0314150012_0_Item_0 {
> /* Unique ID for item 0 of menu MMMenu0314150012_0 so we
can set its
> position
> */
> left:0px;
> top:0px;
> }
>
> #MMMenu0314150012_0_Item_1 {
> /* Unique ID for item 1 of menu MMMenu0314150012_0 so we
can set its
> position
> */
> left:0px;
> top:22px;
> }
>
> #MMMenu0314150012_0_Item_2 {
> /* Unique ID for item 2 of menu MMMenu0314150012_0 so we
can set its
> position
> */
> left:0px;
> top:44px;
> }
>
> #MMMenu0314150012_0_Item_3 {
> /* Unique ID for item 3 of menu MMMenu0314150012_0 so we
can set its
> position
> */
> left:0px;
> top:66px;
> }
>
> #MMMenu0314150012_0_Item_4 {
> /* Unique ID for item 4 of menu MMMenu0314150012_0 so we
can set its
> position
> */
> left:0px;
> top:88px;
> }
>
> #MMMenuContainer0314150012_0 img {
> /* needed for Mozilla/Camino/Netscape */
> border:0px;
> }
>
> #MMMenuContainer0314150012_0 a {
> /* Controls the general apperance for menu
MMMenuContainer0314150012_0's
> items, including color and font */
> text-decoration:none;
> font-family:Verdana, Arial, Helvetica, sans-serif;
> font-size:10px;
> color:#6699cc;
> text-align:left;
> vertical-align:middle;
> padding:4px;
> background: url("mmmenu2_148x22_up.gif") #e6eef7;
> font-weight:normal;
> font-style:normal;
> display:block;
> position:absolute;
> }
>
> #MMMenuContainer0314150012_0 a:hover {
> /* Controls the mouse over effects for menu
MMMenuContainer0314150012_0 */
> color:#cc0000;
> background: url("mmmenu2_148x22_over.gif") #e6eef7;
> }
> #MMMenuContainer0314145458_1 {
> /* This ID is related to the master menu div for menu
> MMMenuContainer0314145458_1 and contains the important
positioning
> information
> for the menu as a whole */
> position:absolute;
> left:467px;
> top:30px;
> visibility:hidden;
> z-index:300;
> }
>
> #MMMenu0314145458_1 {
> /* This class defines things about menu
MMMenu0314145458_1's div. */
> position:absolute;
> left:0px;
> top:0px;
> visibility:hidden;
> background-color:transparent;
> width:113px;
> height:22px;
> }
>
> .MMMIFVStyleMMMenu0314145458_1 {
> /* This class determines the general characteristics of
the menu items in
> menu
> MMMenu0314145458_1 */
> width:113px;
> height:22px;
> voice-family: "\"}\"";
> voice-family:inherit;
> width:105px;
> height:14px;
> }
>
> #MMMenu0314145458_1_Item_0 {
> /* Unique ID for item 0 of menu MMMenu0314145458_1 so we
can set its
> position
> */
> left:0px;
> top:0px;
> }
>
> #MMMenuContainer0314145458_1 img {
> /* needed for Mozilla/Camino/Netscape */
> border:0px;
> }
>
> #MMMenuContainer0314145458_1 a {
> /* Controls the general apperance for menu
MMMenuContainer0314145458_1's
> items, including color and font */
> text-decoration:none;
> font-family:Verdana, Arial, Helvetica, sans-serif;
> font-size:10px;
> color:#6699cc;
> text-align:left;
> vertical-align:middle;
> padding:4px;
> background: url("mmmenu1_113x22_up.gif") #e6eef7;
> font-weight:normal;
> font-style:normal;
> display:block;
> position:absolute;
> }
>
> #MMMenuContainer0314145458_1 a:hover {
> /* Controls the mouse over effects for menu
MMMenuContainer0314145458_1 */
> color:#cc0000;
> background: url("mmmenu1_113x22_over.gif") #e6eef7;
> }
>

I am using media queries and div will not centre on desktop version

Hi,
I am building a site for the first time using media queries. My problem is that I cannot get the header div (#layoutDiv1) to centre on the desktop version.
I have pasted my code below, am I missing something?
Any help would be great.
Thanks, Alex.
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
color: #FFF;
background-color: #000;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 90%;
display: block;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 100%;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 90%;
display: block;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 100%;
text-align: left;
#LayoutDiv1 {
width: 1000px;
padding: 20px;
margin-right: auto;
margin-left: auto;

Because you don't have max-width to constrain the responsive design attributes from the tablet and phone are also then applied to the desktop because they are true. Have you tried either setting a max-width or setting the clear and float to none in the desktop CSS?

How to align the item text in the combobox vertically centred after increasing the height of the combobox in mfc?

I want to make the item text of the combobox to be aligned vertically(Centred) . Actually I increased the height
of the combobox and after the increasing the combobox height, the text is not centred vertically.The code
snippet for increasing the height is as follows,
m_SpecifyCombo.SetItemHeight(-1,20);//CCombobox m_SpecifyCombo
After increasing the height the text in the combobox is not in the centre as shown in the below image,
But I want the text to be centred as shown in the below image.
Code snippet for owner drawn combobox:
#if !defined(AFX_CUSTCOMBOBOX_H__F8528B4F_396E_11D1_9384_00A0248F6145__INCLUDED_)
#define AFX_CUSTCOMBOBOX_H__F8528B4F_396E_11D1_9384_00A0248F6145__INCLUDED_
#if _MSC_VER >= 1000
#pragma once
#endif // _MSC_VER >= 1000
typedef enum {FONTS} STYLE; //Why have I enumerated, Cos, Maybe I might want something other than Fonts here
class COwnerDrawCombo : public CComboBox
// Construction
public:
COwnerDrawCombo();
COwnerDrawCombo (STYLE);
// Attributes
public:
void SetHilightColors (COLORREF hilight,COLORREF hilightText)
m_clrHilight = hilight;
m_clrHilightText = hilightText;
void SetNormalColors (COLORREF clrBkgnd,COLORREF clrText)
m_clrNormalText = clrText;
m_clrBkgnd = clrBkgnd;
static BOOL CALLBACK EnumFontProc (LPLOGFONT lplf, LPTEXTMETRIC lptm, DWORD dwType, LPARAM lpData);
void FillFonts ();
int GetSelFont (LOGFONT&);
// Operations
public:
// Overrides
// ClassWizard generated virtual function overrides
//{{AFX_VIRTUAL(CCustComboBox)
public:
virtual void DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct);
virtual void MeasureItem(LPMEASUREITEMSTRUCT lpMeasureItemStruct);
protected:
virtual void PreSubclassWindow();
//}}AFX_VIRTUAL
// Implementation
public:
virtual ~COwnerDrawCombo();
// Generated message map functions
protected:
STYLE m_enStyle;
COLORREF m_clrHilight;
COLORREF m_clrNormalText;
COLORREF m_clrHilightText;
COLORREF m_clrBkgnd;
BOOL m_bInitOver;
void DrawDefault (LPDRAWITEMSTRUCT);
void DrawFont(LPDRAWITEMSTRUCT);
void InitFonts ();
//{{AFX_MSG(CCustComboBox)
afx_msg int OnCreate(LPCREATESTRUCT lpCreateStruct);
afx_msg void OnDestroy();
//}}AFX_MSG
afx_msg long OnInitFonts (WPARAM, LPARAM);
DECLARE_MESSAGE_MAP()
//{{AFX_INSERT_LOCATION}}
// Microsoft Developer Studio will insert additional declarations immediately before the previous line.
#endif //!defined(AFX_CUSTCOMBOBOX_H__F8528B4F_396E_11D1_9384_00A0248F6145__INCLUDED_)
// OwnerDrawCombo.cpp : implementation file
#include "stdafx.h"
#include "combobox.h"
#include "OwnerDrawCombo.h"
#ifdef _DEBUG
#define new DEBUG_NEW
#undef THIS_FILE
static char THIS_FILE[] = __FILE__;
#endif
#define WM_INITFONTS (WM_USER + 123)
//I chose 123 cos nobody might use the same exact number.. I can improve this by use RegisterWindowMessage..
// COwnerDrawCombo
//Initial values of the text and highlight stuff
COwnerDrawCombo::COwnerDrawCombo()
m_enStyle = FONTS;
m_clrHilight = GetSysColor (COLOR_HIGHLIGHT);
m_clrNormalText = GetSysColor (COLOR_WINDOWTEXT);
m_clrHilightText = GetSysColor (COLOR_HIGHLIGHTTEXT);
m_clrBkgnd = GetSysColor (COLOR_WINDOW);
m_bInitOver = FALSE;
COwnerDrawCombo::COwnerDrawCombo (STYLE enStyle)
m_enStyle = enStyle;
m_clrHilight = GetSysColor (COLOR_HIGHLIGHT);
m_clrNormalText = GetSysColor (COLOR_WINDOWTEXT);
m_clrHilightText = GetSysColor (COLOR_HIGHLIGHTTEXT);
m_clrBkgnd = GetSysColor (COLOR_WINDOW);
m_bInitOver =FALSE;
COwnerDrawCombo::~COwnerDrawCombo()
BEGIN_MESSAGE_MAP(COwnerDrawCombo, CComboBox)
//{{AFX_MSG_MAP(COwnerDrawCombo)
ON_WM_CREATE()
ON_WM_DESTROY()
//}}AFX_MSG_MAP
ON_MESSAGE (WM_INITFONTS,OnInitFonts)
END_MESSAGE_MAP()
// COwnerDrawCombo message handlers
void COwnerDrawCombo::DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct)
//I might want to add something else someday
switch (m_enStyle)
case FONTS:
DrawFont(lpDrawItemStruct);
break;
//I dont need the MeasureItem to do anything. Whatever the system says, it stays
void COwnerDrawCombo::MeasureItem(LPMEASUREITEMSTRUCT lpMeasureItemStruct)
void COwnerDrawCombo::DrawFont(LPDRAWITEMSTRUCT lpDIS)
CDC* pDC = CDC::FromHandle(lpDIS->hDC);
CRect rect;
TRACE0 ("In Draw Font\n");
// draw the colored rectangle portion
rect.CopyRect(&lpDIS->rcItem);
pDC->SetBkMode( TRANSPARENT );
if (lpDIS->itemState & ODS_SELECTED)
pDC->FillSolidRect (rect,m_clrHilight);
pDC->SetTextColor (m_clrHilightText);
else
pDC->FillSolidRect (rect,m_clrBkgnd);
pDC->SetTextColor (m_clrNormalText);
if ((int)(lpDIS->itemID) < 0) // Well its negetive so no need to draw text
else
CString strText;
GetLBText (lpDIS->itemID,strText);
CFont newFont;
CFont *pOldFont;
((LOGFONT*)lpDIS->itemData)->lfHeight = 90; //9 point size
((LOGFONT*)lpDIS->itemData)->lfWidth = 0;
newFont.CreatePointFontIndirect ((LOGFONT*)lpDIS->itemData);
pOldFont = pDC->SelectObject (&newFont);
pDC->DrawText(strText, rect, DT_LEFT | DT_VCENTER | DT_SINGLELINE);
pDC->SelectObject (pOldFont);
newFont.DeleteObject ();
void COwnerDrawCombo::InitFonts ()
CDC *pDC = GetDC ();
ResetContent (); //Delete whatever is there
EnumFonts (pDC->GetSafeHdc(),NULL,(FONTENUMPROC) EnumFontProc,(LPARAM)this);//Enumerate
m_bInitOver = TRUE;
BOOL CALLBACK COwnerDrawCombo::EnumFontProc (LPLOGFONT lplf, LPTEXTMETRIC lptm, DWORD dwType, LPARAM lpData)
if (dwType == TRUETYPE_FONTTYPE) //Add only TTF fellows, If you want you can change it to check for others
int index = ((COwnerDrawCombo *) lpData)->AddString(lplf->lfFaceName);
LPLOGFONT lpLF;
lpLF = new LOGFONT;
CopyMemory ((PVOID) lpLF,(CONST VOID *) lplf,sizeof (LOGFONT));
((COwnerDrawCombo *) lpData)->SetItemData (index,(DWORD) lpLF);
return TRUE;
int COwnerDrawCombo::OnCreate(LPCREATESTRUCT lpCreateStruct)
if (CComboBox::OnCreate(lpCreateStruct) == -1)
return -1;
// TODO: Add your specialized creation code here
if (m_enStyle == FONTS)
//SetItemHeight(-1,30);
PostMessage (WM_INITFONTS,0,0);
return 0;
long COwnerDrawCombo::OnInitFonts (WPARAM, LPARAM)
InitFonts ();
return 0L;
void COwnerDrawCombo::OnDestroy()
if (m_enStyle == FONTS)
int nCount;
nCount = GetCount ();
for (int i = 0; i < nCount; i++)
delete ((LOGFONT*)GetItemData (i)); //delete the LOGFONTS actually created..
// TODO: Add your message handler code here
CComboBox::OnDestroy();
void COwnerDrawCombo::FillFonts ()
m_enStyle = FONTS;
PostMessage (WM_INITFONTS,0,0); //Process in one place
int COwnerDrawCombo::GetSelFont (LOGFONT& lf)
int index = GetCurSel ();
if (index == LB_ERR)
return LB_ERR;
LPLOGFONT lpLF = (LPLOGFONT) GetItemData (index);
CopyMemory ((PVOID)&lf, (CONST VOID *) lpLF, sizeof (LOGFONT));
return index; //return the index here.. Maybe the user needs it:-)
void COwnerDrawCombo::PreSubclassWindow()
// TODO: Add your specialized code here and/or call the base class
//Tried to do what Roger Onslow did for the button.. Did not work..?? Any R&D guys around :-)
Can anyone please let me know how can I achieve this.
Any help can be appreciated.
Thanks in advance
SivaV

Hi sivavuyyuru,
I cannot find a easy way to make this.
I think you may need to draw your own Combo Box control. And you could change the edit control more like static text. Check the article:
http://www.codeguru.com/cpp/controls/combobox/fontselectioncombos/article.php/c1795/Owner-Drawn-Font-Selection-Combobox.htm
In the resource editor, Owner draw -> variable , Has string->true, type->drop list.
The result:
Best regards,
Shu Hu
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.

Div layout breaks apart

I have created a CSS div layout contained within an overall
div so I can syle layout to a fixed width.
I have styled container "overflow: hidden" but internal divs
still break apart in IE.
I have reduced px width of center content div but that makes
no difference either.
Site URL is:
http://dstall.com/oft/
Layout should look like this screenshot:
http://dstall.com/oft/PIX/Screenshot.jpg
but in IE it's breaking apart like in screenshot2:
http://dstall.com/oft/PIX/Screenshot2.jpg

See if the below html/css helps:
<!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">
#wrapper {
    width: 980px;
    margin: 0 auto;
#header {
    overflow: hidden;
#headerLeft {
    float: left;
    width: 600px;
#headerRight {
    float: right;
    width: 380px;
#mainAreaWrapper {
    overflow: hidden;
#mainAreaLeft {
    float: left;
    width: 240px;
#mainAreaRight {
    float: left;
    width: 740px;
#mainAreaTop {
    min-height: 320px;
    background-color: #CCC;
    margin-bottom: 15px;
        -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
#mainAreaBlueBox {
    min-height: 250px;
    float: left;
    width: 450px;
    background-color:#09C;
    -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
#mainAreaGreenBox {
    min-height: 250px;
    float: left;
    width: 280px;
    margin-left: 10px;
    background-color:#6C3;
    -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="headerLeft">Header Left</div>
<div id="headerRight">Header Right</div>
</div>
<div id="mainAreaWrapper">
<div id="mainAreaLeft">Main Area Left</div>
<div id="mainAreaRight">
<div id="mainAreaTop">Main Area Top</div>
<div id="mainAreaBlueBox">Blue Box</div>
<div id="mainAreaGreenBox">Green Box</div>
</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

Issues with floated DIV layout

Hi I am having problems with my floated DIV layout on the following site in I.E 6/7 but not 8.
I have tried display: inline thinking it may be a margin/padding issue?
http://www.sopasbeauty.co.uk
what am I doing wrong, should I be adding clearfloats to separate area's of the page??
Mark

First, open the page in DW and use FILE | Convert > XHTML 1.0 Transitional. Then try changing this -
<div class="boxes" id="box1">
<h1>Acrylic Nails</h1>

Vertically centring text

I'm looking to vertically centre some text in a dynamic text
field... is that possible, and if so, could anyone help me work it
out?
Thanks in anticipation.
Andy
(Also posted under General Discussion)

I'd see two ways to solve it, the first would be to determin
the height of the text in the text field and than place the
textfield on the position inside the graphical field accordingly.
the second would be to determin the number of line your text
has in the tecxtfield (scroll properties, a bit tricky) and add te
appropriate number of empty lines a the start of the string.

Design View and a CSS Div layout page

There are a few pages l
ike this. I am assuming it is because everything is layed out w
ith div tags, but there mush be a way to correct the desging view. Everything shows up great o
nline. Here is a screenshot:
Here is the code:
<body onload="initHomePage(); addReferToLinks();">

<script type="text/javascript" src="/shared_assets/toolbar_v2/toolbar.js"></script>

<img src="/profile/image/logo_linknet.gif" />

<form name="frmSearch" action="" method="get" title="Resources" class="scopedSearch">
       <input class="textInput" name="qt" value="THIS SECTION ONLY" id="searchField" size="20" />
       <input class="button" type="submit" value="Search" name="submit" />
       <input type=hidden name="col" value="mpr dno dnos1" />
</form>
    <div id="main">

<div id="newsBox" class="box">
   <div class="boxHeader">
    <div class="headerLeft"><h2>MP News</h2></div>
    <div class="headerRight"><a href="/news/news/index.htm" class="more">more »</a></div>
   </div>
   <div class="boxContent">
    <h3>
     <script type="text/javascript">var x=new Date(); document.write(x.toLocaleDateString());</script>
    </h3>
    <div id="newsContent">
     <div class="loading">
      Loading...
     </div>
    </div>
    
    <h3>My Subscriptions</h3>
     <ul style="list-style-type:none;">
      <li><a href="http://rss/">Setup Subscriptions - Get Help</a></li>
      <li><a href="http://">View Subscriptions</a></li>
     </ul>
    
    <div class="imgFrame"><a href=""><img src="image/mc_logo2.jpg" alt="Media Center" hspace="0" vspace="0" border="0" /></a></div>
    
    <div class="imgFrame"><a href="http/"><img src="image/columns.gif" hspace="0" vspace="0" border="0" alt="The Northwestern Columns" /></a></div>
   </div>
</div>


<div id="content">
   
   
   <div id="alert" class="box highlightBox">
    <div class="boxHeader">
     <div class="headerLeft"><h2>Important Notice</h2></div>
     <div class="headerRight"> </div>
    </div>
    <div id="alertContent" class="boxContent">
     <div class="article">
      <a href="" class="headline">Avoid lock out - Install LINK 22.2 now</a>
      Users who do not install LINK 22.2 before the version enforcement date of July 31 will be
      unable to access their PCs.
     </div>
    </div>
   </div>
            <div id="home_page_id">) Home Page</div>
   
   <div id="activities" class="box highlightBox">
    <div class="boxHeader">
     <div class="headerLeft">Welcome<span id="username"></span><h2>What would you like to do?</h2></div>
     <div class="headerRight"> </div>
    </div>
    <div class="boxContent">
     <div style="width:100%;">
      <ul>
       <li><a title="Find information and tools for recruiting new representatives" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Recruiting: <select style="font:message-box; width:19em;" onchange="if(this.value){window.navigate(appendReferer(this.value))};">
         <option name="selectRecruit" selected="selected">*** make selection ***</option>
         <option value="http.htm">Sourcing & Prospecting</option>
         <option value="http://.htm">Selecting & Assessing Candidates</option>
         <option value="http://_process.htm">Post Acceptance Process</option>
         <option value="http">Developing an Internship Program</option>
         <option value="http.htm">Tracking Activity, Results & Accountability</option>
         <option value="http://.htm">Recruiter Development</option>
        </select></a></li>
       <li><a href="/objective/mpr_secure/mp_ldorgdev.htm" title="Find information and tools for developing leaders in your office" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Leadership & Organizational Development </a></li>
       <li><a href="/objective/mpr_secure/mp_supvsn.htm" title="Find information and tools for effective supervision" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Supervision</a></li>
       <li><a href="/objective/mpr_secure/mp_stfop.htm" title="Find information and tools for   managing your office" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Staffing & Operations</a></li>
       <li><a href="/objective/mpr_secure/mp_plnperform.htm" title="Find information and tools for business planning and performance monitoring" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Planning & Performance</a></li>
          <li><a href="/objective/mpr_secure/mp_mngmntcompben.htm" title="Find information regarding income, fees, expenses, allowances and benefits" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Management Compensation & Benefits</a></li>
          <li><a href="/objective/mpr_secure/mp_repdev.htm" title="Find information and tools regarding mentoring and professional growth" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Representative & Specialist Development</a> </li>
      </ul>
      <div id="slideshow1" class="activitySlideshow" style="height:212px;">
       <img src="image/slideshow_photos/photo06.jpg" />
       <img src="image/slideshow_photos/photo07.jpg" />
       <img src="image/slideshow_photos/photo08.jpg" />
       <img src="image/slideshow_photos/photo09.jpg" />
       <img src="image/slideshow_photos/photo10.jpg" />
      </div>
     </div>
    </div>
   </div>
   
   <div class="leftColumn">
   
    <div class="box">
     <div class="boxHeader">
      <div class="headerLeft"><h2>Events Calendar</h2></div>
     </div>
      <div class="boxContent"><ul>
      <li>April 25-30<br />
     <a href="http_020110.htm" target="_blank"></a></li>
     <li>May 12-14<br />
     <a href="http://030510.htm" target="_blank"></a></li>
       <li>June 16<br />
     <a href="http://.htm" target="_blank">Series conversation</a></li>
                      </ul>
      </div>
    </div>
     
     <div class="box">
      <div class="boxHeader">
       <div class="headerLeft"><h2>Spotlight</h2></div>
       <div class="headerRight"> </div>
      </div>
      <div class="boxContent">
              <div class="article">
      
   <div class="headline"><a href="http.htm?tern Mutual Association dues decline form available</a> </div>
     The $25 association membership fee will be charged to June 30 home
     office supply bills. Representatives who wish to decline membership
     may submit a <a href="http://.htm" target="_blank">decline
     form</a>.
<div class="headline"><a href="http://.htm">Surplus notes information available</a> </div>
     Find answers to common questions and hear insights from about the company’s recent surplus notes offering.
                          <div class="headline"><a href="http://.htm">Stay up to date on 2010 estate tax repeal </a> </div>
     Consider the new Estate Tax Repeal page on LINKnet “home base” for information on the 2010 repeal and resources to use when talking to clients about this topic.
              <div class="headline"><a href="http/index.htm">Withstanding Market Challenges</a> </div>
     Access resources to highlight the company’s strength and stability, find sales strategies and share marketing and market-related materials to help address client concerns.
              <div class="headline"><a href="http:///year.htm">Dividend resources available</a> </div>
     The Current Year Scale page on LINKnet provides the latest information
     and sales support materials based on the 2010 dividend announcement.

               </div>
      </div>
     </div>
   </div>
   <div class="rightColumn">
   
    <div class="box">
     <div class="boxHeader">
      <div class="headerLeft"><h2>Approaching Deadlines</h2></div>
     </div>
     <div class="boxContent">
       <ul>
<li>April 30: <a href="http.htm">Submit 2010 Commitment to Excellence Award nbominee</a></li>
       <li>May 25: <a href="http.htm">Submit applications for Intern Community Service Award</a></li>
                      <li>June 30: <a href="http://pdf">Submit 2010 Managers Membership Award Application to NAIFA</a> <img src="/shared_assets/image/doc_icons/pdf.gif" alt="PDF File" /></li>
                      </ul>
      </div>
    </div>
    
    <div id="techalerts" class="box">
     <div class="boxHeader">
      <div class="headerLeft"><h2>Priority Tech Alerts</h2></div>
      <div class="headerRight"><a href="http://.htm" class="more">more »</a></div>
     </div>
     <div class="boxContent">
      <div class="loading">
       Loading...
      </div>
     </div>
     <iframe name="techalerts" src="/statusdisplay/001_summary.htm" onreadystatechange="if(this.readyState=='complete'){this.previousSibling.innerHTML = formatTechAlert(frames['techalerts'].document.body.innerHTML);}"></iframe>
    </div>
   </div>
</div>

Dreamweaver is pretty good these days at showing the page in Design View how it will be viewed when online. HOWEVER having said that it does largely depend on the way you write the css.
I guess for Dreamweaver it's impossible for it to show every concievable way you can write css correctly. Unfortuantely if your css is not compatible with what Dreamweaver likes it won't make a great job of rendering the site correctly in Design View, that's always been the case.
The css is not wrong but I've seen many display issues in Dreameaver Design View caused as a direct result of the css being overly complex to crack simple presentation. I guess it's in the lap of the gods if you are fortunate enough to have found the way to write css that Dreamweaver likes.

How to get text vertically centred in Li box

I am updating our company website in another area of the system which is why you'll see a tf in the web address I am about to give.
http://www.essentialfinance.net/tf/products/reconciling/accruals_manager.asp
Now, the problem I have is that the options in the boxes are aligned to the top.
I have had quite a problem understanding how to get these boxes to work so that they highlight when hovered etc, but eventually got there through some tutorial which seems to create a nav class hanging off the ul.
I have tried altering everything in the ul.nav, ul.nav li, ul.nav a regarding getting the text to vertical align centred but no success.
The css file is here:
http://www.essentialfinance.net/tf/main.css
I put that link in since someone may be able to pick out my faults.
I have only put a link to # (goes nowhere) to get the <a> code initialised.....
By the way - don't worry about the colour scheme... it's only temporary to test the functionality.
And I would not wander anywhere else in the site - it's a shambles which is why i'm looking at it.
Can anyone please advise? Thank you very much in advance for any feedback.
Terry

These forums are getting worse by the day. Try this link for the last time:
<http://www.mytechnet.talktalk.net/sidebar.txt>
If it works, it works otherwise tough luck.

CS6 div layout issue

http://www.lestock.ca/index.html
I am having a problem with the layouts of the divs here.
As the page loads, the curved border placed around the container appears to load as a small oval, then proceeds to load correctly but there is a small space in the top corner.
I found it necessary to place <p> tags at the end of the side bar and the container in order for the page to maintain its full content.
Thanks
Message was edited by: Pat Krushen
CSS style sheet
@charset "utf-8";
/* CSS Document */
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-repeat: no-repeat;
background-color: #FFF;
background-position: 0px;
top: 0px;
background-attachment: fixed;
background-image: url();
.twoColLiqLtHdr #container {
width: 80%;
text-align: left; /* this overrides the text-align: center on the body element. */
overflow: visible;
background-color: #FFFFFF;
border: thin solid #060;
border-radius: 50px;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
.twoColLiqLtHdr #header {
background-image: url(greencorner2.jpg);
background-repeat: no-repeat;
font-size: 90%;
background-color: #FFF;
width: 100%;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
.twoColLiqLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
/* Tips for sidebar1:
1. since we are working in percentages, it's best not to use padding on the sidebar. It will be added to the width for standards compliant browsers creating an unknown actual width.
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColLiqLtHdr #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
.twoColLiqLtHdr #sidebar1 {
float: left;
width: 22%; /* top and bottom padding create visual space within this div */
background-color: #FFF;
margin-left: 15px;
background-repeat: no-repeat;
border-right-width: medium;
border-right-style: outset;
border-right-color: #060;
/* Tips for mainContent:
1. the space between the mainContent and sidebar1 is created with the left margin on the mainContent div. No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 430px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
.twoColLiqLtHdr #mainContent {
margin-top: 0;
margin-bottom: 0;
text-align: left;
float: left;
width: 23%;
margin-left: 20px;
.twoColLiqLtHdr #footer {
background-color: #060;
font-family: Verdana, Geneva, sans-serif;
font-size: x-small;
color: #FFF;
text-align: center;
margin: 0px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-color: #090;
border-right-color: #090;
border-bottom-color: #090;
border-left-color: #090;
border-radius: 10px;
.twoColLiqLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0;
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
.menudiv {
float: left;
width: 50%;
#menudiv2 {
float: left;
width: 60%;
margin-left: 10%;
padding: 10px;
margin-right: 28%;
.fltrtintroduction {
float: right;
width: 66%;
padding-left: 15px;
font-weight: normal;
color: #333333;
#weatherdiv {
float: right;
width: 200px;
.twoColLiqLtHdr #container #header #slideshow {
float: right;
width: 70%;
margin-left: 35px;
a:link {
color: #090;
text-decoration: none;
a:visited {
color: #FC0;
text-decoration: none;
a:hover {
color: #333;
text-decoration: underline;
a:active {
color: #8E9AB0;
text-decoration: none;
#updatetable {
float: left;
width: 60%;
margin-left: 30px;
background-color: #FFF;
#updatetable table tr {
#updatetable table tr td strong {
color: #FFF;
</style>
.lightfont { font-family: Verdana, Geneva, sans-serif;
font-weight: normal;
#logo {
float: left;
width: 24%;
.current.current {
background-color: #090;
.green {
font-weight: bold;
color: #060;
Message was edited by: Pat Krushen

Replace all of the below - from your fax number to the closing </html> tag with the code marked in red
Fax: (306) 274–2110 </span>
</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><br />
</p>
<p> </p>

<h1> </h1>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">

</script>
</body>
</html>
Fax: (306) 274–2110 </span>
</p>
</div>
<br style="clear: both;" />
</div>
<script type="text/javascript">

</script>
</body>
</html>

Multi Page - Multi Layout - Vertical panels per Page- Effect

Hi
I need to create a report which is having 4 pages - In the layout itself I need to design such way , first full page will be text -second page and third page will be with repeating frame . Fourth page will be with text.
Example in Emp Table for each dept i need to print like below
MY query is select empno, ename, job, dept from emp ( with group above Dept no, Job)
And Lay out design as below :
First Page - Only Dept no - with other predefined texts.
Second Page & Third page - data will be printed (fetched) from repeating frame.
Fourth page - Only Dept no - with other predefined texts.
I need above report for all dept in emp table
So i changed the Vertical panels per page of the reports main section to 4 . and size to 36 (4*9), but when I runt the report getting error
REP-1814-Report Cannot be formatted,Object Horizontally and vertically can never fit witing R_G_JOB.
Any help to fix this issue.
Thanks in Advance .....
Edited by: O.Developer on Feb 15, 2013 2:45 AM

Hi
Thanks for your suggestion.
However we have conluded the answer with my manager' help.
Here is how :
After spending many hours, finally we didi as below :
Develop Data model with relevent query.
Develop report laoyout using reportg wizard with 'No Template'(do not make manual layout).
Now select the very first outer frame and extend this frame to three or four pages as per requirement.
(Do not change any other layout coordinae values)
Now run the report, the report will give expected output.
-----------------

A3 landscape layout across centre of A4 booklet

Hi - I'm trying to create a 8-page A4 booklet, with the centre pages as a double spread with rotated text and graphics.
There's a column of text on the top edge of the page, and another across the bottom. Across the centre is a graphic and to read the page you rotate 90deg to read the resultign A3 portrait layout.
Hopes this makes some sort of sense?
Question: Do I need to insert an A3 landscape master page as pages 4-5, and if so how?
Thanks

You will have to set this up as a standard A4 booklet, turning on spreads in the New Document window. If you're using CS3 or before unfortunately to do the A3 you'll have to work sideways! In CS4 you can rotate it sideways to work on. In neither can you have more than one page size in a document.
Another work around is to do that page on an A3 and copy it in when done.

Div layout design

My first website and using CSS.
www.smilesofmichigan.com
I would like the text on the left to always use the same space as the text on on the right.
I was struggling with the format layout for the text on the right (office hours). I started with two simple columns but changed the text on the right to 3 different divs. This is the general layout I would like except I would like the days of the week to be all line up the same. Would you please help me better code this?
My next step will be making a contact page. I believe a form is the best method to use. Any other comments about the site would be appreciated.
Carlos

carloscast1 wrote:
My first website and using CSS.
www.smilesofmichigan.com
I would like the text on the left to always use the same space as the text on on the right.
I was struggling with the format layout for the text on the right (office hours). I started with two simple columns but changed the text on the right to 3 different divs. This is the general layout I would like except I would like the days of the week to be all line up the same. Would you please help me better code this?
My next step will be making a contact page. I believe a form is the best method to use. Any other comments about the site would be appreciated.
Carlos
The text on the left and the text on the right will always be of different lengths, no matter how much you try to find a solution.
You should not try and restrict the length of text to any particular area, just let it consume how much space it requires. Designing for the web is different from desk top publishing. The web is fluid and so should your design be.
Some people use a scrolling area to restrict the text to a specific height but this is an ugly solution as it creates unsightly scrollbars. Really it's better practice to build in flexibility to the design and plan for variations in column height.
What you should do is wrap your 'welcome' <div> and the 3 <divs> on the right in another <div>. Attach a repeating background image (half white on the left and half green on the right) to the 'wrapper' <div>. This will at least visually make both left and right sections look equal in depth when one side or the other contains more text. Key is to add 'overflow: hidden;' to the css of the 'wrapper' <div> this ensures that it enclosed around the other <divs> inside it.
Days of the week look fine to me on Firefox. I'd say that information is 'tabular data' so use a table if it means the info lines up better. There are more complex css methods but its not worth the effort.

Div layout problem

Hi - stuck on what I think should be a fairly basic layout problem:
I have 2 divs, equal widths but varying heights, one floated to the left and one to the right so that they appear next to eachother on the page. The one on the left contains varying amounts of text, the one on the right contains a flash player so never varies.
Where the text for the left div is long, I want it to start off next to the player, but then flow beneath it rather than continuing downwards at the same width as the div. If I remove the width of the left div, so that it reverts to the container width, the player div positions itself below it, so I can't work out how to get the effect.
Can anyone help?

Hi,
hope I understood in the right way: I used (translated from German DW) "modify table" and so I got one more row and two columns in your Main_Content. In one of the new columns I copied the image and beneath I took the text (you now can replace with image and text of your choice), like this:
If that's not a help for your question, please ask me again.
What concerns the width of the pictures, I would format them with PS or a similar program in the same wide.
Hans-G.

Div Layout

Dear All,
I like one design, that is made by div table. I have a best knowledge in table based layout.
Div based layout is attached for your reference.
please help out this, how can make container like this
I am making something like this, my codes are attached for your references.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="untitled.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div align="justify">Container
    <div id="rightside">Right Side </div>
    <div id="leftside">Left Side Navigation </div>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
@charset "UTF-8";
#container {
          width: 960px;
          margin-top: 0px;
          margin-right: auto;
          margin-left: auto;
          margin-bottom: 0px;
#leftside {
          width: 420px;
#rightside {
          width: 420px;
          float: right;
#footer {
          width: 960px;
          margin-top: 0px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;

See if the below html/css helps:
<!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">
#wrapper {
    width: 980px;
    margin: 0 auto;
#header {
    overflow: hidden;
#headerLeft {
    float: left;
    width: 600px;
#headerRight {
    float: right;
    width: 380px;
#mainAreaWrapper {
    overflow: hidden;
#mainAreaLeft {
    float: left;
    width: 240px;
#mainAreaRight {
    float: left;
    width: 740px;
#mainAreaTop {
    min-height: 320px;
    background-color: #CCC;
    margin-bottom: 15px;
        -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
#mainAreaBlueBox {
    min-height: 250px;
    float: left;
    width: 450px;
    background-color:#09C;
    -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
#mainAreaGreenBox {
    min-height: 250px;
    float: left;
    width: 280px;
    margin-left: 10px;
    background-color:#6C3;
    -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="headerLeft">Header Left</div>
<div id="headerRight">Header Right</div>
</div>
<div id="mainAreaWrapper">
<div id="mainAreaLeft">Main Area Left</div>
<div id="mainAreaRight">
<div id="mainAreaTop">Main Area Top</div>
<div id="mainAreaBlueBox">Blue Box</div>
<div id="mainAreaGreenBox">Green Box</div>
</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

DIV Layout - Vertically Centre

Similar Messages

Maybe you are looking for