For some reason, if I use line-height property and set it a little smaller, like 13px or so,
the main text always gets on the bottom div with it's first line.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
div.main{
background-color:grey;
width:500px;
height:100px;
text-align:justify;
line-height:13px; /* pfff */
}
div.pusher{
float:right;
height:40px;
}
div.bottom{
float:right;
clear:right;
height:60px;
width:100px;
background-color:green;
font-size:20px;
}
</style>
</head>
<body>
<div class="main">
<div class="pusher"></div>
<div class="bottom">
textaaaaa aaaa aaaa
</div>
We have yet, many other health products, as they are all beneficiary in some way, aroma therapy products can help you to get more relaxed,
relieve the stress and pain, they can help with a better sleep and even protect from mosquitos.
Our beverages are also completely natural, and will keep you fresh and in shape!
Everyone knows of the coffee benefits, the juices also have vitamins and are highly beneficial.
In the beverage section you can also find.
</div>
</body>
</html>
Any ideas?
Are you trying to create a text wrap effect around the green div?
You should float the main text left and have them side by side that will look better then add a clear both dive under them both.
check this too http://css-tricks.com/all-about-floats/
EDIT:
ok you loose the pusher and move the green div outside of main and float it right and use negative margins to put it in to place. And add a clear both dive under main.
or set the main div to position relative and move the green div with absolute positioning
I have managed to find the answer for this bug.
The height of the pusher needs to be multiple of line height. Eg. 39px;
In that case it will float text as intended. We can then make the bg transparent and put a litle padding to make it line-up better.
Related
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>
I am new to web-designing styles and css. I read that usage of tables for layout is a bad practice. Hence I tried to create this layout using <br\> , div and float.
Problem :
Once, <br\> is applied, I can't render the upper part, (similar to once \n is printed in console, we cant go to the upper line).
So, could any one provide an alternative way of designing the page, without using <table> and <br> tags.
Looks like a perfect example usage of a grid system.
Without using a grid system, you can just use float: left for each of the div and it should be OK.
Here is simple example for doing so,
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>StackOverFlow</title>
<style type="text/css">
.content{
width:150px;
height:100px;
border:1px solid blue;
}
.content .text{
display:block;
border:1px solid red;
}
</style>
</head>
<body>
<div class="content">
<div class="text">
text here
</div>
<div class="text">
another text here
</div>
<div class="text">
yet another text here
</div>
</div>
</body>
</html>
Code Explanation
What i did is wrap text div inside content parent div and assign fixed width and height to parent div.
Now for child div i just used display:block and see the result. You do not need to use <br/> display:block; will do it for you.
Now what is the meaning of display:block; so it just tell browser to allow that particular DOM to take whole width of the parent div.
By adding css to DIV's you can get some great layouts (i.e the three column style you're looking for here) , try this aticle to get you started:
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm
There are two issues in the code I've written that I'm unsure how to resolve:
How the page looks on Google Chrome
That my two columns of divs do not scale together as I zoom in and out.
If I zoom in past a certain amount, the divs bust out their containers and distort the webpage completely.
Here's the fiddle with the relevant HTML and CSS code for anyone who'd like to look at it.
I would like for the divs to be scaled up or down in position when the user zooms in or out.
EDIT: Up to line #130 are the relevant CSS tags describing the elements that I coded for this page, the rest of the CSS is from Bootstrap and is irrelevant (to this problem)
What's your desired effect? When they zoom in, it's as if the whole page is scaled? or you want the background etc to remain static and only zoom in the foreground content?
Short of that, you can disable the scale, so that these types of distortions can never happen:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
to do that you have to assign a value to the width or container width of the div. like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{
font-size:36px;
font-family:Arial, Helvetica, sans-serif;
}
.mega_cont{
margin:0 auto;
padding-top:10%;
width:710px;
}
.super_cont_lhs{
float:left;
width:300px;
margin-right:5px;
}
.cont1{
width:100%;
float:left;
height:auto;
background-color:#000;
margin-bottom:10px;
color:#CCC;
}
.cont2{
width:100%;
float:left;
height:auto;
background-color:#000;
color:#CCC;
}
.super_cont_rhs{
width:400px;
float:left;
height:auto;
background-color:#F60;
}
</style>
</head>
<body>
<div class="mega_cont">
<div class="super_cont_lhs">
<div class="cont1">P - S P E C T R A</div>
<div class="cont2">B E G I N</div>
</div>
<div class="super_cont_rhs">
P-Spectra enables practicing engineers to design seismic retrofit solutions with supplemental dampers using performance based design.
</div>
</div>
</body>
</html>
The bad news is that it is not the zoom that breaks your design, it's the browser change in dimensions.
Try setting the zoom to 50%, and then changing the browser window to half the size. Your display is again correct, isn't it ?
Now keep the zoom at 100%, and just change the browser dimensions. It breaks anyway, doesn't it ?
When you mix pixels and % in the dimensions, your layout is highly dependent on the size of the browser. To avoid that, you can use only pixels, or only %, but not mixed. (Or mixed controlling very well where you mix them !)
When you zoom in, and don't change your browser size, it's like you make the browser size smaller (according to the new zoom factor)
you have to design the liquid page .
Make the pages responsive and your above problem will simply disappear.
Also for the responsive design page better to use bootstrap.
Bootstrap will make you easy for responsive design.
Here is the link to download the bootstrap all the instruction to use it...
http://twitter.github.io/bootstrap/
You're looking for a responsive design.
Basically, make it two columns instead of 3 positioned blocks. get rid of all of the explicit widths, and lose the absolute positioning. Then set display:inline-block (or as #ShannonHochkins said you could use float:left. I just prefer inline-blocks) and %-based widths.
Here ya go: http://jsfiddle.net/daCrosby/Dtcrn/1/
I removed a lot of extra code (<head>, <script>, etc) - it's not extra on your site, it just makes the jsFiddle cleaner.
Here's a bare-bones example of how to mae the 2 columns:
HTML
<div id="nav_bar">
[ ... ]
</div>
<div id="about_block">
[ ... ]
</div>
CSS
#nav_bar,
#about_block{
display:inline-block;
vertical-align:top;
margin-left:-4px;
width:25%;
}
#about_block{
width:75%;
}
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.
Hey there! I have a bit of a sticky IE 6 problem (don't we all?).
I figured out what I think is a pretty neat way to have a div with a transparent background that shows the background's body image and containing non-transparent content. This consists of three divs really:
One big container div, one absolutely positioned transparent div for the background and one relatively positioned div with the non-transparent content.
I position the two divs inside the containing div so they sit on top of each other giving the appearance of a transparent background with non-transparent content.
The Containing div is pushed to the size of the content div. I set the transparent background's height and width to 100% causing it to take on the containing div's size. This then means that my background expands with the content making all my div's extensable.
This last bit is where the problem comes in. IE 6 does not cause the background div to take on the height of the containing div. If I specify a height it works fine, but this means that I loose the extendability of the whole thing.
Here is the basic code:
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="contentDiv">
<div class="tranparentDiv"></div>
<div class="nonTranparentContent">
<div class="contentBody">
<h2 id="quote">“time is given to let you apply what you have learnt in reality.”</h2>
<p>– Nandipha Nombuthuma, Concept Interactive graduate</p>
</div>
</div>
</div>
</body>
</html>
CSS code (save as “style.css”)
#charset "utf-8";
/* CSS Document */
body{
background:url(bg.png);
}
.tranparentDiv{
-khtml-opacity:.6; /*several different ways to set the transparency to ensure cross browser independence*/
-moz-opacity:.6;
-ms-filter:"alpha(opacity=60)";
filter:alpha(opacity=60);
opacity:.6;
position:absolute;
top:0;
left:0;
background:#FFFFFF;
width:100%;
height:100%;
}
.nonTranparentContent{
width:inherit;
position:relative;
}
#contentDiv{
width:500px;
margin-left:auto;
margin-right:auto;
position:relative;
/*height:200px add this to work in ie 6*/
}
I'd appreciate any suggestions how I could work around this. I would hate to have to go and set a height every time I change my content.
IE6 can't calculate what 100% is without a height specified to the containing element. To my knowledge there really isn't anything you can do to get exactly what you want here with CSS, but you could use some sort of javascript to find the height of the container and then set the height of the transparent div to match the container's height.
Using jQuery, I believe it would look something like this:
var containerHeight = $('#contentDiv').height() + 'px';
$('.tranparentDiv').height(containerHeight);