CODEWITHSUNDEEP
htmlcss
ZooKeeper
ZooKeeper

Reputation: 1

HTML Border Placement

I'm fairly new to Html and am attempting to place items in a list into boxes. However, upon trying to use a style class as opposed to hard writing it for each item, the text is no longer placed within the box. This problem also only occurs when I center the text, which is a requirement. Given that it is just a small file I have pasted the entire code into the question. 

.EventBorder {
  border: 3px;
  border-style: solid;
  border-color: #287EC7;
  padding: 2em;
}
<h1>
  <center>Itineree</center>
</h1>
<h2>
  <center>~ <i>Plan Your Brisbane Event Schedule</i> ~</center>
</h2>

<h4>
  <center>Below is a Visual Itinerary of the Events you have Selected</center>
</h4>

<p class="EventBorder">
  <center>Event 1: This is List Option 1</center>
</p>
<p class="EventBorder">
  <center>Event 2: This is List Option 2</center>
</p>
<p class="EventBorder">
  <center>Event 3: This is List Option 3</center>
</p>
</ul>

I just want the text inside the border.

Upvotes: 0

Views: 154

Answers (4)

Quentin
Quentin

Reputation: 943561

Your problem would be revealed if you had used a validator.

The <center> element (which was superseded by CSS in 1996) cannot be a child element of a <p> element.

Consequently, the <center> start tag implicitly ends the <p> element, so it and the text inside it are not inside the <p> and are thus outside the border of it.

Upvotes: 3

Alex Mulchinock
Alex Mulchinock

Reputation: 2269

As pointed out by j08691, <center> isn't in use anymore. Also - a list element should only contain <li> tags.

A better option would be this:

h1, h2, h4 {
    text-align: center;
}

.events {
    list-style: none;
    padding: 0;
}

.events li {
    border: 3px;
    border-style: solid;
    border-color: #287EC7;
    padding: 2em;
    text-align: center;
}
<h1>
    Itineree
</h1>
<h2>
    ~ <i>Plan Your Brisbane Event Schedule</i> ~
</h2>

<h4>
    Below is a Visual Itinerary of the Events you have Selected
</h4>

<ul class="events">
    <li>
        Event 1: This is List Option 1
    </li>
    <li>
        Event 2: This is List Option 2
    </li>
    <li>
        Event 3: This is List Option 3
    </li>
</ul>

Upvotes: -1

jnbjarni
jnbjarni

Reputation: 74

You have a couple of errors in your HTML, but I recommend getting rid of the center tag and using css instead. Also you have a closing ul tag at the end in your body tag which you should remove.

You can add yourElement{text-align: center} for the same results.

Upvotes: 1

Kelvin
Kelvin

Reputation: 319

The <center> tag is technically supported, but it's recommended to not use it anymore. (Thanks @Quentin for clarifying)

You can just remove the tag and instead use text-align: center to center the text for the .EventBorder class and headers.

h1, h2, h4, .EventBorder{
   text-align: center
}

.EventBorder {
  border: 3px;
  border-style: solid;
  border-color: #287EC7;
  padding: 2em;
}
<h1>
  Itineree
</h1>
<h2>
  ~ <i>Plan Your Brisbane Event Schedule</i> ~
</h2>

<h4>
  Below is a Visual Itinerary of the Events you have Selected
</h4>

<p class="EventBorder">
  Event 1: This is List Option 1
</p>
<p class="EventBorder">
  Event 2: This is List Option 2
</p>
<p class="EventBorder">
  Event 3: This is List Option 3
</p>
</ul>

Upvotes: 0

Related Questions