CODEWITHSUNDEEP
htmlcss
codyc4321
codyc4321

Reputation: 9682

Using div inside p tag loses my styles

I have a page where I want to represent a URL to the student (but not have browser defaults, like changing to a pointer on hover, etc), and I am losing my styles by wrapping the text in div. I have

index.html:

<p>
    we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
    <div style="color:blue;">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>

styles.css:

body {
    background: #f0f0f0;
    width: 80%;
    margin: 0 auto;
}

h1 {
    text-align: center;
    margin-top: 35px;
    margin-bottom: 60px;
}

p {
    font-size: 20px;
    font-family: sans-serif;
}

.cl {
    margin: 38px;
    padding: 25px;
    background: #f8f8f8;
    font-family:DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
    font-size: 12px;
  }

.fake-url {
    color: blue;
}

Most recently I had tried using .fake-url in the div,

<p>
    we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
    <div class="fake-url;">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>

and after that I did

p, p div {
    font-size: 20px;
    font-family: sans-serif;
}

enter image description here

Upvotes: 0

Views: 1127

Answers (3)

SamDev
SamDev

Reputation: 11

<p>
    we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
    <div class="fake-url">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>

Just removing the ; from the class name in the div will fix it.

Upvotes: 1

Ouroborus
Ouroborus

Reputation: 16894

<div> elements don't belong inside <p> elements. Browsers usually rework this so that the <p> element is closed just before the <div> element and then opened again just after. This effectively splits your paragraph into two pieces, one before the <div> and one after.

Instead, use a <span> or, more appropriately, a <a> element.

MDN has an entry that mentions this. Specifically, in the section marked "Tag omission", it mentions that if an opening <p> element is followed by an opening <div> element then the paragraph is implicitly closed.

Upvotes: 2

VdeVentura
VdeVentura

Reputation: 2101

I'd like to suggest you to use a span instead of a div, div are block elements in the other hand spans are inline elements and fit better in the context you want to use it.

And as someone mentioned above, you have an extra ; inside the div's class

Upvotes: 2

Related Questions