• Locked
8 replies [Last post]
Sat, 2013-11-30 13:17
dennoman
dennoman's picture
Offline
newbie
Last seen: 9 years 24 weeks 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;
}

Top
Tags:
Sat, 2013-11-30 22:57
#1
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi dennoman, Can you link to

Hi dennoman,
Can you link to an example page?

Top
Sun, 2013-12-01 13:00
#2
dennoman
dennoman's picture
Offline
newbie
Last seen: 9 years 24 weeks 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

Top
Sun, 2013-12-01 23:05
#3
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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.

Top
Mon, 2013-12-02 20:38
#4
dennoman
dennoman's picture
Offline
newbie
Last seen: 9 years 24 weeks 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?

Top
Mon, 2013-12-02 22:00
#5
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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;
  }
}

Top
Tue, 2013-12-03 12:52
#6
dennoman
dennoman's picture
Offline
newbie
Last seen: 9 years 24 weeks 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..

Top
Tue, 2013-12-03 22:00
#7
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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%;

Top
Thu, 2013-12-05 19:28
#8
dennoman
dennoman's picture
Offline
newbie
Last seen: 9 years 24 weeks 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.

Top
  • Locked