Highlighted

CSS stylesheet not being recognized

New Here ,
Feb 15, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

TOPICS
Dreamweaver | Mac OS issues

Views

1.6K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

CSS stylesheet not being recognized

New Here ,
Feb 15, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

TOPICS
Dreamweaver | Mac OS issues

Views

1.6K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 15, 2018 0
Adobe Community Professional ,
Feb 15, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 15, 2018 1
New Here ,
Feb 18, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 18, 2018 0
Adobe Employee ,
Feb 19, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 19, 2018 1
Adobe Community Professional ,
Feb 15, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 15, 2018 1
Adobe Community Professional ,
Feb 15, 2018

Copy link to clipboard

Copied

Desktop view:

Mobile view:

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 15, 2018 1