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.

DIV ID

Featured Replies

Hey Guys,

 

So only joined yesterday but already getting into some bother with div's. At first I didnt really understand the principle of using them and having them link with my internal/external css style sheet.,

 

In have been using the following html code.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Home</title>

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

 

<body>

 

<div id="header">

 

</div>

 

<div id="navigation">

<li><a href="index.html">Home</a></li>

<li><a href="show me.html">Me</a></li>

<li><a href="Testimonials.html">portfolio</a></li>

<li><a href="resources.html">Resources</a></li>

<li><a href="index1.html">Contact</a></li>

</ul>

 

</div>

 

</body>

</html>

 

 

and the following css style sheet..

 

/* CSS Document */

 

 

/*header, pre define properties above*/

 

#header {

width:900px;

margin:0 auto;

position:relative;

height:200px;

background-color: #FFFFFF;

background-image: url(images/logo1.gif);

background-repeat: no-repeat;

background-position: 0 0;

 

 

/*End of header*/

 

#navigation {

width:900px;

margin:0 auto;

position:relative;

height:200px;

background-color: #FFFFFF;

 

 

what have I noticed already using css and divs is that the div id in the css should turn a different color, a box at whatever size that has been specified should then appear and then any links, html tags can be placed in here.

 

but this doesnt seem to be working. Can't understand as the navigation tags are spelt correctly.

 

hope someone can help.

 

I think this is really an issue of linking divs from the html file and external style sheet, maybe I am doing it wrong

 

thanks again everyone.

You have two <head> tags and haven't closed the styles with }.

 

Try this:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; 

charset=ISO-8859-1" />
<title>Home</title>
<!--<head>-->
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<style type="text/css">
/* CSS Document */

/*header, pre define properties above*/

#header {
width:900px;
margin:0 auto;
position:relative;
height:200px;
background-color: pink;/*#FFFFFF;*/
background-image: url(images/logo1.gif);
background-repeat: no-repeat;
background-position: 0 0;
}


/*End of header*/

#navigation {
width:900px;
margin:0 auto;
position:relative;
height:200px;
background-color: violet;/*#FFFFFF;*/
}
</style>

</head>

<body>

<div id="header"> 

</div>

<div id="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="show me.html">Me</a></li>
<li><a href="Testimonials.html">portfolio</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="index1.html">Contact</a></li>
</ul>

</div>

</body>
</html>

 

I've put the styles in the head section to save me making a css file, but you should use your css file which has a correct link.

I put background-colors so that I could see the size of the divs.

  • Author

lol

 

thanks very much for getting that resolved for me.

 

A rockie mistake i guess

 

cheers

 

Junior

Create an account or sign in to comment

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.