Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 221
  • Last Modified:

Need help in code

I am trying to make a horizontal flex box but i dont know where i made a mistake as its not showing right

Thanks.
flex.html
0
mustish1
Asked:
mustish1
  • 14
  • 7
1 Solution
 
GaryCommented:
<link href = 'http://fonts.googleapis.com/css?family='Rosario' rel = 'sytlesheet' type = 'text/css'>

Should be

 <link href = 'http://fonts.googleapis.com/css?family=Rosario' rel = 'sytlesheet' type = 'text/css'>

And you have flex box declared multiple times - your code should be

<html>
<head>
  <meta charset = "utf-8">
    <title>Flexible Box Layout Model</title>
      <link href = 'http://fonts.googleapis.com/css?family=Rosario' rel = 'sytlesheet' type = 'text/css'>
      <style type = "text/css">
           .flexbox
               {
                 width: 600px;
                 height: 420px;
                 display: -webkit-box;
                 display: box;
                 -webkit-box-orient: horizontal;
                 box-orient: horizontal;
                }
               .flexbox  > div
                 {
                     -webkit-transition: Is ease-out;
                     transition: Is ease-out;
                    -webkit-border-radius: 10px;
                    border-radius: 10px;
                    border: 2px solid black;
                    width: 120px;
                    margin: 10px -10px 10px 0px;
                    padding: 20px 20px 20px 20px;
                    box-shadow: 10px 10px 10px dimgrey;
                 }
               .flexbox > div:nth-child(1) {background-color: lightgrey;  }
               .flexbox > div:nth-child(2) {background-color: lightgrey;  }
               .flexbox>  div:nth-child(3) {background-color: lightgrey;  }
               .flexbox>  div:nth-child(4) {background-color: lightgrey;  }

              .flexbox > div:hover  {
                     width:  200px; color: white; font-weight: bold;  }
              .flexbox > div:nth-child(1): hover   {background-color:  royalblue;  }
              .flexbox > div:nth-child(2): hover   {background-color:  crimson;  }
              .flexbox > div:nth-child(3): hover   {background-color:  crimson;  }
              .flexbox > div:nth-child(4): hover   {background-color:  darkgreen;  }
              p { height: 250px; overflow:  hidden;  font-family: "Rasario"  }
      </style>
   </head>
   <body>
      <div class = "flexbox">
        <div img src = "GPP.png" alt = "bla bla bla bla">
        <p> jfhdsal fdlksjfhlsdka hflksadhflk sadhfkljsahdflkhs daklfhsadklfh dsklhf kldsahfklsadh flkshd </p></div>

        <div img src = "CPE.png" alt = "bla bla bla bla">
        <p> jfhdsal fdlksjfhlsdka hflksadhflk sadhfkljsahdflkhs daklfhsadklfh dsklhf kldsahfklsadh flkshd </p></div>


        <div img src = "GPP.png" alt = "bla bla bla bla">
        <p> jfhdsal fdlksjfhlsdka hflksadhflk sadhfkljsahdflkhs daklfhsadklfh dsklhf kldsahfklsadh flkshd </p></div>

        <div img src = "SEO.png" alt = "bla bla bla bla">
        <p> jfhdsal fdlksjfhlsdka hflksadhflk sadhfkljsahdflkhs daklfhsadklfh dsklhf kldsahfklsadh flkshd </p></div>
    </div>
   </body>
</html>

Open in new window

0
 
mustish1Author Commented:
ok thanks. But it still not showing all 4 images files.
0
 
mustish1Author Commented:
This is what it showing
outpt.png
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
mustish1Author Commented:
All 4 image files are not showing in their
0
 
GaryCommented:
This is wrong
<div img src = "GPP.png" alt = "bla bla bla bla">

it should be
<div>
<img src = "GPP.png" alt = "bla bla bla bla">


and the same for the rest of them. So each block should look like this
        <div>
        <img src = "CPE.png" alt = "bla bla bla bla">
        <p> jfhdsal fdlksjfhlsdka hflksadhflk sadhfkljsahdflkhs daklfhsadklfh dsklhf kldsahfklsadh flkshd </p></div>

Open in new window

0
 
mustish1Author Commented:
Thanks it works. Can you please tell me what i change in the code so that it looks like that?
Page1.jpg
0
 
GaryCommented:
Add to the end of your css

.flexbox div {
     margin-top:-20px;
}
0
 
mustish1Author Commented:
nothing change

              .flexbox > div:nth-child(4): hover   {background-color:  darkgreen;  }
              p { height: 250px; overflow:  hidden;  font-family: "Rasario"  }

             .flexbox div {
                     margin-top:-20px; }
      </style>
0
 
mustish1Author Commented:
oops sorry yes it works
0
 
mustish1Author Commented:
how to i change the size as it too long? Thanks
0
 
GaryCommented:
That should be

.flexbox div:not(:first-child) {
     margin-top:-20px;
}



What do you mean too long?
0
 
mustish1Author Commented:
Its not showing in one page
long.png
0
 
mustish1Author Commented:
Add this line but nothing change. It still more than one page.

              .flexbox > div:nth-child(4): hover   {background-color:  darkgreen;  }
              p { height: 250px; overflow:  hidden;  font-family: "Rasario"  }

             .flexbox div {
                     margin-top:-20px; }
            .flexbox div:not(:first-child) {
                     margin-top:-20px;
}
0
 
GaryCommented:
Change the height in
p { height: 250px; overflow:  hidden;  font-family: "Rasario"  }
0
 
GaryCommented:
Remove
            .flexbox div {
                     margin-top:-20px; }
0
 
mustish1Author Commented:
Thanks a lot. Just one more thing. How to move the picture to the left and the text to the right.
0
 
GaryCommented:
Try this
<html>
<head>
  <meta charset="utf-8">
    <title>Flexible Box Layout Model</title>
      <link href='http://fonts.googleapis.com/css?family=Rosario' rel='sytlesheet' type='text/css'>
      <style type="text/css">
           .flexbox
               {
                 width: 600px;
                 display: -webkit-box;
                 display: box;
                 -webkit-box-orient: horizontal;
                 box-orient: horizontal;
                }
               .flexbox  > div
                 {
                     -webkit-transition: Is ease-out;
                     transition: Is ease-out;
                    -webkit-border-radius: 10px;
                    border-radius: 10px;
                    border: 2px solid black;
                    width: 120px;
                    margin: 10px -10px 10px 0px;
                    padding: 20px 20px 20px 20px;
                    box-shadow: 10px 10px 10px dimgrey;
                 }
               .flexbox > div {background-color: lightgrey;  }


              .flexbox > div:hover  {
                     width:  600px; color: white; font-weight: bold;  }
              .flexbox > div:nth-child(1): hover   {background-color:  royalblue;  }
              .flexbox > div:nth-child(2): hover   {background-color:  crimson;  }
              .flexbox > div:nth-child(3): hover   {background-color:  crimson;  }
              .flexbox > div:nth-child(4): hover   {background-color:  darkgreen;  }

.flexbox div:not(:first-child) {
margin-top:-15px;
}
.flexbox div {
font-family: "Rasario";
max-height:100px;
overflow: hidden;
vertical-align :top;
}
.flexbox img {
float:left;
margin-right:20px
}

</style>

   </head>
   <body>
      <div class="flexbox">
        <div>
	<p><img src="GPP.png" alt="bla bla bla bla">
        jfhdsal fdlksjfhlsdka hflksadhflk sadhfkljsahdflkhs daklfhsadklfh dsklhf kldsahfklsadh flkshd</p></div>

        <div><p><img src="CPE.png" alt="bla bla bla bla">
        jfhdsal fdlksjfhlsdka hflksadhflk sadhfkljsahdflkhs daklfhsadklfh dsklhf kldsahfklsadh flkshd</p></div>


        <div><p><img src="GPP.png" alt="bla bla bla bla">
        jfhdsal fdlksjfhlsdka hflksadhflk sadhfkljsahdflkhs daklfhsadklfh dsklhf kldsahfklsadh flkshd</p></div>

        <div><p><img src="SEO.png" alt="bla bla bla bla">
        jfhdsal fdlksjfhlsdka hflksadhflk sadhfkljsahdflkhs daklfhsadklfh dsklhf kldsahfklsadh flkshd</p></div>
    </div>
   </body>
</html>

Open in new window

0
 
mustish1Author Commented:
Thank You very much Sir.
0
 
mustish1Author Commented:
Where i change in the code just to remove this mouse over. I just want to show the text without using mouse over on the picture. Thanks
0
 
mustish1Author Commented:
.flexbox > div:nth-child(1): nothover  {background-color:  royalblue;  }
nothover. it dont work
0
 
mustish1Author Commented:
I figure it out thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 14
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now