I think this may sound pretty simple, but still I can not get it to work.
My design has different icons of same size and height and I need to display them one below another and at the same time I need to give a small description about the icon on the right side for every icon.
The text for every icon on the right side consists of two lines, the first line in bold(header) and the second line normal(description). The padding and margin is my call. But I need to display them in that way in my content.
you can simply left align your image and then devide 2 lines of your text with line break
<img src="image.jpg" style="float:left;" />
<strong>Header</strong><br />
<span>description</span>
this fiddle should set you in the right direction.
It basically floats both the <img> and <p>
Its not a finished artical, but it should point you in the right direction.
Check out this fiddle
Basically there is a container div with an unordered list inside it, each list item has a background image to the left and text to the right, no floats are used.
Related
I have created expandable search box and set it to "float:left".
But Moving "float:right" for a search box. - https://www.screencast.com/t/mZ5LpKkjH1O
You can see this in action at http://www.test3.guru99.com/
Add float:left!important; for class="maximenuck maximenuckmodule item1509 last level1 ". Refer below image.
image
Instead of floating right the search box element, float right its container, in this case the <li> element.
There are 2 way according to your requirements.
Make background-position: right center. It'll help to looking animation from right to left.
If you really want animation from right to left so you have to make search box as an overlay(in this case search box will overlap with menu) by position:absolute and it'll stick first time in same position and after click it'll expand to left and overlap with menu.
and as per your website, you just have to fix width like 50px of parent li tag of search-box.
I have an image that is displayed from an awesomefont character with text next to it. The problem I have is I don't want the text to appear under the image, but in right-justification to the right of the image. I've tried using a separate container and different types of alignment codes, but I can't get it to do what I need.
To view the problem, go to www.gibsonits.com and scroll down to the table of 6 points (2 rows, 3 columns). There you will see the text wrapping around the icon.
You need to add two divs side by side inside wrapper div. In first div, add font awesome icon and in second div add text. Look at working example here
I know that "how to center stuff" questions are kinda annoying and boring, but anyway ...
I'm trying to get one word ("Impressum") to appear perfectly centered in the footer of my wordpress page by putting something like this in the footer.php:
<p style="float:left">Impressum</p>
The problem is, on the left side of the same line is the copyright notice (floated to the left), on the right side is the theme author credit (floated to the right). I've tried different things to get the word centered (in relation to the width of the page!), but the floating to the left that I need to get my word in the same line as the other stuff screws with the position ...
Here's a fiddle:
http://jsfiddle.net/GinSan/2t7e3zeq/
Note that most of this is dynamically generated by the theme and I don't want to touch it. Please try to help me by only altering line 3 (i.e. without rebuilding the whole footer ...). Also, though I used a fixed width of 1100px for testing purposes, it should be responsive and stay in the center regardless of the width of the page (down to 640px).
Thanks!
Just put your "impress" paragraph at the and of the footer and replace float:left with text-align:center. Here is updated fiddle
in the jsfiddle this run, in your page you might position: relative for the first div
<div style="width:1100px">
<p style="float:left">© 2014 foo</p>
<p style="position: absolute;text-align: center;width: 100%;">Impressum</p>
<p style="float:right;text-align:right">Powered by Theme</a></p>
</div>
In a percentage-width container, a H2 is floated left and an image is floated right.
As the browser width is decreased, the image is pushed left towards the H2. When they meet, the logo is pushed down below the H2.
Example JSFiddle:
http://jsfiddle.net/VgS8B/1/
How can I make it so that the text starts wrapping over multiple lines before the image drops down underneath it? Like a sort of CSS "force whitespace wrap"?
This is probably simple but my brain isn't working :(
Is it necessary that the heading be floated left? You could left align it, remove its float, and place it below the image within the HTML to get your desired effect.
try this:
http://jsfiddle.net/VgS8B/5/
Having problems with CSS, and I think what I want is possible without javascript, but I'm not sure.
I have an article of text that I want to display with 0-3 images(The number is dynamic for each article). I want to display the 3 images all on the right-hand side of the page, with about 200-300px between them. This much I have achieved just by floating the images, using clear, and margins.
The part I haven't been able to do is allow the text to flow between the images in that 200-300px worth of space. I've tried relative positioning to push the images down to the part of the page I want them at, but the blank space reserved for them in the text by floating them stays where it is (i.e. the image ends up on top of text).
Is this even possible without js? The text is also completely dynamic, so I can't use any element in the text as an anchor.
EDIT: Here's some code to explain a little:
The tags:
<div>
<img class="floater" src="get_file.asp?image=1"/>
<img class="floater" src="get_file.asp?image=2"/>
<img class="floater" src="get_file.asp?image=3"/>
<p>lots and lots of text and paragraphs go here....</p>
</div>
The CSS:
.floater
{
float:right;
height:250px;
clear:both;
margin-top:200px;//This creates space between the images, but the text doesn't flow between them
}
You can achieve it only by using extra helper elements.
Look at this fiddle: http://jsfiddle.net/kizu/BwySX/
You just add helper elements with zero width, so they are pushing your floaters with their height, but as they have zero width, the text flows near them almost perfectly.
Not sure that's possible. A margin always pushes everything to the sides.
I'd divide the text into paragraphs, and have only one image per paragraph. Then the image could float inside it.