I'm trying to add in an image into ion-content, essentially as a top banner, but there's some pesky padding that's automatically added below it that I just can't seem to remove. The code is:
<ion-view>
<ion-content>
<img src="http://impact.byu.edu/style/wide_banner6.gif" style="width:100%; padding:0px">
<div class="list">
<div class="item item-divider">
Settings
</div>
</div>
</ion-content>
</ion-view>
This codepen demonstrates what I'm talking about https://codepen.io/anon/pen/LkvObV. I want to remove the spacing between the bottom of the image and the "Settings" item-divider. Anyone know how? I've tried using padding/margin properties in css to no success.
Apply display: block; to the img tag and see the Magic!
Explanation:
By default, an image is rendered inline, like text. All inline-block elements has some vertical-align value by default- reset it either by applying vertical-align: top or reset the display property by applying display: block
Related
I try to created multicolumn menu here (updated link is HERE):
I made used of display: inline-block strategy to make (horizontal) rows. And seems it works.
But it stops work when I wrapped it into the span which comes with position:relative.
<section>
<button>123</button>
<button>123</button>
<span class="dropdown">
* <!-- this is a link that should be inline with buttons -->
<div class="menu">
<div class="row">
<ul>
<li>11111111111111111111111111</li>
<li>1111111111111</li>
<li>111</li>
</ul>
</div>
<div class="row">
<ul>
<li>2222222222</li>
<li>222222222222222222222</li>
</ul>
</div>
<div class="row">
<ul>
<li>33</li>
<li>33</li>
<li>33</li>
</ul>
</div>
</div>
</span>
</section>
The href link in the span represents a button or link where I would click to make menu appeared.
I have to have position relative in the span to make menu appears on right place, relatively to it.
(all buttons and link should be on the same horizontal line)
Question: how to make it working?
It works though if I change span to div and make fixed size for it like width:600px (and this width have be more or less of the menu width to make it work like expected, which is weird), but/so I want it to be span (with no specific/hard-coded width).
UPDATE:
I've updated my example to show how it works with span as block and buttons: http://jsfiddle.net/uz0do787/32/
Just put a little more detail that was not shown on previous demo, to show what I want.
I want all buttons and the href link be on the same line, but making span "display:block" breaks that order.
Simply add display:block to span
see DEMO
See why you need to add display:block
The HTML <span> element is a generic inline container for phrasing
content, which does not inherently represent anything. It can be used
to group elements for styling purposes (using the class or id
attributes), or because they share attribute values, such as lang. It
should be used only when no other semantic element is appropriate.
<span> is very much like a element, but <div> is a block-level
element whereas a <span> is an inline element.
Source:Mozilla Developer Network
Do you mean something like this?: Fiddle
.dropdown {
position:relative;
display: block;
padding: 10px;
}
a {
position:absolute;
top: -15px;
left: 100px;
}
Span - this is an inline element. You can't wrap block with inline element. To make it work with span, add "display: block;" property to the .dropdown
Like:
.dropdown {
position:relative;
display: block;
}
I guess If fixed it by switching to display:table then I can stay with span not trying to make it block and it does not jump then to the next line:
Before:
http://jsfiddle.net/uz0do787/32/
After
http://jsfiddle.net/uz0do787/34/
But in any case, I think there is a room for re-factoring - the menu should be independent to show itself by js by x,y depending on the span/link location so that the DOM not to be so dependable on each other and not to be so fragile.
And I just do not understand, why when I apply "display:table" (on that solution/answer I proposed) span stays on place with buttons, but with "display:inline-block" the span breaks the menu layout. What makes display:table works like expected comparing to inline-block solution.
I have an image that i have displaying at top of the webpage.Now i want to show one menu button id beside to the image but i am not able to do it.Menu button is coming down in next line..
Here is the HTML..
<img src="images/hotelAwadh.png" alt="logo" width="150" height="50">
<div id="result_data"></div>
How to display <div id="result_data"></div> beside to img .
Please help me ..
Use:
float:left;
On both your image and div
div is a block element and it takes 100% width by default. img is an inline element by default and it occupies its very specific width/height. what you have to do is overwrite their default behaviours with display:inlineand display:block
img {float:left;display:block}
div#result_data {float:left;display:inline;}
http://jsfiddle.net/v2N7v/
I have a link that I want to always be at the bottom right of the cell it is in. Right now the link is in a < p > element. I tried doing both absolutely and relative positioning but I can get the effect I am looking for.
I have a row with 4 cells, when attempting to apply the absolute position it takes the element to the very last cell on the right... instead of just placing it within the cell it is in. I tried various methods but not sure if I am sure tired or trying to do the impossible.
I am very new to css tables so I could be thinking about this all wrong.
Here is an example:
http://jsfiddle.net/56H5x/1/
The "Learn more" link to the very right should be at the bottom right of the first cell.
Thanks in advance.
While setting position:absolute on child element <p> set position:relative on parent element <div> having <p> element.
So the child element will be relative to its parent element.
EDITED:
Working JS Fiddle
in Chrome, Safari, Opera and IE
But not compatible in Firefox, because Firefox does not obey position:relative on display:table-cell elements.
See the reference:
Edited: Sorry..!! Missed it :). As said by ahsaan, Add position relative to .layout-cell and modify your HTML as below.
.layout-cell {
display: table-cell;
vertical-align: top;
position: relative;
}
.layout-cell div{
position:absolute;
bottom:0;
right:0;
}
<div class="layout-cell columnBody-wrapper curvedBottom">
<p>Column 3</p>
<div><a class="button button" href="#">Learn More</a></div>
</div>
Expanding on Ahsan Rathod's answer to solve this issue in firefox wrap your content inside a div and set your properties on this div rather than the div set as display table-cell
.cell-div {display:table-cell}
.relative-div {position:relative; width:100%}
.absolute-el {position:absolute}
<div class="cell-div">
<div class="relative-div">
<div class="absolute-el">
<img ... >
</div>
</div>
</div>
Using Bootstrap Responsive - HTML appears like...
<div class="row-fluid Center">
<div id="divMapCanvas" class="span6">
<div id="map_canvas">
</div>
</div>
<div id="divMapPanel" class="span6">
<div id="map_panel">
</div>
</div>
</div>
Test Webpage: http://gfw.yyyz.net/Contact
What I would like to do is initially hide the divMapPanel div and have the divMapCanvas div centered on the page. Then after the directions button is pressed, the divMapCanvas would move to the left and the divMapPanel would appear. I have tried merely hiding the divMapPanel, but I can't get the divMapCanval centered.
Thanks in advance for any suggestions?
On the the div with class span6 that wrap your canvas, you need to set a fixed width (I used width: 526px; when I got it to work on your example page, but you could use % instead, or what have you, but it cannot be set to auto which is the default setting), you also have to get rid of the floating by adding float: none; and margin: 0 auto;.
On the divMapPanel you need to add display: none, to make sure that it doesn't take up any space in the DOM. Using visibility: hidden for instance will not work.
Then when the user click on direction and you want to display both elements side by side, you get rid of these settings by adding float: left etc. back in, and both elements should appear side by side.
I am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom.
This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content.
I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page.
I have tried to add a margin-bottom css property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a margin-top css property but not for the bottom.
This is the main structure to my website, without content:
<html>
<head>
</head>
<body>
<div class="CONTAINER">
<div class="PAGENAVBAR">
</div>
<div class='CATEGORYNAVBAR'>
</div>
<div class='PAGE_CONTENT'>
<div class="LEFTCONTAINER">
</div>
<div class="RIGHTCONTAINER">
</div>
</div>
<div class="PAGEFOOTER">
</div>
</div>
</body>
Can someone please suggest a method to achieve this effect?
I've found this to be effective:
body {
padding-bottom: 50px;
}
margin-bottom moves the whole element, try padding-bottom instead.
adding padding-bottom to the last element should do this, or you could add padding-bottom to the container element, just remember that this will be added to the height if you have it set in your css
use paragraph to do this. html paragraph
Try using 'padding-bottom' instead. The behaviour of this is more consistent across different browsers than 'margin-bottom'.
But be aware this will add to the overall height of the element in question, if you're using this in any calculations.
I'd give PAGE_CONTENT a margin-bottom; you may need to also give it overflow:hidden if your LEFTCONTAINER and RIGHT_CONTAINER are floated.
In css give margin-bottom attribute to the container class.
.container{
margin-bottom:100px;
}