Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

CSS help, buttons

Posted on 2014-07-24
5
Medium Priority
?
124 Views
Last Modified: 2014-07-24
I have the attached css and html making 12 <li> buttons vertically.

Question 1: Is it b possible to make them show horizontally as shown on the attached image?

Question 2: Also, is it possible to include the attached image again as shown on the image (as a background image).

Thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="style/buttons.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="navcontainer">
        <ul class="leftButtons">
            <li class="current"><a href="Default2.aspx">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>
            <li><a href="#">11</a></li>
            <li><a href="#">12</a></li>
        </ul>
    </div>
    </form>
</body>
</html>

CSS:
#navcontainer ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#navcontainer li 
{ 
	margin: 0 0 .2em 0; 
}

#navcontainer a
{
	display: block;
	color: #FFFFFF;
	background-color: #003366;
	width: 5em;
	padding: .2em .8em;
	text-decoration: none;
}

#navcontainer a:hover
{
	background-color: #336699;
	color: #FFFFFF;
}

#navcontainer .current a:hover
{
	background-color: #123456; /*000000*/
	color: #FFFFFF;
	font-family:Arial, Helvetica, sans-serif
}

#navcontainer .current a, #navcontainer .current a:link
{
	display: block;
	color: #FFFFFF;
	background-color:#660000;
	width: 5em;
	padding: .2em .8em;
	text-decoration: none;
}

#container 
{
	width: 90%;
	margin: 10px auto 10px auto;
	background-color: #FFFFFF;
	color: #000000;
	border: 1px solid gray;
	line-height: 130%;
}
		
#top 
{
	padding: .5em;
	background-color: #DDDDDD;
	border-bottom: 1px solid gray;	
}
	
#top h1 
{
	margin: 0;
	padding: 0;
}
	
#leftnav 
{
	float: left;
	width: 140px;
	margin: 0;
	position:fixed;
}	

#content 
{
  margin-left: 160px;
  border-left: 1px solid gray;
  padding: 1em;
}
	
#footer 
{
	/*color: #777;*/
  clear: both;
  margin: 0;
  padding: .5em;
  color: #333;
  background-color: #DDDDDD;
  border-top: 1px solid gray;
}
	
#leftnav p 
{
	margin: 0 0 1em 0;
}

#content h2 
{
	margin: 0 0 .5em 0;
}

#content 
{
	max-width: 36em;
}	
	
#navcontainer 
{
	background-color: #FFFFFF;
	padding: 30px;
	border-style: solid;
	border-width: 0px;/*2px;*/
	border-color: #000000;
	width:70%;
}

Open in new window

buttons.png
Button.png
0
Comment
Question by:Mike Eghtebas
  • 3
  • 2
5 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40216172
1) http://jsbin.com/suzox/1
#navcontainer li 
{ 
	margin: 0 0 .2em 0; 
    display:inline-block;
}

Open in new window

2) just set it as a background image.  But you are better off using css buttons.  http://css3buttongenerator.com/
0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40216197
Using a css button is a great idea. Thanks for the tip.

BTW, how can I put the 12 buttons in two rows?

Do I need to break it down like
                                                                                                               v-- table (2 rows x 3 columns)
-----------------------------------------------------------------------------------------------------------------------------------
| [      1       ]  [      3       ]  [      5       ]  |   CSS button here      | [      7       ]  [      9       ]  [      11      ]  |  
--------------------------------------------------|                                    |-------------------------------------------------|
| [      2       ]  [      4       ]  [      6       ]  |                                     | [      8       ]  [      10      ]  [      12    ]  |  
-----------------------------------------------------------------------------------------------------------------------------------    
                                                                         ^-- rowspan="2"
Now, instead of one <ul> we need 4 <ul> tags.

What do you recomment?

Thanks again.

Mike
0
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 40216233
You are going to have to have to play with your widths.  Basically, I put each side into 1 of 3 columns.  I gave the left and right column the same class.  This will need some work on your part.  If you plan on making this responsive, I suggest using http://getbootstrap.com

http://jsbin.com/suzox/2/edit?html,css,output
.col1{
  width:23em;
  height:60px;
  float:left;
  margin-right:1em;
  background-color:red;
}
.col2{
  width:3em;
  height:60px;
  float:left;
  margin-right:10px;
  background-color:green;
}

#navcontainer ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#navcontainer li 
{ 
	margin: 0 0 .2em 0; 
    display:inline-block;
}

#navcontainer a
{
	display: block;
	color: #FFFFFF;
	background-color: #003366;
	width: 5em;
	padding: .2em .8em;
	text-decoration: none;
}

#navcontainer a:hover
{
	background-color: #336699;
	color: #FFFFFF;
}

#navcontainer .current a:hover
{
	background-color: #123456; /*000000*/
	color: #FFFFFF;
	font-family:Arial, Helvetica, sans-serif
}

#navcontainer .current a, #navcontainer .current a:link
{
	display: block;
	color: #FFFFFF;
	background-color:#660000;
	width: 5em;
	padding: .2em .8em;
	text-decoration: none;
}

#container 
{
	width: 90%;
	margin: 10px auto 10px auto;
	background-color: #FFFFFF;
	color: #000000;
	border: 1px solid gray;
	line-height: 130%;
}
		
#top 
{
	padding: .5em;
	background-color: #DDDDDD;
	border-bottom: 1px solid gray;	
}
	
#top h1 
{
	margin: 0;
	padding: 0;
}
	
#leftnav 
{
	float: left;
	width: 140px;
	margin: 0;
	position:fixed;
}	

#content 
{
  margin-left: 160px;
  border-left: 1px solid gray;
  padding: 1em;
}
	
#footer 
{
	/*color: #777;*/
  clear: both;
  margin: 0;
  padding: .5em;
  color: #333;
  background-color: #DDDDDD;
  border-top: 1px solid gray;
}
	
#leftnav p 
{
	margin: 0 0 1em 0;
}

#content h2 
{
	margin: 0 0 .5em 0;
}

#content 
{
	max-width: 36em;
}	
	
#navcontainer 
{
	background-color: purple;
	padding: 30px;
	border-style: solid;
	border-width: 0px;/*2px;*/
	border-color: #000000;
	/*width:70%;*/
    width:55em;
}

Open in new window

0
 
LVL 34

Author Closing Comment

by:Mike Eghtebas
ID: 40216249
Thank you for the great help. Meanwhile I was making table version of it but your solution using <div> tags is much better.

Regards,

Mike
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40216256
Good choice!!  If you are making this static, I would put the widths in pixels.  It will be easier.  But do check out the css grid from bootstrap.  Once you get the hang of it, it will be very easy to  make columns that are responsive.
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question