I was experimenting with text-align:; and text-justify:;, which only appears in the header id, and am now getting the effect on divs I no longer want it on. I've since removed the rules entirely with no effect. This especially irritating when li's are involved with syntax highlighting etc. Any idea where this is coming from?
css:
#content{
position:relative;
float:left;
clear:both;
background-color:#ffffff;
width:100%;
overflow:hidden;
text-align:left;
vertical-align:left;
margin:10px 3px 3px 03x;
padding:10px 10px 10px 10px;
}
#contentspace{
position:relative;
float:left;
clear:both;
background-color:#ffffff;
width:91%;
overflow:hidden;
text-align:left;
vertical-align:center;
left:4%;
margin:10px 0px 0px 0px;
padding:5px 5px 5px 5px;
border-top:1px solid #000000;
border-left:1px solid #000000;
}
#header{
position:relative;
float:left;
clear:both;
background-color:#ffffff;
vertical-align:center;
text-align:center;
text-align:justify;
text-justify:distribute;
width:91%;
left:4%;
margin:15px 0px 0px 0px;
padding:5px 5px 5px 5px;
border-top:1px solid #000000;
border-left:1px solid #000000;
}
html:
the content div is loaded into the contentspace div
Related
I have a page whos players update their stats
for each stat I have a cell, with description and (+) whos give them the option for chose which one to update, but when you trying to click the whole table is going left
its no script whos do it or something like that
this is how its need to be
this is the result after click\hover
I moved position: absolut
but still, nothing happened
position: static;;
}
.titlestat {
right:20px;
position:absolute;
margin-top:-3px;
margin-right:40px;
right:20px;
}
.substat {
right:20px;
font-size:12px;
margin-top:22px;
margin-right:40px;
position:absolute;
right:20px;
}
.upstat {
right:20px;
font-weight:600;
font-size:24px;
background:rgba(0,0,0,0.3);
padding:3px 10px;
padding-top:2px;
border:solid 1px #693b23;
box-shadow:0px 0px 0px 1px #000,0px 4px 3px
rgba(255,255,255,0.15);
color:#fff;
margin-top:0px;
margin-right:153px;
text-decoration:none;
border-radius:6px;
transition:0.3s;
-webkit-transition:0.3s;
-moz-transition:0.3s;
right:20px;
}
.upstat:hover {
background:rgba(0,0,0,0.4);
box-shadow:0px 0px 0px 1px #000,0px 4px 4px
rgba(255,255,255,0.35);
text-shadow:0px 0px 16px #fff,0px 0px 16px #fff;
}
.statsupdiv {
background:url(../img/code/chatbg.jpg);
width:472px;
margin-right:10px;
padding:10px 0px;
border-right:solid 1px #693b23;
border-left:solid 1px #693b23;
border-bottom:solid 1px #693b23;
box-shadow:1px 0px 0px #000,-1px 0px 0px #000,0px 1px 0px #000;
margin-bottom:8px;
font-weight:bold;
font-size:16px;
}
.stats1 {margin-right:-240px;margin-top:0px;}
.stats2 {margin-right:2px;margin-top:0px;}
.stats3 {margin-right:-240px;margin-top:80px;}
.stats4 {margin-right:2px;margin-top:80px;}
I am attaching two division's border and remove the border where two division intersect but its not remove. I have tried this code.
<div style="border:solid 1px #CCC;
margin: 15px 0px 0px 350px;
border-bottom:none;
padding:12px 12px 8px 12px;
border-radius:5px 5px 0px 0px;
width:300px;
text-align:center;">
<strong style="font-size:18px; color:#000">ABC</strong>
</div>
<div style="width:968px;
float:left;
margin:0px 15px 15px 15px;
border: solid 1px;
border-color:#CCC;
border-radius:10px;">
Hello
</div>
Can anybody help me to solve this error.
jsFiddle: http://jsfiddle.net/9XFDp/1/
Just nudge the top div by 1px from top and use some background-color or even border-bottom is fine
Demo
Added the below properties to the header div
position: relative;
top: 1px;
background: #fff;
z-index: 1;
Note: Don't use inline CSS, create classes instead.
Demo 2 (Without using background-color, used border-bottom: 1px solid #fff; instead)
Like this
DEMO
CSS
.title{
border:solid 1px #CCC;
margin: 15px 0px 0px 350px;
border-bottom:1px solid #ffffff;
padding:12px 12px 8px 12px;
border-radius:5px 5px 0px 0px;
width:300px;
text-align:center;
font-size:18px; color:#000
font-weight:bold;
position:relative;
top:1px;
}
.content{
width:968px;
float:left;
margin:0px 15px 15px 15px;
border: solid 1px;
border-color:#CCC;
border-radius:10px;
}
I'm trying to build a page tutorial kind of thing, where divs get highlighted on the page. I have a modal dialog that is ordinarily shown on top of an overlay. However, what I want to do is put the modal dialog behind the overlay but bring a particular div within that modal to the front.
Here is a JS fiddle of my code.
How do I get the div to appear on top of the overlay?
CSS:
.overlay
{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:1000;
background-color:#000000;
opacity:0.7;
}
.modal
{
position:absolute;
top:300px;
left:50%;
z-index:999;
overflow:auto;
margin:-250px 0px 0px -280px;
border:1px solid #999;
background-color:#fff;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-webkit-box-shadow:0 3px 7px rgba(0,0,0,0.3);
-moz-box-shadow:0 3px 7px rgba(0,0,0,0.3);
box-shadow:0 3px 7px rgba(0,0,0,0.3);
background-clip:padding-box;
padding:10px;
}
.highlight
{
z-index:1002;
position:relative;
background-color:#ffffff;
}
.modal-contents
{
height:100px;
min-width:100px;
}
.section
{
padding:5px;
}
html:
<body>
<div class="overlay"></div>
<div class="modal">
<h1>Modal Window</h1>
<div class="modal-contents">
<div class="section highlight">
This div should be highlighted above the overlay!
</div>
<div class="section">
This is section two
</div>
</div>
</div>
</body>
remove all z-index values and the white background for the modal element
http://jsfiddle.net/TfSa5/
.overlay
{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#000000;
opacity:0.7;
}
.modal
{
position:absolute;
top:300px;
left:50%;
overflow:auto;
margin:-250px 0px 0px -280px;
border:1px solid #999;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-webkit-box-shadow:0 3px 7px rgba(0,0,0,0.3);
-moz-box-shadow:0 3px 7px rgba(0,0,0,0.3);
box-shadow:0 3px 7px rgba(0,0,0,0.3);
background-clip:padding-box;
padding:10px;
}
.modal-contents
{
height:100px;
min-width:100px;
}
.highlight
{
position:relative;
background-color:#ffffff;
}
.section
{
padding:5px;
}
So I have an image inside a div that is centered in an outer-wrapper. I have a horizontal menu at the top of the wrapper that displays 5 sub divs inline. I have added css for a drop down menu that appears when you hover over the first of the 5 inline sub divs. When the drop down menu appears, it causes the image to shift to the right and I can't for the life of me figure out how to correct it. As you can see I have played around with z-index but i'm not sure if I understand what is happening or not happening with z-index and how it is used correctly.
HTML:
<div class="wrapper">
<div id="topmenu">
<div id="home">Home
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
<div id="logo">
<img src="image.jpeg" />
</div>
</div>
CSS
.wrapper{
position:relative;
width:960px;
height:905px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
/*text-align:left;
border:2px solid red;*/
background-color:#FFFFFF;
}
#topmenu{
position:relative;
border-bottom:2px solid #164207;
height:30px;
background-color:#ffffff;
z-index:3;
}
#logo{
position:relative;
border-bottom:2px solid #164207;
}
#logo img{
position:relative;
height:350px;
width:500px;
z-index:1;
}
#home{
display:inline-block;
float:left;
margin-top:5px;
margin-left:15px;
width:169px;
color:#164207;
font-family:serif;
font-weight:bold;
font-size:20px;
text-align:center;
border-right:2px solid #164207;
}
#home:hover .sub-menu {display:inline-block;}
.sub-menu {
overflow:hidden;
display: none;
width: 169px;
background-color: #164207;
color:#FFFFFF;
margin-top: 5px;
border: 1px solid #fff;
-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}
.sub-menu li {
position:relative;
list-style-type: none;
display: block;
border-bottom: 1px solid #FFFFFF /*#eaeaea*/;
font-family:serif;
font-size: 12px;
height: 15px;
padding: 8px 0;
}
You need to add position: absolute; to .sub-menu to create a stacking context.
jsFiddle
#home{
display:block;
float:left;
margin-top:5px;
width:184px;
color:#164207;
font-family:serif;
font-weight:bold;
font-size:20px;
text-align:center;
border-right:2px solid #164207;
}
#home:hover .sub-menu {display:block;}
#course:hover .sub-menu{display:block;}
#leagues:hover .sub-menu{display:block;}
#events:hover .sub-menu{display:block;}
#about:hover .sub-menu{display:block;}
.sub-menu {
overflow:hidden;
display: none;
width: 182px;
background-color: #164207;
color:#FFFFFF;
/*padding: 10px 10px;
margin-left: 0px;*/
margin-top: 5px;
border: 1px solid #fff;
-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
position:absolute; /**************************** Important Bit*/
top:24px;
}
To re-adjust alignment- Remove margin-left:15px; from #home, #course, #leagues, #events, and #about and adjust widths on all of them. Then adjust the width of .sub-menu. See updated jsFiddle above for details and working model.
Example with navigation set up in <ul> unordered list </ul>. - Don't Need all the id's and resulting redundant CSS.
How can I create a "Contact Us" hyperlink as the one present on the top-right of this page?
I am particalarly interested on the balloon style.
They use simple html for the link and css to show rounded corners and an arrow.
Contact Us<span class="arrow"><span></span></span>
li.contactus a {
-moz-border-radius:5px 5px 5px 5px;
background:none repeat scroll 0 0 #EBE9D9;
border:1px solid #FFFFFF !important;
color:#4C4632 !important;
display:block;
float:left;
font-size:1.3em;
font-weight:bold;
line-height:1;
margin:0;
padding:0.4em 0.7em 0.6em 1.2em;
text-decoration:none;
text-shadow:1px 1px 0 #FFFFFF;
width:6em;
}
li.contactus a span.arrow {
border-left:0 none;
border-right:16px dashed transparent;
border-top:11px solid #FFFFFF;
bottom:-11px;
left:8px;
right:auto;
}
li.contactus a span span {
border-left:0 none;
border-right:14px dashed transparent;
border-top:10px solid #EBE9D9;
bottom:auto;
left:1px;
top:-12px;
}
li.contactus a span {
background:none repeat scroll 0 0 transparent;
border-bottom-width:0;
display:block;
height:0;
position:absolute;
width:0;
}
Since that is static, I would just use an <img> for this.
If you check the html and css in for that balloon you'll get your answer:
html:
<ul><li class="contactus">Contact Us<span class="arrow"><span></span></span></li></ul>
css:
li.contactus a span.arrow {
border-left:0 none;
border-right:16px dashed transparent;
border-top:11px solid #FFFFFF;
bottom:-11px;
left:8px;
right:auto;
}
li.contactus a span {
background:none repeat scroll 0 0 transparent;
border-bottom-width:0;
display:block;
height:0;
position:absolute;
width:0;
}
li.contactus, #home_nav li.contactus {
float:none;
font-size:1em !important;
margin:0;
overflow:visible !important;
padding:0;
position:absolute !important;
right:20px;
top:-0.5em;
width:10em;
z-index:99999;
}
li.contactus a {
-moz-border-radius:5px 5px 5px 5px;
background:none repeat scroll 0 0 #EBE9D9;
border:1px solid #FFFFFF !important;
color:#4C4632 !important;
display:block;
float:left;
font-size:1.3em;
font-weight:bold;
line-height:1;
margin:0;
padding:0.4em 0.7em 0.6em 1.2em;
text-decoration:none;
text-shadow:1px 1px 0 #FFFFFF;
width:6em;
}