#title {
text-align: center;
color: #643F37;
font-family: Arial;
}
h3 {
margin-left: 700px;
color: #643F37;
font-family: arial;
}
.image {
hight: 1000px;
width: 500px;
display: block;
margin: 0px auto;
postion: relative;
}
#main {
background: hsl(0, 1%, 90%);
font-family: times new roman;
font-size: 40px;
align-items: center;
}
#img-div {
#
}
#img-caption .image {
position: relative;
left: auto;
}
<head>
<h1 id="title">
The story of Clarnece Jordan
</h1>
<h3>
by clarence
</h3>
</head>
<body>
<main id="main">
<div id="img-div">
<img class="image" src="https://scontent-dfw5-2.xx.fbcdn.net/v/t1.6435-9/69294192_733858860396587_3589774459596177408_n.jpg?_nc_cat=107&ccb=1-3&_nc_sid=174925&_nc_ohc=vp-El7mg4WAAX_k529k&_nc_ht=scontent-dfw5-2.xx&oh=da307ba4e9977da7860d2dc87e333e85&oe=60926139">
</div>
<div id="img-caption">
<p> this is a picture is form church
<p>
</div>
</main>
</body>
You have to understant first the usage of html objects, I'd recommend you to take first a quick tutorial and be aware of the typos, this will make your development much easier. For your problem...
This site may help you with your specific problem: https://www.w3schools.com/TAGS/tag_figcaption.asp
This page is extremely useful for begginers and has a lot of tutorials.
Also I'd suggest to use classes instead of id's and make them reusable; for example:
.text-center {
text-align: center;
}
.title {
text-align: center;
color: #643F37;
font-family: Arial;
}
.subtitle {
color: #643F37;
font-family: arial;
}
.image {
height: 1000px;
width: auto;
display: block;
margin: 0px auto;
}
.main {
background: hsl(0, 1%, 90%);
font-family: times new roman;
font-size: 40px;
align-items: center;
}
figcaption {
font-style: italic;
padding: 2px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clarnece Jordan</title>
</head>
<body>
<div class="main">
<h1 class="title text-center">The story of Clarnece Jordan </h1>
<h3 class="text-center subtitle">by clarence</h3>
<div>
<img class="image" src="https://scontent-dfw5-2.xx.fbcdn.net/v/t1.6435-9/69294192_733858860396587_3589774459596177408_n.jpg?_nc_cat=107&ccb=1-3&_nc_sid=174925&_nc_ohc=vp-El7mg4WAAX_k529k&_nc_ht=scontent-dfw5-2.xx&oh=da307ba4e9977da7860d2dc87e333e85&oe=60926139">
<figcaption>This is a picture is form church</figcaption>
</div>
</div>
</body>
</html>
This site might be helpful: https://www.lifewire.com/caption-that-stays-with-image-3467838 .
Steps to an HTML Image Caption
Add an image to your webpage.
In the HTML for your webpage, place a div tag around the image:
Add a style attribute to the div tag:
Set the width of the div to the same width as the image, with the width style property:
Related
So I've been trying to make myself a personal portfolio, however I've run into issues regarding that. Whenever I try to resize my image using the width thing in CSS3, my image does not respond. I've tried resizing it to 25%, 50%, 75%, and nothing works!
Here's my code:
body {
margin: 0px;
background-color: white;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/*Nav Styles*/
.brand {
font-family: 'Titillium Web';font-size: 15px;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
padding: 38px;
}
.left-side {
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform: uppercase;
}
.nav-link-wrapper {
font-family: 'Titillium Web';font-size: 15px;
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color: #8a8a8a;
text-decoration: none;
transition: color 0.5s
}
.nav-link-wrapper:hover {
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover {
color:black
}
/*About Page Styles*/
.profile-image-wrapper {
text-align: center;
width: 50%;
}
.profile-content-wrapper {
padding: 30px;
text-align: center;
}
.profile-content-wrapper h1 {
color: black;
font-family: 'Titillium Web';font-size: 22px;
}
.profile-content-wrapper p {
color: black;
font-family: 'Titillium Web';font-size: 15px;
}
.profile-content-wrapper h4 {
color: black;
font-family: 'Titillium Web';font-size: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mika's Portfolio</title>
<link href='https://fonts.googleapis.com/css?family=Titillium Web' rel='stylesheet'>
</head>
<body>
<div class = "container">
<div class="nav-wrapper">
<div class = "left-side">
<div class="nav-link-wrapper">
Home
</div>
<div class="nav-link-wrapper">
Projects
</div>
<div class="nav-link-wrapper">
About
</div>
</div>
<div class = "right-side">
<div class="brand">
<div>
MIKA TAN
</div>
</div>
</div>
</div>
<div class="profile-image-wrapper">
<img src="https://cdn.pixabay.com/photo/2020/09/16/20/30/lighthouse-5577451_1280.jpg">
</div>
<div class="profile-content-wrapper">
<h1>
Hey there!
</h1>
<p>
Now you've got a quick look around my website, think about hiring me to make you your own website!
</p>
<p>
Thanks, have a great day.
</p>
<h4>
GMAIL:
</h4>
<p>
mikayxtan#gmail.com
</p>
</div>
</div>
</body>
</html>
My image called mika.png is in a class called profile-image-wrapper, and also does not respond to the text-align: center; thing.
I have tried in-line style coding, which works to an extent (however I prefer to not have to use in-line style so I can create a media query later), and I have used the !important attribute for CSS which only works for text-align and not the width.
To make your image responsive you should give it a max-width: 100% right now it follows the width of the container and it stays inside of it. So add this new piece of code.
.profile-image-wrapper img {
max-width: 100%;
}
now the image fills 50% of the width as you wanted to do. Now if you want your image to be in the middle with 50% width just add margin: 0 auto; to the image wrapper and you should be good to go.
.profile-image-wrapper {
text-align: center;
width: 50%;
margin: 0 auto;
}
if you want the image to be fill width you can remove the width 50% from the wrapper.
with 50% width applied to the wrapper
without the 50% width on the wrapper, it would look something like this.
Note that in both cases the image is responsive duo to the fact you added max-width:100% to the img tag.
That's not what you are looking for? please let me know and show me a screenshot of the desired output.
Try it:
.profile-image-wrapper img{
width:15%
}
Please set margin: 0 auto; for .profile-image-wrapper selector to make center horizontally.
Please set display: inline-block; CSS in .profile-image-wrapper img selector
Updated snippet :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mika's Portfolio</title>
<link href='https://fonts.googleapis.com/css?family=Titillium Web' rel='stylesheet'>
</head>
<style>
body {
margin: 0px;
background-color: white;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/*Nav Styles*/
.brand {
font-family: 'Titillium Web';font-size: 15px;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
padding: 38px;
}
.left-side {
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform: uppercase;
}
.nav-link-wrapper {
font-family: 'Titillium Web';font-size: 15px;
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color: #8a8a8a;
text-decoration: none;
transition: color 0.5s
}
.nav-link-wrapper:hover {
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover {
color:black
}
/*About Page Styles*/
.profile-image-wrapper {
text-align: center;
width: 50%; margin:0 auto;
}
.profile-image-wrapper img{ width:50%; display: inline-block;}
.profile-content-wrapper {
padding: 30px;
text-align: center;
}
.profile-content-wrapper h1 {
color: black;
font-family: 'Titillium Web';font-size: 22px;
}
.profile-content-wrapper p {
color: black;
font-family: 'Titillium Web';font-size: 15px;
}
.profile-content-wrapper h4 {
color: black;
font-family: 'Titillium Web';font-size: 15px;
}
</style>
<body>
<div class = "container">
<div class="nav-wrapper">
<div class = "left-side">
<div class="nav-link-wrapper">
Home
</div>
<div class="nav-link-wrapper">
Projects
</div>
<div class="nav-link-wrapper">
About
</div>
</div>
<div class = "right-side">
<div class="brand">
<div>
MIKA TAN
</div>
</div>
</div>
</div>
<div class="profile-image-wrapper">
<img src="https://i.imgur.com/HPrl3u8.jpg">
</div>
<div class="profile-content-wrapper">
<h1>
Hey there!
</h1>
<p>
Now you've got a quick look around my website, think about hiring me to make you your own website!
</p>
<p>
Thanks, have a great day.
</p>
<h4>
GMAIL:
</h4>
<p>
mikayxtan#gmail.com
</p>
</div>
</body>
</html>
I am having an issue with my project for my coding bootcamp.
Problem: My website seems to be scrollable even thought all my content fits on the page. I have tried to edit height, but it only throws the whole site out of wack.
Does anyone have a solution will prevent scrolling when it is not needed?
Thank you so much in advance.
Rob Connolly
html, body {
height: 100%;
}
#wrap {
margin: 0 auto;
text-align: center;
width: 960px;
background-color: white;
}
#firstName {
color: white;
margin: 0 auto;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: white;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
line-height: 125px;
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
clear: both;
border-bottom-style: solid;
margin: 0 auto;
width: 100%;
align-self: center;
}
#backgroundTest {
background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
background-repeat: repeat;
padding: 70px;
height: 100%;
}
#wrap2 {
margin: 0px auto;
width: 960px;
background-color: white;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
#aboutMeHeading {
clear: both;
color: #4aaaa5;
margin: 15px 0 15px 15px;
}
#grayLine {
margin: 15px auto;
color: #dddddd;
width: 930px;
border-width: 1px;
align-self: center;
}
#footerBox {
margin-top: 50px;
width: 100%;
background-color: #666666;
height: 2.5rem;
border-top-style: solid;
border-top-color: #4aaaa5;
border-top-width: 10px;
align-self: center;
bottom: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#copyright {
text-align: center;
color: white;
overflow: hidden;
}
body {
margin: 0 auto;
}
#robImage {
width: 200px;
height: 200px;
float: left;
margin: 0px 15px 0px 15px;
}
p {
color: #777777;
text-align: left;
margin-left: 15px;
margin-right: 15px;
word-spacing: 3px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
}
#footerLine {
color: #4aaaa5;
}
#cr1 {
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/myportfolio/assets/css/style.css">
</head>
<body>
<!-- this div contains the header-->
<div id="wrap">
<header>
<!-- name in header-->
<h1 id="firstName">
Rob Connolly
</h1>
<!-- Header-->
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
</header>
<!-- clear fix cleard float-->
<hr id="clearfix">
<!-- background image-->
<div id="backgroundTest">
<!-- Wrap2 wraps abouy me section-->
<div id="wrap2">
<!-- About Me Heading-->
<h2 id="aboutMeHeading">
About Me
</h2>
<!-- gray line in about me section-->
<hr id="grayLine">
<!-- Image of Rob-->
<img id="robImage" src="https://lh3.googleusercontent.com/Y0NrDdrtQbttFKexILjcVZ4tPrV55AoKy_jaCB0-lL-QkCfk9FjbYoWXfyLF6gZsz3lwXBSYwjunxjEC0Ti8r-zUe99lezpZXFyL5ReR7Xsf1enfVNYPTg0Fk9R8M3rm-OXNqCDYJgTojq1kl8sADXpR2-24UdZU5hrOMHTpULMyPMcxTu3PIaId-Nfgd4cTzNJ5qtY2YGzFqVL2JjOHukvKah7mWNfcbjEDuQ7iH13Ax4FmolxJcdT7lm6Z25b8gbKoecazzKpMzpwiatuOM8MrHkDG04z9JXlRbrK_BcrsZmzt6b5u79-YKK9siwnWIT_-LlRldygCWsDgPAjoB0EMSsS9D-dbS7nWXJ01SwHaUaLbtu5UgfixRdO6H1FSqJeMv-E1xA4K1MTrUPLLdSZ65_cxzCSzdkKU2Ny4lwWYo5ZvT09kjYLW56XWl7H5BalG0mHzOt4HsKY-XtPRGFC0Nw85ECbpZsEJvBPJDGui8SOS-FDMcHmjdgZNsIGxxG7yaQeK34Cc1MlxnHSzwba5RS-PMbynkuXdTb2Va_QDe_cAFhm-hE9tzgMfn_LWMcnUhrH0bIdq6s4NgwqQ7zz03bBZyXuiKS1zCJRnYobGHUeVJPdXQvR0ZbVl0NyJ_EgI0pm0bhUKYxS9d0ez81LzGcK81yG15SnjuvUjLpK9vSlJB7w0=s960-no" alt="rob connolly photo">
<p>Welcome to my portfolio page. I would like to first thank you for taking the time to learn more about who I am. I love to build and scale companies. I have founded two previous companies, one was recently acquired. I am very fourtante to have had the opportunity to learn from my previous failures and successes.
</p>
<p>This year I made the decision that I want to be in a position to help other start-ups looking to grow and scale their own companies. I made the decision to go to the University of California, San Diego's, Full-Stack Coding Bootcamp program to sharpen my development skills.
</p>
<p>If you have any questions about me, start-up questions, or how many games Notre Dame is going to win this season in football, please use the contact form above.
</p>
</div>
</div>
<!-- Start of footer-->
<div id="footerBox">
<!-- Text for footer-->
<p id="cr1"> © Copyright</p>
</div>
</body>
</html>
There are two things you'll want to resolve to get it working correctly.
First set your box-sizing property, because you currently do not have one and the size of your boxes is being affected as a result. border-box is the preferred method. You can read the W3 Schools writeup on this if you'd like to better understand what border-box does: https://www.w3schools.com/css/css3_box-sizing.asp
The height of your #backgroundTest element is 100% height, and since it's a direct child of the <body> element it will be that height. It's 87px taller than you'd like because the #wrap element and the header inside it are 85px in height, plus the hr#clearfix that is 2px in height. If you adjust your #backgroundTest to account for this, it will be resolved. Change height to calc(100% - 87px)
On a side-note I recommend not adding a set height on your #footerBox element because the text is being cut off (height isn't enough, so just remove height property altogether and let it create its own height based on font-size, line-height, padding, etc.)
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
#wrap {
margin: 0 auto;
text-align: center;
width: 960px;
background-color: white;
}
#firstName {
color: white;
margin: 0 auto;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: white;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
line-height: 125px;
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
clear: both;
border-bottom-style: solid;
margin: 0 auto;
width: 100%;
align-self: center;
}
#backgroundTest {
background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
background-repeat: repeat;
padding: 70px;
height: calc(100% - 87px);
}
#wrap2 {
margin: 0px auto;
width: 960px;
background-color: white;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
#aboutMeHeading {
clear: both;
color: #4aaaa5;
margin: 15px 0 15px 15px;
}
#grayLine {
margin: 15px auto;
color: #dddddd;
width: 930px;
border-width: 1px;
align-self: center;
}
#footerBox {
margin-top: 50px;
width: 100%;
background-color: #666666;
height: 2.5rem;
border-top-style: solid;
border-top-color: #4aaaa5;
border-top-width: 10px;
align-self: center;
bottom: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#copyright {
text-align: center;
color: white;
overflow: hidden;
}
body {
margin: 0 auto;
}
#robImage {
width: 200px;
height: 200px;
float: left;
margin: 0px 15px 0px 15px;
}
p {
color: #777777;
text-align: left;
margin-left: 15px;
margin-right: 15px;
word-spacing: 3px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
}
#footerLine {
color: #4aaaa5;
}
#cr1 {
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/myportfolio/assets/css/style.css">
</head>
<body>
<!-- this div contains the header-->
<div id="wrap">
<header>
<!-- name in header-->
<h1 id="firstName">
Rob Connolly
</h1>
<!-- Header-->
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
</header>
<!-- clear fix cleard float-->
<hr id="clearfix">
<!-- background image-->
<div id="backgroundTest">
<!-- Wrap2 wraps abouy me section-->
<div id="wrap2">
<!-- About Me Heading-->
<h2 id="aboutMeHeading">
About Me
</h2>
<!-- gray line in about me section-->
<hr id="grayLine">
<!-- Image of Rob-->
<img id="robImage" src="https://lh3.googleusercontent.com/Y0NrDdrtQbttFKexILjcVZ4tPrV55AoKy_jaCB0-lL-QkCfk9FjbYoWXfyLF6gZsz3lwXBSYwjunxjEC0Ti8r-zUe99lezpZXFyL5ReR7Xsf1enfVNYPTg0Fk9R8M3rm-OXNqCDYJgTojq1kl8sADXpR2-24UdZU5hrOMHTpULMyPMcxTu3PIaId-Nfgd4cTzNJ5qtY2YGzFqVL2JjOHukvKah7mWNfcbjEDuQ7iH13Ax4FmolxJcdT7lm6Z25b8gbKoecazzKpMzpwiatuOM8MrHkDG04z9JXlRbrK_BcrsZmzt6b5u79-YKK9siwnWIT_-LlRldygCWsDgPAjoB0EMSsS9D-dbS7nWXJ01SwHaUaLbtu5UgfixRdO6H1FSqJeMv-E1xA4K1MTrUPLLdSZ65_cxzCSzdkKU2Ny4lwWYo5ZvT09kjYLW56XWl7H5BalG0mHzOt4HsKY-XtPRGFC0Nw85ECbpZsEJvBPJDGui8SOS-FDMcHmjdgZNsIGxxG7yaQeK34Cc1MlxnHSzwba5RS-PMbynkuXdTb2Va_QDe_cAFhm-hE9tzgMfn_LWMcnUhrH0bIdq6s4NgwqQ7zz03bBZyXuiKS1zCJRnYobGHUeVJPdXQvR0ZbVl0NyJ_EgI0pm0bhUKYxS9d0ez81LzGcK81yG15SnjuvUjLpK9vSlJB7w0=s960-no" alt="rob connolly photo">
<p>Welcome to my portfolio page. I would like to first thank you for taking the time to learn more about who I am. I love to build and scale companies. I have founded two previous companies, one was recently acquired. I am very fourtante to have had the opportunity to learn from my previous failures and successes.
</p>
<p>This year I made the decision that I want to be in a position to help other start-ups looking to grow and scale their own companies. I made the decision to go to the University of California, San Diego's, Full-Stack Coding Bootcamp program to sharpen my development skills.
</p>
<p>If you have any questions about me, start-up questions, or how many games Notre Dame is going to win this season in football, please use the contact form above.
</p>
</div>
</div>
<!-- Start of footer-->
<div id="footerBox">
<!-- Text for footer-->
<p id="cr1"> © Copyright</p>
</div>
</body>
</html>
Hi I would like to know how to set a position of h1 and p inside jumbotron. Lets say I would like to place my h1 in left corner of jumbotron and under h1 I would like to have p but with a little left-padding.
.jumbotron {
max-width: 100%;
padding-top: 80px;
padding-bottom: 80px;
color: inherit;
background-color: orange;
}
.jumbotron h1 {
position: relative;
display: block;
font-weight: bold;
font-size: 30px;
color: white;
padding-left: 40px;
padding-bottom: 80px;
}
.jumbotron p {
position: absolute;
display: block;
color: white;
font-size: 20px;
}
<div class="jumbotron">
<h1> Reserve your place </h1>
<p>..before somebody will overtake you</p>
</div>
Hope this helps you!
.jumbotron {
max-width: 100%;
padding-top: 40px;
padding-bottom: 80px;
color: inherit;
background-color: orange;
}
.jumbotron h1 {
position: relative;
display: block;
font-weight: bold;
font-size: 30px;
color: white;
padding-left: 40px;
}
.jumbotron p {
position: absolute;
display: block;
color: white;
font-size: 20px;
padding-left:40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="jumbotron">
<h1> Reserve your place </h1>
<p>..before somebody will overtake you</p>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</body>
</html>
You had some unnecessary positioning being set. There is absolutely no reason to give h1 the relative positioning, and absolute to p.
Honestly, judging by the way you were using it I'd say you should do a little bit of learning and experimentation to fully understand the mechanics.
.jumbotron {
max-width: 100%;
padding-top: 80px;
padding-bottom: 80px;
color: inherit;
background-color: orange;
}
.jumbotron h1 {
display: block;
font-weight: bold;
font-size: 30px;
color: white;
padding-left: 40px;
}
.jumbotron p {
display: block;
color: white;
font-size: 20px;
padding-left: 40px;
}
<div class="jumbotron">
<h1> Reserve your place </h1>
<p>..before somebody will overtake you</p>
</div>
I have done something like this and its working my text is getting aligned to center, left or right.
<div class="jumbotron text-center container">
<h1>This is demo</h1>
</div>
Hope it will help.
I have 4 DIVs and I need them all to be sticked together. I have a white space between and only between first 2 DIVs and I don't know why. Any advices and a possible explanation? I don't have any padding of so, making this quite annoying.
#font-face {
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1 {
font-size: 2.5em;
}
p.title2 {
font-size: 3em;
}
div.surf1 {
display: block;
/*background-image: url("surf1.jpg");*/
background: #41c3ac;
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
display: block;
background: #41c3ac;
height: 600px;
}
div.surf3 {
display: block;
background: #ff6b57;
height: 600px;
}
div.surf4 {
display: block;
background: #8C78B1;
height: 600px;
}
div.text1 {
padding-top: 100px;
color: white;
text-align: center;
font-size: 2.5em;
}
div.button {
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236, 229, 167, 0.2);
color: #e7dd84;
transition: 0.35s;
}
div.button:hover {
background-color: white;
color: black;
border-color: white;
transition: 0.35s;
}
body {
margin: 0;
font-family: FONT;
color: white;
}
<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
<div class="text1">
<b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
The default margin-top on the nested p element is collapsing vertically, which essentially creates an equal margin-top on the parent .surf2 element (that is why you are seeing a space).
According to the spec, this doesn't occur if you establish a new block formatting context, which means that one option would be to set the overflow of the .surf2 element to something other than the default value visible. Changing it to auto or hidden would resolve the issue.
.surf2 {
background: #41c3ac;
height: 600px;
overflow: auto;
}
#font-face {
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1 {
font-size: 2.5em;
}
p.title2 {
font-size: 3em;
}
div.surf1 {
display: block;
/*background-image: url("surf1.jpg");*/
background: #41c3ac;
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
display: block;
background: #41c3ac;
height: 600px;
overflow: auto;
}
div.surf3 {
display: block;
background: #ff6b57;
height: 600px;
}
div.surf4 {
display: block;
background: #8C78B1;
height: 600px;
}
div.text1 {
padding-top: 100px;
color: white;
text-align: center;
font-size: 2.5em;
}
div.button {
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236, 229, 167, 0.2);
color: #e7dd84;
transition: 0.35s;
}
div.button:hover {
background-color: white;
color: black;
border-color: white;
transition: 0.35s;
}
body {
margin: 0;
font-family: FONT;
color: white;
}
<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
<div class="text1">
<b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
That's just one work around. See the spec for the specific rules relating to collapsing margins. You could also simply remove the margin from the p element.
For all your surf# classed elements, set their overflow to auto.
It appears that the margin on the children on the 2nd div is pushing the first div up.
I recommend either adding a unifying class to those elements or use this rule:
[class^="surf"] {
overflow: auto;
}
You need to set the class="title1" margin to 0px. -> margin: 0;
This is probably a silly question but I can't seem to figure out how to auto center my section
live demo: http://iam.colum.edu/students/jordan.max/algorerhythm/index.html#
I have tried to add
margin: 0 auto;
to my div#content, with no luck.
The only way I was able to get it be centered was manually entering in
margin-left: xxpx
but I want it to be centered based on what content is in it. Any thoughts? Thanks in advance.
Rest of CSS
body
{
background: #C1CDC1;
}
h1
{
}
h2
{
margin-top: -40px;
margin-left: 120px;
}
h1.mainT
{
width: 590px;
font-family: 'Montserrat', sans-serif;
margin-left: 10px;
font-size: 2.5em;
}
h2.subT
{
width: 130px;
font-family: 'Open Sans Condensed', sans-serif;
}
h3
{
display: inline-block;
font-family: 'Open Sans Condensed', sans-serif;
}
footer
{
color: #FCFCFC;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: .85em;
}
section#nav
{
width: auto;
margin-left: 550px;
margin-top: -80px;
padding: 5px;
word-spacing: 80px;
}
div#navContainer
{
height: 100px;
background: #FCFCFC; /* grey99*/
box-shadow: 2px 3px 5px #333;
}
div#content
{
height: 100px;
width: auto;
background: #FCFCFC; /* grey99*/
box-shadow: 2px 3px 5px #333;
display: inline-block;
}
section#contentContainer
{
float: none;
padding-top: 20px;
margin: 0 auto;
}
HTML
<script>
$(document).ready(function () {
$('section#contentContainer').hide();
var $as = $('a.contentDown').click(function () {
//show back button, move it from left +300
$('section').show();
}); //closes click for contentDown
}); //closes ready
</script>
</head>
<body>
<div id="navContainer">
<h1 class="mainT"> Al Gore Rhythm Labs </h1>
<h2 class="subT"> Chicago, IL </h2>
<section id="nav">
<h3> Assignments </h3>
<h3> Writings </h3>
<h3> Presentations </h3>
</section>
</div>
<section id="contentContainer">
<div id="content">
<p> hello motto
</p>
</div>
</section>
</body>
<footer>
<p> Jordan Max 2014</p>
</footer>
</html>
Maybe this is the solution (don't forget to remove style="display: none;" for your section#contentContainer)
Result:
Add text-align center; to your section#contentContainer
section#contentContainer
{
float: none;
padding-top: 20px;
margin: 0 auto;
text-align: center;
}
Good Luck!!
Add 'align="center"' to your section element.
As follows:
<section id="contentContainer" align="center">
This is not the preferred way but if you want to do it only in CSS, you would need to do 'text-align: center' on the element to center align it's internal 'inline-block' element.
CSS: text-align: center