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
Related
I am currently practicing making a simple website. I have a problem in the navigation bar above my website. When I scroll further down my website, their color when I hover and their responsiveness disappears. Here's a pic to help you understand my problem.
I don't know if I use some codes right but here's my code, you can leave a tip or you can also add on how the code works so I can correct my mistake.
html,body{
height: 163%;
}
body{
background: rgba(236,232,225,255);
color: #333;
font-family: helvetica;
font-size: 15px;
line-height: .5cm;
margin: 0;
padding: 0;
}
/* links configuration here */
a{
text-decoration: none;
}
a:hover{
color:rgba(216, 108, 108, 0.932);
}
/* links configuration ends here */
.whole{
margin-left: 50px;
margin-right: 50px;
font-size: 15px;
}
#webname{ /* heading here */
margin-top: 17%;
margin-bottom: 17%;
text-align: center;
font-size: 150px;
font-family: VALORANT;
color:white;
}
#webname:hover{
color: rgba(216, 110, 110, 0.933);
cursor: default;
}
.topnav {
position: fixed;
overflow: hidden;
background-color: #333;
padding-top: 10px;
padding-bottom: 10px;
top: 0;
width: 100%;
}
.topnav a{
color: white;
padding-top: 15px;
padding-left: 25px;
padding-right: 5px;
float: left;
font-family: VALORANT;
font-size: 25px;
display: block;
}
.topnav a:hover{
color: rgba(216, 108, 108, 0.932);
}
.topnav img{
float: right;
padding-right: 15px;
}
#videoBG{ /* background vid */
position: absolute;
right: 0;
bottom: 30%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
overflow: hidden;
}
/* Paragraphs starts here */
.gameplay{ /* First Paragraph here */
margin-top: 10px;
width: 30%;
float: left;
}
#paraFirst {
font-family: VALORANT;
font-size: 30px;
width: 38%;
}
#paraFirst:hover{
color: rgba(216, 108, 108, 0.932);
cursor: default;
}
.agents{ /* Second Paragraph here */
position: relative;
top: 250px;
float: right;
width: 40%;
}
#paraSec{
font-family: VALORANT;
font-size: 30px;
width: 20%;
}
#paraSec:hover{
color: rgba(216, 108, 108, 0.932);
cursor: default;
}
.guns{
position: relative;
top: 370px;
float: left;
width: 40%;
}
#paraThird{
font-family: VALORANT;
font-size: 30px;
width: 14%;
}
#paraThird:hover{
color: rgba(216, 108, 108, 0.932);
cursor: default;
}
.maps{
position: relative;
top: 780px;
float: right;
width: 40%;
}
#paraFour{
font-family: VALORANT;
font-size: 30px;
width: 14%;
}
#paraFour:hover{
color: rgba(216, 108, 108, 0.932);
cursor: default;
}
.shootingRange{
position: relative;
top: 850px;
float: left;
width: 40%;
}
#paraFifth{
font-family: VALORANT;
font-size: 30px;
width: 50%;
}
#paraFifth:hover{
color: rgba(216, 108, 108, 0.932);
cursor: default;
}
#media (min-aspect-ratio: 16/9){
#videoBG{
width: 100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9){
#videoBG{
width: auto;
height: 100%;
}
}
#media (max-width: 767px){
#videoBG{
display: none;
}
body {
background: url('valoClip.png');
background-size: cover;
}
}
#font-face {
font-family: 'VALORANT';
src: url(fonts/Valorant\ Font.ttf);
font-style: normal;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valorant</title>
<link rel="stylesheet" href="Valorant.css">
</head>
<body>
<!--Navigation Bar here-->
<img src="images/Valorant.png">
<div class="topnav">
<img src="images/Valorant.png">
Home
Gameplay
About
Guides
</div>
<!--Title-->
<h1 id="webname">valoraNt</h1>
<div class="wrapper">
<video id="videoBG" poster="valoClip.png" autoplay muted loop>
<source src="valoClip.mp4" type="video/mp4">
</video>
</div>
<!--Gameplay here-->
<div class="whole">
<div class="gameplay">
<h3 id="paraFirst">GAMEPLAY</h3>
<p>
Valorant is an online <abbr title="First Person Shooter">FPS</abbr> game that defy the limits.
Blend your style and experience on a global, competitive stage. The game has 13 rounds to attack
and defend your side using sharp gunplay and tactical abilities. And, with one life per-round,
you'll need to think faster than your opponent if you want to survive. Take on foes across
Competitive and Unranked modes as well as Deathmatch and Spike Rush. There is also a Practice
mode or tool to help you manage your aim.
</p>
<p> Watch the trailer here</p>
</div>
<!--Agents here-->
<div class="agents">
<h3 id="paraSec">AGENTS</h3>
<p>
Valorant is a 5v5 tactical shooter where each player plays as a character called an "agent".
<br>
<br>
There are currently 15 agents in the game; Astra, Breach, Brimstone, Cypher, Jett, Killjoy,
Omen, Phoenix, Raze, Reyna, Sage, Skye, Sova, Viper, Yoru.
</p>
<p>
Each agent has four unique abilities (including ultimate).
<br>
<br>
So far, the agent abilities range from traditional utility from realistic shooter such as
flasbangs and smoke granades but also include magical or futuristic themed abilities like
conjuring walls and sonic arrows that act like a radar.
<br>
<br>
There are some agents that will be available for new accounts while other agents have to be
unlocked through progression or battle pass system.
</p>
</div>
<!--Guns here-->
<div class="guns">
<h3 id="paraThird">GUNS</h3>
<p>
Valorant has a buy phase at the beginning of each round. Every agent has access to the same
guns and shields in their shop.
<br>
<br>
There are currently 17 guns in valorant; Classic, Shorty, Frenzy, Ghost, Sheriff, Stinger,
Spectre, Bucky, Judge, Marshal, Operator, Ares, Odin, Bulldog, Guardian, Phantom, Vandal.
</p>
<p>
Every agent has a primary weapon slot (SMGs, Shotguns, Snipers, and Heavy Machine Guns),
a secondary sidearm slot, and a knife.
<br>
<br>
During the buy phase, players can sell their sidearm or primary, request a teammate to buy a gun
for them if they're low on funds, announce that they have extra funds to purchase for a teammate,
or tell them to save their money for the round.
</p>
<p>
Guns vary in terms of:
<ul>
<li>Primary and alt fire settings</li>
<li>Damage output (based on head/body/legs)</li>
<li>Magazine capacity</li>
<li>Recoil pattern</li>
<li>Ability to pierce through walls</li>
</ul>
</p>
</div>
<!--Maps here-->
<div class="maps">
<h3 id="paraFour">MAPS</h3>
<p>
So far there are 5 maps with one objective: planting or defending against a bomb called "spike".
<br>
<br>
The 5 playable maps are:
<ul>
<li>Bind</li>
<li>Haven</li>
<li>Split</li>
<li>Ascent</li>
<li>Icebox</li>
</ul>
</p>
<p>
Each map also has two ultimate orbs in neutral locations that teams can try to grab.
The orb grants one point the ulimate of the agent who picked it up.
<br>
<br>
Another general thing to note is that some walls and terrain can be fired through. As a rule
of thumb, anything that leaves a bullter hole can be penetrated.
</p>
</div>
<!--Shooting Range here-->
<div class="shootingRange">
<h5 id="paraFifth">SHOOTING RaNGE</h5>
<p>
The last existing map is dedicated to practicing and honing your skills. Here you can
change your agent and guns at anytime (you can even teset characters that you do not own yet).
<br>
<br>
At the shooting range, you can shoot at dummies that spawn at different speeds and settings such
as strafing.
<br>
<br>
There is also an area dedicated to shooting long-distance targets to test the effective range of
guns.
<br>
<br>
Lastly, you can also practice scenarios such as planting a spike and then defending against bots
to improve your composure and ability in clutch situations.
</p>
</div>
</div>
</body>
</html>
I think the name of every paragraphs overlaps the links in the navbar. Thanks for the help, much appreciated :>
You can achieve the same look with margins instead of relative position
I have added a few classes to your CSS .mt-250 which will only add 250px margin in top of element, .width-40 make the width of element 40% of parent, .left and .right will make the element float to left or float to right
and delete some redundant class .gameplay, .agents, .guns, .maps, .shootingRange and replace them with the newly created class
for example this line <div class="mt-250 width-40 right"></div> will mean that this div will have a 250px margin in top of it and has a width of 40% and will float to the right
also delete some redundant IDs #paraFirst, #paraSec, #paraThird, #paraFour, #paraFifth and it's :hover change all of them with a single new class called paraheader to make Constant look and feel with all paragraph headers
note that all the above changes eliminate redundancy in style at Paragraphs sections and reduces number of line from 88 line to 15 line only which lead to faster loading on real network
working markup
html,
body {
height: 163%;
}
body {
background: rgba(236, 232, 225, 255);
color: #333;
font-family: helvetica;
font-size: 15px;
line-height: .5cm;
margin: 0;
padding: 0;
}
/* links configuration here */
a {
text-decoration: none;
}
a:hover {
color: rgba(216, 108, 108, 0.932);
}
/* links configuration ends here */
.whole {
margin-left: 50px;
margin-right: 50px;
font-size: 15px;
}
#webname {
/* heading here */
margin-top: 17%;
margin-bottom: 17%;
text-align: center;
font-size: 150px;
font-family: VALORANT;
color: white;
}
#webname:hover {
color: rgba(216, 110, 110, 0.933);
cursor: default;
}
.topnav {
position: fixed;
overflow: hidden;
background-color: #333;
padding-top: 10px;
padding-bottom: 10px;
top: 0;
width: 100%;
}
.topnav a {
color: white;
padding-top: 15px;
padding-left: 25px;
padding-right: 5px;
float: left;
font-family: VALORANT;
font-size: 25px;
display: block;
}
.topnav a:hover {
color: rgba(216, 108, 108, 0.932);
}
.topnav img {
float: right;
padding-right: 15px;
}
#videoBG {
/* background vid */
position: absolute;
right: 0;
bottom: 30%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
overflow: hidden;
}
/* Paragraphs starts here */
.mt-250 { margin-top: 250px}
.left {float: left}
.right { float: right}
.width-40 {width: 40%;}
.paraheader{
font-family: VALORANT;
font-size: 30px;
width: 38%;
}
.paraheader:hover {
color: rgba(216, 108, 108, 0.932);
cursor: default;
}
#media (min-aspect-ratio: 16/9) {
#videoBG {
width: 100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9) {
#videoBG {
width: auto;
height: 100%;
}
}
#media (max-width: 767px) {
#videoBG {
display: none;
}
body {
background: url('valoClip.png');
background-size: cover;
}
}
#font-face {
font-family: 'VALORANT';
src: url(fonts/Valorant\ Font.ttf);
font-style: normal;
}
<!--Navigation Bar here-->
<img src="images/Valorant.png">
<div class="topnav">
<img src="images/Valorant.png">
Home
Gameplay
About
Guides
</div>
<!--Title-->
<h1 id="webname">valoraNt</h1>
<div class="wrapper">
<video id="videoBG" poster="valoClip.png" autoplay muted loop>
<source src="valoClip.mp4" type="video/mp4">
</video>
</div>
<!--Gameplay here-->
<div class="whole">
<div class="left width-40">
<h3 class="paraheader">GAMEPLAY</h3>
<p>
Valorant is an online <abbr title="First Person Shooter">FPS</abbr> game that defy the limits. Blend your style and experience on a global, competitive stage. The game has 13 rounds to attack and defend your side using sharp gunplay and tactical
abilities. And, with one life per-round, you'll need to think faster than your opponent if you want to survive. Take on foes across Competitive and Unranked modes as well as Deathmatch and Spike Rush. There is also a Practice mode or tool to help
you manage your aim.
</p>
<p> Watch the trailer here</p>
</div>
<!--Agents here-->
<div class="right mt-250 width-40">
<h3 class="paraheader">AGENTS</h3>
<p>
Valorant is a 5v5 tactical shooter where each player plays as a character called an "agent".
<br>
<br> There are currently 15 agents in the game; Astra, Breach, Brimstone, Cypher, Jett, Killjoy, Omen, Phoenix, Raze, Reyna, Sage, Skye, Sova, Viper, Yoru.
</p>
<p>
Each agent has four unique abilities (including ultimate).
<br>
<br> So far, the agent abilities range from traditional utility from realistic shooter such as flasbangs and smoke granades but also include magical or futuristic themed abilities like conjuring walls and sonic arrows that act like a radar.
<br>
<br> There are some agents that will be available for new accounts while other agents have to be unlocked through progression or battle pass system.
</p>
</div>
<!--Guns here-->
<div class="left mt-250 width-40">
<h3 class="paraheader">GUNS</h3>
<p>
Valorant has a buy phase at the beginning of each round. Every agent has access to the same guns and shields in their shop.
<br>
<br> There are currently 17 guns in valorant; Classic, Shorty, Frenzy, Ghost, Sheriff, Stinger, Spectre, Bucky, Judge, Marshal, Operator, Ares, Odin, Bulldog, Guardian, Phantom, Vandal.
</p>
<p>
Every agent has a primary weapon slot (SMGs, Shotguns, Snipers, and Heavy Machine Guns), a secondary sidearm slot, and a knife.
<br>
<br> During the buy phase, players can sell their sidearm or primary, request a teammate to buy a gun for them if they're low on funds, announce that they have extra funds to purchase for a teammate, or tell them to save their money for the round.
</p>
<p>
Guns vary in terms of:
<ul>
<li>Primary and alt fire settings</li>
<li>Damage output (based on head/body/legs)</li>
<li>Magazine capacity</li>
<li>Recoil pattern</li>
<li>Ability to pierce through walls</li>
</ul>
</p>
</div>
<!--Maps here-->
<div class="right mt-250 width-40">
<h3 class="paraheader">MAPS</h3>
<p>
So far there are 5 maps with one objective: planting or defending against a bomb called "spike".
<br>
<br> The 5 playable maps are:
<ul>
<li>Bind</li>
<li>Haven</li>
<li>Split</li>
<li>Ascent</li>
<li>Icebox</li>
</ul>
</p>
<p>
Each map also has two ultimate orbs in neutral locations that teams can try to grab. The orb grants one point the ulimate of the agent who picked it up.
<br>
<br> Another general thing to note is that some walls and terrain can be fired through. As a rule of thumb, anything that leaves a bullter hole can be penetrated.
</p>
</div>
<!--Shooting Range here-->
<div class="left mt-250 width-40">
<h5 class="paraheader">SHOOTING RaNGE</h5>
<p>
The last existing map is dedicated to practicing and honing your skills. Here you can change your agent and guns at anytime (you can even teset characters that you do not own yet).
<br>
<br> At the shooting range, you can shoot at dummies that spawn at different speeds and settings such as strafing.
<br>
<br> There is also an area dedicated to shooting long-distance targets to test the effective range of guns.
<br>
<br> Lastly, you can also practice scenarios such as planting a spike and then defending against bots to improve your composure and ability in clutch situations.
</p>
</div>
</div>
If you add z-index: 1; to .topnav, your problem will be solved. Because, topnav falls under the other contents that comes after topnav such as text, anchor est.
The problem seemed to be with the z-index of the navbar. Add a z-index of 99999 to the topnav class like done below:
.topnav {
position: fixed;
overflow: hidden;
background-color: #333;
padding-top: 10px;
padding-bottom: 10px;
top: 0;
width: 100%;
z-index: 99999999;
}
that seemed to fix it for me! If it worked mark my anwser as solved and if not let me know!
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.
I'm learning CSS and here is the code I've written so far. I've used the tag to change the paragraph's background color and for some reason the background of the paragraph doesn't change when I go to the webpage in Firefox. Oddly enough, it ran fine on StackOverFlow when I pasted it in the "snippet".
<!DOCTYPE HTML>
<html>
<style>
* {
font-family: georgia;
line-height: 1.3em;
background-color: #F3F4E4;
color: black;
}
p {
font-size: 17px;
font-style: italic;
}
#img1 {
width: 750px;
}
#img2 {
width: 600px;
}
#list {
font-size: 25px;
}
#list-item, #lala {
font-family: SignPainter;
font-size: 22px;
}
h2 {
font-family: SignPainter;
font-size: 40px;
}
#critics {
width: 80%;
background-color: red;
}
</style>
<head>
<title>B to the F</title>
<p id="list">List</p>
<ul id="list-item">
<li>About</li>
<li>Critics</li>
</ul>
</head>
<body>
<center><h2>Back to the Future</h2></center>
<center><img src="http://images5.fanpop.com/image/photos/26500000/Back-To-The-Future-Trilogy-back-to-the-future-26581615-1014-574.jpg" alt="Back to the Future Trilogy" id="img1"></center>
<h3 id="about">About (Taken from Wikipedia Page)</h3>
<center><img src="http://apartment3k.com/wp-content/uploads/2015/10/doc-marty.jpg" alt="Doc and Marty" id="img2"></center>
<div id="critics">
<p>
The <span id="lala">Back to the Future</span> franchise is an American science fiction-adventure film series written and directed by Robert Zemeckis, produced by Bob Gale and Neil Canton for Steven Spielberg's Amblin Entertainment, and distributed by Universal Pictures. The franchise follows the adventures of a high school student, Marty McFly (Michael J. Fox), and an eccentric scientist, Dr. Emmett L. Brown (Christopher Lloyd), as they use a DeLorean time machine to time travel to different periods in the history of Hill Valley, California.<br>
The first film was the highest-grossing film of 1985 and became an international phenomenon, leading to the second and third films, which were back-to-back film productions, released in 1989 and 1990, respectively. Though the sequels did not perform quite as well at the box office as the first film, the trilogy remains immensely popular after a quarter-century and has yielded such spinoffs as an animated television series and a motion-simulation ride at the Universal Studios Theme Parks in Universal City, California; Orlando, Florida (now closed); and Osaka, Japan, as well as a Microsoft Windows, Macintosh, iPad, PS3, and Wii video game. The film's visual effects were done by Industrial Light and Magic. The trilogy was nominated for five Academy Awards all together, winning one (Best Sound Editing).
</p>
</div>
<h3 id="review">Is it any good?</h3>
<h4>Part I</h4>
Roger Ebert<br>
IMDb<br>
Rotten Tomatoes<br>
<h4>Part II</h4>
Roger Ebert<br>
IMDb<br>
Rotten Tomatoes<br>
<h4>Part III</h4>
Roger Ebert<br>
IMDb<br>
Rotten Tomatoes<br>
</body>
</html>
#critics {
width: 80%;
background-color: red;
}
Hey! You should try setting the background color as red using #F00 rather than red. It could be a browser based issue. Try pasting this:
#critics {
width: 80%;
background-color: #F00;
}
Hy ,
if you can try this :
#critics {
background-color: red !important;
-moz-appearance: none !important;
}
Try it with this CSS code
<style>
body {
font-family: georgia;
line-height: 1.3em;
background-color: #F3F4E4;
color: black;
}
p {
font-size: 17px;
font-style: italic;
}
#img1 {
width: 750px;
}
#img2 {
width: 600px;
}
#list {
font-size: 25px;
}
#list-item, #lala {
font-family: SignPainter;
font-size: 22px;
}
h2 {
font-family: SignPainter;
font-size: 40px;
}
#critics {
width: 80%;
background-color: #ff070c;
}
</style>
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%;
}