I have some very simple HTML/CSS code, and no matter what I do, I always get an "invalid property value" exception by chrome, and the logo won't position properly.
Fixed the first problem, but now the image does not move related to the border.
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>my website</title>
<style type="text/css">
*{ padding: 0; margin: 0; }
.header {
width: 100%;
height: 100px;
border: none;
border-bottom-style: solid;
border-bottom-width: 5px;
position: relative;
border-bottom-color: rgb(220,30,60);
}
.logo {
position: absolute;
padding-bottom:50px;
height: 150%;
width: auto;
}
</style>
</head>
<body>
<div class="header" id="header">
<img id="logo" class="logo" src="image.png"/>
</div>
</body>
</html>
I had a similar issue for me.
I wrote 10 (instead of 10px), this fixed the issue.
If you are using single quotes in your css, Please remove single quotes from your css file.
For Example
// Wrong
.row{
margin-left:'-16px !important';
margin-right:'0px !important';
}
// Right
.row{
margin-left:-16px !important;
margin-right:0px !important;
}
I just don't understand why you used padding-bottom instead of bottom in this case. Anyway:
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>my website</title>
<style type="text/css">
*{ padding: 0; margin: 0; }
.header {
position: relative;
height: 100px;
border-bottom: 5px solid rgb(220,30,60);
}
.logo {
position: absolute;
bottom:50px;
height: 150%;
width: auto;
}
</style>
</head>
<body>
<div class="header" id="header">
<img id="logo" class="logo" src="image.png"/>
</div>
</body>
</html>
CSS bottom property: http://www.w3schools.com/cssref/pr_pos_bottom.asp
CSS padding-bottom property: http://www.w3schools.com/cssref/pr_padding-bottom.asp
There's a space before the px in padding-bottom:50 px;. Fix:
padding-bottom: 50px;
Related
bellow are my html and css files where my header div disappearing when added position fixed. i even specified top and left but no luck. please help.
body {
margin: 0px;
padding:0px;
background-color:whiteSmoke;
}
.header {
height: 60px;
background-color: pink;
box-shadow: 3px 3px 5px silver;
position: fixed;
top:0;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>the title</title>
</head>
<body>
<div class="header"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>the title</title>
<style>
body {
margin: 0px;
padding: 0px;
background-color: whiteSmoke;
}
.header {
height: 60px;
width: 100%;
background-color: pink;
box-shadow: 3px 3px 5px silver;
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
</html>
In your original code, there is no content in the div with the class "header". Therefore, its width is 0.
I've added "width: 100%" to the class header so that it can gain width and appear.
You can run the code to see the result. I hope it helps.
As an alternative to declaring a specific width property to the fixed element, a right property with the value of 0 can also be declared, effectively "expanding" the fixed element width from left-to-right of the screen.
body {
margin: 0;
padding: 0;
background-color: whiteSmoke;
}
.header {
height: 60px;
background-color: pink;
box-shadow: 3px 3px 5px silver;
position: fixed;
top: 0;
left: 0;
right: 0;
}
<body>
<div class="header"></div>
</body>
Because a fixed element doesn't have a width.
So it has a height of 60px and becaus eyou didnt specify a width, so it appears hidden. Adding content, or something along the lines of width: 100%; will show the div again.
Please add some content or width to header.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>the title</title>
</head>
<body>
<div class="header"></div>
</body>
</html>
body {
margin: 0px;
padding:0px;
background-color:whiteSmoke;
}
.header {
width:60px;
background-color: red;
height: 60px;
background-color: pink;
box-shadow: 3px 3px 5px silver;
position: fixed;
top:0;
left:0;
}
Running Expample
When opening this up in a browser, the combined width of the two divs does not fully fulfill the width of the body. I have made the background color of the second (right) div black so you can see the white space between the second div and the right side of the page. I tried messing with the border, margin but maybe I did it wrong.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home2.css">
</head>
<body>
<div id="wrapper">
<main>
<div id="div1">
<img src="font-header.png" alt="Image Logo Header">
</div>
<div id="div2">
</div>
</main>
</div>
</body>
</html>
CSS:
img {
border-bottom: 4px solid black;
position: relative;
left: 30px;
}
body {
margin: 0;
}
#div1 {
height: 756px;
width: 300px;
border: 2px solid black;
float: left;
}
#div2 {
height: 758px;
width: 1216px;
overflow: hidden;
background-color: black;
}
Position the divs absolutely and apply media queries so they will be responsive. Hope this helps.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home2.css">
<style>
img {
border-bottom: 4px solid black;
position: relative;
left: 30px;
}
body {
margin: 0;
width: 100%;
}
#div1 {
height: 756px;
width: 25%; //change width to fit your need
border: 2px solid black;
float: left;
left:0;
position: absolute;
}
#div1 img{
left: 0;
}
#div2 {
height: 758px;
width: 75%; //change width to fit your need
overflow: hidden;
background-color: blue;
right:0;
position: absolute;
}
</style>
</head>
<body>
<div id="wrapper">
<main>
<div id="div1">
<img src="font-header.png" alt="Image Logo Header">
</div>
<div id="div2">
</div>
</main>
</div>
</body>
</html>
Since you are using fixed width, it will not adjust properly to your screen. And in different resolutions it will not adjust correctly to your screen size. Instead use % width.
#div1 {
height: 756px;
width: 35%;
float: left;
}
#div2 {
height: 758px;
width: 65%;
overflow: hidden;
background-color: black;
}
I've setup this fiddle with your example: https://jsfiddle.net/5yfnLcdt/
This is my css file and my html file, i made a div tag inside my header and gave it a class name of zebusoft-logo so then i call that in css with the .zebusoft-logo but when i use the margin-left: 400px; it doesnt move the logo at all. Why is this and how can i fix it?
styles/main.css
html, body {
padding: 0;
margin:0;
}
header {
position:fixed;
top:0;
width:100%;
height:102px;
background-color:#222;
padding:20px;
}
footer {
background: #222;
width: 100%;
height: 370px;
bottom: 0;
position: fixed;
}
.zebusoft-logo {
padding: 0;
top: 0;
position: fixed;
margin-left: 400;
}
mypage.html
<!doctype html>
<html>
<title>Joes Nose</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<header>
<div class="zebusoft-logo"><img src="images/logo-3.png" alt=""></div>
</header>
<body>
<div></div>
</body>
Simplified tests indicate this should work, provided you put the units (px) for your margin.
You have:
margin-left: 400;
You need:
margin-left: 400px;
In your CSS...
.zebusoft-logo {
padding: 0;
top: 0;
position: fixed;
margin-left: 400;
}
You set the margin-left to 400 but you don't specify what unit to use. You must specify the units unless the value is zero, so padding: 0; is OK but margin-left: 400; is illegal.
See the definition of dimensions in CSS3 Values and Units ยง 4.4 Numbers with Units: dimensions.
I assume you want pixels, so your margin must be set as margin-left: 400px;
Your html is also not structured correctly...
<!doctype html>
<html>
<title>Joes Nose</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<header>
<div class="zebusoft-logo"><img src="images/logo-3.png" alt=""></div>
</header>
<body>
<div></div>
</body>
You are missing the <head> element which is where your <title> and your link to the stylesheet should be, and your <header> must be within the <body> of the page:
<!doctype html>
<html>
<head>
<title>Joes Nose</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<div class="zebusoft-logo"><img src="images/logo-3.png" alt=""></div>
</header>
<div>...</div>
</body>
</html>
I think you may need to reformat your html and that will fix the problem.
<html>
<head>
<title>Joes Nose</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<style>
html, body {
padding: 0;
margin: 0;
}
header {
position: fixed;
top: 0;
width: 100%;
height: 102px;
background-color: #222;
padding: 20px;
}
footer {
background: #222;
width: 100%;
height: 370px;
bottom: 0;
position: fixed;
}
.zebusoft-logo {
padding: 0;
top: 0;
position: fixed;
margin-left: 400;
}
</style>
</head>
<body>
<header>
<div class="zebusoft-logo"><img src="images/logo-3.png" alt=""></div>
</header>
<div></div>
</body>
</html>
I don't want this scroll bar being here. I don't want it hidden but I want it disabled. No scrolling at all.
A screenshot: https://gyazo.com/22224e178263f80c25ecabb65c8ff77f.png
index.html and stylesheet.css:
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Home</title>
</head>
<body>
<div id="white">
</div>
</body>
</html>
CSS:
html {
height: 100%;
background-color: #272C34;
margin: 0%;
padding: 0%;
}
body{
height: 100%;
margin: 0%;
padding: 0%;
}
#white {
width: 100%;
height: 76%;
background-color: #E8E8E7;
margin-top: 10%;
margin-left: 0%;
margin-right: 0%;
margin-bottom: 0%;
z-index: 1;
}
It is Problem of browser set default padding/margin. Apply any of CSS Reset to the website .
If Don't Add any one of them find here http://www.cssreset.com/
or Use this Universal CSS reset
* {
margin: 0;
padding: 0;
}
body usually has a margin set it, remove it and your div should be 100% of the screen:
body{
margin: 0;
}
Also be aware that more tags have margins/paddings applied by default, you could use a reset.css or normalize.css to remove margins/paddings/etc to make your page render the same on all browsers:
if You mean Space in right and left in your Tmp. Add this to your Style
Body{
margin:0;
padding:0;
}
HTML:
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="nav">
<li>
<ul>
Hello
</ul>
</li>
</div>
</body>
</html>
CSS:
body{
margin: 0;
}
#nav{
width: 100%;
height: 80px;
background-color: #000000;
}
#nav ul{
list-style-type: none;
color:#ffffff;
font-weight: bold;
}
Screenshot:
See it Live.
Use: width: 100vw; overflow-X: hidden;
This should work. When there is a scrollbar, use overflow-X:hidden for width or overflow-y:hidden for height;
I want red square exactly overlap green one.
Everything works fine in FF, IE and Opera, but in Chrome red square aligning to the left, not center.
Also, I can affect only on #parent div and its children because I making a bookmarklet and I can't change other page elements.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
#center { text-align: center; }
#parent {
position: absolute;
display: inline;
}
#nested {
background-color: #c00;
width: 280px !important;
height: 210px !important;
}
</style>
</head>
<body>
<div id="center">
<div id="parent"><div id="nested"></div></div>
<div style="display: inline-block; width: 280px; height: 210px; background-color: #0c0;"></div>
</div>
</body>
</html>
Please, advice!
When I elaborated on chrome properties, I found that chrome is forcing display to block when you set position to absolute for #parent. How to make it inline?
I think this is visually what you asked for:
I only changed the CSS for #parent and #nested.
It looks the same in IE7/IE8, Firefox, Chrome, Opera, Safari.
Live Demo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
#center { text-align: center; }
#parent {
position: absolute;
left: 0;
right: 0;
/*top: 0;*/
text-align: center
}
#nested {
background-color: #c00;
width: 280px !important;
height: 210px !important;
display: inline-block
}
</style>
</head>
<body>
<div id="center">
<div id="parent"><div id="nested"></div></div>
<div style="display: inline-block; width: 280px; height: 210px; background-color: #0c0;"></div>
</div>
</body>
</html>