it would seem this question has been asked many times over different websites with no real "ah-ha!" answer. I'm still very new and I understand there's a million different ways to code this but I'm hoping for a very simple solution that won't require me to rewrite my code.
It's my understanding this is the inherent nature of parallax, people either have had to crop the images to make them work or have had to do very large workarounds to solve the issue that parallax inherently zooms in or messes with the dimension of the original picture, no matter the orientation on the page (in my case, I'd like to keep it on the left side of the screen, with the text on the right being the scrolling element, haven't gotten around to it but having the nav bar on the top right-half of the page is my next project).
The dimensions of the picture are 1341x2063; I've heard to people setting max-height 2063px; min-height 1341px;. Tried that, didn't work.
I threw up an imgur link for the actual picture I'm working with inside my code, here's a screenshot of what it's looking like on my end: https://imgur.com/lVrQgrQ
My html has my parallax's css inline and I'd like to keep it that way as it's easy for me to understand without having to rework a ton of items.
#charset "UTF-8";
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
button {
transition-duration: 0.4s;
background-color: #800080; /* Purple */
border: none;
color: white;
padding: 6px 38px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
}
button:hover{
background-color: #4CAF50; /* Green */
color: white;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<!-- Adding "active" class/tag to index, for navbar -->
<link href="index.html" class=active>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="Learn about Tom Waters, English tutoring services in Seoul, resume and more.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Me | Home</title>
<!-- GOOGLE FONTS
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
-->
<meta name="Generator" content="Cocoa HTML Writer">
<meta name="CocoaVersion" content="1671.6">
<style>
.parallax {
/* Image to be used */
background-image: url("https://imgur.com/a/FHtZqm7");
min-height: 600px;
/*scrolling effect*/
background-attachment: fixed;
background-position: left;
/*troubleshooting image width */
width: 50%;
height: 100%;
background-repeat: no-repeat;
background-size: auto;
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
*/
</style>
</head>
<body>
<div class="parallax"></div>
<div style="height:400px;background-color:lightgray;font-size:28px">
<center>
<nav>
<ul id="mainMenu">
<li>About Me</li>
<li>Tutoring Services</li>
<li>Resume</li>
<li>Photography Portfolio</li>
<li>Contact</li>
<li style="float:right"><a class="active" href="index.html">Home</a></li>
</ul>
</nav>
</center>
<br><br><br>
<p><center>
This is me,
<br><br>and this is a personal and professional website, designed solely by myself (as a personal project) with the aim of displaying my resume, contact information and other items in an accessible manner for interested parties to see.
</center></p>
</div>
</body>
</html>
When the background-attachment is set to fixed, it gets fixed relative to the viewport. This is to achieve the parallax effect. The browser does this while keeping the aspect ratio. So to prevent the looks of a stretched or zoomed image you can just crop your image or play around with the background-size css value.
.parallax {
background-size: 100% 65%;
}
The only setting you have to change is the second value, this will help you fix the stretchy or zoomed effect on the image, an other suggestion you might check is set background-size to cover.
Just to add, adding background-size: 'auto auto' worked for me. Having it set to 'cover' was causing a huge zoom effect. This fixed it.
Related
I created some social media icons on my website. My links are working fine on the desktop but nothing happens on tapping them in a mobile browser. Here is the website https://theopenbay.weebly.com and here is the code —
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
padding: 10px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none!important;
margin: 5px 2px;
border-radius:50%;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-telegram {
background: #30a2e7;
color: white;
}
.fa:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<!-- Add font awesome icons -->
</body>
</html>
and welcome to SO. I found the issue. The icons were blocked by the "navmobile" element. It covered the icons, so it wasn't possible to "press" the icons.
This was caused by the display block styling of that element. So by removing that you'll be able to make those icons clickable again.
your problem is, that div#navmobile is overlaping your footer, #navmobile has z-index:8, what you can do, is that you can change div#my-footer's position to relative and z-index higher than 8, here is the code (you should add to css):
#my-footer{position:relative; z-index:99}
I solved it by changing display: block to display: table which reduced the navmobile height.
Context: the images posted by Iliass Nassibane above.
I have a good enough knowledge of HTML, but I am just stuck with something related to my responsive design HTML CSS code. I was following the W3 Schools webpage showing how to create a Navbar for a website (Link).
Here is my current CSS file and index.html:
body {
background-color: #FAEBD7;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
/* Add a black background color to the top navigation */
.top-navbar {
position: relative;
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.top-navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.top-navbar a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.top-navbar a.active {
background-color: #4CAF50;
color: white;
}
/* Centered section inside the top navigation */
.top-navbar a {
/* float: none; */
/* position: absolute; */
/* top: 50%; */
/* left: 50%; */
/* transform: translate(-50%, -50%); */
}
/* Responsive navigation menu - display links on top of each other instead of next to each other (for mobile devices) */
#media screen and (max-width: 600px) {
.top-navbar a {
float: none;
display: block;
}
.topnav-centered a {
position: relative;
top: 0;
left: 0;
transform: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FUBS</title>
<meta name="description" content="Elder Scrolls, Fallout, Information, Wiki">
<link rel="stylesheet" href="css/mystyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="top-navbar">
<a class="active link" href="index.html">Home</a>
<a class="link" href="scrolls/index-scrolls.html">The Elder Scrolls</a>
<a class="link" href="fallout/index-fallout.html">Fallout</a>
</div>
<div class="test-div">
</div>
<div style="padding:0 16px;">
<br />
etc. etc. etc.
</div>
</body>
</html>
If you run the above code snippet you will get an idea of what I want it to do (If you drag your window smaller you will see the change).
Basically, what I just want to do is to have the nav bar links to be centered (Along with the black bar that goes across the screen). I already have it so that when the screen size if below 600 pixels, it switches to that effect.
I narrowed down the part of the tutorial that was making my nav bar disappear. It has the above from the #media part of the CSS (You will see that it is commented out). In the tutorial, the centered part of the class topnav-centered had only one element, an a tag. Maybe because in my website it has more than one element in the class that it is refusing to work? That is just my guess though.
Any help with this would be appreciated.
The reason the items aren't centered is because the a tags are floated to the left, this will always force them to the left.
To fix this you just need to amend the 2 classes below, adding text-align: center; as well as removing the float and setting your links to display: inline-block; will allow you to control their position.
/* Add a black background color to the top navigation */
.top-navbar {
text-align: center;
position: relative;
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.top-navbar a {
float: none;
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
I'm new to coding and I'm in the process of creating a website for my father to help build experience and a portfolio.
I'm using unsemantic & normalize.
The problems I am having are as follows;
1) I can't seem to align the bottom of the words "Michael Gilsenan" with the text in my nav bar. I have tried using the line-height property but it's behaving inconsistently and moving in all sorts of strange ways.
2) I'm trying to create a line under the header either by using the <hr> tag or by using the border-bottom property. Both of which eventually create a scroll bar on the <div> which houses my <nav> element.
I have been trying to find a solution for a good 4 hours and have done lots of reading. I apologise if I'm missing something obvious, I'm very tired now!
Thanks very much.
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<link rel="stylesheet" type="text/css" href="../external/css/normalize.css">
<link rel="stylesheet" type="text/css" href="../external/css/unsemantic-grid-responsive-tablet.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body class="grid-container">
<header class="grid-parent">
<div class="grid-50">
Michael Gilsenan
</div>
<div class="grid-50">
<ul>
<li>About</li>
<li>Bio</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</header> <!-- end of header-->
</body>
* {
margin: 0;
text-decoration: none;
}
hr {
border-style: solid;
border-color: #cacaca;
position: relative;
top: -40px;
}
/* header styles */
header {
font-family: 'Open Sans', sans-serif;
margin-top: 80px;
overflow: auto;
border-bottom: solid #cacaca 1px;
}
header a {
color: #332e2d;
}
.headertext {
font-family: 'Montserrat', sans-serif;
font-size: 300%;
letter-spacing: -0.01em;
line-height:
}
ul li {
display: inline;
}
ul {
word-spacing: 0.5em;
text-align: right;
}
On the ul
line-height: 55px; /* match the height of the headertext. */
On the header
overflow-y: hidden;
https://jsfiddle.net/wazz/ad6g2woq/63/
The trick was to find out what was causing the scrollbar. I selected the ul and went through the options and for scroll a 2nd scrollbar was added, so I new it wasn't that. Eventually I found that the scrollbar was on added on the header.
P.S. You should use a header tag <h1> for the headertext instead of making the text bigger (300%). Search engines look for header tags to understand the page (SEO). You can adjust the size of header tags in your css if it's too big or small, and still use the tag.
The scrollbar is appearing because you have the overflow property set to auto in the style declaration for the header element:
header {
font-family: 'Open Sans', sans-serif;
margin-top: 80px;
overflow: auto; <-- change or remove this
border-bottom: solid #cacaca 1px;
}
Auto gives the browser control over what to do when the contents of a container do not fit within the dimensions of the container and will often add scrollbars where you don't intend them. Removing the overflow property or setting it to none will eliminate the scrollbar.
I am not familiar with the unsemantic stylesheet that you are using but it appears to apply a float-based layout. This makes alignment of items within a container very difficult. As an alternative, I would suggest looking into flexbox. There are a few good tutorials out there. I have used all of these and can vouch for their quality:
What the Flexbox by Wes Bos - https://flexbox.io/
A Complete Guide to Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox Froggy - https://flexboxfroggy.com/
To achieve the layout I think you are aiming for with flexbox requires the following:
Remove the unsemantic grid classes from your HTML
Replace your CSS with the following
* {
margin: 0;
text-decoration: none;
}
/* hr {
border-style: solid;
border-color: #cacaca;
position: relative;
top: -40px;
} */
/* header styles */
header {
display: flex;
align-items: flex-end;
height: 80px;
font-family: 'Open Sans', sans-serif;
/* overflow: auto; */
/* the overflow property is setting your scrollbar. If you don't want the scrollbar, set to none : */
/* border-bottom: solid #cacaca 1px; */
/* Here, your properties are in the wrong order.
it should be:
1. border size
2. border type/style
3. border color.
Like this: */
border-bottom: 1px solid #cacaca;
}
header a {
color: #332e2d;
}
.header-text {
font-family: 'Montserrat', sans-serif;
font-size: 3.5rem;
letter-spacing: -0.01em;
/* line-height: */
/* When you leave in style properties with no value, this will often break your stylesheet. I've commented this out. */
}
header nav {
padding: 10px;
display: flex;
}
header nav ul li {
display: inline;
align-items: flex-end;
margin: 0 20px;
}
I added in some comments about a few other things I noticed in your CSS. To see a working sample, you can check out this pen:
https://codepen.io/danyadsmith/pen/mKjyKQ
Normally, I would attempt to answer the question by telling you what you could do to achieve the result you want with the technologies you are using, but in this case I think the grid system you selected is causing your frustration. Flexbox is gaining adoption in modern browsers and can safely be used in projects that don't need to support legacy browsers. For more information on that, check the flexbox section on Can I Use:
https://caniuse.com/#feat=flexbox
Hope this helps. Good luck!
I am playing around with webdesign, I always assumed that div's that are positioned relative, always are ordered in the way they are coded. But now I have a div that jumps above another although they are both relative.
A screenshot of the problem:
Here is the code of my index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/layout.css">
<link rel="stylesheet" type="text/css" href="CSS/nav.css">
<meta name="description" content="Website template 1">
<meta name="keywords" content="template">
<meta name="author" content="">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="MainContainer">
<div id="HeaderContainer">
<div id="NavigatieContainer">
<ul id="nav">
<!-- LVL 1 -->
<li>
Home
</li>
<li>
About
</li>
</ul>
</div>
</div>
<div id="BodyContainer">
<p>test</p>
</div>
</div>
</body>
</html>
And here is the code of my layout css:
/*Basic tags*/
body {
background-color: #efebdf;
}
/*DIV ID's*/
div#MainContainer {
width: 60%;
margin-left:auto;
margin-right:auto;
}
div#HeaderContainer {
position: relative;
}
div#NavigatieContainer {
float: right;
}
div#BodyContainer {
position: relative;
background-color: brown;
}
and the code of my navigation css so far, although I don't think the problem is here:
a {
color:#333333;
}
#nav {
/*-webkit-box-shadow:rgba(0, 0, 0, 0.4) 0 1px 3px;*/
border-radius: 0.3em;
position: relative;
z-index: 5;
}
#nav li {
margin-right: 10px; /*spacing tussen de list items*/
float:left;/*zorgt voor naast elkaar te plaatsen*/
list-style:none;/*Haalt list bolletjes weg*/
position:relative;
border-radius: 0.3em;
background-color: #e2e0d3;
}
#nav a {
color:black;
display:block;
font-weight:bold;
margin:0;
padding:8px 20px;
text-decoration: none;
}
#Adrift almost got it right, but he mentioned the wrong div. The overflow property should be on the HeaderContainer.
div#HeaderContainer {
position: relative;
overflow: auto;
}
I've created a jsfiddle for you with the result. You might want to add it to any following questions as it allows us to easier detect the problem.
http://jsfiddle.net/7Kx9g/
A little more background informations; once an image floats it is no longer in the document and therefor does not reserve it's own height. A trick called clearfix can be used to prevent it, but it's an advanced way of using overflow: auto; or overflow: hidden;
Do you know how to use inline-block? IMO, it's much easier to organize things with display:inline-block; than to use floats, because float makes it ignore several CSS rules, and the larger your project becomes, the more troublesome this "rule-ignoring" has the POTENTIAL to become.
The problem is caused by the float. Put clear:both; in the css for div#BodyContainer.
Look here. http://jsfiddle.net/aKy67/
Total agree #HC_
I am currently working on a practice example website as part of my Computer Science GCSE course. I am having real trouble with the navigation CSS. The website is very much in progress, so I know it's not great, but here is my code:
<!DOCTYPE html>
<html>
<head>
<title>The Cotswold Jeweller</title>
<link rel="stylesheet" href="../Assets/css/normalize.css" media="screen" type="text/css">
<link rel="stylesheet" href="../Assets/css/main.css" media="screen" type="text/css">
<link rel="stylesheet" href="../Assets/css/grid.css" media="screen" type="text/css">
</head>
<body>
<div class="head">
<h1>The Cotswold Jeweller</h1>
</div>
<div class="nav_contain">
<ul class="nav">
<li><h2>Home</h2></li>
<li><h2>Services</h2></li>
<li><h2>Location</h2></li>
</ul>
</div>
<div class="wrapper">
<p>Welcome to the home of The Cotswold Jeweller on the web. Here at The Cotswold Jeweller we offer a unique and reliable service to create a friendly and local experience for our customers. We are very proud to also stock products from many different popular and large groups, such as Citizen, Butler and Peach and many more while we still maintain our local, reliable ethos.</p>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=The+Cotswold+Jeweller,+Granville+Court,+Shipston-on-Stour&aq=0&oq=The+Cotswold+Jewe&sll=52.8382,-2.327815&sspn=8.08612,21.643066&ie=UTF8&hq=&hnear=&ll=52.062826,-1.623898&spn=0.006295,0.006295&t=m&iwloc=A&output=embed"></iframe>
</div>
<div class="footer">
<p>Copyright 2014 © The Cotswold Jeweller</p>
</div>
</body>
</html>
And here is the CSS:
body {
background-color: #FFFFFF;
}
.wrapper {
width: 1100px;
margin: auto;
}
.head {
text-align: center;
font-family: "Times New Roman";
font-size: 32px;
}
.nav li h2 a {
text-decoration: none;
color: #000000;
font-family: "Times New Roman";
width: 366px;
float: left;
}
.nav {
list-style: none;
width: 1100px;
margin: auto;
text-align: center;
}
.nav_contain {
border-top: 5px #990000 solid;
border-bottom: 5px #990000 solid;
}
I would like to have the navigation bar between, the two borders of the navigation container, but they are not aligned properly. Please can you provide a solution below. Thank You.
You can add overflow: auto to the .nav container. This will prevent its height from collapsing because it only contains floated elements.
.nav {
list-style: none;
width: 1100px;
margin: auto;
text-align: center;
overflow: auto;
}
Alternatively, adding this to .nav_contain has a similar effect.
Add this
.nav li{
display:inline-block;
}
and remove the h2 tags.
You may also have to reduce the size of the "a" tags to get them to stay in a line on screen. I'm on a 1280px monitor at the moment and I had to reduce their width to 300px.
Another alternative is to just remove the li tags completely. The links should still display side by side, and because your borders are outside of ".nav" then they should contain it.
If it doesn't work, just let me know.
generally try to avoid fixed values like
width: 1100px; //(1)
you can replace it for example by
width: 90%; //(2)
the (1) is destroying your site on other resolution than yours. Use (2) to avoid it.
try this code:
http://paste.debian.net/69881/