I started to design my portfolio and I have this problem I set pattern for a background but I want to have and 1 more color and 1 sliced image over this pattern. I started to code it and everything was fine except that my navigation menu and other things were under this color and picture which i added. This is the HTML code and CSS. Please help?!?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Wrapping up HTML5</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="top-wrap">
<div id="cornerfill"><div class="fillmask"></div></div>
<div id="fillright"><div class="rightfill"></div></div>
</div>
<div id="wrapper">
<header><h1>Using a HTML5 wrapper</h1></header>
<section>
<article>
<hgroup>
<h1>This is actually legal</h1>
<h2>Just wrap everything in a div, just like before</h2>
</hgroup>
<p>But it's probably better to simply use the body tag.</p>
</article>
</section>
<footer><p>Love from Kebman</p></footer>
</div>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
html
{
width:100%;
height:100%;
}
body {
width: 100%;
height: 100%;
min-width:960px;
min-height:600px;
margin: 0;
padding: 0;
background: #FFF url(../img/bg.png) fixed;
}
#cornerfill
{
position:fixed;
top:0;
left:0;
width:50%;
height:100%
}
#cornerfill .fillmask
{
width: 100%;
height: 100%;
background-color:#070707;}
#fillright {
position:fixed;
top: 0;
right: 0;
width:50%;
height: 100%;
}
#fillright .rightfill
{
margin-left:-20px;
width: 600px;
height: 100%;
background:url(../img/bgup.png) left bottom no-repeat;
}
#wrapper{
width: 960px;
margin: 0 auto;
}
header
{ width:auto;
height:auto;
background:#FFF;}
#top-wrap
{
width:100%
height:40%
}
Try applying z-index to control the layering of elements on the page.
Related
I have an absolutely placed div which uses the CSS as such:
.overlay {
position:absolute;
margin:0.5%;
z-index:100;
}
.topRightOverlay {
top:0;
right:0;
}
My body and HTML both have a min-height and width. However when I reduce the browser window to below the min size, the absolute div does not stick to the far top right, instead it follows the viewport in and then stays positioned as I scroll (not following the viewport back).
How can I ensure this div stays suck to the top right of the HTML/body, even if that means being off screen until scrolled to?
Here is the HTML Structure:
<html lang="en">
<body>
<form runat="server">
<div class="overlay topRightOverlay">
<!-- overlay content -->
</div>
<!-- content placeholder for content pages -->
</form>
</body>
</html>
And the HTML, Body CSS:
body, html {
height: 100%;
min-height:600px;
min-width:800px;
overflow:hidden;
}
html {overflow:auto;}
body,
html {
height: 100%;
min-height: 600px;
min-width: 800px;
overflow: hidden;
}
html {
overflow: auto;
}
form {
height: 100%;
}
.overlay {
position: absolute;
margin: 0.5%;
z-index: 100;
}
.topRightOverlay {
top: 0;
right: 0;
}
<html lang="en">
<body>
<form runat="server">
<div class="overlay topRightOverlay nonInteractive">
This is an overlay
</div>
<!-- content placeholder for content pages -->
</form>
</body>
</html>
If I understand you correctly:
You have to give body position: relative and add some javascript to keep the offset() of the absolute element.
Have a look yourself
$(document).ready(function(){
var posY;
document.onscroll = function(){
posY = 100 + $(window).scrollTop();//locate needed Y position
$("#absDiv").offset({top: posY}); //Apply position
};
})
body{
margin:0;
padding:0;
width: 100%;
position: relative;
}
section {
height: 1500px;
width:100%;
background-color: #2ecc71;
}
#absDiv {
width: 80px;
padding: 5px;
line-height: 17px;
position:absolute;
right:0;
top:100px;
background-color: #d35400;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="absDiv">
I'm pretty fixed to this place...
</div>
<section>
</section>
</body>
Hope I got you right and helped :)
Cheers,
Evoc
use absolute position with .topRightOverlay class .
hope will solve the problem
I've got CSS issue with footer on my webpage. I've used this article, but I've got empty space between footer and bottom of the page. Since there is no content in the body of my page the empty space is still here and there is an additional scrollbar when it's not needed. I really don't know why it's there. I've cleaned the CSS so there isn't any irrelevant code.
HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>My Page</title>
</head>
<body>
<div id="container">
<div id="header">
<p>
Header Content
</p>
<hr>
</div>
<div id="body">
Body Content
</div>
<div id="footer"><p id="copy">Copyright 2013</p></div>
</div>
</body>
And CSS:
html, body {height: 100%}
body {
margin: 0px;
padding: 0px;
}
#copy {vertical-align: bottom;text-align:center;font-family:Century Schoolbook;color:#8B0B04;font-size:14px;}
#footer {bottom: 0;width:100%;position: absolute;height: 60px}
#container {min-height: 100%;position: relative}
#body {padding-bottom: 60px}
My browser is Firefox, but in Chrome this doesn't work too. I will be so happy if you will give me any feedback and help. Thanks!
EDIT: I've posted something wrong imho. I will post the whole page next day. Again thanks for feedback.
Use overflow:hidden for container for removing the scroller
#container {
min-height: 100%;
position: relative;
overflow: hidden;
}
and padding-bottom for body div
#body{
padding-bottom:20px;
}
Demo and here is Demo with content
Maybe try this css instead of what you have up there:
html, body {
height: 100%
}
body {
margin: 0px;
padding: 0px;
}
#copy {
vertical-align: bottom;
text-align:center;
font-family:Century Schoolbook;
color:#8B0B04;
font-size:14px;
}
#footer {
bottom: 0;
width:100%;
position: absolute;
}
#container {
min-height: 100%;
position: relative
}
I am trying to position an image to be at the top of the page and stretching to both sides of the page with a height of 51px. However, there is a gap between the image and the top of the page and both sides of the page. Please can you tell me what I am doing wrong?
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
#twitter {
background: url(http://maxk.me/test/img/twitterbg.png) repeat;
height: 51px;
width: 100%;
position: fixed;
}
HTML
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="background">
<img src="...." class="stretch" alt="" />
</div>
<div id="twitter">
</div>
</body>
</html>
You need to remove the default margin on body:
html, body {
margin: 0;
padding: 0
}
You should also add a valid doctype as the very first line:
<!DOCTYPE html>
Without this, your page will be very broken in Internet Explorer, and generally inconsistent between different browsers.
I'm trying to make a really simple webpage. It should be a 1000px wide green, centered rectangle stretching all the way from the top to the bottom of the webpage on a red background, no matter how much content there is.
I can't get this working though. If I use min-height (like below), the green area doesn't stretch all the way to the bottom of the page if there's not enough content. If I replace it by height, the content overflows the green area if there's much content.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="container">
content here.
</div>
</body>
</html>
Here's the CSS:
html {
height: 100%;
}
body {
background-color: #F00;
margin: 0;
min-height: 100%;
}
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
height: 100%;
}
I know this is feasible with more divs, but it really should work without changing the HTML. How can I solve this?
By the way, I'm on Safari. I don't care about compatibility with browsers not respecting standards.
Here is a working sample:
<!doctype html>
<html>
<head>
<title>Container sample</title>
<style>
html, body
{
margin: 0;
padding: 0;
height: 100%;
background: red;
}
#container
{
background: green;
width: 1000px;
min-height: 100%;
margin: 0 auto 0 auto;
}
</style>
</head>
<body>
<div id="container">
Container sample
</div>
</body>
</html>
For more information take a look at my answer to a similar question.
you can use property position absolute for your requirement. It may help you
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
position:absolute;
top:0;
bottom:0;
left:50%;
margin-left:-500px;
}
Give your #container a position:absolute; with top and bottom set to 0.
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
position:absolute;
top:0;
bottom:0;
}
http://jsfiddle.net/jasongennaro/4ZLcD/
I want is this:
the blue area resizes with when the browser window resizes.
The header is visible.
the blue area starts where the header finishes (not behind the header or above).
the blue area ends before the footer.
between the blue area and the footer exist 5 yellow pixels.
Is this possible only with CSS and HTML ( without any javascript ) ?
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<style>
*{
margin:0px;
padding:0px;
}
header, nav, article, footer, address {
display: block;
}
header{
position:relative; height: 50px; background-color:#2b2b2b;
}
footer{
height: 50px;
width:100%;
bottom: 0px;
position: fixed;
background: red;
}
#explorer{
position:relative; bottom:55px;
}
#sections{
width: 100%; height: 100%; bottom: 55px; position:fixed; background: blue;
}
</style>
</head>
<body style="background-color:yellow">
<header >
<h1>Test</h1>
</header>
<div id="explorer" >
<div id="sections" >
</div>
</div>
<footer>
/* Footer Content */
</footer>
</body>
</html>
I think Kit's code needs just one adjustment & that is we have to remove the height:100% from the sections div & it will work just fine. Also while testing the following code, i noticed that if we reduce the height beyond a limit the footer actually comes above the header. Although, practically the height would never be so less, but still you might want to add z-index:5000 to header tag
Like this?
<html>
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style type="text/css">
html, body, h1 {
margin:0px;
padding:0px;
}
header, nav, article, section, footer, address {
display: block;
}
header {
position:relative;
height: 50px;
width: 100%;
background-color:#2b2b2b;
}
footer{
height: 50px;
width:100%;
bottom: 0px;
position: fixed;
background: red;
border-top: 5px solid yellow;
}
#explorer{
position:relative; bottom:55px;
}
#sections{
width: 100%;
height: 100%;
bottom: 55px;
position:fixed;
top: 50px;
background: rgba(0,0,256,.5);
}
</style>
</head>
<body>
<header >
<h1>Test</h1>
</header>
<div id="explorer" >
<div id="sections" >
</div>
</div>
<footer>
/* Footer Content */
</footer>
</body>