HTML und CSS - Tribut Seite FCC Ärger

Der obige Link ist die HTML und CSS für eine Tribut-Seite, die ich für eine FCC-Herausforderung erstellen. Ich habe Probleme beim Hinzufügen von Padding zu meinen Divs .life und .work.HTML und CSS - Tribut Seite FCC Ärger

Auch wie Sie in der Minute sehen können, ist mein Text nicht in der div enthalten. Ich habe dieses Problem seit ein paar Stunden gegooglet und alle Lösungen haben nicht für mich gearbeitet.

Kann mir jemand helfen?

Idealerweise möchte ich, dass diese grauen divs leicht abgerundet werden, zentriert, wobei der Text auf div beschränkt ist.

codepen

Quelle

2017-07-01 Marchibald92

Entschuldigung für die schlechte Formatierung und den Mangel an Visual Code, dies ist mein erster Beitrag und ich habe wirklich mit einigen der Buchungsregeln gekämpft. – Marchibald92

Hey Marchi, wenn möglich, probiere uns mit einem [Stack Snippet] (https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/) hier in Ihre Frage, damit wir Ihr Problem problemlos reproduzieren können. – domsson

Beim Veröffentlichen von Codepen-Links müssen Sie auch hier den entsprechenden Code angeben! –

Suchen Sie so etwas?

body { 
 
    margin-top: 60px; 
 
} 
 

 
img { 
 
    border-radius: 10%; 
 
    max-width: 50%; 
 
    display: block; 
 
    margin: auto auto 30px auto; 
 
} 
 

 
.life { 
 
    background: darkgrey; 
 
    max-width: 80%; 
 
    margin: 20px auto; 
 
    border-radius: 25%; 
 
    padding: 25px 50px; 
 
} 
 

 
.work { 
 
    background: darkgrey; 
 
    max-width: 90%; 
 
    margin: 20px auto; 
 
    padding: 25px 50px; 
 
} 
 

 
.wiki { 
 
    margin-top: 50px; 
 
}

<div class="container"> 
 
    <div class="jumbotron"> 
 
    <h1 class="text-center">Zach Braff</h1> 
 
    <h2 class="text-center"><em>Actor Director Writer Producer</em></h2> 
 

 

 
    <img src="https://pbs.twimg.com/profile_images/588958455370625025/xm8yowKs.jpg" alt="Zach Braff"> 
 

 

 
    <div class="life"> 
 
     <h3 class="text-center">His life (summarised)</h3> 
 
     <p>Born in 1975, Zach Braff grew up in New Jersey and began acting at an early age. He got his first acting job on a TV pilot at age 14, with his first film role coming a few years later. After graduating from Northwestern University's film school, 
 
     Braff returned to acting, appearing in several small movies. His big break came in 2001 when he landed one of the lead roles on the TV comedy Scrubs. The show was a hit, and Braff became a household name. This success led to others, such as his 
 
     writing, directing and starring in Garden State, a critically acclaimed indie film, and landing a role in 2013's big-budget movie Oz the Great and Powerful.</p> 
 
    </div> 
 

 
    <div class="work"> 
 
     <h3>His Work (some of)</h3> 
 
     <ul> 
 
     <li>Scrubs</li> 
 
     <li>Garden State</li> 
 
     <li>Oz the Great and Powerful</li> 
 
     <li>Wish I Was Here</li> 
 
     <li>Going In Style</li> 
 
     </ul> 
 
    </div> 
 

 

 
    <p class="text-center wiki"><em>Read more about Zach Braffs life and work <a href = "https://en.wikipedia.org/wiki/Zach_Braff">here</a></em></p> 
 

 
    </div> 
 
</div> 
 

 
<footer> 
 
    <p class="text-center">Personal project for FCC's assignment 'Build a Tribute Page</p> 
 
</footer>

Quelle

2017-07-01 20:03:33

Haben Sie so etwas wie dies wünschen?

Solution

Änderungen:

.life { 
background: darkgrey; 
max-width: 80%; 
margin: 20px auto; 
padding:4em; 
border-radius: 25%; 
} 

.work { 
background: darkgrey; 
max-width: 90%; 
padding:4em; 
margin: auto; 
}

Habe ich nur padding den Klassen beide und es funktionierte!

Quelle

2017-07-01 20:11:39

HTML und CSS - Tribut Seite FCC Ärger

Antwort

Verwandte Themen