I need to get two HTML buttons horizontally with about 10/15 pixels space between them in the top right corner of the screen.
I tried many attempts but to no avail.
Can someone help?
Thanks
Um.. seems simple enough i guess..
div{float:right}
button{margin:15px;}
<div>
<button>button1</button>
<button>button2</button>
<div>
(second button covered buy the editor - ignore that)
HTML:
<button>Button</button>
<button>Another button</button>
CSS:
button{
width: 100px;
height: 20px;
display: block;
}
if you add display: block; to an element they will be placed below each other, adding margin-top: 15px; creates the space between them.
It is quite simple you just need a few css properties. I'll show you an example below.
<html>
<head>
<style>
#rightCorner {
position: fixed;
top: 0;
right: 0;
}
button {
margin:10px;
}
</style>
</head>
<body>
<p id="rightCorner">
<button>Button1</button>
<button>Button2</button>
</p>
</body>
</html>
Related
This has got to be simple but I can't see my mistake.
I have a div with an image inside it. The div has the style display:none. The div disappears, but the image stays put. Here's the plunk:
http://plnkr.co/edit/R3i7GZKOiiSvEj3vEuIE?p=preview
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#loading {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: white;
opacity:0.2;
filter:alpha(opacity=20); /* For IE8 and earlier */
overflow: hidden;
}
.centered {
position:absolute;
top: 50%;
left: 50%;
}
.hide {
display:none;
}
</style>
</head>
<body>
<div id="loading hide">
<img class="centered" src="http://www.woldsvets.co.uk/runnerapeman.gif" width="60px" border="0"/>
</div>
</body>
</html>
Why doesn't the image also get hidden when inside an hidden element?
Thanks!
You have the wrong HTML. It should be:
<div id="loading" class="hide">
In your CSS, you have rules for #loading and .hide. Your HTML, <div id="loading hide">, has an ID that's invalid because of the space. You probably meant to have the HTML I suggest above. plinkr example
Your .hide class should be either a class in the markup, or an ID in your css.
You have two ids. Either use classes or a single id
video.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="headerBar">
<div class="searchForm">
<form id="search" action="" method="get" target="_blank">
<input id="vb_yt_search-term" name="search_query" type="text" maxlength="128" />
<select name="search_type">
<option value="sAll">All</option>
</select>
<input type="submit" value="Search" />
</form>
</div>
</div>
</body>
</html>
style.css
.headerBar {
background-color: #f1f1f1;
width: 100%;
height: 44px;
border: 0px;
padding:0px;
margin:0px;
position:fixed;
top:0;
left:0;
}
.searchForm {
text-align: center;
border: 0px;
width: 100%;
vertical-align: middle;
position: relative;
}
Code:
Here is the code for you to try.
Question 1:
How can I vertically center the form (TextBox, ComboBox, and Button) in the headerBar using CSS? I want to stick with <div> instead of <table> if at all possible. I want it to be centered dynamically, so that if the page is re-sized, it will re-center... basically it can't be hard coded in with px.
Question 2:
How can I add more elements, once again using the <div> tags so that the items will not be centered, but approximately 1/4 and 3/4 respectively. To give you an example, the top bar in the image is YouTube.com. The Second, is my code. I would like to place objects where the YouTube logo is.
Question 3: (bonus)
This is not important, only an extra. In the picture shown above, is it possible to get the exact search bar and search button onto my form, but allow it to have what ever functionality I want?
Question #1:
Remove height from div.headerBar, this way it will size up with the inputs.
If you want a height, then don't use height. Use line-height:
div.headerBar { line-height: 44px; }
Question #2:
<div class="wrap">
<div class="left"></div>
<div class="mid"></div>
<div class="right"></div>
<div class="clear" />
</div>
.wrap { width: 100%; }
.left { float: left; width: 25%; }
.mid { float:left; width: 50%; }
.right { float:left; width: 24%; }
.clear { clear: both; }
Check fiddle: http://jsfiddle.net/WHXnW/2/
Updated fiddle: http://jsfiddle.net/WHXnW/4/
Now this is closer to what you want. Just play around with the styles to get it just the way you want.
I dont really understand how is possible that a
<div style="clear:both"></div>
doesn't work in Chrome. I have this layout:
<div id="header">...</div>
<div id="content">
<div id="col1">...</div> <!-- float left -->
<div id="col2">...</div> <!-- float left -->
<div id="col3">...</div> <!-- float left -->
<div style="clear:both"></div> <!-- DOES NOT WORK -->
</div>
<div style="clear:both"></div> <!-- DOES NOT WORK -->
<div id="footer">...</div>
So, I've used the clear:both before the footer and/or after the col3.
It does not work either in IE7 but, in this moment I dont really care.
Can anyone help me please?
I Add more informations:
#content {
padding-top: 19px;
display: block;
}
#col1,
#col3 {
width: 21%;
position: relative;
padding: 0 0 1em 0;
float: left;
}
#col2 {
width: 58%;
position: relative;
padding: 0 0 1em 0;
float: left;
}
SOLVED: Im sorry.... the information i gave you still were not enough! The problem was the content of a column!! In col1 i had a div with height:40px so even if the content was much more than 40px, for the browser it was like there was no overflow...
Hope i ve been clear in the explanation..
However the Tom Sarduy's solution is interesting but doesnot work in IE... ive tried yesterday and today, but it's like the style is not taken... i see it in the developer tool of the browser but it is not applied
It actually works. You are just not using it properly.
If you use clear:both the following element will be effected only. So for instance,
floated left | floated left | clear: both;
floated left | clear: left;
floated left | cleawr: right; | floated: left
Imagine that each text between "|" is a block element. If you float the elements and use the clear like the example above, the code should display something like above.
Check here for a live example: Try removing the clear attribute and you will see how the browser places "DOES NOT WORK".
http://jsfiddle.net/6VjSL/
clear:both works just fine in Chrome/IE7. See this example of how to properly use it. http://jsfiddle.net/turiyag/LvMRY/2/
Can you post a link to your site, or your full actual code?
CSS:
div {
border: 1px solid black;
}
.floaty {
height: 50px;
width: 50px;
float: left;
background: green;
}
.cleary {
height: 100px;
width: 200px;
clear: both;
background: cyan;
}
HTML
<html>
<head>
</head>
<body>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="cleary">Cleary</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
</body>
</html>
use clear:none; in the css property. It will work in chrome
Is better for semantic to use a class for this things. The correct way to go is:
HTML
<div id="header">...</div>
<div id="content" class="clearfix">
<div id="col1">...</div> <--- float left
<div id="col2">...</div> <--- float left
<div id="col3">...</div> <--- float left
<div class="clearfix"></div> <--- DOES NOT WORK
</div>
<div id="footer">...</div>
CSS:
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
Yes it’s ugly, but it works very well, enabling designers to clear floats without hiding overflow and setting a width or floating (nearly) everything to get the job done.
Then it does not work anywhere ? :o)
You are probably applying the float:left to the clear:both divs too...
this works in all browsers:
http://jsfiddle.net/kKwkd/
HTML
<div id="header">aaaaaaaaaaaaaaaaaa</div>
<div id="content">
<div id="col1">bbb</div> <!-- float left -->
<div id="col2">ccc</div> <!-- float left -->
<div id="col3">ddd</div> <!-- float left -->
<div style="clear:both"></div> <!-- DOES NOT WORK -->
</div>
<div style="clear:both"></div> <!-- DOES NOT WORK -->
<div id="footer">xxxxxxxxxxxxx</div>
CSS
#header, #footer{
border: 1px dashed blue;
}
#col1,#col2,#col3{
float: left;
border: 1px solid red;
padding: 50px;
margin: 10px;
}
the information i gave you still were not enough! The problem was the content of a column!! In col1 i had a div with height:40px so even if the content was much more than 40px, for the browser it was like there was no overflow... Hope i ve been clear in the explanation.. However the Tom Sarduy's solution is interesting but doesnot work in IE... ive tried yesterday and today, but it's like the style is not taken... i see it in the developer tool of the browser but it is not applied
I need a way to make a div repeat a certain number (36) of times vertically, with 1px of space between each one. The divs are absolutely positioned, so styling each one individually would be a ton of CSS.
I don't mind putting 36 divs into the HTML directly, although I'd prefer not to, but styling each one would be inefficient.
How about nest them?
you can nest them with relative positioning or maybe some margin: http://jsfiddle.net/zWbUu/
HTML
div id="container">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square"></div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#container {
position: absolute;
top: -21px;
left: 20px;
}
.square {
background-color: #666;
width: 20px;
height: 20px;
position: relative;
top: 21px;
}
If you need some content int them, you can use a nested absolute positioned div or this trick: http://jsfiddle.net/zWbUu/1/
HTML:
<div id="container">1 (doesn't apear)
<div class="square">2
<div class="square">3
<div class="square">4
<div class="square">5
<div class="square">6
<div class="square">7</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#container {
position: absolute;
top: -20px;
left: 20px;
}
.square {
background-color: #666;
width: 20px;
height: 20px;
line-height: 20px;
position: relative;
top: 1px;
color: #fff;
text-align: center;
}
As others have said, you cannot do this using pure HTML or CSS.
If you wanted to do it with PHP, you could do something like this:
Say that your div has a class called "mydiv."
This class should have
Position:absolute Height:10px Width:10px Border-radius:4px
just like you said. In addition to those, add a 1px top margin.
Your CSS should now look kinda like this:
.mydiv {
position:absolute;
height:10px;
width:10px;
border-radius:4px;
margin-top:1px;
}
To make your div repeat, put some code like the following inside your HTML where you want it to go.
<?php
for ($i = 1; $i <= 36; $i++) {
echo "<div class='mydiv'>your div</div>";
}
?>
Like I said, this uses PHP. If you've never used PHP before, then you should check if your webserver supports it. See this for a bit more info on using PHP inside HTML:
http://www.ntchosting.com/php/php-in-html.html
This code probably isn't perfect but I'm sure you'll be able to work with it.
This is not possible with absolute positioning, because as you stated with absolute positioning you must define the coordinates of the objective as it is taken out of the document flow.
You can do this with floats however. Take the following code for example:
<!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>Untitled Document</title>
<style type="text/css">
body{
background-color:#000;
padding: 0;
margin: 0;
}
#holder{
width:15px;
margin: 30px auto;
padding: 1px 1px 0 1px;
clear: both;
}
.box{
width:10px;
height:10px;
margin-bottom: 1px;
background-color: #3F6;
float:left;
}
</style>
</head>
<body>
<div id="holder">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
</html>
By making the holder div less than the width of two box divs you force the next box div to appear on a newline below the previous one without giving it an exact positioning value. Then just give it a margin to add the spacing.
The only way you can do this with one div would be to create an image of what the current div looks like, with 1px of whitespace. This way, you can create a fixed width/height div that has the background of the image set to repeat. This will give the illusion you want with only one div.
Otherwise, as already stated, you will need x amount of divs to get the repetition you need. This can be easily achieved using jQuery or something similar but if you really only want one div, then the background-image may be the way to go.
Before I start, I know there are a lot of questions on here related to this, but I feel like the answers are seriously lacking. They at least aren't making sense to me, or they don't accomplish what I want. If you know of question with a solid solution that this duplicates, I simply missed it; I will delete this one.
If I have the following HTML...
<body>
<div id="header"></div>
<div id="content"></div>
</body>
How, in simple terms, can I make the header take up 50px of the view port's height and make the content portion fill the rest of the view port's height with no scrollbar? Ideally this would work in IE6 and without tables. Thanks!
this seems to work for me:
<html>
<body>
<div style="height:60px; position:fixed; width:100%;"></div>
<div style="height:100%; width:100%;">
<p style="padding-top:60px;">hola</p>
</div>
</body>
</html>
Not sure if this is what you need but it will result in #content taking up all the viewport and #header is contained within that, then any content you wanted to put in #content will appear after header.
<html>
<head>
<title>Test</title>
<style type="text/css">
body,
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
#header {
height: 50px;
background: green;
width: 100%;
}
#content {
background: blue;
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
</style>
</head>
<body>
<div id="content">
<div id="header">I am the header</div>
<p>first bit of content</p>
</div>
</body>
</html>
height:auto !important; height:100%; bit is for IE 6, you'd ideally do than in a style sheet directed at IE 6 only using IE condition comments.