I am completely positive that my code causes my title to be in the center of my textbox, however, it doesn't look like it is! Can someone check that my code is sound?
.container {
width: 95%;
margin: 0 auto;
}
.home-about-textbox {
background-color: #232323;
padding: 4em;
width: 100vw;
margin-left: -2.65%;
outline: 2px solid #00ff6c;
outline-offset: -2.5em;
color: #FFF;
}
.home-about-textbox h1 {
text-align: center;
color: #00ff6c;
}
<div class="container">
<section class="home-about">
<div class="home-about-textbox">
<h1>Who I am</h1>
<p>I'm a young website developer who focusses on primarily making websites that are proven to have a <strong>high conversion rate</strong> so that my clients can experience that feeling of <strong>ever increasing cash flow!</strong></p>
<p>I usually like to spend a lot of my freetime working on either: a client's website design, or my personal website design. I am never the 'second-best' when it comes to website design which is why I offer numerous <strong>free</strong> design revisions
upon submission!</p>
</div>
</section>
</div>
Image of the Textbox:
Removing width: 100vwfrom .home-about-textbox seems fixed problem, no?
.container {
width: 95%;
margin: 0 auto;
}
.home-about-textbox {
background-color: #232323;
padding: 4em;
margin-left: -2.65%;
outline: 2px solid #00ff6c;
outline-offset: -2.5em;
color: #FFF;
}
.home-about-textbox h1 {
text-align: center;
color: #00ff6c;
}
<div class="container">
<section class="home-about">
<div class="home-about-textbox">
<h1>Who I am</h1>
<p>I'm a young website developer who focusses on primarily making websites that are proven to have a <strong>high conversion rate</strong> so that my clients can experience that feeling of <strong>ever increasing cash flow!</strong></p>
<p>I usually like to spend a lot of my freetime working on either: a client's website design, or my personal website design. I am never the 'second-best' when it comes to website design which is why I offer numerous <strong>free</strong> design revisions
upon submission!</p>
</div>
</section>
</div>
Why not write the <p> or <div> inside a <center> tag. It causes anything to be centered. In order to avoid further problems isolote the element to be centered from other elements.
Related
The code is below and it won't let me scroll.
[https://codepen.io/duggalverse/project/full/DkoeNr][1]
swdefrgtyhujiuhygtfrgthghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
I also want to fix the transparency part so it only gets the text part-any help would be great!!
Last thing I need help in is the background image....it keeps getting repeated no matter what I try...
[1]: https://codepen.io/duggalverse/project/full/DkoeNr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>About Me</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
body{
background-image: url(https://i.ibb.co/S7jLZD8/IMG-20190904-WA0000.jpg);
background-size: cover;
background-position-y: center; /*add*/
font-family: tahoma;
overflow: auto;
margin: 0;
padding: 0;
}
.main-banner {
position: relative;
padding: 50px;
max-width: 800px;
/*max-width: 25%;*/ /*add*/
height: 100%;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
background: rgba(255, 255, 255,.2);
box-shadow: 0 50px 15px rgba(0,0,0,.5);
/*margin: 0 55% 0 auto;*/ /*add*/
margin: 10% auto; /*add*/
margin-right: 55%;
}
/*add class*/
.col-md-6 {
width: 100%;
}
.main-banner .text p{
color: white;
}
p, .text{
position: relative;
line-height: 1.8em;
font-family: tahoma;
text-align: justify;
}
.sec-title.light .title, .sec-title.light h2{
color: white;
}
.btn-style-one{
position: relative;
line-height: 30px;
color: white;
font-size: 15px;
font-weight: 700;
border: 1px solid #fdb30e;
background: #fdb40e;
text-transform: capitalize;
padding: 15px 50px 15px;
}
</style>
</head>x
<body>
<section class="main-banner container">
<div class="auto-con">
<div class="inner-container">
<div class="sec-title light col-md-6">
<div class="title">Hello</div>
<h2>ABOUT ME: <br>
<span style="font-size: 60px;">DUGGALverse</span>
</h2>
<br><br>
<div class="text">
<p>
I'm a self-taught coder utilizing the internet tools to teach myself. With proven communication and creative thinking skills I am always attempting to best myself. I am an aficionado in various innovation fields and plan to keep investigating different dialects in Computer Science. Meaning to use my capacities to effectively fill in the job in your organization/association. Much of the time applauded as persistent by my associates, I can be depended upon to support your organization/association to accomplish its objectives.
</p>
<p>
As a profoundly gifted studen with involvement in the community, I have an assortment of aptitudes and information that would be of incredible advantage to your company. This activity posting is an incredible open door for me to keep expanding on my experience while picking up introduction to a huge frameworks driven plan of action. I like to use my dynamic data innovation range of abilities alongside my group driven character to propel information handling within the role I have currently applied for. I accept that my appended resume will show that I am a brilliant contender for this position. My solid initiative capacities has permitted me to effectively combine and solidify numerous ventures as a candidate within the role I amjapplying for, and I am certain they will permit me to keep on settling on trustworthy choices as an ideal candidate. I approach my work with a hands-on perspective, taking on jobs all through the lifetime of an undertaking. I additionally have a solid scholarly foundation in the coding genre seen clearly.
</p>
</div>
<br>
<div class="btn-box">
Download My Resume
<br><br><br>
<div class="image">
<img src="">
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
First, the body is having overflow: hidden. Remove that and you should be able to scroll.
Secondly, you put the background-repeat on the .main-banner, when it should be on the body where you set the background-image. Also, your background-size doesn't have a '-' in the middle.
I have the following issue involving the placement of text around an image using CSS and HTML. The way I've written it works as long as the text doesn't pass the image. The problem is that as soon as it "overflows" beyond the bottom of the image, it justifies all the way left and looks really sloppy.
How can I keep the text below the bottom of the image aligned with the previous text?
Note: I had to remove my original photo to prevent sharing personal information, and the replacement photo ended up being a little bit taller, so I had to copy and paste the text a few times to make it long enough to show what I'm talking about.
Here's the jsfiddle example including all my code: https://jsfiddle.net/dLa9jgcm/2/
.photo {
float: left;
height: 200px;
width: 200px;
margin-right: 20px;
overflow: hidden;
}
.photo img {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 100%;
}
.info {}
.info h2,
#header h2 {
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: .3em;
}
.info h4,
#header h4 {
color: #999;
}
<div id="tab-data-wrap">
<!-- About Tab Data -->
<div id="about">
<section class="clearfix">
<div class="g2">
<div class="photo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Olympic_rings_without_rims.svg/342px-Olympic_rings_without_rims.svg.png" alt="Olympic Rings">
</div>
<div class="info">
<h2>
Zeus
</h2>
<h4>
Associate Financial Advisor
</h4>
<p>Providing expert advice and guidance on investments and retirement planning in conjunction with high level service to individuals and families so that they have the peace-of-mind to pursue other important endeavors throughout their lives. Providing
expert advice and guidance on investments and retirement planning in conjunction with high level service to individuals and families so that they have the peace-of-mind to pursue other important endeavors throughout their lives. Providing
expert advice and guidance on investments and retirement planning in conjunction with high level service to individuals and families so that they have the peace-of-mind to pursue other important endeavors throughout their lives.</p>
<br> I am a Certified Financial Planner (CFP®).
</div>
Here u go JSFiddle link
.info{
float: left;
width: calc(100% - 220px);/*value should be equal to width of image along with margin*/
}
All you need to add is:
.g2 {
display: flex;
}
.photo {
min-width: 25%;
}
.photo{
float: left;
height: 200px;
width: 200px;
margin-right: 20px;
overflow: hidden;
}
.photo img{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 100%;
}
.info{
}
.info h2, #header h2{
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: .3em;
}
.info h4, #header h4{
color: #999;
}
.g2 {display: flex;}
.photo {
min-width: 25%;
}
<div id="tab-data-wrap">
<!-- About Tab Data -->
<div id="about">
<section class="clearfix">
<div class="g2">
<div class="photo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Olympic_rings_without_rims.svg/342px-Olympic_rings_without_rims.svg.png" alt="Olympic Rings">
</div>
<div class="info">
<h2>
Zeus
</h2>
<h4>
Associate Financial Advisor
</h4>
<p>Providing expert advice and guidance on investments and retirement planning in conjunction with high level service to individuals and families so that they have the peace-of-mind to pursue other important endeavors throughout their lives. Providing expert advice and guidance on investments and retirement planning in conjunction with high level service to individuals and families so that they have the peace-of-mind to pursue other important endeavors throughout their lives. Providing expert advice and guidance on investments and retirement planning in conjunction with high level service to individuals and families so that they have the peace-of-mind to pursue other important endeavors throughout their lives.</p>
<br> I am a Certified Financial Planner (CFP®).
</div>
See it here (SO snippets seems down): https://jsfiddle.net/websiter/9d40ap7c/
Feel free to provide the image min-width in any unit you want if you want it fixed size.
body {
margin: 0px;
background-color: rgba(195, 246, 255, 0.48);
}
.nav {
background-color: rgba(190, 190, 190, 0.72);
position: fixed;
top: 0px;
right: 0px;
left: 0px;
text-align: center;
height: 85px;
border: 1px solid black;
}
ul {
position: relative;
top: 6px;
left: 360px;
width: 450px;
height: 60px;
margin: 0px auto;
font-family: "Cairo";
padding: 5px;
}
li {
position: relative;
top: 6px;
display: inline;
font-size: 25px;
text-transform: uppercase;
letter-spacing: .03em;
}
li.spacing1 {
margin-right: 25px;
}
li.spacing2 {
margin-left: 25px;
}
li:hover {
border: 1px solid red;
padding: 5px;
}
.content {
background-color: white;
width: 1100px;
margin: 87px auto 0px auto;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../css/example.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet">
<title>My Portfolio</title>
</head>
<body>
<div class="nav">
<ul>
<li class="spacing1">About</li>
<li>Portfolio</li>
<li class="spacing2">Contact</li>
</ul>
</div>
<div class="content">
<p id="about">My name is Lawrence Yoon and I graduated from Cal Poly Pomona with a degree in Hospitality Management and minor in Business Marketing. After working in the hospitality industry for 5+ years, I wanted to expand my knowledge by trying out different
career paths and happened to find out about computer programming. I've been self-learning for 3+ months, and hope to become a front-end web developer soon! I am proficient with HTML and CSS, and have some knowledge of JavaScript. Once I get my first
job, I hope to continue studying and eventually learn back-end. My goal is to one day become a full-stack developer!</p>
<p>So far, I have knowledge of HTML, CSS, Bootstrap, JavaScript, and jQuery. I have used StackOverflow a couple times, and although I don't rely on this, it's great to ask questions and receive answers promptly from a loving community. Jon Duckett's
Introduction to HTML and CSS has been a great teacher to me thus far; although it's a bit dated, it contains detailed images and helped me greatly step foot into the world of web development. Following this book, I got his second book for JavaScript
and jQuery and have started to read through that. While I'm doing this, I'm learning from FreeCodeCamp, which immensely helped because through their projects, I'm able to make this file on Codepen, which will become my portfolio! I will definitely
try to finish all FCC challenges, and make a couple of apps to showcase my skills!</p>
<p>As of right now, I'm not looking for a job because I lack the skills necessary to get my first job in web development. In a couple of months, I hope to polish what I know so far as well as learn new skills to get my first job. In time, I will showcase
my skills by demonstrating my abilities through the makings of small apps. Thanks for reading! Please don't hesitate to reach out to me to provide tips, or if you want to talk about anything I'm all ears!</p>
<p id="portfolio">Portfolio:</p>
<img src="http://res.cloudinary.com/lyoon/image/upload/v1503300012/06_10_16_buqi65.jpg" alt="Beautiful sunset in Redondo Beach" width="300" height="300">
<img src="http://res.cloudinary.com/lyoon/image/upload/v1503299864/01_30_16_2_d1ntei.jpg" alt="Gray day in Redondo Beach" width="300" height="300">
<img src="http://res.cloudinary.com/lyoon/image/upload/v1503299922/02_01_16_wbmyow.jpg" alt="Water in Redondo Beach" width="300" height="300">
<img src="http://res.cloudinary.com/lyoon/image/upload/v1503300012/06_10_16_buqi65.jpg" alt="Beautiful sunset" width="300" height="300">
<p>Contact me here:</p>
<input type="text">
<br>
<input type="text">
<br>
<input type="text">
<br>
<input type="submit" value="Send">
<p id="contact">Here's where you can get in touch with me! Here, you can request for my resume, get more details on my experience, or learn more about my favorite hobbies! I will reply as soon as I am able, thanks!
</div>
</body>
</html>
Two questions:
I have my position: fixed nav-bar that is blocking my anchor tags (about, portfolio, contact), meaning when I click them, it takes me to their location but the nav-bar is blocking the start. When I click the links on the top, how can I make it so that it starts below my nav-bar?
I am using CSS li:visited {text-decoration: none;} but it changes to color purple and still have an underline. Why is that happening?
To resolve the issue with in-page anchors and a fixed header, what you need to do is to create and relatively position an anchor element above the content section.
Fiddle example: https://jsbin.com/dosalajotu/edit?html,css,output
For example, if your header was 50px tall:
header { height: 50px; }
.anchor { position: relative; top: -50px; }
<section>
<div id="about" class="anchor"></div>
</section>
With the :visited state, this would apply to a elements, not to li elements. If you update your CSS selector and also override the colour, that should resolve the issue.
li a:active, li a:visited { color: red; text-decoration: none; }
The above link is the html and css for a tribute page I am creating for a FCC challenge. I have been having trouble adding padding to my .life and .work divs.
Also as you can see at the minute my text is not contained to the div. I have been googling this problem for a couple of hours now and all the solutions have not worked for me.
Can anyone help me out?
Ideally I would like those grey divs slightly rounded off, centered, with the text confined to the div.
codepen
Are you looking for something like this?
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 here</em></p>
</div>
</div>
<footer>
<p class="text-center">Personal project for FCC's assignment 'Build a Tribute Page</p>
</footer>
Do you want something like this?
Solution
Changes:
.life {
background: darkgrey;
max-width: 80%;
margin: 20px auto;
padding:4em;
border-radius: 25%;
}
.work {
background: darkgrey;
max-width: 90%;
padding:4em;
margin: auto;
}
I just added padding to both the classes and it worked!
I'm taking the Free Code Camp course thing and the first project is to create a tribute page to whoever. Mine is on J Dilla, my favorite hip hop producer. God rest his soul. Anyways I'm trying to use a bootstrap thumbnail around a picture of him, with the text/caption also inside the thumbnail. My problem is that it messes up the centering and aligns the thumbnail to the left and I have no idea how to fix it. Here's the relevant code:
<style>
.cool-text {
font-family: Lobster;
font-size: 20px;
}
.image-centering {
display: block;
margin-left: auto;
margin-right: auto;
}
.vertical-centering {
margin-top: auto;
margin-bottom: auto;
}
.gray-background {
background-color: lightgray;
margin: 20px 100px 20px 100px;
border-radius: 5px;
}
.white-background {
background-color: white;
margin: 10px 560px 10px 10px;
}
</style>
<div class="gray-background">
<br>
<h1 class="cool-text text-center">J Dilla</h1>
<h2 class="text-center"><i>The one and only</i></h2>
<br>
<div class="span8 offset2">
<div class="img-thumbnail thumbnails">
<img class="image-centering" src="http://media.lessthan3.com/wp-content/uploads/2014/02/j-dilla-lessthan3.jpg" alt="The man himself."</img>
<p class="text-center">Dilla working on something ill, I presume</p>
</div>
</div>
<br>
</div>
</div>
Also if there's anything glaringly terrible about my code, I'd love some input on how to reformat it. This is my first time asking a question on stack overflow so forgive me if this is the wrong way to do so.