• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Engaged ,
May 17, 2019 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!

Views

258

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

correct answers 1 Correct answer

Community Expert , May 17, 2019 May 17, 2019

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

...

Votes

Translate

Translate
Community Expert ,
May 17, 2019 May 17, 2019

Copy link to clipboard

Copied

LATEST

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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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