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>
Related
My CSS page makes my entire body section disappear. Everything in the header appears like it should, but literally anything I put in the body will not show up.
If I take out the CSS page, it comes in just fine. But once I put the CSS page back, the body disappears. I tried just p, h*, div, p nested in div. Everything is closed properly; the debugger can't find anything wrong with the code.
html {
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
font-size: 16px;
color: #000000;
}
/* links */
a {
color:#000000;
font-weight: bold;
}
a:visited {
color:#000000;
font-weight: bold;
}
a:hover {
color:#98ff98;
font-weight: bold;
}
a:active {
color:#000000;
font-weight: bold;
}
/* header */
header {
background-color: #98ff98;
font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
border-bottom: 1px solid #98ff98;
width: 100%;
top: 0;
padding: 0;
position: absolute;
}
#name {
float: right;
margin-right: 20px;
}
.name {
text-transform: uppercase;
font-family: "Staatliches", "Arial Black", sans-serif;
}
#nav {
text-align: center;
padding: 0 20px;
/* removed margin: 30px auto; b/c it looked weird */
}
li {
display: inline-block;
border: 1px solid #c8cfc8;
border-radius: 55px;
padding: 10px 10px;
background-color: #c8cfc8;
}
/* body? */
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>website</title>
<link href="resources/css/index.css" type="text/css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#400;700&family=Source+Sans+Pro:wght#400;700&family=Staatliches&display=swap" rel="stylesheet">
</head>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<body>
<p>test</p>
<h1>test</h1>
<div>test</div>
<div>
<p>also test</p>
</div>
</body>
</html>
The postion: absolute in your header is doing this.
It's allowing the body to go behind the header, so the body still there, but is behind the green background color.
Replacing the position: absolute for the desired height can do the job as I saw.
html {
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
font-size: 16px;
color: #000000;
}
/* links */
a {
color:#000000;
font-weight: bold;
}
a:visited {
color:#000000;
font-weight: bold;
}
a:hover {
color:#98ff98;
font-weight: bold;
}
a:active {
color:#000000;
font-weight: bold;
}
/* header */
header {
background-color: #98ff98;
font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
border-bottom: 1px solid #98ff98;
width: 100%;
top: 0;
padding: 0;
height: 200px;
/*position: absolute;*/
}
body {
display: absolute;
}
#name {
float: right;
margin-right: 20px;
}
.name {
text-transform: uppercase;
font-family: "Staatliches", "Arial Black", sans-serif;
}
#nav {
text-align: center;
padding: 0 20px;
/* removed margin: 30px auto; b/c it looked weird */
}
li {
display: inline-block;
border: 1px solid #c8cfc8;
border-radius: 55px;
padding: 10px 10px;
background-color: #c8cfc8;
}
/* body? */
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>website</title>
<link href="resources/css/index.css" type="text/css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#400;700&family=Source+Sans+Pro:wght#400;700&family=Staatliches&display=swap" rel="stylesheet">
</head>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<body>
<p>test</p>
<h1>test</h1>
<div>test</div>
<div>
<p>also test</p>
</div>
</body>
</html>
Simple answer here. The text is behind the header, so we just need to shift the text downwards. We can do this by adding a margin to the top of the text.
All you have to do is add the following margin-top:
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
margin-top: 150px;
}
As Isabelle said, your header is now sitting in front of the body. However, another thing to note is that your header element should be inside the body. The body element should contain all the other elements. Create a div element with an id like content to use as the "body" of the page and set some padding to the top of it.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<div id="content">
<p>test</p>
<h1>test</h1>
<div>test</div>
</div>
</body>
</html>
And add some padding
#content {
padding-top: 200px;
}
I have a H1 that is placed inside a .container div with a width of 800px. I tried giving the H1 a width also and that didn't fix it either. I can't think of any reason why this H1 wouldn't take the full width (taking it out of the .container div makes it work). Any idea what's causing this?
Thanks in advance.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" id="header-block">
<h2>Cristian M.</h2>
<h3>Product Designer</h3>
<p>Hi, I'm Cristian Moisei and I'm currently a Product Designer at <a id="screencloud-link" href="https://www.screen.cloud">ScreenCloud</a>. I formerly worked as the Lead Product Designer for <a id="glofox-link" href="https://www.glofox.com">Glofox</a> and ran a design studio, <a id="hyperion-link" href="http://www.hyperion.co">Hyperion</a>, for 4 years.</p>
<div id="extra-info">
<p>
Resume <span id="slash">   /   </span>
My Process <span id="slash">   /   </span>
Contact
</p>
<p>I live in London, UK</p>
</div>
</div>
<div id="glofox-block">
<div class="container">
<img src="Images/macbook.png">
<div id="text">
<h1 id="number">01.</h1>
<h1>Reinventing Glofox's interface for a complex user base.</h1>
<div id="view-project">
View Project
<img src="Images/arrow-white.png">
</div>
</div>
</div>
</div>
<div id="webfaction-block">
<div class="container">
<div id="text">
<h1 id="number">02.</h1>
<h1>Helping Webfaction attract a less technical audience.</h1>
<div id="view-project">
View Project
<img src="Images/arrow-black.png">
</div>
</div>
<img id="ipad" src="Images/ipad.jpg">
</div>
</div>
</body>
</html>
CSS:
#import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=b4314e71-83d8-4cc4-bd90-9ceb4a5339d0");
#font-face{
font-family:"Tisa W01 Light";
src:url("Fonts/63d98d82-cdc2-4f22-8883-bede07823185.eot?#iefix");
src:url("Fonts/63d98d82-cdc2-4f22-8883-bede07823185.eot?#iefix") format("eot"),url("Fonts/163f4b9f-d9b9-42c5-9098-d70e0016ae27.woff2") format("woff2"),url("Fonts/cc68d660-f674-409c-9be1-7f7f8bc0542a.woff") format("woff"),url("Fonts/2385d9d0-f23e-4d30-abb4-28817eda1254.ttf") format("truetype"),url("Fonts/a9d1c46b-d28d-4dab-8373-bbaf41232d7f.svg#a9d1c46b-d28d-4dab-8373-bbaf41232d7f") format("svg");
}
#font-face{
font-family:"Tisa W01 Regular";
src:url("Fonts/885a1883-0bbc-429a-91f5-c32e88a82b0e.eot?#iefix");
src:url("Fonts/885a1883-0bbc-429a-91f5-c32e88a82b0e.eot?#iefix") format("eot"),url("Fonts/36a5385d-e6c3-4aba-ad04-fa161f5c96b0.woff2") format("woff2"),url("Fonts/9b2fef91-4d32-413d-864e-4aaa363673eb.woff") format("woff"),url("Fonts/131d9e79-a2a5-4e3a-8cb9-e8acfcaa1c8a.ttf") format("truetype"),url("Fonts/419b1ef5-3ea5-43d3-8c3f-f68edc3d0a2b.svg#419b1ef5-3ea5-43d3-8c3f-f68edc3d0a2b") format("svg");
}
#font-face{
font-family:"Tisa W01 Medium";
src:url("Fonts/7901ab62-60f6-49a3-9332-359efb61e81b.eot?#iefix");
src:url("Fonts/7901ab62-60f6-49a3-9332-359efb61e81b.eot?#iefix") format("eot"),url("Fonts/785e7c0f-c445-4077-b412-1fd0a1a8ab06.woff2") format("woff2"),url("Fonts/7ee6ca7c-fe74-4640-a75d-939ea0bd637d.woff") format("woff"),url("Fonts/d76d30ec-b31a-4502-acf4-89812c16447e.ttf") format("truetype"),url("Fonts/9ce8adf1-e8ae-4095-84d3-6b2f836cd33e.svg#9ce8adf1-e8ae-4095-84d3-6b2f836cd33e") format("svg");
}
#font-face{
font-family:"Tisa W01 Bold";
src:url("Fonts/0b58340f-a8ca-4e68-8eab-bfda350b0b58.eot?#iefix");
src:url("Fonts/0b58340f-a8ca-4e68-8eab-bfda350b0b58.eot?#iefix") format("eot"),url("Fonts/02a4b96f-e988-44fe-a0e7-57ff1b610f3b.woff2") format("woff2"),url("Fonts/78d1ac04-d453-4364-8326-035a105b0865.woff") format("woff"),url("Fonts/776e5c1b-6939-4b32-9c0d-2dee7c34c7da.ttf") format("truetype"),url("Fonts/edc51787-36cf-434d-a4f1-b04139da6bfc.svg#edc51787-36cf-434d-a4f1-b04139da6bfc") format("svg");
}
/* Global */
body, a {
font-family:"Tisa W01 Light", serif;
color: black;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
border-bottom: 1px solid black;
cursor: pointer;
}
p {
font-size: 19px;
line-height: 1.8;
}
h1{
font-size: 50px;
line-height: 1.2;
margin: 0 0 40px 0;
padding: 0;
}
h2{
font-size: 30px;
margin: 0;
padding: 0;
}
h3{
font-family: "Tisa W01 Medium", serif;
font-size: 26px;
margin: -5px 0 40px 0;
padding: 0;
}
.container{
width: 800px;
margin-left: auto;
margin-right: auto;
}
#view-project{
display: inline !important;
opacity: .5 !important;
border-bottom: 1px solid white;
}
#view-project a{
font-family: "San Francisco", "Helvetica Neue", Arial, Helvetica, sans-serif;
font-weight: bold;
}
#view-project img{
width: 15px !important;
margin: 0 0 0 5px !important;
padding: 0 !important;
float: none !important;
}
/* Intro Section */
#header-block{
padding: 140px 50px 140px 50px;
}
#extra-info{
margin-top: 40px !important;
font-size: 18px;
opacity: .4;
}
#extra-info p{
margin: 0;
padding: 0;
}
#extra-info a{
font-family: "Tisa W01 Medium", serif;
}
/* Glofox Section */
#glofox-block{
background-color: #2b4ea4;
height: 800px;
}
#glofox-block #number{
opacity: .2;
font-family: "Tisa W01 Regular", serif;
margin-bottom: 20px;
}
#glofox-block img{
z-index: 1;
width: 740px;
float: left;
margin-top: 60px;
}
#glofox-block .container #text{
position: relative;
top: -790px;
z-index: 2;
float: right;
width: 350px;
color: white;
float: right;
}
#glofox-block #view-project a{
color: white;
border: none;
}
/* Webfaction Section */
#webfaction-block #ipad{
z-index: 1;
width: 795px;
position: relative;
top: -100px;
}
#webfaction-block h1{
width: 750px;
}
#webfaction-block #text{
z-index: 2;
}
In order to fix this you need to add the following line to your CSS:
white-space: nowrap;
Please familiarise yourself with CSS whitespace parameters.
https://www.w3schools.com/cssref/pr_text_white-space.asp
Ok someone help me with creating my first website. The problem is that the stylesheet only applies partly.
My body
<div class="top1">
<h1 align="left" class="1logo">La Di Da DI</h1>
<h1 align="left" class="2logo">we likes to party</h1></div>
</body>
My stylesheet
html, body {
margin: 0px;
padding: 0px;
outline-offset: 0px;
background-color: #FFEAE5;
}
.mainTitle{
display: inline;
}
.2logo {
display: inline;
color: #FFEAE5;
font-size: 18px;
font-style: italic;
}
.1logo {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline;
color: #FFEAE5;
}
.top1 {
padding: 5px;
padding-top: 3px;
padding-left: 25px;
background-color: #F87666;
}
Stylesheet link
<link href="main.css" content"text/css" rel="stylesheet">
Using a number at the starting of the class is not a good practice because it takes a different approach to apply css to that kind of class...
Try to remove the numbers from the starting and put it at end like:
HTML
<div class="top1">
<h1 align="left" class="logo1">La Di Da DI</h1>
<h1 align="left" class="logo2">we likes to party</h1>
</div>
CSS
html,
body {
margin: 0px;
padding: 0px;
outline-offset: 0px;
background-color: #FFEAE5;
}
.mainTitle {
display: inline;
}
.logo2 {
display: inline;
color: #FFEAE5;
font-size: 18px;
font-style: italic;
}
.logo1 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline;
color: #FFEAE5;
}
.top1 {
padding: 5px;
padding-top: 3px;
padding-left: 25px;
background-color: #F87666;
}
If you are looking for a solution that how to apply css to class that starts from a number see this answer
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'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