Solved

Need help in code

Posted on 2014-01-18
21
211 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
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
NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

 

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 500 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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Finding the platform that was used to build a website 4 50
Grunt No Clean Targets 6 158
Cordova Camera plugin fails 2 120
Create animated movies for web page 18 48
Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

821 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