I have made a sticky menu and it is not working under Chrome (mobile) 79
Under safari and desktop Chrome it is working perfect.
I use it in a DIV
<div style=divsticky>blabla </div>
.divsticky {
position: sticky;
position: -webkit-sticky;
left: 0;
display: table-cell;
background-color: #e2b577;
border: 1px solid #dddddd;
padding: 3px, 10px;
white-space:nowrap;
}
When i zoom totally out then it works.. So it have something to do with zooming.
This line make it work. But not when you zoom in...
When i place the entire index3.html into a iframe it works perfect.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PLB_Admin</title>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
}
</style>
</head>
<body>
<div id="content">
<iframe width="99%" height="99%" frameborder="0" src="http://www.kraan.net/css/index3.html">
</div>
</body>
Related
I'm trying to make square page for mobile gadgets. And something goes wrong.
Google Chrome 79.0.3945.88
Opera 65.0.3467.72
My screen resolution is 4K on Windows 10 x64
Here is video how it works wrong https://youtu.be/cxF9pWf7i5g
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background: black;
}
.div1 {
height: 100vmax;
width: 100vmax;
background: red;
padding: 1vmax;
border: 0;
margin: 0;
}
.div2 {
height: 98vmax;
width: 98vmax;
background: grey;
border: 1vmax solid yellow;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"> </div>
</div>
</body>
</html>
Cant post images. So URIs:
https://i.stack.imgur.com/LyRJV.png
https://i.stack.imgur.com/33e53.png
https://i.stack.imgur.com/pjjsW.png
I am a new css programmer and there is a very annoying problem in my code. when I put the grey bars in they are not touching the left side of the screen they touch the right side but not the left side and I do not know why there is nothing in my code that is stopping them so I do not know why it would be doing that please help me fix it thanks! (the big white space in the middle is supposed to be there it is for a picture.)
<!doctype html>
<html>
<head>
<title>AndrewDevs.Com</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<style type="text/css">
#white{
color:white;
}
.large {
font-size:300%;
}
#green {
color:black;
}
.underline {
text-decoration:underline;
}
.bold {
font-weight:bold;
}
.picture{
position: absolute;
top: 45px;
right: 0;
width: 1870px;
height: 10px;
}
.greybox {
background-color:#a5a5a5;
position: absolute;
top: 380px;
right: 0;
width: 1870px;
height: 10px;
border: 3px solid #a5a5a5;
}
.connect {
background-color:#6b6b6b;
position: absolute;
top: 340px;
right: 0;
width: 1870px;
height: 40px;
border: 3px solid #6b6b6b;
}
.top {
top:10px;
width: 1870px;
height:700px;
z-index:2;
text-align: center;
}
.bottom {
background-color:#0a0a0a;
width: 1600px;
height:200px;
text-align: center;
}
.purplebox {
background-color:#6b6b6b;
position: absolute;
top: 0px;
right: 0;
width: 1870px;
height: 40px;
border: 3px solid #6b6b6b;
}
.greenbox {
top:0px;
width: 1870px;
height: 500px;
z-index:2;
text-align: center;
margin:150px 100px 30px 10px;
float:center;
font-family: 'Oswald', sans-serif;
}
}
p {
padding:0;
margin:0;
}
</style>
</head>
<body>
<div class="greybox">
</div>
<div class="purplebox">
<p class="large"></p>
</div>
<div class="picture">
<img src="code.jpg" alt="code" height="300" width="1870">
</div>
<div class="connect">
<p> Connect with me! </p>
</div>
<div class="top">
<p id="green" class="large">idfk</p>
</div>
</div>
<div class="greenbox">
<p id="green" class="large">idfk</p>
</div>
<div class="greenbox">
<p id="green" class="large">idfk</p>
</div>
<div class="bottom">
<p id="white" class="large">Connect With me!</p>
</div>
By default the body on the page has this css:
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
at the top of your css file just add:
body {
margin:0;
}
this way you're working with 0 margins to begin with.
Margins of <body> don't matter because those grey bars are absolutely positioned to the right therefore they stick to the right side of <html> element. If the screen resolution (the width of your screen or window) is bigger then the width: 1870px;, they are gonna stick to the right side and leave an empty space on the left.
If you want those grey boxes to always stick to both sides of your screen, use width: 100%; or no width and left: 0; instead:
.connect {
background-color: #6b6b6b;
position: absolute;
top: 340px;
right: 0;
width: 100%;
height: 40px;
border: 3px solid #6b6b6b;
}
or
.connect {
background-color: #6b6b6b;
position: absolute;
top: 340px;
right: 0;
left: 0;
height: 40px;
border: 3px solid #6b6b6b;
}
Both will stretch the element to the width of their parent element.
But it is good to set the body's position to relative and get rid of its default margins. In my opinion, you shouldn't use the <html> tag for styling. It will make those absolutely positioned grey boxes stick to the sides of <body> and not <html>:
body {
margin: 0;
position: relative;
}
See this link to learn more about positioning: http://www.w3schools.com/css/css_positioning.asp
I have a gallery page that starts off as a page of thumbnails. When you click a thumbnail, it populates a hidden div and then shows the div. The display div has an auto width based on the image and a max-height of 700px with overflow: auto;.
This works fine everywhere except IE. In IE, the div shows up as a thin line, and the image, I finally found, was showing up mostly off of the left side of the screen.
I've included the HTML and CSS below. You'll see some Angular variables in there. That's stuff that's automatically populated by the JS.
HTML:
<div id="siteCover" ng-show="picID > 0">
</div>
<div id="outerPictureDisplay" ng-show="picID > 0">
<div id="innerPictureDisplay">
<div id="divClose" class="floatRight" ng-click="picID = 0;">Close</div>
<div id="picNavPrev" ng-click="picturePop({{prevID}});"><img src="images/arrowLeft.png" /></div>
<div id="picNavNext" ng-click="picturePop({{nextID}});"><img src="images/arrowRight.png" /></div>
<img src="images/photos/{{thisPic.image}}" id="displayedImage" />
<p ng-show="thisPic.title != ''"><b>{{thisPic.title}}</b></p>
<p ng-show="thisPic.desc != ''">{{thisPic.desc}}</p>
</div>
</div>
CSS:
#outerPictureDisplay{
z-index: 500;
top: 50px;
left: 50%;
padding: 0px;
position: fixed;
}
#innerPictureDisplay{
left: -50%;
min-height: 200px;
height: auto;
max-height: 700px;
width: auto;
padding: 0px;
position: relative;
overflow: auto;
background-color: #lightcolor;
.bordered-dark;
.rounded;
& img{
margin: 0px;
padding: 0px;
}
}
#divClose{
font-size: 1em;
background-color: #darkcolor;
color: #lighttextcolor;
display: inline-block;
padding: 5px;
right: 0;
position: absolute;
}
#picNavPrev{
display: inline-block;
padding:0;
top:40%;
float: left;
height: auto;
position: absolute;
}
#picNavNext{
display: inline-block;
padding:0;
top:40%;
float: right;
right: 0;
height: auto;
position: absolute;
}
#siteCover{
width: 100%;
height: 100%;
background:rgba(0, 0, 0, 0.7);
z-index: 450;
position: fixed;
top: 0;
left: 0;
}
How do I make this work as intended in IE as well?
You can create a stylesheet for IE only:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->
Or you can make a stylesheet for a specific version of IE,for example i want to make a specific stylesheet for version 7 :
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
Just replace the number between the brackets with the version number that you have.
I can't seem to get my div to align side by side inside a div, can someone see where the problem is? I am trying to position the divContainer element with a height up to the buttonPanel element and the 2 testDiv elements positioned side by side. I also tried setting the testDiv element with float: left but that didn't work either.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Test</title>
<style type="text/css">
* {
font-family: tahoma;
font-size: 8pt;
}
#buttonPanel {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: right;
background-color: buttonface;
}
#buttonPanel hr {
margin: 0;
}
#buttonPanel button {
margin: 10px;
width: 75px;
}
#divContainer {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 45px;
border: 2px solid #FFFF00;
}
.testDiv {
display: inline-block;
width: 50%;
height: 100%;
border: 2px solid blue;
}
</style>
</head>
<body>
<div id="divContainer">
<div id="test1" class="testDiv">test1</div>
<div id="test2" class="testDiv">test2</div>
</div>
<div id="buttonPanel">
<hr/>
<button id="btnOK">OK</button>
<button id="btnCancel">Cancel</button>
</div>
</body>
</html>
Let me give you an example:
you have two div left-div say ldiv and right-div say rdiv.These divs are inside main-div say mdiv
ie
<div class = "mdiv">
<div class="ldiv">
</div>
<div class="rdiv">
</div>
</div>
then you css shoul be like this:
#mdiv{}
#ldiv {float:left;}
#rdiv{ float:left;}
Make the following changes to your code: http://jsfiddle.net/ak9Gs/. box-sizing instructs the browser to take padding and borders into account when sizing an element.
CSS:
.testDiv {
width: 50%;
height: 100%;
border: 2px solid blue;
box-sizing: border-box;
}
.testDiv:first-of-type {
float: left;
}
.testDiv:first-of-type {
float: right;
}
You are giving width as 50% and border with 2px that's why your div'a were not placed sise by side. If you remove border you can get your div's as you need.
DEMO
CSS:
.testDiv {
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#ccc;
}
.testDiv:first-child{
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#f0f0f0;
}
I gave color difference instead of border for both test div's.
change the testDiv class to have display of inline then they will be side by side
.testDiv {
display: inline;
width: 50%;
height: 100%;
border: 2px solid blue;
}
Hope this helps.
I'm having trouble with extra padding (4px) between two IMG tags. This occurs in Firefox 7.0.1, Safari 5.1.1, Chrome 11.0.696.68, and Opera 10.53 on a Mac (Snow Leopard).
I have uploaded the example here:
http://husnoo.com/img_extra_space/img_extra_space.html
With a screenshot of what it looks like:
http://husnoo.com/img_extra_space/shot.png
The 4 pixels between the two IMGs shouldn't be there.
Thanks!
Nawal.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Title here</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
toolbar {
background-color: #ddd;
margin: 0px;
padding: 0px;
width: 32px;
height: 32px;
}
#tool1 {
background-color: #0dc;
margin: 0px;
padding: 0px;
width: 32px;
height: 32px;
}
#tool2 {
background-color: #6dc;
margin: 0px;
padding: 0px;
width: 32px;
height: 32px;
}
</style>
</head>
<body>
<div id="toolbar">
<img id="tool1" src="select.png">
<img id="tool2" src="transform_move.png">
</div>
</body>
</html>
Don't break lines between images instead of
<img id="tool1" src="select.png">
<img id="tool2" src="transform_move.png">
do
<img id="tool1" src="select.png"><img id="tool2" src="transform_move.png">
You have to remove the space between the two img tags.
Or you can add display:block; to them and float:left;