jeudi 23 juin 2016

Wrap button base on the link text?

I am trying to add buttons but I am not able to get the results I am looking for.

The following image is what I am trying to do but can not replicate:

enter image description here

and the results I get is the following:

enter image description here

Updated: my question by adding more of the css code that is being used.

Thank you all for your help.

  

 .img-banner{
	margin-left:auto;
	margin-right:auto;
	display:inline;
}

body{
	position:relative;
	background-color:white;
	margin: 0;
	padding: 0;
}

ul{
	list-style:none;
}

a{	
	color: white;
	text-decoration: none;
	font-family: Sherwood !important;
}

.navbar-buttons{
	padding-top:20px;
	padding-right:20px;
	text-align:right;
	list-style:none;
	margin:0 auto;
	overflow:hidden;
	<!---background-image: url(./img/Banner.jpg);--->
	width:100%;
}

#wrapper {
	width: 940px;
	height:100%;
	margin: 0 auto;
 }

 #banner-wrapper{
	display:block;
	padding:0;
	margin-left:auto;
	margin-right:auto;
	background:#FFF;
	background-image: url(./img/Banner.jpg);
	height:14.6%;
	padding-bottom:44px;
}

img.no-border{border: 0;}

.img-banner{
	margin-left:auto;
	margin-right:auto;
	display:block;
}

#sidebarleft{
	width: 30%;
	padding-top: 58px;
	padding-right: 20px;
	display:inline;
	float:left;
}

#sidebarleft ul.menu{
	list-style:none;
	padding:0;
	margin:10px 0 10px 15px;
}

.leftbuttons{
	background-image: url(./img/Button_1.jpg);
	background-repeat:no-repeat;
	padding:20px 20px;
}

.leftbuttons a{
	color:grey;
	vertical-align:center;
}

.aligntext{
	vertical-align:center;
	text-align:left;
}

#sidebarright{
	float:right;
	width: 30%;
	padding: 0; marign:0;
	padding-top: 20px;
}

img.buttonUlti{
	float:right;
	padding-top:20px;
	padding-bottom:15px;
	border-radius:18px;
}

.shiftRes{
	margin-left:27px;
	padding-top:40px;
}
<div id="sidebarleft">
  <h2>Departments</h2>
  <ul class="menu">
    <li class="leftbuttons"><a class="aligntext" href="Blah.cfm">BLAH</a>
    </li>
    <li class="leftbuttons"><a href="Blah.cfm?">BLAH</a>
    </li>
    <li class="leftbuttons"><a href="Blah.cfm">BLAH</a>
    </li>
    <li class="leftbuttons"><a href="Blah.cfm">Room</a>
    </li>
  </ul>
</div>

Aucun commentaire:

Enregistrer un commentaire