I have a case where when specifying a fluid margin-top like for instance 20% and when
I resize my browser window horizontally, the margin-top increases. This is a bit unexpected for me. I am looking for a quick fix for this ..
<html>
<head>
<title>Make yourself lucky</title>
<meta name="description" content="Make yourself lucky" />
<style type="text/css">
#slideshow {
float: left;
background-color: red;
width: 100px;
height: 100px;
margin-top: 20%;
}
</style>
</head>
<body>
<div id='wrapper'>
<div id='slideshow'>
slideshow
</div>
</div>
</body>
</html>
http://jsfiddle.net/eVfCc/
Try adding position:absolute to the same CSS.
Related
I am new to HTML , CSS and I want to add two vertical lines on the both sides (left and right) of the html page.
A bit of help would be very much appreciated...Thanks very much indeed
Edit: the code has now been added
<!doctype html>
<html lang="en">
<head>
<style>
#button1{
width: 300px;
height: 40px;
}
#button2{
width: 300px;
height: 40px;
}
#link1{
font-size: 33px;}
#pic1 {
position:fixed;
left:30%;
top:30%;
margin-left:-382px /*half the width*/
margin-top:-370px /*half the height*/
}
</style>
<meta charset="utf-8">
<meta name="Homepage" content="Starting page for the survey website ">
<title> Survey HomePage</title>
</head>
<body>
<img src="kingstonunilogo.jpg" alt="uni logo" style="width:180px;height:160px">
<button type="button home-button" id="button1" >Home</button>
<button type="button contact-button" id="button2">Contact Us</button>
LogIn
<img src="homepagepic.jpg" alt="homepagepic" id="pic1" style="width:400px;height:350px">
</body>
</html>
You can try creating a div container in your body and setting the borders, something along these lines:
<body style="width:100%">
//you can set the div-width to 100% too, I'm setting it to 95% so you can see it.//
<div style="width:95%;border-left:1px solid #000;border-right:1px solid #000;">
Page contents go here
</div>
</body>
Preview: http://jsfiddle.net/pbj4xxh0/
I am trying to center a div. This is my code:
<!Doctype Html>
<html>
<head>
<title>title</title>
<style type="text/css">
* {
text-align: left;
}
</style>
</head>
<body>
<div id="container" style="width: 500px; margin-left: auto; margin-right: auto; text-align: center;">
<div id="content" style="text-align: center;">
<p>Beispiel: DIV Container horizontal zentrieren.</p>
</div>
</div>
</body>
</html>
It isn't completely center, because I set in the CSS reset that text-align is left. If I remove this line everything is fine. Why is text-align: center; of the div with the id #content not overriding the CSS reset?
You need !important to overwrite that (leaving the p tag)
#content{margin:0 auto; background:red; width: 500px; text-align: center !important;}
DEMO 1
Or else you can write css for p tag
#content p{text-align: center }
DEMO 2
Try this
Key point is
margin: 0 auto
Even better, less markup:
<!Doctype Html>
<html>
<head>
<title>title</title>
<style type="text/css">
#content{
width: 500px;
margin:0 auto;
}
#content p {
text-align:center;
}
</style>
</head>
<body>
<div id="content">
<p>Beispiel: DIV Container horizontal zentrieren.</p>
</div>
</body>
</html>
In most cases it's better to prevent useing ìnline-styles`. Also move your styles in an seperate css file for a better maintainability.
In HTML * tag means its consider all tags strictly the property as you mention in between, you need to little change your style please visit link
The point is to have this video to always be 100% of the viewport width;
But to have the height just to a point where no scroll is needed.
Can this be achieved without using overflow:hidden; ?
You can copy paste the following as is.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello User!</title>
<style type="text/css">
div#video-border { border: 2px solid red; }
video { max-width: 100%; height: auto; width: 100%; }
</style>
</head>
<body>
<div>
<div>
Im the navigation!! Wupii
</div>
<div>
<p>I'm more text, more things</p>
<p>I'm more text, more things</p>
</div>
<div id="video-border">
<video controls="controls">
<source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" />
alt text
</video>
</div>
<div id="footer"><p>I'm the footer hello</p><p>I'm the footer yeah again</p></div>
</body>
</html>
To be honest, I'm not even sure if this solution will properly work. Not sure if the video will behave on those circumstances, still... wondering.
Please advice.
Agree with Patrick.
If you instead want to use it in a fixed, pre-calculated height box, use this:
div#video-border {
background-color: black;
border: 2px solid red;
}
video {
max-width: 100%;
width: 100%;
height: auto;
max-height: 150px; /* your desired height */
}
I'm trying to get the Google Map div fixed so it becomes always visible, but somehow the style property "position:fixed" is not working. The code is the following:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="layout" content="main" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
Some script
</script>
</head>
<body onload="initialize()">
<div class="nav">
First div
</div>
<div id="artistList">
Second div
</div>
<div id="map_canvas" style="position: fixed; right: 0px; top: 0px; width: 100%; height: 100%">
Map div
</div>
</body>
</html>
Any help? Thanks very much
This will solve it:
<div id="fixed" style="position:fixed; top:0">
<div id="map_canvas" style="width:100%; height:100%">
[map content goes here]
</div>
</div>
You should clean up your code a little to make things more visible. At first you should move the css style settings from your map_canvas into your css section in the html head. What remains is a clean <div id="map_canvas"></div>. Now let's head to your CSS section in the html head. Try it like this:
<style type="text/css">
html {}
body {margin: 0px; padding: 10px }
#map_canvas {
position: fixed;
right: 0;
top: 0;
width: 90%;
height: 90%;
border:1px solid #f00;
margin:10px;
}
</style>
I removed the height:100%; from html and body. I reduced to sizes of the canvas from 100% to 90% and gave it a red border and a margin of 10px to make things more clear. The div is set in the upper right corner now and is fixed. I tested it on FF, Chrome, Safari and IE.
But now one little question... Does it make sense to make the canvas 100% wide and high?! The map_canvas would hide everything else in your html...?
Najeeb's solution did not work for me.
Changing the map elements css (from position:absolute to position:fixed) after the "tilesloaded" map event seemed to work.
I wanted the footer on a mobile site I was working on to stick to the bottom of the page. I found the CSS Sticky Footer example by Ryan Fait and implemented it. On every browser I could conceivably test, I found the footer to stick nicely to the bottom.
And, then it happened. The clients complained about the footer throwing itself all over the place. On painfully requesting details, I found out that the problem occurred on only one model of BlackBerry mobile devices: the 8250 model. I pulled out a Windows VM, downloaded and installed the BlackBerry 8250 simulator, and sure enough, I saw the problem.
For a page the height of two BlackBerry screens, the footer sticks to the middle of the first screen, on top of everything else. The footer does not move as you scroll, and if you scroll down to the lower half of the page, the footer is not visible. It stays fixed to the middle of the top screen.
I will post the HTML and CSS to the end of this question. If I could get any pointers or clues as to why this is happening on the 8250 BlackBerry model, and not least, how it could be fixed, I would be very very grateful.
Thank you!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;"/>
<style type="text/css">
* { margin: 0; padding: 0; }
html { height: 100%; }
body { height: 100%; }
.page {
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.push {
height: 4em;
}
#footer {
clear: both;
position: relative;
z-index: 10;
height: 4em;
margin-top: -4em;
text-align: center;
}
</style>
</head>
<body>
<div class="page">
<!-- lots of other DIVs here for actual content -->
<div class="push"></div>
</div>
<div id="footer">
<!-- footer content over here -->
</div>
</body>
</html>
I found this jQuery Sticky Footer hack. I am not too sure of whether this is going to be something people would suggest I should go with. I've not tested it yet, though.
Update: This is a small update to say that I toyed with the jQuery Sticky Footer hack linked right above. It didn't work for the BlackBerry device mentioned, either.
After trying a couple of different things, I stumbled into the CSSStickyFooter solution. I implemented it and found it to work well on the Black Berry device in question, along with the rest of everything I have tested it on. I am going to paste the HTML and CSS code below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;"/>
<title>Another CSS Sticky Footer that works on Black Berry</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
.page {
width: 100%;
min-height: 100%;
}
.push {
padding-bottom: 4em;
overflow: auto;
}
#footer {
position: relative;
margin-top: -4em;
height: 4em;
clear: both;
background-color: red;
}
</style>
</head>
<body>
<div class="page">
<div id="content">
<p>Some body content will come here</p>
<p>And over here as well.</p>
</div>
<div class="push"></div>
</div>
<div id="footer">
<p>This is the footer block.</p>
</div>
</body>
</html>