following from a quick success with my last question, I've come up with another when validating.
I'm getting the 'document type does not allow 'P' here;....' error. In short i'm trying to write text inside a DIV and using the tags to separate paragraphs. After a bit of searching i found the issue. It errors when the <p> is inside a <font .....>definition (because this is a block inside an inline) . So i tried using the <h6> tag instead (line 57) and defined it separately in CSS, which i thought would work as it is noted as a block-level element.
Ideally i want a way of initially defining the text attributes, leave it open for all paragraphing etc.. and then close it at the end. - rather than having to re-enter every time a new <p> is created.
Again - any help would be much appreciated.- Advice on my layout and how it could be improved.
The Code:
<!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>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
}
a:link {
color: #000;
}
a:visited {
color: #666;
}
a:hover {
color: #F00;
}
</style>
<link href="CSS/dg.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="dgbackground"> </div>
<div id="textwrapper">
<div id="spec">
<h4>Specification</h4>
<div id="specAQA"><img src="images/gcse images/AQA_logo_RGB.jpg" width="150" height="50" alt="aqa link"/></div>
<div id="specDOC"><img src="images/DOC.png" width="100%" height="100%" alt="word" /></div>
</div>
<br /> <br />
<h2>The Development Gap</h2>
<div id="contents">
<div id="extras">
<font face="cambria" color="black" size="5px">
<p>
<strong> EXTRAS </strong>
</p>
<p> 'Cool Geography' Website
</p>
<p> BBC Bitesize <img src="images/bitesize1..png" width="35" height="25" alt="bitesize" />
</p>
</font>
</div>
<h6>
<p>
<a href="re1.html">1. Contrasts using different measures of development to include
GNP, GNI per head, Human Development Index (HDI), birth
and death rates, infant mortality, people per doctor, literacy rate, access to safe water and life expectancy.
<br /> Correlation between the different measures.
Limitations/ways of using a single development measure.
<br /> Different ways of classifying different parts of the world.
<br /> The relationship between quality of life and standard of living. Different perceptions of acceptable quality of life in different parts of the world. Attempts made by people in the
poorer part of the world to improve their own quality of life.</a>
</p>
<p>
<a href="re2.html">2. Environmental factors – the impact of natural hazards. A case study of a natural hazard.
Economic factors – global imbalance of trade between different parts of the world.
Social factors – differences in the quantity and quality of water available on peoples’ standards of living.
Political influences – the impact of unstable governments.</a>
</p>
<p>
<a href="re3.html">3. The imbalance in the pattern of world trade and the attempts to reduce it.
The contributions of Fair Trade and Trading Groups.
The reduction in debt repayments through debt abolition and conservation swaps.
The advantages and disadvantages of different types of aid for donor and recipient countries.
The role of international aid donors in encouraging sustainable development.
A case study of one development project.</a>
</p>
<p>
4. (Case Study)
Conditions leading to different levels of development in two contrasting countries of the EU.
The attempts by the EU to reduce these different levels of development.
</p>
</h6>
</div><!-- end contents-->
</div> <!--end textwrapper-->
</body>
</html>
The CSS:
h2 {
font-family: Cambria;
font-size: 60px;
line-height: 65px;
margin: 0;
Padding:0;
height: 100px;
width: auto;
}
h5 {
font-family: Cambria;
font-size: 20px;
text-shadow: 3px 3px 1px #666;
margin: 0;
Padding:0;
height: 100px;
width: auto;
}
h6 {
font-family: Cambria;
font-size: 25px;
color: #000;
}
h1 {
margin: 0;
padding: 0;
font-family: Cambria;
font-size: 100px;
text-shadow: 8px 8px 3px #333;
}
h4 {
margin: 0;
padding: 0;
font-family: Cambria;
font-size: 40px;
}
img{
box-shadow: 4px 4px 2px #000;
border-radius: 3px;
}
#textwrapper {
max-width: 1300px;
min-width: 800px;
position: relative;
margin-top: 0px;
margin-right: 5%;
margin-bottom: 0px;
margin-left: 5%;
padding-left: 10px;
}
#dgbackground {
height: 100%;
width: 100%;
min-width: 800px;
position: fixed;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
color: #F00;
top: 0px;
background-image: url(../images/gcse%20images/dg.jpg);
}
#dgtitle {
height: auto;
width: 150x;
margin: auto;
position: absolute;
left: 10px;
top: 10px;
color: #000;
}
#spec {
height: 200px;
width: 250px;
margin-top: 20px;
margin-right: 50px;
position: absolute;
right: 10px;
top: 10px;
float:right
}
#specAQA {
height: 50px;
width: 150px;
margin: auto;
position: absolute;
left: 0px;
top: 45px;
margin: 10px;
}
#specDOC {
height: 50px;
width: 50px;
margin: auto;
position: absolute;
left: 160px;
top: 45px;
margin: 10px;
}
#contents {
max-width: 1500px;
min-width: 800px;
margin: auto;
position: relative;
left: 0px;
top: 50px;
height: auto;
padding-right: 10px;
padding-left: 10px;
}
#centerIMG {
margin: 20px;
text-align: center;
}
#floatrightIMG {
float: right;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
}
#floatleftIMG {
float: left;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 20px;
}
#extras {
float:right;
width: 250px;
height: 600px;
text-align:center
}
<font> was superseded by CSS in 1996. Stop using it.
You can't put a paragraph inside a heading.
Use appropriate markup.
If you want to style a paragraph, then apply CSS to a <p>.
If you want to group a bunch of paragraphs together, then pick an appropriate element such as <section>, <article>, or <aside>. If HTML doesn't have an element that describes the reason for the grouping, then use the generic block level element: <div>.
If you don't want to style all elements of that type the same way, then add whatever classes and ids you need to write a selector to target the elements you want to affect.
Just like Quentin said, using the font element is pointless.
You should create a paragraph class whereas:
<font face="cambria" color="black" size="5px"><p><strong>EXTRAS</strong></p>
<p>'Cool Geography'Website</p>
<p>BBC Bitesize <img src="images/bitesize1..png" width="35" height="25" alt="bitesize" />
</p>
</font>
Should be a paragraph style like:
<p class="yourclassname">Enter paragraph text</p>
<p class="yourclassname">Enter paragraph text</p>
Then apply the desired font and style to the class in your CSS:
.yourclassname {
font-family: cambria;
color: black;
font-size: 5px;
}
This should do the trick.
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!
The code is below and it won't let me scroll.
[https://codepen.io/duggalverse/project/full/DkoeNr][1]
swdefrgtyhujiuhygtfrgthghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
I also want to fix the transparency part so it only gets the text part-any help would be great!!
Last thing I need help in is the background image....it keeps getting repeated no matter what I try...
[1]: https://codepen.io/duggalverse/project/full/DkoeNr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>About Me</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
body{
background-image: url(https://i.ibb.co/S7jLZD8/IMG-20190904-WA0000.jpg);
background-size: cover;
background-position-y: center; /*add*/
font-family: tahoma;
overflow: auto;
margin: 0;
padding: 0;
}
.main-banner {
position: relative;
padding: 50px;
max-width: 800px;
/*max-width: 25%;*/ /*add*/
height: 100%;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
background: rgba(255, 255, 255,.2);
box-shadow: 0 50px 15px rgba(0,0,0,.5);
/*margin: 0 55% 0 auto;*/ /*add*/
margin: 10% auto; /*add*/
margin-right: 55%;
}
/*add class*/
.col-md-6 {
width: 100%;
}
.main-banner .text p{
color: white;
}
p, .text{
position: relative;
line-height: 1.8em;
font-family: tahoma;
text-align: justify;
}
.sec-title.light .title, .sec-title.light h2{
color: white;
}
.btn-style-one{
position: relative;
line-height: 30px;
color: white;
font-size: 15px;
font-weight: 700;
border: 1px solid #fdb30e;
background: #fdb40e;
text-transform: capitalize;
padding: 15px 50px 15px;
}
</style>
</head>x
<body>
<section class="main-banner container">
<div class="auto-con">
<div class="inner-container">
<div class="sec-title light col-md-6">
<div class="title">Hello</div>
<h2>ABOUT ME: <br>
<span style="font-size: 60px;">DUGGALverse</span>
</h2>
<br><br>
<div class="text">
<p>
I'm a self-taught coder utilizing the internet tools to teach myself. With proven communication and creative thinking skills I am always attempting to best myself. I am an aficionado in various innovation fields and plan to keep investigating different dialects in Computer Science. Meaning to use my capacities to effectively fill in the job in your organization/association. Much of the time applauded as persistent by my associates, I can be depended upon to support your organization/association to accomplish its objectives.
</p>
<p>
As a profoundly gifted studen with involvement in the community, I have an assortment of aptitudes and information that would be of incredible advantage to your company. This activity posting is an incredible open door for me to keep expanding on my experience while picking up introduction to a huge frameworks driven plan of action. I like to use my dynamic data innovation range of abilities alongside my group driven character to propel information handling within the role I have currently applied for. I accept that my appended resume will show that I am a brilliant contender for this position. My solid initiative capacities has permitted me to effectively combine and solidify numerous ventures as a candidate within the role I amjapplying for, and I am certain they will permit me to keep on settling on trustworthy choices as an ideal candidate. I approach my work with a hands-on perspective, taking on jobs all through the lifetime of an undertaking. I additionally have a solid scholarly foundation in the coding genre seen clearly.
</p>
</div>
<br>
<div class="btn-box">
Download My Resume
<br><br><br>
<div class="image">
<img src="">
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
First, the body is having overflow: hidden. Remove that and you should be able to scroll.
Secondly, you put the background-repeat on the .main-banner, when it should be on the body where you set the background-image. Also, your background-size doesn't have a '-' in the middle.
I have created a static website using html and css, the problem is that when I shrink the browser the text inside of the footer goes outside of the footer, how can I make so that the text always stays in the footer regardless of whether I shrink the browser or not?
* {
margin: 0px;
padding: 0px;
}
.nav-h1 {
text-align: center;
margin-top: 27px;
font-family: 'Open Sans';
font-size: 40px;
}
.nav {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
a {
display: inline-block;
margin: 10px;
font-family: 'Open Sans';
color: black;
font-weight: bold;
}
.a-container {
margin-left: 10%;
margin-top: 27px;
}
.logo-section {
margin-left: 15px;
margin-top: 15px;
}
.main {
min-height: calc(100vh - 70px);
background-color:#F1F1F1;
overflow: hidden;
}
.footer {
width: 100%;
height: 100%;
background-color: black;
color: gray;
font-family: 'Open Sans';
font-size: 15px;
}
.first-box {
width: 45%;
margin: 0 auto;
margin-top: 50px;
}
.first-box-text {
margin-top: 20px;
font-family: 'Open Sans';
}
.centered-p {
text-align: center;
margin-top: 20px;
font-family: 'Open Sans';
}
.second-word {
color: #ffa200;
text-decoration: underline;
}
.centered-img{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
.header {
height: 8%;
}
.logo-img {
margin-top: 10px;
height: 50px;
}
.flex-container {
display: flex;
margin-top: 50px;
margin-left: 17%;
}
section {
flex: 2;
}
aside {
flex: 1;
}
.bordered-div {
margin-top: 50px;
text-align: center;
padding: 15px;
font-family: 'Open Sans';
font-size: 25px;
border-top: solid 2px gray;
border-bottom: solid 2px gray;
}
.flex-container-first-section-a {
color: #ffa200;
text-decoration: none;
border-bottom: 2px solid #ffa200;
}
.aside-first-section {
width: 60%;
text-align: center;
padding: 15px;
margin-left: 50px;
border-top: solid 2px gray;
border-bottom: solid 2px gray;
}
.aside-img {
margin-left: 50px;
margin-top: 20px;
}
.third-section {
margin-top: 25px;
font-family: 'Open Sans';
}
.forth-section-h1{
margin-left: 28%;
margin-top: 50px;
font-family: 'Open Sans';
}
.forth-section-p {
margin-left: 90px;
margin-top: 40px;
font-family: 'Open Sans';
}
.bordered-div-h1-upper-case {
text-transform: uppercase;
}
.image-container {
display: flex;
margin-top: 30px;
}
.image-container-img {
padding: 5px;
}
.img-with-text {
margin: 10px;
font-family: 'Open Sans';
}
.img-with-text-span {
border-top: solid 3px #ffa200
}
.second-section {
margin-top: 10px;
font-family: 'Open Sans';
}
.bottom-message {
height: 300px;
width: 100%;
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
border: solid 2px black;
}
.bottom-message-button {
width: 50%;
height: 15%;
margin-top: 50px;
background-color: #ffa200;
border-radius: 4px;
border: none;
color: white;
font-family: 'Open Sans';
font-size: 20px;
font-weight: bold;
}
.bottom-message-content {
margin-top: 60px;
margin: 70px;
}
.centered-heading {
font-family: 'Open Sans';
}
.flex-container-first-p {
font-family: 'Open Sans';
}
.bottom-message-h1, .bottom-message-content-p {
font-family: 'Open Sans';
margin-top: 20px;
}
.footer-section {
width: 50%;
margin: 0 auto;
}
.footer-content {
margin: 0px;
padding: 0px;
}
.footer-links-a {
color: gray;
text-decoration: none;
border-right: 1px solid;
padding-right: 23px;
}
.capital-words {
text-transform: uppercase;
padding-top: 10px;
}
.footer-links {
width: 800px;
margin: 0 auto;
margin-top: 50px;
}
.copyright-p {
padding-top: 10px;
}
.aside-h2 {
font-size: 15px;
text-align: center;
margin-top: 10px;
}
.aside-third-section > img {
height: 250px;
}
.line {
border-bottom: solid 2px black;
width: 70%;
margin: 0 auto;
padding-top: 50px;
}
.box-message {
height: 200px;
width: 280px;
margin-top: 50px;
margin-left: 80px;
border: solid 2px black;
}
.box-message-p {
font-family: 'Open Sans';
margin-top: 50px;
width: 60%;
margin: 0 auto;
margin-top: 35px;
font-size: 15px;
}
.box-message-button, .box-message-a {
margin-top: 30px;
margin-left: 70px;
}
.box-message-a {
color: #ffa200;
text-decoration: none;
border-bottom: solid 2px #ffa200;
font-size: 25px;
}
.trending-news-div {
width: 60%;
text-align: center;
padding: 15px;
margin-left: 70px;
margin-top: 50px;
border-top: solid 2px gray;
border-bottom: solid 2px gray;
}
<div class="container">
<div class="header">
<div class="nav">
<h1 class="nav-h1">Nip & Tuck</h1>
<div class="a-container">
<a>Lifestyle</a>
<a>Culture</a>
<a>Sports</a>
<a>Politics</a>
</div>
<div class="logo-section">
<img class="logo-img" src="/assets/images/twitter-logo.PNG" alt="twitter logo">
<img class="logo-img"src="/assets/images/youtube-logo.png" alt="youtube logo">
<img class="logo-img"src="/assets/images/facebook-logo.png" alt="facebook logo">
</div>
</div>
</div>
<div class="main">
<div class="first-box">
<h1 class="centered-heading">How one woman gave her boss, her ex-boyfriend and all her doubters, the big middle finger</h1>
<p class="first-box-text">Janice Allbright decided enough was enough. It was time to change her life. After six months of stock trading, the final result was renewed confidence, increased happiness and £128,405!
</p>
<p class="centered-p">By
<a class="second-word">Kelly Chang</a>
| 30.06.2020</p>
<img src="/assets/images/center-image.png" alt="woman carrying a bag" class="centered-img">
<p class="centered-p">"It's not arrogance, it's confidence"</p>
</div>
<div class="flex-container">
<section>
<p class="flex-container-first-p">
“My life was basically sh!t, says Janice Allbright, a single woman whose life was literally in the toilet six months ago. “I was working at a shop on the high street, earning next to nothing. Then I would go home to my abusive boyfriend. Not exactly a fairytale life.” Everything changed for Janice when she discovered online trading while killing time on her lunch break. “My colleagues, friends and boyfriend at the time all doubted me. Now I’m the queen bitch, laughing at their tears.”
</p>
<div class="bordered-div">
<p>Change your life with the Online Investing System</p>
<a class="flex-container-first-section-a" href="">Get started for free</a>
</div>
<img src="/assets/images/second-center-image.PNG" alt="woman talking on the phone" class="centered-img">
<p class="centered-p">A new and better life</p>
<section class="second-section">
<p>Janice credits her amazing financial success to trading stocks online. The highschool dropout had concerns at the beginning, due to her lack of financial knowledge and experience. “It turned out there was nothing to worry about,” she says. “My broker provided me with all of the training and tools I needed to become a successful stock trader. Their patience was amazing.” </p>
</section>
<section class="third-section">
<p>Brokers and platforms, like the Online Investing System, have turned novice investors into financial superheroes. People like Janice have taken advantage of some tough competition amongst brokers to get the best services for lower prices. Sometimes even for free. “I didn’t have any money for fancy financial tools or software. But lucky me, my broker gave me everything for free.”</p>
</section>
<section class="forth-section">
<img src="/assets/images/third-center-image.PNG" alt="" class="centered-img">
<h1 class="forth-section-h1">"Now I do whatever the f#ack I want when I f#cking want"</h1>
<p class="forth-section-p">Janice believes that her success has given her the confidence to deal with anything life throws her way. And she openly admits that displaying her wealth has become a guilty pleasure. “I was driving in my G Wagon a few weeks ago and noticed my ex-boyfriend waiting at the bus stop. I could resist. I stopped my car, rolled down the window and happily presented my middle finger. I drove away with a smile. Life is good.”</p>
</section>
<div class="bordered-div">
<p>Learn more about online stock trading and how you can profit </p>
<a class="flex-container-first-section-a" href="">Start Now</a>
</div>
<div class="bordered-div">
<h1 class="bordered-div-h1-upper-case">Celebrity News </h1>
</div>
<div class="image-container">
<div class="img-with-text">
<img src="/assets/images/hollywood-image.PNG" alt="hollywod sign" class="image-container-img">
<div class="img-with-text-bottom">
<h4 class="img-with-text-h4">Ass-tastic! We rank the best bums in Hollywood.</h4>
<span class="img-with-text-span">By Lili Johnson 30.06.2020</span>
</div>
</div>
<div class="img-with-text">
<div class="img-with-text-bottom">
<img src="/assets/images/laptop-image.PNG" alt="a picture of a laptop" class="image-container-img">
<h4 class="img-with-text-h4">Coming soon to Netflix. See which movies have us hot and bothered.</h4>
<span class="img-with-text-span">By Gavin Lewis 30.06.2020</span>
</div>
</div>
<div class="img-with-text">
<img src="/assets/images/couple-fighting-image.PNG" alt="a picture of a couple fighting" class="image-container-img">
<h4 class="img-with-text-h4">Another celebrity couple calls it quits. Why can't the rich and famous stay together?</h4>
<span class="img-with-text-span">By Adriana Huber 30.06.2020</span>
</div>
</div>
<div class="bottom-message">
<div class="bottom-message-content">
<h1 class="bottom-message-h1">The rich are getting richer</h1>
<p class="bottom-message-content-p">And so can you. By becoming an online trader of currencies, stocks and commodities, you too can increase your monthly income and upgrade your standard of living </p>
<button class="bottom-message-button">Start with free 1-on-1 coaching</button>
</div>
</div>
</section>
<aside>
<div class="aside-first-section">
<h3>Hot Topics</h3>
</div>
<div class="aside-second-section">
<img src="/assets/images/second-column-first-img.PNG" alt="" class="aside-img">
<h2 class="aside-h2">Man steals £ 2,500,000 from the <br> bank with a legal loophole!</h2>
</div>
<div class="aside-third-section">
<img src="/assets/images/second-column-second-img.PNG" alt="" class="aside-img">
<h2 class="aside-h2">Does praying to God for money <br> actually work?</h2>
</div>
<div class="line"></div>
<div class="aside-third-section">
<img src="/assets/images/second-column-sixth-image.png" alt="" class="aside-img">
<h2 class="aside-h2">Japanese scientists have <br> discovored the secret of making money. Find out if it's real.</h2>
</div>
<div class="box-message">
<div class="box-message-content">
<p class="box-message-p">Learn more about online stock trading and how you can profit.</p>
<a class="box-message-a" href="">Start Now</a>
</div>
</div>
<div class="trending-news-div">
<h3>Trending Financial News</h3>
</div>
<div class="aside-third-section">
<img src="/assets/images/second-column-third-image.png" alt="" class="aside-img">
<h2 class="aside-h2">Royal family goes bancrupt. <br> Could be out on the streets very soon.</h2>
</div>
<div class="line"></div>
<div class="aside-third-section">
<img src="/assets/images/second-column-forth-image.png" alt="" class="aside-img">
<h2 class="aside-h2">Man wins the lottery and blows it <br> all in a Spanish casino.</h2>
</div>
<div class="aside-third-section">
<img src="/assets/images/second-column-fifth-image.png" alt="" class="aside-img">
<h2 class="aside-h2">Silver vs Gold. Our experts give <br> you the breakdown.</h2>
</div>
</aside>
</div>
</div>
<div class="footer">
<section class="footer-section">
<div class="footer-content">
<p class="capital-words">TERMS AND CONDITIONS CAREFULLY READ AND AGREE TO TERMS BELOW:</p>
<br>
<p>We are not affiliated in any way with any news publication. All trademarks on this web site whether registered or not, are the property of their respective owners. The authors of this web site are not sponsored by or affiliated with any of the third-party trade mark or third-party registered trade mark owners, and make no representations about them, their owners, their products or services. It is important to note that this site and the comments/answers depicted above is to be used as an illustrative example of what some individuals have achieved with this/these products. The website, and any page on the website, is based loosely off a true story, but has been modified in multiple ways including, but not limited to: the story, the photos, and the comments. Thus, this page, and any page on this website, are not to be taken literally or as a non-fiction story. Ther page, and the results mentioned on this page, although achievable for some, are not to be construed as the results that you may achieve on the same routine. I UNDERSTAND THIS WEBSITE IS ONLY ILLUSTRATIVE OF WHAT MIGHT BE ACHIEVABLE FROM USING THIS/THESE PRODUCTS, AND THAT THE STORY/COMMENTS DEPICTED ABOVE IS NOT TO BE TAKEN LITERALLY. Ther page receives compensation for clicks on or purchase of products featured on this site.</p><br>
<p class="capital-words">IMPORTANT CONSUMER DISCLOSURE</p><br>
<p>The term "advertorial" is a combination of "advertisement" and "editorial" written in an editorial format as an independent news story, when in fact the advertisement may promote a particular product or interest. Advertorials take factual information and report it in an editorial format to allow the author, often a company marketing its products, to enhance or explain certain elements to maintain the reader's interest. A familiar example is an airline's in-flight magazines that provide an editorial reports about travel destinations to which the airline flies.</p><br>
<p>As an advertorial, I UNDERSTAND THIS WEBSITE IS ONLY ILLUSTRATIVE OF WHAT MIGHT BE ACHIEVABLE FROM USING THIS PROGRAM, AND THAT THE STORY DEPICTED ABOVE IS NOT TO BE TAKEN LITERALLY. Ther page receives compensation for clicks on or purchase of products featured on this site. Ther program is not a job but an educational opportunity that can help individuals learn how to earn money through their entrepreneurial efforts. Anyone who decides to buy any program about making money will not necessarily make money simply by purchasing the program. People who think "I bought these materials so I'm going to automatically make money" are wrong. As any type of education has so many variables, it is impossible to accurately state what you may expect to achieve, however, people who bought the program not only bought the program, but also undertook additional training and education, applied the principles to an area of the market that was growing, kept their commitments and continued to learn. If you do what the individuals depicted did, you may generally expect to achieve a great education in the area of your choice, but you should not expect to earn any specific amount of money. Typical users of the starter materials that don't enroll in coaching, don't keep their commitments and don't implement what they learn, generally make no money. Though the success of the depicted individual is true, her picture and name have been changed to protect her identity. Consistent with the advertorial concept, the comments posted in the comment section are also representative of typical comments and experiences which have been compiled into a comment format to illustrate a dialogue, however, the comments are not actual posts to this webpage and have been compiled or generated for illustrative purposes only.</p><br>
<p>We are not affiliated in any way with CNN, WebTV, News Channel 1, ABC, NBC, CBS, U.S. News or FOX, and all such trademarks on this web site, whether registered or not, are the property of their respective owners. The authors of this web site are not sponsored by or affiliated with any of the third-party trade mark or third-party registered trade mark owners, and make no representations about them, their owners, their products or services.</p>
</div>
<div class="footer-links">
<a class="footer-links-a" href="">Cookie Policy</a>
<a class="footer-links-a" href="">Privacy Policy</a>
<a class="footer-links-a" href="">Data Processing Agreement</a>
<a class="footer-links-a" href="">Terms and Conditions</a>
</div>
<p class="testimonials-p">*Testimonials:
All characters, information and events depicted on This Website are entirely fictitious. Any similarity to actual events or persons, living or dead, is purely coincidental.</p>
<p class="copyright-p">© fortunetonight.com 2020</p>
</section>
</div>
</div>
I tried setting the width in pixels and ems but that still doesn't fix the issue
You have a width of 800px set on .footer-links
That means, no matter how wide your window is, it will keep it at 800px which will make you scroll side to side.
Change the width of .footer-links to be 100% or just remove it all together and that should fix it.
You could use the #media rule in your css..
#media(max-width: 1000px){
.footer-links {
width: 600px;
margin: 0 auto;
margin-top: 50px;
}
}
Link to more on #media --> https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
When I resize the window text from multiple divs overlaps onto another.
I believe it is maybe because my height values apply for percent of the screen, not percent of the div as I would like. What I would like for now (unless someone has a better idea) is instead of vertical div size decreasing have it stay fixed, therefore preventing the text from being pushed onto another div.
I've seen similar posts but none of them seemed to specifically address my issue.
Any help would be greatly appreciated!
EDIT: I want the div height to stay the same despite reducing window size.
FINAL EDIT: I will deal with this issue when I finish my computer-compatible site and then work on making it mobile-compatible.
JsFiddle:
http://jsfiddle.net/v5aobbp3/
<div id="moreinfo" class="wrapperdiv">
<div id="topquote">
<br> <br>
<p id="quote"> “ Musical activity involves nearly every region of the brain that we know about, and nearly every neural subsystem ” </p>
<p id="quote2"> — Daniel Levitin, <em> This is Your Brain on Music, </em> p.299 </p>
</div>
<div id="benefits-main">
<div id="top-row">
<div id="leftfact">
<p class="benefits-title"> express yourself</p> <br>
<p id="bodytext"> Music is the best way for you to express yourself, unleash your creativity, and get inspired. Immerse yourself or your children in the world of music through musical education to produce an enhanced appreciation and understanding of this art </p>
</div>
<div id="centrefact">
<p class="benefits-title"> improved cognitive abilities </p> <br>
<p id="bodytext"> The auditory precision required in music study results in dramatic improvements in language abilities. Musically trained children are able to distinguish subtleties of speech, resulting in increased verbal, comprehension, reading, and communication skills. Students of music have better information processing, stronger neural connections, improved memory, and bigger brains in general.
</div>
<div id="rightfact">
<p class="benefits-title"> increased focus and academics</p>
<p id="bodytext"> Music gives its learners an increased attention span and stronger focus as well as self-discpline. Children who learn music have higher IQs and better motor coordination. Studies have found that music students significantly outperform academically compared to other students and are more motivated.
</div>
</div>
<div id="bottom-row">
<div id="leftfact2">
<p class="benefits-title"> empathy and social awareness </p> <br>
<p id="bodytext"> Musical education increases empathy in children as well as improves their emotional intelligence and interpretation of nuances of speech. Music is emotional and through this art students learn to connect with others on an emotional level. While performing with other musicians students increase their cooperation skills. </p>
</div>
<div id="centrefact2">
<p class="benefits-title"> self-confidence </p>
<p id="bodytext"> Performing as well as self-discipline give students a high level of confidence </p>
</div>
<div id="rightfact2">
<div id="button2">
<p class="button2text"> Learn More </p>
</div>
</div>
</div>
</div>
<div id="bottomquote">
<br>
<p id="musicquote" class="Einstein"> "The theory of relativity occurred to me by intuition, and music is the driving force behind this intuition. My parents had me study the violin from the time I was six. My new discovery is the result of musical perception.” </p> <br>
<p id="quote2" class="Einstein"> — Albert Einstein </p>
</div>
</div>
And some of the pertinent css:
div #moreinfo {
background-color: #F1F1F1;
/* #d3dfed; original colour */
color: black;
height: 150%;
margin-top: 0%;
/* position: relative; */
}
#moreinfo #benefits-main {
background-color: #d3dfed;
height: 60%;
width: 100%;
}
#benefits-main #top-row { height: 50%; } #benefits-main #bottom-row { height: 50%; }
#benefits-main .benefits-title { margin-top: 2%;}
#benefits-main #leftfact { height: 100%; width: 33%; float: left; background- color: #b7cbe2; } #benefits-main #leftfact2 { height: 100%; width: 33%; float: left;
background-color: #c5d5e7; /*background-color: white;*/}
#benefits-main #centrefact { height: 100%; width: 33%; float: left; background-color: #c5d5e7; /* background-color: white;*/} #benefits-main #centrefact2 {height: 100%; width: 33%; float: left;
background-color: #b7cbe2;}
#benefits-main #rightfact { height: 100%; width: 33%; float: left; background-color: #b7cbe2; /* #e1e9f3; */} #benefits-main #rightfact2 {height: 100%; width: 33%; float: left;
background-color: #c5d5e7; /* background-color: white;*/ }
#button2 {
height: 20%;
width: 40%;
background-color: #4a79b1;
margin-top: 28%;
margin-right: auto;
margin-left: auto;
font-weight: 300;}
#button2 p {
font-family: Avenir Next, sans-serif !important;
color: #FFFFFF !important;
font-weight: 200 !important;
padding-top: 7%;
}
.button2text {
color: white;
}
a.rcmlink:link { color: #EEEEEE; } a.rcmlink:visited { color: #EEEEEE; } a.rcmlink:active {color: #EEEEEE;}
#benefits-main #bodytext {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
#moreinfo p {
margin-left: 10%;
margin-right: 10%;
color: #22384f;
font-size: 25px;
font-family: Montserrat , sans-serif;
}
div #topquote {
background-color: #d3dfed; /* #9bb7d6; */
height: 20%;
}
#topquote #quote {
/* position: absolute; /* top: 5%; */
text-align: center;
}
#topquote #quote2 {
text-align: center;
font-size: 20px;
font-family: Roboto;
bottom: 2%;
}
/* #topquote2 { background-color: #d3dfed; height: 10%; } */
div #bottomquote {
text-align: center;
height: 20%;
}
#quote2 {
font-size: 15px;
font-family: Roboto !important;
}
div #musicquote {
/* position: absolute; bottom: 2.5%; */
}
Putting heights on divs forces the text to overflow once they are too small to contain the text. If you let the divs height stay auto and controlled spacing around them with padding top/bottom then they would automatically get longer to fit the text as you resize the window.
Not sure if this really answers your question but I'm not exactly sure what you are asking?
I've pulled out just that row into a stripped down example. The most important CSS is this:
.row {
display: table;
table-layout: fixed;
width: 100%;
}
.fact {
display: table-cell;
}
html {
color: #22384F;
font-size: 12px;
font-family: sans-serif;
}
.row {
display: table;
table-layout: fixed;
width: 100%;
}
.fact {
display: table-cell;
padding: 20px;
background-color: #B7CBE2;
}
.fact:nth-child(even) {
background-color: #C5D5E7;
}
.benefits-title {
font-size: 25px;
font-family: Montserrat , sans-serif;
margin: 0;
}
<div class="row">
<div class="fact">
<p class="benefits-title"> express yourself</p> <br>
<p> Music is the best way for you to express yourself, unleash your creativity, and get inspired. Immerse yourself or your children in the world of music through musical education to produce an enhanced appreciation and understanding of this art </p>
</div>
<div class="fact">
<p class="benefits-title"> improved cognitive abilities </p> <br>
<p> The auditory precision required in music study results in dramatic improvements in language abilities. Musically trained children are able to distinguish subtleties of speech, resulting in increased verbal, comprehension, reading, and communication skills. Students of music have better information processing, stronger neural connections, improved memory, and bigger brains in general.
</p></div>
<div class="fact">
<p class="benefits-title"> increased focus and academics</p>
<p> Music gives its learners an increased attention span and stronger focus as well as self-discpline. Children who learn music have higher IQs and better motor coordination. Studies have found that music students significantly outperform academically compared to other students and are more motivated.
</p></div>
</div>
Using display: table-cell means that each div in your row will always have the same height. You want to avoid assigning your HTML elements heights at all unless you really know what you're doing: things can get messy very quickly.
You'll notice I've also changed things up a bit, removing your IDs and replacing them with classes. There's good reason for that: it keeps the specificity of your selectors low, which will make things much easier to maintain in the long run. It also lets you re-use styles and avoid having to come up with unique IDs (such as #leftfact2) when they aren't required.
Having the same ID repeated multiple times is also wrong, and will cause headaches if you want the page to validate or - more importantly - start adding JavaScript. I would recommend avoiding the use of IDs for styling altogether (that's somewhat controversial, but smarter people than me say the same thing).
I am going nuts with a whitespace problem inside a div. Two of my divs have unexplained whitespace but a third similar one has none. When I use the compatability mode of IE8 the whitespace disappears so I am guessing it is something to do with the CSS but for the life of me I can't seem to see what.
The page causing the issue is at http://www.infinitedreamers.co.uk/blog/
I have made one of the divs background white to show what I mean.
The snippet of the page is as follows:
<div id="id_front_main">
<div id="id_front_top">
<div id="id_front_top_title">
<h2>Latest Gallery Images</h2>
</div><!--#id_front_top_title-->
<table id="id_gallery_latest"><tr><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_Fae4.jpg" height="100" width="86" alt="Contemplation"/><p class="id_title">Contemplation</p></td><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_Fae6.jpg" height="100" width="100" alt="Emo Fae"/><p class="id_title">Emo Fae</p></td><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_IOTPM.jpg" height="100" width="88" alt="Invasion of the Saucer-Plushies"/><p class="id_title">Invasion of the Saucer-Plushies</p></td><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_StarPlushies.jpg" height="100" width="84" alt="Star Plushies"/><p class="id_title">Star Plushies</p></td></tr></table>
<div id="id_front_top_meta">
</div>
</div><!--#id_front_top-->
<div id="id_front_main_holder">
<div id="id_front_left">
<div id="id_front_left_title">
<h2>3d Art Latest</h2>
</div><!--#id_front_left_title-->
<div class="id_latest_posts">
<h3>Getting Started in 3d Art for free</h3>
<span>
<p>You want to create 3d art on the PC or Mac? This is a quick guide on how to achieve this for free.</p>
</span>
</div><!--id_latest_posts-->
<div id="id_front_left_meta">
</div>
</div><!--#id_front_left-->
<div id="id_front_right">
<div id="id_front_right_title">
<h2>Software Latest</h2>
</div><!--#id_front_right_title-->
<div class="id_latest_posts">
<h3>Poser Files Database</h3>
<p>Poser Files Database is designed to aid in the cataloging of content for Poser, DazStudio, Vue, and other similar 3D tools. It can be used simply as a way to find a particular file or to provide detailed information about all products in one location.</p>
<h3>File Renamer</h3>
<p>FileRenamer is a simple batch file renaming utility.</p>
<h3>Database Documenter</h3>
<p>Database Documenter generates easy-to-read and detailed documentation for SQL Server 2000/2005 databases with a few simple clicks.</p>
</div><!--id_latest_posts-->
<div id="id_front_right_meta">
</div>
</div><!--#id_front_right-->
</div><!--#id_front_main_holder-->
</div><!--#id_front_main-->
<div class="clear"></div>
The CSS that applies is as follows:
#id_front_main
{
text-align: center;
width: 100%;
}
#id_front_top
{
width: 100%;
background: url(images/fcover.jpg);
background-repeat: repeat-y;
}
#id_front_top_title
{
width: 100%;
background: url(images/ftop.jpg);
background-repeat: no-repeat;
height: 70px;
}
#id_front_top_meta
{
background: url(images/fmeta.jpg);
height: 31px;
padding-top: 4px;
}
#id_front_main_holder
{
width: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#id_front_left
{
width: 45%;
float: left;
/*background: url(images/flcover.jpg);
background-repeat: repeat-y;*/
background: white;
margin-bottom: 5px;
margin-top: 10px;
padding: 0 0 0 0;
}
#id_front_right
{
width: 45%;
float: right;
background: url(images/flcover.jpg);
background-repeat: repeat-y;
margin-bottom: 5px;
margin-top: 10px;
padding: 0 0 0 0;
}
#id_front_left_title, #id_front_right_title
{
width: 100%;
background: url(images/fltop.jpg);
background-repeat: no-repeat;
height: 70px;
}
#id_front_left_meta, #id_front_right_meta
{
background: url(images/flmeta.jpg);
height: 31px;
padding-top: 4px;
}
#id_front_main h2, #id_front_left h2, #id_front_right h2
{
background: transparent;
font: 24px Georgia,century gothic, Arial, sans-serif;
font-weight:normal;
padding-top: 10px;
padding-bottom: 5px;
}
#id_front_left p, #id_front_right p
{
padding: 0 10px 0 10px;
text-align: left;
}
James :-)
The whitespace is caused by the top-margin of the h2 in the boxes. To solve it:
#id_front_main h2, #id_front_left h2, #id_front_right h2 {
...
margin-top: 0;
}
It is always a good idea to reset the styles you are using to avoid these kind of problems when looking at your site in different browsers. There are standard reset style-sheets that can help you with that like:
http://meyerweb.com/eric/tools/css/reset/
Even we faced the similar type of issue.
If you are showing one div at a time, then you can use the below solution:
document.getElementById('myDiv').style.display = 'none';
to the div which is larger in size than the current div shown.
This really works well with IE10 webkit, Chrome Webkit and Safari Webkit.
Cheers,
Ankit