I'm finishing my web site http://centrosokoladine.lt/ And how you can see there is in middle left some picture covered with text, and I need to wrap that text. Image is set like those box'es bakground image, no repeat left middle...
Here that exact part of html:
<div class="turinio"><?php the_content(); ?></div>
And css:
.vidinis
{
background-color:#a68e84;
layer-background-color:#a68e84;
width: 709px;
/* height: 306px; */
align: center;
padding-top: 17px;
visibility: visible;
**background-image: url('http://centrosokoladine.lt/wp-content/themes/sokoladine/grafika/info.gif');
background-repeat: no-repeat;
word-wrap: break-word;
background-position: bottom left;**
overflow:hidden;
}
I know that it's not posible wrap text arround background images so I'm looking for other solution here, maybe I already tried to create seperate div for that image, but I failed..
You cannot do this with a background-image unless (1) You give a padding-bottom to your div and don't show text next to the image, or (2) you give a padding-left to your div and don't show text under the image.
An img element is the normal (html) way to do this. You can then add the align attribute to that image.
float: left;
Float will do the trick.
Related
I'm fairly new to CSS coding. I'm attempting to center an image and cannot get it to center. From what I know, the relevant code is as follows:
The CSS Code:
#header img {
align: center;
margin-top: 5px;
margin-left: 10px;
}
The code as it is on the HTML file:
<div id="header">
<a href="$settings[shopurl]">
<img src="https://capa.lunarmania.com:2083/cpsess1188922546/viewer/home%2famysp0%2fpublic_html%2fimages/AmyPromos.png" border="0" align="center" alt="" />
</a>
</div>
I feel as though I'm missing something but I cannot find it or figure it out. Any help at all is appreciated. The image sits stubbornly on the top left of the webpage instead of centering in the header like I ask it to do.
A few problems. First, it's text-align, not align.
Centering things in CSS sometimes isn't as simple as setting text-align: center. Sometimes, you'll have a block-level element which is as large as its contents; in this case, if your div is as big as the image, it won't center the image because centering it in the div won't move it. Make sure that your div is also centered, or that it's as big as the thing inside which you want to center the image.
Also, text-align: center affects contents inside an element, not the element itself. So, in this case, you want the centering CSS on #header, not just the image.
Finally, if you want to physically center an element by itself, it needs to be a block-level element (i.e. display: block, which is default for divs) and have an automatic margin on the left and right. This can be achieved by setting margin-left and margin-right to auto, or using a shorthand like margin: topbottom auto or margin: top auto bottom.
In this particular case, you probably just want to set text-align: center on the #header element, but in general, "centering an image" is sometimes more complicated than just one line.
You need to center the text inside your #header rather than center the image. Check out this fiddle: http://jsfiddle.net/10py5mu6/
#header {
width: 600px;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
border: solid 1px #000;
}
Basically, image is centered(I cant use absolute positioning because everyone has different screen resolutions and the image is centered) and I want my text to be 20 pixels down from top and 10 pixels right from left. How do I do it ? I have searched but got nothing. Probably due to my typing.
You have a couple of options. You're going to need to use a div the size of your image and center that. Then you can either set the image as the background of that div, or you can make the div position: relative and add an <img> tag that is positioned absolutely.
Here's an example of the first approach.
HTML:
<div id="imageContainer">
Some text that's overlaying the image.
</div>
CSS:
#imageContainer {
width: 275px;
height: 95px;
background: url('https://www.google.com/images/srpr/logo4w.png');
margin: 0 auto;
left: 0;
right: 0;
padding: 20px 0 0 10px;
}
And a JSFiddle to show it working: http://jsfiddle.net/VD34W/
Edit:
Since you want the text to be overlay you can use a hack using position: relative on the wrapping element and position: absolute on the inner ones. This allows you to position inside the wrapping element as long as the wrapping element has a width and height;
http://jsfiddle.net/FcBmd/1/
Irrelavent Text From Previous Answer: Something maybe using text-align: center
http://jsfiddle.net/FcBmd/
Take a look at this: http://css-tricks.com/float-center/.
Basicly it's only possible to align left and right but you can 'somehow' fake it.
you can try using the padding.
Try this:
HTML
<div id="theDiv">
<p>Some text here</p>
</div>
CSS
#theDiv {
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvT90hfqXnsPUsrySmYtU2Hj1ypEwCq0muzSCKdxOSmUnZqp_Z);
width: 300px;
height: 300px;
}
#theDiv p {
padding-top: 20px;
padding-left: 10px;
}
Demo
Good question.
Basically you say how far down from the top and how far left.
position:relative;
left:10px;
top:-20
Tip: put both the picture and text inside a div so that the text is relative to the div.
Also checkout: http://www.w3schools.com/css/css_positioning.asp
I'm trying to move a div from the top of the page down to the bottom, but it's not working.
Here's the div and its CSS:
<div class="slides">
<?php include 'slides.php'; ?>
</div>
.slides {
width: 990px;
height: 390px;
margin-bottom: 15px;
}
I've got the code (some of it, anyway) over on jfiddle:
http://jsfiddle.net/jerU7/
You can see the original page here:
http://www.autotrafficinfo.com/
I need to move the rotating banner at the top down to the bottom just above the footer. I moved the div (class="slides") down to the bottom of the html, but it's staying at the top. I realize you can make divs do things that aren't apparent, but I'm not sure how to make this one move down.
In the code on jfiddle, you can see that the text ("Real time traffic for 1.6 million...") is up at the top. The rotating images are, in fact, appearing towards the bottom (although all three are appearing there, instead of one at a time and rotating, because the java script isn't hooked up). The text and banners should all be at the bottom.
How do I scoot the div (class="slides") down so that it's just above the footer?
Your code needs a bit of restructuring.
Wrap all the divs from #greenSmall to #green in a new .content div.
Remove the css property float:left from #green
Move the .slides div to below the .content div and above the footer div.
css:
.slides{
top:97%; // Or designate the px location if you so desire
width: 990px;
height: 390px;
margin-bottom: 15px;
}
The code on the above answer is almost correct but it misses an element. For the 'top' and 'bottom' to work, the element must be positioned absolutely. So, the above code will become
.slides{
position: absolute;
top:97%; // Or designate the px location if you so desire
width: 990px;
height: 390px;
margin-bottom: 15px;
}
Live example of background issue: http://webid3.feckcorp.com/
As you can see the gray stripped background image flows over the bottom of the footer and leaves about 115 extra pixels below the footer. The div that contains the background image is <div id="home_page_back"> and is contained within the body element, both of which are set at a height of 100%.
I want the background image to hit the footer and then stop … not go any further past it. Can someone please advise?
Also - I do not want to place the image as a background of the body.
Cheers!
Copy of the CSS:
body {
margin: 0px;
padding: 0px;
height:100%;
background-color: #f3f3f3;
font-family: Arial;
font-size: 12px;
color: #333333;
}
#home_page_back {
background:#9C9D9B url(http://templatemints.com/rttheme13/images/background_images/abstract_background7.jpg) top center no-repeat !important;
display: block;
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}
I think it's the way you structured your markup, actually. Place the content below
<div id="home_page_back" style="display: block;"></div>
inside of it, remove the 100% height rule and replace it with overflow:hidden. The content will expand that div out to see the background image. As it stands now, you've made it a separate, absolutely positioned div and given it 100% height, which makes it at big as the background image you have inside it, and it expands beyond any of the content coming after it because that content now ignores it in the layout (because it's positioned absolutely.) At least that's the theory I'm going with :)
If you want the height 100% to work like that, give the body element 100% height, and the html element also 100% height.
Add overflow: hidden; to your body css.
And please, try validating your html before doing anything else and before looking for help.
#feck; may you have want an sticky footer check this answer .
Use:
#home_page_back {
background:#9C9D9B url(http://templatemints.com/rttheme13/images/background_images/abstract_background7.jpg) top center no-repeat !important;
padding-bottom: 30px;
}
Wrap "home_page_back" div around "content" div in the html instead.
Remove margin-top from #footer css.
Then, if you want it, you can add the space after the footer.
What's the best way to align icons (left) and text (right) or the opposite text on left and icon on right?
Does the icon image and text have to be the same size? Ideally I would like them to be different but be on the same vertical alignment.
I am using background-position css property to get the icons from a larger image.
Here is how I do it now, but I am struggling with either getting them to be on the same line or be vertically aligned to the bottom.
Text
This is what I get after I try your suggestions.
Though the text is now aligned with the icon, it is superimposed over the icon to the right of the icon that I want. Please note that i am using the background position to show the icon from a larger set of images.
Basically I am getting
<icon><10px><text_and_unwanted_icon_to_the_right_under_it>
<span class="group3_drops_icon group3_l_icon" style="">50</span>
group3_drops_icon {
background-position:-50px -111px;
}
.group3_l_icon {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(/images/group3.png) no-repeat scroll left center;
height:35px;
overflow:hidden;
padding-left:55px;
}
I usually use background:
<style type="text/css">
.icon {
background-image: url(path/to/my/icon.jpg);
background-position: left center;
background-repeat: no-repeat;
padding-left: 16px; /* Or size of icon + spacing */
}
</style>
<span class="icon">Some text here</span>
You can do it on the same line using vertical-align and line-height
<p style='line-height: 30px'>
<img src='icon.gif' style='vertical-align: middle' />Icon Text
</p>
Alternatively, you can go the background approach with no-repeat and positioning:
span.icontext {
background: transparent url(icon.gif) no-repeat inherit left center;
padding-left: 10px /* at least the width of the icon */
}
<span class="icontext">
Icon Text
</span>
Sadly, neither of these answers are bullet proof and each have one big flaw.
#rossipedia
I used to implement all my icons this way and it works quite well. But, and this is a big but, it does not work with sprites, since you're using the background-position property to position the icon inside the container that includes your text.
And not using sprites where you can is bad for performance and SEO, making them imperative for any good modern website.
#Jamie Wong
The first solution has two markup flaws. Using elements semantically correctly is sadly underrated by some, but you'll see the benefits in prioritizing form in your search engine ranking. So first of all, you shouldn't use a p-tag when the content is not a paragraph. Use span instead. Secondly, the img-tag is meant for content only. In very specific cases, you might have to ignore this rule, but this isn't one of them.
My Solution:
I won't lie to you, I've checked in a lot of places in my time and IMHO there is no optimal solution. These two solutions are the ones that come closest to that, though:
Inline-Block Solution
HTML:
<div class="container">
<div class="icon"></div>
<span class="content">Hello</span>
</div>
CSS:
.container {
margin-top: 50px;
}
.container .icon {
height: 30px;
width: 30px;
background: #000;
display: inline-block;
vertical-align: middle;
}
.container .content {
display: inline-block;
vertical-align: middle;
}
"display:inline-block;" is a beautiful thing. You can do so much with it and it plays very nicely with responsive design.
But it depends on your client. Inline-Block does not work well with IE6, IE7 and still causes problems with IE8. I personally no longer support IE6 and 7, but IE8 is still out there. If your client really needs his website to be usable in IE8, inline-block is sadly no option. Assess this first. Replace the black background of the icon-element with your sprite, position it, throw no-repeat in there and voilà, there you have it.
Oh yeah, and as a plus, you can align the text any way you want with vertical-align.
P.S.: I am aware that there's an empty HTML-tag in there, if anyone has a suggestion as to how to fill it, I'd be thankful.
Fixed Height Solution
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
.container {
margin-top: 50px;
border: 1px solid #000;
}
.container .icon {
height: 30px;
width: 30px;
background: #000;
float:left;
}
.container .content {
line-height: 30px;
float: left;
display: block;
}
I hate this one. It uses a fixed line height for the text, and if you choose the same height as the Icon's box, the text is centered to that height. To align the text to the top, cut the line height, and as to the bottom, you'll have to fix that with position: absolute and a fixed width and height for the container. I'm not going to get into that unless someone requests it, because it's a whole issue for itself, and brings with it a lot of disadvantages.
The main disadvantage of this path is the fixed height. Fixed heights are always unflexible and especially with text, it can cause a bunch of problems (You can no longer scale the text as a user without it being cut off, plus different browsers render text differently). So be sure that in no browser the text is cut off and that it has some wiggle room inside its line height.
P.S.: Don't forget the clearfix for the container. And, of course, replace the black background with your sprite and according position + no-repeat.
Conclusion
Use inline-block if at all possible. ;) If it's not, breath deeply and try the second solution.