[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Need help in code

Posted on 2014-01-18
21
Medium Priority
?
218 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 14
  • 7
21 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39791665
<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
ID: 39791717
ok thanks. But it still not showing all 4 images files.
0
 

Author Comment

by:mustish1
ID: 39791989
This is what it showing
outpt.png
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:mustish1
ID: 39791990
All 4 image files are not showing in their
0
 
LVL 58

Expert Comment

by:Gary
ID: 39792292
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
ID: 39792866
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
ID: 39792895
Add to the end of your css

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

Author Comment

by:mustish1
ID: 39792900
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
ID: 39792902
oops sorry yes it works
0
 

Author Comment

by:mustish1
ID: 39792903
how to i change the size as it too long? Thanks
0
 
LVL 58

Expert Comment

by:Gary
ID: 39792905
That should be

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



What do you mean too long?
0
 

Author Comment

by:mustish1
ID: 39792911
Its not showing in one page
long.png
0
 

Author Comment

by:mustish1
ID: 39792923
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
ID: 39792930
Change the height in
p { height: 250px; overflow:  hidden;  font-family: "Rasario"  }
0
 
LVL 58

Expert Comment

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

Author Comment

by:mustish1
ID: 39792944
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 2000 total points
ID: 39792985
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
ID: 39792996
Thank You very much Sir.
0
 

Author Comment

by:mustish1
ID: 39793087
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
ID: 39793102
.flexbox > div:nth-child(1): nothover  {background-color:  royalblue;  }
nothover. it dont work
0
 

Author Comment

by:mustish1
ID: 39793132
I figure it out thanks
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

650 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