?
Solved

CSS help, buttons

Posted on 2014-07-24
5
Medium Priority
?
120 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 53

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 53

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 53

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

WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

770 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