3 Replies - 272 Views - Last Post: 22 December 2017 - 03:19 AM

#1 barckman  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 21-December 17

issues with length from text to element border

Posted 21 December 2017 - 04:35 AM

Link for the website: https://codepen.io/Barckman/pen/YYwbvN

Hi everybody im hoping for some help about a website im trying to make.
Im new to coding in general so please excuse me if this is a rediculous quiestion but we all gotta start somewhere :).
ive ofcourse been searching and reading before coming here, sadly couldnt find an answer to my question.

Ok so my issue is this: on my webpage i have a <h1></h1> element nested in a <header></header> element... exact code below.

<style>
.b{
    margin: 40px auto 40px auto;
    padding: 0px 0px;
    color: black;
    background-color: #d6edc2;
    text-align: center;
    width: 440px;
    height: 42px;
    border: solid;
    border-radius: 100px;
    border-color: #daddc4;
</style>

<header>
<h1 class="b">
<p> Bob Marley - A Tribute Page </p>
</h1>     
</header>



Everything is fine and right where i want it it the only issue is i dont know how to specify how far i want the "text"
from the "border". I mean how do you do in CSS to specify this statement fx: "the text inside the green box must be: (20px away from the top side of the border, 10px away from the bottom side of the border, 20px away from the left side of the border, 5px away from the right side of the border". I know you can do this in almost any element by using margin but how do you do it with the text and the background color which is actually in the same element? In this case the <h1></h1> element.

again i apologize if this is just me complicating a very simple thing.

the full code for the website is this:

<html>
<style>
.a{
    margin: 20px 200px 20px;
    border: 1px solid black;
    background-color: #ffffc4;
    height: 2000px;     
}

.b{
    margin: 40px auto 40px auto;
    padding: 0px 0px;
    color: black;
    background-color: #d6edc2;
    text-align: center;
    width: 440px;
    height: 42px;
    border: solid;
    border-radius: 100px;
    border-color: #daddc4;
    }

.image1{
    border: solid gray;
    }

.main.text{
    padding-top: 30px;
    padding-right: 100px;     
    padding-left: 100px;
    }    
    

</style>
  <head>
       <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
    </head>
<body>


<div class="a">
    

<header>
        <h1 class="b">Bob Marley - A Tribute Page<h1>     
    </header>
         <center>
         <img class="c" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqCh6cZ9dE9lyXlMUxMes6rjhzWDcC55sNbwZ3MVsAWZrRTBxP">
            
         </center>
         
         <center style="font-family:lobster" style="align:center">Top 10 bob marley Quotes</center>
         
<ol>
             
             
<li>“The truth is, everyone is going to hurt you. You just got to find the ones worth suffering for.” </li>
             
<li>“None but ourselves can free our minds.” </li>
             
<li>“love the life you live.
live the life you love.” </li> 
             
<li>“The good times of today are the sad thoughts of tomorrow.” </li> 
             
<li>“You have to be someone.”</li> 
             
<li>“You can fool some people some times but you cant fool all the people all the time” </li> 
             
<li>“Just because you are happy it does not mean that the day is perfect but that you have looked beyond its imperfections” </li> 
             
<li>“You never know how strong you are until being strong is your only choice.” </li> 
             
<li>“My music fights against the system that teaches to live and die.”</li> 
             
<li>“Money can't buy you life” </li> 
         
</ol>         
         
<br>
          

<p style="font-size:20px;font-family:arial; margin:0px 0px 3px 0px; text-align:center">Share your favorite Bob Marley quote!</p>
       

<div style="text-align:center">
             
<textarea rows="4" style="width:400px;"placeholder="type your quote here" type="submit">
</textarea>
         </br>
         <button style="margin:5px 0px;padding:6px">Submit</button>        
	 
</div>
         
         

<p class="main-text"style="text-align:center">I love Bob Marley. At this point in my life, I’ve loved Bob Marley for a really long time. But everyone loves Bob Marley. Like The Beatles, Stevie Wonder, and Frank Sintara, Marley is enshrined on a Mount Rushmore of world-renowned musicians who are utterly impossible to hate. There are few other artists in 20th century music who enjoy such universal appeal. “Bob Marley is overrated” or “What a douchebag” have never been uttered when “Jammin'” or “Easy Skankin'” is queued up on a summer pool party playlist. His music has inspired millions of fat, middle-class Americans to chill the fuck out and have another pina colada out on Royal Caribbean cruises for decades.

 

What is easy to hate, however, is fanboys who become just-a-little-too obsessed with Marley. You know the type: Wookied out in natty brunette dreadlocks, wearing a hemp beanie, rocking a green-and-yellow Jamaican flag shirt. Footwear of choice: Birkenstocks. Only drinks water out of a Nalgene plastered in stickers, which sometimes they use as a beer reciptial. More often than not, this person is mostly likely the spawn of successful upper-middle-class parents, perhaps dentists or car dealership owners.

Over the years, I’ve noticed how this overly-intense Bob Marley fandom can be a gateway drug for tour-rat life-nowhereness. Trust me, you don’t want to end up spending your summer slinging nitrus balloons in amplitheater parking lots. And no one likes a poseur, especially one pushes his beliefs and tastes on someone else. Everyone knows those faux-Rastafarian “beliefs” you’ve embraced only exist as a thinly-veiled excuse for getting fucked up.

Since today, Feb. 6, 2013, would have been Bob Marley’s 68th birthday, I’ve identified the phases Bob Marley’s most intense fanboys tend to go through. They often happen quickly, so don’t ignore the warning signs.</br></br>(didnt include rest of the page) </p>
    
</body>    
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: issues with length from text to element border

#2 andrewsw  Icon User is offline

  • blow up my boots
  • member icon

Reputation: 6444
  • View blog
  • Posts: 26,066
  • Joined: 12-December 12

Re: issues with length from text to element border

Posted 21 December 2017 - 05:24 AM

Quote

"the text inside the green box must be: (20px away from the top side of the border, 10px away from the bottom side of the border, 20px away from the left side of the border, 5px away from the right side of the border"


Erm, with padding.




Your page is missing the necessary DOCTYPE declaration, and you should not be using the center tag which is obsolete.

What editor are you using? It should not be producing curly quotes.
Was This Post Helpful? 0
  • +
  • -

#3 barckman  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 21-December 17

Re: issues with length from text to element border

Posted 22 December 2017 - 03:01 AM

yeah i figured out that the center element is obsoloete and i corrected that, i must have completely forgotten about padding, sorry about that. However i have 1 more issue which is: the div container is where all of the content of the page resides (except for the footer). In the div element i have a <p> element where i have the main text of the page. If i open the html in a browser like chrome the page looks fine... but when i zoom out to -600% the text from the <p> element extends the div-container element, how do you fix this, am i missing something?

code:

<html>
<style>  
    .a{
    margin: 2px 400px;
    border: 1px solid black;
    background-color: #ffffc4;
    max-height:1853px;
    min-height:1853px;
    max-width:700px;
    min-width:700px
}

.b{
    margin: 40px auto 40px auto;
    padding: 0px 0px;
    color: black;
    background-color: #d6edc2;
    text-align: center;
    width: 440px;
    height: 42px;
    border: 5px solid;
    border-radius: 100px;
    border-color: #D6E3AF;
    }

.c{
    border: 20px solid;
    border-color: #D6E3AF;
    border-radius: 40%;
    width: 250px;

    }

.d{
    max-font-size: 2px;
    min-font-size: 2px;
    font-size: 15px;
    text-align:center;
    padding-top: 30px;
    padding-right: 50px;
    padding-left: 50px;
    padding-bottom: 0px;
    max-width:100%;
    min-width:85%;
    max-height:400px;
    min-height:400px;
    }
    .e{
    max-width:460px;
    min-width:460px;
    background-color:#ADD8E6;
    border:1.19px solid black;
    border-radius:100px;
    padding-top:5px;
    padding-bottom:5px;
    margin:10px 517.5px;
    text-align:center;
    }

</style>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
  </head>

  <body>
    <div class="a">
      <header>
        <h1 class="b">Bob Marley - A Tribute Page
          <h1>
            </header>

            <p style="text-align:center"><img class="c" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqCh6cZ9dE9lyXlMUxMes6rjhzWDcC55sNbwZ3MVsAWZrRTBxP" alt="Image could not be found ;"><p>

          <p style="text-align:center; font-family:lobster; font-size:45px"> Top 10 Bob Marley Quotes
          </p>
          <ol>
            <li>“The truth is, everyone is going to hurt you. You just got to find the ones worth suffering for.”
            </li>
            <li>“None but ourselves can free our minds.”
            </li>
            <li>“love the life you live.
              live the life you love.”
            </li>
            <li>“The good times of today are the sad thoughts of tomorrow.”
            </li>
            <li>“You have to be someone.”
            </li>
            <li>“You can fool some people some times but you cant fool all the people all the time”
            </li>
            <li>“Just because you are happy it does not mean that the day is perfect but that you have looked beyond its imperfections”
            </li>
            <li>“You never know how strong you are until being strong is your only choice.”
            </li>
            <li>“My music fights against the system that teaches to live and die.”
            </li>
            <li>“Money can't buy you life”
            </li>
          </ol>
          <br>
          <p style="font-size:20px;font-family:arial; margin:0px 0px 3px 0px; text-align:center">Share your favorite Bob Marley quote!
          </p>
          <div style="text-align:center">
            <textarea cols="1" rows="4" style="width:400px;"placeholder="type your quote here">
            </textarea>
            </br>
          <button style="margin:5px 0px;padding:6px">Submit
          </button>
          </div>
        <p class="d" style="text-align:center">I love Bob Marley. At this point in my life, I’ve loved Bob Marley for a really long time. But everyone loves Bob Marley. Like The Beatles, Stevie Wonder, and Frank Sintara, Marley is enshrined on a Mount Rushmore of world-renowned musicians who are utterly impossible to hate. There are few other artists in 20th century music who enjoy such universal appeal. “Bob Marley is overrated” or “What a douchebag” have never been uttered when “Jammin'” or “Easy Skankin'” is queued up on a summer pool party playlist. His music has inspired millions of fat, middle-class Americans to chill the fuck out and have another pina colada out on Royal Caribbean cruises for decades.
          What is easy to hate, however, is fanboys who become just-a-little-too obsessed with Marley. You know the type: Wookied out in natty brunette dreadlocks, wearing a hemp beanie, rocking a green-and-yellow Jamaican flag shirt. Footwear of choice: Birkenstocks. Only drinks water out of a Nalgene plastered in stickers, which sometimes they use as a beer reciptial. More often than not, this person is mostly likely the spawn of successful upper-middle-class parents, perhaps dentists or car dealership owners.
          Over the years, I’ve noticed how this overly-intense Bob Marley fandom can be a gateway drug for tour-rat life-nowhereness. Trust me, you don’t want to end up spending your summer slinging nitrus balloons in amplitheater parking lots. And no one likes a poseur, especially one pushes his beliefs and tastes on someone else. Everyone knows those faux-Rastafarian “beliefs” you’ve embraced only exist as a thinly-veiled excuse for getting fucked up.
          Since today, Feb. 6, 2013, would have been Bob Marley’s 68th birthday, I’ve identified the phases Bob Marley’s most intense fanboys tend to go through. They often happen quickly, so don’t ignore the warning signs.
          </p>


          <p style="padding-top:70px ;text-align:center">Read more about Bob Marley
           <a target="_blank" style="color:blue; text-align:center" href="https://en.wikipedia.org/wiki/Bob_Marley">HERE
         </a>
        </p>

      </div>

  </body>

    <footer class="e" style="text-align:center">
        This website was made by Sander Barckman. </br>Feedback, tips&tricks and reviews are much apreciated and welcome </br><a href="https://codepen.io/Barckman/pen/YYwbvN" style="color:blue">https://codepen.io/Barckman/pen/YYwbvN</a>
    </footer>
</html>

This post has been edited by andrewsw: 22 December 2017 - 03:14 AM
Reason for edit:: removed previous quote, just use the REPLY button

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • blow up my boots
  • member icon

Reputation: 6444
  • View blog
  • Posts: 26,066
  • Joined: 12-December 12

Re: issues with length from text to element border

Posted 22 December 2017 - 03:19 AM

Quote

the text from the <p> element extends the div-container element

I don't know what you mean by this. For which paragraph? What happens?

Why would anyone zoom out to -600%?



I repeat that you are missing the necessary DOCTYPE declaration and should be using a proper code editor or IDE (no curly quotes).
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1