?
Solved

Need help in code

Posted on 2014-01-18
21
Medium Priority
?
216 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
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 

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

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

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

I will show you how to create a ASP.NET Captcha control without using any HTTP HANDELRS or what so ever. you can easily plug it into your web pages. For Example a = 2 + 3 (where 2 and 3 are 2 random numbers) Session("Answer") = 5 then we…
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 the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
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…
Suggested Courses

752 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