Skip to content

Instantly share code, notes, and snippets.

@TheCodingLady

TheCodingLady/eyeindex.html

Last active February 26, 2018 11:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save TheCodingLady/d19d261074b4762073ee2e14af37dc20 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save TheCodingLady/d19d261074b4762073ee2e14af37dc20 to your computer and use it in GitHub Desktop.
Download ZIP
Quête 4 - le système de grille BOOTSTRAP
Raw
eyeindex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="eyestyle.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<title>The Evil Eye of Sauron</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="container">
<div class="row"> <!-- ligne 1 -->
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 col-xs-offset-9 grey"></div>
</div>
<div class="row"> <!-- ligne 2 -->
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 col-xs-offset-3 orange"></div>
<div class="col-xs-1 yellow"></div>
<div class="col-xs-1 orange"></div>
<div class="col-xs-1 col-xs-offset-3 grey"></div>
</div>
<div class="row"> <!-- ligne 3 -->
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 col-xs-offset-2 orange"></div>
<div class="col-xs-1 yellow"></div>
<div class="col-xs-1 black"></div>
<div class="col-xs-1 yellow"></div>
<div class="col-xs-1 orange"></div>
<div class="col-xs-1 col-xs-offset-2 grey"></div>
</div>
<div class="row"> <!-- ligne 4 -->
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 orange"></div>
<div class="col-xs-1 orange"></div>
<div class="col-xs-1 yellow"></div>
<div class="col-xs-1 black"></div>
<div class="col-xs-1 yellow"></div>
<div class="col-xs-1 orange"></div>
<div class="col-xs-1 orange"></div>
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 grey"></div>
</div>
<div class="row"> <!-- ligne 5 -->
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 col-xs-offset-1 orange"></div>
<div class="col-xs-1 yellow"></div>
<div class="col-xs-1 black"></div>
<div class="col-xs-1 yellow"></div>
<div class="col-xs-1 orange"></div>
<div class="col-xs-1 col-xs-offset-1 grey"></div>
<div class="col-xs-1 grey"></div>
</div>
<div class="row"> <!-- ligne 6 -->
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 col-xs-offset-1 orange"></div>
<div class="col-xs-1 yellow"></div>
<div class="col-xs-1 orange"></div>
<div class="col-xs-1 col-xs-offset-1 grey"></div>
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 grey"></div>
</div>
<div class="row"> <!-- ligne 7 -->
<div class="col-xs-1 col-xs-offset-1 grey"></div>
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 col-xs-offset-3 grey"></div>
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 grey"></div>
</div>
<div class="row"> <!-- ligne 8 -->
<div class="col-xs-1 col-xs-offset-2 grey"></div>
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 grey"></div>
</div>
<div class="row"> <!-- ligne 9 -->
<div class="col-xs-1 col-xs-offset-3 grey"></div>
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 grey"></div>
</div>
<div class="row"> <!-- ligne 10 -->
<div class="col-xs-1 col-xs-offset-4 grey"></div>
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 grey"></div>
</div>
<div class="row"> <!-- ligne 11 -->
<div class="col-xs-1 col-xs-offset-4 grey"></div>
<div class="col-xs-1 grey"></div>
<div class="col-xs-1 grey"></div>
</div>
</div>
</body>
</html>
Raw
eyestyle.css
/* CSS with BOOTSTRAP 3.7.7 */
#container
{
border: none;
max-width: 600px;
min-width: 360px;
margin-left: 20px;
}
.col-xs-1
{
border: 1.25px solid white;
padding-top: 8.33%;
}
.grey
{
background-color: #333333;
}
.orange
{
background-color: #ff8000;
}
.yellow
{
background-color: #ffcc33;
}
.black
{
background-color: #000000;
}
@ChristianDanielMezieres

ChristianDanielMezieres commented Feb 25, 2018 •
edited
Loading

Copy link
Copy Markdown

Hello Alexandra,

Alexandra, Bootstrap defines " container " and " container-fluid " and the cells sizes... ( The Boostrap 4 with the link, the sizes are pre- defined ).. so you do not need this part.

@TheCodingLady

TheCodingLady commented Feb 25, 2018

Copy link
Copy Markdown
Author

Hi Chrys...
OK, but I didn't link to Bootstrap 4.

@TheCodingLady

TheCodingLady commented Feb 25, 2018

Copy link
Copy Markdown
Author

I looked at Océane's and she also used Bootstrap 3.7.7 and put a container and put col-xs. Another guy also told me I should put XS...

My problem was that the container was "container-fluid" so it was always extending to the whole screen. I corrected that and just put "container". Many people put it in a container. In fact most I that I saw did that.

@ChristianDanielMezieres

ChristianDanielMezieres commented Feb 25, 2018 •
edited
Loading

Copy link
Copy Markdown

ok i am here Agent99 .. :)

yes your first problem was your container as i have mentioned before that is why i told you to have a look at container, and as Bootstrop pre-defined the container that means you do not need to write anything about the size on CSS file. In bootstrop 2 kinds :

  • container : this one is centered in the middle of the page.
  • container-fluid : this one takes the full wide screen.

the 'col-xs", in the bootstrop version that i have downloaded, i met a few issues so i decided to put the link directly (bootstrop v3.3.7)... and all problems had been solved. Then, yes you need to put " col-xs-1 " in your html file and you can style it with css.

so now, i am going to talk to you about the square. Bootstrap resize according % or ratio ... you need to put a value to the square but if you put a value in px, this is going to be fixed.... so i advised you to put % in one property ( i let you guess that property )... this property is going to follow the size of the screen....

when you have done this... you are all done.

i hope that i have helped you.... download my file and just take a look

@ChristianDanielMezieres

ChristianDanielMezieres commented Feb 25, 2018 •
edited
Loading

Copy link
Copy Markdown

I took a look at your code css... you defined container with max-width : 600px so your container can not be wider than this, that is the maximum. then, you put the minimum size at 30%... so that if 30% of your maximum size... The quest does not specify this so for me.. it is also valid...

@TheCodingLady

TheCodingLady commented Feb 25, 2018

Copy link
Copy Markdown
Author

I changed my max-width and min-width to pixels. If you look at the original model, it is limited in size. I.E. even if the screen gets larger it does not get bigger after reaching a maximum size.

My container did not center in the page. I don't know why. It doesn't matter because the original is not centered. Many students centered theirs and I can't see that written in their code. Anyway, I find so many oddities and I don't like my pc! Your solution does not appear in my Odyssey list. So send me your odyssey link.

@ChristianDanielMezieres

ChristianDanielMezieres commented Feb 25, 2018

Copy link
Copy Markdown

https://odyssey.wildcodeschool.fr/solutions/15030

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment