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.

Please help me replace this h1 tag

Discussion in 'CSS' started by Divvy, Nov 6, 2015.

  1. #1
    Hello guys,

    Maybe someone can help me...
    I need to remove the h1 tag in the following code but I need to keep the css code from class.
    How can I do it?

    
    <div class="header-container clearfix">
            <div class="container header-banner">
            <?php if ( is_active_sidebar( 'sidebar-3' ) ) : ?>
                    <?php dynamic_sidebar( 'sidebar-3' ); ?>
            <?php endif; ?>
            <div class="col-md-4 mobile-menu">
               <div class="mr-menu-opt"><a href="#" id="mr-toggle-menu"><img width="60" height="60" src="<?php echo get_template_directory_uri();?>/images/menu-icon.png"></a></div>
                <h1 class="mr-logo"><a href="<?php bloginfo('url'); ?>">
                <?php if ( get_theme_mod( 'themeslug_logo' ) ) : ?>
                <img width="235" height="110" src='<?php echo esc_url( get_theme_mod( 'themeslug_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'>
                <?php else : ?>
                    <?php bloginfo( 'name' ); ?>
                <?php endif; ?>               
                </a></h1>
    
    Code (markup):
    CSS of class="mr-logo" is:
    .header-banner .mr-logo{clear:unset!important;float:right;height:60px;max-width:70%}.mr-logo img{height:100%;width:100%}
    
    @media only screen and (min-width:480px) and (max-width:980px){.mr-menu-opt{float:left;width:45px;display:inline-block!important;margin-top:10px}.mr-menu-opt img{max-height:100%}.header-banner .mr-logo{clear:unset!important;float:right;height:60px;max-width:70%}.mr-logo img{height:100%;width:100%}
    Code (css):
    If I replace <h1 class="mr-logo"> with <div class="mr-logo"> will do the trick?
    Or I need to do anything else?

    Waiting for your help, thanks :)
     
    Solved! View solution.
    Divvy, Nov 6, 2015 IP
  2. Towab Muhammad Yusuf

    Towab Muhammad Yusuf Member

    Messages:
    71
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #2
    H1 {
    color: #999999;
    font-family: arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 1px;
    }.
     
    Towab Muhammad Yusuf, Nov 6, 2015 IP
  3. Divvy

    Divvy Well-Known Member

    Messages:
    771
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #3
    Hey buddy, thank you or your reply and for trying to help me :)

    I think you didnt understood what I want, I need to remove h1 tag from the code above... but keep the class in there.
     
    Divvy, Nov 6, 2015 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #4
    Of course it will do the trick. Don't forget to change the closing tag too (</div> instead of </h1>).
     
    qwikad.com, Nov 6, 2015 IP
  5. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #5
    May I ask why in the world you want to remove the H1-tag? The code you pasted is horrible, but to me it seems like the correct place to use a H1 - for the main heading of the page/site?
     
    PoPSiCLe, Nov 6, 2015 IP
  6. Divvy

    Divvy Well-Known Member

    Messages:
    771
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #6
    Thank you for your reply guys

    PoPSiCLe, because Im getting too many h1 duplicates in my pages and the problem is this h1 tag in my header logo.
     
    Divvy, Nov 6, 2015 IP
  7. #7
    Then you should probably be fixing the other ones, not the one in the template.

    WHY? Because unless you are following HTML 5's halfwit broken new structural rules with the equally stupid <section> tag, there should only be one H1 on a page, and that H1 should be the heading under which EVERYTHING on the page is a subsection. That's what it means, it does not mean "this is the main article" or anything of that nature.

    It's why a H1 shouldn't even NEED a ID or class.

    Remember, H1 is the topmost heading that everything on the page is part of, it's like how on a newspaper or book the title of the paper or book is at the top of ever page or fold-pair. H2 indicate the start of subsections of the h1, h3 indicate the start of subsections of the h2 preceding them, and so forth down the line. They do NOT mean "text of different sizes"!

    <hr> even has the semantic meaning of a change in topic or start of a section where a numbered heading is unwanted or unwarranted -- it does not mean "draw a line across the screen"!

    That's why skipping heading levels (like jumping to a H5 when there's no H4, H3, or H2 before it) is gibberish, that's why having heading out of order (like having a H2 before the H1) is gibberish, and that's why pairing a title and tagline together as a pair of heading tags is gibberish.

    Which the whatWG showed their utter and complete ignorance of with their now defunct <hgroup> tag... when they couldn't even get something as simple as that correct, we're really supposed to trust the ALLEGED semantics of the rest of their pointlessly redundant code bloat asshattery? Hell if headings indicate the start of sections and subsections, why do we need a <section> tag? Much less if UA's would implement heading navigation like they were supposed to over a decade and a half ago we wouldn't need <nav>, <header>, <footer> or <article> either!

    The logo/site title is the most likely candidate to be the h1 for your document structure to make even the LEAST bit of sense. All your other headings should be h2 or lower, depending on how they are organized.

    For example:

    <h1>Site Title</h1>
    
    <h2>Latest News</h2>
    
    <h3>
    	<span>7 November, 2015</span>
    	This is how you use headings properly
    </h3>
    <p>
    	Article text would go here
    </p>
    
    <h3>
    	<span>6 November, 2015</span>
    	Another article title
    </h3>
    <p>
    	Prince Proximo picked prickly pears by the Pontar
    </p>
    
    <h2>About Us</h2>
    <p>
    	Blah, blah, blah
    </p>
    
    <hr>
    <p>
    	Footer text / disclaimer goes here!
    </p>
    Code (markup):
    See how the headings "fan out" like a tree? The web developer toolbar for FF can even show you the "document outline" of your page where you can see if the section/subsection headings even make any sense. Classic Opera before they went and pissed all over it by slapping their logo on Chrome any-old-way was the only browser to do it, but it had keyboard shortcuts to let you quickly hop between headings the same way tab/shift-tab moves you between anchors and inputs; something that technically all browsers were supposed to do but Nyetscape and Microshaft removed from browsers when they both forked Mosaic. (... and boy, they forked it hard from both ends)

    Of course, as mentioned that code is utter and complete rubbish; I find it highly unlikely that both of those DIV are needed, those look like presentational images so they have ZERO malfing business in the markup in the first place, that STUPID ***ING MOTHER **** BUCKET opening and closing of PHP willy-nilly just to make the code more complex for nothing, the pissing all over the place with classes so typical of mouth-breathing halfwit framework BS like bootcrap... (seriously, go find a stick to scrape that off with before tracking it all over a website's carpets)

    I am highly doubtful that should be much more than:
    <?php
    	echo '
    <div id="top">', (
    	is_active_sidebar('sidebar-3' ) ? dynamic_sidebar('sidebar-3') : ''
    ), '
    	<h1>
    		<a href="/">
    			<span></span>
    			', bloginfo('name'), '
    		</a>
    	</h1>';
    Code (markup):
    The empty span being there for use as a Gilder-Levin type image replacement sandbag.

    If the rest of the page is as big a mess of how NOT to code a website, well you've likely seen me say this several dozen times already; throw it out and start over from scratch, there's little if anything worth trying to salvage from that mess.

    Though is that turdpress? If so you're already pretty well shtupped on semantics and sane/rational HTML with it's broken methodologies.
     
    deathshadow, Nov 7, 2015 IP
  8. dblane4

    dblane4 Member

    Messages:
    27
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    28
    #8
    you can replace h1 tag with
    <div class="mr-logo"> 
    Code (markup):
     
    dblane4, Nov 7, 2015 IP
  9. Divvy

    Divvy Well-Known Member

    Messages:
    771
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #9
    Thank you very much for your reply and explanation deathshadow, I understood totally what you mean.
    Now I see that is a bad idea to remove the h1 tag from header, is the only one that is correct.
    Im going to fix all others instead.
     
    Divvy, Nov 8, 2015 IP