I'm trying to remove the white space between the iframe and div as I can. Initially there are a huge white space, but after adding in margin: 0px; to my iframe, div, and h1 for my div as well, the white space still remain but become smaller. Anyone know how to remove the strange white space?
iframe {
margin: 0px;
padding: 0px;
}
.footer {
margin: 0px;
padding: 0px;
line-height: 160px;
width: 100%;
color: white;
background-color: black;
}
.footer h1 {
margin: 0px;
padding: 0px;
}
Without seeing any actual code from you I can give my best guess but no promises.
First make sure that the margins on the children are 0. Then set the font size to 0 on the parent, and reset the font size to whatever you want (default = 16px) in the children. This will make the white space have no size.
HTML:
<div id="parent">
<iframe>
<p>Hello World</p>
</div>
CSS:
#parent {
font-size: 0;
}
#parent > * {
margin: 0;
font-size: 16px;
}
But please update the question to include some example code so we can provide a more complete answer.
Use Margin, Padding 0. ex:
margin: 0;
padding: 0;
in CSS. for both div and iframe
Related
On my website, I am aligning a body of text precisely as exemplified in the following snippet.
html, body {
width: 100%;
height: 100%;
font-family: arial;
font-size: 48px;
text-transform: uppercase;
}
body {
margin: 0;
background: skyblue;
}
div {
width: 200px;
height: 100vh;
padding-top: calc(100vh - (1.5rem * 1.35));
box-sizing: border-box;
border: solid red 1px;
}
span {
line-height: 1.35;
display: inline-block;
border: solid black 1px;
}
<div><span>This</span> <span>is</span> <span>a</span><span>body</span><span>of</span> <span>text.</span></div>
However, I was hoping to take it one step further. For instance, I want to be able to place the top of the text as close as possible to, say, 60vh from the top of the page while still displaying half of the last line. Below is an example of what I mean in JS.
Note: Just noticed the second snippet does not display properly unless you open it to edit it. If you transfer it to codepen, it should work properly.
const
div = document.querySelector('div'),
span = document.querySelector('span'),
lineHeight = parseFloat(getComputedStyle(span).lineHeight),
target = innerHeight * 0.6,
remainder = (innerHeight - target) / lineHeight % 1 * lineHeight
div.style.paddingTop = target + remainder - lineHeight / 2 + 'px'
html, body {
width: 100%;
height: 100%;
font-family: arial;
font-size: 48px;
text-transform: uppercase;
}
body {
margin: 0;
background: skyblue;
}
div {
width: 200px;
height: 100vh;
position: absolute;
box-sizing: border-box;
border: solid red 1px;
}
span {
line-height: 1.5;
display: inline-block;
border: solid black 1px;
}
<div><span>This</span> <span>is</span> <span>a</span> <span>body</span> <span>of</span> <span>text.</span></div>
Notably, I know you can obviously find the "remainder" using calc, viewport units, and rem, but the rest is what is confusing because I am not great at math and also lacking sleep.
Hence I was hoping that somebody out there, who is better at math than me, would be able to tell me whether or not a pure CSS solution without preprocessors is possible (i.e. using only calc, viewport units, rem units, etc) before I waste any more time thinking about this. I know there are some nifty CSS formulas for fluid typography, but is something like this possible?
[ edit ] I thought about this some more while laying in bed. I do not believe it is possible without being able to calculate the "remainder." And there does not seem to be any way to calculate the "remainder" with only addition, subtraction, multiplication, and division. Please correct me if I am wrong.
The goal is to have the DIV tag be 100% of the document's height and then the text is offset a little bit within the DIV?
I think just adding another tag within the DIV to offset all the text can work. You said you want 60vh. Line Height should also be used when dealing with text height.
html, body {
width: 100%;
height: 100%;
font-family: arial;
font-size: 48px;
text-transform: uppercase;
}
body {
margin: 0;
background: skyblue;
}
div {
width: 200px;
height: 100vh;
box-sizing: border-box;
border: solid red 1px;
}
p
{ margin: 0;
padding-top: 60vh;
margin-top: -0.8em;
line-height: 1.6em;
}
span {
line-height: 1.35;
display: inline-block;
border: solid black 1px;
}
<html>
<body>
<div><p><span>This</span> <span>is</span> <span>a</span><span>body</span><span>of</span> <span>text.</span></p></div>
</body>
</html>
Or is this not quite it?
I need to get a <div> to be at the bottom left corner of a table cell. Something like float: left; and float: bottom; together.
A typical cell is:
<td id="x0900A"> <!-- 0900 room A -->
<p class="classTitle">
</p>
<div class="classDescrip">
</div>
<p class="instructor">
</p>
<p class="gender">
</p>
<div class="instructorBio">
</div>
<div class="instructorImg">
</div>
<div id="x0900A-roomCount" class="roomCount">
<p id="x0900A-attending" class="attending">attending</p>
<p id="x0900A-capacity" class="capacity">capacity</p>
</div>
</td>
The CSS is:
td {
position: relative;
}
div[id$=roomCount] {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
margin: 10px 10px 0 5px;
text-align: left;
opacity: 0.60;
}
.classTitle {
float: left;
margin: 5px 10px 10px 5px;
padding: 0 5px 0 5px;
line-height: 1.25em;
font-size: 1.05em;
text-align: left;
color: #00b8b8;
}
.instructor {
width: 50%;
float: right;
margin: 3px 0 10px 0;
padding: 0 3px 5px 3px;
line-height: 1.25em;
font-size: 0.95em;
text-align: right;
color: #00b8b8;
}
.classDescrip,
.instructorBio,
.instructorImg,
.gender {
display: none;
}
This locks .roomCount to the <td>'s bottom left but destroys responsiveness. I get horizontal overflow scrolling of the whole <body>. You can see the result here.
I tried putting a wrapper <div> inside the <td> and making it
position: relative;
height: 100%;
but it's only so tall as the wrapped content requires which, for many cells, is only partway down.
So, I need a CSS/jQuery way to anchor .roomCount that doesn't break responsiveness.
Note:
This is a resubmission of an earlier question that was too wordy and had much irrelevant content. I'm resubmitting it here in the hope that it will garner notice.
Edit/Update:
In response to #UdoE's comment: I have included the code and edited the "wordiness." At least, I hope I have and made it a better question.
In response to #ChrisG's labeling this a possible duplicate: I already noted that this is a resubmission of that question and the reason why I did it. There are no answers or comments to that question as of this writing.
If you set overflow: hidden; on the div that wraps around the element:
<div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-4f3956fa4071adb2096e">
...the horizontal scroll on the body will go away. There is already a rule affecting this element in site.css on line 13:
.sqs-block:not(.sqs-block-html):not(.sqs-block-markdown) {
clear: both;
overflow: hidden; /* add this */
}
For keeping the .roomCount element positioned in the lower left of the cell, maybe this approach can help:
.schedule td {
position: relative;
padding-bottom: 30px;
}
div[id$="roomCount"] {
margin: 0;
position: absolute;
bottom: 0;
left: 0;
max-height: 30px;
overflow: hidden;
}
What this does is place 30px of padding at the bottom of the td. Then uses absolute positioning to move the .roomCount element into the lower left corner.
This way, even though absolute positioned elements are out of flow, the padding gives you an area to work with that is going to be accounted for when the table is resizing. I added a max-height and overflow: hidden on that element just in case. It will probably take some tweaking to get right for you.
Here is a jsFiddle
I'm trying to figure out how to use Position: relative in order to keep an object (let's call it text) in the same place on the screen regardless of screen size.
When I use Position: relative, and set "left" to 30% for example... It's 30% of the screen. I'm trying to figure out how to put text on top of an image and set the text to be 30% left within the image. I need this to work regardless of the screen size. So far I have been unable.
Could someone explain to me how Position Relative and Position Absolute work in these kinds of situations? Or how this would best be handled?
Thanks!
Here's my JsFiddle, and here's the snippet
.center {
display: table;
margin: 0 auto;
}
body {
background-color: #27ae60;
}
.image {
position: relative;
width: 100%;
/* for IE 6 */
}
.element {
position: absolute;
top: 100px;
left: 30%;
width: 100%;
font-size: 45px;
font-family: 'Just Me Again Down Here', cursive;
}
.input {
/*color: blue;*/
outline: none;
border: none;
background-color: transparent;
position: absolute;
top: 220px;
left: 18%;
width: 480px;
height: 475px;
overflow: hidden;
font-size: 30px;
font-family: 'Just Me Again Down Here', cursive;
}
<img id='image' class='center' src='https://s13.postimg.org/li2l28a0n/White_Board.gif'>
<h1 class='element'>This is a header </h1>
<textarea id='text1' class='input' placeholder="Write your answer here."></textarea>
First we setup a div with a .desk class, desk will receive the desired background image, a fixed width and height, and it will margin 0 auto since the desk doesn't have a container.
The .header class doesn't need to be absolute, we use it within the desk which is already positioned relatively. We give it a little padding so it will fit in the desk image.
The .answer class is applied to the textarea element we give it a width 100%; since we use it within the .desk which already has pre-defined width, that means .answer will equip all of possible width within the desk.
A great tip is always think simple in CSS, understand the usage of position: absolute, when it's really necessary. By the way if you're unfamiliar with rem sizing, I suggest you take a look here: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
Good luck!
You can get the desired effect in a much simpler code.. have a look:
body {
background-color: #27ae60;
}
.desk {
position: relative;
background-image: url(https://s13.postimg.org/li2l28a0n/White_Board.gif);
width:560px;
height:839px;
margin: 0 auto;
}
.header {
padding: .5rem 0 0 2rem;
font-size: 2.5rem;
font-family: 'Just Me Again Down Here', cursive;
}
.answer {
width: 100%;
margin-left: 2rem;
outline: none;
border: none;
background-color: transparent;
overflow: hidden;
resize: none;
font-size: 2rem;
font-family: 'Just Me Again Down Here', cursive;
}
Fiddle: https://jsfiddle.net/y3h1ogms/5/
When set position: relative on an element, it will be positioned relative to the nearest positioned ancestor, where "positioned" according to MDN means:
A positioned element is an element whose computed position property is either relative, absolute, fixed or sticky.
In your example, the header is not a descendant of the image, so there's no way to position it relative to the image. What you might do instead is convert the <img> to a <div> set the background-image of your div to be the image URL. You would also need to explicitly set the width and height of the div.
My Goal:
Here is what I'm trying to accomplish. We have an list of categories that appear on a page. The number of categories is unknown. The description can be pretty much any size... yet we want a uniform look. So, we are using the dotdotdot plugin to put ellipses on the paragraphs. When you hover over the item, it should expand the description and show the full text.
I want that hover to float or overlay whatever is below it. Due to some of my layout items (see my NOTE below) my sccontainer element doesn't have a set height. It's dynamic based on the content... with a max-height set.
When I change that height to AUTO in the hover event (which causes the text to flow down and displays all the content), I lose the background on the sccontainer element.
Some pertinent CSS:
.sccontainer { width: 280px; zoom: 1; float: left; margin: 5px 10px; padding: 0; border: 1px solid #8697a1; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 6px #777; -webkit-box-shadow: 0 0 6px #777; box-shadow: 0 0 6px #777; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777'); position: relative; background: #fff url(http://imagecss.com/images/background.jpg) repeat-x left top; }
.sccontainer .parent { position: absolute; width: 270px; }
.sccontainer .image { margin: 5px; float: left; }
.sccontainer .image img { width: 48px; }
.sccontainer .icon { margin: 0; }
.sccontainer p { margin: 8px; padding: 0; max-height: 145px; }
.sccontainer h1 { line-height: 24px; display: inline-block; vertical-align: middle; width: 200px; height: 48px; padding: 0; margin: 5px 0 0 0; overflow: hidden; }
.sccontainer h1 a { padding: 0; font-size: 24px; color: #fff; font-weight: normal; }
.sccontainer .content { position: relative; height: 210px; padding: 0 5px; font-size: 15px; line-height: 22px; width: 270px; }
.sccontainer a:hover { text-decoration: underline; }
.sccontainer.hover { height: 250px; }
.sccontainer.hover .content { height: auto; }
.sccontainer.hover .content p { min-height: 135px; max-height: none; }
jsFiddle:
Here is a jsFiddle version of what I have right now. You can see this in action, if you hover over the text in the blue box. It's a bit large, so I used jsFiddle instead of putting all the bits here code tags...
http://jsfiddle.net/ztMM5/1/
And here is a mockup of what I'd like to see. Method 5a expands slightly to show the full content.... yets overlaps the red line. None of the other items move around or are affected.
NOTE: Sorry for the size of things. I've trimmed it down about as much as I can. Also, I am modifying an existing intranet website... it's 3rd party, so I have limited control of the source code - hence the table usage. :(
What I've Tried/Researched:
I believe the issue stems from the fact that my sccontainer item is floating, and doesn't have a height specified. That's why the image disappears.
I had a version that kept the background... but the sccontainer box didn't resize like we need... the text just overflowed it... rather ugly.
I don't know enough CSS to make this all work right. I'm not adverse to using jQuery to do more if needed.
I did work on a version that handled most of the hover using the :hover stuff... but it didn't work quite as well as the jQuery approach.
This answer may not solve your specific problem but it may help others with a similar scenario (working with tables makes difficult to render a clean layout in most cases.)
I ran into this issue before and this is how I solved it. It basically relies in an html nested div structure to achieve the expandability of the content without affecting the floating layout of the near elements :
<div id="wrapper" class="cf"><!--wrapper with border and CLEARED-->
<div class="sccontainer"><!--position relative-->
<div class="inner"><!--position absolute-->
<div class="content"><!--position relative-->
<!-- my content here -->
</div>
</div>
</div>
<!-- more containers etc-->
</div><!--END wrapper-->
First, we are going to apply the infamous clear-fix hack to the #wrapper container (use your preferred method):
.cf:after {
visibility:hidden;
display:block;
content:"";
clear:both;
height:0
}
* html .cf {
zoom:1
}
/* IE6 */
*:first-child+html .cf {
zoom:1
}
Then the style for the .sccontainer container :
.sccontainer {
width: 280px; /* or whatever - could be % for responsiveness */
padding-bottom:200px; /* any value to give height without using height ;) */
position: relative;
float: left;
margin: 5px 10px; /* or whatever */
overflow: hidden; /* this is important to keep all same height and big content out of sight */
z-index: 1; /* this is important too, see later */
background: white url("imagebackground.jpg") 0 0 repeat-x; /* need to explain? */
}
Then the .inner container, which actually will help to keep the layout in order if we hover the elements
.inner {
position: absolute; /* please don't move */
width: 100%; /* to fill the whole parent container */
height: 100%; /* same */
}
And the content :
.content {
position: relative;
background: white url("imagebackground.jpg") 0 0 repeat-x; /* not redundant though */
width: 100%; /* helps to fill the gaps with small content */
height: 100%; /* same, specially if using image backgrounds */
/* other styles, etc */
}
NOTE: we should apply same border-radius properties to the three containers and box-shadow to .sccontainer and .content for consistency
Now, what happens when we hover ?
.sccontainer:hover {
overflow: visible; /* show the full content */
z-index: 999; /* place me on top of the others if needed (which lower z-index, remember?) */
}
.sccontainer:hover .content {
height: auto; /* as it really is, including background image */
}
NOTES : this effect will happen regardless if the content's height is smaller than the parent container's height. You may not like the effect mostly if you are using borders and shadows (could be shown as smaller box inside the parent container) so we could add an extra class to .sccontainer like
<div class="sccontainer withhover">
and apply the hover effects only if that class exist like
.sccontainer.withhover:hover {
overflow: visible;
z-index: 999;
}
... and use a bit of jQuery to remove that class for shorter content, so it won't be affected :
jQuery(document).ready(function ($) {
$(".sccontainer").hover(function () {
var $contentHeight = $(this).find(".content").height();
if ($(this).innerHeight() > $contentHeight) {
$(this).removeClass("withhover");
}
});
});
See JSFIDDLE
There's a mysterious whitespace along the right of my site in firefox (on both PC and Mac, latest versions) and I can't for the life of me figure out what's causing it.
This is what it looks like -
I've been searching the CSS for ages now trying to figure out if it's some margin or padding issue but I can't find anything.
Also, if I remove the div ID 'slider3' the issue seems to disappear, yet I can't figure out how this div is causing the whitespace, since it has no CSS applied to it - it's simply a container.
Here's my site http://www.simplerweb.co.uk
Here's some relevant code so the answer is useful for people later on.
<div class="fullw">
<div class="sliderleft"></div>
<div class="sliderright"></div>
<div id="slider3">
<div class="quote">
<div class="centmid">
<h1 class="fronth">Hello</h1>
<h2 class="frontp">Welcome to Simpler Web</h2>
<h2 class="frontp2">We're an Edinburgh based Web<br> Design Agency</h2>
</div><!-- end div centmid -->
</div> <!-- end div quotes1 -->
<div class="quote2">
<div class="centmid">
<h2 class="frontb">We make wonderful, cross platform <br> accessible Websites </h2>
</div> <!-- end div centmid -->
</div> <!-- end div quotes2 -->
<div class="quote3">
<div class="centmid">
<h2 class="frontc">We can translate your ideas into reality </h2>
</div> <!-- end div centmid -->
</div><!-- end div quotes3 -->
</div> <!-- #slider3 -->
</div>
CSS
/* The following styles are essential to the slider's functionality */
.plusslider {
overflow: hidden;
position: relative;
padding-top: 140px; /* The height / width of the slider should never be set via the CSS. The padding increases the slider box-model while keeping it dynamic */
}
.plusslider-container { position: relative; }
/* Slides must have a set width - even though they may be dynamic. If no width is set on <img> slides, the default image size will be assumed */
div.child { width: 480px; }
.plusslider .child { float: left; }
/* PlusFader Specific (not needed with plustype:slider */
.plustype-fader .child { display: none; position: absolute; left: 0; top: 0; }
.plustype-fader .current { z-index: 5; }
/* End PlusFader Specific */
/* No-javascript fallback -- change "#slider" and "#slider2" identifiers as needed for your html */
#slider > * { display: none; }
#slider > *:first-child, #slider2 > *:first-child { display: block; }
/* End no-javascript fallback */
/* End essential styles*/
/* The following styles are not essential for slider functionality. They are specific to the example content.
It is important to note that the fading effect does not work correctly with non-image content unless that
content area has a solid background (either a background image or a background-color, but not transparent).
Slides to not have to be the same width or height, but if you'd like a consistent width and/or height, make sure to set that within the CSS! */
#slider .slide1 { padding-left: 40px; padding-right: 40px; margin-left: 0; margin-right: 0; }
#slider .slide1 { height: 210px; padding-top: 20px; padding-bottom: 20px; margin-top: 0; margin-bottom: 0; }
.slide1 { height: 500px; padding: 20px 40px; }
.slide1 h2 { color: #fff; font-size: 20px; margin: 0 0 20px 0; text-align: left; }
.slide1 p { border-left: 3px solid #fff; color: #fff; padding: 0 0 0 10px; }
.quote, .quote2, .quote3 { height:400px; padding: 20px 0; width: 980px; width: 100%; position: relative; }
.quote { background-image: url(../images/weare.png); background-position: center; background-repeat: no-repeat; }
.quote2 { background-image: url(../images/headlogosandroid.png); background-position: center; background-repeat: no-repeat; }
.quote3 { background-image: url(../images/ideafront.png); background-position: center; background-repeat: no-repeat; }
.plusslider a img { border: none; } /* Prevent blue borders in IE (not only does it look ugly, but it messes up spacing which breaks the "slider" type */
.plusslider-pagination { position: absolute; left: 0; bottom: 0; }
.plusslider-pagination li { float: left; list-style: none; margin-left: 5px; }
#slider3 {margin: 0; padding: 0;}
You have (in FF) exactly 17px extra width that is exactly the width of the browser scrollbar.
Your starting (initial) loading black screen (that animates) leaves a glitch of 17px:
cause it's animation maintains the DOM width that equals the screen width without the right scrollbar (100% screen width).
After the page is fully loaded and the scrollbar is added to the page, it actually adds the extra 17px (to the 100%) width that were maintained by the Loading animation.
Hope I put you in the right direction.
By the way, try to add:
html {
overflow-y: scroll;
}
and - if still needed - adjust the loading element width as I mentioned before.
Add this:
body{
overflow-x: hidden;
}
Problem solved. (temporarily)
So where is the problem?
It is at your <div> with the classes plusslider slider3 plustype-slider. You are constantly setting an incorrect width to it. You have to subtract the scrollbar width.
You can also try to do this: Padding: 0px(or whatever) 17px; and margin: 0px(or whatever) -17px; now your whitespace at the sides are gone.