I want the header and the main image on a page to stay connected to each other so that when the picture resizes it doesn't become too far off from the header.
But whenever I try to look up the answer, the word "fix" throws off the whole search.
Basically I have two images with divs as containers but I don't know the key words to make them stay/move together.
Try simply wrapping them inside an extra div:
<div id="Wrapper">
<div id="Header">Header Text Here </div>
<div id="Image"><!--- Image Tag here ---> </div>
</div>
Related
I am working on fixing a bug for a frontend built using Fluent UI. I have a ChoiceGroup in which I have rendered two div tags each having text. I want the screen reader to read both the texts when the first div is chosen. The only way I can narrate both text is by having them inside the same div but then I cannot style them the way I want to style them.
Similar question but related to Bootstrap: Adding aria-label to text elements
So you have something like this?
<div>
text1
</div>
<div>
text2
</div>
What do you mean by "chosen" in "when the first div is chosen"? Is it an interactive element?
In my previous answer that you alluded to, all the elements to be read were contained in a parent container. It was a <button> in that case.
Normally, if you want all the text to be read, then the focus needs to move to the parent element so that all the child elements will be read, so you'd need a parent <div> and the focus would have to move to it.
<div>
<div>
text1
</div>
<div>
text2
</div>
</div>
Alternatively, for interactive elements, you can have aria-labelledby (or aria-describedby, depending on the nature of the second <div>) to have an element's text announced with another element. Something like this:
<div id="new1" aria-labelledby="new1 new2">
text1
</div>
<div id="new2">
text2
</div>
However, using aria-labelledby directly on a <div> without a subsequent role is not really supported.
And when I said the "nature" of your second <div>, if the second div acts like an extension of the first text, then aria-labelledby (with two IDs) seems appropriate. But if the second text is more of a "further description" of the first element, then aria-described might be more appropriate.
<div aria-describedby="new2">
text1
</div>
<div id="new2">
text2
</div>
Without further details of your code, a more specific answer can't be given.
I am developing a food website using Spring boot, Thymleaf and Bootstrap. I need to display menu items in a webpage. To display it I am fetching the data from a database and then iterating over it to display. However, I am not able to display it in a single column like this. Any suggestions on how to handle this?
Code:
${menu.mainMenuName}"
You need to move your "th:each" statement to the div tag. It will be something like:
<div th:each="menu: ${mainMenu}" class="col-md-12">
<a class="text-info" th:value="${menu.id}" th:text="${menu.mainMenuName}" href=""></a>
</div>
Note that ${menu.mainMenuName}" is redundant with th:text="${menu.mainMenuName}
I found the solution for it. Problem with my previous approach was it was creating col-md-2 for every link hence it was getting displayed in single line to fix it below approach was followed:
<div class="col-md-2">
<div class="main-menu" th:each="menu: ${mainMenu}">
<a class="text-info" th:value="${menu.id}" th:text="${menu.mainMenuName}" href=""></a>
</div>
</div>
I'm trying to get an image to run edge to edge (full width) within the viewport under Bootstrap 4. I had thought that the container-fluid element would allow this, by housing a row which could then contain the img element, as opposed to the container element which would constrain the width.
Nothing i do seems capable of removing the padding which appears -left and -right of this img element. I do not want to remove the root container-fluid element's padding as this ruins things for the preceding content; I only want to disable it on this one image.
The HTML which references the Bootstrap reads thus:
<div class="container-fluid">
<div class="row">
<div class="col-12">
<img class="img-fluid" src="images/section-image-02.jpg" alt="">
</div>
</div>
</div>
And I've uploaded a visual to illustrate the effect below.
The padding i am trying to remove appears in blue alongside the image itself.
I am having the hardest time aligning things in Oracle Apex...basically some pages look ok, but some look like this:
This is considering that all of my pages have the same template/region/col settings:
What am I doing wrong?!
EDIT:
I did get the positioning to become a little better:
Here's the template info:
It might be your page template. I've imported the Green Spring theme and tried it out. Since you're using tabs and only using the apex templates, you might've chosen the One level tabs - Left sidebar (fixed width / DIV based). That would explain why your 'Add New User' region is being 'pushed' to the right. When you add another region, it will probably too get pushed.
Your menu region, which is not being set off, might be placed in another position in the template, before the sidebar.
Check both regions' display point: are they the same?
Has your page template a fixed width sidebar?
So here is the code for the body template of the One Level Tabs - Left Sidebar (fixed-width / DIV based) template:
<div id="header">
<div id="logo">#LOGO##REGION_POSITION_06#</div>
#REGION_POSITION_07#
<div id="navbar">
#NAVIGATION_BAR#
<div class="app-user">#WELCOME_USER#</div>
#REGION_POSITION_08#
</div>
</div>
<div id="tabs">
<div class="frame">
<div class="bg">
<div class="tab-holder">
#TAB_CELLS#
</div>
</div>
</div>
</div>
<div id="topbar">#REGION_POSITION_01##REGION_POSITION_04#</div>
<div id="messages">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div>
<div id="body">
<div id="two-col-sb-left">
<div id="left-sidebar">#REGION_POSITION_02#</div>
<div id="main-sb-left">
#BOX_BODY##REGION_POSITION_03#
</div>
</div>
</div>
So what you did after your edit, was probably putting the 'Add new user' region to Page Template Region Position 1, just like the Menu region, stacking them up.
The default place would have been in <div id="main-sb-left">
I'd say that your actual problem still lies with the page template. You should try this: go to shared components > templates, and make a copy of the One Level Tabs - Left Sidebar (fixed-width / DIV based) template (done by clicking the 2 page icon next to it). Then edit this copy (just call it one level template test), and change the body div like this.
<div id="body">
#REGION_POSITION_02##BOX_BODY##REGION_POSITION_03#
</div>
Then alter your page template, and set your 2 regions to position #03, and set the template to Reports Region. Your regions will be aligned all the way left, under eachother, and no whitespace to the left.
Honestly, that'd be the easiest way to solve the empty sidebar space. There are no other regions in the body that omit the sidebar. At least in this theme!
Anyone know how to lay a div tag that has an Image in it on top of a other div tag that has its one image in it? In the end I want to lay one image on top of a other image.
Thanks
Why not do two div tags, one housing the other, both with background images applied to them. Then you can use the background-position to position them how you'd like.
<div id="one">
<div id="two">
</div>
</div>
#one{background:url('image_one.png') no-repeat}
#two{background:url('image_two.png') no-repeat}
EDIT: Make sure you set the height and width of the div's to match your image size.
Put a background image in the bottom <div> tag, and put an <img /> inside the div. Another possibility is to use 2 <img> tags, but apply Position:absolute to both and use z-index to specify the layer order.
You can set it up as a nested div with the internal div set to use relative positioning.
The following is the best tutorial I've ever seen on css positioning:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
solution 1:<div style="position:relative">
<div style="position:absolute;top:0;left:0;">
<img src="foo.png" />
</div>
<div style="position:absolute:top:0;left:0;">
<img src="bar.png" />
</div>
</div>
solution 2:<div style="background:url('foo.png') no-repeat scroll transparent">
<img src="bar.png" />
</div>
not great solutions... Not sure why you would want to do this anyway