Skip to main content
susanw48020823
susanw48020823
Participant
February 15, 2018
Answered

CSS stylesheet not being recognized

  • February 15, 2018
  • 2 replies
  • 6783 views

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>

   

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

   

</head>

   

    <body>

   

    <div id="name">

            <h1>JA Weir Associates </h1>

            <h2>Curtain Wall Consulting</h2>

    </div>

       

    <div id="topnav">

   

            <ul>

            <l1>Home</l1>

            <l2>About</l2>

            <l3>Services</l3>

            <l4>Gallery</l4>

            <l5>Contact</l5>

            </ul>

           

    </div>

       

        <div id="banner">

           

        </div>

    <div id="content">

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

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

           

    </div>

   

    <div id="sidebar">

                        

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

           

    </div>

   

    <div id="footer">

           

            <p>Copyright 2018. All rights reserved</p>

               

    </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      {   }

This topic has been closed for replies.
Correct answer Nancy OShea

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

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

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Sample Layout</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

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

<header>

<h1>JA Weir Associates </h1>

<h2>Curtain Wall Consulting</h2>

</header>

<nav>

<ul>

<l1>Home</l1>

<l2>About</l2>

<l3>Services</l3>

<l4>Gallery</l4>

<l5>Contact</l5>

</ul>

</nav>

<div id="banner"><img src="https://dummyimage.com/1000x200" alt="placeholder image"> </div>

<article>

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

<p>Copyright 2018. All rights reserved</p>

</footer>

</body>

</html>

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
February 15, 2018

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

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

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Sample Layout</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

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

<header>

<h1>JA Weir Associates </h1>

<h2>Curtain Wall Consulting</h2>

</header>

<nav>

<ul>

<l1>Home</l1>

<l2>About</l2>

<l3>Services</l3>

<l4>Gallery</l4>

<l5>Contact</l5>

</ul>

</nav>

<div id="banner"><img src="https://dummyimage.com/1000x200" alt="placeholder image"> </div>

<article>

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

<p>Copyright 2018. All rights reserved</p>

</footer>

</body>

</html>

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
February 15, 2018

Desktop view:

Mobile view:

Nancy O'Shea— Product User & Community Expert
Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
February 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

susanw48020823
susanw48020823Author
Participant
February 19, 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?

A
Adobe Employee
Albrecht Volk
Adobe Employee
February 19, 2018

Your list elements should look like this:

  <ul>

    <li>Home</li>

    <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).

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices