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.
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
http://jsfiddle.net/W9LXd/
I want the div under the #araclar to have it's right border stay in the same line. How can I prevent it from shifting?
CSS:
#düzenleyici{
border: 1px solid #000;
width: 600px;
height: 300px;
box-shadow: 1px 1px 4px #000;
}
#araclar{
width:auto;
height:50px;
background:#EEEEEE;
display:block;
padding:5px 15px 5px 15px;
border-bottom:1px solid #000;
}
#araclar>div{
padding:0 5px 0 5px;
display:inline;
border:1px solid #000;
}
HTML:
<div id="düzenleyici">
<div id="araclar">
<div>
Renk
<div>
</div>
</div>
Change display: inline; to display: inline-block;
Use: http://jsfiddle.net/W9LXd/1/
display: inline-block instead of display-inline
Or give a specific width.
IMO there is no problem with your CSS
Your HTML is malformed, Please close the inner most div - on which you have set display:inline
<div id="düzenleyici">
<div id="araclar">
<div>
Renk
</div> <!-- yOU have not closed the tag here -->
</div>
</div>
FIDDLE
I have a div around an image like this:
<div class="q">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
</div>
The result is that the div is bigger than the image. I would like to wrap it around the image giving it the same height and width (without setting dimension)
img {
z-index: -1;
position: relative;
width:300px;
}
.q {
width:100%;
height:100%;
box-shadow:inset 0px 0px 85px red;
-webkit-box-shadow:inset 0px 0px 85px red;
-moz-box-shadow:inset 0px 0px 85px red;
}
I tried height and width 'auto' but it also doesn't work.
JsFiddle
You could add these:
img {
display: block;
}
.q {
float: left;
}
and remove:
.q {
width: 100%
height: 100%;
}
jsfiddle
I found this method the easiest,
<div style="display:inline-block">
<p style="float: left; padding-left: 20px">
<img src="Images/user.png" style="height: 200px; width: 207px" />
</p>
<h4 style="text-align: center">Client Zone</h4>
<p>So, he played with that child, the whole day long, and they were very merry.</p>
</div>
This example has text in it but, even if you take the <h4> and last <p> tag the
<div style="display:inline-block;" >
The "display:inline-block;" ensures the whole image gets wraped within the <div> tag.
Set the margin and padding of the div to zero:
div.q{
margin:0;
padding:0;
}
Here yo go
<html>
<head>
<style type="text/css">
img {
z-index: -1;
position: relative;
width:300px;
}
.q {
width:300px;
box-shadow:inset 0px 0px 85px red;
-webkit-box-shadow:inset 0px 0px 85px red;
-moz-box-shadow:inset 0px 0px 85px red;
}
</style>
</head>
<body>
<div class="q">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
</div>
<body>
</html>
<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
<div style="clear:both;"></div>
<div id="gall"></div>
CSS
.btns{
float:left;
padding: 2px 10px 2px 10px;
}
#gall{
margin:25px 0 15px; // this top margin doesn't work in IE8
height:70px;
border:thin solid red;
}
here is jsFiddle
It's a known bug in IE8. There are several ways to fix it.
You can try to add overflow:auto to the clearing <div>
Check this fiddle
Try to add display:inline-block; and width how much you want hope it will solve your problem.
<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
<div style="clear:both;"></div>
<!-- Adding will solve problem -->
<div id="gall"></div>
Works for me.
http://jsfiddle.net/68myJ/13/
<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
<div style="clear:both;"></div>
<div id="gall"></div>
.btns{
float:left;
padding:2px 10px 2px 10px;
}
#gall{
margin:25px 0 15px !important;
height:70px;
width:100%;
display:block; /* can revert inline block when long list for IE8*/
border:thin solid red;
}
try this:
<div id="wrapper">
<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
</div>
<div id="gall"></div>
#wrapper{
overflow:hidden;
}
.btns{
float:left;
padding:2px 10px 2px 10px;
}
#gall{
margin:25px 0 15px !important;
height:70px;
width:100%;
display:block; /* can revert inline block when long list for IE8*/
border:thin solid red;
}
see fiddle: http://jsfiddle.net/68myJ/17/
The problem I am running into is related to a footer I have absolutely positioned at the bottom of the page. Everything is fine until the copy on the page begins to extend further down the page which then causes my content wells to extend down, behind, the footer. Is there anyway I can force my content wells to 'push' the footer down the page?
Here is the relevant html:
<div id="page">
<div id="page_container">
<div id="header"></div>
<div id="nav"></div>
<div id="main_content">
<div id="left_column"></div>
<div id="right_column"></div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_container">
</div>
</div>
And the relevant CSS
#page {width:100%;margin:0 0 10px 0; text-align:center;}
#page_container {width:743px;height:auto !important;height:100%;margin:0 auto;min-height:100%;text-align:center;overflow:hidden;border:2px solid #000;}
#header {width:100%;background:url('../images/header.jpg');height:87px;clear:both; margin-top: -2px;}
#nav {width:100%;height:29px;float:left; text-align:left; border-bottom: solid 2px #000; border-top: solid 2px #000;}
#main_content {width:100%;float:left; text-align:left; background-color:#fff; border-bottom: solid 2px #000; border-left: solid 2px #000; border-right: solid 2px #000;}
#footer {width:100%; position:absolute;margin-top:10px; bottom: 0; background:url('../images/footer_bg.jpg');height:133px;text-align:center;}
#footer_container{width:746px;height:133px; text-align:left; display:inline-block;}
#left_column {width:230px; float:left; text-align:left; background-color:#fff; margin-top:5px;}
#right_column {width:490px; float:right; text-align:left; background-color:#fff;margin-top:5px; padding:10px;}
Thanks for any help you might be able to give!
Use position: fixed; for the footer, you also might want to have some padding-bottom for your body so that the content won't go under it.
Take out the height: 100% on pageContainer - that fixes the div to the window height and not the content height.
Try this:
<style type="text/css">
html, body { margin:0; padding:0; height:100%; }
#page_container { width:743px; margin:0 auto; }
#header { height:87px; border:1px solid #000; }
#footer { height:133px; position:absolute; bottom:0; width:100%; border:1px solid #000;}
#nav { height:29px; border:1px solid #000;}
#left_column { width:230px; float:left; border:1px solid #000;}
#right_column { width:490px; float:left; border:1px solid #000;}
#page { min-height:100%; position:relative; }
#main_content { padding-bottom:133px; }
.clear { clear:both; }
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
HTML (note - you must put #footer inside #page for this method to work):
<div id="page">
<div id="page_container">
<div id="header">hhhh</div>
<div id="nav">nav</div>
<div id="main_content">
<div id="left_column">lll</div>
<div id="right_column">rrr</div>
<div class="clear"></div>
</div>
</div>
<div id="footer">
<div id="footer_container">fffff</div>
</div>
</div>
You can preview working example here: http://www.front-end-developer.net/examples/bottomfooter/footer.htm
Tested on Chrome, Firefox, IE6, IE7, IE8 and Opera.