nyuille Posted September 22, 2016 Share Posted September 22, 2016 Hi - I have two rows of elements 2 boxes on first row 3 boxes of second row in each box is an image, link underneath and then text underneath that where all 3 elements are grouped as a div. How do I get the image, link and text to align .. i am only getting link to expand to size of image by using padding, but its not perfect. I want them to match exactly. the problem is I am already setting width to a percentage in .box 1-5 level because I am floating the elements and need those floated and centered. Any help appreciated! <div class="row-1"> <div class="box-1"> <p> <img class="img-row-1" src="Residents1.jpg" /> </p> <p> <a class="link-row-1" href="Residents.html">RESIDENTS</a> </p> <p> text </p> </div> <div class="box-2"> <p> <img class="img-row-1" src="Businesses1.jpg" /> </p> <p><a class="link-row-1" href="Businesses.html">BUSINESSES</a> </p> <p> text </p> </div> </div> <div class="row-2"> <div class= "box-3"> <p> <img class="img-row-2" src="Governing-cropped-1024x688.jpg" /> </p> <p><a class="link-row-2" href="Businesses.html">GOVERNING</a> </p> <p> text </p> </div> <div class= "box-4"> <p> <img class="img-row-2" src="Recreating-1024x683.jpg" /> </p> <p><a class="link-row-2" href="Businesses.html">RECREATING</a> </p> <p> text </p> </div> <div class= "box-5"> <p> <img class="img-row-2" src="Getting-Around.jpg" /> </p> <p> <a class="link-row-2" href="Businesses.html">GETTING AROUND</a> </p> <p> text </p> </div> </div> Link to comment Share on other sites More sharing options...
dsonesuk Posted September 23, 2016 Share Posted September 23, 2016 (edited) I seemed have posted in another of your topc by mistake, oh well nevermind.You are using to many classes, that give identical style. You can reference the parent class or classes to apply styling to cascading child elements. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <style type="text/css"> .row_wrap {background-color: red;} .row img {width: 100%; height: auto; float: left;} .row > div > p, .row > div > div {padding: 0 15px; } .row p {background-color: orange;} .row p a {background-color: yellow; display: block;} .row > div > div p {background-color: green; } .row {overflow: hidden;} .row.two_col {} .row > div {float: left;} .two_col > div {width:50%;} .row.three_col {} .three_col > div {width:33.33%;} </style> </head> <body> <div class="row_wrap"> <div class="row two_col"> <div> <p> <img alt="" src="http://www.w3schools.com/w3css/img_fjords.jpg"> </p> <p> <a href="Residents.html">RESIDENTS</a> </p> <div> <p> text </p> </div> </div> <div> <p> <img alt="" src="http://www.w3schools.com/w3css/img_lights.jpg"> </p> <p><a href="Businesses.html">BUSINESSES</a> </p> <div> <p> text </p> </div> </div> </div> <div class="row three_col"> <div> <p> <img alt="" src="http://www.w3schools.com/w3css/img_mountains.jpg"> </p> <p><a href="Businesses.html">GOVERNING</a> </p> <div> <p> text </p> </div> </div> <div> <p> <img alt="" src="http://www.w3schools.com/w3css/img_forest.jpg"> </p> <p><a href="Businesses.html">RECREATING</a> </p> <div> <p> text </p> </div> </div> <div> <p> <img alt="" src="http://www.w3schools.com/w3css/img_fjords.jpg"> </p> <p> <a href="Businesses.html">GETTING AROUND</a> </p> <div> <p> text </p> </div> </div> </div> </div> </body> </html> A NOTE: to moderators, the mobile version of adding code by typing [ code ] does not work properly, it seem to have a limit of characters to use meaning you don't get all code when saving, also the option to edit is lost after a while now as well. Edited September 23, 2016 by dsonesuk 1 Link to comment Share on other sites More sharing options...
nyuille Posted September 23, 2016 Author Share Posted September 23, 2016 Your code is so good - thank you! I have a question for you; do you ever use the following for layout or would you use approach given above? display: -webkit-flex; Link to comment Share on other sites More sharing options...
dsonesuk Posted September 23, 2016 Share Posted September 23, 2016 That is specific for specific browsers chrome, safari older versions, you would probably have -moz- for firefox, -o- for opera as well, browsers that fully support it would use display: flex; and yes i have used it, but it is not fully supported in some browsers. Also if all images are same height I can't see a problem with above, but if different, display: flex; might be a better option, if you want captions at same level, with smaller height images vertically aligned in middle with a specific background colour. Link to comment Share on other sites More sharing options...
nyuille Posted September 23, 2016 Author Share Posted September 23, 2016 Thank you! Link to comment Share on other sites More sharing options...
nyuille Posted September 23, 2016 Author Share Posted September 23, 2016 Quick q - why did you wrap text in div? <div><p>text</p></div> Thanks Natalie Link to comment Share on other sites More sharing options...
dsonesuk Posted September 23, 2016 Share Posted September 23, 2016 Previous paragraph elements have child element to set background-color, by adding div the paragraph become element to set colour to, just remove div to see difference. Link to comment Share on other sites More sharing options...
nyuille Posted September 23, 2016 Author Share Posted September 23, 2016 yes, ok, i see! thank you! Link to comment Share on other sites More sharing options...
nyuille Posted September 23, 2016 Author Share Posted September 23, 2016 One other question about your code: .row > div > p, .row > div > div {padding: 0 15px; }.row p {background-color: orange;} You don't put > before p on second line. Is that optional? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 23, 2016 Share Posted September 23, 2016 1) .row > div > p, .row > div > div {padding: 0 15px; } Will apply padding to first direct child sibling paragraphs and also first direct div, of first direct child sibling div of parent element with class 'row'. 2) .row p {background-color: orange;} Will apply background-color to all paragraphs found within parent element with class 'row'. 3) .row p a {background-color: yellow; display: block;} Will apply background-color, and make inline anchor element within paragraph act as block element. 4) .row > div > div p {background-color: green; } Will apply background-color to paragraph, within a div element that is direct sibling of another direct sibling element of parent element with class 'row' overriding background-color set in (2) Link to comment Share on other sites More sharing options...
nyuille Posted September 23, 2016 Author Share Posted September 23, 2016 yes, I get it! Thank you so much for clarifying and your time. I really do appreciate it. Link to comment Share on other sites More sharing options...
nyuille Posted September 23, 2016 Author Share Posted September 23, 2016 Hi - Does it make sense to have this much syntax for styling links or can it be done more concisely? The main idea is to change the color on hover and active links to dark blue background and white text. Also, I had to have two different sets for two-col vs. three-col because I needed different padding inside the links box. .two-col a:link, .two-col a:visited { background-color: white; border: solid black 1px; color: rgb(0, 57, 90); display: block; padding: 14px 230px 14px 230px; text-decoration: none; } .two-col a:hover, .two-col a:active { background-color: rgb(0, 57, 90); border: solid black 1px; color: white; display: block; padding: 14px 230px 14px 230px; text-decoration: none; } .three-col a:link, .three-col a:visited { background-color: white; border: solid black 1px; color: rgb(0, 57, 90); display: block; padding: 14px 80px 14px 80px; text-align: center; text-decoration: none; } .three-col a:hover, .three-col a:active { background-color: rgb(0, 57, 90); border: solid black 1px; color: white; display: block; padding: 14px 80px 14px 80px; text-align: center; text-decoration: none; } Link to comment Share on other sites More sharing options...
dsonesuk Posted September 24, 2016 Share Posted September 24, 2016 Stop duplicating, if styling is applied to all go to higher parent selector to apply to all, only add styling to selector that changes to that specific :pseudo class, you will find there is no need to repeat the same styling for ALL, just for those that change from one :pseudo to another. Note also if styling uses all pseudo classes :link, :visited, :hover, :active you might as well use 'a' selector on its own, it will give the same result. Using my solution in post #2 /* where display:block is already applied */ .row p a {background-color: yellow; display: block;} /* if default styling for all links */ a{ text-decoration: none; } .row a {border: solid black 1px;} .row a:link, .row a vistited { background-color: white; color: rgb(0, 57, 90); } .two-col a{ padding: 14px 230px 14px 230px; } .three-col a { padding: 14px 80px 14px 80px; text-align: center; } .row a:hover, .row a:active { background-color: rgb(0, 57, 90); color: white; } Link to comment Share on other sites More sharing options...
nyuille Posted September 26, 2016 Author Share Posted September 26, 2016 yes, ok, i got it. thank you! 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