The logo text on my site is for some reason offcentre. I can make it centred again by turning off display: inline-block. However this flattens the spacing around the text and I'm unable to get spacing back above the text (can't do vertical padding for inline elements).
How am I able to centre the text with the background colour? (trying to add text-align: center is automatically scored out in chrome dev tools for some reason?
HTML
<h1 class="logo">
<span class="text logo-title">SomeLogoText</span>
</h1>
less (css)
h1.logo {
font-family: "Roboto Slab", arial, sans-serif;
margin-top: 0;
margin-bottom: 0;
font-weight: bold;
font-size: 15px;
float: left;
a {
color: #fff;
padding: 15px 30px;
display: inline-block;
text-align: center;
line-height: 1.4;
max-width: 155px;
background: #color;
.border-radiuses(0, 4px, 4px, 0);
.transition (color 0.4s ease-in-out);
position: relative;
font-size: 20px;
&:hover {
text-decoration: none;
}
}
.logo-title {
vertical-align: middle;
line-height: 1.6;
}
}
Inline elements ignore width, and also max-width.
Your text simply doesn't fit the max-width: 155px; that you specify in your LESS code.
As soon as you take display: inline-block; off the element, it becomes display: inline; per default and thus ignores your max-width: 155px; and so the element becomes wider to contain the text.
If you have to stick to those 155px all you can do is try to reduce the padding-left and padding-right, e.g. padding: 15px 10px; and see if your text fits then.
What you need is either:
Increase the max-with on .a (current value 155px)
Reduce the padding left/right on .a (current value 30px)
until the text fit the background
If a logo you could get away with giving the box a fixed width, as the text wont dynamically change, just match the box to logo width (or wider with centered text). If you need vertical spacing you could add an inline-block element inside the logo which contains the logo link itself
Related
Given the following (also on JSFiddle):
div {
font-size: 28px;
outline: 1px solid red;
width: 40%;
float: left;
line-height: 36px;
}
div:first-child::before {
content: "Hi!";
display: inline-block;
vertical-align: middle;
outline: 1px solid blue;
font-size: 8px;
}
<div>xHello, world!</div>
<div>xHello, world!</div>
The second div (i.e., that without the vertically aligned middle content) is 36px high (as one would expect; the single line box within it has a height of 36px, per line-height).
The first div is 39px high here (with subpixel rendering, some slight variation is expected here, so 39px/40px are both reasonable expectations), as the line box of the content ::before it extends beyond the 36px of the "normal" content, due to its vertical alignment. How can I get the containing block (i.e., the div) to extend only to 36px high (assume I'm not concerned about the content ::before overflowing it)?
The typical approach of taking it out of the normal flow doesn't work here as then it ceases to be vertically aligned. Given the height of a block level element is dependent upon the bottommost line box within it, is this even plausible?
The ::before element inherits the 36px line-height. As far as I understand, it does not need that line-height since you are using vertical-align method of centering text. In fact, this unnecessarily tall line height is causing the issue. Reset it:
div {
font-size: 28px;
outline: 1px solid red;
width: 40%;
float: left;
line-height: 36px;
}
div:first-child::before {
content: "Hi!";
display: inline-block;
vertical-align: middle;
outline: 1px solid blue;
font-size: 8px;
/* the line height is inherited, reset it */
line-height: normal;
}
<div>xHello, world!</div>
<div>xHello, world!</div>
I have an issue with the sliding doors technique here. The heading right after the description is floating left due to the sliding doors technique, but all I want is that is stands alone in the center, above the products.
Can you help me understanding how to do it?
Here is the CSS I used for the heading:
h3.offer-title, h3#comments, h3#reply-title {
background:url(images/offer-title-bg.png) no-repeat right bottom;
color:#434343;
display:block;
float:left;
font-size: 14px;
margin-right: 6px;
padding-right:6px;
text-decoration:none;
height: 43px;
line-height: 0;
position: relative; }
h3.offer-title span, h3#comments span, h3#reply-title span {
background:url(images/offer-title-bg.png) no-repeat;
display:block;
padding-left: 20px;
height: 43px;
line-height: 43px;
padding-right: 16px;
}
Thank you.
It's floating because you set float: left in your first CSS code block. To get rid of that behaviour you need to get rid of the float.
Once the float is gone, if you want the header's background to nicely fit the text like it did before, the element needs to have display: inline-block.
But with display: inline-block and no set width on the header (you could add a width, but then it might break if you want to change the text or font size), it's not centered. To get it centered, you need a wrapper element around it which has text-align: center.
So:
Add this block:
h3.offer-title {
display: inline-block; /* this makes the bg fit the text */
float: none; /* this overrides float:left */
}
Wrap the offer-title element in another div.
Style the wrapper with
.offer-title-wrapper {
text-align: center;
}
I have a question regarding some CSS that I'm sure has a simple solution, but just not obvious enough for me to find it yet.
I have a div defined in my HTML file with a background image, which I set in my CSS file. I then set a hover state for the div using CSS so that the background image would change on mouse over. I then placed text on top of the div in my HTML file, to make a button with text on it.
Here is where I run into my problem, however - when I mouse over the image (background image of the div), the image changes, but when my cursor hits the text on top of it, the hover state changes back to the regular one, changing the background image as well, while the text doesn't change. When I move the cursor away from the text, it changes back to the hover state.
I have the code set up in a JSFiddle at http://jsfiddle.net/Cwca22/jk7ty/ - any help would be greatly appreciated! Thanks in advance!
You can really simplify your code.
HTML
<a class="button" href="directions.html">Get Directions</a>
CSS
a.button {
background: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions-button.png') no-repeat;
color: white;
display: block;
font-family: Ovo, serif;
font-size: 18px;
height: 42px;
line-height: 42px;
text-align: center;
width: 135px;
}
a.button:hover {
background-image: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button-hover.png');
color: #fff;
}
:hover only applies when you are hovering over that element or one of it's children. You created the button with one element, and then created the text and used CSS trickery to position it over the button. As soon as you hover over the text, the browser thinks you're no longer hovering over the button, and drops the new background.
Also, styles cascade. So in the rules for :hover, you need only specify the attributes that have changed. (In this case, background and color.)
fiddle: http://jsfiddle.net/jk7ty/10/
Move the Get Directions link inside the main div. You'll need to do some formatting for it but this should get you pretty close.
<a href="directions.html">
<div id="getDirections" class="getDirections" style="margin-top: 10px; margin-left: 131px;">
<h3 class="getDirectionsText" style="margin-left: 154px; margin-top: -28px; font-size: 14px; font-weight: 300;">Get Directions</h3>
</div>
</a>
I rewrote and simplified it for you and it works now:
Here's the link:
Get Directions
Here's the CSS:
a.getDirections {
display: block;
background: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions-button.png') no-repeat top left;
width: 135px;
height: 30px;
font-family: Ovo, serif;
font-size: 15px;
color: white;
text-align: center;
text-decoration: none;
padding: 12px 0 0 0;
}
a.getDirections:hover {
background: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button- hover.png') no-repeat top left;
}
A few things to note:
You can treat an A tag like a div if you give it a display: block; property
Since I put 12px padding on the top, I subtracted 12px from the height: property to leave only 30px (the button is actually 42px high)
I suggest reading about the "box model" (google it) to help out in future
You can also check it out on JSFiddle if you like:
http://jsfiddle.net/nerdburn/95ysC/
I would keep all of the HTML in the HTML section and the CSS in the CSS section. This just helps with keeping it all straight especially when you are testing.
This will give you a good result:
<div id="getDirections" class="getDirections"><h3 class="getDirectionsText">Get Directions</h3></div>
#getDirections {
display: table;
}
.getDirections {
background-image: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions- button.png');
background-repeat: no-repeat;
width: 135px;
height: 42px;
cursor: pointer;
}
.getDirections:hover {
background-image: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button-hover.png');
background-repeat: no-repeat;
width: 135px;
height: 42px;
cursor: }
a{
text-decoration:none;
}
h3 {
font-family: Ovo, serif;
font-size: 18px;
color: white;
display:table-cell;
vertical-align: middle;
text-align: center;
}
If you use this code style you can make changes to your element sizes without having to rework the centering of the text.
Almost all of my text in page look like this in IE7
Structure:
<div>
<span>Andrea</span>
</div>
<div>
<span>Puglisi</span>
</div>
CSS:
div {
font-size: 35px;
height: 35px;
line-height: 35px;
padding-top: 5px;
}
I try increase height etc, nothing works.
Increase your line-height (along with height) until the problem goes away or remove line-height (and height) altogether and let the browser set the default line-height for your specified font size (while the div expands with content).
div {
font-size: 35px;
height: 45px;
line-height: 45px;
padding-top: 5px;
}
or
div {
font-size: 35px;
padding-top: 5px;
}
You can simply add some padding to bottom to fix problem.
padding-bottom:10px;
/* Normal Bubble */
.bubble {
width: auto;
font-size: 0.75em;
margin-bottom: 24px;
}
.bubble blockquote {
margin: 0px;
padding: 0px;
border: 1px solid #c9c2c1;
background-color: #000;
}
.bubble blockquote p {
margin: 10px;
padding: 0px;
font-size: 21px;
}
.bubble cite {
position: relative;
margin: 0px;
padding: 7px 0px 0px 15px;
top: 6px;
background: transparent url(b/tip.gif) no-repeat 20px 0;
font-style: normal;
}
I have this for my comments.. that looks like "speech bubbles" .
I dont want it big from the beginning, i want to have it custom after the text.. I mean if you wrote "hello" then it should be around it with maybe 1-2px margin from the bubble, so if you wrote "Hello my name is and i like to cook!" then it should be bigger..its like this right now:
<div class="bubble">
<blockquote>
<p>the comment text is here</p>
</blockquote>
<cite>Written by me</cite>
</div>
A div, by default, is block level and, therefore, will expand its width to the width of its parent container (rather than its contents).
Two options to consider would be to set the div to
display: inline-block
Or float it.
Do you mean to put it like that?
.bubble blockquote p {
display: inline;
/*(...)*/
}
See http://www.htmldog.com/reference/cssproperties/display/
I'm not sure quite what you are asking either.
Perhaps you are referring to creating a popup (using images) that scales according to the size of the content? To do that you need multiple overlapping images. It it only scales in one direction (vertically or horizontally) you need two images, if it scales in both directions you need to create four images. This technique is sometimes called "sliding doors".