3 Replies - 351 Views - Last Post: 14 December 2017 - 11:55 AM

#1 trippyguy   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 14-December 17

Navigation Bar trips out when website minimized please help

Posted 14 December 2017 - 06:47 AM

So i have this problem that when i minimize my website the navbar doesnt go with the flow(doenst stay the same size)ive been tying to repair this for days but i cant find the answerminimizedhttps://i.imgur.com/zlLAO87.jpgnot minimizedPosted Image
this is my first post so i hope this works out for me Code:












<html>
<head>
<style>
p {
    -webkit-text-fill-color: white; */
  
  color: white;
  
  text-shadow:
    1px 1px 0 #000,
    /* Simulated effect for Firefox and Opera
       and nice enhancement for WebKit */
   -1px -1px 0 #000,  
    1px -1px 0 #000,
   -1px  1px 0 #000,
    1px  1px 0 #000;
}
h1 {
  /* WebKit (Safari/Chrome) Only */
  -webkit-text-stroke: px black;
  
  /* If we weren't using text-shadow, we'd set a fallback color
     and use this to set color instead
    -webkit-text-fill-color: white; */
  
  color: white;
  
  text-shadow:
    3px 3px 0 #000,
    /* Simulated effect for Firefox and Opera
       and nice enhancement for WebKit */
   -1px -1px 0 #000,  
    1px -1px 0 #000,
   -1px  1px 0 #000,
    1px  1px 0 #000;
}
body {
    margin: 0;		
}
#hero{
		background-image: url(https://i.imgur.com/9jlsvqg.jpg) ;
		background-position: center center
		background-repeat:  no-repeat;
		background-size:  cover;
		background-color: #999;
		z-index:-10;
}
#hero-overlay {
	position: absolute;
	background-color: rgba(0,0,0,0.5)
	height:100%;
	width: 100%
	z-index: -5;
}
.bar {
background: url('https://www.google.nl/search?q=black50.png&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjc_O_ojInYAhXEyqQKHXTGBy0Q_AUICigB&biw=1275&bih=629&dpr=1.5#imgrc=iN9PupAl__OpsM:');
}
div, body{
  margin: 0;
  padding: 0;
  font-family: exo, sans-serif;
  
}
.wrapper {
  height: 100%; 
  width: 100%; 
}

.message {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%; 
  height:45%;
  bottom: 0; 
  display: block;
  position: absolute;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  padding: 0.5em;
}

#divmenu ul li:hover ul{
    top:27px;
    display:block;
}
#divmenu ul li ul li{
    background-color:#;
}
#divmenu ul li:hover ul li:hover{
    background-color:#b1b536;
}
#divmenu ul li ul li a{
    color:#ffffff;
    display:inline-block;

}
#divmenu ul li:hover ul li ul{
    position:absolute;
    display:none;
}
#divmenu ul li:hover ul li:hover ul{
    display:block;ss
}
#divmenu ul li:hover ul li:hover ul li{
    background:#86d3fa;
}
#divmenu ul li:hover ul li:hover ul li:hover{
    background:#82CFE0;
}
#divmenu ul li:hover ul li:hover ul li a{
    color:#ffffff;
}




#divMenu, ul, li, li li {
    margin: 0;
    padding: 0;
}
 
#divMenu {
    width: 20%;
    height: 27px;
        list-style-type: none;	
    margin: 0;
    padding: 0;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
}
 
#divMenu ul{

     line-height: 25px;
}
 
    #divMenu li {
        list-style: none;
        position: relative;
        background: #86d3fa;
    }
 
        #divMenu li li {
            list-style: none;
            position: relative;
            background: #86d3fa;
            left: 250px;
            top: -27px;
        }
    #divmenu ul li ul{
    position:absolute;
    display:none;
}
    #divMenu ul li a {
        width:  224px;
        height: 22px;
        display: block;
        text-decoration: none;
        text-align: center;

        color:#ffffff;
	position:static;

    }
 
    #divMenu ul ul {
        position: absolute;
        visibility: hidden;
        top: 27px;
    }
 
    #divMenu ul li:hover ul {
        visibility: visible;
    }
 
    #divMenu li:hover {
        background-color: #82CFE0;
    }
 
    #divMenu ul li:hover ul li a:hover {
        background-color: #82CFE0;
    }
 
    #divMenu a:hover {
        font-weight: bold;
    }


li a {
    display: block;
    color: #82E0AA;
    padding: 8px 13px;
    text-decoration: none;
}

li a.active {
    background-color: #82E0AA;
    color: white;
    background: linear-gradient(to right,#82E0AA,lightblue); 
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>

</head>
<div id="hero">
	<div id="hero-overlay"></div>


<div id="divmenu">

  <li><a class="active" href="#home"><h1>Drugs & Herbs</h1></a></li>
<ul>
  <li><a href="#news">Cannabinoids</a>
  <ul><li><a href="weed.html">Weed</a></li>
      <li><a href="#">Hashish</a></li><li><a href="#">Edibles</a></li><li><a href="#">Concetrates</a></li>
       </ul></li>
  <li><a href="#contact">Hallucinogens</a>
  <ul>   <li><a href="#">Psychedelics</a> <ul>
                                
<li><a href="#">Truffels</a>
                                
</li>
                                
<li><a href="#">Psilocybin</a>
                                
</li>
	</ul></li>
            <li><a href="#">Lysergic Acid</a>
<ul><li><a href="#">LSD</a></li>
       <li><a href="#">2C-B</a></li>
       <li><a href="#">Homec</a></li>
</ul></li>
<li><a href="#">Herbs</a>
<ul><li><a href="#">Ayahuasca</a></li>
       <li><a href="#">Salvia</a></li>
       <li><a href="#">Homec</a></li>
</li></ul>
   </ul></li>
	 <li><a href="#about">Hallucinogens & Stimulants</a>
	 <ul><li><a href="#">Cocaine</a></li>
       <li><a href="#">Methamphetamines</a></li>
</ul></li>

  <li><a href="#about">Stimulants</a>
  <ul> <li><a href="#">Cocaine</a></li>
       <li><a href="#">Methamphetamines</a></li>
       <li><a href="#">Amphetamines</a></li>
	<li><a href="#">Ritalin</a></li>
	<li><a href="#">Cylert</a></li>
       </ul></li>
	<li><a href="#">Legaldrugs</a>
  <ul> <li><a href="#">Psychedelics</a>
	<ul><li><a href="#">Truffels</a></li>
       <li><a href="#">Herbs</a></li>
       <li><a href="#">LSA Seeds</a></li><li><a href="#">Amanita Muscaria</a></li>
       </ul></li>
       <li><a href="#">homeb</a></li>
       <li><a href="#">Homec</a></li>
       </ul></li>
 
</div>
</ul>
</head>
<div style="margin-left:25%;padding:1px 16px;height:1000px;"><body >
  <h1>Welcome to Drugs & Herbs</h1>
  <div class="bar"></div><p><b>This website is all about drugs and herbs</b></p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
</div></font>




Is This A Good Question/Topic? 0
  • +

Replies To: Navigation Bar trips out when website minimized please help

#2 andrewsw   User is online

  • Bouncy!
  • member icon

Reputation: 6563
  • View blog
  • Posts: 26,619
  • Joined: 12-December 12

Re: Navigation Bar trips out when website minimized please help

Posted 14 December 2017 - 07:00 AM

You have a number of problems with your CSS and HTML. Validate them here and here.

Line 1 should be a DOCTYPE declaration, line 5 is wrong, CSS properties should be separated with semi-colons, and it looks to me like some of your ul tags are misplaced or unclosed. (And why is there a closing font tag? The font tag is obsolete.)

You need to correct these errors before approaching your posted question (if the problem still persists).
Was This Post Helpful? 0
  • +
  • -

#3 trippyguy   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 14-December 17

Re: Navigation Bar trips out when website minimized please help

Posted 14 December 2017 - 11:47 AM

thanks for the fast reply. i knew i made alot of mistakes but then again its my first website :P
Was This Post Helpful? 0
  • +
  • -

#4 trippyguy   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 14-December 17

Re: Navigation Bar trips out when website minimized please help

Posted 14 December 2017 - 11:55 AM

View Postandrewsw, on 14 December 2017 - 07:00 AM, said:

You have a number of problems with your CSS and HTML. Validate them here and here.

Line 1 should be a DOCTYPE declaration, line 5 is wrong, CSS properties should be separated with semi-colons, and it looks to me like some of your ul tags are misplaced or unclosed. (And why is there a closing font tag? The font tag is obsolete.)

You need to correct these errors before approaching your posted question (if the problem still persists).

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1