Highlighted

CSS Menu without images [Branched from Validator Errors and the Fix]

Explorer ,
May 17, 2019

Copy link to clipboard

Copied

CSS Menu without images

Simple to edit, no complex scripts or image swap behaviors, less code, easily indexed by search engines, translators and screen readers.

I am rebuilding my web site from ground up. Starting fresh. I will be using this code to begin. What I want to achieve is to create a working template using this index.html page.

In design view ( Dreamweaver CS6) I do not see 'css menu' in a css styles folder. There is no css styles, no css styles folder. I do not know what I should do. In code view I see this css menu as a <style>.

Should I simply create an external css style sheet as a starting point in developing index.html as a template?

If I can be given a push in the best direction I should be able to move forward with rebuilding the web site. I have content - that needs to be brought into clean pages.

Thanks for any advice!

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

Hi Ezad,

Welcome to the Dreamweaver forum.

I have branched your question into a new topic because the old discussion was from 2013 and no longer relevant.

When I'm building my prototype page, I embed CSS code in the <head> of my document.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>CSS Flexbox Starter</title>

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

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

<style>

body {

margin: 0 auto;

width: 80%;

font-family:

Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;

font-size: calc(16px + 1vw);

line-height: calc(1.1em + 0.5vw);

}

.flex-container {display: flex;}

.col {padding: 5%}

.light {background:#DDD;}

.dark {background:#222; color:#FFF}

/* Special Rules for mobiles */

@media only screen and (max-width: 768px) {

.flex-container {flex-wrap:wrap}

}

</style>

</head>

<body>

<h2>Heading 2</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>

<div class="flex-container">

<div class="col light">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt atque ad beatae blanditiis, quod numquam dicta soluta voluptates, rerum eum velit dolor quisquam dolore, placeat dolorum asperiores unde dignissimos nulla.</p>

</div>

<div class="col dark">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt atque ad beatae blanditiis, quod numquam dicta soluta voluptates, rerum eum velit dolor quisquam dolore, placeat dolorum asperiores unde dignissimos nulla.</p>

</div>

<div class="col light">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt atque ad beatae blanditiis, quod numquam dicta soluta voluptates, rerum eum velit dolor quisquam dolore, placeat dolorum asperiores unde dignissimos nulla.</p>

</div>

</div>

</body>

</html>

When I go into production mode, I move the embedded CSS  code into an external stylesheet to which all HTML pages are linked.  If I decide to change styles later, I have only 1 file to edit instead of many.  It saves a lot of time.

Views

155

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 Menu without images [Branched from Validator Errors and the Fix]

Explorer ,
May 17, 2019

Copy link to clipboard

Copied

CSS Menu without images

Simple to edit, no complex scripts or image swap behaviors, less code, easily indexed by search engines, translators and screen readers.

I am rebuilding my web site from ground up. Starting fresh. I will be using this code to begin. What I want to achieve is to create a working template using this index.html page.

In design view ( Dreamweaver CS6) I do not see 'css menu' in a css styles folder. There is no css styles, no css styles folder. I do not know what I should do. In code view I see this css menu as a <style>.

Should I simply create an external css style sheet as a starting point in developing index.html as a template?

If I can be given a push in the best direction I should be able to move forward with rebuilding the web site. I have content - that needs to be brought into clean pages.

Thanks for any advice!

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

Hi Ezad,

Welcome to the Dreamweaver forum.

I have branched your question into a new topic because the old discussion was from 2013 and no longer relevant.

When I'm building my prototype page, I embed CSS code in the <head> of my document.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>CSS Flexbox Starter</title>

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

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

<style>

body {

margin: 0 auto;

width: 80%;

font-family:

Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;

font-size: calc(16px + 1vw);

line-height: calc(1.1em + 0.5vw);

}

.flex-container {display: flex;}

.col {padding: 5%}

.light {background:#DDD;}

.dark {background:#222; color:#FFF}

/* Special Rules for mobiles */

@media only screen and (max-width: 768px) {

.flex-container {flex-wrap:wrap}

}

</style>

</head>

<body>

<h2>Heading 2</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>

<div class="flex-container">

<div class="col light">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt atque ad beatae blanditiis, quod numquam dicta soluta voluptates, rerum eum velit dolor quisquam dolore, placeat dolorum asperiores unde dignissimos nulla.</p>

</div>

<div class="col dark">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt atque ad beatae blanditiis, quod numquam dicta soluta voluptates, rerum eum velit dolor quisquam dolore, placeat dolorum asperiores unde dignissimos nulla.</p>

</div>

<div class="col light">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt atque ad beatae blanditiis, quod numquam dicta soluta voluptates, rerum eum velit dolor quisquam dolore, placeat dolorum asperiores unde dignissimos nulla.</p>

</div>

</div>

</body>

</html>

When I go into production mode, I move the embedded CSS  code into an external stylesheet to which all HTML pages are linked.  If I decide to change styles later, I have only 1 file to edit instead of many.  It saves a lot of time.

Views

156

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
May 17, 2019 0
Adobe Community Professional ,
May 17, 2019

Copy link to clipboard

Copied

Hi Ezad,

Welcome to the Dreamweaver forum.

I have branched your question into a new topic because the old discussion was from 2013 and no longer relevant.

When I'm building my prototype page, I embed CSS code in the <head> of my document.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>CSS Flexbox Starter</title>

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

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

<style>

body {

margin: 0 auto;

width: 80%;

font-family:

Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;

font-size: calc(16px + 1vw);

line-height: calc(1.1em + 0.5vw);

}

.flex-container {display: flex;}

.col {padding: 5%}

.light {background:#DDD;}

.dark {background:#222; color:#FFF}

/* Special Rules for mobiles */

@media only screen and (max-width: 768px) {

.flex-container {flex-wrap:wrap}

}

</style>

</head>

<body>

<h2>Heading 2</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>

<div class="flex-container">

<div class="col light">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt atque ad beatae blanditiis, quod numquam dicta soluta voluptates, rerum eum velit dolor quisquam dolore, placeat dolorum asperiores unde dignissimos nulla.</p>

</div>

<div class="col dark">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt atque ad beatae blanditiis, quod numquam dicta soluta voluptates, rerum eum velit dolor quisquam dolore, placeat dolorum asperiores unde dignissimos nulla.</p>

</div>

<div class="col light">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt atque ad beatae blanditiis, quod numquam dicta soluta voluptates, rerum eum velit dolor quisquam dolore, placeat dolorum asperiores unde dignissimos nulla.</p>

</div>

</div>

</body>

</html>

When I go into production mode, I move the embedded CSS  code into an external stylesheet to which all HTML pages are linked.  If I decide to change styles later, I have only 1 file to edit instead of many.  It saves a lot of time.

Nancy O'Shea, ACP
Alt-Web.com

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...
May 17, 2019 1