The HTML:
<div id="broadcast">
<div id="broadcast_header">
Neighbourhood Broadcast
</div>
</div>
The CSS:
#broadcast_header
{
background-color: #A0522D;
width: 100%;
height: 20px;
position: relative;
top: -20px;
font-weight: bold;
}
Firefox: All fine, header appears 20px above the div, its cool.
IE: Refuses to show div(broadcast_header)!
Overflow: visible
doctype definition: Given
My input: Suppose change top to - top: -5px; It shows the div(header) partially. Thank you :].
try top:-10px,it will show in IE and Firefox
You have to set the height and width css for #broadcast
#broadcast
{
height:200px;
width:200px;
position:relative
}
#broadcast_header
{
background-color: #A0522D;
width: 100%;
height: 20px;
margin-top: -20px;
font-weight: bold;
}
Related
I am creating a navbar in my website and I want my logo to show next to my site name within the navigation bar, but it doesn't want to cooperate. In the code below is my html with the image inside of my nav bar.
Below is what my css looks like. I tried all of the different position types and I tried to set the navimage's margin and padding.
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
#navtitle {
color: white;
font-family: cursive;
font-size: 25px;
position: relative;
top: 20;
margin-top: 10px;
margin-left: 40px;
}
#navimage {
position: absolute;
margin-top: 0px;
margin-left: 140px;
}
<div class="navbar">
<p id="navtitle">Rainforest</p>
<div class="navimage">
<a>
<img src='http://i.imgur.com/Eqbvkgb.png'>
</a>
</div>
</div>
Any ideas?
The simplest way is to put the image inside your paragraph.
<p id="navtitle"><img src='http://i.imgur.com/Eqbvkgb.png'>Rainforest</p>
Size the image as needed.
Your position: absolute prevents the images from appearing as you want, try removing this and adding display:block so that the elements will appear next to each other. You'll probably want to change the css of your image to make it smaller.
Try something like this. Also the image is larger then 50 px so it automatically goes below the nav bar because it can't fit inside. Also, you have navimage title set to class in your html, but its written as an id in your css. ids are with # and class should be .navimage
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
#navtitle {
float: left;
}
.navimage {
float:left;
}
<div class="navbar">
<div id="navtitle"><p>Rainforest</p></div>
<div class="navimage">
<a>
<img src='http://i.imgur.com/Eqbvkgb.png'width="20" height="20">
</a>
</div>
</div>
Concept:
Use of float property.
The Code:
Use float:left; for navbar and its elements.This will allow them to overlap each other.
Use position to position them.
Note: I gave Id to the img itself. It is always easier to manipulate the image directly
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
float:left;
}
#navtitle {
color: white;
font-family: cursive;
font-size: 25px;
position: relative;
top: 20;
margin-top: 10px;
margin-left: 40px;
float: left;
}
#navimage {
position: absolute;
margin-top: 0px;
margin-left: 140px;
float:left;
}
#logoimg{
height: 50px;
position: absolute;
left: 2px;
}
<div class="navbar">
<p id="navtitle">Rainforest</p>
<div class="navimage">
<a>
<img id="logoimg" src='http://i.imgur.com/Eqbvkgb.png'>
</a>
</div>
</div>
You set an absolute positioning of the continer, so you should do in this way:
.navbar {
width: 100%;
background-color: #2ecc71;
z-index: 1;
position: absolute;top:0;left:0;
}
#navtitle {
color: #FFF;
font-family: cursive;
font-size: 25px;
margin-left: 10px;
position: relative;
margin-top:10px;
}
#navimage, img {
display:inline;
float:left;
width:30px;
height:40px;
padding:10px
}
http://jsfiddle.net/u3upgedx/
I'm puzzled by the following problem. I wish to (absolutely) position the baseline of some piece of HTML text at a certain y-coordinate, while the text should be starting at a certain x-coordinate. The following diagram clearly demonstrates the issue.
So I basically want to control where the point (x,y), henceforth called the "basepoint", in the diagram is located on the screen, relative to the top-left corner of the BODY of the document or some DIV. Important: I don't know beforehand what the font-family or font-size of the text is. This is important, because I don't want to change all the positions in my CSS whenever I change fonts.
In the following code, I try to position the basepoint at (200,100), but instead it positions the top-left of the DIV at that point.
<html>
<style>
BODY
{
position: absolute;
margin: 0px;
}
#text
{
position: absolute;
top: 100px;
left: 200px;
font-family: helvetica, arial; /* may vary */
font-size: 80px; /* may vary */
}
</style>
<body>
<div id="text">css=powerful</div>
</body>
</html>
So how should I modify this code? Should I use the vertical-align property of the enclosing DIV? (I tried, but couldn't get the desired result).
Thanks for any useful replies.
Hacky solution based on this blog post.
HTML:
<body>
<div id="text">css=powerful</div>
</body>
CSS:
body {
margin: 0;
}
#text {
font-size: 30px;
line-height: 0px;
margin-left: 100px;
}
#text:after {
content: "";
display: inline-block;
height: 120px;
}
JsFiddle. The basepoint is aligned to (100, 120).
jsFiddle Goofy (and crazy ugly/hacky), but it works.
<body>
<div id="spacer"></div>
<div id="text">
<img src="http://placehold.it/10X100" id="baseline">css=powerful</div>
</body>
...
body {
margin: 0px;
}
#spacer {
float: left;
width: 190px;
height: 100px;
background-color: red;
}
#baseline {
visibility: hidden;
}
#text {
float: left;
background-color: yellow;
font-family: helvetica, arial; /* may vary */
font-size: 60px; /* may vary */
}
Edit
I guess, really, it's all about the image. So you could just simplify and use a transparent spacer gif. Still stupid hacky, I know.
jsFiddle
By default inline-block/inline and text in block are baseline vertical-aligned. Create an pseudo element inside the block you want to move in Y and defining the height of this spacer.
/**
Create a vertical spacer. It will be aligned with the parent's content baseline:
**/
.text::before{
content: "";
/*the Y value:*/
height: 100px;
width: 0px;
display: inline-block;
}
/**
The rest (only for this demo)
**/
body{
font-family: sans-serif;
font-size: 60px;
margin: 0;
}
body::before{
content: "";
display: block;
position: absolute;
top: 100px;
width: 100%;
height: 2px;
margin: -1px 0;
background-color: #00D500;
z-index: 1;
}
body::after{
content: "";
display: block;
position: absolute;
top: 100px;
left: 200px;
height: 8px;
width: 8px;
margin: -4px;
border-radius: 50%;
background-color: #FF0077;
z-index: 1;
}
.text {
margin: 0;
position: absolute;
/*the X value:*/
left: 200px;
}
<p class="text">css=powerful</p>
Try this :
HTML :
<div id="text-holder">
<div id="text-holder-position"></div>
<div id="text">css=powerful</div>
</div>
<div id="heightJudger"></div>
CSS :
BODY
{
position: absolute;
margin: 0px;
}
#text
{
position: relative;
margin-top:-0.938em;
left:0px;
font-family: helvetica, arial;
font-size: 80px;
/*You can remove this*/
background: yellow;
opacity: 0.5;
}
#text-holder
{
position: absolute;
height: 200px;
left: 200px;
}
#text-holder-position {
position: relative;
height: 200px;
width: 200px;
background: green;
}
#heightJudger {
position:absolute;
height:200px; width:200px;
background:red;
top:0; left:0;
}
if you want to change the position, change the "height" and the "left" parameters of the #text-holder
This way you will be able to control your basepoint position.
I put the height judger and some color so you can see if it's what you exepct.
EDIT : Changed the #text margin unit to em.
JSFiddle
I have two video tags which I want to align at bottom corner of the screen. further, the inner video tag should overlap outer video tag, like this image given below:
This is what I could come up with:
<body>
<div class="container">
<div class="widget_contaner">
<div class="widget_head">this is head of widget</div>
<div class="widget_body">
<video class="large_video" src="#"></video>
<video class="mini_video" src="#"></video>
</div>
</div>
</div>
</body>
css
.widget_contaner {
right: 0px;
position: fixed;
bottom: 30px;
z-index: 99999999999999;
}
.widget_header {
background-color: #3fa757;
width: 240px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
border: 1px solid #ccc;
font-size: 12px;
height: 25px;
line-height: 25px;
font-family:'Open Sans', sans-serif;
border-radius: 5px;
}
.widget_body {
width: 240px;
height: 150px;
}
.large_video {
height: 100%;
width: 100%;
}
.mini_video {
position: absolute;
height: 30%;
width: 30%;
bottom: 32px;
right: 4px;
opacity: 0.75;
}
so I was wondering how can I get these video tags to get positioned relative to each other as just given in the image?
Jsfiddle: click here
Like this?
http://jsfiddle.net/EbsaL/3/
I added background colour so it is easier to see
.widget_body {
width: 240px;
height: 150px;
position: relative;
}
.large_video {
height: 100%;
width: 100%;
background: green;
}
.mini_video {
position: absolute;
height: 30%;
width: 30%;
top: 0px;
right: 0px;
opacity: 0.75;
background: purple;
}
The widget body is positioned relatively, and you just need to give the mini video position absolute and top right 0px. If you want the widget positioned at the bottom right corner then do bottom:0; for widget container
See if this is what you are looking for. Note that I changed the background and borders so I could see it. Mainly needed to add absolute positioning to the larger video frame along with some bottom properties set to 0.
.large_video {
height: auto;
width: 100%;
border: 2px solid #000;
position: absolute;
bottom: 0;
}
http://jsfiddle.net/derekstory/EbsaL/2/
I have some code as follows where I think my layering is causing a rendered link to be unclickable. Some of this example I've converted to styles from external CSS classes for ease of writing this up as a small use case. This is currently being testing on modern browsers (latest stable FF and Chrome).
<body>
<!-- whole container needs to be at z-index of -1 -->
<div id="container">
<div class="corner" id="backgroundTopLeft"></div>
<div class="corner" id="backgroundTopRight"></div>
<div class="corner" id="backgroundBottomLeft"></div>
<div class="corner" id="backgroundBottomRight"></div>
<!-- whole container needs to be at z-index of 1 -->
<div id="container2">
<div id="headerSection"><img src="images/jClarity_logo.png" alt="logo" /></div>
<div id="navigationSection">
<a class="selected" href="#">Introduction</a><span class="menuDivider">|</span>About
</div>
</div>
</div>
</body>
And the CSS
#charset "utf-8";
/* Default margin, padding and font-family */
*
{
font-family: Arial;
margin: 0px;
padding: 0px;
}
/* All images should have no borders by default */
img
{
border: none;
}
/* Global styling for links, uses black as the color */
a
{
color: #000000;
text-decoration: none;
}
a.selected
{
font-weight: bold;
}
a:hover
{
color:#FF00FF;
}
#container
{
position: relative;
z-index: -1;
height: 100%;
}
.corner
{
position: absolute;
height: 100px;
width: 100px;
background-color: #172944;
z-index: -1;
}
#backgroundTopLeft
{
top: 0px;
left: 0px;
}
#backgroundTopRight
{
top: 0px;
right: 0px;
}
#backgroundBottomLeft
{
bottom: 0px;
left: 0px;
}
#backgroundBottomRight
{
bottom: 0px;
right: 0px;
}
#container2
{
position: relative;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.8;
filter:alpha(opacity=80);
background-image:url('../images/groovepaper.png');
}
/* The headerSection div, designed to fit in a centered logo */
#headerSection
{
margin-left: auto;
margin-right: auto;
padding-bottom: 70px;
padding-top: 54px;
height: 70px;
width: 250px;
}
/* The navigationSection div, designed to fit in the menu */
#navigationSection
{
padding-bottom: 15px;
margin-left: auto;
margin-right: auto;
width: 600px;
text-align: right;
}
.menuDivider
{
color: #666666;
padding-left: 5px;
padding-right: 5px;
}
It all looks fine (lots of other purely color/font-size type styling is applied), but foobar.html is not clickable.
I'm pretty sure I've done something wrong with the layering, but I thought the use of z-indices would sort me out..
Working fine http://jsfiddle.net/hPkTu/, if the problem is with IE8, use z-index:1; IE8 is known to be buggy with this particular problem of z-index's.
UPDATE You changed your question, here is the working jsFiddle of your updated problem http://jsfiddle.net/VjTXu/2/. I changed z-index of container to O, -1 was making it go below body and that's why your link was not clickable, now it is.
The HTML:
<div id="broadcast">
<div id="broadcast_header">
Neighbourhood Broadcast
</div>
</div>
The CSS:
#broadcast_header
{
background-color: #A0522D;
width: 100%;
height: 20px;
position: relative;
top: -20px;
font-weight: bold;
}
Firefox: All fine, header appears 20px above the div, its cool.
IE: Refuses to show div(broadcast_header)!
Overflow: visible
doctype definition: Given
My input: Suppose change top to - top: -5px; It shows the div(header) partially.
Thank you :].
Add body { margin:0 } in your CSS.
This works differently. The surrounding element (#broadcast) has to have the position: relative; property. Then you can position (#broadcast_header) relative to this one by using position: absolute;
#broadcast_header
{
background-color: #A0522D;
width: 100%;
height: 20px;
position: absolute;
top: -20px;
font-weight: bold;
}
#broadcast
{
position: relative;
}