I've got an image that floats in the bottom right corner (to put in the button, the position has to be fixed). However, part of the text on my page disappears behind the image. Is it possible to make this text wrap around my image?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<img src='http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png'
style='float:right;
position: fixed;
right:50px;
bottom:50px;
width:20%'>
Text is placed here
</body>
</html>
You can see the problem in action on this example page.
No, not in CSS alone.
The fact that the image is floated doesn't help here, because it is also fixed. Therefor it is not part of the flow anymore and the text doesn't respond to it.
This cannot be fixed by CSS alone. You could fix it using Javascript by moving the image around as you scroll, but it will be hard to get right and it will seriously slow down scrolling through your page, since the text will have to be re-aligned after each movement.
I think you'd better look out for a different solution.
when you use a position fixed or absolute (float here is irrelevant for your style, you could remove it) you're removing an element from its natural flow. Thus, given this position, the text is not able to detect the image and to re-arrange itself around it.
Using Z-index property you can do this..
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<img src='http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png'
style='float:right;
position: fixed;
z-index:-100;
right:50px;
bottom:50px;
width:20%'>
<p style="z-index:12000">
Text is placed here</p>
</body>
</html>
Related
I am fairly new to html therefore this may be something very basic for you. This is the css file for my code:
.sidepanel-list{
margin-left: 10px;
background-color:lightgray;
When i run the file, the background color I have mentioned takes up all the space on the lines as I have put in the image. How do I limit it so it only takes some of the space on the lines?
Image will make it way clearer to understand what i am saying: https://i.stack.imgur.com/04dYi.png
In CSS, an element has a certain size (obviously). Inside that element, you can add padding to keep text or whatever away from the edge. Outside it, you can add margin to keep other elements away from that element.
What this hopefully shows is that your code is doing exactly what you asked: making the background color of the element itself gray, and then adding a margin outside that area of 10px. (This is why the gray doesn't extend beyond the text, even though you've specified that 10px of left margin, which is pushing the text out from the edge of the window.)
If you want 10px of space between the text and the edge of the gray area, use padding instead of margin.
If what you want is to make the whole thing narrower, you need to apply a width to the stylesheet (e.g. width: 50% or width: 400px).
To get a feel for this stuff, it can help to use your browser's Inspector tool. Among other things, this will show you the size, padding and margin on each element, so you can see exactly what's happening with your layout.
<!DOCTYPE html>
<html>
<head>
<style>
p.set {
background-color:lightgray;
}
</style>
</head>
<body>
<p class="set"><b>Categories</p></b>
<p class="set">Cable & docks</p>
<p class="set">cases & films</p>
<p class="set">charging devices</p>
<p class="set">connected home</p>
<p class="set">headphones</p>
</body>
</html>
I am trying too code a simple thing: an image in a div with no space between their borders but somehow I always get a bottom margin (or padding depending on how you want to see it). I tried putting margin and padding to 0 but it doesn't change anything.
Here is the code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta charset="utf-8"/>
<title>Sandbox</title>
<style>
*{margin:0;padding:0;}
div{
background:red;
}
</style>
</head>
<body>
<div>
<img src="image.jpg"/>
</div>
</body>
</html>
I tried on two browser already (Chrome, Maxthon) no luck. is it in the specification or all web browser are messing when it come to that?
Display your <img /> as a block-level element:
div > img {
display: block;
}
jsFiddle Demo
The problem and solution:
The reason is because inline-elements (such as images) align automatically to the baseline of the parent box unless modified by the vertical-align property. If you ever set a block-level element to display as an inline-block you'll often encounter this problem also. To fix this you align the image with the top or bottom of the div as follows:
img {
vertical-align: top;
}
Understanding baseline:
Baseline is easy to understand when thinking about text. Letters such as abcdefhiklmnorstuvwxz all sit on the baseline. There is, however, room under this line to handle letters that extend past the baseline. All other letters also sit on the baseline, but there is a portion of the letter that extends below the baseline. These include the letters: gjpqy. As inline elements (including images) sit on the baseline by default there will be extra space below them unless you modify the vertical-alignment.
I have a picture that i've positioned absolutely to use as a background. But it's covering up the content of the page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#pic1
{
position:absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<h1> hi there </h1>
<h1> hi there </h1>
<h1> hi there </h1>
<img id="pic1" src="1.jpg" width="100%" alt="picture">
</body>
</html>
You should change the z-index css property of the image
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order
how ever you can use another property on you body element to set background :
background-image:url('image url');
Why not use background image placement? This way you have less markup and more control over how you want the background to be displayed. If you still want to place background in this way, then try z-index: -1 and see if that works.
Overall, the way you are creating this page is less than optimal. You are setting image width using attribute. Why not get rid of img tag altogether and just roll with image placement using CSS. Lots of stuff on the web that shows how to do it.
I am working on a page and it is a little lengthy, so I chose to link to sections of it using the method below:
Link
<div id="myID">Content that I would like in center of screen, rather than at the absolute top.</div>
Everything works correctly, as I am pretty proficient with basic stuff like this, but I am wondering if there is a way to make it so that the content I am linking to is a little farther from the top of the browser window, rather than immediately at the top. It doesn't have to be perfectly centered, maybe a margin of 100px or so would be fine.
Thanks
<head>
<script>
function change()
{
document.getElementById("myID").style.marginTop="100px";
}
</script>
</head>
<body>
Link
<div id="myID">Content that I would like in center of screen, rather than at the absolute top.sss
<pre>
s
s
s
s
s
s</pre>
</div>
</body>
All you need to do is add a little CSS:
#myID {
margin-top: 100px;
}
Hope that helps!
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.