I have a box that has another box in it, similar to a sidebar. However, whatever height I set for the sidebar box it won't go on top and merge with the other one. The only solution I found is to set a margin-top negative value but that won't really work as I would like to since I don't have a fixed height for .box_stanga. Please note that #recent_vizualizate is the name of the sidebar and .box_stanga is the name of its container box. Both are contained in the #wrapper. Here is the code:
.box_stanga
{
margin-top: 5%;
padding: 0px 0px 20px 0px;
border: 1px solid #333;
box-shadow: 0px 0px 5px 2px #999999;
border-radius: 0px 10px 10px 10px;
background-color:white;
width: 100%;
}
#recent_vizualizate
{
top: 0px;
float: right;
/*margin-left: 20%;*/
position:relative;
border: 1px solid #333;
box-shadow: 0px 0px 5px 2px #999999;
border-radius: 0px 10px 10px 0px;
width: 20%;
height: 100%;
margin-top: -600px;
}
#wrapper{width:1080px; margin:0 auto;}
Generated HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>RevelioninRomania.ro</title>
<link rel="shortcut icon" type="image/x-icon" href="images/animated_favicon1.gif">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="photo/css/ReMooz.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="photo/css/layout.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="photo/css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<script src="photo/scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="photo/scripts/mootools-1.2-more.js" type="text/javascript"></script>
<script src="photo/scripts/jd.gallery.js" type="text/javascript"></script>
</head>
<body>
<!-- Meniu -->
<tr><td style="vertical-align:top">
<ul class="menu">
<li><span><b>Cauta oferta</b></span></li>
<li><span><b>Adauga oferta</b></span></li>
<li><span><b>Contact</b></span></li>
</ul>
</tr></td>
<div id="wrapper">
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready',startGallery);
</script>
<br>
<div class="box_stanga">
<div id="myGallery">
<div class="imageElement">
<img src="photo/images/5207ffe15b8d8/1.jpg" style="width:480px; height:345px;" />
<img src="photo/images/5207ffe15b8d8/1-mini.jpg" class="thumbnail" />
</div>
</div>
<br/><br/><br/><br/><h1 >Lupul Vesel</h1><br/>Restaurant<br/>Judet: Gorj<br/>Localitate: Targu-Jiu<br/>Strada: <br/>Numar: 0<br/>Telefon: <br/>Fax: <br/>E-mail: <br/>Website: <br/> <br/><br/><div id='recent_vizualizate'><p class='center'>Recent vizualizate</p></div></div> <a href='javascript:history.back()'><img src='images/back.png' id='back'></a><br/> </div>
<div id="footer">
Acest site nu salveaza date de tip cookie in calculatorul dumneavoastra. Copyright © 2013 - 2013 RevelioninRomania.ro. Toate drepturile rezervate.
</div> </body>
</html>
The other divs that you're seeing are for the photo gallery, they don't affect the sidebar in any way.
Please let me know if you need anything alse or if I need to edit my post instead of downvoting. Thanks!
Try giving it a position of relative. Like so:
.box_stanga
{
margin-top: 5%;
padding: 0px 0px 20px 0px;
border: 1px solid #333;
box-shadow: 0px 0px 5px 2px #999999;
border-radius: 0px 10px 10px 10px;
background-color:white;
width: 100%;
}
#recent_vizualizate
{
top: -600px;
float: right;
/*margin-left: 20%;*/
position:relative;
border: 1px solid #333;
box-shadow: 0px 0px 5px 2px #999999;
border-radius: 0px 10px 10px 0px;
width: 20%;
height: 100%;
/* -- margin-top: -600px; -- Do Not Use */
position: relative;
}
#wrapper{width:1080px; margin:0 auto;}
I haven't tested that out, but let me know if that works for you. It would be best if you use 'px' for your height and width as well as for your margins.
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
Hover effect doesn't work. Here is the fiddle: http://jsfiddle.net/6WmnF/
I don't know why. When I remove hover and change the width attribute(as an example) it works. But hover or cursor attribute doesn't work, even when used seperately. I use latest google chrome version.
CSS:
#düzenleyici{
border: 1px solid #000;
width: 550px;
height: 300px;
box-shadow: -1px 1px 4px #000;
display:inline-block;
position:relative;
z-index:-1;
}
#araclar{
width:auto;
height:50px;
background:#AAD3D4;
display:inline-block;
padding:5px 15px 5px 15px;
border-bottom:1px solid #000;
}
#araclar>div{
padding:0 5px 0 5px;
display:inline-block;
border:1px solid #606060;
margin:0 3px 5px 3px;
background:#F6F6F6;
font-family:calibri;
}
#iclik{
border: 1px solid #000;
width: 100px;
height: 267px;
box-shadow: 1px 1px 4px #000;
display:inline-block;
position:relative;
padding:33px 0 0 0;
margin:0 0 0 -5px;
z-index:1;
}
#araclar>div:hover{
cursor:pointer;
}
HTML:
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="tasarim.css" type="text/css"/>
<script>
</script>
</head>
<body>
<div id="düzenleyici">
<div id="araclar">
<div>
Renk
</div>
<div>
Yazı Tipi
</div>
<div>
Yazı Boyutu
</div>
<div>
Kalın
</div>
<div>
İtalik
</div>
<div>
Altı Çizili
</div>
<div>
Resim Ekle
</div>
<div>
Sola Daya
</div>
<div>
Ortala
</div>
<div>
Sağa Daya
</div>
<div>
HTML Düzenleyicisi
</div>
<div>
HTML Kodu Ek
</div>
</div>
</div>
<div id="iclik">
asd
</div>
</body>
<script>
</script>
</html>
I don't know why you set a z-index property for #düzenleyici. If not needed remove it.
Just remove the z-index: -1 into the following section:
#düzenleyici {
z-index: -1;
}
Or change it to a positive value, if you need it.
This is my code Im trying to get it centered in the middle of the page
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<title>cp</title>
</head>
<body>
<div class="well">
<font face="arial" size="5" color="#000000"><center><b>Control Panel</font></center>
</div>
</style>
<style type="text/css">
.span12{
background: lightblue;
color: while;
padding: 9px 0;
border-radius:5px;
text-align: center;
border: 1px #00BFFF solid;
margin: 0px auto;
width: 50%;
margin-top: 25%;
}
</style>
<div class="span12">
Welcome
</div>
<script src="js/bootstrap.js"></script>
It re-sizes with the page but I cant get the whole thing to be in the center of the page.
I just want the whole thing in the middle of the page
Remove the center tag and set margin-top:25%, It will solve your problem.
CSS
.span12{
background: lightblue;
color: while;
padding: 9px 0;
border-radius:5px;
text-align: center;
border: 1px #00BFFF solid;
margin: 0px auto;
width: 50%;
margin-top:25%; /* new */
}
HTML
<div class="span12">
Welcome
</div>
jsFiddle Live Demo
i'm developing an header like:
This is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/base1.css">
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="lib/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="lib/js/jquery-ui-1.8.21.custom.min.js"></script>
<title>Crociere sul web - Ricerca avanzata</title>
</head>
<body>
<div id="header">
<div id="header_content">
<div id="text">
NAME OF COMPANY
</div>
<div id="header_prenotazioni">
My prenotation
</div>
<div id="header_phone">
<img id="phone" src="images/logo/logo_phone.png" /><b>xxxxxxxxxx</b>
</div>
<script>
( function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="https://www.facebook.com/xxxx" data-send="true" data-layout="button_count" data-width="20" data-show-faces="false" data-font="verdana"></div>
<div id="area_agenzie">
<div align="center">
AGENCY AREA
</div>
</div>
</div>
</div>
</body>
</html>
And this is css:
html, body {
margin: 0;
padding: 0
}
div#header {
width: 100%;
background-color: #0170a8;
color: white;
font-size: 9px;
font-family: Verdana;
overflow: hidden;
}
div#header_content {
margin: 0 auto;
width: 90em;
overflow: hidden;
padding-bottom: 4px;
padding-top: 4px;
}
div#text{
float:left;
}
div#header_prenotazioni {
margin-left: 100px;
border-left: 1px dotted white;
border-right: 1px dotted white;
padding-left: 6px;
float:left;
padding-right: 6px;
}
div#header_phone {
margin-left: 10px;
font-size: 11px;
border-right: 1px dotted white;
padding-right: 6px;
float:left;
}
div#header_phone img {
vertical-align: middle;
}
div#area_agenzie {
background-color: #b5c85f;
color: #0170a8;
height: 20px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 11px;
display: inline-block;
vertical-align: top;
}
div#area_agenzie div {
margin-top: 3px;
padding-left:2px;
padding-right:2px;
}
My problem is that is not compatible with IE.. the AGENCY AREA goes on next row... how can i solve it? can someone help me? thanks!!!
You appear to be using float: left for most of them, and display: inline-block for the last one. Since you have a fixed-width container, it seems like IE's font rendering is just enough to send the last block to the next line.
Instead, try replacing all those float: left with display: inline-block, and instead of having width: 90em, try text-align: center;. This should make everything appear on one line.
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>