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;
}
Related
I have a div that has four product divs that display horizontally aligned with each other.
The length of the product titles (h3) is different among each product - they either take up 1, 2 or 3 lines in desktop view.
Depending on the number of lines, the formatting is thrown off so that the divs are no longer aligned.
I tried adding a top: 0px; so that the headers all started right at the top of the product div, but the shorter h3s are still aligning with the last line of the longer h3s.
Here's the relevant CSS, though I don't think there's anything in this that causes the misaligned h3s.
// Product divs
.product {
display: inline-block;
padding-right: 1em;
width: 24vw;
}
.product .details {
float: left;
font-family: Helvetica;
}
.product img {
height: 25vh;
float: right;
bottom: 0px;
}
// Details
.details h3 {
text-transform: uppercase;
font-size: .8em;
font-weight: 600;
top: 0px;
padding-bottom: 2.5em; // even removing this line doesn't solve it
width: 15em;
}
Ideally, the h3s would all start in the same place instead of how they are now.
How could I fix this?
You could replace the h3 with a span and then wrap that span in its own div like so:
<div class="heading-wrapper">
<span>Rare Blend Oil</span>
</div>
Copy over all the styles you have for the h3 to the span.
Then you could try to style it this way:
.heading-wrapper {
position: relative;
}
.heading-wrapper span {
position: absolute;
top: 0;
left: 0;
}
This absolute positioning forces the heading to always start at the top left corner, and with the outer wrapper, you can also control the width of the heading.
Replacing the h3 with a span allows you to have an inline element and the browser does not add its own margins to the heading (as it does with the h3 element.) The wrapper class now gives you more control over the positioning of the element.
Can you also share the HTML if this doesn't work?
I'm trying to achieve a hover effect with a background with the menu items, but with the css I have things appear to be out of place. I've tried many different things and still can't figure out how to have the menu items stay in place when on hover, and also not to have the text stick to the bottom on top of background.
http://youvisit.com/creative/FindYourFutureCampaign/html/
The problem is that by adding your left/right images (the ones with the rounded corners), you're changing the width and height of the <li>. Since those images are 19px tall, you need to get the height of the <li> to be 19px. You can do this using line-height and height. After doing that, you'll have to figure out how to vertically align the text in the <a>. Then, you need to adjust for the changes in width. You could do this by using left/right padding on the <a>, and then remove that padding on hover (the padding removed should equal the width of the left/right image).
This should get your pretty close. I didn't test this in IE7/8.
ul.menuItems li {
float: left;
height: 19px;
line-height: 19px;
margin-right: 20px;
}
ul.menuItems li a {
color: #000000;
display: block;
float: left;
height: 19px;
line-height: 19px;
padding: 0 2px;
text-decoration: none;
}
ul.menuItems li:hover a {
background: url("../img/menuHoverCenter.png") repeat-x 0 0;
padding: 0;
}
ul.menuItems li:hover:before {
content: url("../img/menuHoverLeft.png");
float: left;
}
ul.menuItems li:hover:after {
content: url("../img/menuHoverRight.png");
float: right;
}
Really, this is a bad design. You probably don't need to add content on hover. How about using CSS3 border-radius to get your rounded corners. Then use either linear-gradient or a background image for your background. border-radius is not supported by all browsers, but it's fairly well supported if you're not worried about IE8 and lower: http://caniuse.com/#search=border-radius
Fix your css and it will not "jump":
ul.menuItems li:hover:before {
background: url("../img/menuHoverLeft.png") no-repeat 50% 0%;
}
ul.menuItems li:hover:after {
background: url("../img/menuHoverRight.png") no-repeat 50% 100%;
}
And give height with width to work properly.
I have got a div id event_container and two div classes inside that div id by the class name create_event_button and search. I want to have a specific background for the event container and then style the classes differently.
Below is the css styling of these elements :-
#event_container{
background: red;
}
#event_container .create_event_button {
margin-left: auto;
margin-right: auto;
display: block;
float: right;
text-align: center;
width: 150px;
color: #1C1C1C;
background: #A9D0F5;
font-size: 150%;
font-weight: bold;
padding: 1em;
}
#event_container .search {
margin-left: auto;
margin-right: auto;
display: block;
float: left;
width: 480px;
background: #A9D0F5;
padding: 1.4em;
}
The inner div stylings are working all right but the #create_event is not giving me a proper background color.
I have been trying to hack around this one but have not got any success yet. It would be great if anyone could answer it.
Thanks,
The outer div contains only two floats, which are allowed to slip out of the parent div, unless you apply some clearfix trick ( there are many solutions: http://www.google.com/search?q=clearfix ), or simply use overflow:hidden; on the parent div to always contain any inner floats:
http://jsfiddle.net/E4J3Q/
the two inside divs are floated, so the outside div (#event_container) would not have a height.
you can append a <div class="clear"></div> and add a css rule like this: .clear {clear:both;}
jsfiddle: http://jsfiddle.net/ym9K9/
What is the easiest way to align the text vertically here with CSS ?
<ul>
<li>Hello</li>
<li>Bye Bye</li>
<li>Ciao</li>
</ul>
li {
border: 1px solid black;
width: 100px;
height: 50px;
margin-bottom: 20px;
text-align: center;
}
If you have just one line of text, you can set the line-height to the same value as the height. This works for any element.
Hacky, but possibly the easiest way:
li {
display: table-cell;
vertical-align: center;
}
You will need to add a background image in place of the list item bullet.
If you know you're always going to center a single line you could match height and line-height
li {
...
height: 50px;
line-height: 50px;
...
}
Try the vertical-align property:
http://www.w3schools.com/css/pr_pos_vertical-align.asp
Putting a line-height and making a gap between text and the border is good. but this is not the best practice. because Line height is not for creating a margin or padding. It is for creating a gap between two text lines(gap between two lines of a paragraph).
So make your task is done, you have to put a margin or a padding. The better option is putting a margin( But this is not a alignment. Just putting a margin to top ). And also, put your text into a "p" tag or "span" tag( whatever a tag, which can use for wrap text ).
HTML code,
<ul>
<li><span>Hello</span></li>
<li><span>Bye Bye</span></li>
<li><span>Ciao</span></li>
</ul>
CSS Code,
ul li span {
margin-top: 5px;
}
If making verticaly align is must, Here is the code.
ul li {
position: relative;
}
ul li span {
position: absolute;
top: 50%;
font-size: 12px; /* change this as your need. */
line-height: 12px; /* keep this value same as font-size. */
margin-top: -6px; /* half value from the font-size. */
}
I tried to make a navigation inline list. You can find it here: http://www.luukratief-design.nl/dump/parallax/para.html
For some reason it does not display the width and height of the LI. Here is the snippet. What is wrong with this?
.navcontainer-top li {
font-family: "Verdana", sans-serif;
margin: 0;
padding: 0;
font-size: 1em;
text-align: center;
display: inline;
list-style-type: none;<br>
width: 117px;
height: 26px;
}
.navcontainer-top li a {
background: url("../images/nav-button.png") no-repeat;
color: #FFFFFF;
text-decoration: none;
width: 117px;
height: 26px;
margin-left: 2px;
margin-right: 2px;
}
.navcontainer-top li a:hover {
background: url("../images/nav-button-hover.png") no-repeat;
color: #dedede;
}
Declare the a element as display: inline-block and drop the width and height from the li element.
Alternatively, apply a float: left to the li element and use display: block on the a element. This is a bit more cross browser compatible, as display: inline-block is not supported in Firefox <= 2 for example.
The first method allows you to have a dynamically centered list if you give the ul element a width of 100% (so that it spans from left to right edge) and then apply text-align: center.
Use line-height to control the text's Y-position inside the element.
Inline items cannot have a width. You have to use display: block or display:inline-block, but the latter is not supported everywhere.
I think the problem is, that you're trying to set width to an inline element which I'm not sure is possible. In general Li is block and this would work.
Using width/height on inline elements is not always a good idea.
You can use display: inline-block instead
Remove the <br> from the .navcontainer-top li styles.
I had a similar issue trying to fix the item size to fit the background image width. This worked (at least with Firefox 35) for me :
.navcontainer-top li
{
display: inline-block;
background: url("../images/nav-button.png") no-repeat;
width: 117px;
height: 26px;
}