I'm having trouble getting H1 text to center. I'm using w3.css and trying to override it by using this:
<!-- Header -->
<header class="w3-display-container w3-content w3-wide" style="max-width:1600px;min-width:500px" id="home">
<img src="images/bushlake1920.jpg" alt="Bush Lake">
<div class="w3-display-bottomleft w3-padding-large w3-opacity"> <!-- when i remove this line, H1 centers -->
<!--<h1 class="w3-xxlarge">Website Name</h1>-->
<h1><p style="color:red;text-align: center;"><strong>Website Name</strong></p></h1>
</div>
</header>
Here is the w3.css for that section:
.w3-display-bottomleft{position:absolute;left:0;bottom:0} .w3-display-bottomright{position:absolute;right:0;bottom:0}
When I remove the above line from the w3.css, then H1 will center, but I lose the location on top of the photo.
I've tried changing position:absolute;left:0;bottom:0 to position:absolute;center:50%;bottom:0, but that didn't help.
Related
I am attempting to modify the Dark Nav with White Page Header template in TailwindUI/Vue (https://tailwindui.com/preview#component-10058606cac5398d7fa2c73b64089874). I wish to add a background color to the template. To do this, I attempted to add class="bg-amber-300" to the top-level div:
<div class="bg-amber-300 min-h-full">
///
</div>
...but that did not work. I also tried adding a color class to the main tags further down in the template:
<main class="bg-amber-300">
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<!-- Replace with your content -->
<div class="px-4 py-6 sm:px-0">
<div class="border-4 border-dashed border-gray-200 rounded-lg h-96" />
</div>
<!-- /End replace -->
</div>
</main>
But that also did not work. In both cases there is still a large white gap at the bottom of the view. How can I add background color so that the entire view below the nav bar is filled?
I think it's working as it should because min-h-full means to take the full height which is specified in the content section as h-96
if you want to get rid of the white space give the top-level div this class
min-h-screen bg-amber-300
https://play.tailwindcss.com/fGw3zeIf4n
I have page transition animation.
I want after transition find on new page element and change style.
My problem I first change the element and then go to a new page where this element is not changed.
Here link on video how its work now https://www.youtube.com/watch?v=VvmVxd-cmNM
I am not sure if I get this right but I'll try to answer anyway
I want after transition find on new page element and change style.
Vue <transition> has events for when you want to know if a transition is done.
You might be able to use #leave or #after-leave.
Docs: https://v2.vuejs.org/v2/guide/transitions.html#JavaScript-Hooks
My problem I first change the element and then go to a new page where this element is not changed.
You are structuring your app incorrectly.
I watched the video and it looks like both pages includes your Nav/Sidebar (the right part) thing in each page.
You are structuring your page like this:
PageA.vue
<div id="page-a">
<!-- this is your left side part -->
<div id="page-a-content"></div>
<!-- this is your right side part -->
<div id="sidebar"></div>
</div>
PageB.vue
<div id="page-b">
<!-- this is your left side part -->
<div id="page-b-content"></div>
<!-- this is your right side part -->
<div id="sidebar"></div>
</div>
App.vue
<div>
<!-- This shows PageA.vue OR PageB.vue -->
<router-view />
</div>
You only have the left-side part changing but not the right-side part.
You should structure it like this:
App.vue
<div>
<!-- This is your left side part. PageA.vue OR PageB.vue -->
<router-view />
<!-- This is your right side part -->
<Sidebar />
</div>
When you change your page, only the <router-view /> will change and not the <Sidebar />
I am using revolution slider to animate an image from left to right on the screen (this part is working). I would like to have a layer of text that appears as the image crosses over it. Is there a way to do this with slider revolution?
<ul>
<!-- SLIDE 1 -->
<li data-transition="curtain-1" data-slotamount="5" data-masterspeed="700" data-title="Slide 1">
<!-- MAIN IMAGE -->
<img src="yourIMGhere.jpg"
alt="slidebg1" data-bgfit="cover"
data-bgposition="center center"
data-bgrepeat="no-repeat">
<!-- LAYERS -->
<div class="tp-caption rs-caption-1 sft start"
data-x="center"
data-hoffset="0"
data-y="100"
data-speed="800"
data-start="2000"
data-easing="Back.easeInOut"
data-endspeed="300">
<u>TEXT PLACED HERE FOR FIRST LAYER</u>
</div>
<!-- LAYER -->
<div class="tp-caption rs-caption-2 sft"
data-x="center"
data-hoffset="0"
data-y="200"
data-speed="1000"
data-start="3000"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">
ADD A SECOND LAYER OF TEXT HERE THAT COMES IN AT NEW TIME
</div>
<!-- LAYER -->
<div class="tp-caption rs-caption-3 sft"
data-x="center"
data-hoffset="0"
data-y="360"
data-speed="800"
data-start="3500"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">
THIRD LAYER HERE AND SO ON...
</div>
</li>
obviously adjust the settings for each layer according to your needs but that's how to add multiple layers that'll appear at different times... hope it helps
I have a slider with fixed image sizes (all pictures are the same size), and need to know please if it is possible to overlay the slider container with a frame that has a transparent middle to let the slides underneath show through. Adding the frame to each individual slide image doesn't look good, because the frame is then "ripped apart" by the image transitions. I need a frame "overlay" that stays in place and intact above the individual slides.
Any help or advice would be greatly appreciated.
You can add anything in a slider container. And you can add static content in slides container. And you can add static content in any slide.
<div id="slider1_container" ...>
<!-- custom background here
<div ...>...</div>
-->
<div u="slides" ...>
...
<!-- custom overlay here
<div u="any" ...>...</div>
-->
</div>
<!-- custom overlay here
<div ...>...</div>
-->
</div>
Good Morning!
I'm working on a prototype and I would like to know the "proper" way to change the width of Foundation's Orbit Slider yet still keep it's responsiveness.
Currently - I had changed the width of the slider container to a smaller percentage (73%) - but when viewed at mobile size, it just doesn't seem quite right. Not to mention the arrows have floated upwards and I'd rather not hack some css to get them positioned correctly.
Orbit CSS: http://naivestudio.net/win-prototype/prototype/orbit.php (put on separate page just for this question - changes will be made in the app.css file)
HTML in Index Page - Note the video is outside of the slider, but I will have it floated next to it in the header container.
<div id="headcontain" class="row">
<div id="featured">
<img src="http://placehold.it/700x300&text=Slide1">
<img src="http://placehold.it/700x300&text=Slide2">
<img src="http://placehold.it/700x300&text=Slide3">
<img src="http://placehold.it/700x300&text=Slide4">
<img src="http://placehold.it/700x300&text=Slide5">
</div>
<img src="http://placehold.it/235x300&text=Video">
</div>
Javascript
<!-- Include Orbit -->
<script src="foundation/javascripts/jquery.foundation.orbit.js"></script>
<script type="text/javascript">
window).load(function() {
$("#featured").orbit( {
timer: false
});
});
</script>
the proper way to resize an orbit slider is to wrap it in a div with a class specifying how many columns you'd like it to stretch across. By changing the number of columns the container stretches across, the framework will then automatically resize the slider. If you're using foundation 4 or greater you'll need to use their new syntax of "large-(#)" or "small-(#)" when specifying the number of columns.
You had said that on small resolution it looked incorrect, if you're using Foundation 4+ you can use a combination of both large and small size calls to affect how it appears on both large and small resolutions; the following example will span twelve columns on a large resolution and only span 3 columns when you reach a smaller resolution.
Situational Resolution Sizing Example for Foundation 4+:
<div class="large-12 small-3 columns">
Full Example for Foundation 4+:
<div id="headcontain" class="row">
<div class="large-12 small-3 columns">
<div id="featured">
<img src="http://placehold.it/700x300&text=Slide1">
<img src="http://placehold.it/700x300&text=Slide2">
<img src="http://placehold.it/700x300&text=Slide3">
<img src="http://placehold.it/700x300&text=Slide4">
<img src="http://placehold.it/700x300&text=Slide5">
</div><!--/featured-->
<img src="http://placehold.it/235x300&text=Video">
</div><!--/large12-->
</div><!--/headcontain-->
Full Example for Foundation 3-:
<div id="headcontain" class="row">
<div class="twelve columns">
<div id="featured">
<img src="http://placehold.it/700x300&text=Slide1">
<img src="http://placehold.it/700x300&text=Slide2">
<img src="http://placehold.it/700x300&text=Slide3">
<img src="http://placehold.it/700x300&text=Slide4">
<img src="http://placehold.it/700x300&text=Slide5">
</div><!--/featured-->
<img src="http://placehold.it/235x300&text=Video">
</div><!--/twelveColumns-->
</div><!--/headcontain-->
Hope this helps!
As of v6.5.3 it appears that this still hasn't been resolved BUT it looks like there will be fix in v7. More info hero on Github.