So far I have this:
<style>
#success_notification {
position:absolute;
top:0;
width:30%;
text-align:center;
font:20px Georgia;
color:#5C5C5C;
background:#F2FFED;
padding:10px;
}
</style>
<div style="margin:0 auto;"><div id='success_notification'>TESTING.</div></div>
and the div stays on the left... still. What am I doing wrong? Thanks.
You aren't setting left or right, causing your absolutely-positioned element to default to a left of 0. Try this:
#success_notification {
position: absolute;
top: 0;
left: 35%;
width: 30%;
text-align: center;
font: 20px Georgia;
color: #5C5C5C;
background: #F2FFED;
padding: 10px;
}
Here you go.
Removed the position: absolute, added the margin: auto to style, added width 100% to outer div. Works for me.
<style>
#success_notification {
top:0;
width:30%;
margin: auto;
text-align:center;
font:20px Georgia;
color:#5C5C5C;
background:#F2FFED;
padding:10px;
}
</style>
<div style="width: 100%; margin:0 auto;"><div id='success_notification'>TESTING.</div></div>
try this:
#success_notification {
position:absolute;
top:0;
left: 50%;
width:30%;
text-align:center;
font:20px Georgia;
color:#5C5C5C;
background:#F2FFED;
padding:10px;
}
...or even:
float:left;
...or:
float:right
this works great in all browsers
Related
I'm trying to fix my website main logo. The name is Cerebro Design, and I would like to put Cerebro up and Design down, exactly like this:
This is the CSS code I have so far:
<div style="margin:auto;
width:500px;
height:500px;
border-radius:250px;
font-size:50px;
color:#fff;
line-height:500px;
text-align:center;
background:#000;">
CEREBRO DESIGN
</div>
#logo{
margin:auto;
width:500px;
height:500px;
border-radius:250px;
font-size:80px;
color:#fff;
text-align:center;
background:#000;
}
#logo-text{
margin-left:70px;
padding-top: 160px;
max-width:30px;
}
<div id="logo">
<div id="logo-text">CEREBRO DESIGN.</div>
</div>
Then you just add the correct font and you should be good to go.
As a note, is better to use external or internal (<style>...</style>) css than using style="..." on an element.
i would use an image for the logo, but if you want to go css way, this could work for you.
Demo
div {
margin:auto;
width:500px;
height:500px;
border-radius:250px;
font-size:50px;
color:#fff;
line-height:500px;
text-align:center;
background:#000;
display: inline-block;
position: relative;
overflow: hidden;
}
div:before, div:after{
display:inline-block;
position: absolute;
color: white;
font-size: 95px;
width:500px;
height:500px;
text-align: center;
left: 0;
}
div:before{
content: 'CEREBRO';
top: -10%;
}
div:after{
content: 'DESIGN.';
top: 10%;
}
Can you share the font you are using? My quick aproach (I'm in a small laptop) would be something like this:
HTML:
<div class="cerebro-logo">
<span class="padding">Cerebro
<span class="design-text">Design .</span>
</span>
</div>
CSS:
.cerebro-logo {
margin:auto;
width:500px;
height:500px;
border-radius:250px;
font-size:70px;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-weight: 600;
color:#fff;
line-height:80px;
letter-spacing: 10px;
text-align:left;
background:#000;
text-transform: uppercase;
}
.padding {
padding-top: 165px;
padding-left: 50px;
float: left;
}
.design-text {
letter-spacing: 13px;
}
Tip: You can use letter-spacing (for example) to get that spacing effect on the "Design .".
JSFIDDLE link: http://jsfiddle.net/f5qrbbx5/
Just add your text, no need to calculate any margin or padding.
.circle {
width: 500px;
height: 500px;
margin: 20px auto;
background: #000;
border-radius: 50%;
color: #fff;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 94px;
text-align: center;
white-space: nowrap;
}
.circle:before {
content: '';
display: inline-block;
height: 100%;
margin-right: -0.25em;
vertical-align: middle;
}
.circle > * {
display: inline-block;
max-width: 80%;
text-align: left;
vertical-align: middle;
white-space: normal;
}
<div class="circle">
<span>CEREBRO<br>DESIGN.</span>
</div>
Hello everyone first of all sorry for asking a question that have already been asked so many times. Forgive me with that said i have not been able to find an answer that matches and works with my code that is why i am asking :)
Well I want to make my sidebar div 100% height and not just adjust to content inside the div how to i do that?
Here is my code:
html, body {
margin: 0px;
height:100%;
min-height:100%;
}
.SideMenu {
height:100%;
float:left;
background-color:#ACB9B1;
width:20%;
margin:0;
overflow-y:hidden;
overflow-x:hidden;
}
http://jsfiddle.net/u9r7zeyk/ Here it shows at full height, don't know why?
Try this:
html, body {
height:100%;
}
.SideMenu {
height:100%;
background-color:#ACB9B1;
width:20%;
}
Hello huys thanks for the inputs what i did you can see here:
.menu{
background-color:#ACB9B1;
width: 200px;
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
}
.menu li a {
display:block;
text-decoration: none;
color: #fff;
line-height: 1.5;
margin-left:5%;
color:#A92432;
}
.menu li {
width: 100%;
height: 30px;
font-family: 'Open Sans';
border-bottom: 1px solid #A92432;;
font-size:18px;
}
Edited, Here you go. I think this is what you want.
html, body {
margin: 0px;
}
.SideMenu {
position:absolute;
height:100%;
float:left;
background-color:#ACB9B1;
width:20%;
margin:0;
overflow-y:hidden;
overflow-x:hidden;
}
http://jsfiddle.net/u9r7zeyk/2/
I am trying to create a div that has a button on the left, right and then a header in between. Something that looks like this:
But I'm getting something like this:
You can see that there is a margin being added and I can't figure out why. I have inspected everything I can, and I can't figure out what I'm doing wrong. (I understand that the h2 is at 50%. I did this to try and figure out why the right button was being pushed down.)
Here is my HTML:
<div class="day_buttons">
<button id="previous_day"></button>
<h2 id="zip_h2">What day and time would you like your stuff picked up?</h2>
<button id="next_day"></button>
</div><!--end nav_buttons-->
Here is the CSS to go with it:
#next_day
{
float: right;
background: transparent url(./images/icons/forward_button.gif) no-repeat top left;
width:4em;
height:4em;
z-index:5;
}
#previous_day
{
position:relative;
top:0;
left:0;
float: left;
background: transparent url(./images/icons/backward_button.gif) no-repeat top left;
width:4em;
height:4em;
z-index:5;
}
.day_buttons
{
height:3em;
width:100%;
display:inline-block;
}
#zip_h2
{
width: 50%;
margin:0px !important;
overflow:hidden;
}
Here is a Fiddle for those who need it: http://jsfiddle.net/tK72Z/
H2 elements are block-level so it will always try to fill 100% of the width on the "line" unless you tell it not to.
Just add float:left to your h2 styling and you should be good.
I think you're looking for something like this.
#zip_h2
{
width: 50%;
margin: 0 auto;
text-align: center;
}
OR
#zip_h2
{
width: auto;
text-align: center;
}
try it like this:
HTML:
<div class="day_buttons">
<button id="previous_day"></button>
<h2 id="zip_h2">What day and time would you like your stuff picked up?</h2>
<button id="next_day"></button>
</div>
CSS:
.day_buttons
{
position: relative;
}
.day_buttons h2
{
text-align: center;
}
.day_buttons button
{
position: absolute;
top: 10px;
}
.day_buttons #previous_day
{
left: 0;
}
.day_buttons #next_day
{
right: 0;
}
Just a small Change
top: 0;
right: 0;
Working Fiddle
Changes in the CSS :
For the right button
#next_day
{
position: absolute;
float: right;
top: 10px;
right: 10px;
background: transparent url(right.jpg) no-repeat top left;
width:4em;
height:4em;
z-index:5;
}
For the heading
#zip_h2
{
margin:0px !important;
padding-left: 20px;
padding-right: 70px;
text-align: center;
overflow:hidden;
}
In the following code the div content-container is not expanding in its height as increase in the height of the divs inside it. I want to make its height auto increment with the increase in height of inner divs
This id my css code
body{
margin:0;
padding:0;
line-height: 1.5em;
background:#f7f7f7;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
width: 1000px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#topsection{
background: #f0f0f0;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#content-container{
float:left;
width:100%;
background:#f8f8f8;
border:1px solid #f0f0f0;
margin-top:-22px;
margin-left:-1px;
height:auto;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-right: 310px; /*Set right margin to RightColumnWidth*/
background:none;
padding:15px;
clear:both;
}
#rightcolumn{
float: left;
width: 310px; /*Width of right column*/
margin-left: -311px; /*Set left margin to -(RightColumnWidth) */
background: none;
padding-top:20px;
margin-top:1px;
border-left:1px solid #222222;
}
#rightcolumn h2{
font:18px georgia;
font-weight:bold;
border-bottom:2px solid #222222;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
body{
margin:0;
padding:0;
line-height: 1.5em;
background:#f7f7f7;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
width: 1000px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#topsection{
background: #f0f0f0;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#content-container{
float:left;
width:100%;
background:#f8f8f8;
border:1px solid #f0f0f0;
margin-top:-22px;
margin-left:-1px;
height:auto;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-right: 310px; /*Set right margin to RightColumnWidth*/
background:none;
padding:15px;
clear:both;
}
#rightcolumn{
float: left;
width: 310px; /*Width of right column*/
margin-left: -311px; /*Set left margin to -(RightColumnWidth) */
background: none;
padding-top:20px;
margin-top:1px;
border-left:1px solid #222222;
}
#rightcolumn h2{
font:18px georgia;
font-weight:bold;
border-bottom:2px solid #222222;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
HTML code
<div id="maincontainer">
<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #2.2- (Fixed-Fixed)</h1></div>
</div>
<div id="content-container">
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
content here
</div>
</div>
</div>
</div>
<div id="rightcolumn">
<div class="innertube">
content here
</div>
</div>
</div>
<div id="footer">UIasdfg</div>
</div>
Demo
Your code seems to work fine, only minor tips to work it smoothly :
give body height:100%;
In the class innertube, use a paragrap to show the content, this way, u'll achieve a better flexibilty in showing big text paras.
use word-break: break-all for para
like this
<div class="innertube">
<p style="word-break: break-all;">
content here content here content here content here content here content here content here content here content here
</p>
</div>
and clear:both to clear all floats in the end :
</div> <!-- #content-container -->
<div style="clear:both"></div>
Ok, I think I figured it out. Using the same JsFiddle I created... I added a small tweak to only one of your CSS elements, which is below. We went from:
#contentcolumn {
margin-right: 310px;
/*Set right margin to RightColumnWidth*/
background:none;
padding:15px;
clear:both;
}
and then all i added was a simple display which ended up being:
#contentcolumn {
margin-right: 310px;
/*Set right margin to RightColumnWidth*/
background:none;
padding:15px;
clear:both;
display:inline;
}
This enables whatever is inside of that div to maintain being inside of that div. Here is the demo that provides a better example of what I am saying.
A few things to note, I did add in a background color so that you could effectively see what was changing, as well as I added a height, which doesn't need to be there.. again, I added that to show you what was happening with the innermost div.
One really awesome tool that can help you understand why this works is the Almanac, which will show you many tools to help you with any CSS needs. I do want to point out that #Mr.Alien's stack question is another resource that is well beyond the Almanac's explanation. Let me know if you need anything else :)
I'm trying to replicate the basic effect of the rating boxes that the verge uses (you can see it here: http://www.theverge.com/2012/5/9/3002183/airplay-speaker-review-iphone at the bottom) but I keep having issues with my text alignment. Right now I have this:
<div class="product-score-box">
<div class="score">
<span class="totalscore">
<?php echo aff_the_rating();?>
</span>
<span class="ourscore">Our Score</span>
</div>
Leave Review
</div>
CSS:
.product-score-cta { right:0; left: 0; bottom:5px; color:white;}
.ourscore {bottom:8px;}
.totalscore {top:10px; font-size:70px; line-height:70px;}
.ourscore,.totalscore,.product-score-cta {position:absolute; }
.score {
height:115px;
color:white;
background:#f48b1b;
position:relative;
}
.product-score-box {
display: block;
position: absolute;
top:20px;
right:10px;
color: white;
font-family: 'DINCond-MediumRegular';
background: black;
text-align: center;
z-index: 20;
overflow: hidden;
font-size: 16px;
line-height: 100%;
width:130px;
height:140px;
}
On Firefox, the text in .score doesn't align to the center and in Chrome, it's aligned strangely (like it's justified? or something). I am absolutely terrible at absolute positioning! If someone could help me get a similar effect, I would be forever grateful.
EDIT: http://jsfiddle.net/wQrZr/
So i've replicated it to what extent is possible given your markup and standard font selections, but the layout should be correct.
Setting an absolute width to the elements inside the box and giving them a left: 0; seemed to do it straight up and some additional styling added to the leave review element made it closer to the verges'
Jsfiddle Example
The Css:
* { font-family: Tahoma; }
.product-score-cta { right:0; left: 0; bottom:5px; font-size: 14px; text-decoration: none; color: #EEE;}
.ourscore {bottom:12px; font-size: 18px; font-style: italic;}
.totalscore {top:10px; font-size:70px; line-height:70px;width:130px; position: absolute;}
.ourscore,.totalscore,.product-score-cta {position:absolute; width: 130px; left: 0px;}
.score {
height:115px;
color:white;
background:#f48b1b;
position:relative;
}
.product-score-box {
display: block;
position: absolute;
top:20px;
right:10px;
color: white;
font-family: 'DINCond-MediumRegular';
background: black;
text-align: center;
z-index: 20;
overflow: hidden;
font-size: 16px;
line-height: 100%;
width:130px;
height:140px;
}
REFERENCE:
css positioning
1) remove the absolute positioning for .totalscore and .ourscore
2) position score relatively
3) position the "ourscore" label absolutely
Here it is:
http://jsfiddle.net/hammerbrostime/PGKNU/