Advertising
y u no do it?

Advertising (learn more)
Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

Starts at just $1 per CPM or $0.10 per CPC.

Having a slight css problem in DW CS6

Discussion in 'CSS' started by Tony Agosto, Oct 20, 2013.

Tony Agosto Peon

Messages:: 2

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 1

So, for some reason when i put a border around my container, and also another border around a certain content area, it comes through in design view, but not in live view or browser preview.

Here is the code:

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>&copy;Tony Agosto</title>
<link type="text/css" rel="stylesheet" href="myLayout.css"/>
<link type="text/css" rel="stylesheet" media="print" href="myLayoutPrint.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--></head>

<body>

<div class="container">
  <header>
    <div id="logo"><img src="images/butterfly-ovr.png" width="170" height="158" alt="greenStartLogo"></div>
  </header>
  <nav>
    <p class="hNav"><a href="#"> Home</a>|<a href="#">About Us</a>|<a href="#">Contact Us</a></p>
  </nav>

  <div class="sidebar1">
    <ul class="vNav">
      <li><a href="#">Green Headlines</a></li>
      <li><a href="#">Green Products</a></li>
      <li><a href="#">Green Events</a></li>
      <li><a href="#">Green Travel</a></li>
      <li><a href="#">Green Tips</a></li>
    </ul>
    <!-- TemplateBeginEditable name="SideContent" -->
    <aside> <img name="sidebar" src="" width="180" height="150" alt="">
      <p>Insert Caption Here.</p>
    </aside>
    <!-- TemplateEndEditable -->
    <!-- end .sidebar1 -->
  </div>
  <!-- TemplateBeginEditable name="Main content" -->
  <article class="content">
    <h1>Contact Green Start LLC.</h1>
   <p id="top"> &nbsp; &nbsp; &nbsp;For general questions and information email: info@green-start.org

When you contact our offices in &nbsp; &nbsp; &nbsp;Meridien, our friendly and knowledgeable staff is ready to serve you and answer your questions:</p>

    <section class="profile">
      <h2>Association Management</h2>
      <p>Elaine is the President and CEO of GreenStart Asociation.  She has 20-years experience in the environmental sciences and has worked at  several grassroots organizations developing programs and services for community  outreach.</p>
      <p>You may find her answering your phone calls or checking out  a problem you have with a mail order.</p>
      <p>Email Elaine at: elaine@green-start.org</p>   
    </section>
    <section class="profile">
      <h2>Education and Events</h2>
      <p>Sarah arranges all our events, classes and green travel  offerings. Sarah makes these offerings start on time and meet their goals, so  you can enjoy every minute.</p>
      <p>She can also create custom events for people with special  needs such as handicap access or special dietary needs, or make accommodations  for existing events and classes. So, let Sarah know if you have any personal  requirements.</p>
      <p>Email Sarah at: sarah@green-start.org</p>
    </section>
    <section class="profile">
      <h2>Transportation Analysis.</h2>
      <p>Eric is our transportation expert. He can review your needs  and resources to identify the best green solutions for daily transport, whether  it includes cars, bikes, buses or trains, and even the decision to buy or rent.</p>
      <p>When you are ready to change the way you move around town,  give Eric a call. </p>
      <p>Email Eric at: eric@green-start.org</p>
    </section>
    <section class="profile">
      <h2>Research and Development</h2>
      <p>Lin manages our research for sustenable development. She researches products and services of every local restaurant, store, hotel, spa or other business that we recommend to our visitors. She listens to your comments on our recommendations and checks out your complaints.</p>

<p>You can expect to hear from Lin when you order a product or schedule a service appointtment. She will want to know what you thought of our offerings.</p>
<p>Email Lin at: lin@green-start.org</p>

    </section>
    <!-- end .content -->
  </article>
  <!-- TemplateEndEditable -->
  <footer>
    <p>Copyright 2012 Meridien
GreenStart. All rights reserved.</p>
    <address>
      13806 Pebblebrook Drive, Houston, Texas 77079
    </address>
  </footer>
  <!-- end .container --></div>
</body>
</html>
CSS:

body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color:#333;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;  
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}

.container {
width: 950px;
background-color: #FFFFFF;
margin: 0 auto;
border: solid,2px, #60;
font-family: "Trebuchet MS";
background-image:url(images/divider.png);
background-repeat:repeat-y;  
}
#logo {
position: absolute;
width: 170px;
height: 158px;
z-index: 1;
margin-top: 10px;
margin-left: 30px;
}
header {
background-color: #ADB96E;
background-image: url(images/banner.jpg);
background-repeat: no-repeat;
height:130px;
width:980:px;
background-color: #090;
}
.sidebar1 {
float: left;
width: 180px;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 770px;
float: right;
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
    padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
.vNav {
    list-style: none; /* this removes the list marker */
    border-top: 1px solid #666;
    /* this creates the top border for the links - all others are placed using a bottom border on the LI */
    /* this creates the space between the navigation on the content below */
    font-size: 90%;
}
.vNav li {
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-top-color: #060;
    border-right-color: #060;
    border-bottom-color: #060;
    border-left-color: #060;
}
.vNav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
    padding: 5px 5px 5px 15px;
    display: block;
    /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */  
text-decoration: none;
background-color: #090;
color: #ffc;
font-weight: bold;
font-size: 90%;
}
.vNav a:hover, ul.nav a:active, ul.nav a:focus {
color: #000;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-top-color: #0c0;
border-right-color: #060;
border-bottom-color: #060;
border-left-color: #0co;
}


footer {
padding: 10px 0;
background-color: #090;
background-image:url(images/background.png);
background-repeat:repeat-x;
font-weight:bold;
position: relative;
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
font-size: 90%;
color: #ffc;
}

/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, article, figure {
display: block;
}
.hNav {
font-size: 90%;
font-weight: bold;
color: #FFC;
background-color: #090;
text-align: right;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
background-image: url(images/background.png);
background-repeat:repeat-x;
}
.hNav a:link, .hNav a:visited{
color:#FFC;
text-decoration:none  
}

.hNav a:hover, .hNav a:active {
    color:#000;
}

aside{
font-size:smaller;  
}
.profile{
margin-left:25px;
margin-right:25px;
margin-bottom:15px;
border-bottom: solid 10px #cadaaf;
}
.content h1 {
font-size: 200%;
margin-top: 10px;
margin-bottom: 5px;
}
.content h2{
color:#090;
  
.green {
color: #090;
}
#top{
border-top:1px solid #090;  
border-bottom:1px solid #090;
}

Code (markup):

Last edited by a moderator: Oct 22, 2013

Tony Agosto, Oct 20, 2013 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

Well, this border declaration is gibberish:
border: solid,2px, #60;

parameters are separated by spaces, NOT comma's, and that color code is invalid as hex colors are either three or six digits long... did you mean #060?

border:2px solid #060;

Is probably what you meant to say.

Really though relying on the steaming pile of manure known as dreamweaver, in particular it's halfwit "design view" is just asking for failure. Do yourself a favor, pitch that overpriced garbage in the trash, get a flat text editor like flo's notepad2, editplus, notepad++, etc... and test in the actual browsers ONLY without any of that extra crap getting in the way.

I'd also suggest axing all the extra HTML 5 for nothing garbage, and fix the document structure to make a bit more sense... likewise you've probably got almost twice the CSS you need for something so simple -- AND I'd suggest making the layout semi-fluid, elastic AND responsive NOW, before you get in too much deeper on the layout.

So step one, clean up the markup, axe the HTML 5 garbage and go back to a recommendation document that doesn't need any extra goofy scripting to work legacy thus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="viewport"
	content="width=device-width; initial-scale=1.0"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	&copy; Tony Agosto
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		<span>
			Green Start
			<span></span>
		</span>
	</h1>

	<ul id="mainMenu">
		<li><a href="#">Home</a></li>
		<li><a href="#">About Us</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>

	<div id="extras">
		<ul>
			<li><a href="#">Green Headlines</a></li>
			<li><a href="#">Green Products</a></li>
			<li><a href="#">Green Events</a></li>
			<li><a href="#">Green Travel</a></li>
			<li><a href="#">Green Tips</a></li>
		</ul>
		<img src="" width="180" height="150" alt="describe this!" class="plate" />
		<p>Insert Caption Here.</p>
	</div>

	<div id="content">

		<h2>Contact Green Start LLC.</h2>
		<p>
			For general questions and information email: info@green-start.org - When you contact our offices in Meridien, our friendly and knowledgeable staff is ready to serve you and answer your questions:
		</p>
		
		<div id="profiles">

			<h3>Association Management</h3>
			<p>
				Elaine is the President and CEO of GreenStart Asociation. She has 20-years experience in the environmental sciences and has worked at several grassroots organizations developing programs and services for community outreach.
			</p><p>
				You may find her answering your phone calls or checking out a problem you have with a mail order.
			</p><p>
				Email Elaine at: elaine@green-start.org
			</p>

			<h3>Education and Events</h3>
			<p>
				Sarah arranges all our events, classes and green travel offerings. Sarah makes these offerings start on time and meet their goals, so you can enjoy every minute.
			</p><p>
				She can also create custom events for people with special needs such as handicap access or special dietary needs, or make accommodations for existing events and classes. So, let Sarah know if you have any personal requirements.
			</p><p>
				Email Sarah at: sarah@green-start.org
			</p>

			<h3>Transportation Analysis.</h3>
			<p>
				Eric is our transportation expert. He can review your needs and resources to identify the best green solutions for daily transport, whether it includes cars, bikes, buses or trains, and even the decision to buy or rent.
			</p><p>
				When you are ready to change the way you move around town, give Eric a call.
			</p><p>
				Email Eric at: eric@green-start.org
			</p>

			<h3>Research and Development</h3>
			<p>
				Lin manages our research for sustenable development. She researches products and services of every local restaurant, store, hotel, spa or other business that we recommend to our visitors. She listens to your comments on our recommendations and checks out your complaints.
			</p><p>
				You can expect to hear from Lin when you order a product or schedule a service appointtment. She will want to know what you thought of our offerings.
			</p><p>
				Email Lin at: lin@green-start.org
			</p>
			
		</div>

	</div>

	<hr />

	<div id="footer">
		Copyright 2012 Meridien GreenStart. <span>All rights reserved.</span><br />
		13806 Pebblebrook Drive, <span>Houston, Texas 77079</span>
	</div>

</body></html>
Code (markup):
Doing things like losing the 'section for nothing' (since numbered headings and HR indicate the start of new sections/subsections), losing the 'heading' that doesn't do anything apart from making the document structure impossible to navigate (thanks HTML 5!), losing the ADDRESS around the non-address element (address is for site CREATOR contact, which is why nobody uses ADDRESS), axing the ASIDE around something that doesn't seem to be a literary aside, putting the proper element as H1 (since h1 is the heading under which all subsections of the page are... well... subsections) with an image replacement for graceful degradation CSS off and/or images off, etc, etc... I did toss a couple extra span in too for helping with responsive layout -- since really that's what SPAN and DIV are for, hooks for applying style WITHOUT changing the meaning of what you are wrapping or saying what that style IS.

For CSS, a simple reset reduces the amount of code, as does using semantics and inheritance more than targeting via class/ID. Opening it up fluid (since fixed width is a poster child of 'How NOT to build a website'), with an elastic max-width (so when default font is bigger so is the layout) makes it easier to then toss responsive layout at it -- using width as triggers to re-arrange the header elements, strip off unnecessary presentation like the columns, etc, etc...
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

hr {
	display:none;
	/*
		HR in my code are for semantic breaks in topic/section, NOT
		style/presenation, so hide them from screen.css users
	*/
}

@[USER=124521]media[/USER] (max-width:480px) {
	* {
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
}

body {
	font:normal 100%/150% "trebuchet ms",helvetica,sans-serif;
	background:#333;
}

#pageWrapper {
	min-width:48em;
	max-width:68em;
	width:95%;
	margin:0 auto;
	background:#FFF;
	border:solid #060;
	border-width:0 2px;
}

h1 {
	padding:10px 0 0 30px;
	background:#090 url(images/banner.jpg) no-repeat;
}

h1 span {
	position:relative;
	display:block;
	width:170px;
	padding:40px 0 50px;
	text-align:center;
	font:bold 32px/34px "trebuchet ms",helvetica,sans-serif;
	color:#EFD;
}

h1 span span {
	position:absolute;
	top:0;
	left:0;
	padding:0;
	height:158px;
	background:url(images/logo.png);
}

#mainMenu {
	text-align:right;
	margin-top:-1.7em;
	line-height:1.2em;
	padding:0 1em 0.5em;
	margin-bottom:1em;
	border-bottom:2px solid #060;
}

#mainMenu li {
	display:inline-block;
}

#mainMenu a {
	display:inline-block;
	text-decoration:none;
	font-weight:bold;
	padding:0 0.2em 0 0.5em;
	color:#EFD;
	border-left:2px solid #FFF;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	color:#000;
}

#mainMenu li:first-child a {
	border-left:0;
}

#extras {
	float:left;
	display:inline;
	width:11em;
	min-width:180px;
	margin-left:1em;
	text-align:center;
}

#extras ul {
	list-style:none;
	margin-bottom:1em;
	text-align:left;
	border:1px solid #060;
}

#extras li {
	display:inline;
}

#extras li a {
	display:block;
	padding:0.2em 0.5em;
	font-weight:bold;
	text-decoration:none;
	color:#EFD;
	background:#090;
	border-style:solid;
	border-width:1px 0;
	border-color:#060;
}

#extras li a:active,
#extras li a:focus,
#extras li a:hover {
	color:#000;
	border-color:#8C8 #090 #000;
}

#extras .plate {
	display:block;
	margin:0 auto 1em;
	max-width:100%;
}

#content {
	overflow:hidden; /* prevent float de-indent/underwrap */
	zoom:1; /* trip haslayout, prevent float de-indent/underwrap legacy IE */
	padding:0 1em;
}

#content p {
	padding-bottom:1em;
}

#content h2 {
	padding-bottom:0.5em;
	font:bold 200%/120% "trebuchet ms",helvetica,sans-serif;
}

#profiles h3 {	
	padding:0.66em;
	font:bold 150%/120% "trebuchet ms",helvetica,sans-serif;
	color:#090;
	border-top:0.33em solid #CDA;
}

#profiles p {
	padding:0 1em 1em;
}

#profiles h3:first-child {
	padding-top:0;
	border:0;
}

#footer {
	clear:both; /* just in case */
	padding:1em;
	color:#EFD;
	background:#090;
	border-top:2px solid #060;
}

@[USER=124521]media[/USER] (max-width:48em) {

	#pageWrapper {
		min-width:256px;
		width:100%;
		border:0;
	}
	
	h1 {
		padding:0.25em 0.25em 1em;
	}
	
	h1 span span {
		display:none;
		background:none;
	}
	
	h1 span {
		display:block;
		width:auto;
		padding:0;
	}
	
	#mainMenu {
		text-align:center;
		padding:0 0.25em 0.5em;
	}
	
	#extras {
		float:none;
		margin:0;
	}
	
	#extras ul {
		text-align:center;
		border:0;
	}
	
	#extras li a {
		display:inline-block;
		margin-bottom:0.4em;
	}
	
	#content {
		padding:0 0.5em;
	}
	
	#footer {
		text-align:center;
	}
	
	#profiles {
		padding:0;
	}
	
}

@[USER=124521]media[/USER] (max-width:30em) {
	#footer span {
		display:block;
	}
}
Code (markup):
I put a copy live up on my server here:
http://www.cutcodedown.com/for_others/tonyAgosto/template.html

(don't worry about link mojo, that whole directory is behind a nofollow robots.txt). As with all my examples the directory:
http://www.cutcodedown.com/for_others/tonyAgosto/

Is wide open for easy access to the bits and pieces. Feel free to look around.

The redesign sheds a lot of weight inside <body>, but gains some back from the more complete/verbose <head>. It is half the CSS not counting the responsive layout, which brings it back up to around 80% the size.

Hope this helps, or at least gets you thinking on different approaches to doing things.

deathshadow, Oct 21, 2013 IP

deathshadow Acclaimed Member

Messages:

9,732

Likes Received:

1,998

Best Answers:

253

Trophy Points:

515
#3
Oh, side note -- if you're gonna do stuff like this:

border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: #060; border-right-color: #060; border-bottom-color: #060; border-left-color: #060;

Code (markup):

Try to simplify it down.

border:solid #060; border-width:1px 1px 1px 0;

Code (markup):

or even:

border:1px solid #060; border-left:none;

Code (markup):

Functionally identical. Condensed property first to set as much as possible, then set or even unset the one that's different.
deathshadow, Oct 21, 2013 IP

HDaddy likes this.

Tony Agosto Peon

Messages:: 2

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 1

Thanks for all the help! this is literally the first site I have ever designed. I didn't realize Dreamweaver was looked down upon among experienced developers.
Ill definitely try to condense my code from now on!

deathshadow said: ↑

Well, this border declaration is gibberish:
border: solid,2px, #60;

parameters are separated by spaces, NOT comma's, and that color code is invalid as hex colors are either three or six digits long... did you mean #060?

border:2px solid #060;

Is probably what you meant to say.

Really though relying on the steaming pile of manure known as dreamweaver, in particular it's halfwit "design view" is just asking for failure. Do yourself a favor, pitch that overpriced garbage in the trash, get a flat text editor like flo's notepad2, editplus, notepad++, etc... and test in the actual browsers ONLY without any of that extra crap getting in the way.

I'd also suggest axing all the extra HTML 5 for nothing garbage, and fix the document structure to make a bit more sense... likewise you've probably got almost twice the CSS you need for something so simple -- AND I'd suggest making the layout semi-fluid, elastic AND responsive NOW, before you get in too much deeper on the layout.

So step one, clean up the markup, axe the HTML 5 garbage and go back to a recommendation document that doesn't need any extra goofy scripting to work legacy thus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
    xmlns="http://www.w3.org/1999/xhtml"
    lang="en"
    xml:lang="en"
><head>

<meta
    http-equiv="Content-Type"
    content="text/html; charset=utf-8"
/>

<meta
    http-equiv="Content-Language"
    content="en"
/>

<meta
    name="viewport"
    content="width=device-width; initial-scale=1.0"
/>

<link
    type="text/css"
    rel="stylesheet"
    href="screen.css"
    media="screen,projection,tv"
/>

<title>
    &copy; Tony Agosto
</title>

</head><body>

<div id="pageWrapper">

    <h1>
        <span>
            Green Start
            <span><!-- image replacement --></span>
        </span>
    </h1>

    <ul id="mainMenu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>

    <div id="extras">
        <ul>
            <li><a href="#">Green Headlines</a></li>
            <li><a href="#">Green Products</a></li>
            <li><a href="#">Green Events</a></li>
            <li><a href="#">Green Travel</a></li>
            <li><a href="#">Green Tips</a></li>
        </ul>
        <img src="" width="180" height="150" alt="describe this!" class="plate" />
        <p>Insert Caption Here.</p>
    <!-- #extras --></div>

    <div id="content">

        <h2>Contact Green Start LLC.</h2>
        <p>
            For general questions and information email: info@green-start.org - When you contact our offices in Meridien, our friendly and knowledgeable staff is ready to serve you and answer your questions:
        </p>
       
        <div id="profiles">

            <h3>Association Management</h3>
            <p>
                Elaine is the President and CEO of GreenStart Asociation. She has 20-years experience in the environmental sciences and has worked at several grassroots organizations developing programs and services for community outreach.
            </p><p>
                You may find her answering your phone calls or checking out a problem you have with a mail order.
            </p><p>
                Email Elaine at: elaine@green-start.org
            </p>

            <h3>Education and Events</h3>
            <p>
                Sarah arranges all our events, classes and green travel offerings. Sarah makes these offerings start on time and meet their goals, so you can enjoy every minute.
            </p><p>
                She can also create custom events for people with special needs such as handicap access or special dietary needs, or make accommodations for existing events and classes. So, let Sarah know if you have any personal requirements.
            </p><p>
                Email Sarah at: sarah@green-start.org
            </p>

            <h3>Transportation Analysis.</h3>
            <p>
                Eric is our transportation expert. He can review your needs and resources to identify the best green solutions for daily transport, whether it includes cars, bikes, buses or trains, and even the decision to buy or rent.
            </p><p>
                When you are ready to change the way you move around town, give Eric a call.
            </p><p>
                Email Eric at: eric@green-start.org
            </p>

            <h3>Research and Development</h3>
            <p>
                Lin manages our research for sustenable development. She researches products and services of every local restaurant, store, hotel, spa or other business that we recommend to our visitors. She listens to your comments on our recommendations and checks out your complaints.
            </p><p>
                You can expect to hear from Lin when you order a product or schedule a service appointtment. She will want to know what you thought of our offerings.
            </p><p>
                Email Lin at: lin@green-start.org
            </p>
           
        <!-- #profiles --></div>

    <!-- #content --></div>

    <hr />

    <div id="footer">
        Copyright 2012 Meridien GreenStart. <span>All rights reserved.</span><br />
        13806 Pebblebrook Drive, <span>Houston, Texas 77079</span>
    <!-- #footer --></div>

</body></html>

Code (markup):

Doing things like losing the 'section for nothing' (since numbered headings and HR indicate the start of new sections/subsections), losing the 'heading' that doesn't do anything apart from making the document structure impossible to navigate (thanks HTML 5!), losing the ADDRESS around the non-address element (address is for site CREATOR contact, which is why nobody uses ADDRESS), axing the ASIDE around something that doesn't seem to be a literary aside, putting the proper element as H1 (since h1 is the heading under which all subsections of the page are... well... subsections) with an image replacement for graceful degradation CSS off and/or images off, etc, etc... I did toss a couple extra span in too for helping with responsive layout -- since really that's what SPAN and DIV are for, hooks for applying style WITHOUT changing the meaning of what you are wrapping or saying what that style IS.

For CSS, a simple reset reduces the amount of code, as does using semantics and inheritance more than targeting via class/ID. Opening it up fluid (since fixed width is a poster child of 'How NOT to build a website'), with an elastic max-width (so when default font is bigger so is the layout) makes it easier to then toss responsive layout at it -- using width as triggers to re-arrange the header elements, strip off unnecessary presentation like the columns, etc, etc...

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
    margin:0;
    padding:0;
}

img,fieldset {
    border:none;
}

hr {
    display:none;
    /*
        HR in my code are for semantic breaks in topic/section, NOT
        style/presenation, so hide them from screen.css users
    */
}

@[USER=124521]media[/USER] (max-width:480px) {
    * {
        -webkit-text-size-adjust:none;
        -ms-text-size-adjust:none;
    }
}

body {
    font:normal 100%/150% "trebuchet ms",helvetica,sans-serif;
    background:#333;
}

#pageWrapper {
    min-width:48em;
    max-width:68em;
    width:95%;
    margin:0 auto;
    background:#FFF;
    border:solid #060;
    border-width:0 2px;
}

h1 {
    padding:10px 0 0 30px;
    background:#090 url(images/banner.jpg) no-repeat;
}

h1 span {
    position:relative;
    display:block;
    width:170px;
    padding:40px 0 50px;
    text-align:center;
    font:bold 32px/34px "trebuchet ms",helvetica,sans-serif;
    color:#EFD;
}

h1 span span {
    position:absolute;
    top:0;
    left:0;
    padding:0;
    height:158px;
    background:url(images/logo.png);
}

#mainMenu {
    text-align:right;
    margin-top:-1.7em;
    line-height:1.2em;
    padding:0 1em 0.5em;
    margin-bottom:1em;
    border-bottom:2px solid #060;
}

#mainMenu li {
    display:inline-block;
}

#mainMenu a {
    display:inline-block;
    text-decoration:none;
    font-weight:bold;
    padding:0 0.2em 0 0.5em;
    color:#EFD;
    border-left:2px solid #FFF;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
    color:#000;
}

#mainMenu li:first-child a {
    border-left:0;
}

#extras {
    float:left;
    display:inline;
    width:11em;
    min-width:180px;
    margin-left:1em;
    text-align:center;
}

#extras ul {
    list-style:none;
    margin-bottom:1em;
    text-align:left;
    border:1px solid #060;
}

#extras li {
    display:inline;
}

#extras li a {
    display:block;
    padding:0.2em 0.5em;
    font-weight:bold;
    text-decoration:none;
    color:#EFD;
    background:#090;
    border-style:solid;
    border-width:1px 0;
    border-color:#060;
}

#extras li a:active,
#extras li a:focus,
#extras li a:hover {
    color:#000;
    border-color:#8C8 #090 #000;
}

#extras .plate {
    display:block;
    margin:0 auto 1em;
    max-width:100%;
}

#content {
    overflow:hidden; /* prevent float de-indent/underwrap */
    zoom:1; /* trip haslayout, prevent float de-indent/underwrap legacy IE */
    padding:0 1em;
}

#content p {
    padding-bottom:1em;
}

#content h2 {
    padding-bottom:0.5em;
    font:bold 200%/120% "trebuchet ms",helvetica,sans-serif;
}

#profiles h3 {   
    padding:0.66em;
    font:bold 150%/120% "trebuchet ms",helvetica,sans-serif;
    color:#090;
    border-top:0.33em solid #CDA;
}

#profiles p {
    padding:0 1em 1em;
}

#profiles h3:first-child {
    padding-top:0;
    border:0;
}

#footer {
    clear:both; /* just in case */
    padding:1em;
    color:#EFD;
    background:#090;
    border-top:2px solid #060;
}

@[USER=124521]media[/USER] (max-width:48em) {

    #pageWrapper {
        min-width:256px;
        width:100%;
        border:0;
    }
   
    h1 {
        padding:0.25em 0.25em 1em;
    }
   
    h1 span span {
        display:none;
        background:none;
    }
   
    h1 span {
        display:block;
        width:auto;
        padding:0;
    }
   
    #mainMenu {
        text-align:center;
        padding:0 0.25em 0.5em;
    }
   
    #extras {
        float:none;
        margin:0;
    }
   
    #extras ul {
        text-align:center;
        border:0;
    }
   
    #extras li a {
        display:inline-block;
        margin-bottom:0.4em;
    }
   
    #content {
        padding:0 0.5em;
    }
   
    #footer {
        text-align:center;
    }
   
    #profiles {
        padding:0;
    }
   
}

@[USER=124521]media[/USER] (max-width:30em) {
    #footer span {
        display:block;
    }
}

Code (markup):

I put a copy live up on my server here:
http://www.cutcodedown.com/for_others/tonyAgosto/template.html

(don't worry about link mojo, that whole directory is behind a nofollow robots.txt). As with all my examples the directory:
http://www.cutcodedown.com/for_others/tonyAgosto/

Is wide open for easy access to the bits and pieces. Feel free to look around.

The redesign sheds a lot of weight inside <body>, but gains some back from the more complete/verbose <head>. It is half the CSS not counting the responsive layout, which brings it back up to around 80% the size.

Hope this helps, or at least gets you thinking on different approaches to doing things.

Click to expand...

Tony Agosto, Oct 22, 2013 IP

(You must log in or sign up to reply here.)

Log in or Sign up

Advertising (learn more)

Having a slight css problem in DW CS6

Tony Agosto Peon

deathshadow Acclaimed Member

deathshadow Acclaimed Member

Tony Agosto Peon

Useful Searches