11 replies [Last post]
Emma
Emma's picture
Offline
Enthusiast
Last seen: 2 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 148
Points: 34

Hi

I have designed a portal website with four columns however one div will not sit in line (under the one above) and left aligns too far.

It is easy to see in this dreamweaver layout which shows only the divs.
http://www.errolfisher.com/images/divs.gif

I've tried many different ways of trying to move it, but can't get it to line up,

any suggestions appreciated
thanks
Em

p.s. the offending div is called #othernews

/* CSS Document */

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}
/* hide from IE mac \*/
html {
min-height: 100%;
margin-bottom: 1px;
}
/* end hiding from IE5 mac */

body {
background-color: #fff;
text-align: center;
font: 12px Verdana, Arial, Helvetica, sans-serif;
}
p {
padding: 4px;
}
#wrapper {
text-align: left; /* Resets the text alignment to left to override what was set for versions of WinIE5. */
margin: 0px auto; /* Centers the content of the page within the window in all but versions of WinIE5. */
width: 1007px;
}
#header {
height: 92px;
width: 1007px;
background: url(images/topbar.jpg) no-repeat center top;
}
#header h1 {
text-align: left;
}
#header span {
position: absolute;
left: -3000px;
}
/* TOP BAR NAVIGATION BUTTONS */
.menu {
height: 29px;
width: 1007px;
}
.cssnav {
position:relative;
float: right;
margin-right: 1px;
padding: 0px;
font-family: verdana, arial, helvetica, sans-serif;
background: url(overbtn.jpg) no-repeat;
width: 122px;
height: 29px;
overflow:hidden;/* for ie to hide extra height*/
font-weight: bold;
}
.cssnav a {
display: block;
color: #000000;
font-size: 11px;
width: 122px;
height: 29px;
display: block;
float: right;
color: white;
text-decoration: none;
overflow:hidden;/* for ie to hide extra height*/
}
.cssnav a:hover {
color: #ffffff;
}

.cssnav img {width: 122px; height: 29px; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}

.cssnav span {
position: absolute;
left: 0px;top: 8px;
text-align: center;
width: 122px;
cursor: pointer;

}
/* END OF TOP NAVIGATION */
#bar{
background: url(images/barback.jpg) repeat;
height: 24px;
}
#innerwrapper {
float: left;
width: 1007px;
padding: 1px 0px;
}

/* STYLE THE CONTENT AREA --------------------------------- */
#sidebar {
/*/*/
float: left;
background-color: #A4C9E8;
color: #FFF;
margin-top: 6px;
margin-left: 2px;
border: 1px solid #ccc;
width: 170px;/* */
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
}
#sidebar ul{
padding: 0;
margin: 0;
background-color:transparent;
list-style-type: none;
}
#sidebar ul li{
padding: 0;
margin: 0;
}
#sidebar ul li a{
background-color: #0395af;
border-bottom: 1px solid #fff;
color: #fff;
display: block;
padding: 6px 0px 6px 7px;
font-weight:bold;
text-decoration:none;
height: 1%;
}
#sidebar ul li a:hover{
background-color: #011a63;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
color: #fff;
}
#sidebar h3, #popular h3{
font: 100% Verdana;
background-image:url(images/wback.jpg);
height: 20px;
color: #FFFFFF;
font-weight: bold;
padding-top: 4px;
padding-left: 6px;
}
#thought{
float: left;
clear: left;
width: 162px;
background-color: #c1d9dd;
padding: 4px;
margin-left: 3px;
margin-top: 8px;
}
#popular{
float: left;
clear: left;
width: 170px;
border: 1px solid #ccc;
margin-left: 3px;
margin-top: 8px;
}
#centerleft {
float: left;
width: 322px;
border:1px solid #ccc;
margin: 6px;
}
#othernews {
float:left;
clear:left;
width: 322px;
border:1px solid #ccc;
margin: 6px;
}
#centerleft h3, #othernews h3{
font: 100% Verdana;
background-image: url(images/puback.jpg);
height: 22px;
color: #FFFFFF;
font-weight: bold;
padding: 2px 0px 0px 10px;
}
#bulletin {
float: left;
width: 222px;
border:1px solid #ccc;
margin: 6px;
}
#bulletin h3{
font: 100% Verdana;
background-image: url(images/grback.jpg);
height: 22px;
color: #FFFFFF;
font-weight: bold;
padding: 2px 0px 0px 10px;
}
#rightside, #travel {
float: left;
width: 222px;
border:1px solid #ccc;
margin: 6px;
}
#rightside h3, #travel h3{
font: 100% Verdana;
background-image: url(images/puback.jpg);
height: 22px;
color: #FFFFFF;
font-weight: bold;
padding: 2px 0px 0px 10px;
}
/* FOOTER ------------------------------- */

#footer {
background: url(images/footer.jpg) repeat;
height: 24px;
}
#footer p {
font-size: 80%;
text-align: center;
}

/* CLASSES FOR IMAGES AND CLEARING FLOATS -------- */

.clearfloat {
font-size: 1px;
line-height: 0px;
clear: both;
height: 0px;
}

.lftflt {
float: left;
margin: 0px 15px 5px 10px;
}

My company Intranet
@import url(layout.css);>

#nav a:link, #nav a:visited {height: 1%;vertical-align: bottom;}

Thought for the day - Lorem ipsum standard content information content.

 

PERSONNEL

News Item 1

Detail about the story

-13th April 2007

News Item 2 - 2nd April 2007

 

 

 

OTHER NEWS

News Item 1 - 13th April 2007

 

Lorem ipsum standard content information content.

CURRENT PROJECTS

Center right side bar content info - Lorem ipsum standard content information content.

 

 

Leftside bar content info - Lorem ipsum standard content information content.

 

 

Leftside bar content info - Lorem ipsum standard content information content.

TECHNICAL

 

  • Hardware
  • Leftside bar content info
  • Item 2 l
  • Leftside bar content info
  • Item 3
  • Leftside bar content info

 




DESIGN


 



  • Skills

  • Leftside bar content info

  • Software

  • Leftside bar content info

  • Item 5

  • Leftside bar content info


ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Emma Are you designing

Hi Emma

Are you designing this is Dreamweaver or did you just use that as a tool to show what is wrong? I truly hope you aren't using Dreamweaver, unless you are using only it's coding window and ignoring the auto complete tools and the preview pane, because it will get the coding wrong and lie to you.

The reason I ask is that whilst IE shows pretty much what you image shows, Firefox is well and truly messed up.

I know I have said this in other posts, but it seems to me that you have started out by trying to design the page layout and then put some content in.

Whereas, you would have been better off coding the content and then trying to make it look like you wanted. For example, the top menu should be an unordered list, but it isn't.

You also appear to want the page to be 100% high as a minimum. In which case, what you have done will not necessarily achieve that. (See my article in the 'How to' forum of this site).

You have set the page to a 1007 pixel width, but that would require a user to have a 1100ish pixels wide screen to see it without scrolling horizontally, not an entirely likely circumstance, as still only a small number of users have this (but your audience may be different to the norm).

Which bit would you conside the actual content of the page? To me it looks like the third column (with the current projects in)?

CT

Emma
Emma's picture
Offline
Enthusiast
Last seen: 2 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 148
Points: 34

I know the constraints of

I designed this in DW but have hand coded it.

The page layout, & what goes where was defined by the client in how the design should look unfortunately. And likewise with the content areas...there is no particular one of main importance as different groups of people use it.

The top menu I took from a code example online, as I didn't know how to do css rollovers with images.

I thought by making the website 1007 pixels (which it didn't seem to scroll at) it was okay for 1024 x 768 screen res. Again the client's intranet uses this screen res only, and they want to be able to update the top banner image themselves.

Perhaps I have started this the wrong way around by creating the layout first and maybe DW has stuck in some code glitches...not sure how to progress it now though without starting again.

I will look at the tutorial for height

thanks

Emma

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Emma Do you have a copy of

Emma

Do you have a copy of this work online?

I can fairly quickly mock up a working 4 column frame 100% high for you. You would have to edit it to suit your needs though.

The problem with 1024 width screens using the 1007 wide page is the scrollbars. For example, on a 1024 screen the scrollbar and window sides typically take up 46-48 px, so I would have suggested a page width maximum of 976 or 977 px (I tend to use 970, coz my math isn't so good and it allows for a few px of cockups).

CT

Emma
Emma's picture
Offline
Enthusiast
Last seen: 2 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 148
Points: 34

Hi thanks, that would be a

Hi
thanks, that would be a great help as the problem I have is in finding a 'best practice' way in designing layouts, as if I follow Adobe tutorials and DW it seems to not work in all browsers and div heavy.

Here is the final version I have http://www.errolfisher.com/zeuss.html
(I have added some code for 100% height)

css is called layout.css

thanks also for the sizing tip

emma

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Emma I'm going out soon,

Hi Emma

I'm going out soon, won't be back till tomorrow, but I will take my laptop with me and knock something up.

I'll post when I have something for you.

CT

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Emma Working on it right

Hi Emma

Working on it right now. Last night was a write-off.

Got the basic thing working, just trimming it up.

CT

Emma
Emma's picture
Offline
Enthusiast
Last seen: 2 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 148
Points: 34

ClevaTreva thanks, I really

ClevaTreva thanks, I really appreciate it.

The problem with this layout is there are so many small boxes (divs) due to it being a portal and there is a definate float problem with the #othernews box. That div left aligns too far in both IE6 or Netscape 6.

I understand I need to start with semantically correct code tho to see where the problem lies.

Em

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Now, bear in mind there

Hi

Now, bear in mind there is much to fix. You have a lot of redundant css (all that font stuff) and some bits I'm not sure you need at all, most of which I have removed. As this is a new design, it should be strict xhtml (which I have used). Anyway, here's a first attempt at the xhtml:

Zeuss Company Intranet
@import url(style.css);

@import url(ie7style.css);

#nav a:link, #nav a:visited {height: 1%;vertical-align: bottom;}

Thought for the day - Lorem ipsum standard content information content.

PERSONNEL

Image 1 Item 1

Detail

 

Image 2 Item 2

 

 

 


OTHER NEWS


News Item 1 - 15th April 2007


 


Lorem ipsum standard content information content.



CURRENT PROJECTS

Center right side bar content info - Lorem ipsum standard content information content.

 

 

Leftside bar content info - Lorem ipsum standard content information content.

 

 

 

 

Leftside bar content info - Lorem ipsum standard content information content.

TECHNICAL

  • Item 1
  • Leftside bar content info
  • Item 2
  • Leftside bar content info
  • Item 3
  • Leftside bar content info

 


DESIGN



  • Skills

  • Leftside bar content info

  • Software

  • Leftside bar content info

  • Item 3

  • Leftside bar content info





and the css:

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0; padding:0; border:0; border-collapse:separate; border-spacing:0; } html,body{height:100%} body{ font-family: verdana, arial, helvetica, sans-serif; font-size:100.1%; /*** Don't change this setting. Make all other font-sizes in % (preferred) or ems ***/ color:#000000; background:#F2F6F9; /*** Background colour of page ***/ min-width:1007px; /*** Content Width ***/ text-align:center; } input,select{ margin:0; padding:0; } strong,b{ font-weight:bold; } .floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px} .floatcontainer{display: inline-block;} /* Hides from IE Mac \*/ * html .floatcontainer {height:1%} .floatcontainer{display:block} /* End Hack */ #fullheightcontainer{ margin:0 auto; text-align:left; position:relative; width:1007px; /*** Content Width ***/ display:table; height:100%; margin-bottom:-24px; /*** NEGATIVE TOTAL Height of Footer Rows ***/ font-size:78%; line-height:1.1em; } #col1, #col2, #col3, #col4 { float:left; display:inline; width:222px; padding-bottom:24px; /*** Footer height, must use padding because of IE collapsing margins. Margins also cause problems for all browsers with column jumping ***/ } * html #col2, * html #col3, * html #col4 {margin-left:-3px} /*** Fix for IE6 float bug, don't set left margins on these floated columns in the normal css, add the margin you want to the right margin of the div to the left of it instead. ***/ #col1 { width:170px; margin-left:2px; margin-right:6px; } #col2 { width:322px; margin-right:12px; } #col3 { margin-right:12px; } #col4 ul { list-style-type: none; }

/* ::::: http://www.errolfisher.com/layout.css ::::: */

p { padding: 4px; }
#header { background: url(topbar1.jpg) no-repeat scroll center top; height: 92px; width: 1007px; }
#header h1 {
background: url(logo1.jpg) no-repeat;
width:179px;
height:92px;
position:relative;
text-indent:-99999em;
font-size:0px;
line-height:0px;
overflow:hidden;
}
h3 {font-size:100%}
.menu { height: 29px; width: 1007px; }
.cssnav { padding: 0px; background: url(overbtn.jpg) no-repeat; overflow: hidden; position: relative; float: right; margin-right: 1px; width: 122px; height: 29px; font-weight: bold; }
.cssnav a { overflow: hidden; font-size: 78%; width: 122px; height: 29px; display: block; float: right; color: white; text-decoration: none; }
.cssnav a:hover { color: #FFF; }
.cssnav img { border: 0pt none ; width: 122px; height: 29px; }
* html a:hover { visibility: visible; }
.cssnav a:hover img { visibility: hidden; }
.cssnav span { position: absolute; left: -2px; top: 8px; text-align: center; width: 122px; cursor: pointer; }
#bar { background: url(barback.jpg) repeat; height: 24px; }
#sidebar { border: 1px solid #CCC; background: #A4C9E8; color: #FFF; margin-top: 6px; }
#sidebar ul { margin: 0pt; padding: 0pt; list-style-type: none; }
#sidebar ul li { margin: 0pt; padding: 0pt; }
#sidebar ul li a { border-bottom: 1px solid #FFF; padding: 6px 0px 6px 7px; background: #0395AF; color: #FFF; display: block; font-weight: bold; text-decoration: none;} /*** why was this set to height 1%? For IE6? IF so use the css like this: * html #sidebar ul li a {height:1%} ***/
#sidebar ul li a:hover { border-right: 1px solid #FFF; border-bottom: 1px solid #FFF; background: #011A63; color: #FFF); }
#sidebar h3, #popular h3 {background: url(wback.jpg); height: 20px; color: #FFF; font-weight: bold; padding-top: 4px; padding-left: 6px; }
#thought { padding: 4px; background: #C1D9DD; margin-left: 1px; margin-top: 8px; }
#popular { border: 1px solid #CCC; margin-left: 1px; margin-top: 8px; }
#centerleft { border: 1px solid #CCC; margin: 6px 0;}
#othernews { border: 1px solid #CCC; margin: 6px 0;}
#centerleft h3, #othernews h3 { padding: 2px 0px 0px 10px; background: url(puback.jpg); height: 22px; color: #FFF; font-weight: bold; }
#bulletin { border: 1px solid #CCC; margin: 6px 0; }
#bulletin h3 { padding: 2px 0px 0px 10px; background: url(grback.jpg); height: 22px; color: #FFF; font-weight: bold; }
#rightside, #travel { border: 1px solid #CCC; margin: 6px 0; }
#rightside h3, #travel h3 { padding: 2px 0px 0px 10px; background: url(puback.jpg); height: 22px; color: #FFF; font-weight: bold; }
#footer{
z-index:1;
position:relative;
width:100%;
height:0px;
}
#footer-inner{
width:1007px;
margin:0 auto;
height:0px;
}
#copyright{
margin:0px;
background: url(footer.jpg) repeat;
text-align:center;
height:24px;
overflow:hidden;
font-size:65%;
}
.lftflt { margin: 0px 15px 5px 10px; float: left; }

I haven't touched that top menu, and it should be changed to an unordered list.

CT

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Ooops Forgot the ie7

Ooops

Forgot the ie7 stylesheet:

#fullheightcontainer{height:auto;min-height:100%}

Emma
Emma's picture
Offline
Enthusiast
Last seen: 2 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 148
Points: 34

Thanks a million Treva, the

Thanks a million Treva, the layout is perfectly aligned now in iE6...will check it later in Safari and Firefox. I'll need to study both versions now to see where my mistakes were!

I know a lot had to be fixed - but can you give me an idea what were the main problems with my layout ?

Will do the menu list next, have been looking at different tutorials.

I hope one day not to be such an incompetent with css!

thanks again
Em

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Emma wrote:Thanks a million

Emma wrote:
Thanks a million Treva, the layout is perfectly aligned now in iE6...will check it later in Safari and Firefox. I'll need to study both versions now to see where my mistakes were!

I know a lot had to be fixed - but can you give me an idea what were the main problems with my layout ?

Will do the menu list next, have been looking at different tutorials.

I hope one day not to be such an incompetent with css!

thanks again
Em

It works in FF, don't know about Safari. Haven't tested it in IE6, but it should work. 100% height breaks IE5.x for the Mac, but the code should also work OK for IE5.x for the PC.

Essentially, I made four floats sitting next to each other, with their widths and margins set. The content divs simply went inside the right ones. These content divs have no width (as they inherit from the floats.

As I said, you had tons of redundant css, just look at any div to see what I deleted or changed.

I would use the sliding doors technique to make the menu links work. Some good coding practice can be seen at listamatic.

CT