In my current HTML project I am using a side navigation bar for website navigation. If I scroll to the right too much on the page however the side navigation bar will overlay onto the body text of the page. How to I keep the side bar from adjusting for the view-port present in the browser. Here are some screenshots and my code for the page.
http://cjcahala.imgur.com/all/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="">
<meta name="description" content="">
<meta name="author" content="">
<title>cjcahala.net</title>
<style>
* {
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}
/***********************************/
#media only screen and (max-width: 640px) {
body {
width: 100%;
margin: 0 auto;
}
.btn {
font-family: Arial;
color: #ffffff;
font-size: 12px;
padding: 0px;
text-decoration: none;
margin: auto;
text-align:center;
}
.btn:hover {
background: #3cb0fd;
text-decoration: none;
}
.btn2 {
font-family: Arial;
color: #ffffff;
font-size: 18px;
padding: 8px;
text-decoration: none;
margin: auto;
text-align:center;
background: #3498db;
}
.btn2:hover {
background: #3cb0fd;
text-decoration: none;
}
.top {
position:absolute;
left:178px; right:0;
height: 92px;
margin:auto;
}
.left {
position: fixed;
left:0; top:0; bottom: 0;
width: 125px;
background: #3498db;
margin:auto;
}
.main {
position: absolute;
left:125px; top:92px; right:0; bottom:0;
width:400px;
margin:auto;
}
p {
position:relative;
left:20px;
}
.peppy {
position:relative;
left:10px;
}
}
/***********************************/
#media only screen and (min-width: 640px) {
body {
width: 100%;
margin: 0 auto;
}
.btn {
font-family: Arial;
color: #ffffff;
font-size: 18px;
padding: 0px;
text-decoration: none;
margin: auto;
text-align:center;
}
.btn:hover {
background: #3cb0fd;
text-decoration: none;
}
.btn2 {
font-family: Arial;
color: #ffffff;
font-size: 18px;
padding: 8px;
text-decoration: none;
margin: auto;
text-align:center;
background: #FFFF00;
}
.btn2:hover {
background: #3cb0fd;
text-decoration: none;
}
.top {
position:absolute;
left:178px; right:0;
height: 92px;
}
.left {
position: fixed;
left:0; top:0; bottom: 0;
width: 178px;
background: #3498db;
}
.main {
position: absolute;
left:178px; top:92px; right:0; bottom:0;
width:400px;
}
p {
position:relative;
left:20px;
}
.peppy {
position:relative;
left:10px;
}
}
</style>
</head>
<body>
<div class="left">
<a class="btn" href="./index.html">Home</a><br><br>
<a class="btn" href="./about.html">About</a><br><br>
<a class="btn" href="./contact.html">Contact</a><br><br>
<a class="btn" href="./media.html">Media</a><br><br>
<a class="btn" href="http://cjcahala.tumblr.com/">Blog</a><br><br>
<a class="btn" href="./donate.html">Donate</a><br><br>
<a class="btn" href="https://twitter.com/share" data-related="cjcahala" data-hashtags="cjcahala">Share This Page On Twitter</a><br><br>
<a class="btn" href="https://twitter.com/intent/tweet?button_hashtag=cjcahala" data-related="cjcahala">Tweet #cjcahala</a><br><br>
<a class="btn" href="https://twitter.com/cjcahala" data-show-count="false">Follow Me #cjcahala</a><br><br>
<a class="btn" href="https://twitter.com/intent/tweet?screen_name=cjcahala" data-related="cjcahala">Tweet To Me #cjcahala</a><br><br>
<a class="btn" href="https://www.facebook.com/cjcahalparaolympic" data-action="like" data-send="true">Like Me On Facebook</a><br><br>
<a class="btn" href="http://www.youtube.com/channel/UCdUcO0wCP3Fu2RbF8uo-iCQ/featured">Subscribe To My Youtube Feed</a><br><br>
<a class="btn" href="https://plus.google.com/109790307919254113898/posts">Add Me To Your Google Plus Circle</a><br><br>
<a class="btn" href="http://cjcahala.tumblr.com/">Follow Me On Tumblr</a><br><br>
<a class="btn" href="http://instagram.com/cj_cahala">Follow Me On Instagram</a><br><br>
</div>
<div class="main">
<h1 class="peppy">Hello There</h1>
<p>
Thanks for taking the time to check out my site. I am an aspiring paralympic athlete with some big goals for the future. I come from a blue collar home and the world of snowboarding is a really expensive one. Check out the website, take a look at my videos, or email me, and of course be social. If you are feeling particularly awesome today, you can even donate below.
</p>
<p>
<a class="btn2" href="https://adaptiveadventures.webconnex.com/2013donate">Awesomeness-Infused Donate Button</a>
</p>
<h1 class="peppy">About Me</h1>
<p>
Hello, my name is CJ Cahala and I am hoping to accomplish a dream. It was always a thought in the back of my head of being a paralympic athlete, living life on the mountain and hopefully having some medals to show for it. I was born after several hours of fetal distress and a lack of oxygen causing permanent brain damage in the form of ataxic cerebral palsy, generalized dystonia, and cervical dystonia. To make some big words small, its hard for me to balance at times, my head shakes constantly, and my hands tremor badly enough that ever since about second grade I’ve had to use a computer to write things down and complete my school work. And then there’s the people that meet me and think I’m just a heroin junkie, but that’s another story. As I grew up I didn’t really find learning to walk with the assistance of a walker or riding a three wheeled bicycle was weird or not normal until about second grade. Due to the tremors in my hands I couldn’t write down the day’s writing assessment, and this was when I started to cry. The reason being was that I wasn’t like the other kids, but little did I know that no-one really cared about anything in elementary school except getting to recess on time and trading up your cold lunch as much as possible so that you got the best lunch at the table. As I grew older I started to realize that my disability was more of a discussion topic than a reason for people not to converse with me. By the time I outgrew my first board I found that it was time to step my game up. I got decked out with the best board I could find and soon got out to Colorado for the first time. It was when I got out to Colorado that I thought, “I could so do this for a living!”. And now, that is exactly what I want to do. My mom is a teacher’s aid at the local high school and my dad is a screen printer, and I just got a minimum wage job, which is why I need sponsorship for my travels to training camps and snowboardcross competitions. If you could find a way to get me connected with any corporate sponsors, organizations who sponsor kids like me, or individual people that you think may be interested to hear my story, my thanks will be endless. If you love powder days out on the mountain, then you must understand my yearn to be able to spend my life living my dream snowboarding.
</p>
<h4 class="peppy">Be Social</h4>
<p>
A website like mine thrives on you-the viewer- being social. As you may have seen, I threw up some socialte buttons at the top of the page. Though it may sound cheesy, sharing is caring in my world. The more people who see the site, the more energy it has behind it, and energy is what I need to keep doing what I love.
</p>
<h4 class="peppy">Updates and More</h4>
<p>
So, you see my site, but want know what I'm doing. You are supporting me, so I don't mind internet stalkers. Check out my blog here and from there, you will see links to follow me on twitter or get all caught up on my Youtube uploads (plus many other ways to network with me), all of which are awesome non-productive ways to spend time on the internet. If you want come check out my Blog
</p>
<h4 class="peppy">Want To Learn More About Me</h4>
<p>
If you really want to know more about me or if you have a media inquiry, send me an email at is-cj#anche.no
<h1 class="peppy">Contacting Me</h1>
<p class="lead">
To contact me please email me at is-cj#anche.no. The social networking buttons at the top of the page can also be used to connect with me. If you wish to donate, you can click on the donate button below and be sure to put "This donation is for CJ Cahala" in the "notes" section of the Adaptive Adventures donate page. If you have any donation questions, you can send me an email again at is-cj#anche.no.
</p>
<h1 class="peppy">Check Out My Videos</h1>
<p>
<!--Video player-->
<iframe width="640" height="360" src="http://www.youtube.com/embed/InaOC5h2Ebo?rel=0" frameborder="0" allowfullscreen></iframe>
<!--Video Description-->
</p>
</div>
</body>
</html>
Change position: fixed to position: absolute under the .left class.
.left {
position: absolute;
left:0; top:0; bottom: 0;
width: 125px;
background: #3498db;
margin:auto;
}
DEMO FIDDLE
Related
How would I add a border around the div "border" class? within CSS, I tried doing it before but the border would just show as a straight line on the top of the site and nothing around the div contents. please help! I want there to be a border around the first image along with the h2, h3, menchies class, h4, and walgreens class.
Here is the HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Employment</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1> Joshua Eachus</h1>
<div class="border">
<img class="img" src="headshot.jpg" alt="Joshua Eachus">
<h2>Job Experience</h2>
<h3>Menchies</h3>
<p class="menchies"> Between January 2020-November 2020 I was a team member at menchies,
I would mainly greet customers, help them around the store if needed and cash them out
with the cash register when ready. I also am constantly busy
making sure every topping and yogurt machine is filled up for the customers.
I would usually be closing so I work 5 to 8 hour shifts every time.
When closing I would put all the toppings away, clean the whole store
completely and prep food for the next day.</p>
<h4>Walgreens</h4>
<p class="Walgreens"> I am currently working at Walgreens, which has been a great introduction into retail
and has truly taught me many things. There is a diverse and large amount of tasks I do at Walgreens,
one of the main tasks is running the photo department, where I print many kinds of photos,
create canvases and many more projects. Other tasks includes stocking,
outdating, cleaning duties and counting registers.</p>
</div>
<h5>Achievements</h5>
<img class="img2" src="ptk.jpg" alt="PTK">
<p class="ptk">I am a member of Phi Theta Kappa. Founded on November 19, 1918 Phi Theta Kappa is the world’s largest organization specifically
devoted to recognizing the achievements of honor students at 2-year institutions. Currently,
PTK has approximately 3 million members globally.</p>
</body>
</html>
Here is the CSS Code:
html{background-color:white;}
h1{text-align:center;
font-size:50px;}
h2{position:fixed;
top:180px;
left:475px;
font-size:40px;}
h3{position:fixed;
top:230px;
left:365px;
font-size:33px;}
h4{position:fixed;
top:450px;
left:365px;
font-size:33px;}
h5{position:fixed;
top:130px;
right:430px;
font-size:33px;}
.img{height:470px;
width:320px;
position:fixed;
top:220px; left:15px;}
.img2{width:500px;
height=100px;
position:fixed;
top:250px; right:280px;}
.menchies{position:fixed;
top:290px;
left:350px;
font-size:20px;
width:30%;}
.Walgreens{position:fixed;
top:520px;
left:350px;
font-size:20px;
width:30%;}
.ptk{position:fixed;
top:540px;
right:250px;
font-size:18px;
width:30%;}
Stop using position fixed
You are using CSS to shoot yourself in the foot, stop it. Go watch some Layout Land and take Kevin Powell's free Conquering Responsive Layouts course.
/*
html {
background-color: white; Background is already white
}
*/
h1 {
text-align: center;
font-size: 3rem;
/* Use font sizes that respect the user setting */
}
body {
max-width: 60ch;
margin-inline: auto;
}
.border {
border: 2px solid tomato;
}
/*
DO NOT POSITION FIX EVERYTHING
h2 {
position: fixed;
top: 180px;
left: 475px;
font-size: 40px;
}
h3 {
position: fixed;
top: 230px;
left: 365px;
font-size: 33px;
}
h4 {
position: fixed;
top: 450px;
left: 365px;
font-size: 33px;
}
h5 {
position: fixed;
top: 130px;
right: 430px;
font-size: 33px;
}
.img {
height: 470px;
width: 320px;
position: fixed;
top: 220px;
left: 15px;
}
.img2 {
width: 500px;
height=100px;
position: fixed;
top: 250px;
right: 280px;
}
.menchies {
position: fixed;
top: 290px;
left: 350px;
font-size: 20px;
width: 30%;
}
.Walgreens {
position: fixed;
top: 520px;
left: 350px;
font-size: 20px;
width: 30%;
}
.ptk {
position: fixed;
top: 540px;
right: 250px;
font-size: 18px;
width: 30%;
}
*/
<h1> Joshua Eachus</h1>
<div class="border">
<img class="img" src="headshot.jpg" alt="Portrait of Joshua Eachus">
<h2>Job Experience</h2>
<h3>Menchies</h3>
<p class="menchies"> Between January 2020-November 2020 I was a team member at menchies, I would mainly greet customers, help them around the store if needed and cash them out with the cash register when ready. I also am constantly busy making sure every topping and yogurt
machine is filled up for the customers. I would usually be closing so I work 5 to 8 hour shifts every time. When closing I would put all the toppings away, clean the whole store completely and prep food for the next day.</p>
<h3>Walgreens</h3>
<p class="Walgreens"> I am currently working at Walgreens, which has been a great introduction into retail and has truly taught me many things. There is a diverse and large amount of tasks I do at Walgreens, one of the main tasks is running the photo department, where I
print many kinds of photos, create canvases and many more projects. Other tasks includes stocking, outdating, cleaning duties and counting registers.</p>
</div>
<h2>Achievements</h2>
<img class="img2" src="ptk.jpg" alt="PTK">
<p class="ptk">I am a member of Phi Theta Kappa. Founded on November 19, 1918 Phi Theta Kappa is the world’s largest organization specifically devoted to recognizing the achievements of honor students at 2-year institutions. Currently, PTK has approximately 3 million
members globally.</p>
Here I have rearranged your site layout! Just have a look at it and try to understand how to do it in proper way. Please click on full page when you run this in the Stack Overflow code snippet because this is not mobile friendly.
If you want to learn more about this, visit W3Schools CSS Website Layout tutorial or any other one which is related to this.
h1{
font-size: 50px;
text-align: center;
line-height: 5px;
}
h2{
font-size: 40px;
text-align: center;
line-height: 0px;
padding-bottom: 10px;
}
h3{
font-size: 30px;
line-height: 5px;
}
p{
font-size: 20px;
text-align: justify;
}
.container{
width: 100%;
border: 1px solid #ff00ff;
padding: 10px;
box-sizing: border-box;
}
.section{
padding: 15px;
display: inline-block;
vertical-align: middle;
}
.one{
width: 20%;
}
.two{
width: 35%;
}
.three{
width: 35%;
}
img{
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Employment</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Joshua Eachus</h1>
<div class="container">
<div class="section one">
<img src="https://i.ibb.co/VLV0qfv/Wood-Floor-Texture-Seamless.jpg" alt="Joshua Eachus">
</div>
<div class="section two">
<h2>Job Experience</h2>
<h3>Menchies</h3>
<p class="menchies"> Between January 2020-November 2020 I was a team member at menchies,
I would mainly greet customers, help them around the store if needed and cash them out with the cash register when ready. I also am constantly busy making sure every topping and yogurt machine is filled up for the customers. I would usually be closing so I work 5 to 8 hour shifts every time. When closing I would put all the toppings away, clean the whole store completely and prep food for the next day.</p>
<h3>Walgreens</h3>
<p class="Walgreens"> I am currently working at Walgreens, which has been a great introduction into retail and has truly taught me many things. There is a diverse and large amount of tasks I do at Walgreens, one of the main tasks is running the photo department, where I print many kinds of photos, create canvases and many more projects. Other tasks includes stocking, outdating, cleaning duties and counting registers.</p>
</div>
<div class="section three">
<h3>Achievements</h3>
<img src="https://i.ibb.co/VLV0qfv/Wood-Floor-Texture-Seamless.jpg" alt="PTK" style="height: 200px;">
<p>I am a member of Phi Theta Kappa. Founded on November 19, 1918 Phi Theta Kappa is the world’s largest organization specifically devoted to recognizing the achievements of honor students at 2-year institutions. Currently, PTK has approximately 3 million members globally.</p>
</div>
</div>
</body>
</html>
Your problem is because you have used position:fixed; in almost every element. Please stop doing that and if you want to clarify whether your border is working properly or not, please give some padding to it and then you will see it works properly.
.border{
border: 1px solid #ff00ff;
padding: 10px;
}
<div class="border">
</div>
If you can show what you actually need to make, I will be able to do it without using position: fixed; If you have a image of what you exactly need, just share it with us.
Thanks and best regards!
For my project, I have created a fake beachside hotel accommodation website. As of now, I feel like I have successfully completed my website in terms of it's content. However, one issue still remains within the development of this website. I have recently discovered that when I reduce the size of the google window when displaying my website will cause the content within it to not display correctly (not be responsive). This specifically affects the header and the footer This is the same deal when I tested my website on a laptop with a much smaller resolution than my computer monitor, and in order for the website to look neat was to zoom out at around 75%. I've seen tutorials on how to do it, and it's mostly to do with using this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I've also seen that using the min-height tag can help, but to me it doesn't work.
This is affecting mainly the header image and the footer since it has social media icons within it, along with a span tag to separate a link to a contact form. I think the issue might have to do with the placement of my code's more specifically in terms of where I have placed the div's and class's. It may also have to do with the two-column layout present within the code. I also think the solution is simple but I obviously can't figure it out. Any help is appreciated as always. Also keep in mind the code below is only for the Home Page. The styling for other pages are slightly different, but I think I might be able to figure out how to fix the other pages as well after the home page solution has been given to me. If you need screenshots of it I'll happily upload them.
<!DOCTYPE html>
<html>
<head>
<meta lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Home - Sorento by the Sea</title>
</head>
<div class="container">
<div id="header">
<a href="index.html" style="text-decoration: none;">
<img src="images/sorrento_by_the_sea_logo.jpg" alt="Our Logo" title="Our Logo">
</a>
</div>
<div id="nav">
<ul>
Home
|
Getting There
|
The Apartment
|
Pricing and T&C
</ul>
</div>
<body>
<div class="column-layout">
<div class="main-column">
<h1>Who are we?</h1>
<p><b>Sorrento by the Sea</b> is a luxary apartment located on the picturesque <b>Mornington Pennisula</b>, an approximate one-hour scenic drive from Melbourne, and right next door to Portsea.
Our apartment is a lazy 10-minute walk from the relaxed township of Sorrento that offers restaurants, cafes, a chemist, a supermarket, a butcher and lots more. It is located in a quiet avenue, just 4 houses from the beach. It is in easy walking distance of the ocean beaches and surf.</p>
<p>Your <b>private luxury apartment</b> consists of a spacious living area with <b>leather lounge suite</b> overlooking a sun drenched, tree-filled private garden.</p>
<p>A <b>separate kitchenette</b> has everything you need to make your stay relaxed and comfortable. A <b>queen sized bedroom</b> and an amazing bathroom complete with <b>free standing black bath</b> entices you to relax and unwind.</p>
<p>Two TVs are sure to make everyone happy! An <b>undercover BBQ area</b> with seating offers plenty of space to stretch out and enjoy that cup of freshly brewed coffee or a glass of wine.</p>
<h2 style="color:#4d1d18;padding-left:220px;font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;">This is the perfect place for a home away from home</h2>
<img src="images/back_beach.jpg" alt="Back Beach" title="Back Beach" style="width:690px;margin-left: 210px;">
<div class="pet">
<h1>Pet Friendly</h1>
<p>We understand that pets are an important part of the family.
<b>We are pet friendly by arrangement</b> - so please talk to us about your needs.
We offer a <b>fully enclosed backyard, shady trees, water bowls, food bowls and a lead if you forget one</b>.</p>
</div>
</div>
<div class="tests">
<h1>Testimonials</h1>
<q>So sorry we had to go home after only one night. We will definitely stay two nights next time!</q>
<br>
<q>This apartment is close to everything. We didn't need the car as the walks were amazing"</q>
<br>
<q>Your attention to detail made our stay so relaxed and comfortable. It was such a shame we had to drive back to our little flat, which is smaller than your apartment. We want to move in!</q>
<br>
<q>Cosy and comfortable. We imagined we owned it and enjoyed being spoilt. Thank you</q>
<br>
<q>What a magical stay at such an amazing place. Completely self-contained and very private. We loved it and will return again and again.</q>
<br>
<q>Never felt so spoilt. A perfect get away and so close to everything. We had the best bath ever!</q>
<br>
<q>A few minutes’ walk from the beach, picnic basket in hand and towel over the shoulder - can't think of anything better except that wonderful breakfast. That bacon is the best in Melbourne!</q>
<br>
<q>Relaxing in that sunny garden watching our dog chasing balls. Let me stay forever!</q>
</div>
</div>
<div class="flex-container">
<img src="images/ocean_beach.jpg" alt="Ocean Beach" title="Beach with Rocks" style="max-width:100%;height:auto;margin:0 60px 0 60px;">
<br>
<img src="images/back_beach_sorrento.jpg" alt="Ocean Beach 2" title="Beach Walkway" style="max-width:100%;height:auto;margin-right:60px;">
<br>
<img src="images/ocean_beach3.jpg" alt="Ocean Beach 3" title="Dark Blue Ocean" style="max-width:100%;height:auto;">
</div>
</body>
<footer>
<div class="social-media">
<ul>
<img src="images/facebook_small.png">
<img src="images/instagram_small.png">
<img src="images/twitter_small.png">
<img src="images/youtube-variation_small.png">
<img src="images/paypal_small.png">
</ul>
<span>
Contact form
</span>
</div>
</footer>
</div>
</html>
And this is the CSS:
* {
font-family: Helvetica, sans-serif;
background-color: lightsteelblue;
}
p {
line-height: 150%;
}
.container {
height:auto;
max-width: 100%;
}
#header {
margin: 220px, 250px;
}
#header img {
max-width:100%;
height:auto;
margin-left: 500px;
}
#nav {
text-decoration:none;
text-align:right;
padding-right:20px;
border: 3.55px solid #4d1d18;
border-radius:10px;
margin-top: 5px;
background-color: lightsteelblue;
max-width:100% ;
}
a {
text-decoration: none;
color:#4d1d18
}
a:visited {
color: #4d1d18;
}
a:hover {
color: #555;
}
a:active {
color: #555;
}
h1 {
color:#87423c;
font-size: 36px;
}
h2 {
font-size: 24px;
color: #4d1d18;
}
/*---------footer-----*/
footer {
background-color: lightsteelblue;
color: #443;
}
.social-media{
text-align: center;
border: 3px solid #4d1d18;
border-radius: 15px;
padding: 5px 15px;
margin-top: 15px;
}
.social-media span {
text-align: right;
margin-left: 1300px;
border: 1px solid #682721;
border-radius: 5px;
padding: 10px;
}
.social-media img {
padding-right: 20px;
}
/*--------Home----------*/
.column-layout {
line-height: 1.60;
padding: 20px 20px;
display:flex;
background-color: lightsteelblue;
border-radius: 10px;
border: 1px
}
.main-column {
display:flex;
flex-direction:column;
text-align:left;
margin-top:20px;
margin-bottom:30px;
margin-right:80px;
margin-left:20px;
}
.tests {
display: flex;
flex-direction: column;
margin-top: 140px;
border: 5px solid #4d1d18;
border-radius:20px;
height: 800px;
padding: 0px 30px 0px 30px;
}
q {font-style:italic;}
.flex-container {
display: flex;
background-color: lightsteelblue;
}
.pet {
border: dotted #4d1d18;
border-radius: 10px;
padding: 0px 20px 10px 30px;
margin-top: 50px;
}
ul {
display:inline-block;
}
Use max-height: 100%; on your image. As you did with max-widthon your image.
I think it is a good practice to wrap your image <img> in a container <div>. You have to set the container's width and height to some values (either with flex or percent values or fixed values) and then set the image's width and height as a percent, relative to its container. You can also try and use the object-fit: contain; css property on the image. You can also consider using media queries for different screen resolutions. I found this stackoverflow QA useful in this topic.
Edit: Along with object-fit: contain; you can use max-width: 100%; and max-height: 100%; on the image.
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'm trying to make a website where the main content is on the left and miscellaneous things on the right. The two divs are wrapped inside another div that centers the page and leave some white space on both side. However the right div always go below the left one even though there's clearly still room for the the right one to fit. I know this problem is pretty common but I tried many solutions like display:inline-block, and it doesn't work at all. Here's what my page looks like right now: https://hongweichen0.github.io/
body {
font-family: "Roboto", sans-serif;
margin: 0px;
padding: 0px;
background-color: rgb(220, 240, 230);
}
.banner {
text-align: center;
background: rgb(20, 16, 16);
position: fixed;
top: 0px;
width: 100%;
}
.banner h1 {
color: rgb(255, 255, 255);
font-weight: bold;
font-style: italic;
}
.centerPage {
background-color: rgb(255, 249, 249);
width: 80%;
margin: auto;
margin-top: 60px;
}
.content {
float: left;
width: 70%;
padding: 20px;
border: 5px solid black;
}
.contentRight {
width: 10%;
}
.clear {
width: 100%;
line-height: 0px;
clear: both;
}
.content p,
.content ul {
width: 100%;
line-height: 1.5em;
text-align: justify;
}
.content h2 {
width: 100%;
border-bottom: 2px solid black
}
.content img {
float: left;
margin: 10px;
margin-top: 0px;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hong Wei Chen's Website</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="banner">
<h1>Hong Wei Chen</h1>
</div>
<div class="centerPage">
<div class="content">
<h2>Introduction</h2>
<p>
My name is Hong Wei Chen. I'm currently enrolled in Midwood High School as a Junior. I created this personal website for fun just to show off what I learned about HTML/CSS from KhanAcademy. Still pretty new to web design and I plan to learn more about
how to implement Javascript into websites. There's still a lot for me to learn but I plan to keep on going and become a badass programmer. My ultimate goal is to become expert in both front-end and back-end development. Now, let me show off as
much as I can. No one will visit this site anyway.
</p>
<h2>Useless Info (not personal)</h2>
<ul>
<li>First Name: Hong Wei</li>
<li>Last Name: Chen</li>
<li>Age: 16</li>
<li>Favorite Food: EGGS!!!</li>
<li>Favorite Movie: "Groundhog Day", "Interstellar"</li>
<li>Cats or Dogs: Dogs</li>
<li>Favorite Companies: SpaceX, Google, Tesla</li>
<li>Favorite Color: Blue</li>
</ul>
<h2>My Incredible Works</h2>
<img src="Abstract%20Fish.PNG" alt="Abstract Fish. A random fish painter program." width="200">
<p>This is an intro to Javascript project I made on Khan Academy during my early stages of learning. The idea is that when the user clicks on the canvas, a fish with random size and color will be drawn on the position of the cursor. This lesson is
about functions and how to call them with parameters. In this case, the parameter is the x and y position, which is provided by the user's mouse click. This worked out pretty well and I even took a screen shot of it and used it as my avatar for
many websites. It's a piece of art made with Processing JS.</p>
<img src="Shooting%20Star.PNG" alt="Shooting Star. A shooting star and explosion animation" width="200">
<p>This one is also from the Intro to Javascript course on Khan Academy. I love their free courses, probably the best ones out there. Anyway, this is actually an animation using the draw function. I did this on the second day I started this course
and it took me a solid 2 hours to finish. I went way pass the expectation and added a bunch of stuffs. At the end I was saying to myself, "hey, this is fun". I finally realized how amazing and fun programming can be.</p>
</div>
<div class="clear"></div>
<div class="contentRight">
<h1>Cool Buttons!</h1>
</div>
</div>
<script type="text/javascript" src=script.js></script>
</body>
</html>
You can use flexbox to handle the positioning of the left and right containers. Please see the code snippet below.
body {
font-family: "Roboto", sans-serif;
margin: 0px;
padding: 0px;
background-color: rgb(220, 240, 230);
}
.banner {
text-align: center;
background: rgb(20, 16, 16);
position: fixed;
top: 0px;
width: 100%;
}
.banner h1 {
color: rgb(255, 255, 255);
font-weight: bold;
font-style: italic;
}
.centerPage {
background-color: rgb(255, 249, 249);
width: 80%;
margin: auto;
margin-top: 60px;
display: flex;
flex-direction: row;
}
.content {
flex: 1 1 auto;
padding: 20px;
border: 5px solid black;
}
.contentRight {
flex: 0 0 80px;
padding: 20px 0 0 0;
}
.clear {
width: 100%;
line-height: 0px;
clear: both;
}
.content p,
.content ul {
width: 100%;
line-height: 1.5em;
text-align: justify;
}
.content h2 {
width: 100%;
border-bottom: 2px solid black
}
.content img {
float: left;
margin: 10px;
margin-top: 0px;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hong Wei Chen's Website</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="banner">
<h1>Hong Wei Chen</h1>
</div>
<div class="centerPage">
<div class="content">
<h2>Introduction</h2>
<p>
My name is Hong Wei Chen. I'm currently enrolled in Midwood High School as a Junior. I created this personal website for fun just to show off what I learned about HTML/CSS from KhanAcademy. Still pretty new to web design and I plan to learn more about
how to implement Javascript into websites. There's still a lot for me to learn but I plan to keep on going and become a badass programmer. My ultimate goal is to become expert in both front-end and back-end development. Now, let me show off as
much as I can. No one will visit this site anyway.
</p>
<h2>Useless Info (not personal)</h2>
<ul>
<li>First Name: Hong Wei</li>
<li>Last Name: Chen</li>
<li>Age: 16</li>
<li>Favorite Food: EGGS!!!</li>
<li>Favorite Movie: "Groundhog Day", "Interstellar"</li>
<li>Cats or Dogs: Dogs</li>
<li>Favorite Companies: SpaceX, Google, Tesla</li>
<li>Favorite Color: Blue</li>
</ul>
<h2>My Incredible Works</h2>
<img src="Abstract%20Fish.PNG" alt="Abstract Fish. A random fish painter program." width="200">
<p>This is an intro to Javascript project I made on Khan Academy during my early stages of learning. The idea is that when the user clicks on the canvas, a fish with random size and color will be drawn on the position of the cursor. This lesson is
about functions and how to call them with parameters. In this case, the parameter is the x and y position, which is provided by the user's mouse click. This worked out pretty well and I even took a screen shot of it and used it as my avatar for
many websites. It's a piece of art made with Processing JS.</p>
<img src="Shooting%20Star.PNG" alt="Shooting Star. A shooting star and explosion animation" width="200">
<p>This one is also from the Intro to Javascript course on Khan Academy. I love their free courses, probably the best ones out there. Anyway, this is actually an animation using the draw function. I did this on the second day I started this course
and it took me a solid 2 hours to finish. I went way pass the expectation and added a bunch of stuffs. At the end I was saying to myself, "hey, this is fun". I finally realized how amazing and fun programming can be.</p>
</div>
<div class="clear"></div>
<div class="contentRight">
<h1>Cool Buttons!</h1>
</div>
</div>
<script type="text/javascript" src=script.js></script>
</body>
</html>
Why do you have div.clear between them? When I removed it, it works. Clear specifies on which side are floating elements not allowed to float. Also, you can use flexbox for this.
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; }