I have a title with a fixed width, and I need to set a logo after the last word in the title.
When the title is too long, it takes 2 lines.
Example :
My
Title (logo should go here)
Here is a codepen with tailwind : https://codepen.io/jbrazillier/pen/OJZWYEb
I can only set it below the title, or on the right of the first word.
Since you have fixed size for your h2 you should wrap your image and title in a relative div and your logo should be absolute then use position left-full
by the way you should improve your markup i added the border to show you what i mean
<script src="https://cdn.tailwindcss.com"></script>
<h2 class="w-[40px] flex text-3xl font-bold border">
<div class="relative">My title
<img class="w-8 h-8 absolute bottom-0 left-full" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Red-circle.svg/1200px-Red-circle.svg.png" alt="" />
</div>
</h2>
Related
I am working on a touch screen display for a museum. The screen will display old photos with touchable zones laid on top of it that reveal more information about people/objects show in the photos.
The screen size is fixed (it's a TV) but the photos could be in any aspect ratio; landscape or portrait.
There will be a header and footer at the top and bottom of the screen. In the middle I want to display the photo as large as possible. That is to say:
if the photo is portrait it should span the full height between the header and footer with empty space to the left and right.
if the photo is landscape (more landscape than the TV is) it should span the full width of the screen from left to right with empty space above and below.
This, I believe, is classic object-fit: contain; behaviour.
What I'm struggling with is adding the overlay on top. This consists of many rectangles that a user can touch. I know the top and left position and width and height of each box as a percent of the image it is overlaying.
I have made a tailwind playground here: https://play.tailwindcss.com/1c8QufeAFj
My understand is that I can't add the overlain boxes as children of the <img> tag, so they are placed in a <div> that is the <img> tag's sibling.
<!-- Check out the tailwind playground to see a live preview -->
<div class="flex h-screen flex-col">
<div id="header" class="bg-gray-500 p-6"><p>Header</p></div>
<!-- Main content which grows to fill the space between the header and footer -->
<main class="grow bg-gray-900">
<!-- Wrapper around the img and it's overlay -->
<div id="wrapper" class="relative">
<!-- The image: Should be as large as possible within main content (object contain style behaviour) -->
<img class="h-full w-full" src="https://placekitten.com/600/400" />
<!-- Div container boxes to draw on top of image (and move and scale with the image) -->
<div class="absolute inset-0 z-10">
<!-- Boxes overlaid on each kitten -->
<div style="left:48%; top:28%; width:11%; height:15%;" class="absolute border-2 border-orange-300"></div>
<div style="left:36%; top:29%; width:10%; height:14%;" class="absolute border-2 border-orange-300"></div>
<div style="left:16%; top:33%; width:10%; height:14%;" class="absolute border-2 border-orange-300"></div>
<div style="left:69%; top:43%; width:11%; height:15%;" class="absolute border-2 border-orange-300"></div>
</div>
</div>
</main>
<div id="footer" class="bg-gray-500 p-6"><p>Footer</p></div>
</div>
Since the boxes' positions and sizes are relative to the image, this sibling div must have the same size as the img at all times.
I can't get this to work with object-fit:contain; the sibling div that contains the boxes doesn't have the same size as the img so the boxes don't line up where they are supposed to.
If I try to find a solution without object-fit then I can either get it to work for portrait photos (using h-full) or landscape photos (using w-full) but I haven't managed to find code that works for both portrait and landscape.
i have problem with filling empty space, if parent div using display flex, and children have translate-x class, here some example code
<div class="flex h-screen w-screen">
<div class="w-1/3 -translate-x-10 bg-red-200"></div>
<div class="w-full bg-red-400"></div>
</div>
it show like this
how do i fill the empty space with red if i change the translate-x value
First thing that comes to mind is you could try adding a background color to the parent div like assuming you want the darker red. There are probably other methods but if this one works for your use case it's pretty simple.
<div class="flex h-screen w-screen bg-red-400">
<div class="w-1/3 -translate-x-10 bg-red-200"></div>
<div class="w-full bg-red-400"></div>
</div>
I am struggling to imagine the best way to accomplish a layout I am trying to achieve which includes a static sized oval that is cropped for smaller screens and which contains text inside it that will respond based on the breakpoint.
The design is like this:
So far, I'm here:
I'm trying to achieve this by creating the Oval outside my container div then putting on negative margin on the text to give it the appearance it is inside the oval. I feel like this isn't the right approach.
Currently set up (using Tailwind):
<section id="reading">
<div class="mt-12 border border-black rounded-[50%] overflow-hidden w-[686px] h-72"></div>
<div class="flex flex-col mx-auto md:container">
<div class="self-center justify-center px-8 text-center uppercase -my-80 py-28 text-ts3 font-title-preset">Text Headline Goes Here</div>
</div>
</section>
In my head, for the oval, I would just do margin:auto; overflow:hidden, and width:100% on the div, but that isn't working.
Any pointers on how you would approach this from a better practice perspective?
Thanks!
The approach you're taking separates the oval from the content within. A better way would be to keep them together by wrapping them both in a relatively positioned div and making the oval absolutely positioned to the top and center (then using a transform to center again which is a common pattern) and adding overflow-hidden to the relatively positioned element.
Not sure what your text-ts3 class is meant to do since you did not share your config. But this example uses a few breakpoints with text size classes defined for each and some negative top margin on the text to make things look more vertically centered. Here is the example running on Tailwind Play https://play.tailwindcss.com/3zWymGzXPn
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<section id="reading" class="border border-transparent pt-12">
<div class="overflow-hidden relative mx-auto md:container h-72">
<div class="border border-black rounded-[50%] w-[686px] h-full absolute top-0 left-1/2 -translate-x-1/2"></div>
<div class="h-full flex items-center justify-center max-w-[686px] mx-auto">
<div class="text-center uppercase -mt-4 sm:-mt-6 md:-mt-8 text-5xl sm:text-6xl md:text-7xl max-w-xs sm:max-w-sm">Text Headline Goes Here</div>
</div>
</div>
</section>
You can set the width of the oval to 120% (or a fixed with per breakpoint) and the shrink to 0, so it does not shrink.
<section id="reading">
<div class="flex h-screen w-full justify-center overflow-hidden bg-yellow-100">
<div class="mt-12 flex h-56 w-[120%] shrink-0 items-center justify-center rounded-[50%] border border-slate-300">
<div class="font-semibold">text goes here.</div>
</div>
</div>
</section>
See example in tailwind play.
Im new to Tailwind, I have a video background page (based on that post https://daily-dev-tips.com/posts/tailwind-css-full-screen-video-header/), I trying to add a pattern ( http://www.patternify.com/ ) on top of that video background. I was tried few different approaches but all of them makes strange things with position of the background.
Can someone show me how it should be done in Tailwind?
You can position an HTML over a video using relative and absolute utility classes like this example.
The absolute div is wrapping the iframe video that you need.
You can position the pattern that you need and change its size with width w-{size} and height h-{size}classes.
<div class="relative">
<div class="relative h-20 w-20 left-40 top-24 z-10" style="background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAGtJREFUKFNjZICCpkN+/+vsNjGCuMaZ1/4faYlg4BS+BOeDGYQUnZ2uxchIjCKQYWATcVkHMglmI043ISsCuZ0Rm8PRFYGt/v5W7z+y77ApAhmG4kZcinbVtkA8A9KBT5Gw1DKIGwkpAhkGAJGtf6rUDvXfAAAAAElFTkSuQmCC) repeat;"></div>
<div class="absolute top-0 w-full">
<iframe width="800" height="600" src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80" frameborder="0" allowfullscreen></iframe>
</div>
</div>
You can take a look at the example in the next play.
https://play.tailwindcss.com/QjG6jhiIdN
I got a simple code as such :
<div class="container">
<div class="w-2/3 h-32 bg-gray-900 text-yellow-500 relative">
<span class="absolute top-96 left-full">hello</span>
</div>
</div>
However the hello is way outside the div I intend to use it in.
How can I put hello inside my 2nd div?
How can I put hello inside my 2nd div?
absolute top-96 left-full positions the <span>hello</span> 24rem below the top and on the right edge of the <div class="w-2/3 h-32 bg-gray-900 text-yellow-500 relative">...</div>. Remove absolute top-96 left-full from the span and "hello" will appear within the bounds of the bg-gray-900 div.