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/
Related
I want to place an image next to some text inside a div but the image was pushed into the next div below and won't move up no matter how much I increase the margin or padding. I want the center of the image to be where the tip of the arrow is in the picture:
Here's where the image is and where I want it to be
Here's the CSS and HTML:
.header {
padding: 10px 16px;
background: #1919ff;
color: #f1f1f1;
}
#about {
background-color: #ccccff;
height: 400px;
width: 67%;
margin: auto;
}
.round-border{
border-width: 0px;
border-style: solid;
border-radius: 50%;
}
.portrait-image{
width: 25%;
margin-bottom: 120%;
}
h9 {
font-size: 142%;
margin: auto;
padding-right: 30%;
padding-top: 12%;
display: inline-block;
}
.header-bar{
height: 3px;
width: 51%;
background: #272C31;
margin-right: 23%;
margin-top: 3%;
}
h10 {
font-size: 142%;
margin: auto;
padding-right: 24%;
padding-top: 5%;
display: inline-block;
}
#image position {
position: relative;
z-index: 1;
margin-botton: 40%;
padding-bottom: 20%;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<style>
img {
float: right;
}
.clearfix {
overflow: auto;
}
</style>
<div class="header" id="myHeader">
<h2> xxxxxxxxx</h2>
</div>
<body style="background-color: #5D6D7E;">
<div id="about" align="center" position="relative">
<h9><p align="right">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</h9>
<div class="header-bar"></div>
<h10><p align="right">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</h10>
<div id="image position"><img class="portrait-image round-border" align="right" src="http://abload.de/img/gpuxh.png" alt="portrait">
</div>
</div>
</body>
Any help would be greatly appreciated, thanks.
There were many things wrong with your code and I'm not sure where to begin. There are no h9 or h10 header tags. I would suggest using valid header tags and modifying the font-size according to your taste. Also, you can't have a class/id name separated by a space. So, "image position" will not work. Fixed it the best way I could.
.header {
padding: 10px 16px;
background: #1919ff;
color: #f1f1f1;
}
#about {
background-color: #ccccff;
height: 400px;
width: 67%;
margin: auto;
box-sizing: border-box;
}
.round-border {
border-radius: 50%;
}
.portrait-image {
width: 25%;
}
.header-bar {
height: 3px;
width: 51%;
background: #272C31;
margin-right: 23%;
margin-top: 3%;
}
#image-position {
float: right;
margin: 15% 5% 0 0;
}
#text {
float: left;
width: 57%;
word-break: break-all;
margin: 5%;
}
.clearfix {
/*clear the floats here*/
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<body style="background-color: #5D6D7E;">
<div class="header" id="myHeader">
<h2> xxxxxxxxx</h2>
</div>
<div id="about" class="clearfix">
<div id="text">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<div class="header-bar"></div>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<img class="portrait-image round-border" id="image-position" src="http://abload.de/img/gpuxh.png" alt="portrait">
</div>
</body>
You can use CSS float. It is for elements that 'float' to the side of a text.
Try setting:
#image-position {
/* ... Your css here */
float: right;
}
More information here.
Use bootstrap to achive this, try the below code snippet.
<div class="container">
<div class="row">
<div class="col-md-8">
<p>
Your text goes here...
</p>
</div>
<div class="col-md-4">
<img src="">
</div>
</div>
</div>
I hope this helps,
I'm using a pseudo element (before) to put a border on top of a container inside a two column layout. I want the border on top of just one container.
Shouldn't the width of the pseudo element (being set to 100%) make it the width of the container it's inside?
#singleWrapper {
margin: auto;
max-width: 1100px;
}
.single #singleWrapper {
margin: auto;
max-width: 1100px;
/*box-shadow: inset 0 650px rgba(0,0,0,0.30);*/
position: relative;
overflow: hidden;
}
#leftColumn .content-area {
padding-right: 310px;
width: 100%;
}
.articleWrapper:before {
content: "";
position: absolute;
top: 0;
left: 0;
background: #009cff;
background: linear-gradient(to right, #1d0027, #935cd2, #1d0027);
height: 2px;
width: 100%;
}
#leftColumn .content-area #main {
background: #000;
background: rgba(0, 0, 0, 0.30);
padding-left: 20px;
padding-right: 20px;
}
#singleWrapper .contentHolder {
margin-right: -310px;
width: 100%;
float: left;
position: relative;
}
#rightColumn {
float: right;
position: relative;
display: block;
width: 290px;
}
#leftColumn,
#rightColumn {
display: inline-block;
vertical-align: top;
margin-top: 1.1em;
}
<div id="singleWrapper">
<div id="leftColumn" class="contentHolder">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="articleWrapper">
<h1>Title</h1>
<div class="articleBody">
Article Body
</div>
</div>
</main>
</div>
</div>
<div id="rightColumn">
Side Bar Area
</div>
</div>
the problem is you are using position:absolute
From MDN
Absolute positioning
Elements that are positioned relatively are still considered to be in
the normal flow of elements in the document. In contrast, an element
that is positioned absolutely is taken out of the flow and thus takes
up no space when placing other elements. The absolutely positioned
element is positioned relative to nearest positioned ancestor. If a
positioned ancestor doesn't exist, the initial container is used
A fix is to add this to your CSS:
.articleWrapper {
position:relative;
}
and change top:0; in .articleWrapper:before to any negative value you like best.
here is a snippet
#singleWrapper {
margin: auto;
max-width: 1100px;
}
.single #singleWrapper {
margin: auto;
max-width: 1100px;
/*box-shadow: inset 0 650px rgba(0,0,0,0.30);*/
position: relative;
overflow: hidden;
}
#leftColumn .content-area {
padding-right: 310px;
width: 100%;
}
.articleWrapper {
position:relative;
}
.articleWrapper:before {
content: "";
position: absolute;
top: -30%;
left: 0;
background: #009cff;
background: linear-gradient(to right, #1d0027, #935cd2, #1d0027);
height: 2px;
width: 100%;
}
#leftColumn .content-area #main {
background: #000;
background: rgba(0, 0, 0, 0.30);
padding-left: 20px;
padding-right: 20px;
}
#singleWrapper .contentHolder {
margin-right: -310px;
width: 100%;
float: left;
position: relative;
}
#rightColumn {
float: right;
position: relative;
display: block;
width: 290px;
}
#leftColumn,
#rightColumn {
display: inline-block;
vertical-align: top;
margin-top: 1.1em;
}
<div id="singleWrapper">
<div id="leftColumn" class="contentHolder">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="articleWrapper">
<h1>Title</h1>
<div class="articleBody">
Article Body
</div>
</div>
</main>
</div>
</div>
<div id="rightColumn">
Side Bar Area
</div>
</div>
i have a div that contains an image fills all the div,
positioned on it a text.
when the mouse is over the container div the mouse will change to pointer(no problem),but and the image changed to look like pressed one.
But this wont happened thus the text represents other layer.
so could any one help me to resolve this problem in html and css?
<div style="float: right; width: 127px; height: 35px; background-color: rgba(139, 84, 164,.44); background-color: rgb(229, 230, 218);
cursor:pointer; position:absolute;">
<div style="overflow: hidden; width: 87px; height: 100%; float: right; position:absolute; z-index:2; background-color:#FF0099;
margin-left: 40px;">
<p class="para" style="color: rgb(0,178,192); padding-top: 8px; padding-right: 5px;">اسم الملف</p>
</div>
<div style="position:absolute; z-index:1; ">
<img src="saba/playa.png" onMouseOver="this.src='saba/playao.png'" onMouseOut="this.src='saba/playa.png'"style="float: left;">
</div>
</div>
I'm not sure if I understand well..
But I think this shows what you want to create...
<div class="wrapper">
<div class="text-div">
some text
</div>
<div class="colored-button-on-hover"></div>
<div class="clear"></div>
</div>
css:
.wrapper {
width: 200px;
height: 100px;
background: #999;
position: relative;
}
.wrapper .text-div {
float: right;
color: #000;
}
.wrapper .colored-button-on-hover {
float: left;
width: 30px;
height: 25px;
background: red;
}
/*on wrapper div hovered*/
.wrapper:hover {
background: blue;
cursor: pointer;
}
.wrapper:hover .text-div {
color: #FFF;
}
.wrapper:hover .colored-button-on-hover {
background: yellow;
}
.clear {
clear: both;
}
Here is jsfiddle sample: http://jsfiddle.net/AYjmF/
I have found so many topics for this question, but none of those helps for my case.
I have one div with low z-index. There is a button in that div, that should be clickable. But it is not clickable, because of low z-index. I have tried to change z-index for other divs and containers, but I could not find out the right combination.
HTML:
<div id="wrapper">
<div id="content">
<div id="left">
</div>
<div id="right">
<div id="content_img">
<img src="http://tax.allfaces.lv/templates/tax/images/office.png">
</div>
</div>
<div id="docked_div">
<div class="fb"> <img src="http://tax.allfaces.lv/templates/tax/images/f.png" style="width:27px; height: 28px; padding-left: 20px;">
</div>
</div>
</div>
</div>
CSS:
#wrapper {
margin: 0 auto;
margin-top: 10px;
width: 1004px;
position: relative;
}
#content {
overflow: hidden;
background-color: white;
}
#left {
float: left;
width: 249px;
}
#right {
float: left;
width: 750px;
padding-left: 5px;
}
#logo {
background: url(../images/logo.png) no-repeat;
background-position:center;
width: 250px;
height: 135px;
padding: 5px 0 0 5px;
display:block;
}
#content_img {
width: 750px;
height: 300px;
}
#docked_div {
background: url(http://tax.allfaces.lv/templates/tax/images/mazais_fons.png) no-repeat;
width: 52px;
height: 212px;
background-size: 100% auto;
position: absolute;
right: -37px;
top: 105px;
z-index: -1; **//EDIT HERE!!!!!!!**
}
.fb {
/*z-index: 1000;*/
}
I need to be able to click on FB button. Now when #docked_div z-index is set to -1, then .fb is not clickable. If I set z-index = 1 to #docked_div, then .fb is clickable, but then #docked_div is on top of the image, it should be under.
Example is seen here (FB button is not clickable): http://jsfiddle.net/vAkXh/7/ [edit here]
The full example is here: tax.allfaces.lv (you can see that here FB button is clickable, but it is on top of image, it is not correctly).
Just add to the #right div :
position: relative;
z-index: 2;
I tried on http://tax.allfaces.lv/, it should work.
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>