Why can not I make the grid system on my php page?

Navigation
1

I'm starting a project for university and I can not make the grid system in the main content tag. I've been trying for quite some time!

Icannotimplementthegrid!Thisismycode..

'

<imgsrc="../Logincheck/assets/img/image2.png" class="company-logo"><br>
        <div id="welcome">
            <b><?php echo $result['username'] ?> </b>
        </div>

    <div class="sidebar-links">
                <div class="link-blue"> 
                    <a href="logout.php">
                        <i class="fa fa-sign-out"></i>Logout
                    </a>
                </div>

                    <div class="link-orange selected">

            <a href="#">
                <i class="fa fa-home"></i>Home
            </a>
                    </div>

        <div class="link-blue ">

            <a href="#">
                <i class="fa fa-table"></i>Tables
            </a>

            <ul class="sub-links">
                <li><a href="#">Automóveis</a></li>
                <li><a href="#">Motociclos</a></li>
                <li><a href="#">Caravanas</a></li>
                <li><a href="#">Autocarros</a></li>
            </ul>

        </div>

        <div class="link-red">

            <a href="#">
                <i class="fa fa-plus-square-o"></i> Inserir
            </a>

            <ul class="sub-links">
                <li><a href="#">Automóveis</a></li>
                <li><a href="#">Motociclos</a></li>
                <li><a href="#">Caravanas</a></li>
                <li><a href="#">Autocarros</a></li>
            </ul>

        </div>

        <div class="link-yellow">

            <a href="#">
                <i class="fa fa-tachometer"></i>Estado
            </a>

            <ul class="sub-links">
                <li><a href="#">Automóveis</a></li>
                <li><a href="#">Motociclos</a></li>
                <li><a href="#">Caravanas</a></li>
                <li><a href="#">Autocarros</a></li>
            </ul>

        </div>



                    <div class="link-blue">

            <a href="#">
                <i class="fa fa-folder-open"></i>Reservas
            </a>

        </div>

                <div class="link-red">

            <a href="#">
                <i class="fa fa-book"></i>Clientes
            </a>

        </div>
                <div class="link-green">

            <a href="#">
                <i class="fa fa-money"></i>Budget Maker
            </a>
                    </div>

                <div class="link-blue">

            <a href="#">
                <i class="fa fa-area-chart"></i>Estatísticas
            </a>
                    </div>

    </div>

</aside>

<div class="main-content">

    <div class="menu">

                <!--div de número de viaturas que a empresa possui-->
                <div id="ncf" style="color:black; background-color: yellow">
                    <div style="font-family: Oxygen, sans-serif; align-content: center">
                    <?php 
                    $sql1 = "SELECT * FROM vehicle";
                    $numcars = $connect->query($sql1);

                     if ($result = $numcars ) {

                      $row_cnt = $result->num_rows;
                      print  'Viaturas da empresa'.'<br>'.$row_cnt;





                    }else{
                        echo 'sem viaturas';
                    }


                    ?></div>
                </div>

                <!--div número de clientes-->
                <div id="nclts"></div>

                <!--div número de reservas (ultima semana)-->
                <div id="nrsv"></div>

                <!--div de país com mais viaturas da empresa-->
                <div id="pvemp"></div>

                <!--div dados de funcionário-->
                <div ids="dfunc"></div>

                <!--div download aplicação mobile-->
                <div id="dapk"></div>

                <!--div viatura mais requisitada do mês-->
                <div id="vmrm"></div>

    </div>

</div>

'

I've tried to do the grid, however it always keeps the formatting of the image above and I can not figure out why! Can someone help me please?

update

Here's the css. 

.main-content {
	font-family: Arial, Helvetica, sans-serif;
	max-width: 1000px;
	padding-top: 40px;
	margin: 0 0 40px 260px;

}

#welcome{
    color: white;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}
.sidebar-left-collapse {
	font-family: Arial, Helvetica, sans-serif;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #292c2f;
	width: 180px;
	height: 100%;
	padding: 20px 0;
}

.sidebar-left-collapse > img {
	display: block;
	text-decoration: none;
	font-family: Cookie, cursive;
	width: 122px;
	height: 122px;
	margin: 0 auto;
	text-align: center;
	font-size: 44px;
	font-weight: normal;
	line-height: 2.6;
	border-radius: 50%;
        background-image: url(../Logincheck/assets/img/image1.png);
}

.sidebar-left-collapse .sidebar-links {
	margin: 30px auto;
}

.sidebar-links div > a {
	display: block;
	text-decoration: none;
	margin: 0 auto 5px auto;
	padding: 10px 0 10px 5px;
	background-color: #35393e;
	text-align: left;
	color:  #b3bcc5;
	font-size: 12px;
	font-weight: bold;
	line-height: 2;
	border-left-width: 2px;
	border-left-style: solid;
}

.sidebar-links div.selected > a{
	background-color: #ffffff;
	color: #565d63;
	line-height: 2.3;
	margin: 0;
}

.sidebar-links div > a i.fa {
	position: relative;
	font-size: 20px;
	top: 3px;
	width: 40px;
	text-align: center;
}

.sidebar-links div ul.sub-links {
	max-height: 0;
	overflow: hidden;
	list-style: none;
	padding: 0 0 0 30px;
	color:  #b3bcc5;
	font-size: 12px;
	font-weight: bold;
	line-height: 24px;
	margin: 0;
	transition: 0.4s;
}

.sidebar-links div.selected ul.sub-links {
	max-height: 150px;
	padding: 12px 0 12px 30px;
}

.sidebar-links div .sub-links a {
	text-decoration: none;
	color: #b3bcc5;
	display: block;
	text-align: left;
}

/* Link Colors */
.sidebar-links div.link-orange > a {
	border-color: #FFA500;
}

.sidebar-links div.link-orange > a i.fa {
	color: #FFA500;
}

.sidebar-links div.link-blue > a {
	border-color: #487db2;
}

.sidebar-links div.link-blue > a i.fa {
	color: #487db2;
}

.sidebar-links div.link-red > a {
	border-color: #da4545;
}

.sidebar-links div.link-red > a i.fa {
	color: #da4545;
}

.sidebar-links div.link-yellow > a {
	border-color: #d0d237;
}

.sidebar-links div.link-yellow > a i.fa {
	color: #d0d237;
}

.sidebar-links div.link-green > a {
	border-color: #86be2e;
}

.sidebar-links div.link-green > a i.fa {
	color: #86be2e;
}

/* Making the sidebar responsive */

@media (max-width: 900px) {

	.main-content{
		max-width: none;
		padding: 70px 20px;
		margin: 0 0 40px;
	}

	.sidebar-left-collapse {
		width: auto;
		height: auto;
		position: static;
		padding: 20px 0 0;
	}

	.sidebar-left-collapse .sidebar-links {
		text-align: center;
		margin: 20px auto 0;
	}

	.sidebar-links div {
		display: inline-block;
		width: 100px;
	}

	.sidebar-links div > a {
		text-align: center;
		margin: 0;
		padding: 10px 0;
		border-left: none;
		border-top-width: 2px;
		border-top-style: solid;
	}

	.sidebar-links div > a i.fa {
		display: block;
		margin: 0 auto 5px;
	}

	.sidebar-links div ul.sub-links {
		display: none;
	}

	.sidebar-links div.selected .sub-links {
		display: block;
		position: absolute;
		text-align: center;
		width: auto;
		left: 0;
		right: 0;
	}

	.sidebar-links div.selected .sub-links li {
		display: inline-block;
	}

	.sidebar-links div.selected .sub-links a {
		display: inline-block;
		margin-right: 20px;
		font-size: 13px;
		color: #748290;
	}

}

/* Smartphone version */

@media (max-width: 450px) {

	.main-content{
		padding: 90px 20px;
	}

	.sidebar-left-collapse {
		padding: 20px 0;
	}

	.sidebar-left-collapse .sidebar-links {
		text-align: center;
		margin: 20px auto 0;
		position: relative;
	}

	.sidebar-links div {
		display: block;
		width: 240px;
		margin: 0 auto 5px;
	}

	.sidebar-links div > a {
		text-align: left;
		padding: 10px 25px;
		vertical-align: middle;
		border-top: none;
		border-left-width: 2px;
		border-left-style: solid;
	}

	.sidebar-links div > a i.fa {
		display: inline-block;
		font-size: 20px;
		width: 20px;
		margin: 0 20px 0 0;
	}

	.sidebar-links div.selected .sub-links {
		bottom: -90px;
	}

}

/*	Removing margins and paddings from the body, so that
    the sidebar takes the full height of the page */

body {
	margin: 0;
	padding: 0;
}
    
asked by anonymous 07.11.2017 / 00:21

1 answer

0

Hello, Alexandre!

Well, one thing that always helps me in web development is to set styles in an edge for all divs, so the view of the structure looks better to find the space where each element is.

In the case of its structure it has to work like this:

  • A div that contains all the content of the site.
  • The div with the menu
  • And the div with non-menu content

From this I can already imagine the structure of this layout, I put a code following some of its definitions of css: 

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
}

.menu {
  width: 30%; /* Ajuste a largura para as demais telas */
  display:inline;
  float: left;
}

ul {
  list-style:none;
  padding-left: 0;
}

li{
  padding: 20px 20px 20px 5px;
  margin-bottom: 5px;
  background-color: #35393e;
  width: 150px;
  max-width: 180px;
  color: #b3bcc5;
  font-family: Cookie, cursive;
}

.conteudo {
  width: 80%;
  display:inline;
}

.m-home {
  border-left: 2px solid #FFA500;
}
.m-tables {
  border-left: 2px solid #487db2; 
}
.m-inserir {
   border-left: 2px solid  #da4545;
}
.m-estados {
  border-left: 2px solid #d0d237;
}
.m-reservas {
  border-left: 2px solid #487db2;
}
.m-clientes {
  border-left: 2px solid #da4545;
}
.m-bmaker {
  border-left: 2px solid #86be2e;
}
.m-estatisticas {
  border-left: 2px solid #487db2;
}
<div class="container">
  <div class="menu">
    menu
    
    <ul>
      <li class="m-home"> <img src="logo.png"> Home </li>
      <li class="m-tables"> <img src="logo.png"> Tables </li>
      <li class="m-inserir">   <img src="logo.png"> Inserir </li>
      <li class="m-estados">  <img src="logo.png"> Estado </li>
      <li class="m-reservas">  <img src="logo.png"> Reservas </li>
      <li class="m-clientes">  <img src="logo.png"> Clientes </li>
      <li class="m-bmaker"> <img src="logo.png"> Budget Maker </li>
      <li class="m-estatisticas"> <img src="logo.png"> Estatísticas </li>
     </ul>
    
  </div>
  <div class="conteudo">
    conteudo 
    
    <p>
      Lorem ipsum nisi urna euismod ullamcorper ipsum, lobortis cras gravida ultricies tempus ultricies sodales, conubia orci lacus ac porttitor. laoreet lorem habitasse volutpat est cras quisque adipiscing fermentum scelerisque praesent id, senectus bibendum diam aenean enim ante praesent platea adipiscing. metus enim adipiscing amet tristique massa gravida nisl ac sed quis, lobortis orci aptent metus eleifend turpis nam duis ultricies. aliquam sed bibendum mollis conubia etiam netus sagittis pulvinar quam, suspendisse ac purus tempor porttitor dapibus consectetur suspendisse. ut pharetra dui amet fermentum eros tempor, condimentum sem metus cras bibendum magna tristique, blandit etiam aenean aptent posuere. 
    </p>
  </div>
  
</div>

When you create menus, preferably to create them with lists, and then with CSS you manipulate as you wish.

I left in the code the text menu and content, to remove after testing.

When editing the CSS file, always start by setting the body and then the other properties and classes!

I hope I have helped you.

    
11.05.2018 / 22:23
Force Google indexing on DNS redirection Error in creating project Lumen: Application ready! Build something amazing