I need put a "carousel" div inside "oe_structure" but not work correctly, the "carousel" :
I'm editing the template "website_sale.products"
I am new to odoo, can I inherit in my direct code to edit the ? but I still don't know how to put the slider inside the div as shown in the image!
link of the code I use:
https://codeshare.io/2pBqez
My error with div carousel is:
<div class="container">
<div class="square"><div>
<div class="s-square">
</div>
.container {
width:80%;background:lightgray;height:500px;margin-left:10%;
display:flex;justify-content:center;align-items:center;
} /* this container is positioned using a left-margin */
.square {width:250px;height:250px;background:white;position:relative;} /*this square is positioned by the flexbox display of its parent container (.container) */
.s-square {height:100px;width:100px;background:blue;position:absolute;top:50px;left:60px;3px dashed purple;} /* this is absolute positioning and should be avoided as much as possible b/c not very responsive-friendly */
Related
I have a site with multiple menus. I have defined enteire page content inside a div with a class container and applied bootstrap css styles (margin-left:auto and margin-right:auto etc.,) to make the page centered. Now elements in one of the file must start from extreme left side of the browser. Because of the css applied for parent i could not start the element from left side. I have applied margin-left with minus pixels to solve the issue. But when the browser window is small element is not completely visible in browser because of minus value applied for margin-left.
<div class="container" style="margin-left:auto;margin-right:auto">
<div id="start_from_left" style="margin-left=-50px"> </div>
</div>
if your tags have
style=""
that takes priority over anything else.
What you could try is the !important on your css tags, but its bad practice.
eg
margin-left:1px!important;
margin-right:0px!important;
You can have additional class for your container.
.container {
margin-left: auto;
margin-right: auto;
}
.container.wide {
margin-left: 0;
margin-right: 0;
}
I still have problem to well understand how the float property works in CSS. I do apologize because I know this is css basics but I really want to understand that and get a good explanation. I've created an example to show you.
Here is my page :
I just want to resize the second div at the right. When I look at it in the Chrome Developer Tools, I see that this div begins at the top left of the window and not after the red square. I'd like it to begins just after the red square to change the width properly without calculating the size of the square and doing something like
width = square size + width i want
Do you know how this it happens and how to properly resize the width of the second div ?
EDIT: the solution consists in add the float property to the second div too. The explanation is the following : floated elements are removed from the flow, so they don't stack with the non-floated elements.
You need to set float for another div too.
We generally do like below:
html
<div class="float-left">
<p>floated left</p>
</div>
<div class="float-left"><!--- to float next to previous div--->
<p>floated left</p>
</div>
css
.float-left{
float: left;
}
As per your comment:
We do clear the float values because the container contents would never been collapsed.
You need to float the second div.
Heres an example.
<div class="parent-div">
<div class="left">
</div>
<div class="left">
<p>This is the description of the image</p>
</div>
</div>
You need to set
p { display:inline; }
or
div { display:inline; }
since paragraphs and divs are block elements.
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
the reason is that floated elements are removed from the flow, so they don't stack with the non-floated elements. - therefore they don't "take up space" like before. This is why your text div starts at the top left of its container.
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
You have to set float for both DIVs
Here is the updated code:
HTML:
<div id="main_container">
<div class="left"></div>
<div class="right">
<p>This is the description of the image <i>Random text</i>
</p>
</div>
<!--Comment below <DIV> to see the result-->
<div class="clear"></div>
</div>
CSS
#main_container {
border:5px solid #000;
}
.left, .right {
width: 100px;
height: 100px;
background: red;
float:left;
}
.right {
background: blue;
width: calc(100% - 100px);
}
.clear {
clear:both;
margin:0;
padding:0;
}
Also, just to add one more important fact related to "float" is, make sure you add "clear:both" property after "float".
Why?? Because, a common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
Here is the Fiddle for the same: http://jsfiddle.net/1867ud9p/7/
Hope this will help!
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
How can I center text vertically and horizontally in responsive (bootstrap) container?
I've been playing around with various table and table-cell display methods, but cannot get anything to work correctly.
Here is the html, I'm trying to center the contents of the span tag over the image.
I need the image to control the size of the container's height, without it the container just collapses to the height of the line.
I cannot set a static height on the div>div>div either since it scales with the browser size/view.
HTML
<div class="row media-thumbs">
<div class="col-sm-4 col-xs-12">
<div>
<span>Some copy should go here</span>
<a href="#">
<img class="img-responsive" src="default-tile.gif">
</a>
</div>
</div>
</div>
WORKING CODE
With Alexander's help/clues, I modified the plugin ( https://github.com/PaulSpr/jQuery-Flex-Vertical-Center )to get the correct width and height
(function( $ ){
$.fn.flexVerticalCenter = function( onAttribute ) {
return this.each(function(){
var $this = $(this); // store the object
//var attribute = onAttribute || 'margin-top'; // the attribute to put the calculated value on
//alert($this.css('padding-top'));
// recalculate the distance to the top of the element to keep it centered
var resizer = function () {
// get parent height minus own height and devide by 2
$this.css({
'margin-top' : ((( $this.parent().height() - $this.height() ) / 2) - parseInt($this.css('padding-top')) ),
'width' : ($this.parent().width())
});
};
// Call once to set.
resizer();
// Call on resize. Opera debounces their resize by default.
$(window).resize(resizer);
// Apply a load event to images within the element so it fires again after an image is loaded
$this.find('img').load(resizer);
});
};
})( jQuery );
JSFiddle
Explanation:
CSS:
span
{
position: absolute; /* this makes the text able to be placed over the image without getting pushed over */
width: 100%; /*set to 100% so text-align will fall in the center of the image*/
text-align: center; /*text will be horizontally centered in the image*/
color: white; /*purely aesthetic*/
}
img
{
width: 100%; /* The image is set to 100% to take up the container and be responsive */
}
Javascript:
I used a jQuery plugin called Flex Vertical Center (also available in vanilla javascript) to vertically center the <span>, as CSS can be impossibly bothersome.
After including the javascript source in the HTML, the following code was simple call to the function:
$('span').flexVerticalCenter();
Use text-align: center to center horizontally and you can try vertical-align: middle (thought there are a few gotchas with vertical alignment), or set a line-height equal to the parent container height.
Depending on outer elements styles, a very effective method is margin: 0 auto; for elements you want to set horizontally centered.
This method requires a defined width of the parent element.
text-align:center; will work in most cases, as told Sean, but vertical-align:middle; needs a lot of css-work to the parent element. I try not to use this, it never works as expected, from scratch :-) I remember, if the parent element is set to a defined height and display:table-cell; it works, otherwise not.
I'm trying to make 2 div's inside a container div (from Twitter Bootstrap) take the max height which is 100%.
I created a fiddle to demonstrate, but somehow it's not showing what I want.
Both div's are floated. And therefore I used class="clearfix". But that didn't work either. What am I missing?
EDIT
What you don't see in the fiddle, is that html and body are already set to 100% height in my application.
EDIT
The child div goes outside it's parent div, and that's why it keeps failing.
The jsfiddle has been updated. Anyone can take a look at it?
To make a nested block-level element take up 100% height even without any content inside of them, one needs to add height: 100%; to the element in question and all its parent elements (including html and body). See this demo.
Giving the divs a height works just fine, but because there is no content inside, the html and body elements don't stretch accordingly.
HTML:
<html>
<body>
<div class=container>
<div class=stretch-this>
</div>
</div>
</body>
</html>
CSS:
.stretch-this {
background-color: khaki;
}
html,
body,
.container,
.stretch-this {
height:100%;
}
I have a fixed height scrollable <div id="overlay"> positioned over all the page elements using position:fixed. In the div I have elements higher than the fixed height, so the scrollbar appears. I also have a tooltip that I want to stay with a paragraph even if it is scrolled.
That's what I want to happen here, but unfortunately neither of my solutions work properly:
I add position:absolute to the tooltip and position:relative to #overlay(the tooltip's parent): http://jsfiddle.net/4qTke/
The tooltip scrolls as expected but it is not visible outside of #overlay.
I only add position:absolute to the tooltip: http://jsfiddle.net/Yp6Wf/
The tooltip is visible outside of the parent #overlay but doesn't move when the div is scrolled.
I want the tooltip to always be visible AND for it to move when scrolled.
What you want is not possible using just CSS and HTML.
The main problem you have is that you have set overflow: scroll on the container your #tooltip is relative to. Because this overflow property is stopping any content from appearing outside of its edges when you position #tooltip "outside" of the div it will be hidden and only visible when scrolled to.
The reason it was visible in your second scenario is because without setting position:relative your #tooltip was relative to the page and not the container. Which meant it was not affected by the overflow:scroll property of the container.
HTML:
<div id="overlay">
<div class="elemRel">
<div class="elemAbs">
<!-- Your Code -->
</div>
</div>
</div>
CSS:
#overlay { position:fixed; }
.elemRel { position:relative; }
.elemAbs { position:absolute; }
Maybe this is an alternative for you? See demo fiddle.