I need to populate data in the white space of the box shown in the picture. The Red portion will be an image,
But still data has to be shown continuously in the white space. How can i achieve this using HTML and CSS ?
Updated with code :
<div id="Content" runat="server">
<img id="ad" src="images/sandbox.gif"
style="float:right; height: 200px; width: 150px;" alt="{alt}" />
</div>
#Anuya take a look at this http://jsfiddle.net/TfXNf/
Its better if you define a class in you css style in order to toggle all pictures that needs to have the same layout so
HTML
<img src="http://link.to/image.jpg" class="className" alt="Image"/>
CSS
.className{
float: right;
margin-right:2px; /*change these based on your layout*/
margin-bottom: 2px; /*change these based on your layout*/
}
Margins are needed to push the text a little bit away from the picture so you can create the illusion of the border
Just put a float onto your image:
<img src="{imageLocation}" alt="{alt}" style="float:right;" />
Ideally you would want to keep the styling separate from the content but this will give you the idea. Hope that helps
Related
I have uploaded my page here so that you can see clearly what I am referring to:
http://www.emmasteed.co.uk/new/
The menu section works fine it is the larger button icons at the bottom: Portfolio, Get in touch and About me.
I have hyperlinked these images as you will see in the code however nothing happens when I hover over them or try to click. What am I doing wrong? This is driving me crazy!
<div class="largemenubutton"><img src="images/portfolio.png" alt="Portfolio" border="0" /></div>
<div class="largemenubutton"><img src="images/getintouch.png" alt="Contact me!" border="0" /></div>
<div class="largemenubutton"><img src="images/aboutme.png" alt="About" border="0" /></div>
.largemenubutton {
width:283px;
height:259px;
margin-top:20px;
float:left;
display:block;
text-align:center;
}
Remove the z-index -1 there:
.mainimage {
z-index: -1;
}
For keeping the drop shadow do the following:
<div class="header">
<div class="container">
remove the mainhome width and apply to the container in the css:
.container {
width: 850px;
}
Also use that container for wrapping the same way the main content for the site.
and then for the drop shadow (customize as you please):
.header {
box-shadow: 0 0 0 10px black;
}
This is the fiddle that represents more or less this: http://jsfiddle.net/9q7PX/
Two possible solutions come to mind:
1) Wrap the img element in a div, and wrap that div with your a element.
2) Nix the img element from your DOM, and instead make it a background-image of a div (in CSS). Then wrap that div with your a element.
I have finally managed to figure a way round this. I would like to thank everyone for their answers and advice as without this I probably would never have found this solution. The z-index setting on the previous div was the problem I had to get round.
Basically i created another div tag to contain my large menu buttons and placed this outside of the previous div which held my slider image which was set at z-index -1 as i wanted my image to sit behind a drop shadow above. This then allowed the links on the images to work.
Hope this makes sense and helps anyone else who has this problem.
I want to use the above image in a img class to put underneath the photos. That have that class. See the markup example below.
<img class="img-shadow" src="image.jpg">
or may be like this
<div class="img-shadow">
<img src="image.jpg">
</div>
How would the css look?
HTML:
<div class="img-shadow">
<img src="image.jpg">
</div>
CSS:
.img-shadow{
background:url(your image URL) no-repeat center bottom;
padding-bottom:20px;
text-align:center;
}
Adjust the padding on the bottom of the div to increase or decrease the distance between the bottom of the image and the shadow.
Just as another option, instead of using an image for your shadow, you can use CSS3 shadow property to achieve something similar.
In the fiddle, I show the same image using the class and not using the class: JS Fiddle
.img-shadow {
box-shadow: 0px 2px 10px #000;
width: 200px;
}
If what you said in the question is what you really want to do, You can simply put the shadow image below the other image using an <img> tag like
<div>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSyLdxqT0UBb31xeB4yMfUjCqKld2q9FqpUMZEIvq175_4-MgAPUA"/> //Your image
<img src="http://i.stack.imgur.com/ZLAht.png"/> // Your shadow image
</div>
and position them accordingly using css..
check this fiddle
Note:there might be better ways for creating a shadow below an image, just answering the question in a straight forward manner..
Let say I have two elements <img> and <p> as
<img style="background-color:#ffffff;width:250px;height:auto;float:left" src="http://somesite/p3.png" />
<p>
alibabaanakjalanan.</p>
Currently, the paragraph content is shown exactly nex to the image. How can I set some spacing between the elements ?
If you are floating the image you all you have to do is give it some margin-right, I would advise moving away from adding the styles inline by maybe giving the image a class something like this although my classname is very weak:
CSS
.img {
background-color:#ffffff;
width:250px;
height:auto;
float:left;
margin-right: 20px;
}
HTML
<img src="http://somesite/p3.png" class="img" />
<p class="para">alibabaanakjalanan.</p>
In action http://jsfiddle.net/PqWAh/1/
This is best practice for seperating styles from markup
Add margin for img.
margin-right:20px;
So code would be
<img style="background-color:#ffffff;width:250px;height:auto;float:left;margin-right:20px;"
I have a html page which looks like the following:
I want to display some text on the left pane, but the problem is that the text should be inside the oval shaped area only. How do I achieve this? Note that the oval shaped image is the background image, however if required, I can also use a <img> tag for it if it would help. One lame way is to use <p> tags with padding, but that is not an efficient way, so kindly suggest some good methods.
EDIT: HTML:
<div id="leftStage" class="rounded-corners">
<div id="questionDisp" align="center">
</div>
</div>
CSS:
#leftStage {
position: relative;
width: 34%;
height:86%;
float: left;
}
#questionDisp {
display:none;
}
JS: (When the appropriate function is called: )
$("#questionDisp").fadeIn(1000);
$("#questionDisp").html(quesArr.q1); //data read from xml
EDIT: What I need is a div or something above the oval background, & the text should fit in it. I am getting the text from an xml file, so it is not that I have a fixed text size to be displayed
There's actually a pure CSS/XHTML code generator on csstextwrap that does exactly what you want.
EDIT:
The concept here is to float <div>'s on either side of your text so that your content is forced to "flow" in between them. By setting the width of your floated <div>'s, you can create a wide variety of cascading "stencils."
See concept illustrated here: fiddle
If it is background-image then use the position:absolute with proper margins (top and left), and set the width less than that the oval background-image. Then display property 'block'.
Maybe you could try the jQuery plugin Text Fill
also see: https://stackoverflow.com/a/688362/753676
I removed my answer since only the left float worked.
If you paste this code: it'll show you exactly how it works. I did a border-radius instead of creating a circle png.
<div style="width:250px;height:230px; border-radius:125px;background:#efefef;padding-top:20px; text-align:center">
The code for my<br /> fix isn't pretty but it should<br />work It's not automatic, but it<br /> does the job that you need it<br /> to do.
</div>
You have not shared any HTML, The working code is with some assumption
The HTML is,
<div id="main">
<div class="text">This is text</div>
</div>
Where div with classtext is the text container.
The CSS for same will be,
#main{
background-image:url('http://i.stack.imgur.com/bw2HK.png');
height:563px;
width:691px;
}
#main .text{
color:#FF0000;
width:240px;
text-align:center;
top:100px;
border:1px solid;
float:left;
position:absolute;
}
Here .text is the class that represent the text styling. The main part is position:absolute;. This will set the text div position to absolute. Now you can move the div above image div using top and left styles.
Please do review working example here
P.S. The border, color and other styles can be changed as per your need.
How can I right-align an image using CSS.
I do not want the text to wrap-around the image. I want the right aligned image to be on a line by itself.
<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
...text...
</div>
jsFiddle.
img {
display: block;
margin-left: auto;
}
Float the image right, which will at first cause your text to wrap around it.
Then whatever the very next element is, set it to { clear: right; } and everything will stop wrapping around the image.
There are a few different ways to do this but following is a quick sample of one way.
<img src="yourimage.jpg" style="float:right" /><div style="clear:both">Your text here.</div>
I used inline styles for this sample but you can easily place these in a stylesheet and reference the class or id.
To make the image move right:
float: right;
To make the text not wrapped:
clear: right;
For best practice, put the css code in your stylesheets file. Once you add more code, it will look messy and hard to edit.
My workaround for this issue was to set display: inline to the image element.
With this, your image and text will be aligned to the right if you set text-align: right from a parent container.
Easier / more organized way to do this is with some css.
CSS Above, HTML below with the snippet.
div {
clear: right;
}
/*
img {
float:right
}*/
/* img part is unneeded unless you want it to be a image on the right the whole time */
<html>
<!-- i am using an image from my website as a quick example-->
<img src="https://raw.githubusercontent.com/ksIsCute/GtGraffiti/gh-pages/icon.ico" alt="my image!" style=float:right>
<div>My Text Here</div>
<!-- Text goes below the image, and not beside it.-->
<img src="https://raw.githubusercontent.com/ksIsCute/GtGraffiti/gh-pages/icon.ico" alt="my image!" style=float:right>
<div>
<h1> I support headers! </h1>
<blockquote> And blockquotes!! </blockquote>
and hyperlinks!
</div>
<!-- THE CODE BELOW HERE IS **NOT** NEEDED!! (except for the </html>) -->
<h2 style="text-align:center;color:Grey;font-family:verdana"> Honestly I hope this helped you, if there is any error to my work please feel free to tell me. </h2>
</html>