8 replies [Last post]
dennoman
dennoman's picture
Offline
newbie
Last seen: 6 years 6 days ago
Timezone: GMT+1
Joined: 2013-11-30
Posts: 5
Points: 6

Hello all,

I hope this is the right category. I have trouble with my CSS code. I've made a website, very basic and not very clean. All looks great and well but when you look at the website on a small monitor or when you start to reduce the browser window size, part of the menu structure dissappears! The menu text is still there, but just not visible! The footer shows no such problems. I don't know how to solve this... I've changed every value within the CSS code but to no avail. I hope posting the code will help.

{
margin: 0px;
padding: 0px;
}
 
a:link {
	color: #d8ffdc;
	text-decoration:none;
}
 
a:hover {
	text-decoration: none;
	color: #000000;
}
 
a:visited {
	color: #d8ffdc;
}
 
body {	
	background-color:#ffffff;
	font: 14px Arial, Helvetica, sans-serif;
	color: #000000;
}
 
#content{
	margin: 0 auto;
	width: 1200px;
	text-align: justify;
}
 
#main{
	width: 914px;
	margin: 0 auto;
	clear:both;
}
 
#mainbot{
	background: url(../images/header_bg.jpg) no-repeat bottom left;
}
 
#header_bg{
	background: url(../images/header_bg.jpg);
	background-repeat:repeat-x;
	background-position:top;
}
 
#header {
	height: 100px;
	background: url(../images/header.jpg);
	background-repeat:no-repeat;
	background-position: center;
}
 
#logo {
	height: 100px;
	text-align: center;
	padding-left: 0px;
	padding-top: 25px;
}
 
 
#logo a {
	text-decoration: none;
	text-transform: uppercase;
	font-style: italic;
	font-size: 18px;
	color: #ffffff;
}
#logo H2 a{
	font-size: 12px;
}
 
 
#menu{
	width: 1300px;
	height: 60px;
	margin: 0 auto;
}
#menu_bg{
	height: 70px;
	background: url(../images/menu_bg.jpg);
	background-repeat:repeat-x;
	background-position:top;
}
 
#menu ul {
	list-style: none;
	padding-top: 4px;
	padding-left: 175px;
}
 
#menu li {
	display: inline;
}
 
#menu a {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	font-weight: normal;
	font-size: 15px;
	float: left;
	width: 90px;
	height: 42px;
	display: block;
	padding-top: 20px;
}
 
#menu a:hover{
	width: 170px;
	height: 42px;
	background:url('../images/menu_hov.png');
        display:block;
	font-size: 14px;
	font-weight: bold;
}
 
#left{
	width: 251px;
}
 
.bor{
	border: 0px solid #701212;
	background-color: #ffffff;
	margin-bottom: 10px;
	padding-right: 20px;
}
 
.categories ul li a{
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 12px;
	text-decoration:none;
}
 
 
 
#left a:hover{
	color: #000000;
}
 
#left H3{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	width: 227px;
	height: 30px;
	font-weight: normal;
	padding-top: 1px;
	color: #ffffff;
	background: url(../images/titleleft.jpg);
	background-repeat:repeat-x;
	text-align: left;
	padding-left: 5px;
}
 
#left ul {
	list-style: none;
	padding-top: 4px;
	padding-left: 15px;
}
 
#left li {
	background: url(../images/ls.jpg);
	background-repeat:no-repeat;
	background-position: top left;
	padding-left: 20px;
	padding-bottom: 5px;
	margin-bottom: 3px;
}
 
#right{
	float: right;
	width: 850px;
}
 
#right a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:bold;
	color: #701212;
}
 
#right a:hover{
	color: #000000;
	text-decoration:none;
}
 
#right H4{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	width: 728px;
	height: 30px;
	font-weight: normal;
	padding-top: 1px;
	color: #ffffff;
	background: url(../images/titleleft.jpg);
	background-repeat:repeat-x;
	text-align: left;
	padding-left: 5px;
}
 
#cen{
	background: url(../images/cenbg.jpg) top left;
	padding-bottom: 5px;
}
 
#right p {
	margin: 0;
	padding: 0;
	padding-bottom: 10px;
	padding-left: 10px;
}
 
#right h2 {
	margin: 0;
	padding: 0;
	padding-top: 10px;
	color: #196050;
}
 
.read{
	text-align: right;
	padding-bottom:10px;
}
 
.read a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	text-decoration: none;
	width: 76px;
	height:17px;
	padding-top: 2px;
	padding-right: 20px;
	padding-left:20px;
	padding-bottom:5px;
}
 
#right .read2{
	text-align: right;
	clear:both;
	padding-bottom:10px;
}
 
#right .read2 a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	text-decoration: none;
	width: 71px;
	height:15px;
	padding-right: 6px;
	padding-left:8px;
	padding-bottom:1px;
	background: url(../images/read.jpg);
	background-repeat:no-repeat;
	background-position:bottom;
	font-weight:normal;
}
 
#footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 30px;
	clear: both;
	padding-top: 30px;
	background: url(../images/footer.jpg);
	background-repeat:repeat-x;
	background-position:top;
}
 
#footer p {
	margin: 0;
	font-size: 10px;
	text-align: center;
	color: #ffffff;
}
 
#footer a {
	color: #ffffff;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 13 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi dennoman, Can you link to

Hi dennoman,
Can you link to an example page?

dennoman
dennoman's picture
Offline
newbie
Last seen: 6 years 6 days ago
Timezone: GMT+1
Joined: 2013-11-30
Posts: 5
Points: 6

Link

Here is the site, ain't live right now due to the menu structure problem. Just minimize the browser window and you'll see. The odd thing is that the text and the links remain but aren't visible anymore (you can verify that by moving the mouse over the missing menu structures to the right)

http://digicammuseum.com/disclaimer.html

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 13 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi dennoman, The menu is

Hi dennoman,
The menu is there you just can't see it with the white color links and no background.
If you set the #menu_bg width to 1300px you should see them, but that is not really the fix you want.

I think what you really want to look into is media queries then when the browser window size is less the 1300px you can change the menu.

dennoman
dennoman's picture
Offline
newbie
Last seen: 6 years 6 days ago
Timezone: GMT+1
Joined: 2013-11-30
Posts: 5
Points: 6

Thanks Tony. What should the

Thanks Tony. What should the code look like to eliminate this problem?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 13 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

This should get you

This should get you started.

@media screen and (min-width: 1300px) {
  /* styles when the browser window is less the 1300px */
  #menu_bg{
    height:auto;
  }
  #menu{
    width:auto;
    height:auto;
  }   
  #menu UL {
    padding-left:0;
  } 
  #menu li a{
    color:blue;
  }
}

dennoman
dennoman's picture
Offline
newbie
Last seen: 6 years 6 days ago
Timezone: GMT+1
Joined: 2013-11-30
Posts: 5
Points: 6

Thanks but it has no effect,

Thanks but it has no effect, the problem persists..

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 13 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Yep it should have been

Yep it should have been max-width in the media query.
I am just giving you something to start with you will have to actually make it work.
Try to avoid setting widths of block level elements specially when they are 100%;

dennoman
dennoman's picture
Offline
newbie
Last seen: 6 years 6 days ago
Timezone: GMT+1
Joined: 2013-11-30
Posts: 5
Points: 6

The site has already been

The site has already been delayed for so long and I really need to go online soon. Can you help me out in cleaning up the code so it will work? You would not only help me out big time but I could also pay you something to make it worth your wile. I am in a bit of a predicament here.