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