I created a simple example to illustrate the issue I am having.
It seems that if I have a DIV set to a specific pixel width, then resize the browser smaller until the horizontal scroll bar appears then scroll to the right, the content is cut off. Or at least some of it.
http://www.artworknotavailable.com/examples/cutoff.html
Am I missing s
something here?
<!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>Browser Cutoff Example</title>
</head>
<body>
<div>
<div style="background-color:#009900;">
<div style="width:800px;">
<strong>Width: 800px </strong>
<br />
Resize your browser Smaller than the width of this box until Horizontal scroll bars appear
<br />
Now scroll to the right.
<br />
Why is the box getting cut off?
</div>
</div>
</div>
</body>
</html>
This issue drove me crazy too, and it's actutally really simple to solve. Just add the property min-width and put the same value as your site width (800px, 960px,..)
You have 3 nested divs. one is not styled. the next one in has the background color. and he deepest one has the 800px width.
try this and you'll see whats happening:
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Browser Cutoff Example</title>
</head><body>
<div>
<div style="background-color: rgb(0, 153, 0); border: 9px solid blue;">
<div style="width: 800px; border: 1px solid red;">
<strong>Width: 800px </strong>
<br>
Resize your browser Smaller than the width of this box until Horizontal scroll bars appear
<br>
Now scroll to the right.
<br>
Why is the box getting cut off?
</div>
</div>
</div>
</body></html>
Related
I have this kind a scenario:
<div id=area>
<div id=box>
</div>
</div>
<div id=footer>
</div>
div "area" is center and it is 700px width and has shadows at right and left.
there is then a div box, which is 500px width and has text and options in it.
And at bottom I have footer where is one line of text.
So, my shadow effect at div "area" stops at same spot as box does. At next page, i have ~2000px amount of text in same box, and there "area" div's shadow is as it should be.
I want to have "area" div whole screen size, and more if there is more text inside of it.
Try something like this :
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="area">
<div id="box">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
CSS
html {height:100%}
body {height:100%;margin: 0;padding: 0;}
#area {height: 100%;background-color: blue}
I'm creating a web but having trouble with the alignment of divs. Cant fix this problem for a day now.
How do I force align the image(the text image)? It's inside the div.
<!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" charset="utf-8;" content="text/html" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<
And force the lower div to stay put when window resized or zoomed in/out.
If you seriously want to use a "text image" as a regular image, why not use it in a style sheet? So right now you have it in a div, so make that div a class or id like and make a style sheet where you have that image as a background image. Then you can use the position tactic to put the image wherever you want.
HTML:
<body>
<div class="textimage">
</div>
</body>
CSS:
.textimage{
width:500px;
height:500px;
background-image: url('..whatever.gif');
background-position: 50px 50px; //the first coordinate moves the image left to right // while the second coordinate moves it up and down
}
Try it
<div style="text-align: center">
<img style="width: 960px;" src="images/about us img.jpg"></img>
<div style="text-align: center">
<img src="images/about-cti.jpg"></img>
<br />ABOUT CTI
</div>
</div>
first issue is don't add specific margin like "margin-right:300px" when you want it to be resized or zoomed in/out.
and second issue is adding "float:right" to the image.
the below changes to the code will solve your problem.
<div style="width: 960px; margin:0 auto;" align="left">
<p>
<span style="float:left">
<br>
ABOUT CTI
</span>
<img src="images/about-cti.jpg"/>
</p>
</div>
You can play with my code here:
http://jsfiddle.net/gqQnd/
Basically I want to have a div of content to have a semi-transparent border.
The border is semi-transparent but the insider div also become semi-transparent.
I want the inner div to be white BG
Anyone has suggestion?
<!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>
<title></title>
<style type="text/css">
#transparency {filter: alpha(opacity=75);opacity:.75; -moz-opacity:.75; background-color:#ccc;border:5px solid #333; position:absolute;top:50px; left:50px;}
#cont {background-color:#fff;filter: alpha(opacity=100);opacity:1;}
</style>
</head>
<body>
This is so cool way to do this
<br />
This is so cool way to do this
<br />
This is so cool way to do this<br />
This is so cool way to do this<br />
This is so cool way to do this<br />
This is so cool way to do this<br />
This is so cool way to do this<br />
This is so cool way to do this<br />
This is so cool way to do this<br />
This is so cool way to do this
<div id="transparency">
<div id="cont">
<div>
This is header
</div>
<div>This is body</div>
</div>
</div>
</body>
</html>
Your styles for #cont are actually being applied (hence the white background, even if it is semi-transparent). The problem is that opacity is inherited, and so if you apply it to a parent element, there's no way to stop it being applied to the child elements.
You could use an rgba value for the border-color, but then you get dark corners in Chrome and Safari (I think), where the borders overlap. Read about it here (with workarounds).
What about just setting an rgba background on the parent, with some padding?
http://jsfiddle.net/Kp7JJ/
Update: see css3please.com for cross browser support for rgba, e.g. you will need to apply a Microsoft filter in the CSS to get it to work in IE
Here is an option how to do this, but in this case your popup will be with the fixed size and I don't know if it's possible to make it flexible without javascript (jQuery) with only css
http://jsfiddle.net/gqQnd/13/
Without the use of a rgba background, i would recommend you to create a container containing two divs. One for the opacity, the other for plain color.
The cons are that you can't user without knowing the height and width of the div you're going to create.
But it's working in every browser :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<title>my super page</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
body { background:#EF9; }
.container { width:200px;height:140px; }
.container > div { width:196px; height:136px; position: absolute;}
.c-opacified { position:absolute; border:2px solid #000;opacity: 0.5;-moz-opacity: 0.5;filter:alpha(opacity=50);}
.c-plain { background:red;margin:2px;/*because we have a border: 2px */}
</style>
</head>
<body>
<div class="container">
<div class="c-opacified"></div>
<div class="c-plain"></div>
</div>
</body>
</html>
How can be image center horizontally inside smaller or bigger div, (image is variable and can be bigger then his div wrapper or smaller)?
Exist Javascript solution, but i looking for css solution.
The sample code that not working: (html should be not changed only css)
<!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" xml:lang="en" lang="en">
<head>
<title>my test</title>
</head>
<body>
<div id="wrapper" style="width:300px;margin:0 auto;">
<div id="image_content" style="margin:0 auto;">
<img src="image_small_then_300_or_bigger.jpg" />
</div>
</div>
</body>
</html>
Thanks
You want to center align the image_content within the wrapper?
text-align
<div id="wrapper" style="width:300px;margin:0 auto;text-align:center;">
background-image
<div id="wrapper" style="width:300px;margin:0 auto;background:transparent url('image_small_then_300_or_bigger.jpg') 50% 50%;"> good call #gov
I am trying to enclose two DIV elements, inner-1 & inner-2, (dotted red border) inside a wrapper DIV (solid green border) but the wrapper DIV element does not expand to enclose the inner DIVs.
What am I doing wrong?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Nested divs </title>
</head>
<body>
<div id="wrapper" style="margin-left:auto; margin-right:auto; border:solid #669933;">
content inside "wrapper" div
<div id="inner-1" style="float:left; width:49%; border:dotted #CC3300;">
content <br />
inside <br />
inner-1 div
</div>
<div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;">
content inside inner-2 div
</div>
</div>
</body>
</html>
Rendered HTML
Since you're floating both #inner-1 and #inner-2, you'll need a clear fix. Basically, setting overflow: auto on the parent (#wrapper) should do the trick.
.
.
.
<div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;">
content inside inner-2 div
</div>
<br style="clear:both" />
</div>
.
.
.
Try that.
You can set the margins for the <br /> so that it is hardly visible too.
It is the floats that are giving you the problem.
this might work for you:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Nested divs </title>
</head>
<body>
<div id="wrapper" style="margin-left:auto; margin-right:auto; border:solid #669933;">
content inside "wrapper" div
<div id="inner-1" style="float:left; width:49%; border:dotted #CC3300;">
content <br />
inside <br />
inner-1 div
</div>
<div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;">
content inside inner-2 div
</div>
<div style="clear: both"></div>
</div>
</body>
</html>
Added "div style="clear: both">" at the bottom of the containing DIV.
It might also be worth noting that there are a few different methods of "clearing floats" out there. This one works pretty well for me and only involves adding a single class to the parent element:
.clearfix:after{content:"\0020";display:block;height:0;clear:both;
visibility:hidden;overflow:hidden;}
As has been said already you need some method of forcing the containing div to realize the floating divs have taken up space. Commonly known as clearing a float, there are quite a few discussions on the topic around the internet.
This post at pathf.com is one of the more popular to use. When you read the article be sure to read all the comments as well.