Solved

Need help in code

Posted on 2014-01-18
21
208 Views
Last Modified: 2014-01-19
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
Comment
Question by:mustish1
  • 14
  • 7
21 Comments
 
LVL 58

Expert Comment

by:Gary
Comment Utility
<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
 

Author Comment

by:mustish1
Comment Utility
ok thanks. But it still not showing all 4 images files.
0
 

Author Comment

by:mustish1
Comment Utility
This is what it showing
outpt.png
0
 

Author Comment

by:mustish1
Comment Utility
All 4 image files are not showing in their
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
 

Author Comment

by:mustish1
Comment Utility
Thanks it works. Can you please tell me what i change in the code so that it looks like that?
Page1.jpg
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Add to the end of your css

.flexbox div {
     margin-top:-20px;
}
0
 

Author Comment

by:mustish1
Comment Utility
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
 

Author Comment

by:mustish1
Comment Utility
oops sorry yes it works
0
 

Author Comment

by:mustish1
Comment Utility
how to i change the size as it too long? Thanks
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 58

Expert Comment

by:Gary
Comment Utility
That should be

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



What do you mean too long?
0
 

Author Comment

by:mustish1
Comment Utility
Its not showing in one page
long.png
0
 

Author Comment

by:mustish1
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Change the height in
p { height: 250px; overflow:  hidden;  font-family: "Rasario"  }
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Remove
            .flexbox div {
                     margin-top:-20px; }
0
 

Author Comment

by:mustish1
Comment Utility
Thanks a lot. Just one more thing. How to move the picture to the left and the text to the right.
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
Comment Utility
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
 

Author Closing Comment

by:mustish1
Comment Utility
Thank You very much Sir.
0
 

Author Comment

by:mustish1
Comment Utility
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
 

Author Comment

by:mustish1
Comment Utility
.flexbox > div:nth-child(1): nothover  {background-color:  royalblue;  }
nothover. it dont work
0
 

Author Comment

by:mustish1
Comment Utility
I figure it out thanks
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now