Hihi, I am trying to create a slide down menu using DIV, but hit a problem that I can't really figure out how to overcome. Let's take a look at the code below:
<!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>
<title>test</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#menu").click(function () {
$('#menuItem').slideDown('slow');
});
});
</script>
</head>
<body>
<div style="width: 500px; margin: 0px auto; padding: 10px;">
<div id="menuItem" style="border: 1px solid blue; position: relative; z-index: 10; float: right; display: none; cursor: pointer;">
MenuItem1<br />
MenuItem2<br />
MenuItem3<br />
MenuItem4<br />
MenuItem5<br />
MenuItem6<br />
MenuItem7
</div>
<div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
My Menu
</div>
</div>
<div style="margin: 50px 0px; padding: 0px; text-align: center;">
<div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
<div style=" position: relative; z-index: 1; float: right;">Form Element</div>
</div>
</div>
</body>
</html>
All I want to achieve is to make my slide down menu stay on top of my form element div. Please advice how can this be done. Many thanks!
:)
Quick and dirty: I added an absolutely-positioned outer containing for the menu, and then applied top:40px to the content div to push it down to compensate for the height of the menu.
<div style="position:absolute;width:100%;">
<div style="width: 500px; margin: 0px auto; padding: 10px; ">
<div id="menuItem" style="border: 1px solid blue; position: relative; z-index: 10; float: right; display: none; cursor: pointer;">
MenuItem1<br />
MenuItem2<br />
MenuItem3<br />
MenuItem4<br />
MenuItem5<br />
MenuItem6<br />
MenuItem7
</div>
<div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
My Menu
</div>
</div>
</div>
<div style="margin: 50px 0px; padding: 0px; text-align: center; position:relative; top:40px; ">
<div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
<div style=" clear:both; z-index: 1; float: right;">Form Element</div>
</div>
</div>
</body>
</html>
As I type this, dotty's already answered before me with a pretty much identical approach. However, in the code above, the individual menu divs are properly floating next to each other as you want them to, as they do in the first code you posted in the question.
There are probably some div and styling elements that are a little redundant there now.
Edit: It does occur to me now that the operation of the menu in dotty's code is actually probably how you intended for the menu to be.
Put the #menuItem div inside the #menu div, and set the #menuItem div's position to absolute and remove it's float.
<!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>
<title>test</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#menu").click(function () {
$('#menuItem').slideDown('slow');
});
});
</script>
</head>
<body>
<div style="width: 500px; margin: 0px auto; padding: 10px;">
<div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
My Menu
<div id="menuItem" style="border: 1px solid blue; position: absolute; z-index: 10; display: none; cursor: pointer;">
MenuItem1<br />
MenuItem2<br />
MenuItem3<br />
MenuItem4<br />
MenuItem5<br />
MenuItem6<br />
MenuItem7
</div>
</div>
</div>
<div style="margin: 50px 0px; padding: 0px; text-align: center;">
<div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
<div style=" position: relative; z-index: 1; float: right;">Form Element</div>
</div>
</div>
</body>
</html>
Related
I am trying to have a background box behind my text and I cant get it to work. I have done this before and it worked fine, but I can't see where I have gone wrong this time. I have checked to make sure I have linked the CSS to the HTML correctly by changing the background-color, which worked.
HTML:
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="SiteIcon.ico">
<title>Navigation</title>
<link rel="stylesheet" href="CSS/style for SubNav.css">
</head>
<body>
<h2><center><font color="orange" size="7">Navigation</font></center></h2>
<center>
<div id="1">The Online World</div>
<div id="2"><p>Animation</p></div>
<div id="3"><p>Creating an app</p></div>
<div id="4"><p>Mini Game</p></div>
<div id="5"><p>Gallery</p></div>
<div id="6"><p>Be Creative</p></div>
<div id="7"><p>About me</p></div>
</center>
</body>
</html>
CSS:
body {
color: black;
background-color: black;
margin: 0;
}
#1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
The problem is not with the HTML / element ID - browsers have supported the "lenient" ID for a long time, which is why it is part of HTML5. While the HTML4 specification is different, if this was a major breaking change it wouldn't be in HTML5 - 'nough said.
The real issue the CSS selector, not the element ID. A CSS selector that begins with a number must have the number escaped.
That is, #1 is an invalid CSS selector while #\31 is valid - and matches elements with id=1.
This is a CSS parsing rule, for backwards compatibility now, and not an HTML or ID restriction. See CSS character escape sequences for gritties on escaping "odd" CSS selectors. Or see the w3c token/lexing train tracks. (For example, the selector to match id=1hello is #\31 hello, with the space - good grief!)
The corrected selector can be verified with this fiddle:
<div id=1>Hello world!</div>
#\31 {
color: blue;
font-size: 30px;
}
That being said, I avoid element IDs that are not trivial CSS selectors to avoid this extra work.
While ids can technically be numbers (in HTML5), it's got weird support in browsers because of backwards compatibility with the HTML4 spec.
ids should start with a letter for compatibility.
<div id="a1">The Online World</div>
and
#a1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
works as expected.
Element IDs can't start with numbers. As soon as you change that, everything is good: http://jsfiddle.net/gr5956br/
body {
color: black;
background-color: black;
margin: 0;
}
#a1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
<body>
<h2><center><font color="orange" size="7">Navigation</font></center></h2>
<center>
<div id="a1">The Online World</div>
<div id="a2"><p>Animation</p></div>
<div id="a3"><p>Creating an app</p></div>
<div id="a4"><p>Mini Game</p></div>
<div id="a5"><p>Gallery</p></div>
<div id="a6"><p>Be Creative</p></div>
<div id="a7"><p>About me</p></div>
</center>
</body>
Your original version with numbers (just so you can see that's the issue):
body {
color: black;
background-color: black;
margin: 0;
}
#1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
<body>
<h2><center><font color="orange" size="7">Navigation</font></center></h2>
<center>
<div id="a1">The Online World</div>
<div id="a2"><p>Animation</p></div>
<div id="a3"><p>Creating an app</p></div>
<div id="a4"><p>Mini Game</p></div>
<div id="a5"><p>Gallery</p></div>
<div id="a6"><p>Be Creative</p></div>
<div id="a7"><p>About me</p></div>
</center>
</body>
You can also style the div's for less markup. And then style each link as needed. http://codepen.io/dfrierson2/pen/RNoWZe
body {
color: #fff;
background-color: pink;
margin: 0;
}
div {
width: 7%;
background: #fff;
}
#1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="SiteIcon.ico">
<title>Navigation</title>
<link rel="stylesheet" href="CSS/style for SubNav.css">
</head>
<body>
<h2><center><font color="orange" size="7">Navigation</font></center></h2>
<center>
<div id="1">The Online World</div>
<div id="2"><p>Animation</p></div>
<div id="3"><p>Creating an app</p></div>
<div id="4"><p>Mini Game</p></div>
<div id="5"><p>Gallery</p></div>
<div id="6"><p>Be Creative</p></div>
<div id="7"><p>About me</p></div>
</center>
</body>
</html>
Do you mean something like this?
HTML
<body>
<h2><center><font color="orange" size="7">Navigation</font></center></h2>
<center>
<div class="background-box" >
<div id="One">The Online World</div>
<div id="2"><p>Animation</p></div>
<div id="3"><p>Creating an app</p></div>
<div id="4"><p>Mini Game</p></div>
<div id="5"><p>Gallery</p></div>
<div id="6"><p>Be Creative</p></div>
<div id="7"><p>About me</p></div>
</div>
</center>
</body
CSS
body {
color: black;
background-color: black;
margin: 0;
}
#One{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
You shouldnt use numerical numbers for ID's. Replace with characters and you will be fine.
Fiddle
I am trying to push the footer in to down when the content page height increase.but I am not able to do that. footer is always stick with side bar.because of this my content page overflow over the footer .
My css code is below:
#header
{
height: 150px;
background-color: #375BB0;
}
#nav
{
**strong text**height: 100%;
width: 231px;
float: left;
}
#nav2
{
height: 100%;
width: 250px;
float: right;
}
#content
{
height: 100%;
bottom: 0;
}
#footer
{
clear: both;
height: 50px;
background-color: #CCCCCC;
color: #333333;
text-align: center;
}
My markup code:
<body>
<form id="form1" runat="server">
<div>
<div id="header">
</div>
<div id="nav">
<table class="style1" style="width: 100%; position: static ;" >
</table>
</div>
<div id="nav2">
<table style="border: 1px solid #000066; width: 100%; position: static;background-color:#9DAFD8;" >
</table>
</div>
<div id="content">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer" style="clear: both; height:500px;" >
Copy rihgt # xyzoman.com
</div>
</div>
</form>
Please help me
Try this, I changed 2 things. First, you were making the height of elements at 100% to an element that was 100% to the page, so they would never line up unless the content was bigger than the page, and 2, I made the content display: inline block; so that your menus would be on either side and not just on teh side and then to wrap around the content, but you can change this back if you wanted.. But your main main main issue was the height 100% in the nav css tags!
Everything else stayed the same.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#header
{
height: 150px;
background-color: #375BB0;
}
#nav
{
width: 231px;
float: left;
}
#nav2
{
width: 250px;
float: right;
}
#content
{
display:inline-block;
height: 100%;
bottomL 0;
}
#footer {
display:block;
bottom: 0;
height: 50px;
background-color: #CCCCCC;
color: #333333;
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="header">
</div>
<div id="nav">
<table class="style1" style="width: 100%; position: static ;" >
<tr><td>Table</tr>
</table>
</div>
<div id="nav2">
<table style="border: 1px solid #000066; width: 100%; position: static;background-color:#9DAFD8;" >
<tr><td>Table</tr>
</table>
</div>
<div id="content">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer" style="clear: both; height:500px;" >
Copy rihgt # xyzoman.com
</div>
</div>
</form>
</body>
</html>
I am trying to reproduce a layout similar to Youtube to practice some of the things I've learned just recently. How can I reposition an embedded Youtube video?
I tried making a parent div for the embedded video with display: relative, but it's not budging.
http://jsfiddle.net/GztRt/
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="bluetube.css" /> <title> Webpage #3 </title>
</head>
<body>
<div id="header"> <!-- Top header with logo, search bar, upload button-->
<a href="http://www.youtube.com" id="logo">
<div id="blue"> Blue</div>
<div id="tube">Tube</div>
</a>
<form style="display: inline; width: 200px;" name="searchbar" action="searchinput.asp" method="get">
Search <input type="text" name="searchinput">
<input type="submit" value="Submit">
</form>
<a href"http://www.amazon.com" id="uploadparent">
<div id="upload">Upload</div>
</a>
</div>
<div id="videobox">
<object width="420" height="315">
<param name="movie" value="http://www.youtube.com/v/dQw4w9WgXcQ? hl=en_US&version=3"></param><param name="allowFullScreen" value="true">
</param><param name="allowscriptaccess" value="always">
</param><embed src="http://www.youtube.com/v/dQw4w9WgXcQ?hl=en_US&version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true">
</embed></object>
</div>
<div id="column_box_right"></div> <!-- Related Videos spans the Right side! -->
<div id="column_box_left>ddddddddddddddddddddddd</div> <!-- column spans the left side! -->
<div id="vidinfo"></div>
<div id="footer"></div>
CSS:
html body {
width: 100%;
}
#header {
height: 35px;
background-color: grey;
margin-top: -6px;
position: relative;
margin-left: -7px
overflow: auto;
min-width: 1000px;
}
#blue {
height: 35px;
width: 60px;
background-color: grey;
border-radius: 4px;
text-align: center;
color: blue;
display: inline-block;
font-size: 20px;
font-family: Verdana;
}
#logo {
float: left;
margin-right: 14%;
}
#tube {
height: 35px;
width: 60px;
background-color: blue;
border-radius: 4px;
text-align: center;
display: inline-block;
color: white;
font-size: 20px;
font-family: Verdana;
}
#upload {
height: 30px;
width: 100px;
}
You had an extra space in your #videobox div. Changing it from #video box to #videobox allowed the div to position correctly in your jsfiddle. I'm not sure if this is your issue on your site, but since most copy and paste, I figured I'd throw it out there.
This will move your videobox div where ever you want on the screen. This will move it to the center.
#videobox {
display: block;
height: 100%;
left: 25%;
position: absolute;
top: 25%;
width: 100%;
}
I have a complex image cutted up in alot of slice.
You can see http://jsfiddle.net/yefQR/
<!--Force IE6 into quirks mode with this comment tag-->
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page Title</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontentTop, #framecontentBottom{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 130px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#framecontentBottom{
top: auto;
bottom: 0;
height: 110px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#maincontent{
position: fixed;
top: 130px; /*Set top value to HeightOfTopFrameDiv*/
left: 0;
right: 0;
bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto;
background: #fff;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="framecontentTop">
<div class="innertube">
<div id="screenshot%20tsam%20900r2c2" style=" background-color: green;position:absolute; left:4px; top:6px; width:20px; height:68px; z-index:1; visibility:visible; ">
</div>
<div id="screenshot%20tsam%20900r2c3" style="background-color: yellow; position:absolute; left:24px; top:6px;width:47px; height:68px;z-index:2; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r2c4" style="background-color: red; position:absolute; left:71px; top:6px;width:165px; height:68px;z-index:3; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r2c5" style="background-color: black; position:absolute; left:236px; top:6px;width:62px; height:68px;z-index:4; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r2c6" style="background-color: pink; position:absolute; left:298px; top:6px;width:147px; height:68px;z-index:5; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r2c7" style="background-color: orange; position:absolute; left:445px; top:6px;width:311px; height:37px;z-index:6; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r2c9" style="background-color: cyan; position:absolute; left:756px; top:6px;width:108px; height:37px;z-index:7; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r2c11" style="background-color: white; position:absolute; left:864px; top:6px;width:27px; height:37px;z-index:8; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r3c7" style="background-color: DodgerBlue; position:absolute; left:445px; top:43px;width:8px; height:31px;z-index:9; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r3c8" style="background-color: Gold; position:absolute; left:453px; top:43px;width:355px; height:31px;z-index:10; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r3c10" style="background-color: LightCyan ; position:absolute; left:808px; top:43px;width:83px; height:31px;z-index:11; visibility:visible;"></div>
</div>
</div>
<div id="framecontentBottom">
<div class="innertube">
<h3>Sample text here</h3>
</div>
</div>
<div id="maincontent">
<div class="innertube">
<h1>Lorem</h1>
<p>
Lorem ipsum
</p>
<p style="text-align: center">Vestibulum </p>
</div>
</div>
</body>
</html>
Id like to make :
1) the header image autoexpanding using the repeated-y css property of DodgerBlue color and Orange div because thy are the only 2 part of image axpandible.
2) Is it possible to define a minimum size of header, and is possible to make the entire body minimum size based that size so the browser cant get smaller an if the window get smaller, scrollbar is show.
Yes, just use min-width in your css. You can also define a max-width if you need too.
This is a follow up to this question. I've tried to come up with a solution that allowed me to have in-line labels in a multi-column form, by reading some of the answers provided in the question mentioned above I realized that it was much more simpler than I originally had though, this is my prototype:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
._20 {
width: 16%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._30 {
width: 26%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
label {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
input {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
.box {
padding: 10px;
margin: 10px 0px;
background-color: #666;
}
.content {
background-color: #FFFFFF;
padding: 10px;
-moz-border-radius: 6px;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div class="_20">
<p><label>Name:</label></p>
</div>
<div class="_30">
<p><input type="text" id="" /></p>
</div>
<div class="_20">
<p><label>Email:</label></p>
</div>
<div class="_30">
<p><input type="text" id="" /></p>
</div>
</div>
</div>
</body>
</html>
In theory this seems to work, but in practice all I get is this very weird result (in FF 3.5.6):
If I drop the p tags around the labels and input the result changes a bit:
What's wrong? Is there any hack I'm supposed to make use of?
How can I place the labels / inputs inside the box like they are supposed to?
I appreciate all input, thanks.
Try this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
._20 {
width: 16%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._30 {
width: 26%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
label {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
input {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
.box {
padding: 10px;
margin: 10px 0px;
background-color: #666;
}
.content {
background-color: #FFFFFF;
padding: 10px;
-moz-border-radius: 6px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div class="_20">
<p><label>Name:</label></p>
</div>
<div class="_30">
<p><input type="text" id="" /></p>
</div>
<div class="_20">
<p><label>Email:</label></p>
</div>
<div class="_30">
<p><input type="text" id="" /></p>
</div>
</div>
</div>
</body>
</html>
BTW, Check this out: How to create perfect form Markup and style it with CSS
Here's one. The main thing is the clear:both; div at the bottom, but there are a few more things changed too.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
._20 {
width: 16%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._30 {
width: 26%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
label {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
input {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
.box {
padding: 10px;
background-color: #666;
}
.content {
background-color: #FFFFFF;
-moz-border-radius: 6px;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div class="_20">
<label>Name:</label>
</div>
<div class="_30">
<input type="text" id="" />
</div>
<div class="_20">
<label>Email:</label>
</div>
<div class="_30">
<input type="text" id="" />
</div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
first of all you need to reset the padding and margins on the <p> elements
p,label{
padding:0;
margin:0
}
secondly, you are floating elements inside a block element without clearing them later... hence the overflow issue... here is a working version of the code http://jsbin.com/eheva3
Note: I have used the clearit method which requires extra markup
You can use either that or the "clearfix" method... google for "clearfix" to find out more
You should start with the simplest possible implementation that works and build whatever fancy styling you want up from there. Getting rid of all the extraneous tags, all you really need is:
<div class="box">
<div class="content">
<label>Name:</label>
<input type="text" />
</div>
</div>
You don't need to add more divs and paragraphs to get it to snap to a grid, just style the elements that are already there.