I have some titles layouts in my css file, like h1 and h2. Sometimes I need a simple title like: <h1>Most readed</h1> and some times I need to add an image to the begining of the title like: . How can I do this using a class, like <h1 class="with_image_1">?
The best way of doing this would be to set the image as the background-image and add padding to move the text out of the way, so assuming your image is 50 px wide:
.with_image_1 {
background: url("/path/to/image.png") left no-repeat transparent;
padding-left: 50px;
}
You can then mess with the padding and the image placement to get everything lined up nicely
you just use a background image in your css:
.with_image_1 {background-image: url(some/image/path.png);
width:100px; height:100px;}
you may want to move the text too else it will display on top of your shiny image... to do this put the text in the h1 tag in a span, then shift the span off the screen:
<h1 class="with_image_1"><span>Title</span></h1>
.with_image_1 span {position:relative; left:-2000px;}
Related
I'm trying to place my logo into a div / span tag / h1 tag ( anywhere really )
I'm trying to load the image using CSS. I'm nearly sure i've done this many times before.. but for some reason it's not working this time.
CSS
.logo{
background-image:url(../img/logo-6.png);
width:400px;
height:75px;
}
It's simple. nothing special. I know the path to the image is correct. I was coding in Sublime text.. but moved to Dreamweaver when this didn't work. When i hover over the image URL in Dreamweaver it shows my image.. so it's the correct path.
HTML
<span class="logo"></span>
<div class="logo"></div>
Thats just two example of what i'm trying. I've no content in the span or div and I won't use both once I get one working.
the width and height that i've set are the correct size that the image is.
Why won't it appear as a background image in the div / span ?
Try changing your width and height to percentage
width: 100%; height: 100%;
Or try the background-image without the width and height, and see!
As for the html part:
Try adding the <img> inside the <div> or the <span>
then go to your css and try this:
img { width: 100%; height: auto;}
I don't know if that is a best practice, but I used a background to put some kind of "ok icon" on a div.
My problem is that the background is setted to left and I can't put a padding there on the left side of the icon.
<div id="martu">
<div class="text">
dummy text dummy text dummy text dummy text dummy text
</div>
</div>
CSS
#martu {
background: url('image') no-repeat scroll 0px 8px #FFB9D9;
padding: 5px 5px 5px 10px;
margin-left: 5px;
}
.text { font-size:17px; padding-left:20px;}
Fiddle: http://jsfiddle.net/9up0kmou/
PS. I know that an option would be to put the image direct on that div, but my dilema is that if background images support paddings or margins.
You can use the background-position CSS property to adjust the location of your background image on your div, for example:
#martu {
background-position:20px 20px; // where the values are x & y coordinates from the original default position
}
But no, short of actually adding whitespace to the image in an image editor (not a good idea, it would add unnecessary size to the file), there's no way of adding background-image-padding.
See this JSFiddle, where I have arbitrarily placed the tick icon in the middle of the element using background-position.
It's then a simple matter of adjusting the div padding to make sure the text doesn't overlap the image.
I'd probably do something like this myself. Using the pseudo-elements ::before and ::after is brilliant for placing icons and other things. That way, you get clean code, and you'd need less wrapping elements.
#martu::before {
content: url("http://findicons.com/files/icons/2015/24x24_free_application/24/ok.png");
float: left;
margin-right: 10px;
}
Try this: http://jsfiddle.net/87obhb57/5/
Long story short: you can't have padding on the background image, so the trick here is to set up a background-color on the outer div that gives you the block appearance; setting up a padding on it that will provide the effect you are looking for.
#martu {
padding: 5px;
background-color: #FFB9D9;
}
And finally, setting the background-image of the inner div to what you want plus a padding-left that is big enough as to ensure that the text and the image won't overlap.
#martu div.text {
background-image: url('something');
background-repeat: no-repeat;
padding-left:34px;
}
I want to set an image as a background of a heading, but only in the empty area. I do not want to display any background where the heading text is.
So, I have following HTML for heading:
<h2><span>Some text</span></h2>
h2{
background: url("image.png");
}
The problem is that, I do not want to display this heading background in the span, instead I want the span to adapt the background image of the page (parent element). I can not set a specific specific background for the span because it won't match with the page background. So how can I solve this?
You need to coordinate the background position of the image with the text. I'm not sure what your exact layout is, so adjust your values accordingly.
CSS alone cannot detect where your text is, or how bit it is. You need to use JavaScript to do that.
h2 {
background: url(image.png);
background-repeat:no-repeat;
background-position:5px 5px;
padding-left:30px;
}
You can use psuedo element to achieve this,
h1:before
{
content:url(your_img.jpg);
}
I have been learning HTML/CSS with codecademy, and I have this problem with my CSS border. I need my h1 to be centered with a border, but I don't want that border to go to the ends of the page. Here is my code
<h1 style="color:#0034ff; padding:20px; border-style:ridge; border-width:5px; text-align:center;">HTML Testing Page</h1>
I plan on making a seperate style sheet soon, I just put the CSS in the HTML document to test it. This border goes to the ends of the page, and if I put display:inline or display:inline-block my text is no longer centered. How could I make the border just go next to the text without sacrificing centered text?
Add display:inline-block
h1 tag is block element so it is occupying entire space .
Demo http://jsfiddle.net/rm3Fk/
If you want the h1 tag to center align to the page then you can use display:table; margin:0 auto
Demo http://jsfiddle.net/rm3Fk/17/
Indeed, the h1 is a block element, but I think you are looking for this:
h1 {
color:#0034ff;
padding:20px;
border-style:ridge;
border-width:5px;
margin: 0 auto; /* <--- */
display: table; /* <--- */
}
This will center the heading without it taking the entire width of the parent.
http://jsfiddle.net/rm3Fk/11/
Hi now used to display:inline-block; in your h1 tag
<h1 style="color:#0034ff; padding:20px; border-style:ridge; border-width:5px;display:inline-block; text-align:center;">HTML Testing Page</h1>
All Heading Element is block Element
Demo
I'm beginning to mock-up a WordPress theme based on Twitter's Bootstrap framework.
Could someone validate the code I have so far is kosher?
More specifically, the header...
I have my name and sub-head beside an avatar image.
I want the text to appear vertically in the middle of the image. This works successfully when the page is wide enough (screengrab: imgur.com/YCpSm). But, when I reduce the browser width and responsive design kicks in, the text moves up (screengrab: imgur.com/K4Vyj).
How do I ensure the text stays in the vertical center of the image?
Thanks.
--
Code: http://jsfiddle.net/robertandrews/jP4nT/ (contains standard bootstrap.css, standard bootstrap-responsive.css and custom CSS in one)
Page: http://jsfiddle.net/robertandrews/jP4nT/embedded/result/
You could go with floating elements instead of absolute positioning:
http://jsfiddle.net/jP4nT/1/
I also wouldn't place the <h1> tag within the <p>, but that's probably fine though.
This might be simpler: http://jsfiddle.net/6FMDR/
No extra html tags needed
Less css
CSS:
.myheader {
padding:15px 0 20px;
display:block;
}
.myheader img {
float: left;
padding:0 15px 10px 0;
}
.myheader h1 {
margin-top: 10px;
}