Deliciously Blue

» Tue Sep 22, 2015 5:48 pm

Hi, all

I wondered if there were any web design experts in our midst who might be able to help me with a problem?

I downloaded a free stylesheet to design a page in Notepad (just opening the sample HTML file in Notepad and changing the text) and so far it's working out fine. However, I really need the menu bar to have drop down menus, particularly on link 3, link 4 and link 5.

Can anyone help me with this, please?

Here's the style sheet code:

Spoiler

/**************** body and tag styles ****************/	body {	  margin-top: 0px;	  	  margin-bottom: 30px;	  }	#container {	  width: 750px;	  margin: 0 auto;	  font-family: Verdana, Arial, Helvetica, sans-serif;	  font-size: 11px;	  line-height: 1.6em;	  color: #666666;	  background-color: #FFFFFF;	  }	  	#container2 {	  width: 746px;	  margin: 0 auto;	  font-family: Verdana, Arial, Helvetica, sans-serif;	  font-size: 11px;	  line-height: 1.6em;	  color: #666666;	  background-color: #FFFFFF;	  border-bottom: 2px solid #2763A5;	  }			h1 {	  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;	  font-weight: normal;	  font-size: 32px;	  color: #6DA6E2;	  margin-bottom: 30px;	  background-color: #FFFFFF;	  }			h2 {	  color: #666666;	  font-size: 16px;	  font-family: Arial, Helvetica, sans-serif;	  background-color: #FFFFFF;	  }			a {	  color: #6DA6E2;	  background-color: #FFFFFF;	  text-decoration: none;	  font-weight: bold;	  }	a:hover {	  background-color: #FFFFFF;	  color: inherit;	  font-weight: bold;	  text-decoration: underline;	  }/**************** images styles ****************/			a img{	  border: none;	  }	img.left,img.center,img.right {	  padding: 4px;	  border: 1px solid #a0a0a0;	  }	img.left {	  float: left;	  margin: 0 12px 5px 0;	  }	img.center {	  display: block;	  margin: 0 auto 5px auto;	  }	img.right {	  float: right;	  margin: 0 0 5px 12px;	  }/**************** form styles ****************/	form {	  float:right;	  font-size: 9px;	  }			input {	  background-color: #FFFFFF;	  color: #999999;	  border: 1px solid #2763A5;	  font-size: 11px;	  padding: 3px;	  }			.button {	  padding: 2px;	  background-color: #6DA6E2;	  color: #FFFFFF;	  border: 1px solid #2763A5;	  font-size: 11px;	  }/**************** header styles ****************/	#header {	  width: 750px;	  border: 0px	  padding-bottom: 10px;	  padding-top: 10px;	  clear: both;	  }	#header p { 	  margin-top: -20px;	  margin-left: 30px;	  color: #999999;	  }/**************** menu styles ****************/    #tabs10 {      float:left;      width:750px;      font-size:93%;	  padding-bottom: 1px;	  border-bottom:4px solid #2763A5;      line-height:normal;      }    #tabs10 ul {	  margin:0;	  padding:10px 10px 0 50px;	  list-style:none;      }    #tabs10 li {      display:inline;      margin:0;      padding:0;      }    #tabs10 a {      float:left;      background:url("tableft10.gif") no-repeat left top;      margin:0;      padding:0 0 0 4px;      text-decoration:none;      }    #tabs10 a span {      float:left;      display:block;      background:url("tabright10.gif") no-repeat right top;      padding:5px 15px 4px 6px;      color:#FFF;      }    #tabs10 a span {	  float:none;	  }    #tabs10 a:hover {      background-position:0% -42px;      }    #tabs10 a:hover span {      background-position:100% -42px;      }/**************** content styles ****************/	#content {	  width: 520px;	  padding-left: 10px;	  padding-right: 10px;	  padding-top: 10px;	  float: left;	  }			#content p {	  padding-bottom: 10px;	  border-bottom: 1px solid #DDDDDD;	  }	  /**************** sidebar styles ****************/	#sidebar {	  width: 175px;	  padding-left: 21px;	  padding-right: 10px;	  padding-top: 10px;	  float: right;	  }			#sidebar p {	  padding-bottom: 10px;	  border-bottom: 1px solid #DDDDDD;	  }	  /**************** footer styles ****************/	#footer {	  margin-top: 15px;	  padding-top: 0px;	  padding-bottom: 0px;	  padding-left: 2px;	  padding-right: 2px;	  clear: both;	  width: 742px;	  background-color:#2763A5;	  }			#footer p {	  color:#FFFFFF;	  padding: 5px;	  text-align: center;	  }			#footer p a {	  color: #FFFFFF;	  background-color:#2763A5;	  font-weight:100;	  border-bottom: 1px dotted #FFFFFF;	  }			#footer p a:hover {	  color: #FFFFFF;	  text-decoration: none;	  border-top: 1px dotted #FFFFFF;	  border-bottom: 0px dotted #FFFFFF;	  }

and here's the HTML

Spoiler

Deliciously Blue
Deliciously Blue
so tasty it hurts

Home
Link 2
Link 3
Link 4
Link 5
Link 6
Link 7

Here is the Main Content
Well, I don't have too much to say about this template. It was heavily inspired by "Leaves" by "Anthonyy". I also used a menu that I found in the Designologue. So really, I didn't do much here, but it was my first submitted template and I am quite happy with it. I believe this thing is standards compliant too.

Now I also added some image classes to position your nifty photos, so go ahead and have yourself a merry little time. There is a left one, a right one, and guess what? A center one!

Quisque viverra, eros sed imperdiet iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est.

Quisque facilisis
Aenean eros arcu, condimentum nec, dapibus ut, tincidunt sit amet, urna. Quisque viverra, eros sed imperdiet iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est. Vestibulum velit sem, faucibus cursus, dapibus vestibulum, pellentesque et, urna. Donec luctus. Donec lectus. Aliquam eget eros facilisis tortor feugiat sollicitudin. Integer lobortis vulputate sapien. Sed iaculis erat ac nunc.

Aenean eros arcu, condimentum nec, dapibus ut, tincidunt sit amet, urna. Quisque viverra, eros sed imperdiet iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est. Vestibulum velit sem, faucibus cursus, dapibus vestibulum, pellentesque et, urna. Donec luctus. Donec lectus. Aliquam eget eros facilisis tortor feugiat sollicitudin. Integer lobortis vulputate sapien. Sed iaculis erat ac nunc.
Fusce varius
Aenean eros arcu, condimentum nec, dapibus ut, tincidunt sit amet, urna. Quisque viverra, eros sed imperdiet iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est. Vestibulum velit sem, faucibus cursus, dapibus vestibulum, pellentesque et, urna. Donec luctus. Donec lectus. Aliquam eget eros facilisis tortor feugiat sollicitudin. Integer lobortis vulputate sapien. Sed iaculis erat ac nunc.

Sidebar
This is a little tidbit for sidebar content. This whole column could be used for whatever kind of purpose: news, pics, etc.
Aenean eros arcu, condimentum nec, dapibus ut, tincidunt sit amet, urna. Quisque viverra, eros sed imperdiet iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est.
Aenean eros arcu, condimentum nec, dapibus ut, tincidunt sit amet, urna. Quisque viverra, eros sed imperdiet iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est.

This is the original download page, with example of the layout
http://www.free-css.com/free-css-templates/page55/deliciously-blue

» Tue Sep 22, 2015 9:28 pm

Something like this?

Menu Markup:

Spoiler

          Home
      Link 2
              Link 3                  Sub-Link 1
          Sub-Link 2
        
      
              Link 4                  Sub-Link 3
          Sub-Link 4
        
      
              Link 5                  Sub-Link 5
          Sub-Link 6
        
      
      Link 6
      Link 7

Menu CSS:

Spoiler

/**************** menu styles ****************/  #tabs10 {    float:left;    width:750px;    font-size:93%;    padding-bottom: 1px;    border-bottom:4px solid #2763A5;    line-height:normal;  }  #tabs10 ul {    text-align: left;    display: inline;    margin: 0;    padding: 15px 4px 17px 0;    list-style: none;  }  #tabs10 ul li {    font: bold 12px/18px sans-serif;    display: inline-block;    margin-right: -4px;    position: relative;    padding: 15px 20px;    background: #fff;    cursor: pointer;    -webkit-transition: all 0.2s;    -moz-transition: all 0.2s;    -ms-transition: all 0.2s;    -o-transition: all 0.2s;    transition: all 0.2s;  }  #tabs10 a {    background:url("tableft10.gif") no-repeat left top;    margin:0;    padding:0 0 0 4px;    text-decoration:none;  }  #tabs10 a span {    background:url("tabright10.gif") no-repeat right top;    padding:5px 15px 4px 6px;    color:#FFF;  }  #tabs10 ul li ul {    padding: 0;    position: absolute;    top: 48px;    left: 0;    width: 150px;    -webkit-box-shadow: none;    -moz-box-shadow: none;    box-shadow: none;    display: none;    opacity: 0;    visibility: hidden;    -webkit-transiton: opacity 0.2s;    -moz-transition: opacity 0.2s;    -ms-transition: opacity 0.2s;    -o-transition: opacity 0.2s;    -transition: opacity 0.2s;  }  #tabs10 ul li ul li {    background: #555;    display: block;    color: #fff;    text-shadow: 0 -1px 0 #000;  }  #tabs10 ul li ul li:hover { background: #666; }   #tabs10 ul li:hover ul {    display: block;    opacity: 1;    visibility: visible;  }

» Tue Sep 22, 2015 10:21 am

This site details pretty well creating a menu bar: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menuIt's the base I use for most menus I've created. I prefer a purely CSS menu to a javascript menu :smile:

» Tue Sep 22, 2015 8:46 am

Thank you! Yes, that works. Needs a bit of prettying up, but the function is fine. :icecream:

Thanks, very helpful :smile:

» Tue Sep 22, 2015 10:50 am

Yeah, it's usually better to try to avoid using Javascript whenever possible to achieve simple effects. That said, a complete version of this type of functionality would include some Javascript loaded conditionally (when an old browser is detected) to support old browsers that don't support CSS 3 and don't have great support for some CSS 2 features.

» Tue Sep 22, 2015 12:09 pm

I prefer redirecting such old browsers to a page offering download links to modern browsers :teehee:

» Tue Sep 22, 2015 11:28 am

Well, thank you all. I just modified the code Softnerd posted and it all looks lovely :smile:

» Tue Sep 22, 2015 2:47 pm

Nice! Yeah, that was a quick-and-dirty example. I didn't have the images you were using for backgrounds, so I didn't bother trying to make it look nice.

Help (please!) - does anyone know about stylesheets?

Deliciously Blue

Here is the Main Content

Quisque facilisis

Fusce varius

Sidebar