Solved

CSS help, buttons

Posted on 2014-07-24
5
119 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 500 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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…

707 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