CODEWITHSUNDEEP
csshtmlparagraph
user1896446
user1896446

Reputation:

Closing paragraphs creating unwanted line breaks

I am trying to make it so all the circles align across the page, but instead they are stacking vertically. Is there any way to remove the line break, or any other tools that will allow for the same CSS attributes that the CSS in my paragraph has? Would it be easier to implement a div instead?

<div>
    <p id="developer">
    <br>
    <br>
    <br>
    <br>
    HTML
    <br>
    CSS
    <br>
    JavaScript & jQuery
    </p>

    <p id="designer">
            <br>
    <br>
    <br>
    <br>
        Photoshop
        <br>
            Illustrator
            <br>
                Responsive Design
    </p>

    <p id="uxdesigner">
        <br>
    <br>
    <br>
    <br>
        Flowcharts
        <br>
            Wireframes
            <br>
                Personas
    </p>
</div>

#developer {
    background-color: #0071BC;
    width: 300px;
    height: 300px;
    border-radius: 300px;
    text-align: center;

}
#designer {
    background-color: #0071BC;
    width: 300px;
    height: 300px;
    border-radius: 300px;
    text-align: center; 
}
#uxdesigner {
    background-color: #0071BC;
    width: 300px;
    height: 300px;
    border-radius: 300px;
    text-align: center; 
}

Upvotes: 1

Views: 150

Answers (2)

ralph.m
ralph.m

Reputation: 14345

You could get extra value out of using display: table in this case. Here is a much cleaner version of your code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

.skills {display: table;}
.skills p {
    display: table-cell; 
    vertical-align: middle; 
    background-color: #0071BC;
    width: 300px;
    height: 300px;
    border-radius: 300px;
    text-align: center;
    margin: 0;
}
.skills span {display: block;}

</style>

</head>
<body>

<div class="skills">
    <p>
        <span>HTML</span>
        <span>CSS</span>
        <span>JavaScript & jQuery</span>
    </p>

    <p>
        <span>Photoshop</span>
        <span>Illustrator</span>
        <span>Responsive Design</span>
    </p>

    <p>
        <span>Flowcharts</span>
        <span>Wireframes</span>
        <span>Personas</span>
    </p>
</div>

</body>
</html>

Upvotes: 0

Niels Keurentjes
Niels Keurentjes

Reputation: 41958

Add:

p {
    display:inline-block;
}

As a sidenote, please keep layout in your CSS files, and don't use HTML elements for it. Specifically creating spacing with <br> is a bad idea and a semantic disaster.

Upvotes: 3

Related Questions