im using this CSS for my website footer:
what would be the best way to make it display in the centre of the page. my website is responsive so they automatically go underneath each other when the screen is made smaller but when the screen is larger they are more to the left than the right.
i have created a fiddle here so you can also see the html:http://jsfiddle.net/x4A4B/
any help would be much appreciated
#footer {
width:100%;
min-height:500px;
position:relative;
bottom:0;
left:0;
border-top:4px solid #F36F25;
background-color:#666666;
color:#EEEEEE;
}
#footer-inner {
width:80%;
margin:0 auto 0 auto;
height:inherit;
}
#footer-top {
width:100%;
padding-top:10px;
border-bottom:2px #EEEEEE solid;
display:block;
}
#footer-left {
width: 290px;
display:inline-block;
padding: 5px 15px;
border-right:1px #EEEEEE solid;
vertical-align:top;
}
#footer-middle {
width: 294px; /* Account for margins + border values */
display:inline-block;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
border-right:1px #EEEEEE solid;
vertical-align:top;
}
#footer-right {
width: 270px;
padding: 5px 15px;
display:inline-block;
vertical-align:top;
}
#footer-bottom {
margin-top:5px;
padding: 15px 15px;
font-size:12px;
}
are you talking about your Copyright label?
if I understood correctly, you need text-align:center; in footer-bottom as in
#footer-bottom {
margin-top:5px;
padding: 15px 15px;
font-size:12px;
text-align:center;
}
I think you'll need something like this regarding lay-out:
HTML:
<div class="wrapper">
<div class="left">
Content goes here
</div>
<div class="middle">
Content goes here
</div>
<div class="right">
Content goes here
</div>
</div>
CSS:
.wrapper{
position: relative;
float: left;
left: 20.00%;
width: 60.00%;
}
.left{
position: relative;
float: left;
left: 0%;
width: 32.00%;
}
.middle{
position: relative;
float: left;
left: 1.50%;
width: 32.00%;
}
.right{
position: relative;
float: right;
right: 0%;
width: 33.00%;
}
Of course, you'll have to fill the structure with your content, and modify the margins to completely suit your needs, but I think you'll manage to do that. This example is just to get the idea.
See it in action here: JSFiddle
Related
I have an image I would like to display as a circle with (border-radius:50%) and on the same line I would like to have some text with a set width and background. I would not like to hard code any values. What is the best way of accomplishing this?
Here is a picture
fiddle
<div class="header">
<img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
<p class="headingText">Hello</p>
</div>
.i {
width: 80px;
height: 80px;
border-radius: 50%;
}
.headingText {
color: white;
background: black;
display: inline-block;
width: 350px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
You could try something like this:
.header
{
padding-top:26px;
padding-left:40px;
position:relative;
}
.i
{
position:absolute;
width:80px;
height:80px;
border-radius:50%;
top:0;
left:0;
}
.headingText
{
color:white;
background:black;
display:inline-block;
width:350px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
}
Using pseudo-classes and absolute positioning you can get the effect you want.
The below answer uses your existing HTML so you don't have to change any of that and just changes your CSS.
You can add some more padding to the text to make it a bit more spaced out if required and the background should sort itself out.
.header {
position: relative;
display: inline-block;
margin: 30px;
overflow: visible;
}
.header img.i {
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
bottom: 16px;
left: -40px;
z-index: 1;
overflow: hidden;
border: 3px solid black;
}
.header p.headingText {
padding: 16px 32px 16px 80px;
color: black;
border: 3px solid black;
}
<div class="header">
<img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg" />
<p class="headingText">Hello</p>
</div>
Just add position: absolute in i class then control the margin of headingtext:
HTML:
<div class="header">
<img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
<p class="headingText">Hello</p>
</div>
CSS:
.i
{
width:80px;
height:80px;
border-radius:50%;
position: absolute;
}
.headingText
{
color:white;
background:black;
display:inline-block;
width:350px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
margin: 40px 0 0 37px;
}
FIDDLE
use a block element instead with a negative margin to the top (half circle size - half of the padding) and a margin to the left (half circle size). Just change:
.headingText {
/*display: inline-block;*/
display: block;
margin-top: -45px;
margin-left: 40px;
}
Example fiddle: https://jsfiddle.net/c67dchhv/
just simple make .header class position:relative; if you want to define any height and width you can, .i class position:absolute; give margin on .headingtext class https://jsfiddle.net/hamzanisar/aphzeyyt/ maybe it will helpful for you.
Currently im trying to get 2 divs to align in center, but not quite sure how to do it. They go to the Left side by default.
I had margin-left:14 % and it would align it somewhat in the center, but when you re-sized the window it would look weird because it aligned to the right side.
tried with with with marign-left/right:auto, but no result.
html
<div id="panels">
<div id="panel-left">
</div>
<div id="panel-right">
</div>
css
#panels{
padding-top:15px;
margin-left: auto;
margin-right: auto;
}
#panel-left{
width:32%;
min-width:209px;
overflow:hidden;
background-color:white;
float:left;
padding-left:25px;
height:473px;
}
#panel-right{
width:32%;
min-width:209px;
height:473px;
background-color:white;
float:left;
padding-left:25px;
}
Try this:
CSS
#panels{
padding-top:15px;
text-align:center;
display: block;
}
#panel-left{
width:32%;
min-width:209px;
overflow:hidden;
background-color:black;
height:473px;
display: inline-block;
}
#panel-right{
width:32%;
min-width:209px;
height:473px;
background-color:orange;
display: inline-block;
}
DEMO HERE
Try this style, I have used the box sizing css property to take care of the inherent 1px space that occurs during inline styling.
Fiddle here
Of course there was an un-closed div element in your initial code which is fixed now.
So the CSS looks like,
#panels {
padding-top:15px;
margin: 0 auto;
background: cyan;
width:50%; /* u need this */
height:500px;
}
#panel-left {
width:50%;
box-sizing:border-box;
/* min-width:209px; By doing this you are pretty much giving the width to be 100 % */
overflow:hidden;
background-color:gray;
float:left;
padding-left:25px;
height:473px;
border:1px solid #000;
}
#panel-right {
width:50%;
box-sizing:border-box;
/*min-width:209px;*/
height:473px;
background-color:white;
float:left;
padding-left:25px;
border:1px solid #000;
}
Code snippet::
#panels {
padding-top: 15px;
margin: 0 auto;
background: cyan;
width: 50%;
/* u need this */
height: 500px;
}
#panel-left {
width: 50%;
box-sizing: border-box;
/* min-width:209px; By doing this you are pretty much giving the width to be 100 % */
overflow: hidden;
background-color: gray;
float: left;
padding-left: 25px;
height: 473px;
border: 1px solid #000;
}
#panel-right {
width: 50%;
box-sizing: border-box;
/*min-width:209px;*/
height: 473px;
background-color: white;
float: left;
padding-left: 25px;
border: 1px solid #000;
}
<div id="panels">
<div id="panel-left">left</div>
<div id="panel-right">right</div>
</div>
Hope this helps. Happy Coding :)
I have a basic HTML page where everything is wrapped inside a mainWrapper div and secondWrapper div.
everything is set to 960px size (the pageHeader, the pageContent and pageFooter).
I need to keep everything 960px apart from the pageFooter.
This is my CSS code:
<style type="text/css">
<!--
body {
}
#secondWrapper {
margin-left:auto;
margin-right:auto;
width:960px;
min-width:910px;
}
#mainWrapper{
margin-left:auto;
margin-right:auto;
width:960px;
}
#pageHeader {
height:80px;
width:100%;
min-width: 918px;
border-bottom: solid 1px #ededed;
z-index:1000;
position:relative;
}
#pageContent {
clear:both;
width:100%;
min-width: 918px;
background-image:url(img/map.png);
height:600px;
background-repeat:no-repeat;
background-position:center;
box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;
z-index:1;
}
#pageFooter {
background-color:#CCC;
width:100%;
min-width: 918px;
}
#logo{
position: absolute;
margin-left:29px;
background-color:#cb202d;
width:120px;
height:110px;
top: 0;
text-align:center;
vertical-align:center;
display:block;
font-family:Tahoma, Geneva, sans-serif;
font-size:24px;
color:#FFF;
font-weight:bold;
float:left;
z-index:1000;
-webkit-box-shadow: 0 5px 6px -6px grey;
-moz-box-shadow: 0 5px 6px -6px grey;
box-shadow: 0 5px 6px -6px grey;
}
#logoTxt{
position: relative;
top:26%;
}
#yourCurrentTime{
float:left;
left:220px;
top:10%;
position:relative;
border: 10px solid #1abc9c;
border-radius:4px;
}
#arrow-down {
position:absolute;
width: -23px;
height: 2px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #1abc9c;
left: 99px;
top: 30px;
}
#b {
position:absolute;
width:200px;
height:115px;
z-index:10000000;
left: -59px;
top: 48px;
background-color:#333;
display:none;
}
div#a:hover div#b {
display: inline;
}
div#a:hover {
background-color:#eceded;
cursor:pointer;
}
div#divBtn:hover {
background-color:#4a4a52;
cursor:pointer;
}
div#a{
width:140px;
height:47px;
position:absolute;
left: 825px;
top: 0px;
}
-->
</style>
I did try a few solutions found on Google and stackoverflow like this:
html,
body {
margin:0;
padding:0;
height:100%;
}
but that didn't work for me!
Any help would be appreciated.
Here is the Jsfiddle: http://jsfiddle.net/crf121359/jwgfH/
You need to do it like this:
HTML
<div class="wrap">
<div class="wrap_inner>
<!-- Pwraput here your pageHeader and pageContent -->
</div>
</div>
<footer>
</footer>
CSS
.wrap {
position: relative;
min-height: 100%;
padding-bottom: 200px /*footer height*/
}
.wrap_inner {
width: 960px;
margin: 0 auto;
}
footer {
width: 100%;
height: 200px;
position: absolute;
left: 0;
bottom: 0;
}
You just need to take your pageFooter outside of the wrapper.
Here's a working example:
http://jsfiddle.net/jwgfH/3/
You should see how it looks here, not inside the little frame:
http://jsfiddle.net/jwgfH/3/show
width: 100%;
only works if the parent element has a width defined.
Try giving your body element a max-width and see if that works
can you show your html too ? if the parent div or container is having 100% width then it should show the perfect result.
If you want to create a webpage that's 960px wide, define it in your <body> tag's by placing width:960px; in the CSS.
Then, use width:100%; in the rest of your elements - only for those that you want to display as 960px. The rest can be divided by using width:50%;, width:25%;, which is 50% of 960px and 25% of 960px respectively.
Also, height:100% is negligible, the rest of the elements will automatically define the height of the webpage, as long as you place them correctly.
In short, do this:
body {
width:960px;
margin:0 auto;
}
#secondWrapper {
width:100%;
float:left;
}
...and so on and so forth.
(NOTE: To solve your positioning problem, float:left is probably the best way to go. Use it on most of the elements you need to position accurately. If not, the browser will estimate where it will go.)
AFTER EDIT:
If you want a 960px gap between the #pageContent and #pageFooter, you can always define a margin-top like this:
#pageFooter {
margin-top:960px;
}
See this fiddle
JSFiddle
CSS:
.containers {
width:100%;
height:auto;
padding:10px;
margin-bottom:0px;
}
#id4 {
float:right;
margin-right:0;
display:inline;
border:5px solid red;
}
#id5 {
text-align:center;
border:5px solid red;
}
HTML:
<div class='containers'>
<div id='id4'>
margin-right:10px;
</div>
<div id='id5'>
center-text;
</div>
In this fiddle I want center-text to be center of the page, not at the center between left-border and float element.
The below is one possible option by adding position: absolute; right: 10px; to the id4 div. This will make the div always stay at 10px from the right margin. But it has to be noted that the element is no longer a float element.
Note: The texts would overlap if the result window is shrunk beyond a certain level. I will update the answer if and when I manage to find a fix for that.
.containers {
width: 100%;
height: auto;
padding: 10px;
margin-bottom: 0px;
text-align: center;
box-sizing: border-box;
}
#id4 {
display: inline-block;
position: absolute;
right: 10px;
border: 5px solid red;
}
#id5 {
display: inline-block;
border: 5px solid red;
}
.containers {
width:100%;
height:auto;
padding:10px;
margin-bottom:0px;
text-align:center;
}
#id4 {
float:right;
margin-right:0;
display:inline;
border:5px solid red;
}
#id5 {
margin: 0 auto;
display:inline-block;
border:5px solid red;
}
DEMO
How to create the pop up box as shown below in image with pure css
Here is what I have made with position:absolute which works fine but what I am trying to get is, is it possible to do only with one div by using :after or :before pseudo classes?
.pop{
background:#333;
display:inline-block;
width:250px;
height:120px;
border-radius:8px;
position:relative;
margin-top:25px
}
span{
position:absolute;
left:0;
top:-20px;
color:white;
display:inline-block;
border-radius:8px 8px 0 0;
background:#333;
padding:6px;
width:100px
}
Fiddle
This one is not much flexible, but does thing without additional markup, using pseudo element ::before.
.pop {
background: #333;
width: 250px;
height: 120px;
border-radius: 8px;
display: inline-block;
}
.pop::before {
content: "Pop up head";
display: block;
width: 90px;
background: #333;
border-radius: 8px;
padding: 3px;
margin-top: -14px;
text-align: center;
color: white;
}
<div class="pop"></div>
If I understood your question correctly this is what you need http://jsfiddle.net/slash197/Cup5Y/15/
HTML
<div class="holder">
<div class="header">Header</div>
<div class="pop">asd asd asd </div>
</div>
CSS
.holder {
position: relative;
width: 250px;
height: 140px;
}
.header {
position: absolute;
top: 0px;
left: 0px;
height: 20px;
background:#333;
color: #ffffff;
border-top-left-radius:8px;
border-top-right-radius:8px;
padding: 0px 10px;
}
.pop{
position: absolute;
top: 20px;
left: 0px;
background:#333;
color: #ffffff;
display:inline-block;
width:250px;
height:120px;
padding: 10px;
border-top-right-radius:8px;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
}
First you need 2 divs, one for the "header" and one for the "content"
see my example http://jsfiddle.net/Cup5Y/13/
<div class="pop">
<div class="head">
Title
</div>
<div class="content">
</div>
</div>