I'm trying to create my first website manually, and I have a few questions on how to do things. Please note I want to accomplish this in pure HTML5, no JS. All I have right now is a navigation header, which should stay fixed at the top of the page no matter how far one scrolls. However, in order to get an image to respect this header size, I've had to resort to using css in the following manner:
main {
position: absolute;
top: 60px;
z-index: -1;
}
Is there a a more elegant way to accomplish this? Additionally, is there a more relative way to accomplish spacing than using px? I know about rem for font, but is there anything similar for spacing? My reading indicates that retina screens honor a 2px conversion, but what about 4k screens?
Also, how do I center text vertically in the header spacing?
Lastly, how do I reference a locally installed font on a person's desktop, hopefully negating the need to download a font from the server?
css3
* { all: unset }
#font-face {
font-family: 'biolinum';
src: url('LinBiolinum_R.woff'),
local('Linux Biolinum O');
}
.logo {
float: left;
height: 50px;
padding: 5px;
}
.image {
height: auto;
width: 100%;
background: black;
}
header {
position: fixed;
height: 60px;
width: 100%;
background: white;
}
main {
position: absolute;
top: 60px;
z-index: -1;
}
nav {
list-style-type: none;
float: right;
font-family: 'biolinum';
font-size: 1.25rem;
color: #465053;
text-transform: uppercase;
}
p {
font-family: 'biolinum';
font-size: 1rem;
color: #465053;
text-align: justify;
}
title {
display: none;
}
html5
<title>Title</title>
<link rel='icon' href='images/logo.svg'>
<link rel='stylesheet' href='css/style.css'>
</head>
<body id='index' class='home'>
<header>
<a href='#'>
<img src='images/name.svg' class='logo'>
</a>
<nav>
<a href='index.html'>about</a>
<a href='#'>design</a>
<a href='#'>analysis</a>
<a href='#'>contact</a>
</nav>
</header>
<main>
<img src='images/temp.png' class='image'>
<img src='images/temp.png' class='image'>
<img src='images/temp.png' class='image'>
<img src='images/temp.png' class='image'>
</main>
</body>
</html>
I'm trying to create my first website manually, and I have a few questions on how to do things. Please note I want to accomplish this in pure HTML5, no JS. All I have right now is a navigation header, which should stay fixed at the top of the page no matter how far one scrolls. However, in order to get an image to respect this header size, I've had to resort to using css in the following manner:
Is there a a more elegant way to accomplish this?
Another way to do it is like this:
body
{
overflow: hidden;
}
header {
height: 20vh;
}
main {
height: 80vh;
overflow: scroll;
}
Whether you think that is more or less elegant is up to you.
Additionally, is there a more relative way to accomplish spacing than using px? I know about rem for font, but is there anything similar for spacing? My reading indicates that retina screens honor a 2px conversion, but what about 4k screens?
You can use "vh" as I did above, which is percentage of viewport height.
Also, how do I center text vertically in the header spacing?
nav {
text-align: center;
}
This will center the text within the nav.
Lastly, how do I reference a locally installed font on a person's desktop, hopefully negating the need to download a font from the server?
p {
font-family:"Times New Roman";
}
If it is installed on the users desktop you should be able to reference it like this.
Related
So im fairly new to HTML and CSS and coding in general(C# and C++) and ive been working on a website just for fun. I've mostly learned as i've gone along and im proud of what I have so far even though it isnt much. But I have a problem where whenever I open the site on my laptop which has a smaller screen than my PC or whenever I resize the browser the whole page messes up and text is on top of each other and the background image is smaller with white space all around. I've searched a lot and it seems like everyone has a unique fix for it and none have worked for me. Here is my code:
HTML:
<!doctype html>
<html>
<head>
<title>Trendy</title>
<link rel="icon" type="image/png" href="Images/TitleIcon.png" />
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body>
<div class="container">
<h1 class="index-h1">Trendy</h1>
<nav>
<ul>
<li>SIGN UP</li>
<li>LOG IN</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</body>
</html>
CSS:
html {
margin: 0;
padding: 0;
width: 100%;
}
body {
margin: 0;
padding: 0;
width: auto;
height: auto;
background: url(Images/BFG.png);
background-position: top;
background-repeat: no-repeat;
display: block;
}
.index-h1 {
color: #fff;
font-family: "Broadway Flat";
font-size: 100px;
position: absolute;
left: 70px;
top: -30px;
}
.container {
width: 80%;
margin: 0 auto;
}
nav {
position: absolute;
left: 60%;
top: 5%;
}
nav ul {
list-style: none;
}
nav ul li {
list-style: none;
display: inline-block;
color: #fff;
font-family: "Broadway Flat";
font-size: 30px;
padding: 10px 50px;
position: relative;
}
nav a {
color: #fff;
text-decoration: none;
}
nav a:hover {
color: #e02626;
}
nav a::before {
content: '';
display: block;
height: 5px;
width: 100%;
background-color: #e02626;
position: relative;
top: 0;
width: 0%;
transition: all ease-in-out 150ms;
}
nav a:hover::before {
width: 100%;
}
I'm not sure what it is supposed to look like but I think you're just needing to supply some responsive code like this:
#media only screen and (max-width: 800px) {
h1.index-h1 {
max-width: 55%;
overflow: hidden;
}
}
Generally, avoiding absolute positioning as much as possible is a good idea. Instead of using that, you can use a float for your nav, and as space runs out it will push to the next line.
Or you can use the responsive code above to change it to not float on small device sizes, and instead by displayed block.
If you are instant on using the absolute positioning, consider what you're saying in the code. You're putting a left:60% on the nav, which means you know that the 60% area to the left of it will be blank. So maybe the title should be max-width 60% (or a little less for some padding) and made to shrink a bit as the monitor size shrinks.
Overall, I'd say reconsider your decision to absolute position, and a lot of the answers out there will be more universal to you.
You could use media queries to design your site for smaller screens.
For instance, you can define CSS which only applies if the viewport width is smaller than x.
This example sets the font size to 9pt for a viewport less wide than 400px:
#media (max-width: 400px) {
body {
font-size: 9pt;
}
}
After lots of trial and error, I realized the text was fine and it was the background that had the issue of not scaling with the browser, so i managed to fix it by doing this:
body {
background-image: url(Images/BFG.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
when i was learning HTML and CSS too it was hard specially the positioning. what helps me is using media queries with this link. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
try using that. and make sure you start on mobile first. if you're using google chrome check dev tools and on top left toggle device to resize the screen size it will help you. then make sure you media queries are min-width since you started at a mobile screen.
I am trying to center some text within a banner (classic question I know). This banner is split into 12 columns, and there is a cross icon for closing the window in the left-most column. The text is centering in the available space between the cross icon and the end of the banner, rather than centering within the whole banner width. From the way the code is written I cannot see why it would be doing this. Here's the HTML:
<div class='col-xs-12 banner'>
<a class="navbar-brand cross-link" href="" ng-click="close()">
<img class="cross" src="/components/cross.png" alt="close">
</a>
<h1>{{title}}</h1>
</div>
with CSS:
.banner {
height: 70px;
background-color: red;
h1 {
color: white;
text-align: center;
}
.navbar-brand {
&.cross-link {
padding: 0px;
img.cross {
margin: auto;
width: 70px;
height: 70px;
padding: 29px 28px 27px 28px;
}
}
}
When I inspect this on Chrome, the h1 is quite happily sitting within a full-width container as expected, but the image appears to be shifting it across so that it doesn't center properly. Can you see how to resolve this?
Thanks
You could set the .cross-link to absolute position. Remember to set the container position property to a value different from "static":
.container{ position: relative; }
.cross-link{ position: absolute; left: xxxx; top: xxxx; }
What you are missing is a closing } at the end of your .banner block OR at the end of the css you shared.
This is my first week of programming in CSS, HTML and PHP. I realized when beginning my site that when I scaled my site by window size that all the text would begin to overlap, cause issues and look terrible.
I was wondering if I could get a clear answer on what I am doing horribly wrong. I have tried methods such as media queries but I still don't understand it at all.
Here is my code:
/* Reset body padding and margins */
body {
margin: 0px;
padding: 0px;
}
/* Make Header Sticky */
#header_container {
background: black;
border: 1px solid #666;
height: 40px;
left: 0;
position: fixed;
width: 100%;
top: 0;
}
#header {
line-height: 5px;
margin: 10px;
auto: width:940px;
text-align: left;
}
#headertext {
font-family: "sans-serif";
size: 20px;
padding: 2px;
font-size: 120%;
text-decoration: none;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin: auto;
overflow: auto;
padding: 80px;
width: 100%;
height: auto;
}
#content {}
/* CSS FOR HOME PAGE CONTENTS */
#hometext {
font-family: "arial";
padding: 1px;
font-size: 100%;
text-decoration: none;
position: absolute;
top: 5em;
left: 4em;
color: #585858;
margin-right: 850px;
}
#hometext2 {
font-family: "arial";
padding: 10px;
font-size: 80%;
text-decoration: none;
position: absolute;
top: 7em;
left: 4.24em;
color: #585858;
margin-right: 1200px;
}
#hometext3 {
font-family: "arial";
padding: 1px;
font-size: 100%;
text-decoration: none;
position: absolute;
top: 5m;
left: 65em;
color: #585858;
margin-right: 0;
}
#hometext4 {
font-family: "arial";
padding: 18px;
font-size: 80%;
text-decoration: none;
position: absolute;
top: 10m;
left: 80em;
color: #585858;
margin-right: 0;
}
#home_container
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<title>replay.sc</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
a:link {
color: grey;
}
a:visited {
color: grey;
}
a:hover {
color: white;
}
a:active {
color: grey;
}
text-decoration: none;
}
}
</style>
</head>
<body font="sans-serif" id="container">
<!--- BEGIN: STICKY HEADER -->
<div id="header_container">
<div id="header">
<p><a id="headertext" a href="replay.sc"> replay.sc </a>
<p>
</div>
</div>
<!-- END: STICKY HEADER -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
</div>
</div>
<!-- END: Sticky Footer -->
<div id="home_container">
<h1 id="hometext"> Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
<p id="hometext2"> When the page is generated you will have the option to select which information on the replay you want to display to the public, if you are logged in you will be able to edit this in the future.</p>
<h1 id="hometext3"> Upload a replay pack here to generate a page containing download links for every replay or for a .rar file of every replay. </h1>
<p id="hometext4"> Only basic information for each replay will be made to conserve server load. </p>
</div>
</body>
</html>
You're mixing relative and absolute measurements incorrectly. If you are beginners, I would recommend sticking to one model of measurements first and gradually learn how to use the others.
For example, the Stack Overflow is absolutely positioned; if you resize the browser window, nothing will resize. A relatively positioned webpage can adapt the content to the available window size. The JSFiddle site is relatively positioned; it always utilizes the entire window size.
Both model of measurements can produce a good websites, but to produce a successful website though, you have to be intimately familiar with both methods of positioning and how to mix them to produce various effects when used in the same page.
Many people consider absolute positioning to be easier to visualize for beginners; although it has its limitations if you want to create more advanced layouts that works well across widely different screen sizes.
If you want to start with absolute positioning, you first start by deciding a certain width for the overall page. Many people uses a fairly narrow number of pixels that have a large number of even divisibility like 960px or 800px. To make a simple absolutely positioned site, you need to:
Set position: absolute on most things.
Set any two of: top, bottom, or height.
Set any two of: left, right, or width.
Everything on the page should use the same measurement unit (e.g. px)
For example (edit on jsfiddle or full screen):
#hometext{
font-family: "arial";
font-size: 100%;
text-decoration: none;
color: #585858;
position: absolute;
top: 80px;
left: 60px;
width: 335px;
height: 60px;
line-height: 20px; /* this ensure that 3 lines of text sums up to 3*20px=60px */
}
The drawback of absolutely positioned website is apparent if you try to zoom the site or if your users use a different window size (they'll either have lots of wasted space or have to scroll horizontally. With pure absolute positioning, the website essentially becomes like a static image.
A more modern best practice is to use floated positioning to produce a responsive or elastic website. For this, you need to understand how to float elements and the various layout algorithms. To produce an elastic website you'll need:
use percent unit for most things
utilize the margins and paddings judiciously
utilize the various layout algoritms
For example (edit in jsfiddle or fullscreen). Understanding the various layout algorithm admittedly can be quite difficult, but you will eventually get it naturally if you keep using it for various different layouts.
Try my css .. use a container to hold everything when re size container will do the trick.. try to copy my codes it has a container css .. and it controls overlap see .
The containe most be relative to it wont overlap;; hope it help
see how #advertisement css id do the trick
<html>
<body>
<div id = "container">
<div id="advertisement">
<img src="Desert.jpg" width="200px" height="200px">
</div>
<div id="transparent">
<img src="black.jpg" width="200px" height="200px">
</div>
<div id="regularborder">
<img src="Desert.jpg" width="200px" height="200px">
<img src="Desert.jpg" width="200px" height="200px">
<img src="Desert.jpg" width="200px" height="200px">
</div>
</div>
</body>
</html>
<style>
#container{
position:relative;
}
#advertisement{
z-index:-1;
border-left: solid;
}
#transparent
{
opacity:0.4;
filter:alpha(opacity=40);
position:absolute;
left:0px;
top:0px;
}
#regularborder{
border-style:solid;
}
</style>
Try something like this in your CSS.
#wholepage { position:absolute; margin:0px; width:100%; }
if you want responsive then try like this
CSS
.header{background-color:#000;color:#fff;width:100%;min-height:40px;}
a{color:#fff;font-size:120%;line-height:2em;margin:10px;}
h1{ color: #585858; font-family: "arial";font-size: 100%;line-height: 20px;}
p{margin-top:1em;font-family: "arial";font-size:80%;color:#585858;}
.table{display:table;width:55%;margin:0 auto;}
.row{display:table-row;}
.cell{display:table-cell;padding:2em;width:50%;}
HTML
<div class="header">
replay.sc
</div>
<div class="table">
<div class="row">
<div class="cell">
<h1> Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
<p> When the page is generated you will have the option to select which information on the replay you want to display to the public, if you are logged in you will be able to edit this in the future.</p>
</div>
<div class="cell">
<h1> Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
<p> Only basic information for each replay will be made to conserve server load. </p>
</div>
</div>
</div>
Set content's margin,padding as you like
You can use vw and vh units:
font-size: 1vw /* = 1% of viewport width */
font-size: 1vh /* = 1% of viewport height */
font-size: 1vmin /* = 1vw or 1vh, whichever is smaller */
font-size: 1vmax /* = 1vw or 1vh, whichever is larger */
Reference:
Viewport Sized Typography
True responsiveness can only truly be achieved if you want the behavior of your content to be predictable. Thus you could apply media queries to your website for specific sizes of the screen. #media screen and {max-width:400px}{.....} this simply means at a maximum width of 400px, treat the content like this. So your contents behavior will be included in the {....}. That will leverage you the time to try multiple browsers apart from Internet Explorer and there's one solution for this:
IE8 - I think doesn't support media queries so you'll just have to add a JavaScript file called respond.js from their developer website.
Reference:
W3C media queries and their standards
I'll start by saying that I am very very new to web development as a whole and that this is my very first responsive site so please be gentle and bear this in mind, I am the definition of the word noob at this stage. Having searched for an answer for a while and having no luck I'm hoping that someone here could help me out.
I'm trying to make a homepage for this website. The design is simply a block down the left hand side of the page showing the logo at the top and then a series of links underneath, all of which is on the same background. To the right of this is one big image which fills the rest of the screen. I want the whole page to fill the browser window of whatever device it is viewed on so absolutely no scrolling is necessary, i.e. width and height both 100% of the viewport. The width of the page is giving me no grief at all, sweetly adjusting to different screen sizes as I want it, with the sidebar at 20% of the width and the main image at 80%.
The height is a different story however. I can't seem, in any combination of CSS I've tried so far, to be able to get the height to behave at 100% of the viewport. Either the sidebar is too short and the main image is too long or both are too long etc etc. The main image I want to keep the aspect ratio of and just have it overflow it's div as required to keep most of it displayed and the side bar I just want to fit to 100% of the page height. Here is my code at present:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html
{
height: 100%;
margin: 0;
padding: 0;
}
body
{
height: 100%;
margin: 0;
padding: 0;
}
#page
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#sidebar
{
float: left;
width: 20%;
height: 100%;
padding-bottom: 10;
margin: 0;
background: url(/Images/bg.jpg);
}
#slideshow
{
float: right;
width: 80%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
#logoimg
{
width: 80%;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
}
#mainimg
{
width: 100%;
overflow: hidden;
}
.link
{
font-family: courier;
font-size: 1.3em;
text-align: center;
padding-top: 7%;
padding-bottom: 1%;
color: rgba(255,255,255,1.00);
}
#font-face
{
font-family: courier;
src: url(/courier_new-webfont.ttf);
src: url(/courier_new-webfont.eot);
src: url(/courier_new-webfont.woff);
}
</style>
</head>
<body>
<div id="page"><!--Whole page container-->
<div id="sidebar"><!--Side bar container-->
<div class="link" id="logo"><img id="logoimg" src="/Images/logo.png"></div>
<div class="link" id="homelink">Home<!--Home link--></div>
<div class="link" id="aboutlink">About<!--About link--></div>
<div class="link" id="gallerylink">Gallery<!--Gallery link--></div>
<div class="link" id="priceslink">Prices<!--Prices link--></div>
<div class="link" id="reviewslink">Reviews<!--Reviews link--></div>
<div class="link" id="contactlink">Contact<!--Contact link--></div>
<div class="link" id="clientslink">Clients<!--Clients link--></div>
</div>
<div id="slideshow"><img id="mainimg" src="/Images/main.jpg"><!--Image slideshow container-->
</div>
</div>
</body>
</html>
Any help with this would be really appreciated and don't hesitate to point out any massively amateur mistakes. I'm willing to take any criticism and learn from it. Thanks
Here’s just a simplified code example of the HTML:
<div id="welcome">
your content on screen 1
</div>
<div id="projects">
your content on screen 2
</div>
and here’s the CSS using vh:
div#welcome {
height: 100vh;
background: black;
}
div#projects {
height: 100vh;
background: yellow;
}
From Here: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/
It works for me.
I have made you a basic set up to show how you would style this. The best way that I have found to set the height to 100%is with the use of jQuery/Javascript. You can find the height of the window and then input that into the css with the use of it.
The way this works is the var wH = $(window).height(); is finding the height and turning that into a number. Then when you use $('.sideBar').css({height: wH}); you are inputing the height into the css of sideBar.
jQuery
function windowH() {
var wH = $(window).height();
$('.sideBar, .mainImg').css({height: wH});
}
windowH();
This function I wrote is giving those two elements the height of the window. This will allow those two elements to be 100% of any browser's window.
I also recommend turning that nav into a ul which I included in the fiddle to show how that is possible.
JSFIDDLE (Remove 'show' at the end of the url to see code)
The next thing you will need to research is media queries to adjust the content to adapt better to mobile devices. Consider changing the sideBar to a horizontal nav when on mobile devices.
If you want a pure CSS only approach then you can do something like this,
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
By adding height&width to 100% in your html/body you can then use height: 100% on other elements to fill the entire page.
Refer to this JSFIDDLE to see how it works.
Helpful read about responsive web design
On Chrome, just adding display: flex on the body is enough.
On Firefox, you must add height: 100vh to get the desired result. And a margin: 0 will get rid of the annoying scroll bars.
<body style="display:flex; height: 100vh; margin: 0;">
<div style="background-color: red; flex:1;"></div>
<div style="background-color: green; flex:2;"></div>
<div style="background-color: blue; flex:1;"></div>
</body>
Sample code for exact Covering the page height.
HTML
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
Main content
</div>
</div>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container {
max-width: 1020px;
margin: auto;
height: 100%;
background: #ddd;
padding:16px;
box-sizing:border-box
}
.header,.content{
background:#fff;
padding:16px
}
.content{
margin-top:16px;
min-height:calc(100% - 160px);
}
Example Link :
https://codepen.io/rahdirs/pen/jeRVod
I'm trying to learn HTML/CSS and JavaScript+jQuery by using Codeacademy and working on my own little project to practice. However, I am stuck with a very simple problem:
I want a parent div to be displayed across the entire page. I can do this successfully (see fiddler). When I resize the browser screen, however; my parent div no longer fits across the entire page, which causes its right most child div to be displayed outside of the parent div (see fiddler). Basically, I want my parent div to always wrap its child divs, and to always be displayed across the entire screen.
Fiddler Links:
Link 1
Link 2
Relevant HTML:
<div id="topnav">
<a id="logo" class="navlink clearfix">DreamTeam</a>
<a id="logo" class="navlink clearfix">Strikers</a>
<a id="logo" class="navlink clearfix">Midfielders</a>
<a id="logo" class="navlink clearfix"><div class="navlink clearfix">Defenders</a>
<a id="logo" class="navlink clearfix">Goalkeepers</a>
</div>
Relevant CSS:
/* ID FOR PARENT DIV */
#topnav {
position: relative;
background-color: #EDEDED;
height: 70px;
width: 100%;
white-space: nowrap;
}
#logo {
width: 300px;
font-weight: bold;
margin-left: 5px;
font-size: 28px;
height: auto;
}
#lastlink {
border: none;
}
/* CLASS FOR CHILD DIVS */
.navlink {
position: relative;
font-family: Century Gothic;
height: auto;
font-size: 24px;
text-align: left;
line-height: 65px;
width: 175px;
border-right: 1px solid #bdbdbd;
}
Any help would be appreciated. I've gone through many Google searches and other stackoverflow posts, but nothing seems to work for me unless I completely missed an appropriate post. Using things like "overflow: hidden" or creating a wrapper div didn't really work for me. Thank you in advance for any suggestions. It would be great if anyone could point me to an appropriate post that I might have missed too.
How about get rid of the div tag inside a tag. Because you can use class with a tag.
Look at the following example provided by StackOverflow user starx
CSS
a.divlink {
display:block;
width:500px;
height:500px;
float:left;
}
HTML
<div>
<a class="divlink" href="yourlink.html">
The text or elements inside the elements
</a>
<a class="divlink" href="yourlink2.html">
Another text or element
</a>
</div>
Click here for more details
I managed to find a solution to my problem. The problem was not my invalid markup; it was actually the CSS for my #topnav ID. Here's how I changed that ID to get the result I wanted:
#topnav {
background-color: #EDEDED;
height: 50px;
min-width: 1050px;
position: absolute;
left: 0;
right: 0;
top: 0;
}
The key changes are below the height property.