newcoder1010 Posted September 30, 2015 Share Posted September 30, 2015 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? Link to comment Share on other sites More sharing options...
davej Posted September 30, 2015 Share Posted September 30, 2015 I'm guessing you are talking about this page... http://realestatesdcmetroareas.com ...so you've already solved this problem. Link to comment Share on other sites More sharing options...
newcoder1010 Posted September 30, 2015 Author Share Posted September 30, 2015 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? Link to comment Share on other sites More sharing options...
davej Posted September 30, 2015 Share Posted September 30, 2015 Perhaps try something like this... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style> .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 .imgtitle{ position: absolute; vertical-align: middle; height:50px; line-height:50px; font-size:40px; font-weight: bold; background-color:red; color:black; top:50px; left:0; right:0; overflow:hidden; cursor:pointer;}</style></head><body><div class="field field-name-field-buying-a-home field-type-image field-label-hidden"> <div class="field-items"> <div class="field-item even"> <a href="/?q=node/3"><img typeof="foaf:Image" src="buying-a-home-a-home-reality-va.png" alt="img1" /> <div class="imgtitle">Buying a Home</div> </a> </div> </div></div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted September 30, 2015 Share Posted September 30, 2015 You have to basically do it as discussed here http://w3schools.invisionzone.com/index.php?showtopic=54074#entry297370 post#5 option 1, you wrap the image with container and make sure it uses position: relative; the text container will use position: absolute; and its position is determined by outer edges of parent image container. just use top position give background colour, and it will expand to content. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 30, 2015 Share Posted September 30, 2015 (edited) If the text is just going to be simple line of text without html for instance span paragraph elements, give the anchor link elements a title value on what you want to appear example <a class="" href="/?q=node/3" title="Buying a Home"><img width="400" height="193" alt="Buying a Home" src="http://realestatesdcmetroareas.com/sites/default/files/styles/buysellimage/public/buying-a-home-a-home-reality-va.png?itok=RKA3tlzx" typeof="foaf:Image"></a> over image then use .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.field-name-field-selling-a-home a:after, .field.field-name-field-buying-a-home a:after, .field.field-name-field-home-valuation a:after { background-color: red; color: white; content: " " attr(title); font-size: 1.3em; font-weight: bolder; left: 0; padding: 10px; position: absolute; right: 0; top: 52px; 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;} It will drag this value from anchor title attribute and use it for css content: placing it over the image. Also your class names are bit on the long side, and seem to be unique more like id attribute value than class attribute value. EDIT: also I noticed you are using fixed width for larger image extending it beyond its 50% parent container width, and crazy margins for side images, which seems to defeat the point of using bootstrap to make it a responsive website. Edited September 30, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
newcoder1010 Posted October 1, 2015 Author Share Posted October 1, 2015 (edited) 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. Edited October 1, 2015 by newcoder1010 Link to comment Share on other sites More sharing options...
newcoder1010 Posted October 1, 2015 Author Share Posted October 1, 2015 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. Link to comment Share on other sites More sharing options...
newcoder1010 Posted October 1, 2015 Author Share Posted October 1, 2015 (edited) 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;} Edited October 1, 2015 by newcoder1010 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 1, 2015 Share Posted October 1, 2015 (edited) because the label has to be within the anchor, since you not following the rules set out for the use of bootstrap the parent container is 50% of width available to it, but you are using fixed width for image that extends beyond this width, or below this width with three side images, so the label extends correctly to 50% width, if you minimize the browser to represent smaller device or even desktop it will cause overlapping to occur. EDIT: YOU CAN'T HAVE BLOCK ELEMENTS WITHIN A INLINE SPAN ELEMENT Edited October 1, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
newcoder1010 Posted October 1, 2015 Author Share Posted October 1, 2015 (edited) 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;} Edited October 1, 2015 by newcoder1010 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 1, 2015 Share Posted October 1, 2015 1 add/amend top: 50%; margin-top:-1em; 2 You are joking aren't you? the text in label is 'Selling a Home:' HOW do you think you should remove it? clue: it involves the delete key Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now