I have an image and I want to add the title of it and a basic description of it, to the right of the image. I tried using position: relative, absolute. padding & margin: 0px.
The link is: URL
The game "Rock, Paper, Scissors", and "Miji", game titles should be on the top of the image to the right, then under that I will add the game description.
Thanks!
Hello As per my understanding your trying for something like this below
https://jsfiddle.net/up1v5j0z/28/
<ul>
<li><div class="content"><img src="http://i.stack.imgur.com/FZVih.jpg?s=328&g=1" height="200px";><h4>Roshan Padole </h4><p>Senior Software Engineer and DigitalMarketing Experts</br>Management of the manpower with effective positive results. </p></div><br style="clear:both"></li>
</ul>
.content img {float:left}
[https://jsfiddle.net/up1v5j0z/28/][1]
Hope this will help you
A simple way for playing items on your page without having to mess around with specific margining and padding (which can get messy on busy pages) is by choosing your position (relative, absolute, etc) and then use left, right, and top to move it around the page.
For example
.exampleClass {
position: relative;
left: 20px;
top: 5px;
}
Play around with the numbers and position type until you have a good understanding about how they effect the items and you should have no problem tweaking the placement of the objects on your page.
<img src="Games/RPS.jpg" width="15%" height="15%" alt="Rock, Paper, Scissors">
Take these two tags first
<span id="gameTitle">Rock, Paper, Scissors, Shoot</span>
Alternate these positions two tags!
<span id="gameTitle" style=" float: left;">Rock, Paper, Scissors, Shoot</span>
Style the span to style="float: left";
Add <br/>between these <a href.... and <span id=....
Your output will be then http://myslambook.pe.hu/demo.png
Related
I want to place the text below the image.But when i add a paragraph, it is set behind the image. How to fix this please ???
<div style="width:96%;"><img src="../Images/2.jpg" height="640" style="position: absolute; left: 0px; top: 0px; width: 1200px; height: 700px; float: left; z-index: 0;"/></div>
<div><p>Vision defines the optimal desired future state and the conceptual image of what an organization wants to achieve over time. It provides guidance and inspiration to what an organization is focused on achieving in some time. It is written briefly in an inspirational manner that makes it easy for all employees to repeat it at any given time. “All Sri Lankans seamlessly connected with world-class information, communication and entertainment services" is the vision of SLT.</p><</div>
You positioned the picture absolute, thats why it is in a layer above the text.
simply drop the style and the text follows vertically after the block element div.
body{
margin:0;
}
<div style="width:96%;">
<img src="http://i.imgur.com/0nJG7lN.png" />
</div>
<p>Vision defines the optimal desired future state and the conceptual image of what an organization wants to achieve over time. It provides guidance and inspiration to what an organization is focused on achieving in some time. It is written briefly in an inspirational manner that makes it easy for all employees to repeat it at any given time. “All Sri Lankans seamlessly connected with world-class information, communication and entertainment services" is the vision of SLT.</p>
Since the DIV is positioned absolute
place the <p> tag inside that DIV right after the <img> tag.
Hope it will work.
HI i am building a site with genesis and dynamik. On the Home page with dynamik at the top there are 3 widgets. I created 3 more underneath the top three.
My problem is when I hover on any one of the elements the rest "jumps" around. All that the hover does is to adjust the element size from 300px to 350px.
How do I manage it that only the "active" element being hover on reacts and the other 5 stays static?
I might have found a solution BUT i am still lost. Bit too new at this I believe.
The two lines of code
Does this go into a html file? I am using Wordpress and these 6 fields are populated using widgets.
From the solution I understand that I have to create first-hover to six-hover with six of the lines of code linking the images to the class.
And the using the position:absolute;
If my take on this is correct please let me know and just advice me how do I do the
code and where.
Thx
You should set the css in \wp-content\themes\the-theme-you-use\style.css, for example it could be like this:
.dynamik-widget-area.feature {
position: absolute;
}
Just place this anywhere at the end of the file.
Another solution is to add style="position: absolute" to the first <div> element in the following part:
<div style="position: absolute" id="ez_feature_6" class="widget-area dynamik-widget-area ez feature 6">
<section id="black-studio-tinymce-39" class="widget widget_black_studio_tinymce">
<div class="widget-wrap">
<div class="textwidget"><p style="text-align: center;"><img class="alignnone size-medium wp-image-64" src="http://new.bluprintwebsolutions.co.za/wp-content/uploads/2015/02/diy1billboard-300x300.jpg" alt="diy1billboard" width="300" height="300"></p>
</div></div></section>
</div>
However note that this will solve the overlapping problem, but in return you'll have to reposition the elements.
Repositioning can be done using css too, using for example left attribute. Something like:
.second{
left: 100px;
}
then add second to the classes of that
<div style="position: absolute" id="ez_feature_2" class="widget-area dynamik-widget-area ez feature 6 second">
I'm creating a site with a horizontal navbar in which the buttons are designed as elements, making them easy to differentiate, and they individually light up when you a:hover over them. Here's a link: http://allpropestmanagement.net/commercial2.html
Obviously not a finished product.
My current problem involves that big purple field on the far right of the navbar, the one that's not a button. That too is an element, but with hover disabled and a whole load of nonbreaking spaces to pad it. That's the problem. I would like that purple field to extend all the way to the right end (with a tiny margin, like it does on the left side). The trouble with nbsp, as you can imagine, is that there's a finite number of them, and they don't scale. So if the navbar is the perfect length on my computer with, say, 16 nbsps, on someone else's machine it won't reach all the way and on yet another person's it will reach too far.
The html looks like this:
<div id="navmenu">
<form>
Home
Commercial
Meet The Pro
Contact
<a id="farright" style="border-top-right-radius:25px;">
<i> "We'll get the job done right!"
</i></a>
</form>
</div>
I feel odd saying this, but the css is kind of bulky and I'm having trouble formatting this post. Perhaps I'll add it in a few minutes once this post is visible, but the css file is "smithmicropurple.css".
Anyway, I would like a way to stretch that element so it always fits correctly, or if not, some other method that achieves the same effect. I have already tried setting widths individually for each element and that doesn't appear to work.
I like to do these types of things to "help" others (rarely, if I'm lucky), but also to help me learn more about html/css.
So I've given it the old college try with this FIDDLE.
HTML
<div class='holderdiv'>
<a href='#'>One</a>
<a href='#'>Two</a>
<a href='#'>Three</a>
<a href='#'>Four</a>
<a href='#'>We'll Get the Job Done Right!</a>
</div>
I won't post the CSS because it's pretty long. It's in the fiddle.
Please don't consider this a "real" answer. Perhaps just something to think about.
Semantically, I am not sure why the parent is a form element, i'd suggest changing that to a HTML5 <nav> element. (assuming you're using HTML5, of course)
The approach taken here is to set the child elements to display:table-cell, and give the targeted element, #farright a width of 100% to fill the remaining space. Also, text-align:center will effectively center all the child elements. No need for %nbsp;
#navmenu {
font-size: 14pt;
margin: 5px 0 0 5px;
}
#navmenu form {
width: 940px;
}
#navmenu form > a {
display: table-cell;
white-space: nowrap;
text-align:center;
}
#navmenu #farright {
width:100%;
}
I tried to figure it out using Firebug, but no chance. How is the Facebook status input border wrapped round the autosize input? Particularly, I am interested in the small triangle joined into the border. Using Firebug, I managed to find the triangle itself, which is provided in the form of a GIF image:
.uiComposerAttachment, .nub {
background: url(http://static.ak.fbcdn.net/rsrc.php/v1/zf/r/PfBgtiydy5U.gif) no-repeat center top;
height: 7px;
width: 11px
position: absolute;
left: 2px;
top: 18px;
}
But I couldn't figure out how it is placed above the input and how the border is added, in the form of a background image or defined as a CSS border?
I made a fiddle that mimics the facebook status box...
http://jsfiddle.net/UnsungHero97/mFuD4/5/
I added some functionality to the example, in particular, I found a cool jQuery plugin that allows for textarea auto-resizing.
Facebook actually uses a <textarea> element and the way they take care of the border is simple.
The "What's on your mind?" text is inside the <textarea> element and the border around it is due to several <div> element wrappers (more than the 2 I've shown above). Also, as you pointed out, the little arrow on top of the "What's on your mind?" is a .gif image, but there are ways to do this using only CSS!
Regarding the triangle...
If you're interested in alternative ways to do this using only CSS, I asked a question recently about the little triangle! Here's the question...
How can I create a "tooltip tail" using pure CSS?
... and here are the answers:
answer 1
answer 2
answer 3
answer 4 (this one is REALLY cool!!!)
I hope this helps.
Hristo
Here's how you can do it using only CSS: http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/
A similar question has been asked before though...
The border around the textarea is actually around parent div's (.uiTypeahead, .wrap) within the form. Looks like the actual textarea has no border.
As for the triangle it is just a css background inside the li (the items status, photo, video, link, etc are a list). The triangle is this element: <i class="nub"></i>. It is then positioned absolute to sit at the bottom of the list which has the form just below.
Thanks for your useful hints,
I finally managed to solve it in a four-liner:
#type_indicator { /* img#type_indicator is the triangle image tag, followed by the input field in HTML code */
position:absolute;
left:100px;
}
Greetings
Chris
I have an href in HTML that I dynamically produce from a server. I have designed a nice rounded corner gif image that I would like to use as the background i.e. put the text (in white) over the gif image and have it still linkable.
The current html looks like:
<h2>
<!--img src="images/greenback.gif"-->
<a id="site-title0" class="titletext" href="#">
Alligator Creek, Bowling Green Bay National Park
</a>
</h2>
<div id="descrip0" class='description'>
20km S of Townsville. $4.85/night. Gates close...
What is the best way to do this with CSS? It seems I could either use relative positioning to move the text over the background image, but in early experiments, this affects the rest of the flow on the page.
Or, maybe using CSS background-image is the best way?
As Daniel says, really:
a.particular-link {display: block; /* or inline-block; I think IE would respect it since a link is an inline-element */
background: #fff url(path/to/image.gif) top left no-repeat;
text-align: center;
line-height: 50px; } /* line height should be equal to the height of the image to vertically center using this technique */
I'd also -and this may simply be personal habit, affectation and received 'wisdom'- suggest using .png rather than .gif. But, as noted, it's likely a personal and subjective thing.
Answer edited in response to timbo's comment.
Also, and this ain't particularly pretty, there's a code demo here: http://davidrhysthomas.co.uk/so/a-img-bg.html
You have to set the link to display: block
display: block on the a or attach the background image to the h2. Either way, be sure to set a background color on the a or the h2 if you're using white text. If some one has CSS on and images off, they wont see your link. Means you may need to fill in the corners of your rounded corner image to the bg color of the page.