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/
Related
I have two divs one contain text and another contain button,
Here is what I wnat to have:
1.
.stalin::after {
content: '';
background-image: url('https://thumb.ibb.co/e3WZQU/Ellipse_2.png');
position: absolute;
}
.trump:after{
content: '';
background-image: url('https://thumb.ibb.co/d4BOKp/Ellipse_3.png');
position: absolute;
}
.marketing-primary{
color:black;
font-family: Roboto Regular;
width: 373px;
height: 92px;
background-color:white ;
}
<div class="stalin">
<p>Germany is dying slowly</p>
</div>
<div class="trump">
<button type="button" class="marketing-primary">Dowiedz się wiecej</button>
</div>
I tried different aproach nothing is working? any idea how to achieve what I want?
The first thing you'll want to do is give each of your :after pseudo-elements a width and height that reflects the circles' width and height. This is 38px and 48px respectively.
Instead of position: absolute, you'll actually want position: relative, and to make use of float to position the :after next to their respective elements. You'll also want float: left on the main two elements themselves (.stalin and .trump). As you're floating the elements, you'll need to also add clear: left to .trump to drop it back to the next line.
Also, note that you'll actually want to set your rules for .stalin's pseudo-element on .stalin p:after, rather than .stalin:after.
From here it's just a matter of making use of margin to control the offsets of :after, and adding a negative z-index on .trump:after to position it behind the respective element.
This can be seen in the following:
.stalin {
float: left;
}
.stalin p::after {
content: '';
background-image: url('https://thumb.ibb.co/e3WZQU/Ellipse_2.png');
width: 38px;
height: 38px;
position: relative;
float: right;
margin-top: -20px;
margin-left: 20px;
}
.trump {
float: left;
clear: left;
}
.trump:after {
content: '';
background-image: url('https://thumb.ibb.co/d4BOKp/Ellipse_3.png');
width: 48px;
height: 48px;
position: relative;
float: right;
margin-left: -24px;
margin-top: 60px;
z-index: -1;
}
.marketing-primary {
color: black;
font-family: Roboto Regular;
width: 373px;
height: 92px;
background-color: white;
}
<div class="stalin">
<p>Germany is dying slowly</p>
</div>
<div class="trump">
<button type="button" class="marketing-primary">Dowiedz się wiecej</button>
</div>
.marketing-primary{
width:300px;
height:100px;
background:#fff;
border:none;
color:#000;
outline:none;
box-shadow:0 0 5px rgba(0,0,0,.3);
font-family: Roboto Regular;
}
.marketing-primary:after{
content:'';
width:20px;
height:20px;
border-radius:50%;
border:1px solid green;
position:absolute;
right:-10px;
bottom:-50px;
z-index:-1;
}
.stalin p{
font-family: Roboto Regular;
position:relative;
display:table;
}
.stalin p:after{
content:'';
position:absolute;
width:15px;
height:15px;
border-radius:50%;
border:1px solid blue;
top:-5px;
right:-20px;
}
<div class="stalin">
<p>Germany is dying slowly</p>
</div>
<span style="position:relative;">
<button class="marketing-primary">Dowiedz się wiecej</button>
</span>
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>
I am facing a problem in positioning a text at the top of the image. The image is not in background.It's just with image tag.
The thing is I can't change the html code. Is it possible to achieve what I want but without changing the html code.
<div class="home_box">
<img src="http://netdna.seospecialist.co.uk/wp-content/uploads/2012/12/christmas-three.png" class="holding">
<h4>hot off the server</h4>
</div>
Jsfiddle : http://jsfiddle.net/EkzdE/11/
I have updated the fiddle. Now when you resize the window the image is moving but the text is staying there.Is there any way to make it responsive
Try this:
FIDDLE
CSS:
.home_box {
position:relative;
text-align:center;
}
img.holding {
position:relative;
margin-top:40px;
}
.home_box h4 {
color: #000;
font-family:'arial';
font-size: 15px;
left: 140px;
line-height: 33px;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 200px;
height:40px;
left:50%;
top:0;
margin-left:-100px;
}
Write:
.home_box h4 {
width: 200px;
top:0;margin:0;
}
Updated fiddle here.
All you need to do is set the h4 element's top property to zero so it sits at the top of the div, right over the image.
.home_box h4 {
...
left: 0;
top: 0;
...
}
Here is an updated fiddle.
You should make the positioning on both the image and the text relative.
This ensures that they both move according to the div as the window size changes.
Then, in order to put the text on top of the image, use a negative top margin.
.home_box {
position:relative;
text-align:center;
}
img.holding {
position:relative;
}
.home_box h4 {
color: #000;
font-family:'arial';
font-size: 15px;
margin-top: -200px;
margin-left: auto;
margin-right: auto;
line-height: 33px;
position: relative;
text-align: center;
text-transform: uppercase;
width: 200px;
}
Updated Fiddle
i want to place 4 rectancles with text in my website
something like this (blue is the color that specifies them!
http://imageshack.us/photo/my-images/42/983f.jpg/
and the real footer looks like this
http://imageshack.us/photo/my-images/545/aygh.jpg/
area with grey is the area with the links down
here is what i have
HTML
<div class="footer" id="footer">
<p>
About Us<span>|</span>
Terms and Conditions<span>|</span>
Privacy<span>|</span>
FAQ<span>|</span>
Advertise with us<span>|</span>
Careers
</p>
</div>
CSS
#footer
{
background: rgba(0,0,0,0.5);
color: White;
padding: 0;
text-align: left;
vertical-align: middle;
line-height:normal;
margin: 0;
position: fixed;
bottom: 0px;
width: 100%;
font-size: 1em;
clear: both;
height: 10%;
}
#footer p {
position: absolute;
bottom: 0px;
margin-left: 600px;
}
#footer a{
text-align: center;
color: white;
position: relative;
bottom: 0px;
margin: 20px;
}
#footer span {
bottom: 5px;
}
i dont want to change the
<p>
About Us<span>|</span>
Terms and Conditions<span>|</span>
Privacy<span>|</span>
FAQ<span>|</span>
Advertise with us<span>|</span>
Careers
</p>
i want to add another div with 4 sqare boxes with positions left, center-left, center-right and right
if you want the links to render horizontally across the page you can apply the following css.
div a
{
display:inline;
border:1px solid #000;
padding:5px;
margin:auto;
bottom:0px;
}
.footer{
position:absolute;
bottom:0px;
}
get rid of the <p> tag it is not needed
You can style the rest as needed. If you are looking for something more particular please update your question with specifics
here is a fiddle
I'd like to create simple tooltip in CSS3.
Example: http://jsfiddle.net/Cg2SX/
Example HTML (can be changed if necessary):
<div class="icons">
t <span class="tooltip">Twitter</span>
f <span class="tooltip">Facebook</span>
g <span class="tooltip">Google+</span>
</div>
And CSS:
.icons { position: absolute; left: 40px; top: 30px; }
.icons a { text-decoration:none; font-size: 16px; color: #000000; position: relative; margin-right: 70px; border:1px solid red; }
.icons a:hover { text-decoration:none; }
.tooltip { background-color: green; color: #FFFFFF; font-family: Arial,sans-serif; font-size: 10px; padding: 2px 8px; bottom: -20px; position: absolute; }
The problem is - I have no idea how to center tooltips below sharing icons (they will be font icons). It wouldn't be complicated if I knew their width but I don't.
Any ideas appreciated. Is it possible anyway?
You could try doing it like this:
updated fiddle
Using a fixed (big enough) width on the span, setting text-align: center on it & putting the text in a pseudo-element to which you give display: inline-block
HTML:
<div class="icons">
<a href="#">t
<span class="tooltip" data-text='Twitter'></span>
</a>
<a href="#">f
<span class="tooltip" data-text="Facebook"></span>
</a>
<a href="#">g
<span class="tooltip" data-text='Google+'></span>
</a>
</div>
Relevant CSS:
.icons a {
display: inline-block;
position: relative;
margin-right: 70px;
width: 16px;
color: #000;
font-size: 16px;
text-align: center;
text-decoration: none;
}
.tooltip {
position: absolute;
bottom: -20px; left: 8px; /* half the width of link */
margin-left: -35px;
width: 70px;
color: #fff;
font: 10px Arial, sans-serif;
}
.tooltip:after {
display: inline-block;
padding: 2px 8px;
background-color: green;
content: attr(data-text);
}
You could always do something like this demo:
http://jsfiddle.net/Cg2SX/1/
I updated a tags then inside .icons div. Here's what I changed:
.icons a {
display:block;
margin-right:10px /* spacing between a tags - changed from your original code */
float:left;
text-align:center;
width:100px; /* you can change this as needed, but it keeps them all uniform*/
height: 50px; /* Change this to the height of your tallest icon image */
}
Then I update the span.tooltip accordingly, I added this to what you had:
.tooltip {
width:100%;
padding: 2px 0; /* changed the side padding to 0 since width is 100% & it takes the text-align center from the CSS above on the a tag */
display:block; /* Made it a block so the width 100% & centered text would work */
}
This doesn't matter on the exact size of your icon images - they could all be different or the same, but as long as the over a tags are wider and taller than the tallest and widest image, you shouldn't have any problems.
why don't you work with => width:auto;