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
Related
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>
I'm copying a website to train with CSS (I'm trying to reproduce this:click here to see the image) but I'm having a problem copying borders, this is the result: click here to see and this is the code that I wrote:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Technology - BBC News</title>
<style>
.topbar {
width: 1000px;
height: 40px;
background-color: #ffffff;
}
body {
margin: 0px;
padding: 0px;
}
.logo {
margin-top: 8px;
width: 100px;
float: left;
margin-left: 16px;
}
.topbar-section {
border-left: 1px solid grey;
height: 40px;
float: left,
}
</style>
</head>
<body>
<div class="topbar">
<img src="bbc-blocks-dark.png" class="logo"></div>
</div>
<div class="topbar-section">Sign in</div>
</body>
</html>
May I have your help please?
When I look at this code in Chrome - I can see the left border on .topbar-section.
When you say you are having problems - can you tell us what is happening? Are they not showing, or showing incorrectly?
From what I can see - the main problem is that you have made 2 separate divs where it should be one div inside another.
You've also got 3 closing and only 2 opening - if you are using an editor such as Atom or Notepad++ this can help you keep track of your opening and closing elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Technology - BBC News</title>
<style>
.topbar {
width: 1000px;
height: 40px;
background-color: #ffffff;
}
body {
margin: 0px;
padding: 0px;
}
.logo {
margin-top: 8px;
width: 100px;
float: left;
margin-left: 16px;
border-right: 1px solid grey;
}
.topbar-section {
height: 40px;
float: left;
margin-left: 5px;
}
</style>
</head>
<body>
<div class="topbar">
<img src="bbc-blocks-dark.png" class="logo">
<div class="topbar-section"><p>Sign In</p></div>
</div>
</body>
</html>
Inspite of setting all margins and padding to 0, I'm suddenly finding that processing my html & css using a Prepros, is adding extra (unwanted) space under my last item eg. footer. While running the same html & css directly from Notepad++, does not do this (thankfully). Can someone please explain why this is happening since I will eventually be using Prepos and running from a local host.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf=8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>header
</header>
<div class="wrapper">wrapper1
</div>
<div class="wrapper">wrapper2
</div>
<footer>footer
</footer>
</body>
</html>
Here is the CSS:
html{
margin: 0;
padding: 0;
border: 3px solid green;
}
body{
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
border: 3px solid lightblue;
height: 100vh;
}
header{
flex: 1;
height: 50%;
background-color: red;
border: 3px solid black;
}
.wrapper{
flex: 1;
height: 20%;
background-color: blue;
border: 3px solid black;
}
footer{
height: 5%;
position: absolute:
bottom: 0;
background-color: orange;
margin: 0;
padding: 0;
}
Here are images of the same code running, first from file:/// and the other from localhost:
(edit: addition)Is it possible that this has something to do with the prepros.cfg file that gets added by Prepros? I am also using a trial version of Prepros - could this be causing the issue? Would appreciate any clarification on this matter. NOTE: Above is the discrepancy in every browser i tried it on (Chrome, Firefox and Opera).
I have the following simple example of an img and a p floated next to each other in a div. If you uncomment the last bit of CSS, the text drops below the image and stays there - but only in IE8 Standards mode. How do I get the image to resize in IE8 without this unfortunate side effect?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.slide {
border-style: solid;
border-color: #DDDDDD;
border-width: 7px;
display: inline-block;
zoom: 1;
*display: inline;
}
.slide img {
border-right-style: solid;
border-color: #DDDDDD;
border-width: 7px;
float: left;
}
.slide .caption {
width: 230px;
float: left;
padding: 10px 10px 10px 20px;
}
/* Here's the issue. */
/*.slide img, .slide, .slide_wrapper {
max-width: 100%;
height: auto;
}*/
</style>
</head>
<body>
<div class="slide_wrapper">
<div class="slide">
<img src="http://placehold.it/362x250" />
<p class="caption">
test2
</p>
</div>
</div>
</body>
</html>
Setting an explicit width makes the text behave as expected:
.slide {
width: 629px;
}
Put this in your <head></head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
It probably fix the problem.
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;