I am trying to build a container with the dimensions of 26x26 pixels and display a number at the very bottom right of this container. In addition, I would like to add a background 24x24 picture to the container.
The code I have so far is as follows
<html>
<style>
body {
height:26px;
width:26px;
background-color:red;
}
#bottom {
vertical-align:bottom;
text-align:right;
background-color:yellow;
}
</style>
<body>
<p id="bottom">2</p>
</body>
</html>
And here's a JSFiddle link to make things easier https://jsfiddle.net/n8ku715x/
As you can see from JSFiddle, it is not entirely working. It's not even setting the right dimensions. Any help is appreciated.
<style>
body {
}
#ctn {
height: 26px;
background-color: red;
width: 26px;
position:relative
}
#bottom {
position: absolute;
bottom: 0;
right: 0;
font-size: 8px;
color: #fff
}
</style>
<body>
<p id="ctn"><span id="bottom">2</span></p>
</body>
Here's your container, with the number within it - is that what you were looking for?
Try this:
CSS
.container{
width:26px;
height:26px;
position:relative;
background-color:red;
}
.container-number{
position:absolute;
bottom:0;
right:0;
background-color:yellow;
}
HTML
<div class="container">
<div class="container-number">2</div>
</div>
Just add bottom 0 and position to the class if u wants the fixed
CSS
#bottom {
background-color: yellow;
bottom: 0px;
position: fixed;
}
Related
I've been trying to get the the left and write columns to stick to the bottom of the green box like this http://i.imgur.com/zxChJx5.png but after an hour I'm still having trouble, if anyone could help that would be most appreciated, thank you very much http://jsfiddle.net/jybu6j47/
<!DOCTYPE html>
<html>
<head>
<style>
.well {
height: 300px;
width: 50%;
background-color:green;
}
.something {
background-color: yellow;
}
.left123 {
width: 50%;
float: left;
background-color: pink;
}
.right123 {
width: 50%;
float: right;
text-align:right;
background-color:red;
</style>
</head>
<body>
<div class="well">
Filler
<div class="something">
<div class="left123">Left</div>
<div class="right123">Right</div>
</div>
</div>
</body>
</html>
You need to position:relative; the container, and position:absolute; the contents, then set bottom: 0 on the contents like this:
http://jsfiddle.net/jybu6j47/1/
So it should look like this:
.well {
height: 200px;
width: 50%;
background-color:green;
position:relative;
}
.something {
position:absolute;
bottom:0;
width:100%;
background-color: yellow;
}
Position absolute tells an element exactly where to be, relative to it's closest position:relative (or absolute – or a couple of other properties come to think of it) container. In this case, giving it bottom:0 is effectively saying "Put me zero pixels from the bottom of the container".
I'm new to front end design.
made a code like this.
<div id="header">
header
</div>
<div id="content">
content
</div>
<div id="sidebar">
in here will be login module
</div>
how can the sidebar will be trespassing area like the pic?
any good solution?
If you simple need to position sidebar like this, you can use position: absolute. As a very basic test add following classes to your HTML:
body {
margin:0
}
div {
border: 1px solid black
}
#header {
height: 50px;
}
#content {
height:200px
}
#sidebar {
position: absolute;
top: 0;
left: 100px;
width: 100px;
height: 250px;
}
And here is a demo: http://jsfiddle.net/Mxqh4/
Again this is just a demo, and in a real project would have to be dynamically adjusted, but that's should give you a start.
Of course it's possible. Anything is possible with CSS ;)
You have to learn to use the position property and float.
DEMO HERE
#wrap{
width:100%;
margin:0 auto;
}
#header{
width:100%;
height:50px;
background:orange;
}
#content{
width:100%;
height:500px;
background:green;
float:;
}
#sidebar{
width:25%;
height:550px;
background:red;
float:left;
position:relative;
bottom:550px;
left:20px;
}
Layout of the web page i am designing is like this fiddle : http://jsfiddle.net/5sTub/
EDIT: NOTE: I am not trying to get a sticky footer. i just want to position it at bottom of the page. Please see the fiddle before you answer
i am trying to position the footer at the bottom of the page but am unable to as you can see in the link above. i have tried everything i found on the internet including setting the container element's position:relative; and the footer's position:absolute; and bottom:0; but nothing seems to be working, in fact, if you add the container div to the code and make its position:relative;, and add the following css to footer : position:absolute; bottom: 0; , the footer seems to disappear somewhere. I've been struck on this problem since quiet a long time and the only solution i've found so far is to set my header and my content and the footer's position:static; , which dosent server the purpose and ruins whole layout and looks quiet ugly. I want to avoid the use of javascript. please help, thanks in advance.
EDIT: Illustration of what i need:
where blue is the footer, dark blue is header, light blue is actual content and pink one is a sticky div. i do not want to make footer sticky, but i want it to be like one you'll find on a normal page, only problem is that it dosent stay at the bottom of the page (see the fiddle)
You can use Sticky Footer method for this. Read this http://ryanfait.com/sticky-footer/
For example write like this:
HTML
<div class="container"></div>
<div class="footer"></div>
CSS
body,html{
height:100%;
}
.container{
min-height:100%;
}
.footer{
height:40px;
margin-top:-40px;
}
Check this for more Flushing footer to bottom of the page, twitter bootstrap
Use this
add this css property in your css
html, body{height:100%}
div#footer {
color: white;
background: rgba(68, 68, 68, 0.8);
width: 100%;
position:absolute;
bottom:0;
}
Will it help http://jsfiddle.net/5sTub/1/
I do not know if you resolved this or not, however I ran into a similar problem and resolved as follows:
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN" " http://w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css" >
div#mypage {
top:0;
background: purple;
color: white;
}
div#pageheader {
top:0;
left:0;
height: 20%;
position:absolute;
width:100%;
background: green;
color: white;
}
div#pagecontent {
}
div#contentleft {
display: inline-block;
background: blue;
position:absolute;
border-radius: 2px;
left:0%;
right: 15%;
width:15%;
height: 92.5%;
top: 5%;
color: white;
}
div#contentcenter {
display: inline-block;
background: yellow;
position:absolute;
border-radius: 2px;
left:15%;
right: 30%;
width:80%;
height: 92.5%;
top: 5%;
color: black;
}
div#contentright {
display: inline-block;
background: red;
position:absolute;
border-radius: 2px;
left:95%;
right: 5%;
width:5%;
height: 92.5%;
top: 5%;
color: white;
}
div#pagefooter {
color: white;
background: rgba(68, 68, 68, 0.8);
width: 100%;
height: 2.5%;
position:fixed;
left:0;
bottom:0;
}
</style>
<head>
<title>Multiple Div's</title>
</head>
<body bgcolor="#cccccc">
<div id="mypage">
<div id="pageheader">HDR</div>
<div id="pagecontent">PAGE CONTENT
<div id="contentleft">LEFT</div>
<div id="contentcenter">CENTER</div>
<div id="contentright">RIGHT</div>
</div>
<div id="pagefooter">FOOTER</div>
</div>
</div>
</body>
</html>
I am trying to make an overlapping a DIV onto other visually . I am trying
{
position:absolute;
top:-10px;
}
in css, but I found that this top attribute is not working properly in firefox. Dear fellas, how to do that? Please help me with some codes or examples.
thx in advance
Here's an easy way
CSS
.top {
position: relative;
}
.topabs {
position: absolute;
}
HTML
<div class='top'>
<div class='topabs'>
I'm the top div
</div>
</div>
<div>No styles, just frowns :(</div>
The relative positioned div collapses as there are no contents, causing the coordinates 0,0 coordinates of the absolute positioned div to be that of the div underneath.
Fiddle
http://jsfiddle.net/y5SzW/
Try this, I like to use relative position for this kind of thing.
<html>
<head>
<style type="text/css">
body{
background-color: #000;
padding:0;
margin:0;
}
#bottom {
width: 200px;
height: 200px;
border: 5px #fff solid;
background-color:#f00;
margin: 0 auto;
}
.top {
width: 200px;
height:200px;
top: 10px;
left: -100px;
z-index: 10;
background-color: #00f;
color: #333;
border: 5px solid #fff;
position: relative;
}
</style>
</head>
<body>
<div id="bottom">
<div class="top"></div>
</div>
</body>
</head>
I would of course seperate the CSS into it's own file later.
Just use position: relative instead of absolute, or add a negative margin-top: -10px instead.
alt text http://img13.imageshack.us/img13/9776/dviswheretogo.png
Blue is where the image of the corners will go
Green is a repeating image on the x axis on the top, all part of the same template!
And orange is a simgle image repeating on the y axis
For clarification here is what I've tried so far, i'm angry about this because when I use relative position it breaks because of an with background that is above! Anyway I need to define a height and width for each item!
.sheet {position:relative;
top:140px;
width:1000px;}
.tl {
background:url(../images/sheet_top_left-trans.png) no-repeat;
width:20px;
height:20px;
top:0px;
left:0px;}
.tm {
background:url(../images/sheet_top-trans.png) repeat-x;
width:960px;
height:20px;}
.tr {
background:url(../images/sheet_top_right-trans.png) no-repeat;
width:20px;
height:20px;
top:0px;
right:0px;}
.content {
background:url(../images/sheet_middle.png) repeat-y;
top:20px;
width:1000px;
height:400px;}/* Demonstration only, please remove later */
.bl {
background:url(../images/sheet_bottom_left-trans.png) no-repeat;
width:20px;
height:30px;}
.bm {
background:url(../images/sheet_bottom-trans.png) repeat-x;
height:30px;
width:960px;
bottom:0px;
left:20px;}
.br {}
and the html
<div class="sheet"><!-- Glass Effect Starts here -->
<div class="tl"></div>
<div class="tm"></div>
<div class="tr"></div>
<div class="content">Here we go again</div>
<div class="bl"></div>
<div class="bm"></div>
<div class="br"></div>
If I use absolute postitioning I can't make the bottom images stick to it! tho it works at the top!
Now I've found I way to do it that is cross-browser (even IE6 just don't use transparent PNG as I did) here we go:
HTML:
<div class="sheet">
<div class="top_sheet">
<div class="tl"></div>
<div class="tm"></div>
<div class="tr"></div>
</div>
<div class="middle">.</div>
<div class="bottom_sheet">
<div class="bl"></div>
<div class="bm"></div>
<div class="br"></div>
</div>
</div><!-- End of the sheet class -->
CSS:
.sheet {position:relative;
width:1000px;
top:10px;}
.top_sheet {width:1000px;
height:20px;}
.tl {float:left;
background:url(../images/sheet_top_left-trans.png) no-repeat;
height:20px;
width:20px;}
.tm {float:left;
background:url(../images/sheet_top-trans.png) repeat-x;
height:20px;
width:960px;}
.tr {float:right;
background:url(../images/sheet_top_right-trans.png) no-repeat;
height:20px;
width:20px;}
.middle {position:relative;
background: url(../images/sheet_middle.png) repeat-y;
width:1000px;
height:400px;}
bottom_sheet {width:1000px;
height:30px;}
.bl {float:left;
background:url(../images/sheet_bottom_left-trans.png) no-repeat;
width:20px;
height:30px;}
.bm {float:left;
background:url(../images/sheet_bottom-trans.png) repeat-x;
width:960px;
height:30px;}
.br {float:right;
background:url(../images/sheet_bottom_right-trans.png) no-repeat;
width:20px;
height:30px;}
Trying to use the same html you already have, here is something that seems to work pretty well.
Move the corners into an all encompassing top and bottom bar. And then float the respective corners left and right.
CSS:
.sheet {
position:relative;
width:1000px;
top:140px;}
.tl {
background:url(images/sheet_top_left-trans.png) no-repeat;
float:left;
width:20px;
height:20px;
margin-left:-20px;}
.tm {
background:url(images/sheet_top-trans.png) repeat-x;
height:20px;
margin-left:20px;}
.tr {
background:url(images/sheet_top_right-trans.png) no-repeat;
float:right;
width:20px;
height:20px;}
.content {
background:url(images/sheet_content.png) repeat-y;
clear:both;
height:200px;}/* Demonstration only, please remove later */
.bl {
background:url(images/sheet_bottom_left-trans.png) no-repeat;
float:left;
width:20px;
height:30px;}
.bm {
background:url(images/sheet_bottom-trans.png) repeat-x;
height:30px;}
.br {
background:url(images/sheet_bottom_right-trans.png) no-repeat;
float:right;
width:20px;
height:30px;}
HTML:
<div class="sheet"><!-- Glass Effect Starts here -->
<div class="tm">
<div class="tl"></div>
<div class="tr"></div>
</div>
<div class="content">Here we go again</div>
<div class="bm">
<div class="bl"></div>
<div class="br"></div>
</div>
</div>
Have you tried some cross-browser css framework, e.g. http://www.blueprintcss.org?
These frameworks usually let you define grids and will help you to overcome browser-specific quirks by resetting certain css properties ...
Fluid width containers with rounded corners using valid CSS and XHTML
The method I usually see is nesting all the divs to layer them, then setting the background-repeat and background-position on each one. Basic example:
<div class="tl">
<div class="tr">
<div class="content">Here we go again</div>
</div>
</div>
With CSS:
.tl, .tr {
width: 100%;
height: 100%;
}
.tl {
background: url("tl.png") no-repeat 0 0;
}
.tr {
background: url("tr.png") no-repeat 100% 0;
}
Simply scale that up to use all your separate images. You'll need to have the sides first (on the outside of the 'div nest') and the corners last (on the inside, right before the content div).
It's a classic case of "divitis", but it's hard to avoid until CSS3 is well supported (where you can use multiple backgrounds or simply a border image). You might was to check out Sliding Doors, which shows a technique for reducing the number of elements/images needed.
css:
.sheet {
position:relative;
top:140px;
width:1000px;
}
.tl {
background:url(blue.bmp) no-repeat;
width:20px;
height:20px;
top:0px;
left:0px;
}
.tm {
position: absolute;
background:url(green.bmp) repeat-x;
width:960px;
height:20px;
left: 20px;
top: 0px;
}
.tr {
position: absolute;
background:url(blue.bmp) no-repeat;
width:20px;
height:20px;
top:0px;
right:0px;
}
.content {
background:url(orange.bmp) repeat-y;
top:20px;
width:1000px;
height:400px;}/* Demonstration only, please remove later */
.bl {
background:url(blue.bmp) no-repeat;
width:20px;
height:30px;}
.bm {
position: absolute;
background:url(green.bmp) repeat-x;
height:30px;
width:960px;
bottom:0px;
left:20px;}
.br {
position: absolute;
background:url(blue.bmp) no-repeat;
width:20px;
height:30px;
top:420px;
right:0px;
}
html:
<div class="sheet"><!-- Glass Effect Starts here -->
<div class="tl"></div>
<div class="tm"></div>
<div class="tr"></div>
<div class="content">Here we go again</div>
<div class="bl"></div>
<div class="bm"></div>
<div class="br"></div>
I put absolute positioning on each divs so that we can position it side by side. Hope it helps.
BTW, I changed the background url. :)
Winks as he says this and may regret it:
You know, if you used a table... ;>P!
(Now, waits for the tables vs. css crowd to unleash!)
This looks like your regular, garden-variety rounded corners 'section'.
Here's one without images:
http://www.html.it/articoli/nifty/index.html
Here's one with:
http://kalsey.com/2003/07/rounded_corners_in_css/
When you're finished coding it and it looks like what you want, turn it into a code snippet and keep it.
I don't mean to be a smartarse, but you hardly need 7 divs for what you try to achieve. Five divs are enough (in most case you don't even need that. I really don't know how to explain, but you can check http://www.nil.com/english (Quick links or Get support boxes) for source.
Also, there is a great book about it called "Bulletproof web design"
You were close. You yet have to position the containing element relative (so that all absolute positioned child elements are relative to it) and to position the corner parts absolute. Here's a SSCCE:
<!doctype html>
<html lang="en">
<head>
<title>SO question 1898479</title>
<style>
.sheet {
position: relative;
width: 200px;
}
.tl {
position: absolute;
width:20px;
height:20px;
top: 0;
left: 0;
background: blue;
}
.tm {
position: absolute;
height:20px;
top: 0;
left: 20px;
right: 20px;
background: green;
}
.tr {
position: absolute;
width: 20px;
height: 20px;
top: 0;
right: 0;
background: blue;
}
.content {
background: orange;
padding: 20px 0; /* Padding must be at least as much as the "borders" are thick. */
height: 300px;
}
.bl {
position: absolute;
width: 20px;
height: 20px;
bottom: 0;
left: 0;
background: blue;
}
.bm {
position: absolute;
height: 20px;
bottom: 0;
left: 20px;
right: 20px;
background: green;
}
.br {
position: absolute;
width: 20px;
height: 20px;
bottom: 0;
right: 0;
background: blue;
}
</style>
</head>
<body>
<div class="sheet">
<div class="tl"></div>
<div class="tm"></div>
<div class="tr"></div>
<div class="content">Here we go again</div>
<div class="bl"></div>
<div class="bm"></div>
<div class="br"></div>
</div>
</body>
</html>
You only need to ensure that you're using the strict doctype as used in the above example so that it works in IE as well.