For some reason, my CSS file will not align my circle on the page.
This is my html object for a circle:
<div class="circle-text">Upload your photo here</div>
CSS file:
.circle-text {
display: table-cell;
height: 400px; /*change this and the width
for the size of your initial circle*/
width: 400px;
text-align: center;
vertical-align: middle;
align
border-radius: 50%;
/*make it pretty*/
background: #000;
padding-top:;
color: #fff;
font: 18px "josefin sans", arial;
}
Any ideas why?
Try to add:
.circle-text{
margin: auto
}
i think it works
.circle-text {
height: 400px; /*change this and the width
for the size of your initial circle*/
width: 400px;
line-height: 400px;
text-align: center;
vertical-align: middle;
border-radius: 100%;
position:absolute;
left:50%;
transform:translate(-50%,0);
/*make it pretty*/
background: #000;
color: #fff;
font: 18px "josefin sans", arial;}
.circle-text .txt{
line-height: 400px;
text-align: center;
vertical-align: middle;
}
<div class="circle-text"><div class="txt">
Upload your photo here</div></div>
Related
This is probably something simple that I can't quite figure out. But I am trying to have a gif as a background to create an illusion of flowers growing with a campaign logo image over it and a donation button.
When in full screen, the background gets cut off at the bottom. Somehow the image is being pushed down. As you make the screen smaller for mobile responsiveness, the full image starts to appear (in height). I'm not sure what I am doing wrong.
Campaign Page
Any help would be much appreciated! Thank you. Below is the code I am currently using.
.header-wrapper{
width: 100%;
background-image: url(https://secure3.convio.net/little/images/content/pagebuilder/HorticultureBanner-Animated1.gif);
background-size: cover;
position: relative;
margin: 0 auto 0 auto;
font-family: "museo-sans", Helvetica, Arial, sans-serif;
}
.centered { margin-left: auto; margin-right: auto; }
.align-center { text-align: center; }
.campaign-logo {
max-width: 70%;
position: relative;
height: auto;
}
.padding-3x { padding: 45px; }
.button1{
color: #fff;
display: inline-block;
font-size: 18px;
letter-spacing: .75px;
padding: 15px 21px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: all 0.2s;
transition: all 0.2s;
vertical-align: middle;
}
.green-bg { background-color: #8ec63f;}
<div class="header-wrapper contained-12 centered align-center middle">
<img class="campaign-logo" src="https://secure3.convio.net/little/images/content/pagebuilder/horticulture_logo.png"/>
<p class="padding-3x"><a class="button1 green-bg" title="Give Now" href="Donation2?idb=[[S76:idb]]&df_id=1540&1540.donation=root">Give Now</a></p>
</div>
just add: background-position: bottom; on your header-wrapper class
Uou can use : background-position: center bottom;
.header-wrapper {
width: 100%;
background-image: url(https://secure3.convio.net/little/images/content/pagebuilder/HorticultureBanner-Animated1.gif);
background-size: cover;
background-position: center bottom;
position: relative;
margin: 0 auto 0 auto;
font-family: "museo-sans", Helvetica, Arial, sans-serif;
}
.centered {
margin-left: auto;
margin-right: auto;
}
.align-center {
text-align: center;
}
.campaign-logo {
max-width: 70%;
position: relative;
height: auto;
}
.padding-3x {
padding: 45px;
}
.button1 {
color: #fff;
display: inline-block;
font-size: 18px;
letter-spacing: .75px;
padding: 15px 21px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: all 0.2s;
transition: all 0.2s;
vertical-align: middle;
}
.green-bg {
background-color: #8ec63f;
}
<div class="header-wrapper contained-12 centered align-center middle">
<img class="campaign-logo" src="https://secure3.convio.net/little/images/content/pagebuilder/horticulture_logo.png" />
<p class="padding-3x"><a class="button1 green-bg" title="Give Now" href="Donation2?idb=[[S76:idb]]&df_id=1540&1540.donation=root">Give Now</a></p>
</div>
.header-wrapper {
width: 100%;
font-family: "museo-sans", Helvetica, Arial, sans-serif;
background: url(https://secure3.convio.net/little/images/content/pagebuilder/HorticultureBanner-Animated1.gif) no-repeat center center fixed;
background-size: cover;
}
I'm trying to create a template for some rotating spotlights we create here at work, and what I'm trying to do should be rather simple.
Here is my fiddle: http://jsfiddle.net/aeromax/2t4k4cf9/
What I'm trying to do, is to get #spotlightCTA to float right (easily doable) and align to the bottom of the #spotlightTitle, so that the call to action moves up or down depending on how tall the title is.
Here is the styles associated with these two divs:
#spotlightTitle {
width: auto;
height: auto;
display: inline-block;
bottom: 0px;
}
#spotlightCTA {
position: relative;
display: inline-block;
width: 300px;
text-align: right;
cursor: pointer;
right: 0px;
float: right;
}
And my HTML
<div id="spotlightContent">
<div id="spotlightTitle">
<div class="title">This is a test title.<br>Let's make it longer.
</div>
</div>
<div id="spotlightCTA" class="animate">
<span>This is a call to action.</span>
<button type="">Test button</button>
</div>
</div>
If I float right, it aligns to the top. If I remove the float, it aligns to the bottom but I can't get it to align to the right.
Thanks in advance!
Flexbox can do that.
div {
background-color: rgba(10, 10, 10, .2);
}
/*Containers*/
#spotlightContainer {
position: relative;
height: 200px;
width: 646px;
padding: 10px 20px 0px 20px;
background-color: rgba(0, 0, 0, .4);
}
#spotlightContent {
width: 646px;
height: auto;
padding: 30px 0px 0px 0px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
#spotlightTitle {
width: auto;
height: auto;
display: inline-block;
bottom: 0px;
}
/*CTA*/
#spotlightCTA {
position: relative;
display: inline-block;
width: 300px;
text-align: right;
cursor: pointer;
right: 0px;
float: right;
}
#spotlightCTA span {
font-family: "Open Sans", "Helvetica Neue", helvetica, arial, sans-serif;
font-weight: 300;
color: #fff;
display: inline-block;
padding: 5px 0px 0px 0px;
}
#spotlightCTA button {
background-color: #ffd200;
border-radius: 0px;
border: none;
margin: 0px 0px 0px 15px;
padding: 5px;
vertical-align: text-bottom;
}
.title {
font-family: "Oswald", "Helvetica Neue", helvetica, arial, sans-serif;
color: #fff;
font-weight: 600;
max-width: 400px;
font-size: 32px;
line-height: 1.2;
display: inline-block;
}
<div id="spotlightContainer">
<div id="spotlightContent">
<div id="spotlightTitle">
<div class="title">This is a test title.
<br>Let's make it longer.
</div>
</div>
<div id="spotlightCTA" class="animate">
<span>This is a call to action.</span>
<button type="">Test button</button>
</div>
</div>
</div>
Why is the "Input Status" div block got offset in its parents.
I did try toggle all its css attributes in the web inspector, it seems nothing fix the offset. Where did it come from?
Please have a look this demo: http://jsfiddle.net/pengyanb/Lfvnr9y1/
.containing_tab {
width: 100%;
height: 40pt;
margin-bottom: 20pt;
border: 1px red solid;
}
.status_tab {
display: inline-block;
width: 48%;
height: 100%;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
box-shadow: 10px 10px 10px black;
font-family:'MS sans serif, Fallback, sans-serif';
text-shadow:0 0 0 !important;
text-align: center;
line-height: 40pt;
background-color:green;
border:1px blue solid;
}
.middle_padding {
display: inline-block;
width: 1%;
height: 100%;
margin-left: auto;
margin-right: auto;
border:1px blue solid;
}
<div class="containing_tab">
<div class="status_tab">Input 1 Status</div>
<div class="middle_padding"></div>
<div class="status_tab">Input 2 Status</div>
</div>
I toggled all its css attribute in the web inspector,
Because the vertical-align property for inline elements defaults to baseline. Just change that to top:
.status_tab {
display: inline-block;
width: 48%;
height: 100%;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
box-shadow: 10px 10px 10px black;
font-family:'MS sans serif, Fallback, sans-serif';
text-shadow:0 0 0 !important;
text-align: center;
line-height: 40pt;
background-color:green;
border:1px blue solid;
vertical-align:top;
}
jsFiddle example
remove the height from the .containing_tab
.containing_tab {
width: 100%;
margin-bottom: 20pt;
border: 1px red solid;
}
.status_tab {
display: inline-block;
width: 48%;
height: 100%;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
box-shadow: 10px 10px 10px black;
font-family:'MS sans serif, Fallback, sans-serif';
text-shadow:0 0 0 !important;
text-align: center;
line-height: 40pt;
background-color:green;
border:1px blue solid;
}
.middle_padding {
display: inline-block;
width: 1%;
height: 100%;
margin-left: auto;
margin-right: auto;
border:1px blue solid;
}
<div class="containing_tab">
<div class="status_tab">Input 1 Status</div>
<div class="middle_padding"></div>
<div class="status_tab">Input 2 Status</div>
</div>
So I am new to css,and have been trying to develop a basic website as a college project,but I am having problems aligning the background image for a div with class name mainhead,it leaves a whitespace at left of the screen.
Whatever width I set it to,there is a blank white space on the left.
I dont know what to do,I havent set any padding or margins and also specified left: 0px,but no joy.
The class I am having problem with is the mainhead class
Here is the code,please help!
.loginbox
{
position: fixed;
top: 0px;
margin: 0px;
left: 0px;
font-weight: bold;
background-color: #2C2C2C;
text-align: right;
width: 1370px;
height: 40px;
}
.loginbut
{
background-color: #2C2C2C;
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
font-size: 100%;
color: #c9c9c9;
text-align: right;
margin-right: 50px;
margin-top: 5px;
border-color: #2C2C2C;
border-radius: 8px;
top: 10px;
text-decoration: none;
outline: none !important;
}
.loginbut:hover
{
background-color: #000000;
}
.mainhead
{
background-image: url("grey.jpg");
background-repeat: none;
border: 1px solid black;
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
top: 40px;
width: 1360px;
height: 170px;
color: #c9c9c9;
text-align: center;
}
.mainhead h1
{
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
font-size: 300%;
}
Use background-position: center center; and background-size: cover; and remove width from mainhead. Hope it should work
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover
Try using this reset code by Eric Meyer enter link description here and also set the .mainhead div to 100%.
I have the following CSS. It needs to be centered on any screen but currently it is only centered on a certain kind of screen:
#import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
html{
/* font-family: 'Roboto Condensed', sans-serif;*/
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 20;
}
#description{
position: absolute;
top: 200px;
left: 400px;
}
#content{
margin: 0 auto;
height: 100%;
width: 100%;
text-align: center;
line-height: 100%;
display:table-cell;
vertical-align: middle;
}
h1{
color:#4A4A4A;
margin: 0 auto;
text-align: center;
}
h1:hover{
color:#4A4A4A;
}
h2{
color:#4A4A4A;
margin: 0 auto;
text-align: center;
}
h2:hover{
color:#4A4A4A;
}
a{
color:black;
text-decoration: none;
margin: 0px auto;
width: 400px;
}
.circular{
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
height: 150px;
border-radius: 75px;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
background: url(./images/profile_picture.jpg) no-repeat;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
ul{
padding: 0;
text-align:center;
padding-top: 5
}
ul a img {
padding-top: 20px;
}
li{
list-style: none;
text-align: center;
font-size: 30px;
display: inline-block;
margin-right: 10px;
}
#back{
position:absolute;
top:0;
left:0;
bottom:0;
right: 0;
z-index: -99999;
background-color: #f7f7f7;
background-size: cover;
background-position: center center;
opacity: .2;
}
Currently my website only centers on a 4x3 screen. How can I adjust my CSS to center on any size screen?
Edit: Same question is here with HTML.
You have not posted your HTML code (dont know why (?))!
Well the trick to center an element with CSS is to give the element a left and right margin value of auto
#wrapper
{
width: 500px;
margin-left: auto;
margin-right: auto;
}
This is also similar to margin:0 auto which is widely used !
Wrap your content using a <div id="wrapper">...</div> and set a width !
To center an image, add display:block to it since by default the images have display:inline property.
#myImage
{
width: 50px;
height: 50px;
margin-left: auto;
margin-right: auto;
display: block;
}
Update: The answer from Magesh Kumaar is better, but this still works.
Without seeing the code on your page, it is a little difficult. But to center a DIV on any screen you should use the following code:
#divID {
position: absolute;
width:400px;
left:50%;
margin-left:-200px; /*This should always be 50% of your width*/
}
You should then wrap the rest of your website in the DIV.
<div id="divID">
YOUR WEBSITES CONTENT GOES HERE
</div>
Wrap your content, set width, and add margin: 0 auto to the wrap's css
<div id="body">
<div id="wrap">
<div id="center">Center</div>
</div>
</div>
#wrap {
margin:0 auto;
width:50%;
}
Fiddle
Firstly define the Div id in HTML as:
<div id="page">
website content
</div>
Then in CSS: set width, and add margin: 0 #page {
margin:0 auto;
width:50%;
}