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
Related
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.
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>
This is my first html/css project. I tried to use nav and ul tags to put a Log in option on the top right corner over the image. When I do it shifts everything from the middle. I did google before posting but I haven't been successful. I am just wanting to know if I have to float it over or mess with the padding and margins? Here is the html markup`
<!DOCTYPE html>
<html>
<head>
<title>AudioPhile</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Audio<img class="logo" src="https://image.ibb.co/n2A7gb/bar_diagram.png" alt=" folder with white music bars">Phile</h1>
<p>Create. Play. Share music anywhere, on any device with unlimited free storage.</p>
<input class="signup" type="email" id="myEmail" value="Type Your Email Here">
<a class="btn-1" href="#">Get Started</a>
<footer class="credits">© Natalie Pickrom</footer>
</div>
</div>
</section>
</body>
</html>`
The CSS:`#import url('https://fonts.googleapis.com/css?family=Archivo+Narrow|Nunito:200');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background:linear-gradient(0deg,rgba(64,64,64,0.8),rgba(64,64,64,0.8)),url(https://preview.ibb.co/jZbkZw/james_stamler_153487.jpg) no-repeat 95% 95% ;
background-size: cover;
display: table;
top:0;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%
max-width: none;
}
.content {
max-width:500px;
margin: 0 auto;
text-align:center;
}
.content h1 {
font-family: "Archivo Narrow", Helvetica, sans-serif ;
color: #F9F3F4;
text-shadow: 0px 0px 300px #000;
font-size: 6em;
padding:0px;
margin:0px;
}
.content p {
font-family: Nunito, "Open Sans", sans-serif;
font-size: 1.253em;
color:#F9F3F4;
Paddding: 0px;
margin-top: 0px;
}
.signup {
border: 0px;
font-family: Nunito, "Open Sans", sans-serif;
letter-spacing: 2px;
color: rgba(128,128,128,0.7) ;
padding: 5px;
width: 67%;
}
.btn-1 {
border-radius:0px;
background-color: #008CBA;
font-family: Nunito, "Open Sans", sans-serif;
color:#F9F3F4;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding: 3px 10px 4px;
width:50%;
}
.credits {
font-family: Nunito, "Open Sans", sans-serif;
color:#F9F3F4;
text-align: center;
padding: 10px;
}
#media screen and (max-width: 768px) {
.content h1 {
font-size:4em;
}
.btn-1 {
padding: 2px 10px 3px;
width: 25%;
}
p {
font-size: .5em;
}
}
`
Here is the JSfiddle https://jsfiddle.net/1ysegrd6/
Here is what I want to achieve. I want log in where they have home subscribe
I am creating a website, but the top of the website with the name and what page you are on is too far spaced out. ATM it looks like this;
Website Name
Page you're on
But I want there to not be the spaces between. I have tried using div tags to position it but whatever I do they dont move.
My code is
<!DOCTYPE html>
<html>
<title>Website name -Home</title>
<style>
body {
background-color: #3399FF;
}
h2 {
text-align: center;
font-family: 'Arial Narrow', Arial, sans-serif;
}
h4 {
text-align: center;
font-family: 'Arial Narrow', Arial, sans-serif;
}
p{
font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans- serif;
}
hr {
width: 100%
}
#pageTop {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #8AC007;
}
#titleDivide{
position: relative;
}
</style>
<body>
<div #id="pageTop">
<h2>Website Name</h2>
<h4>Home</h4>
</div>
<div #id="titleDivide">
<hr />
</div>
</body>
</html>
Remove the margin from h2 and h4:
h2, h4
{
margin: 0;
}
Demo:
body
{
background-color: #3399FF;
}
h2, h4
{
text-align: center;
font-family: 'Arial Narrow', Arial, sans-serif;
margin: 0;
}
p
{
font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
}
hr
{
width: 100%
}
#pageTop
{
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #8AC007;
}
#titleDivide
{
position: relative;
}
<!DOCTYPE html>
<html>
<title>Website name -Home</title>
<body>
<div #id="pageTop">
<h2>Website Name</h2>
<h4>Home</h4>
</div>
<div #id="titleDivide">
<hr />
</div>
</body>
</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  
News  
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