Please help to fix this error Web with blank space at bottom
Link: http://www.khohanghoa.com
I spent all day time to search and try to fix.
I tried set CSS
body {
font-size: 100%;
margin: 0;
padding: 0 }
but, it did not change
So, please help me
Thanks so much!
please apply top:0px on this div tag.
<div id="fb-root"></div>
<div style="left: -9999px; position: absolute;">
change this to like.
<div id="fb-root"></div>
<div style="left: -9999px; position: absolute;top:0px;">
Change the body css to the below and the white spacing would go away.
body {
background-color: #CCCCCC;
height: 0;
}
Hope this helps.
Remove position:relative in foundation.css at line 384
Just edit the follwing css it works fine
media="all"
body {
background: white;
color: #777777;
padding: 0;
margin: 0;
font-family: "Helvetica", Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1;
position: relative; // delete this css
cursor: default;
}
Related
I'm a beginner web developer creating my first personal portfolio page. I'm trying to use this particle container as a sort of background hero "video."
Codepen.io - https://codepen.io/erikterwan/pen/VpjVvZ
HTML:
<div id="fps"></div>
CSS:
html, body {
margin: 0;
padding: 0;
}
#fps {
position: absolute;
bottom: 5px;
right: 5px;
font-family: sans-serif;
font-size: 12px;
text-transform: uppercase;
color: #fff;
color: rgba(255,255,255,0.5);
z-index: 2;
}
I'll omit the JS for now since it's pretty long, but it's there in the Codepen if you want to take a look (and see what the particle container actually looks like).
I've been trying to overlay an image and text over the container (like my picture with my name under it), but they either just go above or under it, or disappear entirely (I assumed behind it).
My HTML:
<div class="container-fluid">
<div id="fps"></div>
<div class="row">
<div class="col-lg-3 col-lg-offset-4">
<img id="profile-image" src="http://alloutput.com/wp-content/uploads/2013/11/black-circle-mask-to-fill-compass-outline.png">
</div>
</div>
My CSS:
html {
font-family: 'Raleway', sans-serif;
}
/* Navbar Stuff Here */
#fps {
color: #fff;
color: rgba(255,255,255,0.5);
z-index: 2;
}
#profile-image {
border-radius: 100%;
height: 150px;
background-color: yellow;
}
I haven't modified any of the JS.
Would really appreciate if anyone could give some insight or point me in the right direction to figure out this problem!
You just have to absolutely position your <div>:
.container-fluid{
z-index:1;
position: absolute;
}
I am trying to use this code to make a scrollable website but my <p> text won't show. Does anyone have any idea why? I have tried adding both the class as the item reference, but this is not really helping. the link is http://remcovanessen.users41.interdns.co.uk/beerbulance/ if that helps
<body data-hijacking="off" data-animation="scaleDown">
<section class="cd-section visible">
<div>
<h2 class="homepageheader">Beerbulance</h2>
<p> text</p>
</div>
</section>
cd-section {
height: 100vh;
}
.cd-section h2 {
line-height: 100vh;
text-align: center;
font-size: 2.4rem;
}
.cd-section h2.homepageheader{
font-size: 800%;
}
.cd-section:first-of-type > div {
background-color: #09c003;
}
.cd-section:first-of-type > div::before {
/* alert -> all scrolling effects are not visible on small devices */
content: 'Effects not visible on mobile!';
position: absolute;
width: 100%;
text-align: center;
top: 20px;
z-index: 2;
font-weight: bold;
font-size: 1.3rem;
text-transform: uppercase;
color: #09c003;
Because you set line-height: 100vh on .cd-section h2 element. It is currently taking the space of your viewport and pushing the p element below it. If you can't remove/change the line-height set your p element margin to :
p {
margin-top: -16px
}
This will show you the text at the bottom left.
It gets pushed out of the way from your h2 headline <h2 class="homepageheader">Beerbulance</h2>.
You need to re-think your HTML structure.
I have hover effects I am using that work great for desktop but need them to work on mobile devices as well. I tried to follow a Youtube video on adding iosTouch with mootools to allow a hover like effect for ios devices. I am doing something wrong in my code and can't get it to work. I added the mootools to my head. Here is the rest of my code.
<div class="page" id="resume">
<div class="container-fluid">
<h2>Resume</h2>
<div class="row">
<blockquote class="col-sm-6" id="qualifications">
<div class="quote">
<span class="intro" id="iosTouch">Qualifications</span>
<span class="more">
<ul>
<li>Excellent communication skills, both oral and written</li>
<li>Ability to quickly learn and apply new technologies</li>
<li>8 years of experience developing curriculum for instructor-led, web-based and blended modalities</li>
<li>2 years of experience creating HTML web pages including the testing and debugging of code</li>
</ul>
</span>
</div>
</blockquote>
</div><!--row-->
</div><!--content container-->
</div><!-- resume page -->
The JS I added is:
//fix hover events for ios
$("iosTouch").addEvents({
touchstart: function() {
$("iosTouch").addClass('more');
},
touchend: function() {
$("iosTouch").removeClass('more');
}
});
My CSS is:
#resume {
padding: 0;
border-top: 40px solid transparent;
}
#resume blockquote {
margin: 0;
padding: 0;
border-left: none;
min-height: 500px;
position: relative;
}
#resume blockquote .quote {
background-color: rgba(255,255,255,.8);
padding: 20px 5%;
position: absolute;
bottom: 0;
width: 75%;
font-weight: 400;
border-radius: 0 50px 0 0;
}
#resume blockquote .quote:hover {
background-color: rgba(255,199,96,.9);
}
#resume #qualifications {
background:url(../images/resume_qualifications.jpg) no-repeat center center;
background-size: cover;
}
#resume .quote .more {
opacity: 0;
font-size: 0;
line-height: 0;
padding-top: 10px;
}
#resume .quote:hover .more {
font-family: "Open Sans", sans-serif;
font-weight: 100;
display: block;
opacity: 1;
font-size: .8em;
line-height: 120%;
}
#resume .quote .intro::after {
content: '...';
}
#resume .quote:hover .intro::after {
content: '';
}
Any help you can provide is greatly appreciated
You're simply using the jQuery ($) function wrong. Replace $("iosTouch") with $("#iosTouch").
This is because jQuery attempts to emulate css selectors for getting DOM objects, and in CSS, # targets divs.
Without the # it implies that you want to perform the function on a tag called iosTouch.
I have a question in regards HTML I want my text to be in the middle of the image not outside of the image. It has to be inside the image in a specific X and Y position.
My code so far:
<center>
<div style='position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; overflow: show;'>
<div id='loadingtext' style='margin-top: 10px; color: #666; font-family: Arial; font-size: 12px; font-weight: bold;'>Loading Text..</div>
<img src='http://oi58.tinypic.com/2wmou89.jpg'>
</div>
</center>
<div style='-webkit-box-reflect: below -120px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.1, transparent), to(rgba(255, 255, 255, 1.0))); position: absolute; top: 90%; right: 0; bottom: 0; left: 5%; height: 100px; overflow: show; font-family: Arial; font-size: 24px; font-weight: bold; color: #888' id='files'>
</div>
</div>
I would like the text to be in the middle of the image so that people can see the loading text in the middle of the image.
1st: Please remove the keyword "javascript" and replace it by "css" ;)
2nd: The following is a most easy CSS solution. You would need another solution or javascript if the text cannot have a fixed width. But I would suggest to use a fixed width anyway because long lines are ugly.
Forget about the terrible z-index solutions. We do not need z-index. The order of the elements has the same purpose.
3rd: solution
<div style="position: absolute;">
<img src="http://oi58.tinypic.com/2wmou89.jpg">
<div id="loadingtext" style="position:absolute; top:50%; left:50%; color: #666; font-family: Arial; font-size: 12px; margin-top:-6px; width:128px; margin-left:-64px; font-weight: bold;">Loading Text..</div>
</div>
margin-top is 0-(font-size/2) and margin-left is 0-(width/2) ...
You just have to change the containing div's position from absolute to relative and set the div with the id=loadingtext to absolute , z-index and position it according to your needs (eg: left:50%; top:50%;) and the text will be on top of the image.
I'm going to apologize in advance for how basic this question is, but this is my first time using JavaScript in HTML.
Basically, I have a JavaScript that produces a different bit of random text every time a user loads the page. I'd like to format that text in Helvetica and then display it centred in the middle of the page. I'm attempting to do this with CSS as indicated below, but it is not working for me. Any suggestions much appreciated.
HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="horizon">
<div id="content">
<script type="text/javascript" src="scripts.js"></script>
</div>
</div>
</body>
CSS
#horizon {
color: white;
background-color: #ffffff;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content {
font-family: Helvetica, Geneva, Arial, sans-serif;
font-color: black;
background-color: white;
margin-left: -410px;
position: absolute;
top: -237px;
left: 50%;
width: 825px;
height: 475px;
visibility: visible
}
Well for starters, your missing your HTML tags.
You need to wrap your HTML code between HTML Tags.
Second, you will need to set your text to a different color as the background color. In your CSS, you will need to change the #horizon color to black, or something else.
Other than that, your code works.
try
#content
{
margin: auto;
width: 200px; /* however wide it should be (required) */
}
...
<div id="content">
stuff goes here from js / whatever
</div>
for vertical alignment you are looking at JS and not CSS.
How about using text-align: center?:
#content
{
font-family: Helvetica, Geneva, Arial, sans-serif;
font-color: black;
background-color: white;
text-align: center;
}