this is text that overlaps itself
I am currently trying to use a flex box with columns made the height of the first column 100% so that it would force the other two boxes to be on top of each other. In the first box I typed artistry by and in the second and third I’m trying to align the text so that they can have LE and XI directly over each other. Any advice here would help.
Can you post your code? You may be missing some containers so you can have better control. I haven't tested this, but this example might guide you.
HTML:
<div class="logoContainer">
<h1> artistry by </h1>
<div class="rightSideOfLogo">
<h1>LE</h1>
<h1>XI</h1>
</div>
</div>
CSS:
.logoContainer {
display: flex,
flex-direction: row
}
.rightSideOfLogo {
display: flex,
flex-direction: column
}
Related
We have product page like [advertising link removed]. How do i move below part as shown in 1st image to beside the main div.
There are a number of ways to move one div next to another div. One way of doing it would be to include the two divs into one bigger div (container) and use flex in this bigger div (with flex-direction set to row).
This way you can have both elements next to each other.
Example:
HTML:
<div class="makeThisFlex">
<div id="main"></div>
<div id="addToCart"></div>
</div>
CSS:
.makeThisFlex{
display: flex;
flex-direction: row;
}
I hope this answers your question.
I'm using images as bulletpoints for my Github Pages (markdown files), as described here. Now, I'd like to center the text next to the image vertically. This is shown here (cf. lower third of page), but I have to do it with inline css and cannot get it to work.
What I have so far:
<ul style="list-style-image: url('/assets/images/thumb.jpg'); padding-left: 120px;">
<li>I’m writing a long list item 1 so you can see what happens when the text wraps across multiple lines</li>
</ul>
gives me
when I'd ideally want it to look like:
I already tried setting the line height, but this results in weirdness when there's a linebreak, as is the case here. I read about flexbox, but am unsure how to use it inline. Any help is appreciated!
I repeat: IT MUST BE INLINE !!
Why don't use in your HTML something like this:
<div class='list-item'>
<img src='/assets/images/thumb.jpg' class='bullet-image'/>
<p class='item-text'>Lorem ipsum...</p>
</div>
And then in your CSS you could add:
.list-item {
display: flex;
align-items: center;
justify-content: center;
}
That should do the trick. Then you can re-size the image as you like.
EDIT:
Another thing you can do, using inline styles is something like this:
<ul>
<li style="display: flex; justify-content: center; align-items: center">
<img src='/assets/images/thumb.jpg' style=""/>
<p> I’m writing a long list item 1 so you can see what happens when the text wraps across multiple lines </p>
</li>
</ul>
Then you should resize the image to the size you like by adding the width and height properties on the style attribute of the img element
First, my code:
<main class="main">
<h1 class="title">A title here</h1>
<h2>Another Element Here <span id="subtitle"></span></h2>
<h3 id="thirdtitle">h3 el here</h3>
<div class="overlay" id="one">An alert message here!</div>
<div class="overlay" id="two">
Another alert message here
</div>
<div class="overlay" id="three">A third alert message here, relaunch? <span id="startappagain">Click me </span></div>
<div id="gridelement" class="grid"></div>
</main>
1st question:
I'm using display flex, flex-direction column and justify-content: center and align-items: center on main, I made some interactions on gridelement using JS and "one", "two" and "three" are just alerts so their visibility is set on hidden, and sometimes, they become visible for 1 second when there's an error during the interaction with the JS in the gridelement element.
But when using visibility, unlike display: none, they still take up normal space so there's blank space between h3 and gridelement most of the time, so I would like to have the three elements overlap to minimize the blank space. I've tried playing around with positions which is tricky with display flex. Any idea for something clean? Thanks!
Additional question:
I was also thinking of having the messages just overlap the grid, but since I'm using flex on the grid elements as well, it would just mess up the whole design of the gridelement elements if I had them in the grid (especially that there's nothing in gridelement initially, everything is created in my JS), any idea how I could just make the messages appear in the middle of the screen? They stay there for a second anyway.
Thanks!
I would suggest you to use max-height property along with visibility like this:
.overlay {
max-height: 1000px;
}
.overlay.hidden {
max-height: 0;
visibility: hidden;
}
I'd like the CONTENT flex column to wrap around the left-hand rowChild592 column.
I have this:
I'd like it to look something like this:
I saw an answer here about making a div set to a table cell wrap around:
Wrapping table content around a floating div across multiple rows
Would I have to redo all of this with a table, or is it possible to wrap a flex column around another?
.rowParent,
.columnParent {
display: flex;
}
.columnParent {
flex-direction: column;
}
.flexChild {
flex: 1;
}
#flexymenu {
flex-grow: 2;
height: 100%;
}
.frame {
display: block;
margin: 0 auto;
}
.socialwrap {
display: flex;
}
<div id="container" class="flexChild rowParent">
<div id="rowChild592" class="flexChild">
<h1></h1>
<div class="socialwrap"></div>
</div>
<div id="flexymenu" class="flexChild columnParent">
<div id="columnChild85412" class="flexChild rowParent">
<div id="rowChild97758" class="flexChild"></div>
<div id="rowChild52237" class="flexChild"></div>
</div>
<div id="columnChild59385" class="flexChild selected">
<div class="frame">CONTENT</div>
</div>
</div>
</div>
In flex layout, elements can be aligned along columns or rows. A flex item cannot span between both columns and rows, which could allow the content of one item to wrap around another item. So, flexbox is not a good option for achieving your layout. Read more.
In grid layout, elements can span across columns and rows. A grid item can be configured to take up as many rows and columns as desired, which would allow for the content of one item to wrap around other items, except for one limitation currently in place: The grid area must be rectangular.
This behavior is defined in two parts of the spec.
9. Placing Grid
Items
Every grid item has a grid area, a rectangular set of grid cells that
the grid item occupies.
7.3. Named Areas: the grid-template-areas
property
If a named grid area spans multiple grid cells, but those cells do not
form a single filled-in rectangle, the declaration is invalid.
Note: Non-rectangular or disconnected regions may be permitted in a
future version of this module.
So, for the foreseeable future, tetris-shaped grid areas are not possible, which would make your layout simple and easy.
To wrap your text around images, stick to the good ol' float property. After all, this is exactly what it was designed to do.
And if you're thinking about using float inside a flex or grid container, it won't work. Floats are ignored in both a flex formatting context and grid formatting context.
I'm using Bootstrap 3.
I have a series of rows with two columns. The first column displays text and the second column has an image. I want to vertically centre the text in the first column relative to the row it's in so it aligns nicely with the adjacent image.
Example HTML:
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Some heading</h2>
<p>I want all this text centred relative to the image next door</p>
</div>
<div class="col-sm-6 image">
<img class="img-responsive" src="http://i.imgur.com/cztLHHo.png"/>
</div>
</div>
</div>
Note that I'm using the Bootstrap img-responsive class to correctly resize images for mobile devices.
JSFiddle
What I'm seeing is this:
What I want to achieve is this:
I'm sure this is a commonly performed bit of CSS ninja action but I can't find a good example of it. Can anybody help? I would prefer a CSS solution.
Take a look at this fiddle link
i have used the following property in css
.row
{
display: flex;
align-items: center;
}