So I'm having trouble getting my website to keep shrinking past 763px. It's all marked up with percentages and ems instead of pixels but it seems to be stuck anyways. The main image on the page is also not shrinking and instead, the left floating div beside it begins to overlap once the viewport starts to shrink.
cimmanon has helped with the overlapping issue but I'm still having problems with shrinking the image and the div it is nested in.
http://students.thenet.ca/jlandon/new/school/week5/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css"/>
<link rel="stylesheet" type="text/css" href="week5_main.css" title="Main"/>
<title>Point Grey Realty</title>
<meta charset="UTF-8"/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<header>
<h1>Point Grey Realty</h1>
</header>
<div id="backer">
<article>
<header id="listing">
<h2>Arthur Erickson's Golden Mile - $5,290,000</h2>
<h3>3293 Point Grey Road, Vancouver</h3>
</header>
</article>
<div id="main_image"><figure><img src="goldenmile_entrance2.jpg" alt="entrance"/></figure></div>
<article id="listing_info">
<h4>MLS:V940361</h4>
<figure><img src="bryanyan.jpg"/></figure>
<ul id="bryan">
<li>Bryan Yan</li>
<li>Telephone: 604-732-8322</li>
</ul>
<ul>
<li>Building Type: House</li>
<li>Bedrooms: 2</li>
<li>Bathrooms: 2</li>
<li>Finished Interior: 1,876 sf</li>
<li>Floor Space: 2,347 sf</li>
<li>Lot Size: 4,405 sf</li>
<li>Year Built: ~1963</li>
<li>2 Storeys</li>
<li>Large Rec Room</li>
<li>Age of Building: 50 years</li>
<li>Land Size: 33.0 x 133.5</li>
<li>Water, mountain & city views</li>
<li>Waterfront</li>
</ul>
</article>
<article id="listing_history">
<p>Designed in 1963, this was the area’s first multi-unit development. The materials chosen for this estate were brick or plaster for walls and structural bays, and pressure treated fir for the wood spans. These materials, along with brick or quarry tile flors, provide a relatively neutral background. The resulting expression is directly that of the sturdy but graceful nature of the masonry against the more tenuous and taut nature of the wood. The site commands a megnificent view of English Bay, the North Shore mountains of West Vancouver and the downtown Vancouver skyline to the east. Private south facing courtyards trap the sun and serve as entry courts from the strets. One outdoor and one indoor swimming pool were incorporated for individual owners as well as several roof gardens.</p>
<h4>The Unit</h4>
<p>This is a rare residential offer on the “Golden Mile” built during one of Erickson’s most creative periods. The home was the winner of the 1967 National Award for Design. As a Point Grey resident, he created this home to be perfect. To describe this masterpiece, a quote by the Concrete Poet: “Architecture has to be functional but it should allow another dimension than what people are usually content to think about. It should open the perspective of the visitor to something they haven’t experienced before. It shouldn’t be ordinary or pedestrian.” Kept in its precious originality and offered for the first and perhaps, last time...</p>
</article>
<div id="extra_images">
<figure>
<img src="goldenmile_entry_mini.jpg"/>
<img src="goldenmile_kitchen_mini.jpg"/>
<img src="goldenmile_dining2_mini.jpg"/>
<img src="goldenmile_living2_mini.jpg"/>
<img src="goldenmile_bedroom_mini.jpg"/>
<img src="goldenmile_backyard3_mini.jpg"/>
<img src="goldenmile_deck_mini.jpg"/>
<img src="goldenmile_view_mini.jpg"/>
</figure>
</div>
</div>
</div>
CSS
body {
background-color: #335942;
background-image: url('background.gif');
background-repeat: repeat-y;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 0.875em;
color: #000000;
}
h1 {
color: #FFFFFF;
font-size: 4.5em;
}
h2 {
font-size: 2.25em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 1.142857142857143em;
padding-top: 5px;
}
#wrapper {
max-width: 90%;
margin-top: 2.12765957446809%;
margin-left: 2%;
margin-bottom: 2%;
}
#backer {
background-color: #FFFFFF;
max-width: 70%;
display: table;
padding: 2.12765957446809%;
}
#listing {
margin-bottom: 1%;
}
#main_image {
float: left;
max-width: 74.46808510638298%;
float: left;
}
#listing_info {
width: 15.95744680851064%;
float: right;
}
#bryan {
font-size: 1em;
}
#listing_history {
width: 100%;
clear: both;
padding-top: 10px;
}
#extra_images {
width: 100%;
padding-top: 10px;
text-align: center;
}
The image on your front page is 700px wide. After you add in all of the margins/paddings on ancestor elements, it ends up coming out to about 763px. If images are meant to scale with the viewport, they are typically styled like this:
img {
max-width: 100%;
}
Related
I created a reactive website with columns, but for some reason the columns are reaching too far on mobile screens, going too far to the left beyond where the header and footer end. I did I media query to make the two columns of the site reactive (stack on one another) and am not sure why they are stretching out like this when the screen is smaller. Can anyone fix my code so that the containers do not overflow? Thank you so much!
/* Add a background color with some padding to the body */
body {
background: #383f51;
font-family: Geneva, sans-serif;
}
/* Header and Blog Title */
header {
background: #91c7b1;
margin-top: 15px;
padding: 5px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
text-align: center;
}
header h1 {
font-size: 42px;
font-family: "Electrolize", sans-serif;
}
header p {
font-style: italic;
font-size: 24px;
}
/* navbar/*
/* top navigation bar style */
nav {
background-color: #000;
overflow: hidden;
display: block;
height: auto;
width: auto;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
/* navigation bar links */
nav a {
float: left;
color: white;
text-align: center;
font-size: 20px;
padding: 10px;
margin-left: 5px;
text-decoration: underline;
font-family: "Electrolize", sans-serif;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.rightcolumn {
flex: 1;
}
.leftcolumn {
flex: 5;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
.row {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
main > .row {
display: flex;
}
#media screen and (max-width: 800px) {
main > .row {
flex-direction: column;
}
}
/* images (work in progress at the moment) */
/* images and videos (work in progress at the moment) */
.iframe-container {
position: relative;
width: 100%;
padding-bottom: 60.25%;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 20px;
}
/* Post layout for articles and additional areas */
.post {
display: block;
background-color: white;
padding: 20px;
margin-top: 10px;
border-style: solid;
border-color: #91c7b1;
border-radius: 25px;
}
article h2,
article h2 a,
.post h2 {
font-size: 24px;
text-decoration: none;
color: #533a71;
}
article h4 {
padding-top: 15px;
}
article h5 {
font-size: 16px;
}
.post p {
line-height: 1.5em;
font-size: 16px;
}
/* Footer */
.footer {
color: black;
margin-top: 10px;
left: 0;
bottom: 0;
width: 100%;
background-color: #91c7b1;
text-align: center;
font-size: 18px;
border-radius: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Project Incredible Indie Games</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Electrolize&display=swap" rel="stylesheet">
</head>
<body>
<!-- Begin Header -->
<header role="banner">
<h1>Incredible Indie Games</h1>
<p>Reviews and Reccomendations for the Moderate Indie Gamer</p>
<!-- End Header -->
<!-- Begin Navigation -->
</header>
<nav role="navigation">
Home
About
Reviews
Contact
</nav>
<!-- End Navigation -->
<!-- End Header -->
<!-- Begin Main Content -->
<main role="main">
<div class="row">
<!-- Begin Blog Posts -->
<section class="leftcolumn">
<article class="post" role="article">
<h2> Ori and The Blind Forest: A Soulful and Stunning Action-Platformer</h2>
<h5><time datetime="2021-09-22">Sep, 22 2021</time></h5>
<div class="iframe-container">
<iframe src="https://www.youtube.com/embed/cklw-Yu3moE" title="Ori and the Blind Forest" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<h4> Summary </h4>
<p> Ori and The Blind Forest begins with Ori, a small tree spirit that is blown away from its home in The Spirit Tree and into the care of its adoptive mother Naru. However, as dark forces gather the Spirit Tree is broken in Ori's absence. With The Spirit Tree dead, the land of Nibel that it guarded begins to wither and decay. As the last of the tree spirits, Ori is forced to travel around Nibel and restore The Spirit Tree in order to save Nibel from the talons of despair.</p>
<p> Ori's story of courage, love, and sacrifice is beautifully displayed in a fluid and engaging Metroidvania style, in which platforming and scrolling play a major part in gameplay. The hand-painted artwork and fully orchestrated soundtrack bring the game to life, offering an emotional and moving experience to the player. </p>
<h4> How does It Rate? </h4>
<p> Controls: Ori's controls were extremely fluid, with little to no lag and multiple ways to get around. The running, jumping, and dashing flowed like water, while the combat mechanic was simple enough to not worry about complex buttons. Overall, I would rate the controls at a 5/5.</p>
<h4> General Difficulty:</h4>
<p> Like many games, Ori is able to be played on multiple difficulties. The easy setting, which is meant for players who focus on the story primarily, weakens all enemies and reduces the amount of damage taken from both environmental traps and attacks. The normal difficulty of the game is well balanced, with more effort required during battles and traversing the world; but not that much to take away from the experience. The hard difficultly is good for experienced gamers, as it offers more of a challenge in terms of keeping Ori alive by increasing the normal damage taken and shortening Ori's life. I will note that there are no achievements associated with the higher levels of difficulty, all achievements and content are available in each setting. Because of this well-managed system of difficulty and the fact that the full experience is available to players of all levels, I rate this game's difficulty at 5/5 </p>
<h4> Time Spent Playing:</h4>
<p> This game averages around 8.5-12 hours for total playtime including the story-based cutscenes. The total playtime of an individual depends on whether or not they desire a full completion of all collectibles, and how they are choosing to play the game: causally in their free time or one sitting speedrunning. While 12 hours may not seem like much, the gameplay is likely to be split amongst many different days due to the ease to interact with the nature of safe files. Files are located very frequently, so this is a great game to pick up and drop as desired. I will admit that the game could have been longer, but not that the existing content is above standard. Because of this, I will rate it 4/5. </p>
<h4> Visuals and Audio: </h4>
<p> As noted earlier, the visuals and audio elements of this game are beautifully crafted to complement its rich and emotional story. The hand-painted backdrops and layered one on top of the other to give depth and life to the world of Nibel, while the more solid foreground graphics are crisp and easy to see. Meanwhile, the soundtrack reflects the mood of each area and re-uses the main theme as elements to significant points in the story to tie everything together. As the music and visuals are the most noted features of this game, they will receive a score of 5/5. </p>
<h3> <em>Overall Score (19/20) Certified Incredible</em> </h3>
<br>
<footer class="references">
<h4> References </h4>
<p> Entertainment Software Rating Board (ESRB). (2021). Ori and the blind forest. ESRB Ratings. https://www.esrb.org/ratings/10013405/Ori+and+the+Blind+Forest/</p>
<p>Moon Studios. (2017, May 30). Blind forest. Ori. https://www.orithegame.com/blind-forest/</p>
<p>Ori and the blind forest prices. (2021). PriceCharting. https://www.pricecharting.com/search-products?type=prices&q=Ori+and+the+Blind+Forest&go=Go</p>
<p>Ori and the blind forest. (2021). Steam. https://www.orithegame.com/blind-forest/</p>
</footer>
</article>
</section>
<!-- End Blog Posts -->
<!-- Begin Sidebar -->
<aside class="rightcolumn" role="complementary">
<section class="post">
<h2>About Me</h2>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</section>
<section class="post">
<h2>Upcoming Posts</h2>
</section>
</aside>
<!--End Sidebar -->
</main>
<!--End Main -->
<!--Begin Footer-->
<footer class="footer" role="contentinfo">
<p>Blog Created by: Abby Lake</p>
</footer>
<!--End Footer-->
</div>
</body>
</html>
You p tag has long a href, You have to break work here. It will break all long non-spaced string
p{
word-break: break-all;
}
Where ever the word overflows of its container you can break the word using above CSS property.
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.
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.
The text-align for the link at the bottom of the page won't work.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cssforwebsite.css"/>
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Raleway:100,500,600,800" rel="stylesheet">
</head>
<body>
<div id="top">
<h1>TRAVEL GUIDE</h1>
</div>
<div id="body">
<p>In this webpage I will write about many different tourist attractions. These will include countries from continents all around
the world. From countries with a warm, tropical climate, to countries with sub-zero temperatures, this page contains it all.</p>
<h2>France</h2>
<p>France, in Western Europe, encompasses medieval cities, alpine villages and Mediterranean beaches. Paris, its capital, is famed for its fashion houses, classical art museums including the Louvre and monuments like the Eiffel Tower. The country is also renowned for its wines and sophisticated cuisine. Lascaux’s ancient cave drawings, Lyon’s Roman theater and the vast Palace of Versailles attest to its rich history.<p>
<ul>
<li>The Eifel Tower</li>
<img src="https://cache-graphicslib.viator.com/graphicslib/thumbs674x446/9205/SITours/skip-the-line-eiffel-tower-tour-and-summit-access-in-paris-296015.jpg" width="200px"height="160px"/>
</ul>
Travel website for more help finding a holiday
</div>
</body>
</html>
Here is the CSS for the webpage:
body{
background-image: url("http://i.stack.imgur.com/jGlzr.png");
}
#top{
width:74%;
margin: 0 auto;
background-image:url("http://www.thetreesandthestars.co.uk/wp-content/uploads/2014/10/Up-the-beach.jpg");
height:400px;
background-position: center center;
}
*{
font-family: "Raleway";
color: #444444;
font-size: 18px;
}
h1{
color: black;
text-align: center;
position:relative;
line-height: 450px;
}
#body{
background:white;
width: 1000px;
width: 74%;
margin: 0 auto;
}
p,h2{
text-align: center;
}
#help{
text-align:center;
}
/*This makes the link black if the mouse is not hovering over it and the user hasn't visited the link before*/
a:link {
color: black;
}
/*This makes the link cyan if the user has visited this website before*/
a:visited {
color: cyan;
}
/*this makes the link blue when the mouse is hovering over it*/
a:hover {
color: blue;
}
/*the link appears red when someone is holding their mouse down and hovering on top of it*/
a:active {
color: red;
}
Please help with this. It is for a homework project. Whenever I add the image it aligns left. What is the problem with this?
It's because the a element is inline by default, which means it only occupies as much space as needed on the page. To be able to center it, make it a block element display: block; or wrap it in a block element parent, and apply text-align to the parent.
<a style="text-align:center;display:block;" href="#">centered</a>
<p style="text-align:center;">centered</p>
body {
background-image: url("http://i.stack.imgur.com/jGlzr.png");
}
#top {
width: 74%;
margin: 0 auto;
background-image: url("http://www.thetreesandthestars.co.uk/wp-content/uploads/2014/10/Up-the-beach.jpg");
height: 400px;
background-position: center center;
}
* {
font-family: "Raleway";
color: #444444;
font-size: 18px;
}
h1 {
color: black;
text-align: center;
position: relative;
line-height: 450px;
}
#body {
background: white;
width: 1000px;
width: 74%;
margin: 0 auto;
}
p,
h2 {
text-align: center;
}
#help {
text-align: center;
}
/*This makes the link black if the mouse is not hovering over it and the user hasn't visited the link before*/
a:link {
color: black;
}
/*This makes the link cyan if the user has visited this website before*/
a:visited {
color: cyan;
}
/*this makes the link blue when the mouse is hovering over it*/
a:hover {
color: blue;
}
/*the link appears red when someone is holding their mouse down and hovering on top of it*/
a:active {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cssforwebsite.css" />
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Raleway:100,500,600,800" rel="stylesheet">
</head>
<body>
<div id="top">
<h1>TRAVEL GUIDE</h1>
</div>
<div id="body">
<p>In this webpage I will write about many different tourist attractions. These will include countries from continents all around the world. From countries with a warm, tropical climate, to countries with sub-zero temperatures, this page contains it
all.</p>
<h2>France</h2>
<p>France, in Western Europe, encompasses medieval cities, alpine villages and Mediterranean beaches. Paris, its capital, is famed for its fashion houses, classical art museums including the Louvre and monuments like the Eiffel Tower. The country is
also renowned for its wines and sophisticated cuisine. Lascaux’s ancient cave drawings, Lyon’s Roman theater and the vast Palace of Versailles attest to its rich history.
<p>
<ul>
<li>The Eifel Tower</li>
<img src="https://cache-graphicslib.viator.com/graphicslib/thumbs674x446/9205/SITours/skip-the-line-eiffel-tower-tour-and-summit-access-in-paris-296015.jpg" width="200px" height="160px" />
</ul>
<a href="https://www.google.co.uk/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwjirL3Jy_7RAhUEBcAKHVs9C6AQFggaMAA&url=http%3A%2F%2Fwww.worldtravelguide.net%2F&usg=AFQjCNGnX8FXlQKh9hEebd1Syt2Wh33q_Q&sig2=B-usIraK2zeErXSMJVlRmw&bvm=bv.146094739,bs.1,d.d2s"
id="help" style="text-align:center; display: block;" target="_blank">Travel website for more help finding a holiday</a>
</div>
</body>
</html>
try something like this, add your anchor tag inside a paragraph tag
I've tried to create a right sidebar within my div, but it's not working. It keeps sitting outside of my main wrapper. Any suggestions?
HTML:
<div id="wrapper">
<h1>Hogan Flying Service</h1>
<img src="Images/CincinnatiSectional.png" width="800" height="97" alt="CincySectional" />
<div class="bodytext">
<h2>About Hogan Flying Service:</h2>
<p>While Hogan Flying Service setup operations at HAO in 2009, it was founded in 1991 by Tom Hogan, after a long history and tradition of aviation in the Hogan family. Uncle Joe and Bernie started flying in 1929, and bought their first Waco 10 in 1932. In that same year, my grandparents William and Emma Hogan purchased the Hamilton Airport and farming careers turned into aviation careers.</p>
<p>A few years later, my father Art and Uncle Bill learned to fly and soon became flight instructors supporting the CPT programs during WWII. My Aunts Lauretta, Katie and Mary also were involved in the many aspects of running an airport. Through the years, the Hogan family was involved in many flying aviation activities including flight instruction, barnstorming, an on-field restaurant, air taxi, air charter, maintenance shop, aircraft restoration, pilot services and laying the foundation of the Butler County Regional Airport as you see it today.</p>
<div class="sideright">
<ul>
<li>Private Pilot</li>
<li> Private Pilot</li>
<li>Commercial Pilot</li>
<li>Instrument Rating</li>
<li>Light Sport Pilot LSA</li>
<li>Tailwheel endorsements</li>
<li>Currency requirements</li>
<li>Biennial Flight Reviews</li>
<li>Ground School Instruction</li>
<li>Aircraft rental</li>
</ul>
</div><!--sidebar end-->
CSS:
#wrapper {
width: 800px;
margin: 60px auto;
background-color: #182228;
border: medium groove #000;
z-index: 1000;
position: relative;
box-shadow: 3px 3px 5px 0px #000;
}
.bodytext {
margin: 10px 320px 10px 10px;
padding: 20px;
}
.sideright {
float: right;
width:260px;
padding:10px;
margin-top:10px;
margin-bottom: 10px;
margin-left:10px;
float:right
}
Here's my fiddle: https://jsfiddle.net/5w8xprqg/2/
If you are content with a fixed width layout, here are the minimum changes to your fiddle that need to be made to get the sidebar where it should be. If you want a responsive layout, you will have to switch over to defining widths and such with percentages.
CSS
wrapper {display:table
}
.body-text {margin: 10px;
float: left;
width: 470px;
}
And the updated jsfiddle. https://jsfiddle.net/5w8xprqg/3/
One mistake was using a 320px margin on the right of your body text which would never let your sidebar flow up next to the body text. Use width to do that kind of thing instead. Also using float:left on elements higher up the DOM usually works better than trying to float:right elements further down. Note you don't really need the float on the .side-right element, but it works.
On a separate note there are other ways that your problems can be avoided and get a superior layout with less css.
One problem I believe you were experiencing was the text overflowing the at the bottom of the wrapper. This can usually be prevented by adding display:table;or overflow:hidden What the last one does is not what you would expect, but instead of the overflowing text being hidden it forces the container to stretch down and contain it.
Also using percentages for your widths today is a better practice.
See this jsfiddle, and notice how little css is necessary to get the layout in the working properly. http://jsfiddle.net/5w8xprqg/4/ Also resize the results box to see how the text adjusts to fit the width.
To get even better layout at very narrow widths, you would want to add in media queries.
There are many ways to do this, and it depends if you want your bodytext to wrap your sidebar. Here is one way, where I created a left side with set width, and right side with set width. Fiddle here: http://jsfiddle.net/t0837grw/
#wrapper {
width: 800px;
margin: 60px auto;
background-color: #ccc;
border: medium groove #000;
z-index: 1000;
position: relative;
box-shadow: 3px 3px 5px 0px #000;
}
.bodytext {
margin: 10px;
padding: 20px;
}
.sideleft
{
display: inline-block;
width: 65%;
}
.sideright {
display: inline-block;
vertical-align: top;
width:30%;
margin: 0 10px;
}
Here is alternate fiddle with set widths: http://jsfiddle.net/6e6btgds/
In the context of the code in the question, the simplest solution might be to swap the locations of the .bodytext and .sideright elements in the mark-up.
#charset "UTF-8";
/* CSS Document */
body {
background-color: #2c3439;
color: #FFF;
}
#wrapper {
width: 800px;
margin: 60px auto;
background-color: #182228;
border: medium groove #000;
z-index: 1000;
position: relative;
box-shadow: 3px 3px 5px 0px #000;
}
#topnav ul {
margin: -11px -10px 10px -10px;
text-align: center;
padding: 1%;
background-color: #000;
color: #FFF;
}
#topnav li {
display: inline;
margin: 0px 40px;
}
.centerimage {
margin: 10px 165px;
}
p {
text-indent: 2.5em;
}
.bodytext {
margin: 10px 320px 10px 10px;
padding: 20px;
}
.sideright {
float: right;
width: 260px;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px float: right
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="all.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav id="topnav">
<ul>
<li>Home</li>
<li>Aircraft Rental</li>
<li>Contact Us</li>
<li>Flight Training</li>
</ul>
</nav>
<div id="wrapper">
<h1>Hogan Flying Service</h1>
<img src="Images/CincinnatiSectional.png" width="800" height="97" alt="CincySectional" />
<div class="sideright">
<ul>
<li>Private Pilot</li>
<li>Private Pilot</li>
<li>Commercial Pilot</li>
<li>Instrument Rating</li>
<li>Light Sport Pilot LSA</li>
<li>Tailwheel endorsements</li>
<li>Currency requirements</li>
<li>Biennial Flight Reviews</li>
<li>Ground School Instruction</li>
<li>Aircraft rental</li>
</ul>
</div>
<!--sidebar end-->
<div class="bodytext">
<h2>About Hogan Flying Service:</h2>
<p>While Hogan Flying Service setup operations at HAO in 2009, it was founded in 1991 by Tom Hogan, after a long history and tradition of aviation in the Hogan family. Uncle Joe and Bernie started flying in 1929, and bought their first Waco 10 in 1932.
In that same year, my grandparents William and Emma Hogan purchased the Hamilton Airport and farming careers turned into aviation careers.</p>
<p>A few years later, my father Art and Uncle Bill learned to fly and soon became flight instructors supporting the CPT programs during WWII. My Aunts Lauretta, Katie and Mary also were involved in the many aspects of running an airport. Through the
years, the Hogan family was involved in many flying aviation activities including flight instruction, barnstorming, an on-field restaurant, air taxi, air charter, maintenance shop, aircraft restoration, pilot services and laying the foundation
of the Butler County Regional Airport as you see it today.</p>
</div>
<!--text div end-->
</div>
<!--Wrapper End-->
</body>
</html>