Jump to content

Alignment of Children elements


nyuille

Recommended Posts

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

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 by dsonesuk
  • Like 1
Link to comment
Share on other sites

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...