Skip to content
View in the app

A better way to browse. Learn more.
Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

I sad

Helen
in Frontend

Featured Replies

Please help....

 

Have been tweeking my site, uploaded, and checked validation....... aggghh! 1 error.

 

I know it is because I have a div and a ul id of menu. The problem is I need to change the code to make it validate. I have been doing this all day, but to no avail.

 

Can anyone please help with the code??? (I'll buy you a drink in the bar!)

 

The css is.....

* {
margin:0;
padding:0;
}  

body	{
background-color: #006284;
}		

#wrapper	{
width:1024px;			 
margin-bottom: 35px;
margin-left: auto;
margin-right: auto;							 
border: none;
}


#menu	{
list-style:none;
height:38px;
position:relative;
padding-top:200px;

}

#menu span {
display:none;
position:absolute;
}

#menu a	{
display:block;
text-indent:-900%;
position:absolute;
outline:none;
}



#menu a:hover span{
display:block;
}

#menu .home	{
width:105px;
height:38px;
background:url(images/home.png) no-repeat;
left:70px;
top:60px;
}

#menu .home span	{
width:105px;
height:38px;
background:url(images/home-under.png) no-repeat;
left:0px;
top:0px;
}

#menu .about	{
width:113px;
height:37px;
background:url(images/about.png) no-repeat;
left:160px;
top:60px;
}

#menu .about span	{
width:113px;
height:37px;
background:url(images/about-under.png) no-repeat;
left:0px;
top:0px;
}

#menu .services	{
width:130px;
height:37px;
background:url(images/services.png) no-repeat;
left:255px;
top:60px;
}

#menu .services span	{
width:130px;
height:37px;
background:url(images/services-under.png) no-repeat;
left:0px;
top:0px;
}

#menu .portfolio	{
width:129px;
height:38px;
background:url(images/portfolio.png) no-repeat;
left:380px;
top:60px;
}

#menu .portfolio span	{
width:129px;
height:38px;
background:url(images/portfolio-under.png) no-repeat;
left:0px;
top:0px;
}

#menu .contact	{
width:122px;
height:38px;
background:url(images/contact.png) no-repeat;
left:500px;
top:60px;
}

#menu .contact span	{
width:122px;
height:38px;
background:url(images/contact-under.png) no-repeat;
left:0px;
top:0px;
}

#header		{
background-image:url(images/header3.jpg);
background-repeat:no-repeat;
height:369px;
width:1024px;

}			 



#content	{
font-family: Georgia, Times New Roman, Times, serif;
font-style:italic;
color:#000066;
background-image:url(images/body1.jpg);



}

#column1	{
float:right;
width: 265px;
font-size:14px;
padding-right:60px;

}



#column2	{
float:left;
width:610px;
padding-left:50px;
padding-right:15px;
font-size:15px
}


#content h1	{
font-size:24px;
color: #000033;
background-image:url(images/h1-img.png);
background-repeat:no-repeat;
height:auto;
padding-bottom:50px;
padding-top:70px;
padding-left:55px;
}


#content h2	{
font-size:18px;
color:#000033;
background-image:url(images/h2-img.png);
background-repeat:no-repeat;
padding-top:50px;
padding-bottom:40px;
padding-left:45px;
}

#content h3	{
font-size:16px;
padding-top:20px;
}

#content h4	{
background-image:url(images/h4-img.png);
background-repeat:no-repeat;
font-size:18px;
color:#000033;
padding-bottom:30px;
padding-top:70px;
padding-left:45px;
}

p	{
padding-top:0px;
}

#content ul	{
list-style: disc;
padding-left:30px;
}

#footer		{

font-family: Georgia, Times New Roman, Times, serif;
background-image:url(images/footer.jpg);
background-repeat:no-repeat;
font-size:12px;
clear:both;
position:relative;
top:60px;
padding-left:60px;
padding-bottom:100px;
padding-top:3px;

}
#footer li	{
display:inline;
padding:0 1.5em;
padding-left:30px;		 
}

a:link	{
text-decoration: underline;
color:#000066;
}

a:visited	{
text-decoration: underline;
color:#000066;
}

a:hover	{
text-decoration:none;
color:#000033;
}



form	{
font-family: Georgia, Times New Roman, Times, serif;
margin:0;

min-width:500px;
max-width:600px;
padding-top:15px;

}

form label	{
display:block;
float:left;
width:150px;
padding:0;
margin: 5px 0 0;
text-align:right;
clear:left;


}

form input,form textarea, form select	{
width:auto;
margin:5px 0 0 10px;
margin-bottom:20px;

}			 

form legend	{
color: #000033;

}

 

html can be found in the link below.

You can't have both with the same name ?? They have to be different.

 

Change the div's id to something like navigation, most of the #menu styling seems to be for the UL anyway...

  • Author

I know, I have been trying all day to change one, which is easy in the html, but I have just confused myself in the css. :(

It seems like you've got a lot of css.

 

Give them separate names and delete the css and start again? Easiest way...

  • Author
It seems like you've got a lot of css.

 

Give them separate names and delete the css and start again? Easiest way...

 

I think you're right....

I got it to validate anyway, but I will start to prune my css a bit.

 

ooh one more thing......

On my portfolio page, I get these errors

 

But I don't understand what they mean.

I think you're right....

I got it to validate anyway, but I will start to prune my css a bit.

 

ooh one more thing......

On my portfolio page, I get these errors

 

But I don't understand what they mean.

 

Hmmm.. I copied the source code and stuck it in dreamweaver, and it says valid XHTML 1.0 Transitional. :rolleyes:

Dreamweaver's validator doesn't work properly...

 

The error is caused by this:

 

<a href="images/nowaksite.png" rel="lightbox" title="A charity approached us for a complete website. See the site at <a href="http://www.nowakssportingchance.co.uk">www.nowakssportingchance.co.uk</>"target="_blank">

 

You've got " instead of " at the beginning of the href attribute, and then you've got 

</>"t

at the end of it... no space between the attributes plus you are closing the tag - in fact the whole line is a bit screwy!

Dreamweaver's validator doesn't work properly...

 

Even in Dreamweaver CS4 Beta? :o

You have DREAMWEAVER CS4!?!?

 

Yeah that line does look rather dodgy, I'd try that again!

  • Author
Dreamweaver's validator doesn't work properly...

 

The error is caused by this:

 

<a href="images/nowaksite.png" rel="lightbox" title="A charity approached us for a complete website. See the site at <a href="http://www.nowakssportingchance.co.uk">www.nowakssportingchance.co.uk</>"target="_blank">

 

You've got " instead of " at the beginning of the href attribute, and then you've got 

</>"t

at the end of it... no space between the attributes plus you are closing the tag - in fact the whole line is a bit screwy!

 

Thanks... will take a look at that.

 

I got that portion of code from the lightbox v2 website. I have obviously effed it up as I have wrote it down.. :rolleyes:

These are the errors that I picked up in the validation on the various pages of your site:

 

  • On line 13, you haven't linked your CSS correctly, you cannot have a space in the filename, should be iridium_style.css insetad or simply style.css
  • On line 22 to 26, you have empty <span> tags. Empty elements are not allowed in XHTML. Consider placing an invisible character in them such as  

I also noticed that on the "about" page, you have referenced an alternative stylesheet ("form2.css"). Was this intentional?

 

Hope this helps,

Dan

Create an account or sign in to comment
Go to topic listing

Account

Navigation

Search

Search

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.