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.
Related
Update: the page URL is https://nuclearterrortoday.org/test/pledge.php - if you inspect on mobile, you'll notice the navbar doesn't take the full width of the page, though inspector says the width is 100vw
Stylesheets (in cascading order - some elements may be overridden in forms.css):
https://nuclearterrortoday.org/test/style.css
https://nuclearterrortoday.org/test/forms.css
I have a website with a nav bar that's standard across the site. On one page, the nav bar only covers approximately 90% of the width of the screen, leaving a gap on the right side. There's an additional stylesheet styling the affected page, but nothing affecting any nav elements or the page itself (ie changing the body's width). Resetting HTML, body, topnav, and .pledge-bg (custom body class) has no effect.
That said when using js to change the display of a child element of .topnav for the mobile menu, the width of .topnav changes to the width of the screen as intended.
On every other page, .topnav takes 100% of the screen width. The HTML structure where the header is included is identical.
CSS:
/*left:0 and right: 0 per #Magnus Eriksson*/
var myLinks = document.getElementById("myLinks");
if (myLinks.style.display !== "block") {
myLinks.style.display = "block";
} else if (myLinks.style.display == "block") {
myLinks.style.display = "none";
}
html {
left: 0;
right: 0;
width: 100%;
width: 100vw;
}
body {
left: 0;
right: 0;
width: 100%;
width: 100vw;
}
.topnav {
left: 0;
right: 0;
position: fixed;
top: 0;
width: 100%;
width: 100vw;
height: 10%;
height: 10vh;
background-color: rgba(169, 169, 169, 0.75);
color: white;
font-size: 5rem;
padding-bottom: 0;
margin-bottom: 0;
overflow: hidden;
}
#topnav {
left: 0;
right: 0;
width: 100%;
width: 100vw;
}
.topnav #myLinks {
left: 0;
right: 0;
z-index: 999;
display: none;
height: 100%;
height: 100vh;
width: 100%;
width: 100vw;
z-index: 11;
background-color: rgba(148, 181, 201, 0.9);
color: white;
}
.pledge-bg {
left: 0;
right: 0;
background: url(img/ocean-nuke.jpg) no-repeat center center fixed;
background-color: rgba(0, 0, 0, 0.5);
z-index: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
width: 100vw;
}
<script src="https://nuclearterrortoday.org/test/swap.js"></script>
<body>
<!-- <?php include "../../inc/header.php" ?>
-->
<!-- Top Navigation Menu (header.php:)-->
<div class="topnav" id="topnav">
<div id="myLinks">
menu
</div>
</div>
<div class="main">
<div class="main-header">
<h1 id="vision">Miracles Have Been Created in The Past</h1>
<p id="main1">10/10/1963 - We no longer test nukes in the ocean or atmosphere!</p>
<img onclick="animateSlide('left')" class="control" id="lControl" src="img/leftArrow.png">
<img onclick="animateSlide('right') " class="control" id="rControl" src="img/rightArrow.png">
</div>
</div>
</body>
Instead of using width: 100vw on #topnav just use width: 100%. Also if you define two values for one property the last one will override the first one so don't do that.
Remove width: 100vw and width: 100% from .topnav as id topnav already got the precedence over class topnav so width applied on .topnav will never apply.
Also, remove all the styling from the body. left and right will not work on body tag as it's position is static. Also, body by default take 100% width you just need to remove default margin which browser applies on the body tag:
body {
margin: 0;
}
Also, remove all the styling from HTML tag reason is same I mentioned for body tag above.
The right arrow for your image slideshow is causing the position of your nav menu to be thrown out. The right arrow is currently coded to display at -5% on an iphone screen) and it is the css includes position:absolute. There is currently no media query to handle resize for devices under iPad size, so on mobile phones, the main div, containing the slideshow + arrows, is impacting the nav menu; this is causing the a negative 'shift'.
The issue could most likely be resolved by moving the div containing the arrows further down on mobile devices using media queries.
Hope this helps
Actually this problem is because of the element with the class .top-bar.
Since your .topnav is having
.topnav {
position: fixed;
}
You need to give some position style to your .top-bar and that can be
.top-bar {
position: fixed;
}
OR
.top-bar {
position: absolute;
}
And then you can handle the display property for your text which I think is the Heading or Logo of the website.
Here is the screenshot of my modifications.
screenshot with the required changes
I hope this will help you with your problem.
To use width, you need to make the element block or inline-block For example:
.topnav {
display: inline-block !important;
left: 0;
right: 0;
position: fixed;
top: 0;
width: 100vw !important;
height: 10%;
height: 10vh;
background-color: rgba(169,169,169, 0.75);
color: white;
font-size: 5rem;
padding-bottom: 0;
margin-bottom: 0;
overflow: hidden;
}
You can fixed in two way first way is trick way and second way is right way.
First way,
Remove width: 100vw; from #topnav and .topnav.
Second way,
Your navbar is fine and working correctly.But your some element's
are wrong.When you use vw for width.You should careful.Your all
elements total width must be maximum 100%.I mean total width is
"width + left + right".You should check and recalculate for total width for every
width.
Solution for second way::
.main-header{
min-width: 95%;
}
.form{
width:95%;
}
On the page with the navigation bar error where there is a big gap
add some inline style with the <style> tag inside the 2 <head> tags
and try margin-top: -150px;
If it works but not enough increase the negative amount of pixels.
This is not enough information to debug this issue. The code you provided works fine in a Codepen (topnav is full width). There is some additional stylesheet or markup affecting your layout, and without that, this question cannot be answered.
The only thing I noticed is topnav does not have a left: 0; style, resulting in a small whitespace on the left side, but I am not sure if that is the issue you are referring to as it is much smaller than a 10% gap.
I have a basic static S.P.A. that I've gotten styled the way I want when developing on a laptop. When I test on a mobile viewport and scroll up or down the images/content resize. I believe that is built into the chrome mobile browser but I'm wondering if there may be a way to disable or to style around this? A few of the sections of content utilize full background images with text overlaid on top. When the user scrolls and the image resizes it pushes the content into the next section vs. having a clean ending point. I know it's possible because I use mobile pages all the time that don't have this issue. I just don't know how to do it.
.landingImage {
width: 100vw;
height: 100vh;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/6f/Black_gram.jpg');
background-position: right;
background-size: cover;
margin-left: auto;
margin-right: auto ;
}
.titleContainer {
position: absolute;
width: 85vw;
height: 75vh;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 2px solid white;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 16vw;
color: white;
text-shadow: 1px 1px black;
}
.titleText {
margin-top: 10px;
margin-left: 10px;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="landingImage">
<div class="titleContainer">
<h1 class="titleText">SHIFT<br>WORKS<br>BICYCLE<br>OPERATIONS</h1>
</div>
</div>
One issue I can see is that the landingImage and titleContainer divs have their heights set relative to the viewport width, e.g.
.landingImage {
...
height: 100vh;
...
}
This means that if the viewport is say 400px wide, the .landingImage div will be 400px high, and this may not be enough.
One option is to use #media queries in you CSS and refine the height of these divs based on the viewport width. e.g.
#media screen and (max-width: 480px) {
.landingImage {
height: 200vh;
}
}
Another possibility is that in your existing CSS you add rule so that the div doesn't shrink below a certain minimum, e.g.
.landingImage {
...
min-height: 800px
...
}
You can set any number of #media media statements and refine the settings to match the specifics of your page.
Good luck!
I have an image with width 100% so that it enlarges with the window's size. How can I place texts over it so that they enlarge in the same proportion as the image does?
HTML:
<div class=instructables>
<h1>
I N S T R U C T A B L E S
</h1>
<img src="http://i.imgur.com/QvCRbHp.jpg" width="100%"/>
<div class=projects>
9
</div>
</div>
CSS:
.instructables {
margin-top: 150px;
margin-bottom: 200px;
margin-left: 150px;
margin-right: 150px;
letter-spacing: 2px;
line-height: 2;
font-size: 15px;
position: relative;
}
.projects{
position: absolute;
top: 140px;
left: 285px;
font-size: 350%;
font-family: Georgia, Serif;
color: #424242;
}
I tried using position: absolute; and obviously it doesn't work as the text just stay in the same place even if the image is enlarged.
Thank you!
Update: So basically I have this section on my website
http://i.imgur.com/q5kaxMM.png
with a jpg (robot and words) and numbers. When I enlarge the window, the jpg enlarges, but the numbers stay the same (in terms of size and position)
http://i.imgur.com/4nhdnl2.png
My goal is to make the entire section looks exactly the same as the 1st image, no matter how I enlarge the window.
Definitely need some media query love here. I'd suggest starting with some basic styles and add as needed. These can get you started, you can add as many as you like and adjust as you like.
#media screen and (max-width: 480px) {
.projects {font-size: 15px;}
}
#media screen and (min-width: 800px) {
.projects {font-size: 25px;}
}
#media screen and (min-width: 1200px) {
.projects {font-size: 40px;}
}
You were quite close with the position: absolute;. I think the best you can do, is position the text (.projects) with percents. That's way it's not locked on a fixed, pixel position.
Have a look: https://jsfiddle.net/v1u01md3/1/
It's not foolproof, for example when you make the screen really small. But that could be fixed with some media queries.
Have you tried using mediaqueries to adjust your text position/size?
Here is a good overview: https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries
You can use background-image instead img and put a text over without position: absoulte like this:
#wrapper {
position: relative;
width: 100%;
height: 300px;
background: url('path/to/img') no-repeat top;
background-size: cover;
text-align: center;
}
jsFiddle
The idea to make that work is that you have to include inside an element with position relative all elements with position absolute.
Here is a working example modifying your code. HTML here:
<div class="instructables">
<div class="projects">
<h1>
I N S T R U C T A B L E S
</h1>
<img src="http://i.imgur.com/QvCRbHp.jpg" width="100%"/>
<span>9</span>
</div>
</div>
and the CSS here:
.instructables {
letter-spacing: 2px;
line-height: 2;
font-size: 15px;
position: relative;
}
.projects{
position: absolute;
top: 140px;
left: 285px;
font-size: 15px;
font-family: Georgia, Serif;
color: #424242;
}
h1
{
position: absolute;
}
span
{
position: absolute;
}
I'm creating a basic contact page for my website. I'm struggling to get it looking good in varying resolutions.
My laptop is 1368x766 and my monitor is 1920x1080.
The elements that set to absolute are moving around, the top image isn't moving...all other elements are moving... I'm so confused:
CSS:
body {
text-align: center;
background: url("http://i.imgur.com/JN0YSkP.png");
background-repeat: repeat;
background-position: center;
color: white;
font-family: 'Roboto', sans-serif;
padding-top: 20px;
padding-bottom: 0px;
}
p {
position: absolute;
top: 225px;
right: 410px;
font-size: 32px;
}
p2 {
position: absolute;
top: 420px;
right: 974px;
font-size: 28px;
}
p3 {
position: absolute;
top: 420px;
right: 570px;
font-size: 28px;
}
p4 {
position: absolute;
top: 420px;
right: 142px;
font-size: 28px;
}
.LI
{
display: inline-block;
position: absolute;
z-index : 2;
top: 510px;
right:1050px;
}
.CV
{
display: inline-block;
position: absolute;
z-index : 2;
top: 490px;
right: 620px;
}
.mail
{
display: inline-block;
position: absolute;
z-index : 2;
top: 510px;
right: 196px;
}
.Divider
{
position: absolute;
z-index: 1;
top: 380px;
right: 28px;
padding-bottom: 20px
}
html { -webkit-font-smoothing: antialiased; }
HTML:
<!DOCTYPE html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<title>Benjamin Edwards | Web Designer | West Sussex</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Benjamin Edwards is a Web Designer and IT Project Manager from West Sussex. Say hello!">
<meta name="keywords" content="benjamin, edwards, IT, project, manager, photoshop, web, designer, worthing, west sussex">
<meta name="robots" content="INDEX,FOLLOW">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src="http://i.imgur.com/6gBN3LF.png">
<p>Hi! I’m Benjamin, a Worthing based</br>Web Designer and IT Project Manager.</p>
<p2>Connect on LinkedIN:</p2>
<div class="LI">
<a href="https://www.linkedin.com/in/benjaminedwards86">
<img src="http://i.imgur.com/KEqGBV3.png">
</a>
</div>
<p3>Download my CV:</p3>
<div class="CV">
<a href="https://www.dropbox.com/s/9jtsjxpb9xqdpdw/Benjamin%20Edwards%20-%20CV.docx?dl=1" download="benjamin-edwards-CV.doc">
<img src="http://i.imgur.com/ce0Zzgi.png">
</a>
</div>
<p4>Send me an email:</p4>
<div class="mail">
<a href="mailto:benjamin.edwards86#gmail.com">
<img src="http://i.imgur.com/KQV7Eip.png">
</a>
</div>
<div class="Divider">
<img src="http://i.imgur.com/B4TiKRT.png">
</div>
</body>
JSFiddle
As exmaple how simple it can be for you, i created a jsfiddle:
JSFiddle
HTML
<img src="http://i.imgur.com/6gBN3LF.png">
<p>Hi! I’m Benjamin, a Worthing based</br>Web Designer and IT Project Manager.</p>
<ul>
<li><h1>Connect on LinkedIN:</h1>
<a href="https://www.linkedin.com/in/benjaminedwards86">
<img src="http://i.imgur.com/KEqGBV3.png">
</a>
</li>
<li><h1>Download my CV:</h1>
<a href="https://www.dropbox.com/s/9jtsjxpb9xqdpdw/Benjamin%20Edwards%20-%20CV.docx?dl=1" download="benjamin-edwards-CV.doc">
<img src="http://i.imgur.com/ce0Zzgi.png">
</a>
</li>
<li><h1>Send me an email:</h1>
<a href="mailto:benjamin.edwards86#gmail.com">
<img src="http://i.imgur.com/KQV7Eip.png">
</a>
</li>
</ul>
CSS
body {
text-align: center;
background: url("http://i.imgur.com/JN0YSkP.png");
background-repeat: repeat;
background-position: center;
color: white;
font-family: 'Roboto', sans-serif;
min-width: 900px;
}
img {
margin: auto 20px;
}
ul {
height: 275px;
width: 80%;
margin: 10% auto;
border: 3px solid #31C2A9;
min-width: 900px;
}
ul li {
float: left;
width: 33%;
border-right: 1px solid #31C2A9;
list-style-type: none;
height: 275px;
min-width: 275px;
}
ul li:last-child {
border-right: none;
}
You get rid of all the css selectors and simplify your code :-)
And there is no single position absolute ;-)
Its always wise to make a fiddle about the problem you are having.
Coming to the issue about elements moving around, Its because you have absolutely placed ALL the elements and hard coded the values. Like:
p {
position: absolute;
top: 225px;
right: 410px;
font-size: 32px;
}
Since at different browser sizes, the resolution changes and so does the placement of the divs, your elements are moving awry ( Since you have absolutely positioned them only to ONE browser dimension.
So what you should do:
First, you should make sure you understand when should a div be absolute and when should it be relative.
I'll give a thumb rule: If you want to position an element with respect to a div. Make it position absolute and its parent, position: relative.
You could make your website responsive using Bootstrap. But you could also give measurements in % and prevent distortions.
If I am to do one:
p3 {
position: absolute;
top: 20%;
right: 30%;
font-size: 1.1em;
}
If you dont exactly know whats happening, you should spend time studying %, em measurements etc.
If you can create a fiddle and show your code, We can help you fix it.
You can use CSS media queries for this.
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen).
With media queries, we'll take this to a new level. Rather than looking at what device it is, we will look at what capabilities the device has. More specifically, we will look at the following:
height and width of the device height and width of the browser
screen resolution orientation of the device (for mobile phones and
tablets; portrait or landscape)
CSS2 allows you to specify stylesheet for specific media type such as screen or print.
Now CSS3 makes it even more efficient by adding media queries.
You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices.
It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content.
Example:
The following CSS will apply if the viewing area is smaller than 600px.
#media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
If you want to link to a separate stylesheet, put the following line of code in between the <head> tag.
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
Multiple Media Queries:
You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.
#media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Device Width:
The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.
#media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
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.