I am newbie about css and html design. I use flex in my bootstrap design.
I set the flex to sort the components from left to right direction.
As on the this site.
I want to shrink the slider to the right and place another component on the left side. I tryed to removing this line over #GrandCarousel.
element.style {
/* left: -396.5px; */
}
how can I make this feature
Create two div inside #GrandCarousel div. Let's call them left-section and right-section. Give them width: 50%; Put all the current contents of #GrandCarousel div to the right-section. After this you might face issues in image alignment inside slider. You will have to adjust them according to how you need them to appear. Refer below HTML, CSS code to understand better.
HTML
<div id="GrandCarousel" class="banner-container">
<div class="left-section">
// Left section contents
</div>
<div class="right=section">
// Move GrandCarousel contents to here
</div>
</div>
CSS
.banner-container {
display: flex;
}
.left-section,
.right-section {
width: 50vw;
}
.right-section {
position: relative; // To contain all carousel contents inside right-section
}
Related
I would need to bring out the elements inside the right column without touching HTML. Currently, the most realistic option seems to be the CSS grid layout. Is it in any way possible if my HTML looks like this?
<div class="parent">
<div class="column1 image"></div>
<div class="column2">
<div class="description"></div>
<div class="additional-info"></div>
</div>
</div>
The goal is to make additional-info to span across the whole page width, not the 50% column it is designated to. Something like the following:
.parent {
display: inline-grid !important;
grid-template-columns: 50% 50%;
grid-gap: 1em;
grid-template-areas: "image description"
"additional additional"
.image {
grid-area: image;
}
.description {
grid-area: description;
}
.additional-info {
grid-area: additional;
}
The issue here would be that my grid elements are not on the same level.
I would fix the HTML, but the actual code involves a lot more elements and rendering. How could I remove the HTML nesting with only using CSS?
This is not something I came up with but it is what you are looking for I believe.
Add this .full-bleed class to the element with .additional-info class and it will span across the whole page.
It will take up the full width of the viewport and center it using transform and translate. Alternatively, you could use negative margins. It will escape any container, so even if your parent element is nested and not full width, this will be.
No need for CSS grid in this case.
// Escape any container, set this element to be 100vw and aligned to viewport without taking it out of normal document flow.
.full-bleed {
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
}
You could set the column to the right as
float:left
and then you can manipulate it as you wish with margin and padding
I have the following HTML structure:
<section class="mysection">
<div class="parallax">
<div>
<svg></svg>
</div>
</div>
</section>
<section class="back">
<div class="triangle">
<img src="img/red-triangle-bkgrd.png">
</div>
</section>
This is the CSS in LESS:
.parallax{
width: 90%;
margin-left: auto;
margin-right: auto;
}
section.back {
.triangle {
position: relative;
img {
position: absolute;
right:0;
top: 0;
}
}
}
Before using parallax on the parallax, back just sits immediately below the bottom border of mysection.
When I scale parallax by 1.11111111, the parallax uses 100% width of the viewport. However, back does not sits right beneath the parallax anymore. Instead, it overlaps with the parallax area. Here is a picture of a real-life situation:
How can I make back in the overlap area invisible? Put it another way, how can I make svg or its containers completely opaque without showing the overlaped image beneath it?
I tried 'opacity:1` on svg and its containers, but it is not working.
To be more detailed, I use a tool called ScrollMagic for this work if this is relevant.
You can set the stacking order using z-index. Try setting the following:
.mysection {
position: relative;
z-index: 1;
}
This should ensure that whatever's in your .mysection (such as the svg/map) passes over whatever intersects (assuming you don't apply a greater z-index to the other elements).
I am dynamically including an html content in the page.
The content is a tree structure in html which is usually huge in height and width.
I want that after inclusion with AJAX the root node of the tree is visible : the included HTML content is centered.
UPDATE1: in the MWE I just use width:2000px to imitate something wider than the screen page. Point is that to center this huge thing on the page not to change its width (Scaling could be acceptable but how?).
UPDATE2: The root of the included tree should be horizontally centered but its other parts also needs to be available through scroll bars of the browser or some inner scroll bars.
What are the simple and correct ways of doing it (without frames as they are deprecated) by styling?
UPDATE3: Below the screenshot of a real example. After tree is generated and included dynamically in the bottom of the page, it is not visible for a client.
One needs to use scrollbars to see the root of a tree.
UPDATE4: See the one possible option where the included content is placed in a window with scrollbars which needs to be zoomable, via browser or vis additional functionality.
MWE : https://jsfiddle.net/kowalsky/tgkbn8wp/2/
HTML:
<body>
<h1>Test page</h1>
<div>
So here comes a long text that might fill the page and wrap outomatically like this.
Below is a WIDETHING which is supposed to content an HTML loaded dynamically via AJAX.
The loaded content is usually wider and is impossible to fit to the page.
<b>What are the ways to put WIDETHING centered on the page, i.e. CENTER is in the center of the page?</b>
</div>
<div class="frame">
<div class="wideThing">
CENTER
<div class="box">BOX1</div>
<span class="box">BOX2</span>
<span class="box">BOX3</span>
<span class="box">BOX4</span>
<div class="box">BOX5</div>
</div>
</div>
</body>
CSS :
.wideThing {
width: 2000px;
text-align: center;
}
.frame {
width: 100%;
border: solid 2px black;
}
.box {
padding: 40px 100px;
border: solid 1px black;
background-color: red;
}
I would use this:
.wideThing {
position: relative;
width: 2000px;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
That first moves the left border to the middle and than moves it back left by 50% of its own width, thereby centering it horizontally.
https://jsfiddle.net/p7d2j323/1/
I would just do this:
.wideThing{
width: 100%;
text-align: center;
}
https://jsfiddle.net/tgkbn8wp/4/
A possible solution is to use jQuery to set the position of the horizontal scrollbar at the center of the tree.
This could be accomplished using the .scrollLeft() method and some calculations to get the new position of the horizontal scrollbar.
But bear in mind that you'd have to execute this script after the tree had finished loading.
Here's a JSFiddle.
And of course you could set the position of the vertical scroll bar similarly using .scrollTop().
More about .scrollLeft() and .scrollTop() on jQuery's website.
I would like to be able to create a div that spans the entire width of the screen. The problem is, this should work along with Weebly's design system, which places it inside a div of fixed width.
The content is created as the following:
#main-wrap {
width:100%;
}
.container {
margin: 0 auto;
width: 960px;
position: relative;
}
<div id="main-wrap">
<div class="container">
{content}
</div><!-- end container -->
</div><!-- end main-wrap -->
Inside {content} is where Weebly does its magic and puts all your stuff. I tried to directly embed some code:
.wide {
position: absolute;
left:0; right:0;
width: 100vw;
background: #aaccff;
}
<div class="wide">
Test
</div>
But this did not work, and the wide div was wider than the screen, but only starts at the same left position as the content div.
Does anyone know how to get a 100% wide div inside of the container. I could also make container 100% wide, but then all of the Weebly widgets go the full length of the screen, and its not clear how I can modify the CSS To make them have fixed width.
Thanks!
It's because of that the parent has is relative positioned. So, remove position: relative; from element .container
I am using the columnal(http://www.columnal.com/) responsive grid framework and am trying to create a vertical divider line in between columns that will stay centered in the right margin as the viewport is resized.
I have tried a couple of solutions using background images and pseudo elements but neither has been successful. The right margin is used by the columnal framework so this can't be used as part of the solution which is why I think a vertically repeating background image or pseudo element is required.
I am also trying to avoid using additional html elements in the code, I would like to keep this as clean as possible. However if that's the only solution, then so be it.
Here's the HTML:
<div class="container">
<div class="row">
<div class="col_4 vertical_divider">
<div class="content">I want a vertical divider line to appear in the centre of the margin to the right of this grey box ->
<br/>
<br/>If you don't see columns to the right re-size this window to make it bigger.</div>
</div>
<div class="col_4 vertical_divider">
<div class="content">This example uses the Columnal responsive framework</div>
</div>
<div class="col_4 last">
<div class="content">Solution could be using a repeating image, pseudo elements or something else. I would like to avoid using additional html if possible. Solution should preferably be css applied to the 'vertical_divider' class.</div>
</div>
</div>
</div>
and here's the CSS:
* {
box-sizing: border-box;
}
.content {
background-color:#ddd;
min-height:400px;
padding:5px;
}
/* Solution preferably applied to this class */
.vertical_divider {
}
I've put it up as fiddle here which also includes a little more explanation:
http://jsfiddle.net/NtuZJ/12/
I've came up with a nice solution using :after pseudo class. The only disadvantage is that you have to specify half the size of the margin (to the right setting).
jsFiddle Demo
.vertical_divider:after {
background: red;
width: 1px;
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: -15px;
}