I use CSS style "position:fixed" in jqmobi, but it dosen't works!
<html>
<body>
<div id="afui">
<div id="header">Test</div>
<div id="content">
<div id="index" class="panel">
<div style="position:fixed;">It dosen't works!</div>
</div>
</div>
<div id="navbar"></div>
</div>
</body>
</html>
Somebody help me? Thanks!
Related
i have to make a site for my computer sience class in high school. I have very little experience with html and coding in general. I was wondering if anybody can tell me how to add a simple messagebox to my site that answers custom questions (there are only a few questions i want to be able to ask the messagebox)
help would be greatly appreciated. or if its possible to make a messabox out of the search thing i have made so far.
this is my html code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<li>
start page
</li>
<li>
go to bottom
</li>
</ul>
</nav>
<header>
<div class="bg">
<div class="content">
<div class="kolom">
<div class="atas">
<img src="IMG/planet2.png">
</div>
<div class="tengah">
<h2>Planets</h2>
</div>
<div class="bawah">
<p>Most of the exoplanets discovered so far are in a relatively small region of our galaxy, the Milky Way. We know from NASA's Kepler Space Telescope that there are more planets than stars in the galaxy. </p>
</div>
</div>
<div class="kolom">
<div class="atas">
<img src="IMG/planet2.png">
</div>
<div class="tengah">
<h2>Andromeda</h2>
</div>
<div class="bawah"></div>
</div>
<div class="kolom">
<div class="atas">
<img src="IMG/planet2.png">
</div>
<div class="tengah">
<h2>Extra</h2>
</div>
<div class="bawah"></div>
</div>
</div>
</div>
</header>
<footer>
<div class="bgf">
<div class="contentf">
<form action="home.html">
<input type="search" placeholder="ask a question..">
</form>
</div>
</div>
</footer>
</body>
</html>
I am new to web development and i am using pre-built template and the below code is showing like the blow image and I am trying to replace it but not able to do. how to replace the background image
<section id="cta" class="section">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-12 align-self-center">
<h2>BLOGGER</h2>
</div>
</div>
</div>
</section>
This might help you :)
<html>
<head>
<style>
#cta{
background-image:url("Here input your image path..");
}
</style>
</head>
<body>
<section id="cta" class="section">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-12 align-self-center">
<h2>BLOGGER</h2> <!-- you can just remove it..Since this is not background image but a heading-->
</div>
</div>
</div>
</section>
</body>
</html>
the background is set in css. need to know your css. you can try to overwrite the background .
.row {
background-image: url(image.jpg);
background-color: #c7b39b;
}
I have this html structure :
<div class="wrapper2">
<div class="previewContainer2">
<div id="previewGroup">
<div id="filePreview">
<div id="icon">
<div id="whiteSheet"/>
<div id="extension">EXT</div>
</div>
</div>
<img id="thumbnail" src="assets/indesign.svg" />
<div id="fileName">aaa</div>
</div>
</div>
<div class="metadataContainer2">
</div>
</div>
But then once loaded in electron, the last div (.metadataContainer2) is moved inside the .previewContainer2 div :\
<div class="wrapper2">
<div class="previewContainer2">
<div id="previewGroup">
<div id="filePreview">
<div id="icon">
<div id="whiteSheet">
<div id="extension">EXT</div>
</div>
</div>
<img id="thumbnail" src="assets/indesign.svg">
<div id="fileName">aaa</div>
</div>
</div>
<div class="metadataContainer2">
<p>ncndnlkcd</p>
</div>
</div>
</div>
Did I do something wrong ?
If you follow the HTML5 rules a div tag can not be self closed. Check more on this site
So modify your original code line#6 to mentioned below.
<div id="whiteSheet"></div>
I have a classic bootstrap template, like this:
<div class="container">
<div class="row">
<div class="col-12">
...header...
<div class="carouselContainer">
...carousel...
</div>
...content...
</div>
</div>
</div>
and now my website looks like this (H - header, S - slider, C - content, F - footer, with margin: auto):
I want to (visually, using CSS) pull out slider from div.row and div.col-12, like this.
I have tried using position:absolute, but after that, part of content is hidden under slider, plus I want to keep everything safe on different screen resolutions (not using pixels, and maybe on smallest screens carousel will be hidden).
does anyone have an idea how to do it? (I'm sorry if I complicated.)
Try simply stacking different .containers, like this...
<div class="container">
<div class="row">
<div class="col-12">
...header...
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="carouselContainer">
...carousel...
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
...content...
</div>
</div>
</div>
You shouldn't nest .container's but you can stack them! In this case container-fluid will go full width. the others won't.
Why not change the HTML structure and use a container-fluid to wrap your slider.
It would be better ( imho ) to use HTML tags for elements like <header> <main> <footer>
So a structure would be
<header>
<div class="container">
<nav>
Nav here
</nav>
</div>
</header>
<main>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="slider">
Slider Here
</div>
</div>
</div>
</div>
<div class="container content">
<div class="row">
<div class="col-12">
Content Here
</div>
</div>
</div>
</main>
<footer>
Footer Here
</footer>
I have a site I designed and coded that seems to cut off top and bottom on very specific devices that have short screens AND WILL NOT SCROLL. Any ideas on that I can do to keep the picture centered in the browser without any overlapping
Here's a link to jsfiddle:
https://jsfiddle.net/SCATORY/mjyssu7y/
<body>
<div id="container">
<div class="container">
<div class="nav">
<div class="logo"></div>
</div>
</div>
<div class="container holder">
<div class="center">
<div class="height">
<h1>Practice yoga. <br>In hypo-microbial style.</h1>
</div>
<div class="bag">
</div>
<div class="height-2">
<h2>Introducing ThePureBag™.<br>
The germ-resistant way to carry your yoga gear in style.</h2>
<div class="margin">
<button class="contact">Contact Us</button>
</div>
</div>
</div>
</div>
</div>
<div id="grey">
</div>
</body>
Take the position:fixed off of the #container and take the position:absolute off of the .holder. This should make it work.
Position:fixed means that the element won't scroll.