I have an issue with my h1 and floating element
I want page number h1 element to be aligned on the right side of my presentation text.
Chrome display the results well but not firefox..the page number texts are within one of my slide images.
Here is my jsfiddle
http://jsfiddle.net/A3RXg/3/
Can someone help me out?
Thansk
Did a jsFiddle here: http://jsfiddle.net/89dQr/.
Updated CSS code
#page-count{
float: right;
}
.break {
clear: both;
}
h1{
float: left;
}
Try removing
white-space: nowrap;
from CSS for
#slide-container
DEMO FIDDLE
If you are going to use a "section" tag you need to specify a width. Otherwise I would recommend using a DIV tag. I believe your iissue is that a section tag doesn't have a width and doesn't resize based on contents.
See "how to float the section tags in html5" for information on float + section tags.
you simply can wrap your h1
<div style="float:left; width:300px;">
<h1>Presentation</h1>
</div>
<div style="float:left">
<h1 >page number</h1>
</div>
<div style="clear:both"></div>
Firefox refuses to show floated elements inline with non-floated elements that exist under the same parent element. (Firefox always uses display:block; for floated elements.)
Either use position:relative; on the parent element and use absolute positioning for the h1s, or float both "Presentation" and "page number".
Related
The HTML file attached here is working fine when viewed in browser but when I try to print it, there is a lot of gap between the Element such that each div is going on it's own page. how can I remove those gaps while printing?
the code : code
the hosted site : sitelink
You can check the problem by going into sitelink mentioned above and pressing ctrl + p.
You can Add float:left; in your css classes:
<style type="text/css">
div.nospace {
margin: 0;
display: inline-block;
float: left;
}
</style>
When creating your div, use class="nospace"
<div class="nospace">first div</div>
<div class="nospace">second div</div>
Sir Plz check this answer on that page. It would help you how can we remove space between HTML elements. In this article, everything is provided in enter link description here
you can solve problem buy adding small css property
font-size: 0;
I've been searching for hours trying to fix this issue, but it doesn't seem like anyone else has had this problem.
I have two divs, one normal (and inline-block) on the left, and one floated nicely to the right of it. When I use .toggle() on them to hide/show, the floated one reappears below its original position.
Even with all my other code stripped away, this problem persists:
//Html
<div class="tableWrapper">
<div class="redDiv"></div>
<div class="greenDiv"></div>
</div>
//Css stuff here:
.tableWrapper{width:100%}
.redDiv, .greenDiv{width:49%; height:150px;}
.redDiv{
display:inline-block;
background-color:red;
}
.greenDiv{
float:right;
background-color:green;
}
//My two measly jquery calls...
$(" .redDiv").toggle();
$(" .greenDiv").toggle();
Or here on JSFiddle: http://jsfiddle.net/0hxc8rr4/
Note: I tried swapping out "style.display = stuff" calls for the jQuery, and that didn't seem to help.
jQuery will redefine the display property once you toggle. You can simply add float:left to the red block class and it should fix it. Or as mentioned, redefine it after each call. But if you're already floating one element, it'd make sense to float the other.
http://jsfiddle.net/0hxc8rr4/2/
It is simple. jQuery shows the element using display:block which then needs a row instead of a cell.
You can manually toggle it yourself to inline-block
change slideToggle() behaviour to display:inline-block instead of display:block?
(jQuery) Toggle div style "display:none" to "display:inline"
In your case you should just use float:left on the first div.
http://jsfiddle.net/v1etme23/1/
.redDiv{
display:inline-block;
background-color:red;
float:left;
}
Only get the above problem on Mac Chrome (not Safari or Firefox). The below gets it to work on Chrome too;
.redDiv{
position: relative;
background-color:red;
float: left;
}
.greenDiv{
position: relative;
background-color:green;
float: right;
}
See this JSFiddle
I want to make the .newslink links all the way to the borders of the .content divs.
I have a slideshow of different content that gets messed up either if I set the a tag around the div or if I apply display:block / display:inline-block to the a element.
Right now the links are only around the image and text because of the 15px padding in .content. You can check this by hovering your mouse over the div (near the border) compared to over the image and text area. I want each link to completely fill the surrounding div.
Is it in this case possible to accomplish without setting the a tag around the div or applying display:block / display:inline-block to the a element?
Working Fiddle: http://jsfiddle.net/8tqryvu5/
Firstly, let's get rid of the Table markup as you're not marking up a table.
<div id="tableNews">
<div class="cell2">
<div id="slideshow">
<div class="content">
<a href="#" id="rightLink1" class="newsLink" target="_blank">
<div class="picDiv">
<img id="rightPic1" class="pic2" src="http://static3.businessinsider.com/image/5238c9c5ecad047f12b2751a/internet-famous-grumpy-cat-just-landed-an-endorsement-deal-with-friskies.jpg"/>
</div>
<div class="text">
<h2 id="title1">title 1</h2>
<p id="rightBoxSubText1">asdasd</p>
</div>
</a>
</div>
</div>
</div>
</div>
To achieve the effect you should apply the padding to the anchor link as this wraps both the images and text (essentially forming the border). Here's the part to take note of:
.newsLink {
display: block;
padding: 15px;
}
As it's an inline element you will need to set it to display:block in order to make it wrap the elements inside it. If you correctly apply the style to the surrounding elements then setting it to display:block will not effect the layout.
Hope that helps.
I am not 100% sure that I got right the whole thing but I think you can achieve this by using
.newsLink{position:absolute;top:0;left:0;bottom:0;right:0;background:red}
It will take the wodth of the slideshow, which is the relative element. If you want it to take the size of the .content and not more you will have to add a wrap in display block around you tag
Here is a jsfiddle: http://jsfiddle.net/8c041xy7/5/
You just need to absolute position anchor tag
.newsLink {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
I have a problem in styling , in Some case parent node/div do not include height of their child node . If any one had this problem , then please give reason .
e.g.
#id{
position:relative;
background:red;
}
.spacer{
height:40px;
position:relative;
}
<div id="x">
<div class="spacer" style="float:left;"></div>
<div class="spacer" style="float:left;"></div>
</div>
In my case height of X node is something different than 80px (less than 80px). Why this is happening ?
I have lot of code so i can't post all those . Please give any reason .
floated elements are not counted as part of the parent's height.
Unless said parent has overflow:hidden.
(Or you can use a clearfix, but overflow:hidden is generally better)
When all the elements inside a parent element are floated, the parent collapses if its' height is not specified.
This is a known issue with a simple solution - you need to use clearfix on the parent element.
In this example:
#x:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
I recommend reading Chris Coyier's excellent article "All About Floats" for a deep explanation and solutions.
I am new to html5, javaScript and jquery and stuck in a problem related to resizing and need help from the experts.
Problem is that I have a div inside which I have three divs.
1st is the title div on the top,and the other two are side by by side under the title div.The two side by side divs are placed such that one of them take 25% the space of outer div.and other one take 75% of width.
Now I want that when I resize my outer divs the inner divs should adjust them selves such that there width ratio remains the same.
But I am unable to achieve this.
So far I have done this
Resizing Div
Can any one please guide me.What I am doing wrong.
I would appreciate any help.
Crude answer is to just use percentages for your widths: http://jsfiddle.net/xV28s/1/
You should move all those style elements into the css though.
Try this:
CSS:
#parent { overflow: auto; }
#inner-left { float: left; width: 25%; }
#inner-right{ float: right; width: 75%; }
HTML:
<div id="parent">
<div id="title">Title</div>
<div id="inner-left"> </div>
<div id="inner-right"> </div>
</div>