So I have a html page and a fixed image as my header but i want to also have a fixed navbar right underneath where i can have buttons that link to another page on my server
here is my code
<!DOCTYPE HTML PUBLIC>
<title>Equinox Web Chatroom Server</title>
<style type="text/css">
body{
margin:0;
padding:header-<length> 0 0;
}
div#header{
position:absolute;
top:0;
left:0;
width:500%;
height:header-<length>;
}
#media screen{
body>div#header{
position:fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
</style>
<div
id="header"><img src="http://192.168.0.143/images/header.png" width="1700" height="46" alt="logo"<br>
<p>
<table>
<tr>
<td bgcolor= "black">Server Index Chat Room</td>
</tr>
</table>
</p><br>
</div>
If you want to fix elements in place in relation to the viewport, then the CSS position: fixed property is the right way to go.
This might be what you're trying to do: http://jsfiddle.net/hh1kuxyh/
As you scroll up and down you'll notice the header and navigation bar stay in place.
HTML
<div id="container">
<div id="header"><h2>HEADER IMAGE</h2></div>
<div id="navbar"><span>NAVIGATION MENU</span></div>
</div>
<div id="main-content">
<p>lots of text here</p>
</div><!-- end #main-content -->
CSS
* {
margin: 0;
padding: 0;
}
#container {
width: 98%;
height: 230px;
position: fixed;
top: 0;
}
#header {
height: 150px;
background-color: chartreuse;
text-align: center;
}
#header h2 {
padding-top: 25px;
}
#navbar {
height: 75px;
background-color: #aaa;
text-align: center;
border: 2px solid black;
}
#navbar span {
line-height: 75px;
font-weight: bold;
}
#main-content {
margin-top: 235px;
}
If you want to fix an element in place in relation to another element, then you may need to use a bit of jQuery. http://jsfiddle.net/8086p69z/8/
Also see my two answers here:
Position fixed within container element instead of the browser / viewport
Lastly, I tried to work with your code but it contained many errors. For example, your code block is missing the <html>, <body> and <head> elements.
Always run your code through the W3C Mark-Up Validation Service to check for errors and standards compliance.
Hope this helps. Good luck!
Related
I want to place an element to its parent bottom. I can't set its position: absolute and bottom: 0 because my parent div may be scrolled(overview-y) by zooming or in smaller displays. I want the element to be stuck at the bottom of the parent if the parent other elements do not exceed the widow height, otherwise this child be the last in scrolling.
how is that possible? should I use js or is there anyway to do it by css?
tnx
You can use a child content container with min-height set to match the parent's height. Put enough padding on the bottom of the content element for your footer and use position:absolute to attach your footer to the bottom.
See the snippet below.
$('.toggle').on('click', function() {
$('.grey').toggleClass('big');
});
.parent {
border: 1px solid black;
overflow: auto;
height: 400px;
}
.content .grey {
height: 40px;
margin-bottom: 5px;
background: grey;
}
.content .grey.big {
height: 80px;
margin-bottom: 5px;
background: grey;
}
.content footer {
height: 40px;
background: orange;
position: absolute;
bottom: 5px;
left: 5px;
right: 5px;
}
.content {
position: relative;
min-height: 100%;
box-sizing: border-box;
padding: 5px 5px 45px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<button class="toggle">Toggle</button>
</p>
<div class="parent">
<div class="content">
<div class="grey"></div>
<div class="grey"></div>
<div class="grey"></div>
<div class="grey"></div>
<div class="grey"></div>
<div class="grey"></div>
<footer></footer>
</div>
</div>
hope this will help
/**
* Demo Styles
*/
html {
height: 100%;
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
min-height:1000px;
}
.demo h1 {
margin-top: 0;
}
/**
* Footer Styles
*/
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
<div class="demo">
<h1>CSS “Always on the bottom” Footer</h1>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>
<p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
</div>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
I used the following
<body topmargin="0" leftmargin="0" rightmargin="0">
which works only on IE6. I want it to work with firefox and opera.
I attempted the following:
<style type="text/css">
.header {
width: 100%;
background-color: #3B5998;
height: 35px;
margin-top:0;
}
.style1 {
margin-right: 38px;
}
.style2 {
width: 100%;
background-color: #3B5998;
height: 35px;
}
</style>
<div dir="rtl" class="style2" style="width: 100%">
<p align="center"style="width: 92px; height: 32px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #EFF1F6;" class="style1"></p>
</div>
</body>
For start you can use:
<body style="margin:0;padding:0">
Once you study a bit about css, you can change it to:
body {margin:0;padding:0}
in your stylesheet.
Html for content, CSS for style
<body style='margin-top:0;margin-left:0;margin-right:0;'>
Yeah a CSS primer will not hurt here so you can do two things:
1 - within the tags of your html you can open a style tag like this:
<style type="text/css">
body {
margin: 0px;
}
/*
* this is the same as writing
* body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}
* I'm adding px here for clarity sake but the unit is not really needed if you have 0
* look into em, pt and % for other unit types
* the rules are always clockwise: top, right, bottom, left
*/
</style>
2- the above though will only work on the page you have this code embeded, so if if you wanted to reuse this in 10 files, then you will have to copy it over on all 10 files, and if you wanted to make a change let's say have a margin of 5px instead, you would have to open all those files and make the edit. That's why using an external style sheet is a golden rule in front end coding.
So save the body declaration in a separate file named style.css for example and from your add this to your html instead:
<link rel="stylesheet" type="text/css" href="style.css"/>
Now you can put this in the of all pages that will benefit from these styles and whenever needed to change them you will only need to do so in one place. Hope it helps. Cheers
I hope this will be helpful.. If I understood the problem
html{
background-color:green;
}
body {
position:relative;
left:200px;
background-color:red;
}
div{
position:relative;
left:100px;
width:100px;
height:100px;
background-color:blue;
}
http://jsfiddle.net/6M6ZQ/
<body topmargin="0" leftmargin="0" rightmargin="0">
I'm not sure where you read this, but this is the accepted way of setting CSS styles inline is:
<body style="margin-top: 0px; margin-left: 0px; margin-right: 0px;">
And with a stylesheet:
body
{
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
You need to use css. It's how modern web design gets things done.
This is a basic css walk through.
Your html file would be like:
(really simple html)
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
</body>
<html>
Your css file (mystyle.css) would look like:
body
{
margin-top:0px;
margin-left:0px;
margin-right:0px;
}
Try using CSS.
body {
margin: 0 0 auto 0;
}
The order is clockwise from the top, so top right bottom left.
I would say: (simple zero will work, 0px is a zero ;))
<body style="margin: 0;">
but maybe something overwrites your css. (assigns different style after you ;))
If you use Firefox - check out firebug plugin.
And in Chrome - just right-click on the page and chose "inspect element" in the menu. Find BODY in elements tree and check its properties.
the body element have below styles by default
body {
display: block;
margin: 8px;
}
body: focus {
outline: none;
}
we can override this using
1. inline styles
<body style="margin: 0;">
2. internal styling
<style>
body {
margin: 0;
}
</style>
In my case I have a popup "window" with a title and a close button which is controlled with some script. What I want to do is to put gallery of divs with left-float so when the screen resizes they will stacked accordingly (eg. in very small screens they will go just 1 under another) so that's why I think that float is the best option here.
I am not sure how to do it and I would like your help as I want it to be to the center covering a specific percentage of area (so it can be more responsive). I would like you to just tell me what steps I should follow.
I was thinking on making a custom class .gallery set float to left but I don't know how to set everything else in order to work nice.
HTML
<script> document.write('<div class="js">'); </script>
<nav><ul><li id="buttonc">click</li></ul></nav>
<div class="vidar-bg">
<div id="vidar">
<span>my divs×</span>
</div>
</div>
<script> document.write('</div>'); </script>
CSS
.js .vidar-bg{
position:fixed;
left:0;right:0;
top:0;bottom:0;
z-index:100;
background-color:rgba(50,50,50,0.5);
display:none;}
#vidar{
position:absolute;
top:50%;
left:50%;
z-index:101;
width:80%px;
height:80%px;
left:10%;right:10%;
top:10%;bottom:10%;}
#vidar span{
display: block;
background:#5DC3A7;
padding: 10px;
color: #fff !important;
background: #f00;
z-index:100;}
#closevid{
float: right;
color: #fff;
font-family: serif;
font-size: 18px;}
#closevid:hover{color: #000;}
Live code here: http://codepen.io/mariomez/pen/OPBVxY
thank you all in advance for your help :)
This CSS should do it:
.gallery-item {
width: 150px;
height: 150px;
background-color: #F00;
color: #FFF;
text-align: center;
font-size: 2em;
line-height: 150px;
margin: 5px;
float: left;
}
Then you just have to add the following HTML to your page:
<div id="gallery">
<div class="gallery-item">DIV</div>
</div>
Actually, most of the CSS properties are there just to create the red square with centered white text in the image you provided. To do what you want you just need the float: left property like you said yourself.
The page I have got is like this: .
I wanted to make it centralized but I couldnot do that.
The problems are:
I want to give black div full page.
I want to centralize other two divs without using left property in css.
While hovering the value of z should increase by any value so that the whole div can come up.
I learned about margin: 0 auto o auto; property that it centralizes the element with respect to page.
I want to get the same for yellow and green divs using margin property w.r.t. black divs.
Can I get these results using CSS or i will have to use Javascript etc?
My html code is here:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styling.css"/>
</head>
<body>
<div class="first">
<center> The first link </center>
</div>
<div class="second">
<center> The second link </center>
</div>
<div class="third">
<center> The third link </center>
</div>
</body>
<html>
My css document is:-
.first
{
position: absolute;
width:500px;
color:#fff;
height:200px;
background-color:#000;
z-index: 0;
margin:0 auto 0 auto;
}
.second
{
width:400px;
position: absolute;
height:200px;
background-color: green;
left:60px;
z-index: 1;
margin:50px auto 0 auto;
}
.third
{
position: absolute;
width:300px;
height: 200px;
left:100px;
background-color:yellow;
z-index: 2;
margin:100px auto 0 auto;
}
body div:first-child a:hover
{
font-size:30px;
color:yellow;
z-index:5;
}
body div +div a:hover
{
font-size:40px;
color:red;
z-index: 5;
}
body div+div+div a:hover
{
font-size:50px;
color:#fff;
z-index:5;
}
I apologize for my English.And hope you will get my problems.
I still believe that using left is the best way to solve your problem — not sure why OP wants to avoid it.
Here is the proof-of-concept fiddle: http://jsfiddle.net/teddyrised/YqDL5/
Instead, use the following trick: set their position from the left by 50% of the container's/parent's width. That's half correct. However, we also need to take into account the width of the element itself, which means we have to offset it backwards by half of its own width.
Use this:
.second, .third {
left: 50%;
transform: translateX(-50%);
}
There are also some changes you have to make to your HTML code:
I would suggest wrapping everything around a parent container that is relatively positioned, and instead of using margins to offset the second and third div from the top, use top instead.
Remove <center>. Delegate layout to CSS, and this HTML tag has been deprecated long time ago.
Here is the revised HTML:
<section>
<div class="first">The first link </div>
<div class="second"> The second link </div>
<div class="third"> The third link </div>
</section>
Also, I suggest setting the first div to relative positioning, so it will not cause the parent element's height to collapse. Otherwise, you will have to set an explicit height since absolute positioning takes elements out of the flow, and the parent will not take it into account when calculating its own dimensions.
section {
position: relative;
}
.first {
width:100%;
color:#fff;
height:200px;
background-color:#000;
}
.second, .third {
left: 50%;
transform: translateX(-50%);
}
.second
{
width:400px;
position: absolute;
height:200px;
background-color: green;
top: 50px;
z-index: 1;
}
.third {
position: absolute;
width:300px;
height: 200px;
top: 100px;
background-color:yellow;
z-index: 2;
}
See fiddle at: http://jsfiddle.net/teddyrised/YqDL5/
Hello Stack Overflow Community! I haven't really utilized this resource and basically learned how to work Google Apps Script from the ground up (with my very limited knowledge of scripting languages). I am having trouble with embedding jQuery into my Web App and I turn to the experts for help.
This is just a quick example I came up with to illustrate what I am trying to achieve. What I want is for the "container" div to have a dynamic height. That way, the whole screen is filled up, no matter what size it is (well, not a phone most likely). Here is the code:
Code.gs
function doGet(request) {
return HtmlService.createTemplateFromFile('app').evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
stylesheet.html
<style>
#main {
height: 100%;
width: 100%;
background-color: #DDD;
}
#header {
height: 100px;
width: 100%;
background-color: blue;
position: top;
}
#menu {
height: 50px;
width: 100%;
background-color: black;
position: top;
}
#container {
height: auto;
background-color: red;
margin-left: 15%;
margin-right: 15%;
}
#footer {
height: 50px;
width: 100%;
background-color: blue;
}
</style>
javascript.html
<script>
function adjust(){
var maxH = $("#main").height();
var afterHeight = maxH - ($("#header").height() - $("#menu").height() - $("#footer").height());
$(".kamil_test").css({height:afterHeight});
}
$(document).ready(adjust);
$(window).resize(adjust);
</script>
app.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js">
</script>
</head>
<body>
<?!= include('stylesheet.html'); ?>
<?!= include('javascript.html'); ?>
<div id="main">
<div id="header">
</div>
<div id="menu">
</div>
<div id="container">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
I think my post is too long, but I wanted to show what is going on from all four parts. Wanted to make sure I wasn't overlooking anything.
Just use this and adapt it to what you are trying to do.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Layout - 100% height</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#header p {
font-style:italic;
font-size:1.1em;
margin:0;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
div#footer p {
padding:1em;
margin:0;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>CSS layout: 100% height with header and footer</h1>
</div>
<div id="content">
<h2>Min-height</h2>
</div>
<div id="footer">
<p>
This footer is absolutely positioned to bottom:0; of #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport.
</p>
</div>
</div>
</body>
This is a simple one; it's fortunate that CSS has the ability to set a ceiling and a floor for the sizes of objects.
In your case, you want to set the floor (meaning the lowest possible value) of the height of your div to the height of the screen.
Answer:
min-height: 100%;
The div should already try to resize to allow it's contents to completely fit inside of it's volume. By adding this tag, the div will still resize OR if it's contents have a total height less than the height of the screen, the div will still remain the height of the screen.