1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS menu preventing display of other unordered lists

Discussion in 'CSS' started by wiseguy, Apr 9, 2015.

  1. #1
    I have a css menu that uses an external style sheet. I also have an external style sheet for the site itself. The css menu uses an unordered list. The problem is that I cannot create any other unordered lists on a page as they don't show up. I have been unable to find what is in the css menu style sheet that is causing this. Below are links to both style sheets and an example html page if that would help.

    http://www.karaoke-tutor.com/m/mobi-style-320.css
    http://www.karaoke-tutor.com/m/mobile-menu.css
    http://www.karaoke-tutor.com/m/example.html
     
    wiseguy, Apr 9, 2015 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    That's a horrible example - it's not using any IDs or classes as hooks for the styling, which means that anytime you put that stylesheet on a page, it will affect all instances of that element. HORRIBLE coding. You can easily fix it by adding an ID to the ul and change the CSS accordingly, and also add a class to the li-elements, and style THAT accordingly.
     
    PoPSiCLe, Apr 9, 2015 IP
  3. wiseguy

    wiseguy Member

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    Thanks but if I knew how to do all of that I would have fixed it already on my own.
     
    wiseguy, Apr 9, 2015 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    If you can't do this, then you have no business creating a webpage. Harsh, but it's the truth. Amend the stylesheet for the menu by adding id's and classes (I assume you've already played around with that - if not, read up) - then go to where you're
    implementing the menu on the page, and add the id and classes there too - it should then work as expected. Something like this:
    Former CSS:
    
    /*Strip the ul of padding and list styling*/
    ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
    }
    
    /*Create a horizontal list with spacing*/
    li {
    display:inline-block;
    float: left;
    margin-right: 1px;
    }
    
    /*Style for menu links*/
    li a {
    display:block;
    min-width:140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    background: #2f3036;
    text-decoration: none;
    }
    
    /*Hover state for top level links*/
    li:hover a {
    background: #0080C0;
    }
    
    /*Style for dropdown links*/
    li:hover ul a {
    background: #f3f3f3;
    color: #2f3036;
    height: 40px;
    line-height: 40px;
    }
    
    /*Hover state for dropdown links*/
    li:hover ul a:hover {
    background: #0080C0;
    color: #fff;
    }
    
    /*Hide dropdown links until they are needed*/
    li ul {
    display: none;
    }
    
    /*Make dropdown links vertical*/
    li ul li {
    display: block;
    float: none;
    }
    
    /*Prevent text wrapping*/
    li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
    }
    
    /*Display the dropdown on hover*/
    ul li a:hover + .hidden, .hidden:hover {
    display: block;
    }
    
    /*Style 'show menu' label button and hide it by default*/
    .show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight:bold;
    font-size:18px;
    text-decoration: none;
    color: #fff;
    background: #7b7d8c;
    text-align: center;
    padding: 10px 0;
    display: none;
    }
    
    /*Hide checkbox*/
    input[type=checkbox]{
    display: none;
    -webkit-appearance: none;
    }
    
    /*Show menu when invisible checkbox is checked*/
    input[type=checkbox]:checked ~ #menu{
    display: block;
    }
    
    
    /*Responsive Styles*/
    
    @media screen and (max-width : 800px){
    /*Make dropdown links appear inline*/
    ul {
    position: static;
    display: none;
    }
    /*Create vertical spacing*/
    li {
    margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    ul li, li a {
    width: 100%;
    }
    /*Display 'show menu' link*/
    .show-menu {
    display:block;
    }
    }
    
    Code (markup):
    Amended CSS:
    
    #topmenu {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
    }
    #topmenu li {
    display:inline-block;
    float: left;
    margin-right: 1px;
    }
    #topmenu li a {
    display:block;
    min-width:140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    background: #2f3036;
    text-decoration: none;
    }
    #topmenu li:hover a {
    background: #0080C0;
    }
    #topmenu li:hover ul a {
    background: #f3f3f3;
    color: #2f3036;
    height: 40px;
    line-height: 40px;
    }
    #topmenu li:hover ul a:hover {
    background: #0080C0;
    color: #fff;
    }
    #topmenu li ul {
    display: none;
    }
    #topmenu li ul li {
    display: block;
    float: none;
    }
    #topmenu li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
    }
    #topmenu ul li a:hover + .hidden, .hidden:hover {
    display: block;
    }
    
    .show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight:bold;
    font-size:18px;
    text-decoration: none;
    color: #fff;
    background: #7b7d8c;
    text-align: center;
    padding: 10px 0;
    display: none;
    }
    input[type=checkbox]{
    display: none;
    -webkit-appearance: none;
    }
    input[type=checkbox]:checked ~ #menu{
    display: block;
    }
    @media screen and (max-width : 800px){
    /*Make dropdown links appear inline*/
    #topmenu ul {
    position: static;
    display: none;
    }
    /*Create vertical spacing*/
    #topmenu li {
    margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    #topmenu li, li a {
    width: 100%;
    }
    /*Display 'show menu' link*/
    .show-menu {
    display:block;
    }
    }
    
    Code (markup):
    That should fix the CSS - now all you have to do is replace the <ul>-element in the top menu with <ul id="topmenu"> and you should be all set.
     
    PoPSiCLe, Apr 9, 2015 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    It's far far worse than PoPSiCLe is saying -- tables for layout, tables for NOTHING (if there's only one TD per TR, don't use a table), presentation in the markup; no media targets on the LINK, multiple stylesheets for no good reason, abusing form elements without a form (likely using :checked to do :target's job), attributes like VALIGN that has no business in any site written after 1997...

    THEN there's the lack of targeting via an ID which is why everything done to the UL and LI hits EVERY UL and LI just as @PoPSiCLe said; or Never, EVER, and I mean EVARRR!!! absolute position an obvious flow element like a menu. Let flow do it's job!

    First step would be to clean up the markup and dragging it out of the 1990's -- even the first LINE of code proudly proclaims it's age since it's transitional -- which LITERALLY means "in transition from 1997 to 1998 coding practices". At the very least let's get it past that and into STRICT.

    <!DOCTYPE HTML PUBLIC
    	"-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd"
    ><html lang="en"><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    >
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    >
    
    <meta
    	name="viewport"
    	content="width=device-width; height=device-height; initial-scale=1.0"
    >
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    >
    
    <title>
    	[pageTitle -] Site Title
    </title>
    
    </head><body>
    
    <div id="top">
    	
    	<h1>Site Title</h1>
    	
    	<div id="topMenu">
    		<a href="#topMenu" class="showMenu"></a>
    		<a href="#" class="hideMenu"></a>
    		<ul>
    			<li><a href="index.html">Home</a></li>
    			<li><a href="karaoke-articles.html">Karaoke Articles</a></li>
    			<li><a href="karaoke-tutorials.html">Karaoke Tutorials</a></li>
    			<li><a href="sitemap.html">Sitemap</a></li>
    			<li><a href="contact.html">Contact Us</a></li>
    		</ul>
    	<!-- #topMenu --></div>
    	
    	<hr><!-- remove this line if #content starts with a heading -->
    	
    	<div id="content">
    		<ul>
    			<li>Item one</li>
    			<li>Item two</li>
    			<li>Item three</li>
    			<li>Item four</li>
    		</ul>
    		<p>
    			Sample paragraph to test its spacing
    		</p><p>
    			Another Sample paragraph to test its spacing
    		</p>
    	<!-- #content --></div>
    	
    	<hr><!-- remove this line if #footer starts with a heading -->
    	
    	<div id="footer">
    		Disclaimer and site info here.
    	<!-- #footer --></div>
    	
    <!-- #top --></div>
    
    </body></html> 
    Code (markup):
    The CSS for which would go something like this:

    /* null margins and padding to give good cross-browser baseline */
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    }
    
    img, fieldset {
    	border:none;
    }
    
    hr {
    	display:none;
    	/*
    		HR in my code are for semantic breaks in topic/section, NOT
    		style/presenation, so hide them from screen.css users
    	*/
    }
    
    @media (max-width:480px) {
    	* {
    		-webkit-text-size-adjust:none;
    		-ms-text-size-adjust:none;
    	}
    }
    
    html, body {
    	height:100%;
    }
    
    body {
    	font:normal 100%/150% arial,helvetica,sans-serif;
    	padding:0 1em;
    	background:#BBB;
    }
    
    #top {
    	display:flex;
    	flex-direction:column;
    	min-height:100%;
    	max-width:68em;
    	min-width:48em; /* for pre CSS3 capable browsers */
    	margin:0 auto;
    }
    
    * html #top {
    	/* 
    		IE6/earlier knows not min/max-width, so give them a crappy fixed width.
    		OH WELL, they should be thankful we even bother thinking about them.
    	*/
    	width:52em;
    }
    
    h1,
    #footer {
    	text-align:center;
    	padding:1em;
    	background:#DDD;
    }
    
    h1 {
    	padding:0.5em;
    	font:bold 200%/120% arial,helvetica,sans-serif;
    }
    
    #topMenu ul {
    	list-style:none;
    	text-align:center;
    	background:#2F3036;
    }
    
    #topMenu li {
    	display:inline;
    	position:relative;
    }
    
    #topMenu a {
    	text-decoration:none;
    	color:#FFF;
    }
    
    #topMenu a:active,
    #topMenu a:focus,
    #topMenu a:hover {
    	background:#08C;
    }
    
    #topMenu li a {
    	display:inline-block;
    	padding:1em 2em;
    	margin:0 -0.2em; /* negative margins are to kill off whitespace between elements */
    	border-left:1px solid #FFF;
    }
    
    #topMenu li:last-child a {
    	border-right:1px solid #FFF;
    }
    
    #content {
    	flex:1;
    	padding:1em 1em 0;
    	background:#FFF;
    }
    
    #content ul {
    	padding:0 0 1em 2em;
    }
    
    #content p {
    	padding-bottom:1em;
    }
    
    @media (max-width:48em) {
    	body {
    		padding:0;
    	}
    	#top {
    		min-width:192px;
    	}
    	#topMenu>a {
    		display:none;
    		padding:0.5em 1em;
    		text-decoration:none;
    		color:#FFF;
    		background:#345;
    		border-bottom:1px solid #FFF;
    	}
    	#topMenu>a:before {
    		float:right;
    		font-weight:bold;
    	}
    	#topMenu .showMenu:after {
    		content:"Show Menu";
    	}
    	#topMenu .hideMenu:after {
    		content:"Hide Menu";
    	}
    	#topMenu .showMenu:before {
    		content:"\25BC";
    	}
    	#topMenu .hideMenu:before {
    		content:"\25B2";
    	}
    	#topMenu .showMenu,
    	#topMenu:target .hideMenu {
    		display:block;
    	}
    	#topMenu:target .showMenu,
    	#topMenu ul {
    		display:none;
    	}
    	#topMenu:target ul {
    		display:block;
    	}
    	#topMenu li a {
    		display:block;
    		padding:0.5em 1em;
    		margin:0;
    		border:0;
    		border-bottom:1px solid #FFF;
    	}
    }
    Code (markup):
    Not sure what you are really planning for layout so I took a wild guess. Figured at the very least since you were colouring the footer I'd give it a 100% min-height with flex, and like all good layouts I made it elastic, semi-fluid and responsive.
     
    deathshadow, Apr 10, 2015 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    I just added a live demo of that to my server:
    http://www.cutcodedown.com/for_others/wiseguy/template.html

    as with all my examples the directory:
    http://www.cutcodedown.com/for_others/wiseguy/

    Is unlocked for easy access to the gooey bits and pieces.

    Oh, and I didn't point out how I used :target to create the mobile version of the show/hide menu. It's a slick trick that's really easy to implement and a bit more reliable (and far more semantically correct) than abusing a checkbox when you don't even have a form.

    I'd have added that sooner, but for some jacktard reason namecheap went and added their parking domain to the end of my hosts list overriding my manual addresses -- took me a bit to track down why the domain was rejecting requests. :/
     
    deathshadow, Apr 10, 2015 IP
  7. wiseguy

    wiseguy Member

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #7
    I truly appreciate all the the work you have put in trying to help me. I have tried CSS layouts but I just keep running into one problem after another. With tables I can make my pages look exactly like I want them, they work with all browsers, and validate without errors at W3C. I'm in the process of changing them over to strict XHTML. I liken tables to my 1957 Chevy. It uses outdated technology but it runs fine and gets me where I need to go.

    I have tried to incorporate your version of the menu, which I like much better, into my table layout but I can't get it to work.

    Thanks again.
     
    wiseguy, Apr 10, 2015 IP
  8. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #8
    What you need to do is get out of the crapload that is tables for layout, and enter the 21st century (or even the 20th) - it's really not that hard, but you have to make some concessions - amongst other that you cannot control exactly how the page looks in all browsers and renderings - it will still look like your page, but there might be issues. And the statement "look exactly like I want them, they work in all browsers" are plain wrong. Try it on a safari-install on an iPhone 4, for instance. I bet it's not very user-friendly. Or try to make sense of the content on a text-only browser. Tables for layout is completely wrong, and horrible, horrible code.
     
    PoPSiCLe, Apr 10, 2015 IP
  9. wiseguy

    wiseguy Member

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #9
    The number of visitors to my sites that use a Safari browser is less than .01% and about the same for text only browsers. Not worth being concerned about. When you can prove to me that my pages do not display properly on the vast majority of browsers then I'll give some credence to your assertion that tables are "horrible code". As of right now I know that they simply work and work well.
     
    wiseguy, Apr 10, 2015 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Which indicates you've got some deep rooted issues since 40%+ of web traffic is now mobile and a good third of that is iOS. You have to be asking yourself "Am I getting no traffic from that from lack of interest, or am I getting no traffic because it doesn't work?" -- you could be being penalized by search resulting in your traffic only being "old traffic".

    Though really in this case the tables thing is a matter of "tables for NOTHING" and to be frank, ignorance on how to build a website. If you only have one TD per TR (you forgot to open the first TR BTW) there is NO REASON TO BE USING A TABLE IN THE FIRST PLACE. That's not tables for layout, that's just pointless bloat and pointless wrappers. There is NO reason to EVER do that!

    Well apparently you've never tried to view your site at 120dpi or some other non-standard metric, never tried viewing what you've been writing at a display size smaller than or equal to 1024px, and completely fail to grasp all the advantages of the past decade and a half of development progress. Hell just go into chrome and pull up the emulation modes for various Android and iOS devices and watch it fail, fail, fail!

    ... and that outdated buggy methodology you are defending is precisely why trying to cut/paste the modern code I provided into it is NOT going to work without a lot of fiddling and hacks that you shouldn't waste time with in the first place! If you are writing websites that way, STOP, back the *** away from the keyboard, and take the time to bother learning how to write HTML properly instead of sleazing out pages using bleeding edge of 1997 methodologies that were broken THEN!

    You compared it to a '57 Chevy, when what you have is a 1987 Yugo GV built for the North American market. -- It's more than surprising it's still on the road, it's shocking anyone would bother to keep it on the road.
     
    deathshadow, Apr 10, 2015 IP
  11. wiseguy

    wiseguy Member

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #11
    Go to http://www.karaoke-tutor.com with a desktop browser and you will see it displays properly. Then go to the same address with a mobile browser or emulator and you will see it displays properly there as well because you will be redirected to a responsive mobile version of the site. You will NOT see it fail, fail, fail. I don't know where you get your stats from but StatCounter shows that less than 10% of the visitors to my site are viewing at less than 1024. I have that 10% covered anyway. The mobile version of my site passes the Google mobile friendly test. Things either work or they don't. Newer isn't always better.
     
    wiseguy, Apr 10, 2015 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #12
    1) I'm NOT being redirected since LINK and MEDIA don't work that way.

    2) If you have to play redirection games and maintain two versions of the site you have COMPLETELY missed how mobile even works.

    3) If that's your ideal of "works" you have serious issues understanding the word since again it falls apart miserably here on everything from phones to netbooks to even desktop.

    The endless pointless scripttardery, utter lack of graceful degradation, twice the code needed for such a simple page, lack of elastic design, responsive design, or just plain proper use of HTML tags and I'd be shocked if the page isn't slapped down by search for abuse and was useful to more than 20% or so of your potential audience. Much less the goofy "two versions of the site" BS and mix-match of 3 generations of code NEVER meant to work together makes it an accessibility train wreck.

    Take your home page, there is NOTHING going on there except perhaps the social media stuff that warrants the presence of scripting, and given that NONE of those social links actually work in FF I'd be swinging an axe at the scripttardery on those. (I'd sooner eat a bullet than crap on a website with "addthis")

    Apart from the social media links, there is NO reason for the markup for that to be more than:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <meta
    	name="viewport"
    	content="width=device-width; height=device-height; initial-scale=1.0"
    />
    
    <meta
    	name="Description"
    	content="Free karaoke articles and tutorials. Information on cdg discs, computer karaoke, and sound system components."
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Karaoke Articles and Tutorials: All the Karaoke Information You Need
    </title>
    
    </head><body>
    
    <div id="top">
    
    	<h1>
    		<a href="/">
    			Karaoke-<span>Tutor</span>.com<br />
    			<small>All the karaoke information you need.</small>
    		</a>
    	</h1>
    	
    	<div id="social">Social media placeholder</div>
    	
    	<ul id="mainMenu">
    		<li><a href="index.html">Home</a></li>
    		<li><a href="karaoke-articles.html">Articles</a></li>
    		<li><a href="karaoke-tutorials.html">Tutorials</a></li>
    		<li><a href="http://www.karaoke-tutor.com/forum/">Forum</a></li>
    		<li><a href="chat/">Chat</a></li>
    		<li><a href="contact.html">Contact Us</a></li>
    		<li><a href="about.html">About Us</a></li>
    		<li><a href="sitemap.html">Sitemap</a></li>
    	</ul>
    	
    	<div class="columnWrapper">
    		
    		<div class="contentWrapper"><div id="content">
    			<h2>Welcome to Our Karaoke Tutorial Site</h2>
    			<p>
    				If you are simply looking for some karaoke information without being bogged down with a lot of technical jargon then you have come to the right place. For those who are starting a new karaoke entertainment business there are tutorials on building your system, running a show, running a contest, promoting your business, and more. You will also find complete <a href="mp3g.html">MP3+G&#8482; information</a>.
    			</p><p>
    				The <a href="karaoke-at-home/index.html">home karaoke</a> enthusiast will find information on the various home setups. You will learn how to have a karaoke system in your recreation room that will rival the sound of the professional systems. Find out how you can have a karaoke laptop computer just like the pros use.
    			</p><p>
    				Our karaoke forum has hundreds of members and is a great place to communicate with other karaoke enthusiasts. Whether you're a professional KJ, or just like to have karaoke in your home, you will find all the karaoke information you need here. Feel free to <a href="contact.html">contact us</a> with any karaoke related questions.
    			</p>
    		<!-- #content, .contentWrapper --></div></div>
    		
    		<div id="extras">
    			
    			<hr />
    			
    			<!-- put the bloody forms here not a bunch of scriptard BS! -->
    			<form id="formSearch" action="search.php">
    				<fieldset>
    					<label for="searchText">Search This Site</label>
    					<input type="text" id="searchText" name="sw" />
    					<input type="submit" class="submit" value="Search" />
    				</fieldset>
    			</form>
    			
    			<form id="subscribe" method="post" action="http://www.karaoke-tutor.com/lists/?p=subscribe&amp;id=1">
    				<fieldset>
    					<label for="subscribeEmail">Join Our Mailing List</label>
    					<input type="text" id="subscribeEmail" name="email" />
    					<input type="submit" class="submit" value="Subscribe" />
    				</fieldset>
    			</form>
    			
    			<a href="amazon-karaoke-store.html" class="store">
    				Visit our <span>Amazon</span> Karaoke Store
    			</a>
    			
    		<!-- #extras --></div>
    		
    	<!-- .columnWrapper --></div>
    	
    	<hr />
    	
    	<div id="footer">
    		Copyright 2015 Karaoke-Tutor.com<br />
    		MP3+G&#8482; is a trademark used with permission by TriceraSoft
    	<!-- #footer --></div>
    	
    <!-- #top --></div>
    
    </body></html>
    Code (markup):
    ... and that SINGLE markup would be for BOTH mobile and desktop. That wierd-ass redirect "alternate" crap you are pulling with the LINK tag is COMPLETELY missing the point of even having media queries in the first place!!! The whole point is to have ONE markup formatted for all conceivable targets by CSS, not having multiple HTML files for NOTHING! Hell, if you take into account device neutrality it's the ENTIRE REASON TBL CREATED HTML IN THE FIRST PLACE -- no matter how badly Nyetscape and Microshaft pissed all over that with HTML 3.2 and the proprietary nonsense that worked it's way into 4 tranny during the browser wars.

    Making dinner, but gimme a few and I'll belt out the CSS that would make that work just to show you what I'm talking about. (and probably what @PoPSiCLe is talking about too!)
     
    deathshadow, Apr 10, 2015 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    ... and this is how I'd have written your main page:
    http://www.cutcodedown.com/for_others/wiseguy/mainSite/template.html

    As with all my examples the directory:
    http://www.cutcodedown.com/for_others/wiseguy/mainSite/

    ... is wide open for easy access.

    For responsive design you don't have enough menu items for me to bother with the show/hide trickery. I'd just let them show in flow as they're not THAT big.

    It was created with semantic markup and separation of presentation from content, meaning the media queries can be used to target all the places the layout breaks as the device changes. The result is a semi-fluid elastic layout.

    So normal 96dpi desktop users get:
    http://www.cutcodedown.com/for_others/wiseguy/mainSite/whatUsersGet/desktop96dpi.jpg

    But as proof it's elastic, 120dpi/125%/Large Font/8514/Win7+ Medium Font users get:
    http://www.cutcodedown.com/for_others/wiseguy/mainSite/whatUsersGet/desktop120dpi.jpg

    Notice the fonts and layout enlarge, but the image does not. (so no fugly blurring of the image by the auto-scaler)

    As the display gets narrower the layout changes to match it -- hence the "semi-fluid" part:
    http://www.cutcodedown.com/for_others/wiseguy/mainSite/whatUsersGet/desktopMinWidth.jpg

    As it gets even narrower the first media query kicks in re-arranging things:
    http://www.cutcodedown.com/for_others/wiseguy/mainSite/whatUsersGet/firstQuery.jpg

    Where I made it a 100% min-height layout moving the footer to the bottom IF (and only if) the display is bigger than the content... and stripped off the columns to re-arrange those side items to fit better and adjust the menu.

    Going even narrower:
    http://www.cutcodedown.com/for_others/wiseguy/mainSite/whatUsersGet/secondQuery.jpg

    We center the logo and social media stuff since there's not enough room to fit them side-by-side.

    Once it gets REALLY narrow we adjust yet again to make everything one column:
    http://www.cutcodedown.com/for_others/wiseguy/mainSite/whatUsersGet/thirdQuery.jpg

    Which should cover 99.99% of potential visitors and their device capabilities. THAT'S what media queries are for!

    Of course, since it was built with progressive enhancement and PROPER semantics non-CSS users aren't sitting their scratching their heads:
    http://www.cutcodedown.com/for_others/wiseguy/mainSite/whatUsersGet/noCSS.jpg
    (excuse the big fonts, that's my 120dpi setting)

    ... and again, progressive enhancement so images blocked:
    http://www.cutcodedown.com/for_others/wiseguy/mainSite/whatUsersGet/imagesBlocked.jpg

    The page is still reasonably attractive and useful.

    Oh, I had to add one extra DIV for the min-height layout not to screw up the header as I used flex-box to do it. Flex is very promising, but it can be a real unpredictable pain in the ass sometimes. (actually took me a bit to figure out why the float on the H1 suddenly stopped working!)

    Does that explain the advantages of what we're talking about? If you like I can give you a section by section explanation of the how/what/why of it.
     
    deathshadow, Apr 10, 2015 IP
    PoPSiCLe likes this.
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #14
    Oh and side note, what are all those files that are 404 and/or blocked and the image maps there to accomplish?
     
    deathshadow, Apr 10, 2015 IP
  15. wiseguy

    wiseguy Member

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #15
    If you weren't being redirected it's either because your browser doesn't support javascript or your screen width was over 768.

    Having separate mobile pages with redirects is one of the ways Google recommends handling mobile devices. There are a large number of sites that use this tactic as evident by the frequency of m. subdomains. Search engines like Google don't care about the type of coding you use. If the pages validate, which mine do, and the mobile pages pass their "mobile friendly test", which mine do, they will crawl and index them just like any other site.

    I'll admit that the responsive design you created for the index page of my site looks and works great. But that is an intro page with little content. I'm wondering how it would work on a page like http://www.karaoke-tutor.com/transfer-cdg-to-hard-drive.html

    In the end, I don't know if I have the time to learn this type of design. Right now it's all like a foreign language to me. I certainly do appreciate the time you have taken to enlighten me on the possibilities.
     
    wiseguy, Apr 12, 2015 IP
  16. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #16
    Given that your layout is barely 1024 friendly that seems a really weird breakpoint... but I'm not even seeing a difference between what that is supposed to redirect to and/or what that "see mobile" link at the top goes to and the desktop version; if that's your idea of what a mobile layout is, you don't know what a mobile layout is.

    NEITHER of your layouts is the least bit useful on my three testing phones, either tablet (7" and 11"), or the netbook. They aren't useful on my large displays either without diving for the zoom, keyboard navigation is busted, the lack of document structure makes it useless in JAWS, etc, etc...

    Like... ten years ago when people were still dicking around with WAP/WML (and failing miserably because of it). That's old school thinking -- do you have a link to said "recommendation". Of course if you're relying on scripttardery for layout you're just making an even bigger mess of things that WON'T be delivered to a LOT of mobile users since many block scripting on mobile because it chews on the battery like candy.

    NOT that I'm taking Google's "web developer" stuff all that seriously anymore since the past two years it's like they've been crapping where they sleep; contradicting everything their own anti-spam team keeps telling us. Just look at how pagespeed went from being a minor but useful tool into a giant scam "service" that makes fast sites slower, slow sites mediocre, and utterly and completely destroys the accessibility of websites. It's like they've gone schizophrenic. (though the whole left hand doesn't know what the right is doing is commonplace once companies get that big!)

    Again though that's old thinking that should have gone the way of the dodo the day responsive design was made. It's a waste of time, waste of bandwidth and waste of effort; and has little if any actual accessibility!

    Though proper semantics CAN up-rate you on certain terms; don't forget different tags get different weights... and it's not just about search, it's about accessibility something your coding practices sorely lacks because, well to be frank you never learned to use HTML properly.

    Only because you are using tranny and have 90%+ of the generated (gibberish) code hidden behind scritptardery... and scripttardery for NOTHING at that; see those two forms where the generated content has HTML 5 mixed into your X1 tranny document. That's invalid and shouldn't validate; the generated code for those forms being some of the biggest gibberish out there; what with it putting a LINK into BODY (invalid), STYLE into BODY (invalid), endless pointless layer crap with tags and attributes that don't even EXIST (mated to those halfwit idiotic HTML 5 "data-" attributes)... much less AGAIN the stupid malfing re-re "one TD per TR" meaning there is NO excuse to even be wasting bandwidth on tables in the first blasted place.

    There is SO much code there that must have taken forever to implement (scripttardery and tables for nothing) that serves no legitimate purpose. I mean seriously, have you seen the REAL markup for the page and/or tried to run it past validation? If you are getting past the validator and Google's silly little (ridiculously forgiving) mobile check, it's either out of blind luck or because they aren't seeing all the garbage the scripttardery is vomiting up.

    Add the "web developer toolbar" to FF, load up your home page, and go to "View Source -> View Generated Source" -- be prepared to get ill. If what you see doesn't make you sick, it might be time to back away from the keyboard.

    Well, that's a page with too much content (remember, 3 folds at 1080 is the time to split it into multiple pages) and is filled with massive images I wouldn't put into a static page in the first place. I would rewrite that content to be smaller (probably 256px wide) thumbs linking to your full size images. (static links for JS off, lightbox style attaching to the markup JS on) ... Those images are not "accessibility friendly" in their design placement and reeks of fixed width layout thinking... and fixed width layout thinking is accessibility trash.

    Sadly that is because you've been led down the garden path by fifteen to eighteen year old development techniques that were NEVER the proper way of doing things in the first place, no matter how much Nyetscape and Microshaft tried to promote them during the browser wars. IF you had been using PROPER semantic markup, separation of presentation from content, logical document structure, media targets, progressive enhancement so you have graceful degradation, stayed the hell away from "JS for nothing" and bothered following even the simplest of accessibility guidelines like elastic and semi-fluid layout... well, then mobile through adding responsive design would simply be the next logical step and take maybe 20 minutes to implement site-wide.

    BUT, if you are still vomiting up tranny, don't know how to use numbered headings and rules to provide logical document structure, still think in fixed width design and dive for the scripting for even the simplest of tasks, never having embraced HTML 4 STRICT / XHTML 1.0 STRICT or bothered paying attention to things like the WCAG.... well, then je chaq vaj Hol nov!

    We've been building towards this for fifteen years, but so many people insist on keeping their heads up 1997's rump, their attempts to do even the simplest of things like target mobile are doomed to failure. Something made even sadder by HTML 5 trying to drag everyone back to the worst of 1997 practices the same time CSS3 is trying to drag us kicking and screaming into the light.
     
    deathshadow, Apr 13, 2015 IP
  17. wiseguy

    wiseguy Member

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #17
    The links to the mobile version were just temporary until I figured out the best way to redirect. If you were on a mobile page you would see that it has the m. subdomain in the url.

    I have an iPhone, an iPad, and a desktop and my wife has a Blackberry and a Kindle. I can view my site just fine in all of these. I have no idea what you're seeing. Also, I receive dozens of emails every day from my site visitors. They are typically quick to notify me of broken links, a missing image, or other errors. Not one single time has anyone told me that they were not able to view my site properly.

    Go view the generated source at Yahoo.com. It has 50 times more crap showing than any page on my site. Did they build their site wrong. Just use the standard view source at Facebook, probably the most viewed website on the planet. They use tons of javascript and things you refer to as garbage. Do they also not know how to build a website?

    I think you are just very anal about the strict conformity to CSS3 standards. The vast majority of website designers are not.
     
    wiseguy, Apr 13, 2015 IP
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #18
    Which seems to be redirecting BACK to www. -- which means something is really hinky with the scripttardery... which again is why you don't use scripting for that... ever.

    Testing in Chrome's emulation I get pretty much what I get on my devices, and yes, scripting enabled; it's funny as the netbook tries to go to the m. subdomain, but immediately gets kicked back to www. If I manually enter the m. subdomain on these devices, I get kicked back to www. On the cubot 5" phone and icoo 7" tablet (both android 4.2, icoo running cyanogenmod) I am unable to zoom out or scroll left or right, on the third gen ipod I can zoom out, can't zoom back in after zooming out... and the netbook, well the experience there is just totally banjaxed.

    This is basically what I'm seeing as Chromes emulation is inline with the actual devices:
    http://www.cutcodedown.com/for_others/wiseguy/whatIsee/

    ... and again, if that's your idea of "working"; I've not seen anyplace recommend using scripttardery for that since the WML days, and anyone suggesting that approach -- and I don't care if they work for Google, or even the W3C at this point -- doesn't know enough about HTML, CSS or accessibility to be telling you how to do a blasted thing! You've been packed so full of sand on this you could change your name to Sahara!

    Then you've either been extremely lucky, or the people for whom it's not working can't be bothered to try and even use the site enough to tell you. I know from what I've seen of your site on desktop and mobile I'd be an instant bounce without a second thought.

    YES, there's a reason Jon Stewart was able to joke on "The Word" -- "I for one am shocked; Yahoo still has customers?"[/url]

    Given the accessibility disaster their site is, pretty much.

    In the case of both of those examples they are stunning examples of content that users will mainline like junkies forgiving a multitude of sins that pisses off just as many users. Facebook leaves me diving for the zoom and screaming at the display; if it wasn't where most everyone else is at this point I'd have abandoned it long ago. The LACK of content and the same scripttardery --- in fact worse scripttardery and "accessibility, what's that?!?" is what has relegated Google+ and every attempt at replacing it to "also ran" status.

    They are poster children for everything wrong with web development, and why the majority of websites sleazed together with the endless scripting for NOTHING and bleeding edge of 1997 practices has me ready to either go on a shooting rampage, or rip the bloody cable out of the wall and just say **** it!

    The vast majority of people crapping out websites and calling themselves "designers" not being qualified to wipe their own ass, much less anyone else's. But sure let's just throw the specifications in the trash, ignore all the progress of the previous decade, and basically say **** you to people actually USING websites!

    While we're at it, how about we go around with black spraypaint spraying over the marks in handicapped spaces, run a bulldozer over all the handicapped ramps, rip the braille off public bathrooms and public phones, and shoot all the seeing eye dogs as a public nuisance.

    Why not, given the attitude that's come to the forefront in not just web design but society as a whole (yes fundies I'm looking at you) we may as well just all go out and do that. Sad when burning crosses on lawns would be a step UP in social morality!

    Sorry if that seems harsh, but again to be brutally frank and honest (aka the virtue nobody actually thinks is a virtue anymore) that's what all the Lame excuses people come up with for crapping out their retard useless inaccessible broken sites sounds like to me. There's a reason there are quite a few "names" in the industry right now that I'd love to take round back o' the woodshed with a 8 guage and put them down like old Yeller.
     
    Last edited: Apr 13, 2015
    deathshadow, Apr 13, 2015 IP
  19. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #19
    Both Yahoo and Facebook are horribly coded - and does not at all work without enabling javascript (at least doesn't work very well) - the Facebook API (the previous one, not the current) provided means to access the information on the page, however the new one doesn't, which leads to big problems for people using alternative methods - like eye-tracking. Facebook have realized this, and is working on solving the problem, but it should't be a problem to begin with. The only reason they get away with it is that they're so big they can do pretty much whatever they please.
    That they're horribly coded isn't an excuse for doing a horrible job of coding yourself, though - granted, if you're just starting doing CSS-design, instead of tables for layout-design, it can be a bit daunting, and you're probably not gonna get everything right the first 50-60 tries - but even when it's not very good, it's usually better than tables (for instance) or a million lines of javascript code to do what could easily been done in html/css.
    For more information and more cursewords, I refer to @deathshadow s post above ;)
     
    PoPSiCLe, Apr 13, 2015 IP
  20. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #20
    The laugh being that's the watered down version after five edits and proofreads.
     
    deathshadow, Apr 13, 2015 IP