I have some weird problem with my webpage.
I made a simple website, where there is a background image, covering the webpage, header on it with logo and menu icon... the menu icon and the menu worked, until now... I made two divs, with height:100vh; and they are 100vh from the top of the webpage... it looks great, but the menu is not working.. how, why?
for better understanding.. here is link to the site: http://david.addagio.cz/own/
ok.. so there is the code:
css:
html {
background: url(bistro2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {margin: 0;
padding: 0;
}
a{
text-decoration:none;
z-index:10;
}
#header {
background-color: none;
height: 110px;
width: 100%;
top:0px;
position: fixed;
}
h1 {
z-index:10;
color:white;
font-size: 35px;
padding: 0;
margin: 0;
font-family:Segoe UI Light;
padding-bottom:10px;
}
h2 {
color:white;
font-size: 22px;
padding: 0;
margin: 0;
font-family:Segoe UI Light;
line-height:50px;
z-index:10;
}
#head{
border-bottom:2px solid white;
margin-bottom:50px;
}
#menu{
margin-bottom:10px;
}
#social_icons{
height:570px;
background-color: rgba(0,0,0,0.1);
}
#main{
float: left;
}
#main img {
width:60px;
height:27px;
padding:45px;
}
#share{
float: right;
}
#share img {
padding:45px;
width:30px;
height:16px;
padding-top:50px;
}
.menu {
background-color: rgba(0,0,0,0.7);
top:0;
right: -400px;
height: 100%;
position: fixed;
width: 400px;
z-index:-10;
}
#third {
background-color:#E8E8E8 ;
}
#second, #third {
width:100%;
height:100vh;
padding:0px;
margin:0;
margin-left:auto;
margin-right:auto;
}
#second {
background-color:#F0F0F0 ;
margin-top:100vh;
}
html:
<!DOCTYPE html>
<html>
<head>
<title>UX design</title>
<link href="styles_m.css" rel="stylesheet" type="text/css">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
</head
<body>
<div class="menu">
<div id="wrapper">
<div id="head">
<h1>Menu</h1>
</div>
<div id="menu">
<h2>O mě</h2>
<h2>Proč si mě vybrat</h2>
<h2>Portfolio</h2>
<h2>Ukázky prací</h2>
<h2>Objednávkový formulář</h2>
</div>
<div id="head">
<h1>Sociální sítě</h1>
</div>
<div id="social_icons">
</div>
</div>
</div>
<div id="header">
<div id="main">
<img src="my_logo.png">
</div>
<div id="share">
<img name="menu" src="my_menu.png">
</div>
</div>
<div class="wrapper">
<div id="second">
</div>
<div id="third">
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js">
</script>
</body
</html>
The menu script is working properly. You have to set a top property for the .menu class:
.menu{
...
top: 0;
...
}
One of those added, new divs is now covering up the menu but you have changed the markup as I write this and can't help with the answer. However, this is a typical problem when floated or absolutely positioned elements rise up into a position that covers up another element.
EDIT: In fact, that's the case. position:fixed for the header is the same as being absolutely positioned. Then your menu and logo are both floated. These all take those items out of the normal flow which is allowing your new divs to cover them up.
Related
I made a mobile web page using IScroll.
The composition of the web page is as follows.
HTML
<div class="wrap">
<div class="content">
<div class="a">
TOP
</div>
<div class="item">
<div class="disable">
Google Ads
</div>
</div>
<div class="b">
BOTTOM
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
CSS
html, body, .wrap {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow-y: scroll;
}
.wrap {
width:100%;
height:100%;
background-color:white;
}
.disable {
position: fixed;
width:100%;
height:100%;
background-color:aqua;
z-index:1;
}
.a, .b {
width: 100%;
height:100px;
position:relative;
z-index:2;
}
.a {
background-color: red;
}
.item {
width:100%;
height:100%;
}
.b {
background-color: blue;
}
If you run the code above,
You can scroll by raising the cursor to A and B.
On mobile, you can scroll using touch.
But, So if you raise your cursor over a DIV with Aqua background color and scroll,
I can't scroll.
The DIV, "Position:Fixed," is...
Since the height is 100%, I don't think there's a scroll event.
For your information, Item needs a Click event.
So the "Pointer-Events: None" property is not allowed.
The "Trigger" function can't even give you an event.
Give me an idea.
https://jsfiddle.net/kasthe/b3w2hpn1/3/
Apply pointer-events: none to just the class=disable div. div class=item is still clickable.
$(".wrap").css("height", $(document).height() + "px");
console.log($(".wrap").height())
html, body, .wrap {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow-y: scroll;
}
.wrap {
width:100%;
height:100%;
background-color:white;
}
.disable {
position: fixed;
width:100%;
height:100%;
background-color:aqua;
z-index:1;
}
.a, .b {
width: 100%;
height:100px;
position:relative;
z-index:2;
}
.a {
background-color: red;
}
.item {
width:100%;
height:100%;
}
.b {
background-color: blue;
}
<div class="wrap">
<div class="content">
<div class="a">
TOP
</div>
<div class="item" onclick="alert('item clicked')">
<div class="disable" style="pointer-events:none">
Google Ads
</div>
</div>
<div class="b">
BOTTOM
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
The problem is that I want to trim the content B scrolling in content A and when it scrolls down again, it should reappear.
So it should be the area invisible, which is pushed into content A. I suspect i will need javascript here or is this synonymous with css alone?
body {
background-image: url('https://placeimg.com/1000/1000/nature/grayscale');
background-repeat: no-repeat;
background-attachment: fixed;
}
div { padding:10px; }
.fixed {
position: fixed;
top: 100px;
left: 50px;
border: 1px solid red;
height:100px;
width:400px;
z-index: 10;
}
.content {
background:#fff;
width:400px;
height:1200px;
margin-top: 220px;
margin-left: 50px;
}
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="fixed">
Content A
</div>
<div class="content">
Content B
</div>
Thank you very much for helping!
Rufnex
I'm building an WIP placeholder page for myself and I'm stuck with centering the media content with CSS. I managed to get it to work on mobile but the content is slightly to the right on desktop.
UPDATE:
I've added the entire code along with the CSS I selected to support it. As you can tell, the .display section of the CSS is where I'm having the most trouble (assuming I've troubleshot this right). From what I've been told here & read elsewhere, the tags I initially tried in HTML don't apply to HTML5 so I'm hoping to get CSS to finish it off. Like I mentioned before, when previewing on mobile, it works fine and the links at the bottom of the page stack nicely but it all falls apart in full desktop.
Here's the code below:
#charset "utf-8";
/* CSS Document */
.content {
max-width: 500px;
margin: auto;
}
.display{
position:relative;
display: block;
padding: 0;
margin:0 auto;
width: auto;
text-align:center;
display:flex;
justify-content:center;
}
.button {
background-color: #FFFFFF;
border: #000000;
border-bottom-width: 2px;
text-decoration-color: #FFFFFF;
padding: 15px 32px;
text-align: center;
display: inline-block;
font-size: 16px;
}
.help-block.with-errors {
color: #ff0000;
margin-top: 5px;
}
.overlay {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgba(0, 0, 0, 0.8);
z-index:100;
color:white;
display: none;
font-family: 'source_sans_proregular';
line-height: 25px;
-webkit-text-size-adjust:none;
text-size-adjust:none;
}
.container {
width:100%;
height:100%;
margin:0;
padding:0;
border:0;
}
.container td {
vertical-align: middle;
text-align: center;
}
.centerAlign {
text-align: center;
}
.margin2x {
margin-bottom: 24px;
}
.margin1x {
margin-bottom: 12px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>mAdjetey is getting an upgrade</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="index_files/mine.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="index_files/favicon.png">
</head>
<a name="tepin"></a>
<div class="display" align="center">
<img src="index_files/uc_main.png" style="max-width:100%" height="auto" alt="Website under redesign">
</div>
<div class="display">
<div class="w3-topbar">
<img src="index_files/icon_email.png" alt="Email">
</div>
</div>
<div class="display" align="center">
Back to top of page
</div>
</html>
theres several ways but in this example I'm applying "display: block" to the image so that it can use the margin property.
/* CSS */
.display img {
display: block;
padding: 0;
/* maybe some top margin too? margin: 30% auto 0 */
margin: 0 auto;
width: auto;
}
<!-- HTML -->
<div class="display" align="center">
<img src="index_files/uc_main.png" style="max-width:100%" height="auto" alt="Website under redesign">
</div>
The align attribute is not supported in HTML5. Use CSS instead.
.className{
text-align:center
}
Or you can always use display flex
.className{
display:flex;
justify-content:center
}
I am trying to make a webpage that will stay a certain width and height in pixels ex(width=1000px, height=700px). If the screen viewing it is smaller than that desired width and/or height it will set up scroll bars to make the page that width and height and the screen will only show a portion of it at a time. I hope to be able to do this with css but if I have to use html or (not so preferably) JavaScript please give the community your ideas. I have tried multiple css ideas like:
html{
min-width:800px;
width: auto !important;
width:800px;
}
and:
html{
max-height: 1000px;
height: 500px;
max-width: 1000px;
}
and many other but similar pieces of code but none of them have worked. Thank you for you time and help!
Here is the code for my webpage:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<style>
html{background: url(https://pbs.twimg.com/profile_images/456819436259778561/cwlr2jqr.jpeg) no-repeat top center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#opacity{
z-index: -1;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
background-color: #ffffff;
opacity:.80;
filter:alpha(opacity=60);
}
#headerBox{
z-index: 2;
width: 50%;
height: 9%;
position: fixed;
left: 25%;
top: 0%;
background-color: #000000;
}
.headerBoxTitle{
color: #ffffff;
font-family:"Lucida Console", Monaco, monospace;
font-size: 200%;
text-align: center;
}
#galore{
z-index: 3;
width: 80%;
height: 80%;
position: fixed;
left: 10%;
top: 20%;
background-color: #BFC2C6;
opacity:.60;
filter:alpha(opacity=60);
}
#pic{
z-index:4;
width:80%;
height:80%;
max-width: 80%;
max-height: 80%;
top: 20%;
left:10%;
position: absolute;
}
div.menue{
position:fixed;
top: 10%;
background-color: #000000;
width: 100%;
height: 30px;
}
div.menue ul{
list-style-type:none;
margin:0;
padding:0;
display:table;
margin:0 auto;
}
div.menue li
{
float:left;
}
div.menue a
{
display:block;
width:100px;
}
div.menue a:link,div.menue a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#000000;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.menue a:hover,div.menue a:active
{
background-color:#8A8A8A;
}
</style>
</head>
<body>
<div id = "opacity">
<div id = "headerBox">
<h1 class = "headerBoxTitle"> leonardo da Vinci</h1>
</div>
</div>
<div class = menue>
<ul>
<li> Home</li>
<li> Galore</li>
<li> Contact</li>
<li> News</li>
</ul>
</div>
<div id="galore">
</div>
<div id = "pic">
<a href="https://www.youtube.com/" id = "lisa">
<img src="http://webneel.com/daily/sites/default/files/images/daily/10-2013/4-leonardo-da-vinci-mona-lisa.preview.jpg" alt="can not display this image" style="max-height: 60%; max-width:90%; border: 5px outset #CCBCA3; padding:0px; position:absolute; left:10%; top:10%; border: outset 7px solid #CA935C;">
</a>
<a href="https://www.youtube.com/" id = "lisa">
<img src="http://webneel.com/daily/sites/default/files/images/daily/10-2013/4-leonardo-da-vinci-mona-lisa.preview.jpg" alt="can not display this image" style="max-height: 60%; max-width:90%; border: 5px outset #CCBCA3; padding:0px; left:50%; top:10%; position:absolute; border: outset 7px solid #CA935C;">
</a>
</div>
</body>
</html>
To set the width and height of your website you can simply use
html, body {
width: 1000px;
height: 700px;
}
Or, if you want it to set these values as maximum width and height, you can use:
html, body {
max-width: 1000px;
max-height: 700px;
}
Although, if you want to prevent the downscaling on mobile devices, you can add this inside your head section:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
In the both examples you have provided on your own you are overriding the values using !important, which tells the browser to prefer this css tag, ignoring everything else.
You can use the viewport meta tag. Add the following in your <head>:
<meta name=viewport content="initial-scale=1">
This will tell the browser to not attempt to downscale to fit the screen.
You can use the min-width in body
body{
min-width:1100px;
}
Ive been coding a site for a project a friend and I are working on. After spending more time than I should have researching how to use javascript to make site links load into a "content" div ive gotten it to work, que second problem: The content loads but sits within a small square inside the "content" div I was wondering how to resize the content being displayed within the div below is my page code
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<title>Breezies Blog</title>
<style>
.header {
background-color: white;
background-image: url('file:///C:/Users/Zenga/Desktop/egoblog/bg21.png');
background-size: cover;
background-repeat: no-repeat;
color: black;
text-align: center;
max-width: 1000px;
height: 187px;
margin: 0 auto;
margin-top: 5px;
border: 1px solid white;
border-radius: 20px;
position: static;
}
a {
color: white;
}
ul {
padding: 5px;
background: rgba(0,0,0,.5);
position: relative;
top: 142px;
border-radius: 10px;
}
li {
display: inline;
padding: 0px 5px 0px 5px;
margin: 0px 0px 0px 0px;
}
body {
background-image: url('file:///c:Users/Zenga/Desktop/egoblog/fullbg.jpg');
background-size: cover;
background-repeat: no-repeat;
color: black;
}
section {
background-color: rgba(0,0,0,.5);
color: white;
position: relative;
height: 600px;
max-width: 1000px;
margin: 0 auto;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="header">
<nav id="menu">
<ul>
<li>Home</li>
<li>Cast Of Characters</li>
<li>History of Ego</li>
<li>Meet the Creators</li>
</ul>
</nav>
</div>
<br>
<section>
<div class="content" id="content"> </div>
</section>
<script>
function load_home(){
document.getElementById("content").innerHTML='<object type="text/html" style="overflow: hidden" data="main.html"></object>';
}
function load_cast(){
document.getElementById("content").innerHTML='<object type="text/html" style="overflow: hidden" data="cast.html"></object>';
}
function load_hist(){
document.getElementById("content").innerHTML='<object type="text/html" data="hist.html"></object>';
}
function load_create(){
document.getElementById("content").innerHTML='<object type="text/html" data="create.html"></object>';
}
</script>
</body>
</html>
you're not giving the content div a size so it just goes auto, give it a min-width and min-height