• Locked
3 replies [Last post]
Sat, 2017-05-06 15:11
tradeweb
tradeweb's picture
Offline
newbie
Sydney, Australia
Last seen: 6 years 3 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2017-05-06
Posts: 2
Points: 3

The code below creates a one line menu using a header text plugin in WP but it breaks the styles in the rest of the home page. I am trying to use the #hmenu id element to limit the styling to just the hmenu section. When I remove the remarks to activate the #hmenu element it turns into a verticle menu?

Any help will be appreciated as I am new to CSS styling. Thanks and regards, Kerry McNally

<!DOCTYPE html>
<html>
<head>
<style> 
/*#hmenu{*/
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #3082AB;
}
 
li {
    float: left;
}
 
li a {
    display: block;
    font-family: "Arial", Times New Roman, Georgia, Serif;
    font-size: 12px;
    color: white;
    line-height: 1%;
    background-color: #3082AB;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
 
li a:hover:not(.active) {
    background-color: #18658D;
}
 
.active {
    background-color: #18658D;
li {display: inline;}
/*}*/
</style>
</head>
<body>
<!--<div id="hmenu">-->
  <ul>
  <li><li style="float:right"><a class="active" href="#about">LINKS</a></li>
  <li><a href="https://supacloud.duoservers.com/linux-cloud-packages/compare-all/">COMPARE</a></li>
  <li><a href="#contact">BLOG</a></li>
  <li><a href="#about">About</a></li>
</ul>
<!--</div>-->
</body>
</html>

//mod edit: Added bbcode [code] ... [/code] gt

Top
Tags:
Sat, 2017-05-06 22:33
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 13 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Sass? Less?

I am guessing you are using SASS or LESS or some other abstraction to emulate object oriented programming memes or CSS @ types. Don't.

I see an awful lot of neophytes sucked into the idea that preprocessors make things simpler or more organized or some other BS. They don't. They actually make things less easy due to adding a layer of abstraction over a simple declarative presentation language.

It is a false economy.

That said, I'm going to suggest your issue may derive from browser interpretation of float's default shrink-wrap property. Different browsers are more or less aggressive at squeezing their content. In this case, you have LI floating without bounds (width). Its content is A, presented as a block element. Block elements take all available width, if not constrained. Your browser may be wrapping the unbound A element, thus using the full width and making the next LI display below the previous one. Another browser may squeeze the block A element down until it bumps up against the A element's content, thus leaving room beside it for the next LI.

Best way to write CSS? Stay in context from the general to the specific. If you use the style attribute in your html, you have most certainly screwed up.

Simple version:

<!DOCTYPE HTML>
 
<html lang="en">
  <head>
    <meta charset="utf-8">
 
    <meta content="width=device-width, 
		   height=device-height, 
		   initial-scale=1"
	    name="viewport">
 
    <title> Test document </title>
 
    <style type="text/css">
    /*<![CDATA[*/
 
    ul {} /* left at default values */
 
    ul#menu {
	background-color: #3082AB;
	list-style-type: none;
	margin: 0;
	overflow: hidden; 
	padding: 0;
    }
 
    #menu li {
	float: left;
	max-width: 5em;
    }
 
    #menu li:first-child {
	float: right;
    }
 
    #menu li a {
	display: block;
	font-family: Arial, "Times New Roman", Georgia, Serif;
	font-size: 12px;  /* font size declared in pixels 
			     nearly always a bad idea */
	color: white;
	line-height: 1%;
	background-color: #3082AB;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
    }
 
    	/* Careful; 'active' has a specific meaning */
    #menu li a:hover:not(.active) {
	background-color: #18658D;
    }
 
    #menu .active {
	background-color: #18658D;
    }
 
    /* What is this about? */
    li {
	/* 	display: inline; */
    }
 
    /*]]>*/
    </style>
 
  </head>
 
  <body>
    <ul id="menu">
      <li>
	<a class="active"
		href="#about">LINKS</a>
      </li>
 
      <li>
	<a href="#">COMPARE</a>
      </li>
 
      <li>
	<a href="#contact">BLOG</a>
      </li> 
 
      <li>
	<a href="#about">ABOUT</a>
      </li>
    </ul>
  </body> 
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Sun, 2017-05-07 07:15
#2
tradeweb
tradeweb's picture
Offline
newbie
Sydney, Australia
Last seen: 6 years 3 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2017-05-06
Posts: 2
Points: 3

Thank You

Many thanks for your help Gary.

regards,

Kerry McNally

Top
Tue, 2017-09-12 03:10
#3
choetboi
choetboi's picture
Offline
newbie
ha noi
Last seen: 5 years 37 weeks ago
ha noi
Timezone: GMT+7
Joined: 2017-09-12
Posts: 1
Points: 1

thanks

thanks gary.turner

Top
  • Locked