newcoder1010

Hi, I have the below code which works. .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus { color: #ffffff; Font-weight: bold; background-color: #191970; } .navbar-default .navbar-nav>li>a { color: blue; Font-weight: bold; background-color: red; } I like to make background color red when I hover over the menu links. Below code works for active link only. I am not sure how can I set background red for active and non active links. .navbar-default .navbar-nav>.active>a:hover { color: #ffffff; Font-weight: bold; background-color: red; } Can you please help? Thank you.

Hi, I have the below code is working. Only thing I would like to do is to replace all the images with color codes. How can I do it? Thank you. background: url("files/E6E6FA.png") no-repeat left top/100% .5%, url("files/191970.png") no-repeat left top/100% 1.5%,url("files/FFFFFF.png") no-repeat left top/100% 3.5%;

Hello, I have this html code. I simply like to say if the menu item is active, make the menu item background color: blue. If not active, make the background color of the menu item white. How can I call the menu items? HTML: <div class="navbar-collapse collapse"> <nav role="navigation"> <ul class="menu nav navbar-nav"><li class="first leaf active-trail active"><a href="/?q=node/49" class="active-trail active">Home</a></li><li class="leaf active"><a href="/" class="active">Home</a></li><li class="last leaf"><a href="/?q=node/16">Plan an Event</a></li></ul> </nav></div> CSS: I am not sure how to write the css so it can point to the active and inactive menu items. .navbar-collapse .active {background-color: blue; color: white; } .navbar-collapse {background-color: white; color: blue;} Can you please help?

It worked. Thanks.

I did look at the http://www.w3schools.com/cssref/css3_pr_background-size.asp. I could not figure out how to add the 2nd image in the bottom? The tutorial is only showing with one image. If you could help.

I made some progress. change background-size t0 100% 50% for the first image. How can I do the second part?

It worked. Thanks. Because it worked, it led me to another question. I have two images. I like to see image1 as 100% full width of the screen but 50 % top of the screen. The other image takes 100 % full width of the screen and bottom 50% of the screen. How can I update my below css? .html {background-image: url("sss.jpg");background-repeat: no-repeat;background-size: 100% 100%;}

Hello, I have the below code. I like to make it 100 % full screen as background without repeating. It does not repeat. that's great but How can I make it full screen? I did google search but still confused. .html {background-image: url("sss.jpg");background-repeat: no-repeat;width: 100%;} Can you please help?

Thank you. I did try to place the label within anchor and I could not do it. After that, I was playing with the css and I got it work without know why it worked. Below code is so far doing what I wanted. Two requests I have: (1) How to move the label in the center for each image. I like to keep the background color width same just move the label to center. (2) How to remove the colon( : )at the end of each label. .field-name-field-buying-a-home { position: relative; border: 10px solid #A52A2A; width: 400px; height: 193px; overflow:hidden; border-top-left-radius: 2em; border-top-right-radius: 2em; margin-bottom: 10px; margin-left: 150px;}.field-name-field-buying-a-home .field-label{ background-color: #A52A2A; color: white; font-size: 1.8em; font-weight: bolder; left: 0; padding: 2px; position: absolute; right: 0; top: 25px; z-index: 9999; opacity:.9;}.field-name-field-selling-a-home { position: relative; border: 10px solid #A52A2A; width: 400px; height: 193px; overflow:hidden; border-top-left-radius: 2em; border-top-right-radius: 2em; margin-bottom: 10px; margin-left: 150px;*}.field-name-field-selling-a-home .field-label{ background-color: #A52A2A; color: white; font-size: 1.8em; font-weight: bolder; left: 0; padding: 2px; position: absolute; right: 0; top: 25px; z-index: 9999; opacity:.9;}.field-name-field-home-valuation { position: relative; border: 10px solid #A52A2A; padding:5px; width: 400px; height: 193px; overflow:hidden; border-top-left-radius: 2em; border-top-right-radius: 2em; margin-bottom: 10px; margin-left: 150px;}.field-name-field-home-valuation .field-label{ background-color: #A52A2A; color: white; font-size: 1.8em; font-weight: bolder; left: 0; padding: 2px; position: absolute; right: 0; top: 25px; z-index: 9999; opacity:.9;}

I used the other code from dsonesuk. It worked but the label background color is not inside the image. Everything else is good now. .field-name-field-buying-a-home a, .field-name-field-selling-a-home a, .field-name-field-home-valuation a { float: right; position: relative;}.field-name-field-buying-a-home .field-label { position: absolute; background-color: red; color: white; font-size: 1.3em; font-weight: bolder; left: 0; padding: 10px; position: absolute; right: 0; top: 52px; z-index: 9999;}.field.field-name-field-selling-a-home .field-label { background-color: red; color: white; font-size: 1.3em; font-weight: bolder; left: 0; padding: 10px; position: absolute; right: 0; top: 250px; z-index: 9999;}.field.field-name-field-home-valuation .field-label { background-color: red; color: white; font-size: 1.3em; font-weight: bolder; left: 0; padding: 10px; position: absolute; right: 0; top: 430px; z-index: 9999;}.field-name-field-buying-a-home img, .field-name-field-selling-a-home img, .field-name-field-home-valuation img {margin-left: auto;margin-bottom: 10px;}

I made some progress by changing the top property values for selling and home valuation classes. For some reason, browsers are not reading the two classes: .field-name-field-selling-a-home .field-name-field-home-valuation My request is to place each label on top of each image at the exact location. That means, all labels should display at the same location on each image.

I have 3 fields on the right side of the page: Buying a home, Selling a Home, Home Valuation. I just inspected the page in google chrome. Below is the html from google chrome. <span class="col-sm-6 ">// Field1 <div class="field field-name-field-buying-a-home field-type-image field-label-above"> <div class="field-label">Buying a Home: </div> <div class="field-items"> <div class="field-item even"> <a href="/?q=node/3"><img typeof="foaf:Image" src="http://realestatesdcmetroareas.com/sites/default/files/styles/buysellimage/public/buying-a-home-a-home-reality.png?itok=fNu_SLew" width="400" height="193" alt=""></a></div></div></div>// Field2<div class="field field-name-field-selling-a-home field-type-image field-label-above"><div class="field-label">Selling a Home: </div><div class="field-items"><div class="field-item even"><a href="/?q=node/4"><img typeof="foaf:Image" src="http://realestatesdcmetroareas.com/sites/default/files/styles/buysellimage/public/selling-a-home-va-a-home-reality.jpg?itok=310q4ygf" width="400" height="179" alt=""></a></div></div></div>// Field3<div class="field field-name-field-home-valuation field-type-image field-label-above"><div class="field-label">Home Valuation: </div><div class="field-items"><div class="field-item even"><a href="/?q=node/19"><img typeof="foaf:Image" src="http://realestatesdcmetroareas.com/sites/default/files/styles/buysellimage/public/home-valuation-a-home-reality-va.png?itok=T7LnJjve" width="400" height="175" alt=""></a></div></div></div> </span> I just added the below CSS and it is working fine for buying a home field. .field-name-field-buying-a-home{ position: relative; border: 3px solid red; width: 400px; height: 193px; overflow:hidden; border-top-left-radius: 2em; border-top-right-radius: 2em; margin-bottom: 10px; margin-left: 150px;}.field-name-field-buying-a-home .field-label{ position: absolute; vertical-align: middle; height:45px; line-height:50px; font-size:30px; font-weight: bold; background-color:#A52A2A; color:white; font-weight:bold; top:50px; left:0; right:0; overflow:hidden; cursor:pointer;} Then I did the same for other two fields as below for css: .field-name-field-selling-a-home{ position: relative; border: 3px solid red; width: 400px; height: 193px; overflow:hidden; border-top-left-radius: 2em; border-top-right-radius: 2em; margin-bottom: 10px; margin-left: 150px;}.field-name-field-selling-a-home .field-label{ position: absolute; vertical-align: middle; height:45px; line-height:50px; font-size:30px; font-weight: bold; background-color:#A52A2A; color:white; font-weight:bold; top:50px; left:0; right:0; overflow:hidden; cursor:pointer;} .field-name-field-home-valuation{ position: relative; border: 3px solid red; width: 400px; height: 193px; overflow:hidden; border-top-left-radius: 2em; border-top-right-radius: 2em; margin-bottom: 10px; margin-left: 150px;} .field-name-field-home-valuation .field-label{ position: absolute; vertical-align: middle; height:45px; line-height:50px; font-size:30px; font-weight: bold; background-color:#A52A2A; color:white; font-weight:bold; top:50px; left:0; right:0; overflow:hidden; cursor:pointer;} Now, labels are overlapping. I simply like to see the image same location with the same margin. Just like to put each label on top of each image. I greatly appreciate your help. I really want to solve this problem with your help. Thanks.

Problem is not fixed. I just created an image with the link name. That means I put the label "Buying home" manually on the image. Instead, I like to put the label on the image using CSS. Can you please help?

Hello, My site has an image link. People can see the image. When they click the image, another page displays. It is working fine. In addition, I like to add a text "Buying a Home" with red background. So, on the image "Buying a Home" also will display with red background. I have the below class and details: .field-name-field-buying-a-home img{ border-top-left-radius: 2em; border-top-right-radius: 2em; margin-bottom: 10px; margin-left: 150px;} How to edit the above css to meet my requirements?

Hi, In my form, I have four fields. How can I keep the labels and fields aligned straight? Now labels are aligned but not the fields. I simply like to push these four fields to right and aligned straight. Fields are : Year Built * Number of Bedrooms * Number of Bathrooms * Number of Fireplaces Class names are in the order: Valuation_Built_R, Valuation_NumberOfBedrooms_R, Valuation_NumberofBedrooms_R, Valuation_NumberofFire_R Each class name is a wrapper class for each field and label. My link: http://realestatesdcmetroareas.com/?q=node/19 Thank you.

Thanks. It worked.

.navbar-default .navbar-nav>li>a { color: #8B0000; font-weight:bold; padding: 0 10px; float:left; border-style: solid; border-width: 0px; margin-right:10px;}.navbar-default .navbar-nav>li>a:after {margin:10px; content: " | ";}.navbar-default .navbar-nav>li>a:last-child:after { content: "";} When I added the css, all the vertical bars are gone.

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav > .active>a:hover, .navbar-default .navbar-nav>.active>a:focus { /* color: #555; background-color: #e7e7e7;*/ color: white; background-color: #8B0000; font-weight:bold;} I made some progress. If you visit my page, you will notice that when a link is active, I see the background color is under link name and the separator. How to put the background color under link name only and how to remove the last separator?

.navbar-default .navbar-nav>li>a:after { /* color: #777;*/ color: #8B0000; background-color: white; font-weight:bold; padding: 0 10px; float:left; border-style: solid; border-width: 1px; content: " | ";} I did place your code with other CSS and the main menu links don't look right. I simple like to place the separator after each link except the last link. http://realestatesdcmetroareas.com/ Thanks.

Hello, I like to put a separator ( | ) in color and bold. Below code does not put the separator. How can I place a separator between the a links in color and bold? .navbar-default .navbar-nav>li>a { content: " | "; } Thanks.

I am using drupal-bootstrap theme. I tried your code it did not do anything. Image size remains same.

Hello, I have the below webform I like to place in the center of the page. How can I do it? I have searched online and I could not get the help. .webform-client-form-16 { float: center; position: relative; Thanks.

<div class="container"> <div class="navbar-header"> <a class="logo navbar-btn pull-left" href="/" title="Home"> <img src="http://xxx.com/sites/default/files/Charter.png" alt="Home"> </a> </div></div>

Hi, I have the below code for desktop version: .navbar .logo { margin-right: -15px; padding-left: 15px; padding-right: 15px;} When I view the site in mobile, I want to make the logo 100% width. So, logo takes the entire screen. @media only screen and (max-width: 500px) { .navbar .logo { width:200%; margin: 0px; padding: 0px;} } It still does not work in mobile. Logo does not take entire screen. Can you please help?

.description {color:red;} If I just use above code, it works. Not the other one I mentioned before. I did press F12 and I am not able to understand the other CSS rules.