CSS Help

Question

whimsical1987 0 Newbie Poster

13 Years Ago

Hello,

I am developing a twitter based login in my website. I have trouble in the dropdown. When I click the sign in button I can see only half of the drop down. I had checked the CSS and the z-index is very high. Despite that I am unable to see the complete drop down.
Attached is the image of the file and I have my CSS and the HTML in which the div tags are ordered.

body {
	margin:0;
	padding:0;
	font:13px/16px "Lucida Grande", Arial, Sans-serif;
}

#container {
	background: #ffff;
	margin: 0 auto;
	width: 1000px;
}

#header {
	background: #ccc;
	padding: 20px;
	position:relative;
	overflow:hidden;
	clear:both;
	z-index:0;
}

#logo {
	position: relative;
	float:left;
	width:300px;
	height:70px;
	margin-top:0px;
	background-image: url(images/logo.png);	
}

#menubar {
	position:relative;
	width:1000px;
	background-color:#666;
	z-index: 2000;
	background-image: url(images/menubar.png);
	overflow: auto;
	height: 40px;
	margin-top: 2px;
}
#registerForm fieldset {
	border: 2px solid #69C;
	float: left;
	margin: 0.7em 0;
	padding: 0 2% 1.75em 18%;
	width: 80%;
	position:relative;
	background-attachment: scroll;
	background-color: #FFF;
	background-image: none;
	background-repeat: repeat;
	background-position: 0 0;
	margin-left:auto;
	margin-right:auto;
}
#registerForm {
	width:90%;
	margin-right:auto;
	margin-left:auto;
}

#tableinfo {
	float:left;
	position:relative;
	padding-top: 10px;
}
#registerForm legend {
	color: #999;
	font-size: 1em;
	left: 1em;
	line-height: 1.3em;
	margin: 0;
	padding-top: 1.25em;
	position: absolute;
	width: 16%;
}
#registerForm legend {
	font-weight:bold;
}

#registerForm .required {
	color:red;
	font-size: xx-small;
	text-transform:uppercase;
}


a:link, a:visited {
	color:#27b;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
a img {
	border-width:0;
}
#topnav {
	font-size:11px;
	line-height:0px;
	text-align:right;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 12px;
	padding-left: 5px;
	float:right;
	width:300px;
}
#topnav a.signin, a.register {
	background:#88bbd4;
	padding:4px 6px 6px;
	text-decoration:none;
	font-weight:bold;
	color:#fff;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	*background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0;
	*padding:4px 12px 6px;
	z-index:1000;
}
#topnav a.signin:hover, a.register:hover {
	background:#59B;
	*background:transparent url("images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
	*padding:4px 12px 6px;
	font-size: 11px;
}
#topnav a.signin, #topnav a.signin:hover {
	*background-position:0 3px!important;
}

a.signin {
	position:relative;
	margin-left:3px;
}
a.signin span {
	background-image:url("images/toggle_down_light.png");
	background-repeat:no-repeat;
	background-position:100% 50%;
	padding:4px 16px 6px 0;
}
#topnav a.menu-open {
	background:#ddeef6!important;
	color:#666!important;
	outline:none;

}
#small_signup {
	display:inline;
	float:none;
	line-height:23px;
	margin:25px 0 0;
	width:170px;
}
a.signin.menu-open span {
	background-image:url("images/toggle_up_dark.png");
	color:#789;
}

#signin_menu {
	-moz-border-radius-topleft:5px;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	display:none;
	background-color:#ddeef6;
	position:absolute;
	width:210px;
	z-index:2000;
	border:1px transparent;
	text-align:left;
	padding:12px;
	top: 24.5px; 
	right: 0px; 
	margin-top:5px;
	margin-right: 0px;
	*margin-right: -1px;
	color:#789;
	font-size:11px;
	overflow:auto;
	
}

#signin_menu input[type=text], #signin_menu input[type=password] {
	display:block;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border:1px solid #ACE;
	font-size:13px;
	margin:0 0 5px;
	padding:5px;
	width:203px;
}
#signin_menu p {
	margin:0;
}
#signin_menu a {
	color:#6AC;
}
#signin_menu label {
	font-weight:normal;
}
#signin_menu p.remember {
	padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete {
	clear:both;
	margin:5px 0;
}
#signin_menu p a {
	color:#27B!important;
}
#signin_submit {
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	background:#39d url('images/bg-btn-blue.png') repeat-x scroll 0 0;
	border:1px solid #39D;
	color:#fff;
	text-shadow:0 -1px 0 #39d;
	padding:4px 10px 5px;
	font-size:11px;
	margin:0 5px 0 0;
	font-weight:bold;
	z-index:100;
}
#signin_submit::-moz-focus-inner {
padding:0;
border:0;
}
#signin_submit:hover, #signin_submit:focus {
	background-position:0 -5px;
	cursor:pointer;
}

.tipsy-inner {
	padding:10px 15px;
	line-height:1.5em;
	font-weight:bold;
}
.tipsy {
	opacity:.8;
	filter:alpha(opacity=80);
	background-repeat:no-repeat;
	padding:5px;
}
.tipsy-inner {
	padding:8px 8px;
	max-width:200px;
	font:11px 'Lucida Grande', sans-serif;
	font-weight:bold;
	-moz-border-radius:4px;
	-khtml-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	background-color:#000;
	color:white;
	text-align:left;
}
.tipsy-north {
	background-image:url(images/tipsy-north.gif);
	background-position:top center;
}
.tipsy-south {
	background-image:url(images/tipsy-south.gif);
	background-position:bottom center;
}
.tipsy-east {
	background-image:url(images/tipsy-east.gif);
	background-position:right center;
}
.tipsy-west {
	background-image:url(images/tipsy-west.gif);
	background-position:left center;
}

This is the HTML div tags layout

<body>
<div id="container" >
<div id = "header">
    
    	<div id = "logo">
        	
        </div>    
	  <div id="topnav"> <a href="registration.php" class="register"> <span> Register </span></a>
       	  <a href="login" class="signin"><span>Sign in</span></a> 
      </div>        
         <fieldset id="signin_menu">
          <form method="POST" id="signin" action="login.php">
		      <label for="username">Username or email</label>
		      <input id="username" name="username" value="" title="username" tabindex="4" type="text">
   			   <p>
		        <label for="password">Password</label>
        		<input id="password" name="password" value="" title="password" tabindex="5" type="password">
		      </p>
      		  <p class="remember">
		        <input id="signin_submit" value="Sign in" tabindex="6" type="submit">
        		<input id="remember" name="remember_me" value="1" tabindex="7" type="checkbox">
		        <label for="remember">Remember me</label>
      		  </p>
		      <p class="forgot"> <a href="#" id="resend_password_link">Forgot your password?</a> </p>
		      <p class="forgot-username"> <A id=forgot_username_link 
				title="If you remember your password, try logging in with your email" 
				href="#">Forgot your username?</A> 
              </p>
    		</form>
  		  </fieldset>
	</div>
    
    <div id="menubar">
    
    </div>
</div>
</body>

I also have a question of copyrights. Can I use this twitter kind of login in my website and publish my website.

web-design

Screen_shot_2011-03-05_at_4.06_.19_PM_.png 15.33 KB

Edited 13 Years Ago by whimsical1987 because: n/a

3 Contributors
6 Replies
208 Views
1 Week Discussion Span
Latest Post 13 Years Ago Latest Post by whimsical1987

All 6 Replies

floatingDivs 21 Junior Poster

13 Years Ago

Do you have a live test site up yet? The HTML you posted is not of much use considering the images can't be seen (empty "login" area).

From what I'm seeing in the image you posted, it appears to be a floating issue but I can't be 100% certain without seeing the live page.

Regarding your question about copyrights, I don't see why not. At least, as long as you didn't copy the Twitter login entirely.

Edited 13 Years Ago by floatingDivs because: n/a

floatingDivs 21 Junior Poster

13 Years Ago

Hey whimsical1987,

I took a look at your code. There are two ways to go about doing this. The first would be to set a larger height on the #header when the login form is turned on. That may not be a smart idea, considering a header should not be that big.

The other idea would be to move the <fieldset> and all its data (so your entire form) out of the header and into its own <div>.

EDIT BELOW: Take a look at how I've placed the fieldset in its own "area" rather than being inside the header div. Also, any CSS changes I've made have been inline-styled, so your CSS entries haven't been touched. All changes, by the way, are in the <fieldset> container.

--EDIT--

<html>
<head>
<style>
body {
	margin:0;
	padding:0;
	font:13px/16px "Lucida Grande", Arial, Sans-serif;
}

#container {
	background: #ffff;
	margin: 0 auto;
	width: 1000px;
}

#header {
	background: #ccc;
	padding: 20px;
	position:relative;
	overflow:hidden;
	clear:both;
	z-index:0;
}

#logo {
	position: relative;
	float:left;
	width:300px;
	height:70px;
	margin-top:0px;
	background-image: url(images/logo.png);	
}

#menubar {
	position:relative;
	width:1000px;
	background-color:#666;
	z-index: 2000;
	background-image: url(images/menubar.png);
	overflow: auto;
	height: 40px;
	margin-top: 2px;
}
#registerForm fieldset {
	border: 2px solid #69C;
	float: left;
	margin: 0.7em 0;
	padding: 0 2% 1.75em 18%;
	width: 80%;
	position:relative;
	background-attachment: scroll;
	background-color: #FFF;
	background-image: none;
	background-repeat: repeat;
	background-position: 0 0;
	margin-left:auto;
	margin-right:auto;
}
#registerForm {
	width:90%;
	margin-right:auto;
	margin-left:auto;
}

#tableinfo {
	float:left;
	position:relative;
	padding-top: 10px;
}
#registerForm legend {
	color: #999;
	font-size: 1em;
	left: 1em;
	line-height: 1.3em;
	margin: 0;
	padding-top: 1.25em;
	position: absolute;
	width: 16%;
}
#registerForm legend {
	font-weight:bold;
}

#registerForm .required {
	color:red;
	font-size: xx-small;
	text-transform:uppercase;
}


a:link, a:visited {
	color:#27b;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
a img {
	border-width:0;
}
#topnav {
	font-size:11px;
	line-height:0px;
	text-align:right;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 12px;
	padding-left: 5px;
	float:right;
	width:300px;
}
#topnav a.signin, a.register {
	background:#88bbd4;
	padding:4px 6px 6px;
	text-decoration:none;
	font-weight:bold;
	color:#fff;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	*background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0;
	*padding:4px 12px 6px;
	z-index:1000;
}
#topnav a.signin:hover, a.register:hover {
	background:#59B;
	*background:transparent url("images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
	*padding:4px 12px 6px;
	font-size: 11px;
}
#topnav a.signin, #topnav a.signin:hover {
	*background-position:0 3px!important;
}

a.signin {
	position:relative;
	margin-left:3px;
}
a.signin span {
	background-image:url("images/toggle_down_light.png");
	background-repeat:no-repeat;
	background-position:100% 50%;
	padding:4px 16px 6px 0;
}
#topnav a.menu-open {
	background:#ddeef6!important;
	color:#666!important;
	outline:none;

}
#small_signup {
	display:inline;
	float:none;
	line-height:23px;
	margin:25px 0 0;
	width:170px;
}
a.signin.menu-open span {
	background-image:url("images/toggle_up_dark.png");
	color:#789;
}

#signin_menu {
	-moz-border-radius-topleft:5px;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	display:none;
	background-color:#ddeef6;
	position:absolute;
	width:210px;
	z-index:2000;
	border:1px transparent;
	text-align:left;
	padding:12px;
	top: 24.5px; 
	right: 0px; 
	margin-top:5px;
	margin-right: 0px;
	*margin-right: -1px;
	color:#789;
	font-size:11px;
	overflow:auto;
	
}

#signin_menu input[type=text], #signin_menu input[type=password] {
	display:block;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border:1px solid #ACE;
	font-size:13px;
	margin:0 0 5px;
	padding:5px;
	width:203px;
}
#signin_menu p {
	margin:0;
}
#signin_menu a {
	color:#6AC;
}
#signin_menu label {
	font-weight:normal;
}
#signin_menu p.remember {
	padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete {
	clear:both;
	margin:5px 0;
}
#signin_menu p a {
	color:#27B!important;
}
#signin_submit {
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	background:#39d url('images/bg-btn-blue.png') repeat-x scroll 0 0;
	border:1px solid #39D;
	color:#fff;
	text-shadow:0 -1px 0 #39d;
	padding:4px 10px 5px;
	font-size:11px;
	margin:0 5px 0 0;
	font-weight:bold;
	z-index:100;
}
#signin_submit::-moz-focus-inner {
padding:0;
border:0;
}
#signin_submit:hover, #signin_submit:focus {
	background-position:0 -5px;
	cursor:pointer;
}

.tipsy-inner {
	padding:10px 15px;
	line-height:1.5em;
	font-weight:bold;
}
.tipsy {
	opacity:.8;
	filter:alpha(opacity=80);
	background-repeat:no-repeat;
	padding:5px;
}
.tipsy-inner {
	padding:8px 8px;
	max-width:200px;
	font:11px 'Lucida Grande', sans-serif;
	font-weight:bold;
	-moz-border-radius:4px;
	-khtml-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	background-color:#000;
	color:white;
	text-align:left;
}
.tipsy-north {
	background-image:url(images/tipsy-north.gif);
	background-position:top center;
}
.tipsy-south {
	background-image:url(images/tipsy-south.gif);
	background-position:bottom center;
}
.tipsy-east {
	background-image:url(images/tipsy-east.gif);
	background-position:right center;
}
.tipsy-west {
	background-image:url(images/tipsy-west.gif);
	background-position:left center;
}
</style>
</head>
<body>
<div id="container" >
<div id = "header">
    
    	<div id = "logo">
        	
        </div>    
	  <div id="topnav"> <a href="registration.php" class="register"> <span> Register </span></a>
       	  <a href="login" class="signin"><span>Sign in</span></a> 
      </div>         
	</div>
	<fieldset id="signin_menu" style="display:block;right:auto;z-index:2001;left:1268px;">
          <form method="POST" id="signin" action="login.php">
		      <label for="username">Username or email</label>
		      <input id="username" name="username" value="" title="username" tabindex="4" type="text">
   			   <p>
		        <label for="password">Password</label>
        		<input id="password" name="password" value="" title="password" tabindex="5" type="password">
		      </p>
      		  <p class="remember">
		        <input id="signin_submit" value="Sign in" tabindex="6" type="submit">
        		<input id="remember" name="remember_me" value="1" tabindex="7" type="checkbox">
		        <label for="remember">Remember me</label>
      		  </p>
		      <p class="forgot"> <a href="#" id="resend_password_link">Forgot your password?</a> </p>
		      <p class="forgot-username"> <A id=forgot_username_link 
				title="If you remember your password, try logging in with your email" 
				href="#">Forgot your username?</A> 
              </p>
    		</form>
  		  </fieldset>
    
    <div id="menubar">
    
    </div>
</div>
</body>
</head>

Edited 13 Years Ago by floatingDivs because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

whimsical1987 0 Newbie Poster · Answer 1 · 2011-03-06T10:11:08+00:00

whimsical1987 0 Newbie Poster

13 Years Ago

I am sorry. I forgot to post the images. I am attaching the images.

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

images.zip (898.53 KB)

whimsical1987 0 Newbie Poster · Answer 2 · 2011-03-06T10:57:34+00:00

When I moved the fieldset out of the div. After clicking the sign in button I dont see any drop down. I tried on safari and mozilla. When I removed the "style="display:block;right:auto;z-index:2001;left:1268px;"", then I was able to see the drop down but the menubar was overlapping on the dropdown and again the drop down is towards the extreme right corner

rosy12 0 Newbie Poster · Answer 3 · 2011-03-08T16:19:19+00:00

Hi
CSS Hacks and Issues has a few exciting suggestions all for once you're in a pinch. The aim I'm bill it present is all for angle cipher 4 -- removing blemished course in Firefox.
Thanks
best web designing company india

whimsical1987 0 Newbie Poster · Answer 4 · 2011-03-16T01:58:14+00:00

Is there anyone who could help me with this issue. The signin but has absolute position so, I have issues when viewing the website on a 17'' screen and 13'' screen. I need some help in figuring out the problem. Experts please help me out.

CSS Help

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers