I want to print multiple DIV one after another in single line. Also i need to center the content to the page.
I am able do this with float style but its not Centered to the page. I searched google , it says use display: inline-block; instead of float.
Here is what i tried, but 2 divs are overlapping.
<div style="text-align:center">
<div style="display: inline-block;">
<a style="cursor:pointer;text-decoration:none;color:#000">
<div style="display: inline-block;cursor:pointer;position:absolute;margin-left:0px;margin-top:-1px;margin-right:0px;">
<img src="images/Calendar_blank.png" width="75" height="75">
</div>
<div style="display: inline-block;position:absolute;margin-left:0px;margin-top:-1px;margin-right:0px;width:75px; font-family:Verdana, Geneva, sans-serif; font-size:16px;color:#030">Aug</div>
<div id="date1" style="display: inline-block;position:absolute; margin-left:0px;margin-top:27px;margin-right:0px;width:75px; "><strong>25</strong></div>
</a>
</div>
<div style="display: inline-block;">
<a style="cursor:pointer;text-decoration:none;color:#000">
<div style="display: inline-block;cursor:pointer;position:absolute;margin-left:0px;margin-top:-1px;margin-right:0px;width:75px; ">
<img src="images/Calendar_blank.png" width="75" height="75">
</div>
<div style="display: inline-block;position:absolute;margin-left:0px;margin-top:-1px;margin-right:0px;width:75px; font-family:Verdana, Geneva, sans-serif; font-size:16px;color:#030">Aug</div>
<div id="date2" style="display: inline-block;position:absolute; margin-left:0px;margin-top:27px;margin-right:0px;width:75px; "><strong>25</strong></div>
</a>
</div>
</div>
Out Put is :
Expected is : The Content should be centered to the page & it should not overlap.
Note: I dont want to add hardcoded MARGIN to the style. as it will effective while zooming in and out & it will not be page centered.
Your code is too mired with inline styles for me to debug easily. Below is how you would rebuild your desired layout most basically from scratch.
The key component is adding display: inline-block to the light-gray calendar divs to allow them to sit side-by-side: https://developer.mozilla.org/en-US/docs/Web/CSS/display#Values
Also, setting those divs to position: relative and their child divs to position: absolute allows you to ensure the contained elements' origins are within those parent divs.
Inline styles (styles specified within your HTML) should be kept to an absolute minimum. HTML (markup) is for content primarily. Styles go in your CSS, and behaviors generally belong in JavaScript. This makes your code much easier to read and update (and debug).
A separate CSS file can be linked from your HTML, or it can included in your HTML if wrapped in <style> and </style> tags.
DEMO: http://jsbin.com/lifij/1/
HTML:
<body>
<div id="container">
<div class="calendar">
<div class="stripe">
<h3>Aug</h3>
</div>
<div class="number">
<h1>25</h1>
</div>
</div>
<div class="calendar">
<div class="stripe">
<h3>Aug</h3>
</div>
<div class="number">
<h1>25</h1>
</div>
</div>
</div>
</body>
CSS:
h1, h3 {
font-family: sans-serif;
text-align: center;
margin: 0;
}
h3 {
font-weight: normal;
}
.calendar {
background-color: lightgray;
width: 80px;
height: 80px;
border-radius: 6px;
display: inline-block;
position: relative;
}
.stripe {
background-color: red;
width: 100%;
height: 24px;
border-radius: 6px 6px 0 0;
position: absolute;
top: 0;
}
.number {
position: absolute;
top: 30px;
width: 100%;
}
Related
I've got custom elements in my code which display some odd behaviour when a child element has a display: inline-block style.
Consider the following two div elements:
<div style="padding: 4px;">
<randomcustomelement style="background-color: yellow">
<div style="display: block; height: 36px; background-color: red; width: 125px;">
<div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
</div>
</randomcustomelement>
</div>
<div style="padding: 4px;">
<randomcustomelement style="background-color: yellow">
<div style="display: inline-block; height: 36px; background-color: red; width: 125px;">
<div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
</div>
</randomcustomelement>
</div>
In the first main div it is clear that the custom element randomcustomelement is ignored by the browser. It does have a proper width and height, but is not rendered, like expected. In the second main div, however, randomcustomelement does get rendered, and what more, it has a very strange height of 17px. I've included an image depicting this through Chrome's element inspector below:
The only difference between both examples is that the child div which is wrapped by randomcustomelement has display: block in the first example, and display: inline-block in the second example. I've given the randomcustomelement a distinct yellow color to also visibly depict that it does get rendered.
This problem is present in all browsers, even though they should ignore the custom element:
User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them.
https://www.w3.org/TR/html5/infrastructure.html#extensibility-0
This is really giving me a headache, because I need the inner div to be a display: inline-block. So I would need the second example's code to give the first example's results.
Forcing the style of the randomcustom element to be display: inline-block and height: 0 gives the desired result.
<div style="padding: 4px;">
<randomcustomelement style="background-color: yellow">
<div style="display: block; height: 36px; background-color: red; width: 125px;">
<div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
</div>
</randomcustomelement>
</div>
<div style="padding: 4px;">
<randomcustomelement style="background-color: yellow;height:0;display:inline-block">
<div style="display: inline-block; height: 36px; background-color: red; width: 125px;">
<div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
</div>
</randomcustomelement>
</div>
I'm trying to vertically center certain items within a table cell. I've tried most solutions on stackoverflow and several other sites without any luck.
In this cell, the image is stuck at the top of the table cell, while the text is properly centered vertically:
<tr>
<td class='sidebar-middle'> <!--sets a left and right border-->
<a target="_blank" href="data/Standards.pdf">
<div style='width: 100%;text-align: center;overflow: hidden;'>
<div style='float: left;width: 34%; text-align: center;height: 100%;'>
<img src='images/logo.jpg' alt='Standards' style='width: 80px;vertical-align: middle;'/>
</div>
<p style='float: right; vertical-align: middle;width: 64%;'>Local Facility Standards to be Followed</p>
</div>
</a>
</td>
</tr>
However, using the same method, this DOES seem to work:
<tr>
<td class='sidebar-bottom'> <!--sets a left, right, and bottom border-->
<a target="_blank" href="Policies.html">
<div style='width: 100%;text-align: center;overflow: hidden;'>
<div style='float: left;width: 35%; text-align: center;height: 100%;'>
<img src='images/patch.png' alt='Policies' style='height: 80px;vertical-align: middle;'/>
</div>
<p style='float: right; vertical-align: middle;width: 64%;'>Policies</p>
</div>
</a>
</td>
In the first (frustrating) example, the image is 112 pixels in height, scaled down to 30. In the second (working) example, the image is 122 pixels in height, scaled down to 80. I suspect that image height has something to do with it, but can't get any further in resolving the problem.
While assigning classes to the elements I didn't see a change. When I replaced the <tr> and <td> with <div> and <section> it didn't change. It just works like the way you wanted it to. There's no style info provided for classes, .sidebar-middle and .sidebar-bottom so that might be your problem (or the rest of the code you neglected to post). Note: I didn't need to modify the div.C or the <section>s I added, so table components may have not been needed and the floats were sufficient.
When using inline styling heavily, your HTML gets cluttered and there's no easy way of fixing it should you have many lines of that coding disaster. As Paulie_D and hidanielle already stated, your vertical-align does not function on floated elements, and HTML table -layouts are so 90s. In the 21st century we use table-* CSS properties.
SNIPPET
.A {
width: 100%;
text-align: center;
overflow: hidden;
}
.B {
float: left;
width: 34%;
text-align: center;
height: 100%;
}
.img {
width: 80px;
height: 80px;
}
.note {
float: right;
width: 64%;
}
<div class='C'>
<section class='sidebar-middle'>
<a target="_blank" href="http://www.orimi.com/pdf-test.pdf">
<div class='A'>
<div class='B'>
<img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png' alt='Lenna' class='img' />
</div>
<p class='note'>Local Facility Standards to be Followed</p>
</div>
</a>
</section>
</div>
<div class='C'>
<section class='sidebar-bottom'>
<a target="_blank" href="http://www.example.com">
<div class='A'>
<div class='B'>
<img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png' alt='Lenna' class='img'>
</div>
<p class='note'>Policies</p>
</div>
</a>
</section>
</div>
Instead of floats, use CSS Tables (since you started with an actual table for layout).
* {
margin: 0;
padding: 0;
}
.inner {
display: table;
table-layout: fixed;
width: 100%;
text-align: center;
overflow: hidden;
}
.left {
display: table-cell;
width: 34%;
text-align: center;
background: pink;
}
img {
width: 80px;
}
.right {
display: table-cell;
width: 64%;
vertical-align: middle;
background: lightblue;
}
<a target="_blank" href="data/Standards.pdf">
<div class="inner">
<div class="left">
<img src='http://www.fillmurray.com/80/80' alt='Standards' />
</div>
<p class="right">Local Facility Standards to be Followed</p>
</div>
</a>
I have found the following solution for aligning an img vertically within a div
https://stackoverflow.com/a/7310398/626442
and this works great for a basic example. However, I have had to extend this and I want a row with two bootstrap col-md-6 columns in it. In the first column I want a 256px image, in the second I want a h1, p and a button. I have to following HTML:
<div class="home-costing container">
<div class="row">
<div class="frame">
<span class="helper"></span>
<div class="col-md-6">
<img src="http://www.nijmegenindialoog.nl/wp-content/uploads/in.ico" height="256" width="256" />
</div>
<div class="col-md-6">
<h2>Header</h2>
<p>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br /><br/>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</p>
<a class="btn btn-default"
href='#Url.Action("Index", "Products")'
role="button">
Learn More
</a>
</div>
</div>
</div>
</div>
and the following CSS:
.home-costing {
color: #fff;
text-align: center;
padding: 50px 0;
border-bottom: 1px solid #ff6500;
}
.home-costing h2 {
text-transform: uppercase;
font-size: 60px;
}
.home-costing p {
font-size: 18px;
}
.home-costing .frame {
height: 256px;
width: 256px;
border: 0;
white-space: nowrap;
text-align: center;
margin: 1em 0;
}
.home-costing .helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.home-costing img {
vertical-align: middle;
max-height: 256px;
max-width: 256px;
}
The problem is that now the second column is no longer contained and the text does not wrap and goes off to the right.
How can I center align my image in the first column with the text in the right column and still get the correct wrapping in the second column?
Fiddler: https://jsfiddle.net/Camuvingian/1sc40rm2/2/
Your HTML needed updated, in Bootstrap, the div order should ALWAYS go .container > .row > .col- * - *, your code however went .container > .row > .frame > .col- * - *. I have corrected your HTML and now your code works.
HTML:
<div class="home-costing container">
<div class="row">
<div class="col-md-6">
<img src="http://www.nijmegenindialoog.nl/wp-content/uploads/in.ico" height="256" width="256" class="center-block" />
</div>
<div class="col-md-6">
<h2>UserCost</h2>
<p>Hello, I'm a paragraph</p>
<a class="btn btn-default"
href='#Url.Action("Index", "Products")'
role="button">
Learn More
</a>
</div>
</div>
</div>
</div>
Link to finished code example:
Codepen - Updated & working code
This fixes the word wrap issue also on the p tag.
CSS:
p {
font-size: 18px;
word-wrap: break-word;
}
Currently I can not find a solution that is responsive and scrollable to put text on an image. I need the height to be flexible and the width at 100%. I tried to use position:relative; and css background images with no luck. When I use position: relative; there is a space at the top of the image and the only way to delete it is negative margins which I think is not sustainable it there are multiple posts. css backgrounds does not show the full image unless you set dimensions and when is responsive you cant set dimensions. I dont think I can use position absolute because it would not scroll. so I dont not know what to use.
I have this HTML code here:
<div class="post">
<span><a>Posted By Adam</a></span>
<img width="100%" src="uimg/adam-levine-600.jpg">
</div>
Use position: absolute; and add a spacer for the nav:
http://jsfiddle.net/ryanpcmcquen/p3bes5xq/
.nav {
height: 100px;
width: 100%;
position: fixed;
background-color: #21A7F0;
text-align: center;
z-index: 10;
color: #ffffff;
}
.spacer {
height: 105px;
}
.post span {
position: absolute;
color: #ffffff;
text-shadow: 1px 1px 2px #000000;
}
.post img {
width: 100%;
}
<div class="nav">nav bar</div>
<div class="spacer"></div>
<div class="post"> <span><a>Posted By Adam</a></span>
<img src="//fillmurray.com/880/450" />
</div>
<div class="post"> <span><a>Posted By Adam</a></span>
<img src="//fillmurray.com/880/260" />
</div>
<div class="post"> <span><a>Posted By Adam</a></span>
<img src="//fillmurray.com/880/194" />
</div>
I have created the following
http://jsfiddle.net/fcW66/1/
CSS
.div_wrapper {
float: left;
width: 100px;
background: 3333;
margin: 15px;
background: #cacaca;
z-index: 1;
}
.div_two {
display: none;
height: 120px;
background: #444;
z-index: 999;
}
.div_one:hover .div_two {
display: block;
}
HTML
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<br style="clear:both;" />
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
When you hover over it shows the description, but it pushes the other divs further. I have tried giving the div_wrapper a fixed width, which fixes that problem but when the div2 appears it shows under the next div that is under it. I tried adding a z-index and it did not change anything. I need the div_two to show over the top of the divs that are below it and not change the layout.
If you want white-space in the location of the object BEFORE hover, you would use visibility, not display.
visibility:hidden, instead of display:none
and visibility:visible, instead of dislpay:block
You should use position: absolute to position this div. Absolutely positioned elements do not take up space within their container preventing them from pushing other elements around.
In most cases such as this, you will want to set the parent element to position: relative as well, so that the absolute element can be positioned relative to its parent instead of the whole document.
http://jsfiddle.net/fcW66/7/
.div_one{
position: relative;
}
.div_two {
/* ... */
position: absolute;
width: 100%;
}
You can use position: absolute; to accomplish this.
Here's a fiddle http://jsfiddle.net/QbAzY/
Add position:absolute; and width: 100px; to your .div_two rules
.div_two {
display: none;
height: 120px;
background: #444;
z-index: 999;
position:absolute;
width: 100px;
}
jsFiddle example
z-index only applies to positioned elements, so by setting position:absolute on your .div_two elements it not only allows the z-index to work, but it takes those elements out of the normal flow of the document and won't push the other divs down. Note that you also have two background rules on your .div_wrapper element, and a z-index rule that isn't doing anything.