How I can do this effect with <hr>? Div with content will be over <hr>. How to do that?
This is my jsfiddle: http://jsfiddle.net/fnaYs/. I don't know how to put this text into image box. Any solutions?
After, I want to add this layout to wordpress, so I want put text in <div> or another element, not in css file.
When you set the position attribute of a variable to relative, it basically means that the position of the element is relative to the browser.
So when you say top:-5px; it means you are requesting the browser to put your element 5 pixels above the position where it actually is supposed to be..
All you have to do is, set the top attribute for the div, in CSS to some negative value. like this:
<hr />
<div style="position:relative;top:-5px;">DIV CONTENT</div>
Replace the -5px with your requirement...
I have coded a solution (there might be other ways).
Here is a working JSFiddle: http://jsfiddle.net/fnaYs/6/
CSS
hr.line {
padding: 0;
border: 1px solid;
color: #333;
text-align: center;
}
.box {
background-color:teal;
width:100px;
height:30px;
position:absolute;
left: 40%;
bottom:90%;
padding-top:20px;
}
HTML
<hr class="line"/>
<div class="box"> Text </div>
Here's a working jsFiddle with what you need:
http://jsfiddle.net/2LaLb/
<hr class="line" />
<div class="mydiv">Div with text</div>
and the corresponding CSS would be:
hr.line {
padding: 0;
border: 1px solid;
color: #333;
text-align: center;
}
.mydiv {
background:red;
border:1px solid red;
width:100px;
position:absolute;
top:0;left:400px;
}
As you can see it produces the result you want.
Related
If a user writes in content, I want the paragraph to only grow in the downward direction while the div which has the id of description grows along with it in the same direction. The final parent div with the id of documentation stays in the same position so that it does not grow upwards. Lets assume that this block of code is in the middle of the html doc. So, how exactly do I anchor it in place so that is grows in the correct direction? Thanks.
Index.html
<div id="documentation">
<div id="description" >
<p contenteditable="true"></p>
</div>
</div>
Style.css
#documentation{
border:2px solid yellow;
}
#description{
width:500px;
border:2px solid black;
background-color:white;
border-radius:50px;
display:flex;
justify-content:center;
align-items:center;
}
#description p{
word-break:break-all;
border:2px solid red;
width:400px;
}
Try styling the #documentation instead of description
#documentation{
border:2px solid yellow;
height: 500px; /*or some fixed height*/
overflow: auto;
}
I'm making a form with two input area, the second area should be content editable div somehow.
I want to make the #topic_title_input sitting above the #topic_content_input with the same width. It could be easily achieved by giving them display:inline-block, But for some complicated reason, I can't change the display-inline property of the second input area
Any idea how to make the #topic_title_input sitting above the #topic_content_input?
html
<div class="left_container">
<input id="topic_title_input" >
<div id="topic_content_input" contenteditable="true" ></div>
</div>
<div class="right_container">
</div>
<div class="clear_float">
</div>
css
#topic_title_input{
width:521px;
}
#topic_content_input{
/*do not change the display:inline */
width:521px;
display:inline;
background-color: orange;
border: solid 1px black;
}
/*do not change the css below*/
.left_container{
position:relative;
float:left; width:50%;
}
.right_container{
position:relative;
float:right; width:50%;
}
</style>
I'm sure this is very simple stuff, but I hate CSS and it's just not playing ball for me.
Here's an illustration of my site layout:
The aim is to have the flash centered, and the div containing an ad slightly to the right. Obviously it's important that I can easily set the gap between the flash and the ad.
At the moment I'm using a container div, shown in dotted blue, with the flash centered inside it and the ad display: inline-block, float:right. It works, but the problem is if the browser width is reduced to the point where it is smaller than the dotted blue box, the empty space on its left is preserved and the flash and ad are pushed to the right and cut off. I'd like the opposite to happen, the ad is preserved and the left side of the container is cut off.
All help greatly appreciated!
You really should share you problematic code, but from what I understand, you can try something like:
.container {
text-align: center;
margin: 0 auto;
}
.flash, .ad {
display: inline-block;
}
While the HTML is:
<div class="container">
<div class="flash"></div>
<div class="ad"></div>
</div>
use below code
html code is.
<div id="parent">
<div id="left">
<p>flash</p>
</div>
<div id="right">
<p> advertise</p>
</div>
</div>
and css code is
#parent{
border:1px solid #CC0000;
overflow:hidden;
margin:0 auto;
}
#parent div{
float:left;
}
#left{
border:1px solid #000;
margin-left:150px;
width:300px;
height:250px;
}
#right{
border:3px solid #000;
width:200px;
height:250px;
}
I've seen the others answers and I think I've found a solution.
CSS:
.container {
text-align: center;
padding: 15px 0;
min-height: 200px;
}
.flash, .ad {
display: inline-block;
min-height: 200px;
}
.flash {
min-width: 300px;
margin-left: 110px; //this has to be total width of .ad
}
.ad {
min-width: 100px;
margin-left: 10px;
}
HTML:
<div class="container">
<div class="flash"></div><!--
--><div class="ad"></div>
</div>
http://jsfiddle.net/wL3wzt8j/2/
Since this code will not work well with what you're trying to do (on screens that are smaller than the container), here's another fiddle, that involves absolute positioning:
http://jsfiddle.net/wL3wzt8j/3/
The strange thing is, I didn't change anything but when I refreshed the page the element was shifted over to the left.
my code is:
<section class='gallery-set'>
<div>
<img class='tilesetsmall' src ='images/sample.jpg'>
</div>
</section>
and my css for the gallery-set class is simply:
.gallery-set {
background-color:#447684;
border-radius:5px;
border: 2px solid black;
width:500px;
height:700px;
margin:auto;
display:inline-block;
}
I honestly have no clue why it is shifted to the left despite me setting the margin to auto, especially since this has worked before.
Some ways:
Put a div and use text-align
CSS:
.align {text-align: center;}
.gallery-set{
background-color:#447684;
border-radius:5px;
border: 2px solid black;
width:500px;
height:700px;
margin:auto;
display:inline-block;
}
HTML:
<div class="align"><section class='gallery-set'><div>
<img class='tilesetsmall' src ='images/sample.jpg'></div></section></div>
Use margin: auto and display: block
CSS:
.gallery-set{
background-color:#447684;
border-radius:5px;
border: 2px solid black;
width:500px;
height:700px;
margin:auto;
display:block;
}
HTML:
<section class='gallery-set'><div>
<img class='tilesetsmall' src ='images/sample.jpg'></div></section>
Remove the display:inline-block; and it will work. Here's a fiddle.
You may have meant to use display:block instead, which would make sense. Using inline-block doesn't make sense if you want to center the <section>. See this page for a good demonstration of how the various display values work.
I am creating a set of "step" divs to show progress through a page and I want these two divs to sit flush against each other but they have a couple pixels between them. I thought margin and padding 0px would of fixed it but it does nothing.
I would like to achieve this without adding minus properties to the CSS
EXAMPLE
CSS:
.step {
width: 20px;
height: 20px;
background: white;
border: 1px red solid;
display:inline-block;
padding:0px;
margin:0px;
}
.line {
height:1px;
width:20px;
background:#717171;
border-bottom:0px solid #313030;
display:inline-block;
padding:0px;
margin:0px;
}
HTML:
<div class="step"></div>
<div class="line"></div>
Change your markup to this:
<div class="step"></div><!--
--><div class="line"></div>
As inline-block elements leaves space in between so this might be a hack for the same.
You can see the reference here with explanation.
Or
You can make it in one line
<div class="step"></div><div class="line"></div>
Demo
Demo 2
Write this way http://jsfiddle.net/aLs2b/3/
<div class="step"></div><div class="line"></div>