CODEWITHSUNDEEP
htmlcss
diegoaguilar
diegoaguilar

Reputation: 8376

Why changing the id of an article HTML element breaks CSS style?

I downloaded a HTML template, started modifying some items and first thing I want to do is to change the id attribute for an <article> element.

I only changed that, and so the site appeareance changed to not a desired one. Console shows any CSS issues.

This is original HTML part of code I'm interested:

<!-- Nav -->
    <nav id="nav">
        <a href="#me" class="fa fa-home active"><span>Home</span></a>
        <a href="#work" class="fa fa-folder"><span></span></a>
        <a href="#email" class="fa fa-envelope"><span>Email Me</span></a>
        <a href="http://twitter.com/daguilaraguilar" class="fa fa-twitter"><span>Twitter</span></a>
    </nav>

<!-- Main -->
    <div id="main">

        <!-- Me -->
            <article id="me" class="panel">
                <header>
                    <h1>Diego Benjamín <br><br> Aguilar Aguilar</h1>
                    <!-- <span class="byline">Senior Astral Projectionist</span> !-->

And just changed:

<a href="#start" class="fa fa-home active"><span>Home</span></a>
<article id="start" class="panel">

This are the visual changes:

enter image description here enter image description here

What's that I'm missing or should fix?

EDIT

Right after comments I went and saw CSS file and found out:

/*********************************************************************************/
/* Panels                                                                        */
/*********************************************************************************/

    #main
    {
        position: relative;
        overflow: hidden;
    }

    .panel
    {
        position: relative;
    }

    /* Me */

        #me
        {
        }

            #me .pic
            {
                position: relative;
                display: block;
            }

Upvotes: 1

Views: 852

Answers (5)

Dropout
Dropout

Reputation: 13866

This is probably happening because some elements in your CSS are targetted as shown below

#foo .bar{
}

This means that it affects elements with the class bar inside of the element with ID foo. That's why changing of an element's ID can really mess up it's content's style.

Upvotes: 2

Albzi
Albzi

Reputation: 15609

This is because the id me is being styled in the CSS.

Taken from the CSS (I downloaded it):

#me
{
}

#me .pic
{
   position: relative;
   display: block;
}

#me .pic:before
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: url('images/overlay.png');
    width: 100%;
    height: 100%;
    z-index: 1;
}

Basically, if you want to change the #me ID, you have to go into the CSS style sheets and change it there too.

Update

There are various different stylesheets. I took that snippet from style.css, however there is also style-desktop.css that has various different #me styled in. My recommendation is to go through every css file and edit every instance of #me to be what you want.

Upvotes: 2

enguerranws
enguerranws

Reputation: 8233

Replacing the ID broke the styles related to your #home element.

Open your CSS file, and rename all #home in #me.

Upvotes: 2

Sahil Popli
Sahil Popli

Reputation: 2003

You have to change that thing in CSS file too.

The styles applied with id in the CSS, like #article-id .child{some :style; }

What you changed in the HTML may reflect the same in CSS too.

Upvotes: 2

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Like commented by Hamed Ali Khan, the id is probably used in the stylesheet.

In your stylesheet you should change all styles that contain #me to #start.

Or you could add an extra class to the element. For example <article id="start" class="extraStyle panel">. Then you should change all #me to .extraStyle.

Upvotes: 2

Related Questions