How do I get "mymessage.gif" to show over "bread_wine.jpg".
mymessage.gif has a transparent background.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>overlap images</title>
<style type="text/css">
<!--
#navbar {
font-size: 18px;
font-weight: bold;
text-align: center;
}
#thebigimage {
background-image: url(bread_wine.jpg);
height: 548px;
width: 731px;
margin-right: auto;
margin-left: auto;
}
#overlapthis {
background-image: url(mymessage.gif);
}
-->
</style>
</head>
<body>
<div id="navbar">this is the nav bar</div>
<div id="thebigimage">
<div id="overlapthis"></div>
</div>
</body>
</html>
#overlapthis {
background-image:url("mymessage.gif");
height:100px;
left:50px; /* play around with this */
position:absolute;
top:90px; /* and play around with this */
width:500px;
}
#thebigimage {
background-image:url("bread_wine.jpg");
height:548px;
margin-left:auto;
margin-right:auto;
position:relative; /* and this has to be relative */
width:731px;
}
Try
#overlapthis {
position: absolute;
top: ??px;
left: ??px;
z-index: 1;
}
As you have it right now, the image overlaps already. You just can't see it because you didn't add sizes to your overlapthis div. Try this:
#overlapthis {
background-image: url(mymessage.gif);
width: 500px;
height: 100px;
}
Then add margins (and an position: absolute) to position the image at your desired location.
Related
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 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.
The layout for this is rather simple and easy to achieve and has been covered here a lot, my problem comes from when I want the right div to be scrollable.
I simply cannot get the left side to be fluid and statically positioned while allowing the right side to be a fixed width and scrollable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" style="display: none !important;">
body {
margin: 0 0 0 0;
overflow: hidden;
}
#page-wrap {
background: white;
max-width: 100%;
}
#main-content {
background-color: #797979;
padding-right: 350px;
padding-top: 20px;
height: 100%;
float: left;
position: absolute;
}
#right-sidebar {
background-color: #cacaca;
width: 350px;
float: right;
overflow: auto;
height:100%;
}
</style>
</head>
<body>
<div class="page-wrap">
<div id="main-content">
<h2>Content Area</h2>
</div>
<div id="right-sidebar">
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
Try this - jsFiddle
body {
margin: 0 0 0 0;
background-color: #797979;
/*overflow: hidden;*/
}
#page-wrap {
background: white;
max-width: 100%;
}
#main-content {
position:absolute;
right:200px;
left:0px;
padding:20px;
}
#right-sidebar {
background-color: #cacaca;
position:fixed;
overflow-y:scroll;
right:0px;
width:200px;
height:100%;
}
I have searched and searched and tried many of options to fix this "bug", and I cannot get it to work. I have a div that has a background image that is half-way hidden behind the wrapper. On hover, it animates towards the top. The link is inside an absolute positioned div, and has no text. On IE there is no "pointer", therefore making the link un-clickable. This works in Chrome/FF.
I've tried:
border-right 1px transparent (this i actually can get a "pointer"
on the far right, but it's so small
background:
url(/images/transparent.gif) 0 0 repeat; (yes i made a 1x1px trans
image)
put another div inside the anchor that has the background
image
z-index: 0 or 1 or 2
I would like the CSS/HTML fix for this, not javascript. Thanks so much!
CSS
#wrapper
{
width: 950px;
margin: 60px auto 40px;
background-color: #fff;
position:relative;
}
.login-btn
{
background: url(/images/btn-sprite.png) no-repeat 0 -48px;
height: 34px;
width: 98px;
}
#login-btn
{
position:absolute;
top:-15px;
right:20px;
z-index:-1;
}
#login-btn a
{
display:block;
width: inherit;
height: inherit;
background-image: url(/images/transparent.gif) 0 0 repeat;
}
HTML
<div id="wrapper" class="round">
<div id="login-btn" class="login-btn">
<a href="#">
</a>
</div>
.....
.....
Here is your code, i am attaching the image also please copy to youe image folder and test. i checked in ie8 and ie7 it is working fine.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#wrapper {
width: 950px;
height:450px;
margin: 0 auto;
background-color: #fff;
border:#F33 solid thin;
position:relative;
}
#login-btn {
height: 33px;
width: 145px;
display:block;
position:absolute;
right:0;
top:5px;
}
#login-btn a:link, #login-btn a:visited {
background:url(images/btn-sprite.png) top left no-repeat;
height: 33px;
width: 145px;
display:block;
}
#login-btn a:hover {
background:url(images/btn-sprite.png) bottom left no-repeat;
height: 33px;
width: 145px;
display:block;
cursor:pointer;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="login-btn">
</div>
</body>
</html>
i figured it out. in IE, you cannot have an anchor w/ a negative z-index, b/c it hides it behind the body or whatever, and the event doesn't get passed through. basically what I ended up doing is placing the anchor around the div (login-btn), and giving the div a z-index of -1, therefore relieving the z-index on the anchor
HTML
<div id="wrapper" class="round">
<a href="#" id="login-btn">
<div class="login-btn">
</div>
</a>
....
....
CSS
#wrapper
{
width: 950px;
margin: 60px auto 40px;
background-color: #fff;
position:relative;
}
.login-btn
{
background: url(/images/btn-sprite.png) no-repeat 0 -48px;
height: 34px;
width: 98px;
}
a#login-btn
{
display:block;
height: 34px;
width: 98px;
position:absolute;
top:-15px;
right:20px;
}
a#login-btn div
{
z-index: -1;
position:relative;
}
I'm working on a brand new website and I'm trying to just get the basic layout going. I am using the ASP.NET MVC 4 generated HTML and I would like to get the DIV named body to fill the available space after making room for the header and thus anchoring the footer to the bottom of the browser window. However, what I'm getting right now is three panels just stacked on top of each other.
I would like a solution that would work if the browser supported HTML5 and one if it didn't
Please note I've inlined comments in the CSS to try and explain what I've tried.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">#Html.ActionLink("Title", "Index", "Home")</p>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - ACME. All rights reserved.</p>
</div>
<div class="float-right">
<ul id="social">
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div>
</div>
</footer>
#RenderSection("scripts", required: false)
</body>
</html>
CSS
body {
/* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF THE BODY ITSELF WOULD SPAN */
/* WITH NO OTHER CSS APPLIED TO THE body ELEMENT */
/*height: fill-available;*/
/*height: 100%*/
}
/* general layout
----------------------------------------------------------*/
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear-fix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* main layout
----------------------------------------------------------*/
.content-wrapper {
margin: 0 auto;
max-width: 960px;
}
#body {
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
/* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF I COULD GET THIS ELEMENT TO SPAN */
/* WITHOUT ANY OTHER CSS APPLIED TO THE body TAG */
/*height: fill-available;*/
/*height: 100%*/
}
.main-content {
/*background: url("../Images/accent.png") no-repeat;*/
padding-left: 10px;
padding-top: 30px;
}
.featured + .main-content {
/*background: url("../Images/heroAccent.png") no-repeat;*/
}
footer {
clear: both;
background-color: #e2e2e2;
font-size: .8em;
height: 100px;
}
/* site title
----------------------------------------------------------*/
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 2.3em;
margin: 20px 0;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}
/* social
----------------------------------------------------------*/
ul#social li {
display: inline;
list-style: none;
}
ul#social li a {
color: #999;
text-decoration: none;
}
a.facebook, a.twitter {
display: block;
float: left;
height: 24px;
padding-left: 17px;
text-indent: -9999px;
width: 16px;
}
a.facebook {
background: url("../Images/facebook.png") no-repeat;
}
a.twitter {
background: url("../Images/twitter.png") no-repeat;
}
Just snap the header and footer at the bottom of the page using fixed positioning.
header, footer{ position:fixed; left:0; right:0; z-index:1; }
header{ top:0; }
footer{ bottom:0; }
Then you can give your body the background your div#body had before. The div gets no background and will expand as much as needed.
div#body{ background:none; }
body{ background:#eee; }
This will look like the div would fill the remaining space of the page. Finally give your header and footer a background so that you can't see the background of the body under it.
header, footer{ background:#fff; }
By the way I would suggest removing body margins. body{ margin:0; }
I believe it's a bit impossible to do that with just CSS. You can make a webpage with 100% height like this:
html{
height: 100%;
}
body{
height: 100%;
}
#body{
height: 100%;
}
And then for header, body and footer you can do like this:
header{
height: 100px;
left: 0;
position: absolute;
top: 0;
width: 100%;
background-color: #f00;
}
#body{
bottom: 100px;
left: 0;
position: absolute;
right: 0;
top: 100px;
background-color: #fff;
}
footer{
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
background-color: #ff0;
}
It might work for a bit, but it'll break at some point. When you resize your browser, it'll be running out of room for your #body. If you want a better solution, you should use javascript. In your javascript, calculate how much space you have for your #body, then either adjust the height of header and footer. Or adjust the #body instead.