CSS help please

englishpremier · 12 Apr 2008 at 14:28

Hi I just have a basic CSS question.

How do I fix the height of my page?

At the moment the site i'm working on at www.eastcoastlacrosse.co.uk/modx/playlacrosse changes it height depening on the contented. I want so fix the height so that the page does not jump up and down when clicking on areas with differing amounts of content.

Another issue is that when I add more navigational items to the menu they appear underneath the current links and push all my content down under the main content section and over to the right.

My css file is below - what do I need to change to stop this happening?

Code:

/******RESET DEFAULTS*******/* {  margin:0;  padding:0;}/*******DROP SHADOW*******/.dropshadow { background: transparent url(../images/dropshadowborder.jpg) repeat-y; width: 719px; height: auto; margin:0 auto;}/******GLOBAL STYLES*******/body {  font-family: verdana, Arial, Georgia, Palatino, serif;  background-color: #767676;}h1 {  color: #B9CADD;font-size: 20px;}h2 {  font-size: 20px;}span {  display: none;}img {  padding-top: 4px;  padding-bottom: 3px;  padding-left: 4px;}.p1 {  padding-top: 8px;  padding-left: 8px;  padding-right: 20px;  padding-bottom: 8px;} #wrapper {  margin: 0 auto;  width: 608px;  background-color: #525252;  border: 2px solid #FFFFFF;}h1.banner {  width: 608px;  height: 130px;  background: url(../images/banner.jpg) no-repeat center top;}/*******NAVIGATION*******/#navigation {  width: 608px;  height: 36px;  background: url(../images/NavBar.jpg) no-repeat center top;  border-top: 2px solid #FFFFFF;}#navigation ul {  padding-top: 1px;  list-style: none;  width: 608px;  height: 35px;}#navigation ul li {  float: left; }#navigation ul a {  float: left;   padding-left: 28px;  padding-right: 28px;  padding-top: 1px;  height: 20px;  background: url(../images/divider.jpg) repeat-y left top;  text-decoration: none;  font-size: 12px;  color: #fff;}#navigation ul a:hover {  color: #9BB5DB;}#menu ul li {  display: inline;}/***********links************/a {text-decoration: none; }a:link {color: #ffffff; text-decoration: none; }a:visited {color: #9BB5DB; text-decoration: none; }a:hover {color: #f4bcd7; text-decoration: underline; }/*******CONTENT BOXES*******/#maincontent {  overflow: hidden;  width: 608px;  background: #293F57 url(../images/FauxColumn.jpg) repeat-y left top;}#leftcontent {  width: 421px;  float: left;  font: 9pt/14pt verdana;  color: #D6E7FC; }#rightcontent {  width: 187px;  float: right;  font: 9pt/12pt verdana;}/*******LEFT CONTENT IMAGES*******/h2.welcome {   background-image: url(../images/Welcome.jpg);   background-repeat: no-repeat;   background-position: left;   width: 220px;   height: 22px;}h2.female {   background-image: url(../images/Female.jpg);   background-repeat: no-repeat;   background-position: left;   width: 220px;   height: 22px;}h2.news {   background-image: url(../images/News.jpg);   background-repeat: no-repeat;   background-position: left;   width: 220px;   height: 22px;}h2.contact {   background-image: url(../images/contact.jpg);   background-repeat: no-repeat;   background-position: left;   width: 220px;   height: 22px;}/*******RIGHT CONTENT FORMATTING*******//*******EAST 2 TABLE*******/#East2, #resources {   padding-top:8px;}#East2 table {  margin-top: 8px;  margin-left: 8px;  font-size: 0.8em;  color: #FFFFFF;  width: 170px;}#East2 table tr {  height: 16px;}#East2 table tr td.center {  text-align: center; }#East2 table tr td.team {  width: 80px;}#East2 table tr td {  background-color: #59728E;  height: 20px;}#East2 table tr.odd td {  background-color: #6A8AAC;}#East2 h2{   background: url(../images/East2.jpg) no-repeat left top;   width: 187px;   height: 30px;}/*******RESOURCES LINKS*******/#resources h2{   background: url(../images/Resources.jpg) no-repeat left top;   width: 187px;   height: 30px;} #resources ul {  padding-top: 5px;  padding-left: 10px;  padding-right: 5px;  list-style: none;}#resources ul li {  padding-top: 5px;  font-size: 10px;  color: #9DBCE4;}#resources ul li a{  text-decoration: none;  font-size: 13px;  color: #D6E7FC;}/*******GOOGLE SEARCH BAR*******/#google h2 {  background: url(../images/google.jpg) no-repeat left top;  width: 187px;  height: 30px;}#google form {  padding-top: 10px;  padding-left: 10px;}/*******FOOTER*******/#site-info	{  margin: 0 auto;  background: url(../images/footerpic2.jpg);  background-repeat: no-repeat;  background-position: left;  width: 719px;  height: 46px;}#site-info .p2 {  font-size: 11px;  color: #BABABA;  padding-top: 5px;  padding-left: 205px;}#site-info .p2 a {  text-decoration: none;  color: #EEEEEE;}#site-info .p2 a:hover {  color: #9BCADB;}

MarcLister · 12 Apr 2008 at 15:48

Max and min width/height should fix that.

http://htmldog.com/reference/cssproperties/

As for the CSS any chance of reformatting that so it goes down the page and across. It is impossible to read and understand.

If you do that it might be easier for me and others to read the css and see what you need to change for the navigational items.

englishpremier · 12 Apr 2008 at 18:10

It was formatted like that but everytime I try to view it in notpad 2, notepad, gedit it reverts back to how it is here.

Code:

* {
margin : 0;
padding : 0;
}
.dropshadow {
background : transparent url(../images/dropshadowborder.jpg) repeat-y;
width : 719px;
height : auto;
margin : 0 auto;
}
body {
font-family : verdana, Arial, Georgia, Palatino, serif;
background-color : #767676;
}
h1 {
color : #b9cadd;
font-size : 20px;
}
h2 {
font-size : 20px;
}
span {
display : none;
}
img {
padding-top : 4px;
padding-bottom : 3px;
padding-left : 4px;
}
.p1 {
padding-top : 8px;
padding-left : 8px;
padding-right : 20px;
padding-bottom : 8px;
}
#wrapper {
margin : 0 auto;
width : 608px;
background-color : #525252;
border : 2px solid #ffffff;
}
h1.banner {
width : 608px;
height : 130px;
background : url(../images/banner.jpg) no-repeat center top;
}
#navigation {
width : 608px;
height : 36px;
background : url(../images/NavBar.jpg) no-repeat center top;
border-top : 2px solid #ffffff;
}
#navigation ul {
padding-top : 1px;
list-style : none;
width : 608px;
height : 35px;
}
#navigation ul li {
float : left;
}
#navigation ul a {
float : left;
padding-left : 28px;
padding-right : 28px;
padding-top : 1px;
height : 20px;
background : url(../images/divider.jpg) repeat-y left top;
text-decoration : none;
font-size : 12px;
color : #fff;
}
#navigation ul a:hover {
color : #9bb5db;
}
#menu ul li {
display : inline;
}
a {
text-decoration : none;
}
a:link {
color : #ffffff;
text-decoration : none;
}
a:visited {
color : #9bb5db;
text-decoration : none;
}
a:hover {
color : #f4bcd7;
text-decoration : underline;
}
#maincontent {
overflow : hidden;
width : 608px;
background : #293f57 url(../images/FauxColumn.jpg) repeat-y left top;
}
#leftcontent {
width : 421px;
float : left;
font : 9pt/14pt verdana;
color : #d6e7fc;
}
#rightcontent {
width : 187px;
float : right;
font : 9pt/12pt verdana;
}
h2.welcome {
background-image : url(../images/Welcome.jpg);
background-repeat : no-repeat;
background-position : left 0%;
width : 220px;
height : 22px;
}
h2.female {
background-image : url(../images/Female.jpg);
background-repeat : no-repeat;
background-position : left 0%;
width : 220px;
height : 22px;
}
h2.news {
background-image : url(../images/News.jpg);
background-repeat : no-repeat;
background-position : left 0%;
width : 220px;
height : 22px;
}
h2.contact {
background-image : url(../images/contact.jpg);
background-repeat : no-repeat;
background-position : left 0%;
width : 220px;
height : 22px;
}
#East2, #resources {
padding-top : 8px;
}
#East2 table {
margin-top : 8px;
margin-left : 8px;
font-size : 0.8em;
color : #ffffff;
width : 170px;
}
#East2 table tr {
height : 16px;
}
#East2 table tr td.center {
text-align : center;
}
#East2 table tr td.team {
width : 80px;
}
#East2 table tr td {
background-color : #59728e;
height : 20px;
}
#East2 table tr.odd td {
background-color : #6a8aac;
}
#East2 h2 {
background : url(../images/East2.jpg) no-repeat left top;
width : 187px;
height : 30px;
}
#resources h2 {
background : url(../images/Resources.jpg) no-repeat left top;
width : 187px;
height : 30px;
}
#resources ul {
padding-top : 5px;
padding-left : 10px;
padding-right : 5px;
list-style : none;
}
#resources ul li {
padding-top : 5px;
font-size : 10px;
color : #9dbce4;
}
#resources ul li a {
text-decoration : none;
font-size : 13px;
color : #d6e7fc;
}
#google h2 {
background : url(../images/google.jpg) no-repeat left top;
width : 187px;
height : 30px;
}
#google form {
padding-top : 10px;
padding-left : 10px;
}
#site-info {
margin : 0 auto;
background : url(../images/footerpic2.jpg);
background-repeat : no-repeat;
background-position : left 0%;
width : 719px;
height : 46px;
}
#site-info .p2 {
font-size : 11px;
color : #bababa;
padding-top : 5px;
padding-left : 205px;
}
#site-info .p2 a {
text-decoration : none;
color : #eeeeee;
}
#site-info .p2 a:hover {
color : #9bcadb;
}

I put it through a W3C's validator so get it back in format but it strips out /***these bits ***/

MarcLister · 12 Apr 2008 at 18:11

Try Notepad++.

I'll copy the css into Notepad++ here and see what I can find.

englishpremier · 12 Apr 2008 at 18:13

you replied too quickly ;-)

MarcLister · 12 Apr 2008 at 18:14

englishpremier said:
you replied too quickly

I'm always doing that!

What bit of that css controls the navigation items?

englishpremier · 12 Apr 2008 at 18:18

The menu itself is php as created by the wayfinder snippet in Modx CMS.

But it would do just the same on my HTML version

Code:

/*******NAVIGATION*******/



#navigation {

  width: 608px;

  height: 36px;

  background: url(images/NavBar.jpg) no-repeat center top;

  border-top: 2px solid #FFFFFF;

}



#navigation ul {

  padding-top: 1px;

  list-style: none;

  width: 608px;

  height: 35px;

}



#navigation ul li {

  float: left; 

}



#navigation ul a {

  float: left; 

  padding-left: 28px;

  padding-right: 28px;

  padding-top: 1px;

  height: 20px;

  background: url(images/divider.jpg) repeat-y left top;

  text-decoration: none;

  font-size: 13px;

  color: #fff;

}



#navigation ul a:hover {

  color: #9BB5DB;

}

MarcLister · 12 Apr 2008 at 18:27

Can you post a shot before and after you add these nav items?

englishpremier · 12 Apr 2008 at 18:29

This is how it is when I remove some menu items.

http://www.eastcoastlacrosse.co.uk/modx/playlacrosse/

This is how it should be ultimately

http://www.playlacrosse.co.uk/

But again when I add the table to the righthand side it breaks the layout.

MarcLister · 12 Apr 2008 at 18:32

Have you checked the css for the original site? http://www.playlacrosse.co.uk/style.css

Is this your site you are re-doing? Or are you doing this for someone else? You could "borrow" the relevant CSS and if that works modify anything else?

englishpremier · 12 Apr 2008 at 18:34

Its a site for the club I run.

The CSS is identical.

Its not very flexible really I think some of the margins are a bit tight

MarcLister · 12 Apr 2008 at 18:38

Hmm does that mean the HTML between the 2 sites is different then? Perhaps set the nav to be a certain width in % values?

englishpremier · 12 Apr 2008 at 18:46

Yeah the HTML is different as one site is static and the other (the one not working correctly) is content managed using Modx.

To be honest on todays huge screens I would prefer the site to be wider taking up about 50% of the screen area in the centre of the screen - obviously resizing for different resolutions. Is that easily achievable?

MarcLister · 12 Apr 2008 at 18:49

Setup a main div for all site content to go into and set it to be 80% or whatever.

Tiger33 · 14 Apr 2008 at 07:58

div inside and also overflow control should do fine for you

Mickey · 14 Apr 2008 at 09:05

Well your HTML is a bit of a mess, but ignoring that for now, here's how to fix the main problems (only tested in FF):

Put clear:both; on #maincontent
Take the width off of #navigation ul
Rename your menu items so that they fit on one line

Mick.