So I have probably an easy question to answer...
I am working on the site fairhopemicrocottages.com, and on the "About" page, the bullet points using the "li" tag are not aligned properly.
I want the bullet points to be on the first word, not in the middle of the 2 sentences. Very annoying.
This is definitely caused by the fact that I took this site design from another site I found, and worked around the CSS, but cannot edit the CSS. (Or can I?)
If someone can help me with a work around to solve this problem, that would be great! Thanks!
Bonus question: On the front page, I like the picture I found, however it does not blend in well with the navbar text and my image, the text is hard to see for old people like my parents.
Is there a work around to change the color of that section at the top to black? Just so the text and image can be read easily?
On line 56 in your stylesheet is something like this:
li {
background: black url("../img/list.png") no-repeat scroll left center;
}
Change it to left top, and it moves it up:
background: black url("../img/list.png") no-repeat scroll left top;
But that's not good on your li's - they are too high then, so set a specific top like so:
background: url("../img/list.png") no-repeat scroll left 10px;
To fix the issue in your top nav to change it to black, just add background to that section:
#slideshow header, .black header {
border-bottom: 1px dotted rgba(255, 255, 255, 0.15);
position: relative;
z-index: 10;
background: black;
}
You are replacing default list bullets with a custom background and that background has a centered position, therefore:
li { background: url("../img/list.png") no-repeat left 11px; }
By replacing the left center with left 11px, your bullets will appear where you want them to.
Additionally, you could solve this by changing up your styles:
Add this style:
ul {
list-style: url("../img/list.png");
}
Remove this style:
li {
background: url("../img/list.png") no-repeat left center;
}
Related
I was looking at ways to include a title in a page and I have come across this website: (see image below) which does exactly what I want but I can't figure out how to accomplish it. The trouble I have is in only having a single title image at the top without it repeating through to the bottom. I have used the css background-image:url(image) on the main div but the repeating image problem is present. Any help or insight on this matter will be greatly appreciated.
EDIT: I need the rest of the background to repeat until the end. I think having the rest of the background be a separate image may be part of the solution but I don't know if a title image div can be forced to the same layer. Again any insight is valuable as I am new to HTML and CSS. Also this is the best example website I can find, if you are offended please edit with a better example. Thank You!
You can get it done using the below CSS,
#elemId
{
background: #00ff00 url('testimage.jpg') no-repeat top left;
}
Hope it will help
background-repeat:no-repeat;
This is the css trick to NOT repeat a background image.
If you didn't know this already, how the hell could you make it to this website ?
from you link
body {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
font-family: Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
}
#wrapper {
background: url("/marines-theme/images/layout/body-background.jpg") repeat-x scroll left 23px rgba(0, 0, 0, 0);
margin: 0 auto;
min-width: 980px;
overflow-x: hidden;
}
#overview-wrap {
background: url("/image/image_gallery?uuid=a394504c-a638-449e-bb56-b517cfe7d3ee&groupId=10162&t=1349957392552") no-repeat scroll center top #000000;
}
Those are nested markups like so :
<body>
<div id="wrapper">
<div id="overview-wrap"></div>
</div>
</body>
That's about it.
ps. i added a screenshot of what you want to show. Can you remove the (now useless) link?
I have a division that has a background image but it needs to be a varible size. I'm using three images. One of the top, one for the bottom and a repeating one for the middle.
I've only got one div to work with and given the middle background image to that and then used the before and after pesudo classes to place the other images. The image from the main division shows up behind these two since they are semi transparent. Is there a way round this in css or a better method to do it?
HHTML:
<div class="faq">
<strong>Q. Who was the greatest business man?</strong><br />
<p><strong>A. </strong>Noah. He kept his stock afloat, while the rest of the world went into liquidation.</p><br />
<strong>Q. How should my employees let off steam?</strong><br />
<p><strong>A. </strong>Take them see to see the comedian Sampson. He'll bring the house down.</p><br />
</div>
CSS - style
.faq{
background: transparent url(../images/image_middle.png) repeat-y center;
color: #ffffff;
display: block;
}
.faq:before {
background: transparent url(../images/image_top.png) no-repeat center top !important;
}
.faq:after {
background: transparent url(../images/image_bottom.png) no-repeat center bottom !important;
}
CSS - layout
.faq:before {
padding-top: 20px;
display: block;
content: "\A";
}
.faq:after {
padding-top: 14px;
display: block;
content: "\A";
}
.faq{
margin: 20px 0 5px !important;
padding: 0 20px 0 15px !important;
}
The best way to do this is by using multiple backgrounds - see https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multiple_backgrounds. in this way, you can specify the 3 different images and their positions as styles for the element. List the top image first.
If your browser support requirements won't work with CSS multiple backgrounds, you can get the same result by styling other elements - such as a h1 or p:last inside your div. This approach is more complicated, since you have to be very careful about the position of elements inside that div.
Note that a background or image will always show through transparent areas of an image above it. If you don't want this, you must put something opaque into that cover-up image - such as the background color that you're trying to fade to.
For more detailed help, please post a self contained example of the code you're working with.
I read once how to create cross-browser rounded buttons with shadow using images, I lost my bookmarks unfortunately that's why I ask does anybody remember the technique.
There is left side picture i.e
And then very wide body image which ends up with right curved border/shadow like this :
So at the end you end up with one button which can be used with multiple sizes? I was googling this, but it seems noways everyone use css without images.
Does anybody knows how this technique is called or can refer me to the link? or give me code example, I'd appreciate any of those
When using an image for the start and one for end of the button, these technique is called "sliding doors" and there are myriads of search results with any search engine…
For an introduction read the A List Apart article: http://www.alistapart.com/articles/slidingdoors
But as Neurofluxation asked you in the comment above: Why the hell would you do that years after we have multiple other methods of styling a button in CSS? The A List Apart article for example is from 2003 - which is an age in Internet terms.
This technique is a variation of the "Sliding Doors" technique:
http://www.alistapart.com/articles/slidingdoors/
http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/
http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/
Basically you use markup like this:
<button><span>Text</span></button>
Then style the span with the edge image to the side, overlapping the main background image of the parent element. Something like this:
button {
background:url(main-image.png) top right no-repeat;
border:0;
padding:0;
width:80px; /* with only 1 "door", you might need to set a width */
/* other resets may be necessary */
}
span {
background:url(left-door.png) left top no-repeat;
}
button, span {
height:37px; /* height of your sprite */
display:block;
}
Demo: http://jsfiddle.net/Kqs3m/
Your results may vary depending on your sprites and the natural width of the content.
Here's the technique which I think you are looking for (using the same images you attached):
HTML:
<a href="#" class="button">
<span>Small</span>
</a>
<a href="#" class="button">
<span>Large button</span>
</a>
CSS:
.button {
background: url('http://i.stack.imgur.com/htUHL.png') no-repeat left top;
padding-left: 9px;
height: 37px;
display: inline-block;
text-decoration: none;
color: #555;
text-shadow: 0 1px 1px #FFF;
font-family: sans-serif;
font-size: 0.8em;
}
.button span {
background: url('http://i.stack.imgur.com/ID6nO.png') no-repeat right top;
display: inline-block;
height: 37px;
padding: 5px 12px 5px 3px;
}
.button:hover span {
color: #333;
}
Link to the demo: http://jsfiddle.net/v284q/
Using CSS properties instead of images can make your applications faster.
In this case you could just use: Border-Radius, Box-Shadow combined with a gradient background.
Here you can find a good Gradient Editor:
http://www.colorzilla.com/gradient-editor/
How to use Border-radius and Box-shadow:
http://www.css3.info/preview/rounded-border/
http://www.css3.info/preview/box-shadow/
I have made a dropdown menu. I need a 25px x 25px image to the left of the dropdown list's text? Every time i try, the image will not appear? Why? and how do i fix it? I have tried and tried, but the image will never appear. http://jsfiddle.net/Hunter4854/M4Ef2/1/
Try:
.custom-select ul {
...
background: url("myimage.png") left top no-repeat;
padding-left: 50px;
}
I don't think you can put an image tag in a option tag, the best thing would be to set a background image and padding on the option tag.If you look at the script you'll see that it rebuilds the .custom-select ul that's why you lose any <img> in the markup, check out this fiddle where I comment out that code.
$('#test_select option').each(function(i){
html.push('<li rel="'+$(this).val() +'">'+$(this).text()+'</li>');
});
$('.custom-select ul').html(html.join(''))
Unless I am missing someting, I am not sure why people are suggesting stuff with <li>. If you want the 25x25 image to appear in the drop down, use:
CSS
select#test_select option[value="graphic designer"] {
background: url("myimage.png") left top no-repeat;
padding-left: 50px;
} // continue with every value
Right now we have a web page with a bunch of link sections on one page. Each section has a header like so:
This header background is actually two images. The first is just a rectangle and the second has the slanted side on it. As I was looking at this solution, I was wondering if I could solve this with CSS instead of images. While I am not a CSS guru, I did look at a number of examples and was able to get something similar working. However, when I attempt to put text on top of the background, it ends up above the color instead of inside it. The CSS I have also has a fixed size, which is less than idea. I would rather specify a percentage of the available area and have it fill in the color.
Here is the code I've been working with:
<STYLE type="text/css">
.mini_banner
{
display:inline;
border-bottom:30px solid blue;
border-left:0px solid transparent;
border-right:30px solid transparent;
}
</STYLE>
I wanted to apply this to a cell in a table. I also don't want to break compatibility with modern browsers. My "customers" (mostly internal people) are going to be primarily on IE8 or later but I don't want to limit myself if I can help it.
So first, is this possible? Second, how would I accomplish this? And third, is there a way to make it relative in scale instead of fixed?
I would say that you'll have less headaches all the way around if you revert to using a single background image - in this case, a white image with the notch cut out (a PNG-24 with alpha transparency). Make it bigger than you think you need by about 200%, then do something like this:
.minibanner {
background: blue url(..images/notch.png) no-repeat middle right;
font-size: 1.5em;
}
The reason is that relying on border sizes may result in some whackiness across browsers, and it will definitely look weird if any element runs to two lines.
If you make the notch image 200-300% larger, but vertically align it in the middle of the background, and you do increase the font-size, the box will grow, but your white notch will grow right along with it.
UPDATE:
The only other way I can see pulling this off is to add a non-semantic element, such as a or something similar, after your text:
<div>
<p>Hello text</p>
<span></span>
</div>
Then in your CSS:
p {
background: blue;
color: white;
float: left;
padding: 0 20px;
height: 50px;
margin:0;
line-height: 50px;
}
span {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 0px solid transparent;
display: inline-block;
border-left: 50px solid blue;
}
See this JSFiddle.
The shape is based on this tutorial on CSS triangles. Now, I've only tried this on a webkit based browser, and it works. You will have to adjust the heights every time you want to change font size, so that is a drawback.
I made it work without an extra span: jsFiddle
.mini_banner
{
width:18em; height:1.5em;
color:white; font-weight:bold; padding-left:0.5em;
margin-bottom:.5em;
}
.mini_banner:before {
display:inline-block; content:''; overflow:hidden;
width:17em; height:0;
margin-bottom:-1.5em; margin-left:-.5em;
border-bottom:1.5em solid blue;
border-right:1.5em solid transparent;
}
Tested in FF, Safari, Opera and IE. (Works in IE8, but not in IE7)