CSS stylesheet not being recognized

Report · Feb 15, 2018

I am new to Dreamweaver and am building a new site. I have set up the basic site with my main.html page, my styles.css page, and my folders. I want the title and the topnav to float to the left and right respetively. Then I will insert a banner, and then I want a main content panel to float to the left and a sidebar to float to the right. I thought I had created the necessary html code and the css code, but the divs are not floating. Could someone please look at my html and css codes below and tell me what I am doing wrong?

==================================================

<!doctype html>

<html>

<head>

</head>

<body>

<h1>JA Weir Associates </h1>

<h2>Curtain Wall Consulting</h2>

</div>

<ul>

<l2>About</l2>

<l3>Services</l3>

<l4>Gallery</l4>

<l5>Contact</l5>

</ul>

</div>

</div>

<p>This will be the Main Heading.</p>

<p>This will be the text in the content area.</p>

</div>

<p>This will be in the sidebar.</p>

</div>

</div>

</body>

</html>

============================================

/* CSS document*)

*{ margin:0; padding:0: border:0}

#name { width:300px; float:left; }

#topnav { width:500px; float:right; }

#banner { }

#content { width:500px; float:left; }

#sidebar { width:300px; float:right; }

#footer { }

Report · Feb 15, 2018

Everything works as written on this end when I duplicate your code.

Did you define a site to start out?

Define a site

Is your css file called "styles.css" and within a folder called "CSS" in the same directory as your main.html page?

Your Files window would look something like this (if those were the only files/folders)...

CSS

styles.css

main.html

Report · Feb 18, 2018

Thank you for your response to my question. The answers to your questions are yes so I don't know what's wrong. I am working on a Mac. Could that be a factor?

Report · Feb 19, 2018

Your list elements should look like this:

<ul>

<li>About</li>

<li>Services</li>

<li>Gallery</li>

<li>Contact</li>

</ul>

Check if it makes a difference when you don't use capitalisation in the name of your css directory (and change the link to the stylesheet in the main.html file as well).

Report · Feb 15, 2018

I won't tell you not to use Floats but just so you know, Flexbox has a lot more advantages.

You need to clear your floats after they are no longer needed.
You should strive to use HTML5 semantic markup - header, nav, article, aside, footer, etc...
Modern layouts must be responsive.
That sidebar is going to be a problem on mobile devices. So we'll put it inside a media query.

<!doctype html>

<head>

<title>Sample Layout</title>

<style>

body {width: 80%; margin:0 auto;}

header {

width: 50%;

float: left;

}

nav {

width: 50%;

float: left;

}

#banner {float:none; clear:both; }

#banner img {max-width:100%; display:block; vertical-align:bottom; margin:0 auto;}

@media (min-width: 768px) {

article {

width: 65%;

float: left;

}

aside {

width: 35%;

float: left;

}

footer {float:none; clear:both }

</style>

</head>

<body>

<h1>JA Weir Associates </h1>

<h2>Curtain Wall Consulting</h2>

</header>

<nav>

<ul>

<l2>About</l2>

<l3>Services</l3>

<l4>Gallery</l4>

<l5>Contact</l5>

</ul>

</nav>

<p>This will be the Main Heading.</p>

<p>This will be the text in the content area.</p>

</article>

<aside>

<p>This will be in the sidebar.</p>

</aside>

</footer>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 15, 2018

Desktop view:

Mobile view:

Nancy O'Shea— Product User, Community Expert & Moderator

CSS stylesheet not being recognized

1 Correct answer

Photos