This is probably really dumb but my body is covering all my elements rendering everything unclickable...I fixed this before but I forgot how.
https://codepen.io/Tehan123/pen/VgdRBQ
`<body>
<section class="Body-Wrapper">
<div class="Page-Wrapper-First">
<img class="logo" src="https://image.flaticon.com/icons/png/512/776/776541.png"</img>
<nav>
<ul class="nav-menu">
<li>Features </li>
<li>How It Works </li>
<li>Pricing </li>
</ul>
<div class="dropdown">
<button class="menu" src="https://image.flaticon.com/icons/svg/149/149176.svg"> </button>
<div class="dropdown-content">
Features
How It Works
Pricing
</nav>
<section class="hero">
<div class="hero-text">
<h1> Creates 'a place beyond time' for its guests.</h1>
</div>
<img class="hero-image" src="https://images.pexels.com/photos/1320686/pexels-photo-1320686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"</img>
</section>
</div>
</section>
</body
>
`
You have a negative z-index on your body. Whenever elements have a negative z-index they're not clickable and everything as a child of body will be the same. You need to set a value greater than 0.
This is the last 3 lines of your CSS
body {
z-index: -3;
}
UPDATE
Also it seems like you have a z-index: -2 on .Body-Wrapper. You should use a value greater than 0.
When you remove/change these two values it might look like your page is broken, it's because you have a bunch of negative z-index value in other places. You need to change those to positive as well.
Related
I am almost done, with the navbar, I just want to add 1 font icon, that will open "my account" page.
i tried this:
the navbar looks good, just font is missing.
<header>
<nav id="navbar">
<div class="container">
<h1 class="logo">censord</h1>
<div class="my_account >
<i class="fas fa-user-cog"></i>
</div>
<ul>
<li>Categories</li>
<li>Post</li>
<li>Search</li>
<li>About</li>
<li>My account</li>
</ul>
</div>
</nav>
</header>
Two points here:
You have a missing quotation mark on this line, messing up the HTML: <div class="my_account >
Make sure that the CSS property font-family: FontAwesome is applied on your <i> element.
Edit: You can also try to manually set the contents of the i element by adding this to your CSS:
i.fa-user-cog {
content: '\f4fe';
}
Im new in coding. I'm making my first website (mobile first). It were all fine, all divs working, responsive, all great! But now I added a new div(nothing special I guess) but when I try to just put a single code (even without media queries) it doesn't work in mobile version. Tablet and desktop are working correctly. I tried to modify other divs and they work fine too.
Here is the code.
HTML
<section class="flvcko-wear">
<ul class="lista-articulos">
<div class="articulo">
<li>
<img src="img/cap.png" alt="">
<p>Flvcko cap</p>
</li>
</div>
</ul>
</section
CSS
.flvcko-wear ul{
list-style-type: none;
}
It doesn't even recognize the 'list-style-type:none;'
It's probably caused by that weird HTML structure – div is not allowed as child of ul (try pasting your code into HTML validator).
This would make more sense:
<section class="flvcko-wear">
<ul class="lista-articulos">
<li>
<div class="articulo">
<img src="…" alt="…">
<p>…</p>
</div>
</li>
</ul>
</section>
Or even omitting the div altogether, since you can style li, too:
<section class="flvcko-wear">
<ul class="lista-articulos">
<li class="articulo">
<img src="…" alt="…">
<p>…</p>
</li>
</ul>
</section>
I agree with the previous answer, try eliminating the div. Try changing your code to the following:
HTML:
<section class="flvcko-wear">
<ul class="lista-articulos">
<li>
<img src="img/cap.png" alt="">
<p>Flvcko cap</p>
</li>
</ul>
</section>
CSS:
ul.lista-articulos {list-style-type: none;}
I am using the materializecss framework from materializecss.com. I have a simple image that I place above the navbar from materializecss and there is a small white space. I checked the source and there is no margin, padding or border at all. The space goes away if I put the navbar above the image so I am not sure what the problem is.
<img id="header" src="/public/images/header.gif" alt="Header"/>
<nav class="grey darken-4">
<div id="navbar" class="nav-wrapper">
<ul id="nav-mobile" class="hide-on-med-and-down">
<li>Profile</li>
<li>Skills</li>
<li>Projects</li>
</ul>
</div>
</nav>
I am not using any other css besides the materializecss css file. Any ideas? I don't think that css has any margins anywhere as I don't see it when viewing the source for any of the elements.
Edit: Here is a jsfiddle: http://jsfiddle.net/0tL9up9s/ The list elements aren't appearing because I haven't copied over the javascript but you can still see the white space between the image and the navbar.
OK, I think it has to do with the fact that the image is display:inline and therefore has dimensions that include the line-height.
Setting your image to display: block will correct this issue.
CSS
#header { display:block; }
Or (HTML)
<img id="header" src="/public/images/header.gif" style="display:block" alt="Header"/>
Your fiddle: http://jsfiddle.net/0tL9up9s/1/
Adding a html {line-height: 0} to the end of the materialize.css file seems to fix the problem. I have no idea if it will break any other functionality though, so be careful.
http://jsfiddle.net/8ppt5zou/1/
<img id="header" style="display:block;" src="http://www.thousandwonders.net/covers/89/Bryce.Canyon.National.Park.jpg" alt="Header" >
<nav class="grey darken-4">
<div id="navbar" class="nav-wrapper">
<ul id="nav-mobile" class="hide-on-med-and-down">
<li>Profile
</li>
<li>Skills
</li>
<li>Projects
</li>
</ul>
</div>
</nav>
I'm having problems trying to align an image with a header inside a navigation menu. Ideally, everything should be align at the bottom. I have created a jsfiddle to reproduce the issue:
http://jsfiddle.net/graphicsxp/j2t9R/
<nav style="float: left">
<ul class="menu">
<li>
<a href="index.html" class="logo">
<img src="img/logo.png" alt="" class="brand logo_def" width="125" height="39" /></a>
</li>
<li>
<h4 >Sam</h4>
</li>
</ul>
<div class="clear"></div>
</nav>
<nav>
<ul class="menu">
<li class="current-menu-parent">ACCUEIL
</li>
<li>PAGES
</li>
</ul>
<!-- .menu -->
<div class="clear"></div>
</nav>
</div>
</header>
as is:
to be:
I solved the problem using your code, and honestly I couldn't tell you what I changed because there is way to much code going on for such a simple task. Here it is anyway
I also took the liberty of making a new one, showing how simple your code could look
Simple, clean, easy to read. All done with one <div>, and an unordered list.
Simplifying your code and making it easy to read should be a primary goal in coding no matter what, but it also helps users answer your questions quicker, easier, and better help you with questions you have.
Temp fix can be as:
add css for h4 element.... better to give id and then add.
I have seen your fiddle, please put below code in your css
h4{
margin-top:150px;
}
or
(Give id=hompageheaderUserName to h4 of sam)
h4#hompageheaderUserName
{
margin-top:150px;
}
Change width a/c to your need.
Screenshot from fiddle:
Please refer to the code below:
<ul>
<li style="height:100px; overflow:hidden;">
<div style="height:500px; background-color:black;">
</div>
</li>
</ul>
From the code above, we know that we can only see 100px height of black background.
Hhow can we see 500px height of <div> black background? In other words, how can I make the <div> appear in front of <li>?
Use the CSS z-index property. Elements with a greater z-index value are positioned in front of elements with smaller z-index values.
Note that for this to work, you also need to set a position style (position:absolute, position:relative, or position:fixed) on both/all of the elements you want to order.
You can set the z-index in css
<div style="z-index: -1"></div>
In order an element to appear in front of another you have to give higher z-index to the front element, and lower z-index to the back element, also you should indicate position: absolute/fixed...
Example:
<div style="z-index:100; position: fixed;">Hello</div>
<div style="z-index: -1;">World</div>
Upper div use higher z-index and lower div use lower z-index then use absolute/fixed/relative position
The black div will display the full 500px unless overflow:hidden is set on the 100px li
I think you're missing something.
http://jsfiddle.net/ZNtKj/
<ul>
<li style="height:100px;overflow:hidden;">
<div style="height:500px; background-color:black;">
</div>
</li>
</ul>
<ul>
<li style="height:100px;">
<div style="height:500px; background-color:red;">
</div>
</li>
</ul>
In FF4, this displays a 100px black bar, followed by a 500px red block.
A little bit different example:
http://jsfiddle.net/ZNtKj/1/
<ul>
<li style="height:100px;overflow:hidden;">
<div style="height:500px; background-color:black;">
</div>
</li>
</ul>
<ul>
<li style="height:100px;">
<div style="height:500px; background-color:red;">
</div>
</li>
<li style="height:100px;overflow:hidden;">
<div style="height:500px; background-color:blue;">
</div>
</li>
<li style="height:100px;overflow:hidden;">
<div style="height:500px; background-color:green;">
</div>
</li>
</ul>