I am designing a website using a CSS drop down menu (as an include to the site pages). What SHOULD happen is when you hover over a menu item a dropdown box will appear with choices that you can then drag your mouse down to select. It works fine in IE and Firefox, but in Chrome when you hover over a menu item and go to drag your mouse down, a container div (that is no where near where your mouse is hovering) overlaps the drop down box and it disappears. I noticed the div when clicking view source in Chrome. I have attached the CSS for the drop down menu and a link to the drop down menu include.
The CSS that I believe to be the problem is the #banner class which holds a logo, a title, and a login form. I have it set so #bannerContainer holds #banner so that it can be centered on any screen resolution (see code below). Any help to this problem would be greatly appreciated! Thank you!
CSS: http://bridgedeck.org/newsite/pro_dropdown_n1.css
#bannercontainer { /* centers banner items on any screen resolution */
position:absolute;
left:0px;
top:0px;
width:100%;
height:105px;
z-index:2000;
background-image: url(images/bannerOrigBlue.png);
}
#banner { /* Holds wheel, mmp text and members login form*/
position:relative;
width:1000px;
height:100px;
z-index:0;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
HTML:
<div id="bannercontainer">
<div id="banner"> <!-- holds wheel, MMP text, and members login -->
<img src="images/wheellogocolor2.png" height="140" width="140">
<img class="mmpText" src="images/title_n1-2.png" alt="MMP" align="top"/>
<div class="loginDiv">
<form action="https://secure.bridgedeck.org/LoggedInHome.asp" style="font-family:Calibri" method="post">
<table>
<tr>
<td><b>Members Login</b></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="Email" width="80px"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" width="80px"></td>
</tr>
<tr>
<td height="29"><input type="submit" value="Login" class="submit"></td>
</tr>
</table>
</form>
</div>
</div>
<pre><code>
#nav li.top {
display: block;
float: left;
height: 35px;
padding-left: 5px;
padding-right: 5px;
}
</code></pre>
change height on line 119 in pro_dropdown_n1.css
watch your gaps created with height.
Related
During the work on my Asp.net project I came across the following problem:
I have an html <span> located on html <table> that located in an <asp:Panel>, and I want that the position of the <span> in the table will be according its text.
Explanation:
The text shown in the yellow rectangle is the text of the <span> and the long red rectangle is the table that contains the <span>.
The text of the <span> is changed by a button click, like in the following picture:
As we can see in the picture, the text on the <span> is changed, and now the text is longer than before, so I want the <span> to move right instead of became larger to the left direction, I mean: I want that when the text on the span is long then the <span> will move to the right.
I know, in Windows Forms U can make something like that in less than a second, but in HTML and CSS, I can burn hours on the computer and still there is no solution.
My HTML / CSS code:
<form id="mainForm" runat="server">
<asp:Panel ID="main" runat="server" CssClass="main-style">
<table id="details" style="position: relative; width: 95vw; height: 26px; margin-left: auto; margin-right: auto; margin-top: 30px">
<tr>
<td style="border: solid red 1px;">
<span id="userNameLabel" runat="server" style="color: powderblue;" class="username-label-style">XXXXX</span>
</td>
</tr>
</table>
<style>
THE PANEL STYLE HERE - NOT IMPORTANT NOW.
.username-label-style {
background: Transparent;
top: 0px;
float: right;
margin-right: 0;
width: 100px;
height: 26px;
font-family: Arial;
font-size: large;
}
</style>
</asp:Panel>
</form>
I tried by using the margin-right property, but nothing. Any suggestions?
I got a Problem with CSS ! :)
I want to style a box to look like this one here:
http://dribbble.com/shots/1151646-Home-AgenceMe/attachments/148910 (Chart + 3 boxes right).
Right now i tried:
.wktcontent {
float: left;
width: 80%;
}
.wktinfo {
float: right;
width: 20%;
}
.wkttitle {
height:34px;
padding:5px;
border-bottom:1px solid #000000;
margin-bottom:20px;
}
.wktinfocontent {
font-weight:bold;
border-top:1px dashed #000000;
}
and in html:
<div class="wktcontent">
<center><h2>Title</h2></center>
<p><h3>Content</h3></p>
</div>
<div class="wktinfo">
<div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
<div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
<div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
<div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
</div>
I think everything aligns fine. But as soon as I add a border to the boxes by defining
border: 1px solid lightblue;
the title is placed over the infos on the right.
My second part of the Question is: How can I align the numbers on the right (as in the example on dribble) to the text next to it?
thank you so much!!
Adding a border changes an elements dimensions. If you add a 1px border to an element, then remove 1px from it's width and height. Failure to do this will result in issues with layout.
I couldn't reproduce your error on jsfiddle and chrome, what browser are you using?
As for the numbers, I'd suggest using a table in each div so you can align both halves properly.
Something along the lines of:
<div class="wktinfocontent">
<table>
<tr>
<td width="30%">
07
</td>
<td width="70%">
Hours play game today
</td>
</tr>
</table>
</div>
I am struggling with a CSS popup and hoping someone can help.
We have various tds that have this popup within their cell, in firefox, chrome etc (the usual) it works fine. However in the older browsers below IE8 it is having problems.
It seems that the :hover is lost when the mouse moves out of the cell, even if it moves over the popup area (which is situated just below the cell). You are probably saying yes that is what it should be doing but a child element of the parent that is hovered in firefox keeps the :hover class on the parent.
The popup div is positioned absolute and given a margin-left of -999px; (This is ok)
On :hover of the parent div element the margin-left is set to -125px (half of width of popup div, so it is centered - also ok)
All this is fine and works perfect in modern browsers as previously stated.
HTML Snippet
<tr>
<td>
<div class="tooltip">
<span class="events">CONTENT</span>
</div>
</td>
<td>
<div class="tooltip">
<span class="events">CONTENT</span>
</div>
</td>
<td>
<div class="tooltip">
<span class="events">CONTENT</span>
</div>
</td>
<td>
<div class="tooltip">
<span class="events">CONTENT</span>
</div>
</td>
<td>
<div class="tooltip">
<span class="events">CONTENT</span>
</div>
</td>
</tr>
CSS Thusfar
#page-content .block_calendar_month { overflow: visible; }
.tooltip { border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; }
.tooltip span { margin-left: -999em; position: absolute; }
td.day:hover { background-color: #fbf16b; }
.tooltip:hover span { font-size: 12px; position: absolute; left: 0em; z-index: 5000; top: 1em; margin-left: -125px; width: 250px; }
.tooltip:hover span div { }
.events {padding: 0.8em 1em; }
Hope someone can give me some advice, as I have lost a few hours trying to solve this.
I haven't touched IE6 in a while, but from working with IE7 I can tell you it does some funky stuff with tables and z-index. I found that the best solution when working with tooltip is to not use tables. Why not strip out the table code and have:
<div class="tooltip">
<span class="events">CONTENT</span>
</div>
Also, I am not sure what plugin you are using (in fact, it looks like you aren't using any), But if you use JQuery Tools tooltip plugin, you can set the popup's offset distance as a JSON parameter. Read more http://jquerytools.org/demos/tooltip/dynamic.html.
If you are going to keep the current implementation, I'd recommend toggling between display:block and display:none for the tooltip.
okay i have a div nested inside another div and the inner div is centered with 80% width. but its not fully centered.
how would i make it fully centered?
http://jsfiddle.net/xx8hx/
http://postimage.org/image/15linq5yc/
html
<div class="wrap">
<div class="content">
<h1>Contact</h1>
<form action="/cgi-bin/cgiemail" method="post">
<table width="50%" border="0" cellpadding="5" align="center">
<tr>
<td align="left" width="50%">First Name</td>
<td><input name="FirstName" type="text" id="fname" size="25" /></td>
</tr>
</table>
</form>
</div>
</div>
css
.wrap {
overflow:hidden;
width:100%;
height:100%;
position:absolute;
}
.content {
width:80%;
margin:20px auto;
padding:15px;
background:url(../images/contentback.png);
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
}
This padding line in your css is causing the box to be off-centered.
/* stop do not edit */
#contact>div {
padding:50px 20px;
}
Getting rid of the left/right margin on that line (even though the comment told me not to) fixed it for me.
http://jsfiddle.net/4AX5b/
Add to your CSS:
body,
html {
padding: 0;
margin: 0;
}
Demo fiddle.
found it:
/* stop do not edit */
#contact>div {
pading: 50px 20px;
}
causes the error it should be:
#contact > div {
padding: 50px 0;
}
I want to align my images similar to this page: http://nymanssnickeri.se/
My content div is 900px wide. As you can see, image #1 and #3 are located at the edge of the content div. On this page margin is only used on the image in the middle. If there wasnt more than 3 images, i could use first-child selector on the first image and the problem would be solved. But sometimes there will be multiple rows of images. Any ideas how to accomplish this in a good way? Thanks
You can give every image equal horizontal margins, and then on the first and last, add a class and have margin-left: 0 and margin-right:0, respectively. You'll have to play with the margin size / math a bit to get it right.
Example:
#container img { margin: 0 20px; }
#container img.first {margin-left: 0; }
#container img.last {margin-right: 0; }
20px is just a random number I chose. It depends on your image sizes, and how many you have.
Edit:
Math for the margins (check this, just made it up on the fly):
(total container width - total width of all images ) / (total number of images - 1) * 2
If you would like to have three images per row and not have to worry about setting pixel margins to achieve the effect you can do something like this...
Demo: http://jsfiddle.net/ENQTZ/1/
<div>
<span class="a"></span>
<span class="b"></span>
<span class="c"></span>
</div>
<div>
<span class="a"></span>
<span class="b"></span>
<span class="c"></span>
</div>
div {
text-align: center;
margin-bottom: 20px;
}
span {
display: block;
width: 32%;
height: 100px;
background-color: red;
}
.a {
float: left;
}
.b {
float: right;
}
.c {
margin-left: auto;
margin-right: auto;
position: relative;
left: 0px;
top: 0px;
}
If the layout is known ahead of time, including number of photos, etc. You could use a table:
<table width="900"><tr><td><img /></td><td><img /></td>
<td><img /></td></tr></table>
Or you could use a div, and concatenate these to create multiple rows:
<style
div#img-container { width: 900px; }
div#img-container img { display: block; }
img.lft { float: left; }
img.mid { margin: 0 auto; }
img.rgt { float: right; }
</style>
<div id="img-container">
<img class="lft"/>
<img class="mid"/>
<img class="rgt"/>
<br />
</div>
You might need to reset margins, paddings and borders to 0 on the images to use this method, otherwise the images will overflow slightly and not align correctly.
<center>
<div ID="Content" Style="Width:900px">
<center>
<table>
<tr>
<td>
Your image here
<td>
<td>
Your image here
<td>
</tr>
<tr>
<td>
Your image here
<td>
<td>
Your image here
<td>
</tr>
</table>
</center>
</Div>
</center>
Any of this useful to you? This is my template that I use. just add more td tags for more cells, and more tr tags for more rows of images.
Further, You can style your images to the exact size they need to be, but be careful that stretching / squashing might occur
<img ID="Image" src="Image/Cat.png" alt="Cat.png" style="Width:50px;Height:50px" />