I’m working on my personal project and am having trouble with my layout , I am trying to make it modular and make div’s and use grid for different sections of my layout but I am unable to see them because every time I inspect my code and hover over the area where the main panel should be, it shows a blue highlight of my body tag instead. without showing my other elements and properties.
This is what I mean.
In this I’m just trying to show how none of the other elements and properties display themselves.
Is this normal?
Does this mean that the other elements and properties are not being recognised?
Is my body overwriting the other elements and properties?
I have already defined properties for other elements such as
a viewpoint container class, a main layout class, a container class etc.
Here is a hopefully minimal reproducible example
</style>
</head>
<body>
<h1>Welcome to habit cloud ☁️</h1>
<h2>Manage your life here 👇</h2>
<header class="title">x's habit cloud</header>
<div class="container">
<div class="sidebar">
<nav>
<ul>
<li><a href="#"><i class="fas fa-search"></i>search</a></li>
<li><a href="#"><i class="fas fa-cogs"></i>settings</a></li>
<!-- Add other navigation items here -->
</ul>
</nav>
</div>
<div class="main-layout">
<!-- Your main content goes here -->
</div>
</div>
</body>
</html>
In the example, when inspecting you can see the ul highlite and other parts of the code within the body why isn’t this the case in my actual code?
When I look at your project in dev tools I see all of your elements and am able to click on each one and see the current CSS properties on it. Is your body element expanded so that you can see everything inside of the body? Also, it would probably be helpful to know which browser/version and OS you are using.
Also, notice in the pic that you do have some HTML errors. Take a close look a the .sidebar div. Does something not seem quite right to you? I would check your HTML and make sure you are closing all of your tags properly.
Sorry for the very late reply I have been extremely busy lately
Is my body element expanded so I can see everything inside of the body? What do you mean by that is there some way to fix it? As for my browser, I’m using google chrome but I’m not sure which OS I’m using.
I have noticed one thing
I inspected again and I can see my sidebar.div, h1, h2 and header but I have other elements which Ive styled and have class selectors with sizing and layout properties set to them like my ul, main layout which I can’t see correct me if I’m wrong lol.
But about my main layout I have set the div height and width so it so it can be like this
But it’s not there when I inspect and in my code I suspect there may be an error with the class name which may be causing to to not render itself? But the class selector looks perfectly fine
This is a screenshot of my vs code and the div that isn’t displaying itself (and the container) is highlited I am confused as to why is it highlited in red meaning there is an error but I don’t see it
but I will also show my main class selector I have done the math and made it so it takes up the space I previously referred to but it as if it’s not being recognised
Sorry for all the content I hope I gave you the information you needed to help me solve this better
For the sidebar div closing tag your talking about I have closed all my divs at the end of my code-
my nav is also closed
If you’re asking me to close it immediately after the div opening tag if I attempt to re-arrange it , it messes up my entire code layout badly. Very badly.
I noticed my sidebar class name is the only one being rendered and not seen as an error when I inspect ?
edit: Ok i think I have found one big part of the problem all my class names were stacked on top of each other like this
and the only normal functioning one was the <div class=sidebar>
I thought why is that why is it the only one being rendered whats the diffirence between that and the others
The div class name is actually wrapping content unlike the other two.
I moved my main layout class name after the div sidebar content but before all the closing tags and I put a background color of grey I launch my live web server and a grey box in the corner of my screen
