If you visit http://www.timkainu.com/journal/ you can see that there are some "featured images" floating to the left of the text. How can the text wrap around the image? I've used Firebug to try and find out what part of the CSS affects it, but I failed, obviously.
The site runs on WordPress and the theme being used is called "Striking", which is found on ThemeForest.
Thanks!
You are going to have to make some change to the theme to make that work. In order for text to wrap around an image, the text and image need to be in the same container. In this case, the image is in one DIV and the text is in the DIV next to it. You'd need to move div.image_styled.entry_image inside of div.entry_info to make it work. You would probably need to make some CSS adjustments as well since it was not design to wrap around the images like that.
Are you referring to, for example, the first item "Costco Photo Center Review" with the image of Costco on the left?
The image is wrapped inside <div class="image_styled entry_image"></div>
and the text is wrapped inside <div class="entry_info"></div>, both of which are wrapped inside <article id="xxx" class="entry entry_left">
In order for text to wrap around the image, they need to be in the same container, with the image set to float: left. I'm not sure how this relates to Wordpress, but in terms of HTML and CSS, that's the way to go.
Related
This may be a stupid question, but I am making a website and I want to have a page that has a fixed image that stays where it is when you scroll to see more text. One problem that I have encountered is that I can get the image to be fixed, but then I cannot make other text scrollable. The other problem is that I can get the text to be scrollable but the text goes under the fixed image. Is there any way that I can fix this. I have been using very simple html divs with classes from a style.css file.
As Geeky Quentin said, z-index is the solution to your problems. You mentioned that you are using classes in css, so in the class you should put z-index: index. The higher the index, the more things it goes over. If you want an image to stay where it is and not get anything put over or under it, you can just use different z-index indexes. If you separate the s then you should be able to make the text scrollable. I hope this answers your question.
How can I place a image in the center of a Paragraph and let the text wrap/break of the image. Without taking help of JS.
Something like this, here we have two paragraphs, I need this with one paragraph with some text on top as well.
my goal is to add text inside the box below which is an image and depending on how much text I enter, I would like to have the middle part of the image extend to accommodate for the increase of text inside. I do understand that one method is to "chop" the top part, a small section of the middle part, and the bottom part, and have the middle part repeat numerous times. I was wondering if someone could suggest how one goes about doing this, or, if there is a better option to take instead. Thank you in advance.
I've hosted the pictures through Flickr
You could make the image the background of the div then set "background-size: cover". The image would then grow to fill the div as the div grows.
I've got a Boostrap website with a navbar across the top and two columns divs in a row. The first column contains an image and should always stay fixed in position. The second column contains (potentially) a page or two of text and should scroll independently.
I've used position:fixed to hold the image in position, but my issue is that I would then like to add a link underneath it that links to the terms and conditions for the page.
BootPly
Is this possible?
Many thanks.
There a couple ways of doing this. I won't go into code since you don't have anything to work off of so I hope you can understand my explanations.
You can try simply putting the link position: fixed as well and set the top property of the link element so that it'll be positioned below your image (you can play around with this).
Use a div that is set to position: fixed that will contain both the image and the link. Then you can just simple put the image inside the div without any positioning and the link should go underneath the image without any positioning either.
You can set the text on the right side to be overflow: scroll and set the width/height of the right text in the div so that it can scroll. This will essentially keep the document still but allows the user to scroll up and down the text content inside the right side div.
Number 1 is the quickest solution, number 2 IMO is the best solution. If you need some help with the code, post a Fiddle so we can see what you're working with.
Try this:
DEMO
<div style="position:fixed">
<img src="http://placehold.it/100x300" class="img-responsive">
Terms and Conditions - Privacy Policy
</div>
It's the second time I have to use <ul> to create navigation menu with image and text in each anchor. The first time I managed to do this without fully separating the logic but now it seems a little bit more complicated so I want to solve my current problem and also, to know if there's a general approach to this task since I think it's very common but I'm not able to find clear implementation.
First is the example - JSFiddle as you can see, I have problem with styling/positioning the text in a nice, proper way. What I want is the image(bullet) to stay at the top-left corner as it is right now and I want all text to go right from the image. As you can seen in the first <li> when I get certain height the text i going under the image.
For some time now I was thinking about what is the way to make customizeable anchors with image and text. I've had this idea of using two spans so I can have more freedom on styling but as you can see in the example, it's either - me not knowing how ti use <span> properly or it's not best suitable for this case. If the text content is too big the text goes under, also the fact that with the margin only the first row is affected.. It seems to me that this is not the right way, so how can I style my anchor list (in this certain example) and is there a more generic way which will allow me to change some things related only to the text or to the image without having to remake the whole structure?
Images that are UI elements should be CSS backgrounds, not inline images. Positioning CSS backgrounds is easy because it doesn't interfere with the contents within the element. It's also better to put all the stylnig on the A-tag (other than positioning), not on the LI.
<li>Link<br />12.12.12</li>
CSS:
a.bullet {
background-image:url(...your image path...);
background-repeat:no-repeat;
display:block;
min-width:175px;
width: 100%;
min-height:60px;
padding: (what you want);
margin: (what you want)
}