Expand div according to content - html

I try to make the content div of my page expand according to the content that is loaded in it due to a script. I've tried everything I know and everything I have found on the internet, but nothing has the result I want.
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function(){
$('#nav a').click(function(e) {
$('#content').hide().load( $(this).attr('href') , function(){
$('#content').show()
})
return false
})
})
</script>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="nav">Home
The Band &nbsp
News &nbsp
Gallery Merchandise
Contact</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
div#container {
height: 100%;
width: 100%;
}
div#header {
top: 0px;
width: 100%;
height: 80px;
position: fixed;
background-color: transparent;
text-align: center;
}
div#nav {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
top: 120px;
width: 100%;
height: 40px;
position: fixed;
text-decoration: none;
text-align: center;
font-weight: bolder;
font-variant: normal;
}
div#content {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 12px;
position: absolute;
top: 200px;
bottom: 40px;
left: 200px;
right: 200px;
}
div#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
bottom: 0px;
position: fixed;
height: 30px;
width: 100%;
text-align: center;
color: #fff;
}
.ttdesign {
font:"Arial Black", Gadget, sans-serif; color: #09F;
}
a:link {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
}
a:visited {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
}
a:hover {
font-family: MgSouvenirLight;
font-size: 18pt;
font-style: italic;
color: #FC0;
}
The demo link is: http://thodoris.esy.es/is/
Right now, the problem that occurs, is that the content that is loaded, does not make the #content expand, but it seems to load over it... Any ideas?

If you want your page to be responsive you may be better of using bootstrap as using there grid system will allow you to make all aspects of your page responsive depending on the content and screen size.
You can get it here
And here are some free templates to show you how it all fits together here

Related

Unable to change font settings in top navigation bar CSS

I have unsuccessfully been attempting to change the font family for my top navigation bar to Ubuntu. Currently, the text is not changing and is reverting to this default.
I have experimented with changing it to a div and improving specificity, but it's not working.
I'm not sure if it's being overwritten by the font settings I have put on top?
Would appreciate any guidance on this!
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
#importurl('https://fonts.googleapis.com/css?family=Ubuntu:400,500,700');
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700');
* {
font-family: system-ui, sans-serif;
}
* {
margin: 0;
padding: 0;
}
header {
font-family: 'Ubuntu';
}
body {
font-family: 'Montserrat';
text-align: left;
}
/*typography*/
h1 {
font-family: 'Montserrat';
font-style: normal;
font-weight: bold;
font-size: (45px+1vw);
line-height: 55px;
text-align: center;
letter-spacing: 1px;
}
h2 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: calc(30px+1vw);
line-height: calc(37px+1vw);
letter-spacing: 1px;
color: #FFFFFF;
}
h3 {}
ul {
list-style: inside disc;
font-family: 'Montserrat';
font-style: normal;
font-weight: normal;
font-size: calc(16px+1vw);
line-height: calc(22px+1vw);
color: #FFFFFF;
}
/* Header */
header {
width: 100%;
height: 122px;
background: #FFFFFF;
position: fixed;
}
.wrapper {
width: 90%;
margin: 0 auto;
}
.logo {
width: 30%;
float: left;
text-align: left;
line-height: 122px;
}
nav {
float: center;
line-height: 122px;
}
nav a {
font-family: 'Ubuntu';
text-decoration: none;
letter-spacing: 4px;
font-size: calc(50px+1vw);
color: #616161;
padding: 36px 10px;
margin: 0 1 px;
}
nav a:hover {
background: #F3EA65;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- <div class="box-area"> -->
<header>
<div class="wrapper">
<div class="logo">
<img src="asdf.png" alt="Logo" width="25%" ;>
</div>
<nav>
about
our team
who we help
get involved
Contact
Donate
</nav>
</div>
</header>
It is better to include the fonts link in header tag in HTML and then run.Also add space after #import in second link.

Why are new elements appearing by default at the top of the page?

I'm relatively new to HTML/CSS, but like to think I have a rather good grasp on most aspects. However, this confuses me.
On my dummy website, no matter what new element I add, it's automatically being placed in a specific position near the top of the page. I've tried fiddling with the CSS but to no avail. In this example, the p element with value "Example element" is the last element in the code but appears just under the nav in the code snippet.
You may have to run the snippet fullscreen; I'm not sure as I haven't done any viewport stuff and it's been made to fit my abnormally-wide monitor.
Maybe I haven't been introduced to this particular concept yet.
#charset "UTF-8";
#font-face {
font-family: 'Gill Sans Std';
src: url(GillSansStd.otf) format("opentype");
}
#font-face {
font-family: 'SofiaPro';
src: url(SofiaPro.otf) format("opentype");
}
#logo {
margin: auto;
display: block;
opacity: 0.6;
}
header > h1 {
margin: 0 auto;
display: block;
border-style: none none solid none;
border-width: thin;
text-align: center;
font-family: "Bebas Neue", sans-serif;
font-size: 90px;
width: 380px;
}
nav {
margin-top: 55px;
margin-left: 650px;
margin-bottom: 20px;
}
nav > a {
margin-left: 85px;
margin-right: 85px;
font-family: "Raleway";
font-weight: bold;
padding: 10px;
}
nav > a:link {
color: black;
text-decoration: none;
}
nav > a:visited {
color: black;
text-decoration: none;
}
nav > a:hover {
background-color: black;
color: white;
}
#hero-content {
float: left;
margin-left: 90px;
margin-top: 150px;
}
#title {
font-size: 30px;
font-family: SofiaPro, sans-serif;
margin-bottom: 60px;
}
#subhead {
font-family: 'Gill Sans Std';
font-weight: 100;
font-size: 18px;
color: dimgrey;
border-style: none none solid none;
border-bottom-width: thin;
border-color: dimgrey;
padding-bottom: 10px;
padding-right: 15px;
padding-left: 10px;
}
#hero {
float: right;
margin-top: 40px;
margin-right: 40px;
}
#heropara {
width: 600px;
margin-top: 60px;
font-family: 'Raleway';
font-size: 20px;
font-weight: 800;
}
<!doctype html>
<html lang="en-gb">
<head>
<title>Blah Group</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="mainstyle.css" type="text/css" />
</head>
<body>
<header>
<h1>Foo</h1>
</header>
<nav>
BLAH
BLAH
BLAH
BLAH
BLAH
</nav>
<div id="hero-content">
<h1 id="title">BLAH</h1>
<h2 id="subhead">BLAH</h2>
<p id="heropara">Lorem Ipsum blahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
</div>
<img id="hero" src="https://www.littlethings.info/wp-content/uploads/2014/04/dummy-image-green-e1398449160839.jpg" height="200" width="200" />
<p>Example element</p>
</body>
</html>

website layout going crazy when I zoom out and in

idk why but when I zoom out of my website, the code seems to fall apart and the whole thing just looks disgusting. I've checked out other answers to this question but NONE of the solutions really tailor towards MY code.
body {
background-image: url(gradient.png);
background-repeat: no-repeat`enter code here`;
}
h1.heading {
color: #046289;
font-size: 50px;
margin-top: 100px;
text-align: center;
font-family: 'Poppins', sans-serif;
}
p.heading {
color: #046289;
font-family: 'Poppins', sans-serif;
font-size: 20.8px;
font-weight: 600;
position: relative;
margin-left: 70px;
top: 60px;
}
p.heading1 {
color: #046289;
font-family: 'Poppins', sans-serif;
font-weight: 400;
position: relative;
margin-left: 70px;
top: 50px;
}
img.aml {
width: 280px;
height: 280px;
position: absolute;
margin-left: 360px;
bottom: 30px;
}
iframe.livevid {
position: absolute;
margin-left: 840px;
}
p.vid {
color: #046289;
font-family: 'Poppins', sans-serif;
font-size: 20.8px;
font-weight: 600;
position: absolute;
margin-left: 840px;
top: 307px;
}
p.vid1 {
color: #046289;
font-family: 'Poppins', sans-serif;
font-weight: 400;
position: absolute;
margin-left: 840px;
top: 353px;
}
a {
text-decoration: none;
}
p a:link {
color: #4204a5;
}
p a:visited {
color: #4204a5;
}
p a:hover {
color: #71a3f2;
}
/*
BELOW - NAVIGATION BAR
*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
}
li {
float: left;
}
.spacefornav {
margin-left: 462px;
}
li a:hover {
color: #71a3f2;
}
div.nav {
color: #046289;
}
li a {
display: inline-block;
color: #046289;
text-align: center;
padding: 8px 10px;
text-decoration: none;
font-family: 'Poppins';
sans-serif;
margin: 0px 20px;
font-weight: 500;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Childish Gambino</title>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&subset=devanagari,latin-ext" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<h1 class="heading">CHILDISH GAMBINO</h1>
<ul>
<div class="nav">
<li class="spacefornav">Home</li>
<li>About</li>
<li>Music</li>
<li>Contact</li>
</div>
</ul>
<p class="heading">"AWAKEN MY LOVE!"</p>
<p class="heading1">
Childish Gambino's latest
<br> and freshest album is
<br> AVAILABLE NOW on iTunes,
<br>
Spotify and Google Play Music
</p>
<img src="images/awakenmylove.jpg" class="aml" title="'Awaken My Love!' album art">
<<iframe width="280" height="158" src="https://www.youtube.com/embed/6v7W513Wj3g?rel=0" frameborder="0" allowfullscreen class=livevid></iframe>
<p class="vid">Watch Now!</p>
<p class="vid1">Childish Gambino performing '3005'<br>live at Splendor In The Grass!</p>
</body>
</html>
If you use some inline DIV's that fit exactly into other DIV's this problem can happen. When zooming in/out pixels are being divided. If you give the DIV's one extra pixel of space it's fixed.

Can't Click On Controls After Adding Css

I've added a new css element to my master page. But After that, I can't click on other controls in the page. I know some div is overlapping the other making click not working. But I couldn't figure it out with the css file. My css file is given below:
here where I placed my div in html :
/* XLSF 2007 */
body {
background: #333 url(image/bg-strip-dark.png) 0px 0px;
font-family: normal, "Century Gothic", "Helvetica Neue Light", "Helvetica Neue", georgia, "times new roman", "Arial Rounded MT Bold", helvetica, verdana, tahoma, arial, "sans serif";
font-size: 75%;
color: #666;
}
h1,
h1 a {
color: #999;
text-decoration: none;
}
h1 {
color: #999;
margin-bottom: 0;
margin-left: -5px;
margin-top: 0;
padding-left: 5px;
padding-right: 5px;
}
h1,
h2,
h3 {
clear: both;
float: left;
font-family: normal, "Century Gothic", "Helvetica Neue Light", "Helvetica Neue", georgia, "times new roman", "Arial Rounded MT Bold", helvetica, verdana, tahoma, arial, "sans serif";
font-size: 3em;
font-size-adjust: none;
margin-bottom: 0.25em;
padding-bottom: 1px;
}
h1,
h2 {
letter-spacing: -1px;
margin-bottom: 0;
margin-left: -5px;
margin-top: 0;
padding-left: 5px;
padding-right: 5px;
}
a {
color: #6699cc;
padding: 0px 2px;
text-decoration: none;
}
a:hover {
background: #6699cc;
color: #fff;
}
#lights {
clear: both;
position: relative;
left: 0px;
top: 0px;
width: 100%;
height: 96px;
overflow: hidden;
z-index: 1;
}
.xlsf-light {
position: relative;
}
body.fast .xlsf-light {
opacity: 0.9;
}
.xlsf-fragment {
position: relative;
background: transparent url(image/bulbs-50x50-fragments.png) no-repeat 0px 0px;
width: 50px;
height: 50px;
}
.xlsf-fragment-box {
position: relative;
left: 0px;
top: 0px;
width: 50px;
height: 50px;
*width: 100%;
*height: 100%;
display: none;
}
.xlsf-cover {
position: relative;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: #fff;
opacity: 1;
z-index: 999;
display: none;
}
/*
.xlsf-light.bottom {
height:49px;
border-bottom:1px solid #006600;
}
.xlsf-light.top {
height:49px;
border-top:1px solid #009900;
}
*/
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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 runat="server">
<link rel="stylesheet" media="screen" href="christmaslights.css" />
<title>Untitled Page</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1 {
width: 135px;
}
</style>
<script src="snowstorm.js"></script>
<script>
snowStorm.snowColor = '#99ccff'; // blue-ish snow!?
snowStorm.flakesMaxActive = 96; // show more snow on screen at once
snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view
</script>
<script src="lights/soundmanager2-nodebug-jsmin.js"></script>
<script src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
<script src="lights/christmaslights.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width:100%;">
<tr>
<td class="style1">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/remedyonline-logo.png" />
</td>
<td>
<span style="font-family: Tahoma; font-size: xx-large; font-weight: bold; color: #666666; padding-left: 10px;">Representatives Corner
<marquee direction="right"><font color=#993300 size=5 ><strong>GDS Wishes A HAPPY X'MAS</strong></marquee></font>
</span>
</td>
</tr>
</table>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<div id="lights">
</div>
</body>
</html>
At least please notify me where's the problem. I am new to html and css.
It could be that one of the elements with a modified z-index property is rendered above the aforementioned controls. The solution, then, would be to isolate which one of them is problematic for you by removing the properties and observing the results.
A better solution, however, might be to learn about the developer tools in your favorite browser - they can be incredibly helpful for situations like this:
Chrome Dev Tools
Firefox Dev Tools

website trying to scroll where there isnt anything

my website has a scroll bar that goes quite far over to the right and one that goes down. nothing is displayed in these areas so the scroll bar is unecesary! if anything it could fit all on one page. these creates a lot of white space around my page.
how can i stop this from happening?
<!DOCTYPE html>
<head>
<link href='http://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'>
<title>Louis Moore | Creating The Future </title>
<!--[if IE]>
<link rel="stylesheet" type"text/css" href="ie.css" >
<![endif]-->
</head>
<style>
.box {
background-color: #F1F2F2;
border: 1.5px #D1D3D4 solid;
position: relative;
top: 100px;
height:450px;
width:100%;
}
.image1 {
position: relative;
top:-100px;
left: 390px;
}
body{
font-family: 'Paytone One', sans-serif;
font-size: 30px;
}
h1 {
font-family: 'Paytone One', sans-serif;
font-size: 40px;
position: relative;
top:-250px;
left: 370px;
}
h2 {
font-family: 'Paytone One', sans-serif;
font-size: 30px;
position: relative;
top:-300px;
left: 480px;
color: #FC3B3B;
}
h3 {
font-family: 'Paytone One', sans-serif;
font-size: 20px;
position: relative;
top:-290px;
left: 390px;
}
.image2 {
position: relative;
top:-300px;
left: 590px;
}
.box1 {
width: 100%;
height: 5px;
background-color: #FC3B3B;
position: relative;
top:100px;
left: 0px;
}
p {
position: relative;
top:150px;
left: 100px;
font-size: 15px;
font-family: arial;
color: #585858;
}
</style>
<body>
<div class="box">
<img src="louis.png" class="image1" alt="." width="400px" height="400px">
<h1> WELCOME TO MY PAGE</h1>
<h2>COMING SOON... </h2>
<h3>BUT FOR NOW FOLLOW ME ON TWITTER</h3>
<img src="twitter.png" class="image2" border="0" alt=".">
</div>
<div class="box1">
</div>
<p>louismoore.net © All rights reserved 2012</p>
</body>
</html>
EDIT: this is how it should look like
It's an artifact of the relative positioning and setting a left value.
Remove it, and the extra space goes away.
Demo
EDIT
You do not need any relative positioning. The design you are trying to accomplish can be created much more simply with text-align: center.
HTML
<div>
<img src="//placehold.it/200x200">
<h1>Welcome to my page</h1>
<h2>Coming Soon...</h2>
<h3>But for now follow me on Twitter</h3>
</div>​
CSS
#import url(http://fonts.googleapis.com/css?family=Paytone+One);
div {
text-align: center;
background: #ddd;
border-bottom: 3px solid red;
margin: 5px;
padding: 10px;
font-family: 'Paytone One', sans-serif;
font-size: 24px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
color: red;
}
img {
width: 200px;
height: 200px;
}​
Demo