I have a problem with a picture going out of its container.
<div id="home" class="cadre">
<div id="photo">
<img style="height:80%;float:right;max-height:250px;" src="images/photo.jpg"/>
</div>
<div style="width:70%;">
Some text
</div>
</div>
And here is the relevant content of the CSS stylesheet:
img{
max-width:100%;
max-height:100%;
}
#photo{
float: right;
max-width:45%;
height:90%;
margin: 0 auto;
}
.cadre {
color: black;
border-width: 0;
border-radius: 10px;
margin: 40px auto;
padding: 20px;
width: 95%;
background-color: rgba(200,200,200,.2);
box-shadow: 0px 1px 8px 0px rgba(0,0,0,.4) inset;
}
I am new to CSS so I probably made design mistakes, but still I don't understand how it is possible that the pictures goes out of the frame.
It also seems to depend on the OS/explorer, as it works fine on Windows/Chrome but not on Linux/Firefox.
Try this to solve your parent-to-child width problem:
<div class="wrapper">
<div class="inner">
<div id="pic">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT6xO92YTljrxvGfxHRnZ_F-jjYGQvfRST-18K3cJhJYPNfBlLTdg"/>
</div>
<div id="text">
some text
<br/><br/><br/><br/><br/><br/><br/>
other text
</div>
</div>
</div>
And CSS:
.wrapper {
max-height: auto;
background: red;
display: table;
}
.inner {
display: table-row;
}
#pic {
float: right;
height: 180px;
max-height: 100%
}
#text {
width:70%;
}
You need to define parent div where the photo is embedded in a way that it does not allow for any element to go "overboard".
#photo {
overflow: hidden;
}
#photo img {
max-width: 100%;
max-height: 100%;
}
Should do the trick in your situation.
Related
I want split screen only two div's for that purpose write this html code:
<div class="box">
<div class="div1">
<img src="../Content/45.png" style="width:auto;" />
</div>
<div class="div2">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<div class="clear"></div>
</div>
and this is css style:
<style>
div.box {
background: #EEE;
height: 100px;
width: 600px;
}
div.div1 {
background: #999;
float: left;
height: 100%;
width: 50%;
}
div.div2 {
background: #666;
height: 100%;
width:50%;
left:100px;
float:right;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
</style>
but when i run that page,i see this output:
Why i can not split screen?what is correct css?thanks.
Its working fine..
Check
https://jsfiddle.net/3d5mq1tf/
Please update the fiddle .. If you find something missing..
div.box {
background: #EEE;
height: 100px;
width: 600px;
}
div.div1 {
background: #999;
float: left;
height: 100%;
width: 50%;
}
div.div2 {
background: #666;
height: 100%;
width:50%;
left:100px;
float:right;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
<div class="box">
<div class="div1">
<img src="../Content/45.png" style="width:auto;" />
</div>
<div class="div2">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<div class="clear"></div>
</div>
Your code is working up to the point where the image gets rendered, which will stretch over the bounds of your div because you don't tell it otherwise.
While the only parts you need to add are the image width ones, I took the liberty and turned this from a float-based arrangement to in inline-based one, giving you reduced markup as well as CSS, and better control over what you're doing.
div.box {
background: #EEE;
height: 100px;
width: 600px;
white-space: nowrap;
}
div.box > div {
display: inline-block;
height: 100%;
vertical-align: top;
width: 50%;
}
div.box > div img {
width: 100%;
}
.div1 {
background-color: #999;
}
.div2 {
background-color: #666;
}
<div class="box">
<div class="div1">
<img src="http://i.imgur.com/k8BtMvj.jpg" alt="test image" />
</div><div class="div2"></div>
</div>
I suspect that you also want the image to have a maximum height of 100px, as the parent container has. If you do, you could use overflow: hidden on the parent container, but you would be better off rendering it as a background image, like this:
div.box {
background: #EEE;
height: 100px;
width: 600px;
}
div.box > div {
display: inline-block;
height: 100%;
vertical-align: top;
width: 50%;
}
div.box > div img {
width: 100%;
}
.div1 {
background: #999 url('http://i.imgur.com/k8BtMvj.jpg') left top no-repeat;
background-size: cover;
}
.div2 {
background-color: #666;
}
<div class="box">
<div class="div1"></div><div class="div2"></div>
</div>
This also shows the differences in where you should use background vs background-color
Basically, when I try to add a paragraph into one of the <div>'s I run into trouble. The page seems to be messed up. Is there anything wrong with my code? And, what are some things that my code needs to be improved?
Thanks!
<!DOCTYPE HTML>
<html>
<style>
* {
font-family: georgia;
}
body {
background-color: white;
}
#content {
width: 60%;
height: 1500px;
margin: auto;
}
#header {
height: 200px;
border: 1px dashed;
background-color: #44424D;
}
#left {
width: 20%;
height: 100%;
display: inline-block;
}
#right {
height: 100%;
width: 20%;
display: inline-block;
position: relative;
left: 676px;
}
#name {
font-family: big john;
font-size: 50px;
width: 100%;
margin: 0 auto;
border-bottom: 1px solid;
color: white;
}
.wot {
background-color: #E6C88C;
}
</style>
<head><title>Film Club</title></head>
<body>
<div id="content">
<div id="header">
<h1 id="name">The Film Club</h1>
</div>
<div id="left", class="wot">
<p>Test</p>
</div>
<div id="right", class="wot">
</div>
</div>
</body>
</html>
First of all, you have commas in your HTML, which is incorrect.
<div id="content">
<div id="header">
<h1 id="name">The Film Club</h1>
</div>
<div id="left" class="wot">
<p>Test</p>
</div>
<div id="right" class="wot">
</div>
</div>
Second, the heights of the divs with the text in is set to 100% and the height of you #content div set to 1500px so the divs expand to this full height. The height of a div is only applied when it contains content which is why it changes when you put text in. You can remove the height from the CSS, or set it to a more appropriate value.
Two of your <div>s have commas separating the properties. Properties in html tags do not need to be separated by commas. They should just be separated by a space (this probably isn't even required, but you should do it in the interest of good style).
I'm going to assume the improper indentation is a result of posting the code, but if that's not the case, proper indentation is always a good way to improve your code.
I have change the following CSS code css
#left {
width: 20%;
height: 100%;
float:left;
display: inline-block;
}
#right {
height: 100%;
width: 20%;
display: inline-block;
position: relative;
float: right;
}
<!DOCTYPE HTML>
<html>
<style>
* {
font-family: georgia;
}
body {
background-color: white;
}
#content {
width: 60%;
height: 1500px;
margin: auto;
}
#header {
height: 200px;
border: 1px dashed;
background-color: #44424D;
}
#left {
width: 20%;
height: 100%;
float:left;
display: inline-block;
}
#right {
height: 100%;
width: 20%;
display: inline-block;
position: relative;
float: right;
}
#name {
font-family: big john;
font-size: 50px;
width: 100%;
margin: 0 auto;
border-bottom: 1px solid;
color: white;
}
.wot {
background-color: #E6C88C;
}
</style>
<head><title>Film Club</title></head>
<body>
<div id="content">
<div id="header">
<h1 id="name">The Film Club</h1>
</div>
<div id="left", class="wot">
<p>Test</p>
</div>
<div id="right", class="wot">
</div>
</div>
</body>
</html>
I am working on website that have in the header "two lines" must repeat Horizontally
and footer,
I have already made a background repeat imgage for the two lines
How to make the "second background repeat image" position same as "footer div" position ..
Actually I make the two line in the top to be one "background repeat image"...
HTML Code:
<body>
<div id="websiteContents">
<div id="header">
<div id="headerLine"></div>
contents
<div id="headerLine_down"></div>
</div>
vary contents
<div class="footer">
Home
about
contact us
</div>
</div>
</body>
CSS Code:
body {
background: url(../images/standard/repeat_header.png) #FFF repeat-x 0 165px;
}
#websiteContents {
width: 1150px;
margin: 0 auto;
}
#headerLine {
width: 1150px;
height: 4px;
background-color: #647193;
float: left;
margin-top: 14px;
}
#headerLine_down {
width: 1150px;
height: 9px;
background-color: #2B303E;
}
.footer {
width: 1150px;
background-color: #2A2F3D;
other styles...
}
The Screenshot
The web site is too large so if you want the full code I will give you
Thank you all
I think this will help you
I have changed your html structure
html
<div id="websiteContents">
<div id="header">
<div class="headerContainer">
<div id="headerLine"></div>
contents
<div id="headerLine_down"></div>
</div>
</div>
<div class="bodyContainer">
vary contents
</div>
<div class="footer">
<div class="footerContainer">
Home
about
contact us
</div>
</div>
</div>
css
body {
background: url(../images/standard/repeat_header.png) #FFF repeat-x 0 165px;
}
body, html{
height:100%;
}
#websiteContents {
height:100%;
}
#headerLine {
width: 1150px;
height: 4px;
background-color: #647193;
float: left;
margin-top: 14px;
}
#headerLine_down {
width: 1150px;
height: 9px;
background-color: #2B303E;
}
.footer {
background-color: #2A2F3D;
height:100%;
}
.headerContainer{
width:1150px;
margin:0 auto;
}
.bodyContainer{
width:1150px;
margin:0 auto;
}
.footerContainer{
width:1150px;
margin:0 auto;
}
I'm stil not sure, if I understood... but do you think something like this ?
jsFIddle demo
CSS
.footer {
width: 1150px;
background-color: #2A2F3D;
background-image:url('http://www.w3schools.com/cssref/smiley.gif');
background-repeat:no-repeat;
background-position: left top;
height:100px;
}
Let me preface this by saying I feel like a moron. I have a fairly simple scenario that I can't figure out.
This is a sample of what my code looks like:
<div id="container-wrapper">
<div id="container">
<div class="left">This is LEFT</div>
<div class="line"></div>
</div>
</div>
Let's say #container-wrapper is a fixed width such as 960px. #container has its width set to 100%. I don't know the width of .left because the text inside is dynamic. It's floated left. .line has a background image that is essentially a line which will repeat to fill the width of the div. I want to float it next to .left so it looks something like this:
This is LEFT ---------------------------------------------------------
If I set the width of .line to 100% it will trying to fill the entire container width so the question is how do I get it to fluidly adjust to the space that is left over from .left.
Hope I'm being clear.
Thanks,
Howie
Here's a sample of the real code I'm using. .line is really .inside-separator.
<div id="container-wrapper">
<div id="container">
<div class="left">This is LEFT</div>
<div class="inside-separator"><span class="inside-separator-left"> </span><span class="inside-separator-right"> </span></div>
</div>
</div>
.inside-separator
{
background: transparent url('../images/inside_separator.png') no-repeat center center;
margin: 0;
padding: 0;
height: 7px;
width: something?;
}
.inside-separator-left,
.inside-separator-right
{
display: block;
position: absolute;
width: 8px;
height: 7px;
background: transparent url('../images/inside_plus.png') no-repeat 0px 0px;
}
.inside-separator-left
{
float: left;
left: 0;
}
.inside-separator-right
{
float: right;
right: 0;
}
I'm not sure this is possible using floats. But if you're ok using display:table instead of floating .left then it's easier.
div#container { display:table; width:100%; }
div.left, div.line { display:table-cell; }
<div class="left"><div class="line">11111111111111111</div> This is LEFT</div>
Put the .line inside the .left and float .line right
http://jsfiddle.net/Hk7GR/1/
Thanks for all of your help. The display:table did the trick. Here's a sample http://jsfiddle.net/idpexec/QKSzC/
<div class="container-wrapper">
<div class="container">
<div class="left">This is LEFT</div>
<div class="inside-separator-wrapper">
<div class="inside-separator">
<span class="inside-separator-left"> </span>
<span class="inside-separator-right"> </span>
</div>
</div>
</div>
</div>
<style>
.container-wrapper
{
width: 500px;
height: 60px;
border: 1px solid green;
margin-bottom: 50px;
}
.container
{
display:table;
width:100%;
}
.left,
.inside-separator-wrapper
{
display:table-cell;
}
.left
{
border: 1px solid red;
white-space: nowrap;
padding: 0 15px;
}
.inside-separator-wrapper
{
width: 100%;
position: relative;
}
.inside-separator
{
background: transparent url('http://test.2wsx.ws/inside_separator.png') no-repeat center center;
height: 7px;
position: relative;
top: 0px;
left: 0px;
padding: 0;
width: 100%;
}
.inside-separator-left,
.inside-separator-right
{
display: block;
position: absolute;
width: 8px;
height: 7px;
background: transparent url('http://test.2wsx.ws/inside_plus.png') no-repeat 0px 0px;
}
.inside-separator-left
{
float: left;
left: 0;
}
.inside-separator-right
{
float: right;
right: 0;
}
<style>
I currently have a div element with a repeat-y background and a child div interrupts the current background.
How can I stop this from happening?
<div id="content">
<div id="container-top"></div>
<div id="container-body">
<div id="container-right">
<h1>LOGIN</h1>
<br />
<h1>CLICK HERE</h1>
</div>
<div id="container-left">
<h1 style="padding-left: 50px; font-weight: bold; color: #000000;">NEWS</h1>
</div>
</div>
<div id="container-bottom"></div>
</div>
CSS:
#content {
float:left;
margin: 5px auto;
border: red 1px solid;
}
#container-top {
width: 800px;
height: 23px;
background: url(http://cdn2.tribalwars.net/graphic/index/sprites.png) no-repeat 0 -39px;
}
#container-body {
padding: 15px;
overflow: visible;
background: url(http://cdn2.tribalwars.net/graphic/index/bg-content-line.jpg) repeat-y;
}
#container-right {
float: right;
width: 275px;
}
#container-left {
float: left;
width: 440px;
}
#container-bottom {
width: 800px;
height: 23px;
background: url(http://cdn2.tribalwars.net/graphic/index/sprites.png) no-repeat 0 -56px;
clear: both;
}
If you go to you can
you need to make your container overflow hidden cause you are floating childs.
checkout code at http://jsfiddle.net/xUf87/