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.
Related
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>
I'm working on my new portfolio and although it's far from finished, i'm getting close to finishing the design. There's just one problem atm that I don't know how to get rid of. If you go to http://minimalito.be/index.html you'll go to the homepage, then when you click on 'about' you'll notice that the footer very briefly jumps to the top of my page...
When you go from the homepage to the about section, not only the footer moves, but the whole content briefly moves up. Would anyone know why?
The content is loaded with ajax, so that's probably got something to do with it, maybe i'm positioning some divs wrong? I don't really see it.
This is rough layout of my code, for more detailed code + example, you can check the website itself of course.
Thnx!
<div id="content" class="block">
<div id="header">
<nav class="centered">
<h2>minimalito.</h2>
<ul>
<li>about.</li>
<li>work.</li>
<li>contact.</li>
</ul>
</nav>
<h1 id="contact" class="ninja">minimalito#info.be</h1>
</div>
<div id="load">Loading</div>
<div id="page">
</div>
<div id="footer">
</div>
</div>
Your #header has a fixed position so it is not part of the document flow.
#content has a top margin that pushes both #content and #footer down so that they are positioned below #header#.
Now when you click on one of the menu links at the top fadeOut is called on #content which sets display: none; on it. With nothing left to push elements that are part of the document flow down anymore #footer is moved all the way to the top of the page until the new content is asynchronously loaded.
Instead of having fadeOut set display to none consider just changing the opacity and replace the content when the element is invisible.
first of all here is the link to jsfiddle: http://jsfiddle.net/HotFrost/RnNX3/6/
you can see that in chrome the graph layout inside the svg element, panned and zoomed ok. Whereas for IE (v9.0) it totally disregards the borders.
basically for this simple layout:
<div id="wrapper">
<div id="content-col"> graph
<div id="graphwidget_graphContainer" style="border: 4px solid purple;" ></div>
</div>
<div id="right-col"> menu </div>
</div>
IE and Chrome render graph differently.
I have tried to use different settings for width/height/remove them. I have tried to replace the divs with table cells.. Still same problem - in IE graph nodes are rendered above the svg element and then (when panned/zoomed) also go over the svg element borders.
Anyone can give some ideas how to fix it?
Thanks in advance!
HF
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