This is my current HTML structure. The footer div is sitting alone in the BODY.
<div id="footer">
<div class="container">
<div id="footer-bg">
<div class="footer1">
<p class="p1">asd</p>
<p class="p2">asd</p>
</div>
<div class="footer2">
<p class="p1">asd</p>
<p class="p2">asd</p>
<p class="p3">asd</p>
</div>
<div class="footer3">
<p class="p1">asd</p>
</div>
</div>
</div>
</div>
Here's the CSS for it:
#footer
{
position: relative;
background: url('../footer-bg-repeat.jpg') repeat-x;
height: 307px;
}
#footer #footer-bg
{
background: url('../footer.jpg') no-repeat top left;
height: 528px;
width: 1587px;
position: absolute;
left: -380px;
top: -221px;
}
#footer .footer1
{
position: absolute;
top: 137px;
}
#footer .footer1 .p1
{
position: absolute;
left: 500px;
background: #dcdcdc;
height: 23px;
width: 80px;
text-align: center;
line-height: 25px;
font-weight: bold;
}
#footer .footer1 .p2
{
position: absolute;
left: 1000px;
top: -20px;
background: url() no-repeat top right;
height: 40px;
width: 249px;
text-indent: -9999px;
z-index: 6;
}
#footer .footer2
{
position: absolute;
top: 159px;
height: 23px;
width: 100%;
background: #000;
}
#footer .footer2 p
{
display: inline;
line-height: 25px;
color: #636466;
height: 23px;
}
#footer .footer2 .p1
{
position: absolute;
left: 500px;
background: url() no-repeat center right;
width: 175px;
}
#footer .footer2 .p2
{
position: absolute;
left: 700px;
background: #dcdcdc url() no-repeat 60px 8px;
width: 75px;
padding-left: 15px;
}
#footer .footer2 .p3
{
position: absolute;
left: 800px;
}
#footer .footer3
{
position: absolute;
top: 190px;
}
#footer .footer3 .p1
{
position: absolute;
left: 500px;
width: 1000px;
}
I'm trying to get .footer2 and .footer3 to extend the width of the container allowing me to have a background colour set for what ever width the screen may be.
Setting 100% width just gets it to the size of the container - As I'd expect. How can I, though, get it to the width of the page?
Try setting both left and right property to 0;
you didn't define question well.
if you want to set it in middle set margins
margin:0 10px;
width:%your pages width%;
if you mean something else download Firebug plugin for Firefox and inspect a page's footer that did what you want to do and take a look at structure and css rules. it always works
Related
How do I create this in css? I'm having trouble aligning the circle divs vertical middle.
See image:
Here what I've done: https://jsfiddle.net/5odbwkn5/
.gray-btn1 {
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: url(../images/ico/9.png) no-repeat center 70%;
background-color: #5dd6e4;
margin-left:-20px;
position: relative;
float:left;
}
.gray-btn {
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: url(../images/ico/9.png) no-repeat center 70%;
background-color: #5dd6e4;
margin-right: -20px;
position: relative;
float:right;
}
.gray-mid {
background-color: #5dd6e4;
text-align:center;
}
<div class="gray-mid">
<div class="gray-btn1"><span class="fa-connectdevelop">left</span>
</div>
<div class="gray-btn"><span class="fa-connectdevelop">right</span>
</div>
<div style="height:100px">middle</div>
</div>
you can use pseudoelements as before and after to make easily that effect:
.container:before {
content:' ';
display:block;
height: 30px;
width:30px;
background-color:#999;
border-radius:15px;
position:absolute;
left:-15px;
top:7px;
}
.container:after {
content:' ';
display:block;
height: 30px;
width:30px;
background-color:#999;
border-radius:15px;
position:absolute;
right:-15px;
top:7px;
}
here is the FIDDLE I made for you as an example.
Edited: I updated the fiddle to be sure that the circles ("before" and "after") are positioned behind the container. And move slightly the elements to make it more simillar to your image.
First of all, you should not duplicate styles. Instead, extend common btn styles with specific for left button.
You can position buttons in the middle with the help of position: absolute relatively to the parent and top: 50%, margin-top: -25px fixes vertical offset in this case.
As the result it will become:
.gray-mid {
margin-left: 30px;
width: 400px;
background-color: #5dd6e4;
text-align:center;
position: relative;
}
.gray-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: url(../images/ico/9.png) no-repeat center 70%;
background-color: #5dd6e4;
right: -20px;
position: absolute;
top: 50%;
margin-top: -25px;
}
.gray-left {
left: -20px;
right: inherit;
}
<div class="gray-mid">
<div class="gray-btn gray-left"><span class="fa-connectdevelop">left</span></div>
<div class="gray-btn"><span class="fa-connectdevelop">right</span></div>
<div style="height:100px">middle</div>
</div>
Is this what you're looking for?
There are multiple ways which you can achieve vertical centering. There's even a really easy to follow guide posted by Chris Coyier here that you can reference whenever you need.
This is basically what I go to when I need to center something vertically.
.parent-with-centered-content {
position: relative;
}
.parent-with-centered-content > .child-element {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
You could use pseudo elements for this kind of functionality, and position them accordingly.
div {
position: relative;
display: inline-block;
height: 30px;
width: 200px;
background: gray;
margin: 30px;
text-align: center;
line-height: 30px;
}
div:before,
div:after {
content: "";
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
background: gray;
top: 5px;
z-index: -1;
}
div:before {
left: -10px;
}
div:after {
right: -10px;
}
<div>This is some text</div>
I did not try to match your fonts, but using background image, and just a little css, here you go:
https://jsfiddle.net/z8z3h75h/
<div id="background">
<div class="left">
FACEBOOK
</div>
<div class="right">
become a fan
</div>
</div>
#background {
background-image:url(http://s28.postimg.org/loa285ugt/1_SEOh.jpg);
width:409px;
height:41px;
}
.left {
float:left;
margin-left:30px;
color:white;
margin-top:10px;
}
.right {
float:right;
margin-right:40px;
color:white;
margin-top:10px;
}
The correct way to do that is to set top: 50% and translate or set margin on :pseudo elements
:root{text-align: center;padding: 40px 0 0 0}
.container{
display: inline-block;
position: relative;
padding: 6px 10px
}
.container, .container:before, .container:after{
background: #a6a195;
}
.container:before, .container:after{
content: '';
position: absolute;
top: 50%;
margin-top: -10px; /** height/2 **/
width: 20px;
height: 20px;
border-radius: 50%
}
.container:before{left: -10px}/** width/2 **/
.container:after{right: -10px}
.container div{display: inline; color: white}
.container .txt1{margin-right: 20px}
.container .txt2{font-size: 12px}
<div class="container">
<div class="txt1">FACEBOOK</div>
<div class="txt2">Become a fan</div>
</div>
.header{
position: fixed;
width: 2000px;
height: 70px;
background-color: #ff509a;
}
.subTitle{
width: 100px;
line-height: 70px;
float: right;
margin-right: 20px;
color: white;
font-size: 50px;
}
.content{
width: 2000px;
height: 3000px;
}
<div class="header">
<div class="subTitle">
hello
</div>
</div>
<div class="content">
</div>
Here is the code. The hello element should appear in the right when I scroll to the very right side. Please help!
Simply add
position: fixed;
right:0;
to .subTitle
Job done!
Add z-index:1; to .header, and position:absolute; z-index:2;left: 64%;/* or whatever spacing you want*/ to .subTitle. Don't forget to remove the float since it's no longer needed. Here is a pretty good article on z-index from MDN. So the CSS would look like this:
.header {
position: fixed;
width: 2000px;
height: 70px;
background-color: #ff509a;
z-index: 1;
}
.subTitle {
width: 100px;
line-height: 70px;
/* float: right; */
/* margin-right: 20px; */
color: white;
font-size: 50px;
z-index: 2; /*z-index of 2 to overlay the .header element*/
position: absolute; /*absolute positioning*/
left: 64%; /*change this if needed*/
}
I have a hidden header which is shown when printing a page, but when i try to print it with chrome 40 it's not taking the full width page. why?
HTML
<div id="header">
<img id="logo" src="assets/img/brand.png">
<div id="title">Departamento de diagnostico por imagenes</div>
</div>
<div id="footer">
<p class="page"></p>
</div>
CSS
#header{
top:0px;
right:0px;
width: 100%;
height: 45px;
position:fixed;
border:1px solid #ccc;
}
#logo{
position: absolute;
top: 0;
left: 0;
height: 46px;
}
#title{
position: absolute;
top: 0;
right: 0;
font-size: 18px;
font-weight: bold;
}
#footer {
position: fixed;
left: 50%;
bottom: 0;
/*right: 0;*/
height: 40px;
text-align: center;
}
#footer .page:after {
content: counter(page, upper-roman);
font-size: 18px;
}
UPDATE
I changed to position absolute, and it works, it's taking the full width
but now I realized that it's not repeating in every page, even with position fixed
Also notice the footer with number page, it's wrong centered because of fixed position, but when i change it to absolute it's correct but it goes to the bottom of the content, not of the page, and in the two cases neither repeat in every page
Remove the fixed position, add absolute instead, and I've also changed the height of #logo to 100% instead of 46px
SNIPPET
body {
font-family: Arial, sans-serif;
}
#header {
top: 0px;
right: 0px;
width: 100%;
height: 45px;
position: absolute;
border: 1px solid #ccc;
}
#logo {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
#title {
position: absolute;
top: 0;
right: 0;
font-size: 18px;
font-weight: bold;
}
h3 {
margin-top: 100px;
}
#header-table {
top: 150px;
/*Change to 0px when supposed to use*/
right: 0px;
width: 100%;
height: 45px;
position: absolute;
border: 1px solid #ccc;
display: table;
}
#logo-cell {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
#title-cell {
display: table-cell;
vertical-align: middle;
font-size: 18px;
font-weight: bold;
text-align: right;
}
<div id="header">
<img id="logo" src="http://img3.wikia.nocookie.net/__cb20140501181347/creepypasta/images/f/f6/Grumpy_Cat.jpg">
<div id="title">Departamento de diagnostico por imagenes</div>
</div>
<h3>Display: Table, if your title should be vertically centered</h3>
<div id="header-table">
<img id="logo-cell" src="http://img3.wikia.nocookie.net/__cb20140501181347/creepypasta/images/f/f6/Grumpy_Cat.jpg">
<div id="title-cell">Departamento de diagnostico por imagenes</div>
</div>
I have a conundrum: I need the darkest-gray bar you see on the bottom right (after opening the below code locally) spanning across as much space as the browser window will allow WITHOUT crossing over the light-gray section I have set up on the left. Here is my code:
<div class="timeline-section">
<div class="timeline-wrapper">
<div class="mini-timline"></div>
<div class="timeline"></div>
<div class="clearfix"></div>
</div>
</div>
CSS:
.clearfix { clear: both; }
.timeline-wrapper { position: relative; }
.timeline-section {
background: #3d3d3d;
bottom: 0px;
height: 276px;
left: 0px;
width: 100%;
position: absolute;
padding: 0px;}
.mini-timline {
background: #474747;
margin: 0px;
float: left;
height: 276px;
width: 500px;
display: inline-block;}
.timeline {
background: #232323;
height: 200px;
width: 60%;
float: left;
display: inline-block;
position: relative;}
One method is not to float the timeline element.
Just set a margin-left for the width of the mini-timeline:
.timeline {
background: #232323;
height: 200px;
margin-left:500px;
position: relative;
color:#FFF;
}
http://jsfiddle.net/rLzAM/1/
Try this:
.timeline {
background: #232323;
height: 200px;
width: 100%;
display: inline-block;
position: absolute;
}
I have essentially three divs.
<div id="headerLeft"></div>
<div id="headerMiddle"></div>
<div id="headerRight"></div>
With the following CSS
#headerLeft
{
background-image: url("topLeft.png");
height: 88px;
width: 329px;
float:left;
}
#headerMiddle
{
background-image: url("topMiddleRepeat.png");
background-repeat:repeat-x;
position:relative;
height: 73px;
float:left;
color: white;
min-width:100px;
padding-top: 15px;
}
#headerRight
{
background-image: url("topRight.png");
float: left;
height: 87px;
width: 47px;
float:right;
}
I need the middle div to repeat horizontally to fill the rest of the header's space. I can't set the width of the div manually because this html will be inserted into other pages of unknown widths.
I've tried setting the width to 100% but that just fills up the whole line and pushes the leftHeader above the middleHeader and the rightHeader below the middleHeader.
Here is the page I am currently trying to manipulate. http://dl.dropbox.com/u/1501628/web/ipiphony.html
Any help would be greatly appreciated.
The way you are trying to do it i don't think it's possible, What i would do is this:
<div id="header">
<div id="headerLeft"></div>
<div id="headerMiddle"></div>
<div id="headerRight"></div>
</div>
And the CSS
#header {
background-image: url("topMiddleRepeat.png"); /* In the container */
background-repeat: repeat-x;
height: 88px; /* the height of your images */
}
#headerLeft {
background-image: url("topLeft.png");
height: 88px;
width: 329px;
float:left;
}
#headerMiddle {
height: 73px;
float:left;
color: white;
min-width:100px;
padding-top: 15px;
}
#headerRight {
background-image: url("topRight.png");
float: left;
height: 87px;
width: 47px;
float:right;
}
That way your background will cover the header. Another option is to nest the divs and set the background to eack one and use padding for the sides.
<div id="header">
<div id="headerLeft">
<div id="headerRight">Your text here</div>
</div>
</div>
And the CSS
#header {
background-image: url("topMiddleRepeat.png"); /* In the container */
background-repeat: repeat-x;
height: 88px; /* the height of your images */
}
#headerLeft {
background-image: url("topLeft.png");
height: 88px;
padding-left: 329px;
}
#headerRight {
background-image: url("topRight.png");
height: 87px;
padding-right: 47px;
}
Try the following:
Update the following styles:
#header {
position: relative;
overflow: hidden;
min-height: 85px;
}
#headerLeft {
background-image: url("topLeft.png");
height: 88px;
width: 329px;
position: absolute;
left: 0;
top: 0;
}
#headerMiddle {
background-image: url("topMiddleRepeat.png");
height: 73px;
color: white;
padding-top: 15px;
margin-left: 329px;
margin-right: 47px;
}
#headerText {
position: absolute;
left: 260px;
font-size: 20px;
font-weight: bold;
}
#headerRight {
background-image: url("topRight.png");
height: 87px;
width: 47px;
position: absolute;
right: 0;
top: 0;
}
If there are still issues, I recommend uploading the styles and HTML to jsfiddle.net so everyone can have an active play.