Plenty of other things on the page are using the absolute positioning as well, but for some reason the "vote" and "profile" buttons are displaying several hundred pixels to the right and about fifty pixels up in Internet Explorer 9/10 (8- is not an issue here). There is no styling in the HTML, it's all right here. Anything that stands out? Thanks!
.contain{
margin-left:-65px;
margin-top:-85px;
position:absolute;
}
.video_display1{
background-color:#333;
width:250px;
height:200px;
margin-top:40px;
margin-left:88px;
display:inline;
}
.profile1{
width:49px;
height:12px;
margin-left:87px;
margin-top:3px;
position:absolute;
}
.vote1{
margin-top:3px;
margin-left:240px;
position:absolute;
}
.display_vote1{
margin-left:295px;
margin-top:2px;
font-size:11px;
position:absolute;
}
And here's the HTML:
<span class="contain">
<iframe class="video_display1" width="250" height="200" src=""> </span>
<span class="profile1"><img src=''/></span>
<span class="vote1"><input type="image" src=''/></span>
<span class="display_vote1"></span>
</span>
And the DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
You have not defined width and height of images, so to get fixed height & width define it first. And use display: inline-block; in your .contain then only you get what you want.
Related
Hello I am trying to get "Hello, World" in the dead centre of the page. It can be HTML or CSS I am a bit stuck on how to do it. Any help would be appreciated. So far I can get it centered at the top of the page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body bgcolor="white">
<p style="font-family:tahoma;color:black;font-size:12px;text-align:center;">Hello, World!</p>
</body>
</html>
Try:
html, body {
height:100%;
margin:0;
}
p {
position:absolute;
left:0;
right:0;
top:50%;
}
jsFiddle example
Live Demo
Not the perfect solution, but very close to it. This works only if the size of the text doesn't change.
p {
position: absolute;
top:50%;
left:50%;
margin-left:-20px;/*Half of the text width*/
margin-top:-5px;/*Half of the text height*/
}
Let me preface this question with the warning that I'm a self-taught (amateur) web developer (and not a very good one). I've been trying for a long time to find an effective way of centering web pages using AP Divs. I've tried setting "margin: 0 auto;" and I've tried setting "margin-left: auto;". Both work for that one div. But I then have to use that as a wrapper to design within, so when I put more divs inside that, they don't center.
I may be completely approaching this wrong; if so, please correct me. Code (not working) for a basic version of what I want to do is below. If you run that code, if I were to place, say, an image in apDiv1, it would scale to the page size fine; but the text in apDiv2 does not.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Page</title>
<style type="text/css">
#apDiv1 {
margin: 0 auto;
width:600px;
}
#apDiv2 {
position:absolute;
width:50px;
height:24px;
z-index:1;
left: 47px;
top: 29px;
}
</style>
</head>
<body>
<div id="apDiv1">
<div id="apDiv2">Hello</div>
</div>
</body>
</html>
I can center a div inside another div just fine using margin-left:auto; and margin-right:auto;:
Working example: http://jsfiddle.net/xjKhT/
In my own opinion, it is not good to use appdivs(coz it depends on how you positioned it on the design). You can do it(centering stuffs) on your own, check this:
Centering(Simple Sample)
<style>
#header {
margin:auto;
width:600px;
background:#000;
padding:5px;
}
#title {
width:50px;
margin:auto;
background:#CCC;
padding:5px;
}
</style>
<div id="header">
<div id="title">Hello World</div>
</div>
Custom AppDivs adds extra styles which is not really necessary:)
Updated example
Ok after some guessing and poking I think you mean that you want to absolutely position the elements inside the center-aligned wrapper.
position: absolute will be absolute to the page UNLESS the parent has position: relative.
#apDiv1 {
margin: 0 auto;
width:600px;
position:relative;
}
Can someone explain how to code the feedback button seen on foursquare.com? It's a vertical button on the side of the webpage and it opens a new window and dims out the background. I've seen this on some other sites as well. Thanks in advance.
How they did it...
The button is provided through the http://getsatisfaction.com service. This service is similar to other services like http://sharethis.com which exist to minimize the programming required to create a fully-rounded website. Essentially you setup an account (I'm assuming...) and they provide you with a javascript code-block that you include in your projects, which causes the vertical-button to appear on your site.
Do it yourself...
This wouldn't be that difficult the do yourself. I quickly worked up a jQuery example. Suppose we have the following markup:
<div id="feedback">
<p>Here is where you would have your form.</p>
<div class="toggler">?</div>
</div>
.toggler will be our button in this case. We'll want to place it outside of the feedback box with some css, and also place the feedback box with some css too:
#feedback { position:absolute; left:0; width:200px; padding:10px;
background:red; color:white; }
.toggler { width:25px; height:50%; color:white; background:blue;
text-align:center; position:absolute; top:25%;
right:-25px; cursor:pointer }
This could be cleaned up a bit. But now that we have our elements, we can add some toggle-logic with jQuery:
$(function(){
// When the user clicks on .toggler
$(".toggler").click(function(e){
// Get a reference to our feedback box
var feedback = $("#feedback");
// If it's in the process of being opened (or is opened)
if ( $(feedback).hasClass("opened") ) {
// Close it
$(feedback)
.removeClass("opened")
.animate({"left":0}, 1000);
} else {
// Else, Open it
$(feedback)
.addClass("opened")
.animate({"left":-$(feedback).outerWidth()}, 1000);
}
});
});
Online demo: http://jsbin.com/iyenu4
Have a look at jquery and the jquery UI javascript library for implementing those kinds of interavtive features.
Here is an example: http://wpaoli.building58.com/2009/08/jquery-animated-feedback-tab-thingy/
Looks like they're using the Lift modal dialog for the popup and background dimming.
The button is probably positioned using CSS fixed positioning. Fixed positioning means that it remains in the same place on the screen, not on the page. This allows it to 'float" over the text even when you scroll.
The popup dialogue is the same. Clicking on the button toggles the display CSS property between none and something other than none, probably block.
The gray background, I'd guess is created with a big fixed position <div> with width:100% and height:100% and some opacity.
Try this:
HTML
Save this as example.html:
<!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" lang="en" >
<head>
<title>Example</title>
<link rel="stylesheet" href="example.css" type="text/css" />
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<h1>Example</h1>
<a id="clickhere">Click here for the popup!</a>
<div id="main">
<p>
Lorem ipsum dolor sit amet
</p>
</div>
<form id="popup" class="dialog" action="#">
<div id="popupbackground"></div>
<div class="dialog">
<h2>Popup!</h2>
<a id="closepopup">Click here to close this dialog</a>
</div>
</form>
</body>
</html>
CSS
Save this as example.css:
html {
height:100%;
}
body {
height:100%;
}
form.dialog {
height:100%;
width:100%;
position:fixed;
top:0px;
left:0px;
text-align:center;
padding-top:10%;
display:none;
}
form.dialog div.dialog {
width:400px;
background-color:gray;
margin:auto;
text-align:left;
border:2px solid black;
padding:10px;
position:relative;
z-index:10;
}
form.dialog label {
display:block;
}
form.dialog input {
width:99%;
}
form.dialog textarea {
width:99%;
height:200px;
}
a {
cursor:pointer;
text-decoration:underline;
font-weight:bold;
}
#popup #popupbackground {
background:gray;
opacity:0.4;
filter:alpha(opacity=40);
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
}
JavaScript
Save this as example.js:
window.onload = function() {
document.getElementById("clickhere").onclick = function() {
document.getElementById("popup").style.display = "block";
};
document.getElementById("closepopup").onclick = function() {
document.getElementById("popup").style.display = "none";
};
};
The idea is that the <form> consumes the whole screen, because of the width
and height properties in the form.dialog rule. Since that rule also specifies a fixed position, the user can never scroll away from the contents of this <form>. We can then center the <div class="dialog"> using a margin:auto, so it floats, centered on the page. The <div id="popupbackground"></div> provides a faded gray backdrop.
can anyone help?
I have a problem aligning rounded corners in IE6/7. Basically everything seems to work in Firefox / IE8 but in IE6/7 the left / center / and right divs get misaligned.
This basically shows exactly what i am refering to.
here is the example in IE8 and everything works ok http://es.drop.io/ern0fye/asset/ie8-jpg
And here is the problem (this example is running in IE8 with compat mode set to IE7)
http://es.drop.io/ern0fye/asset/ie7-jpg
I seem to remember there being a bug in IE6/7 with lineheight or similar but i don't recall exactly.
I will paste the CSS and HTML below it is very very simple. Basically there is a left div that holds the left corner image and center div which has a background of RED which is the same as the corner images and finally a right div which holds the right corner image.
I would appreciate any input anyone has. Thanks in advance.
Here is the CSS
.vl-top-left
{
float:left;
width:12px;
height:12px;
}
.vl-top-center
{
float:left;
width: 485px;
background-color: #F04A23;
height:12px;
}
.vl-top-right
{
float:left;
height:12px;
width:12px;
}
and the HTML is :-
<!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" >
<head>
<title></title>
<link href="Stylesheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="vl-top-left">
<img src="content/images/esquina_sup_izq.gif" width="12" height="12">
</div>
<div class="vl-top-center">
</div>
<div class="vl-top-right">
<img src="content/images/esquina_sup_der.gif" width="12" height="12">
</div>
</body>
</html>
EDIT
Applied also margin:0 and padding:0 on the body and on each DIV but still the left and right div drops down as per the screenshot
Apply style img { float: left; }
So I have used - http://www.roundedcornr.com/ - to generate some rounded corners via CSS. Great - works fine, no probs.
However! I am now really stuck trying to do "hover" rounded corners. I basically got the generator to generate the corners in a lighter color (for the hover) and now have no idea how to implement the lighter hover ?
Does anyone know how to do this in CSS/HTML only ? It should be 100% possible I am just a little unsure.
I only gave the website a short peak and basically they provide you with a couple of PNGs. Not bad, however not the best solution in all cases. Since the current CSS standard doesn't support rounded corners and beside Firefox/Mozilla no one understands this:
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
I think you are stuck with only one option. Choose a constant height and width for your element and create ONE png out of it. You can than create something like this
span{
display:block;
width:100px; height:100px;
background-image:url("nice.png");
}
span:hover{
background-image:url("nice_hover.png");
}
Why do I think there is no other way? Because you only can effectively change the attributes of one element at a time with the "hover" effect. Hopefully CSS3 will give us rounded corners... However if you make use of JavaScript this is a completely different story..
Update
I thought about it and I probably flopped in presenting you all the available options. Here is a working solution for IE7+, FF, Opera that achieves exactly what you are looking for. Just replace the color with some background-image. Sorry!
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Floating</title>
<style type="text/css">
.content p{
position:relative;
height:100px;
width:400px;
border:1px solid black;
}
.content p span{
position:absolute;
}
.content p .span1{
left:0;
top:0;
}
.content p .span2{
right:0;
top:0;
}
.content p .span3{
left:0;
bottom:0;
}
.content p .span4{
right:0;
bottom:0;
}
.content p:hover .span1{
background-color:red;
}
.content p:hover .span2{
background-color:blue;
}
.content p:hover .span3{
background-color:green;
}
.content p:hover .span4{
background-color:yellow;
}
</style>
<body>
<div class="content">
<p>
<span class="span1">1</span>
<span class="span2">2</span>
<span class="span3">3</span>
<span class="span4">4</span>
</p>
</div>
</body>
</html>
I would recommend doing this in JavaScript, this will then allow for variable sized rounded corner boxes.