CSS Force a table to stay in one spot.

+3 Tatrasiel R · June 22, 2015
Good day everyone! CSS isn't my strong suit nor has web development ever been but, I currently have a login form that is in a table. I have it set on the right top above a search bar. I noticed however, that when people login the table moves over to the left to put the persons name in . 

How can I prevent this from happening? How can I keep the table still and allow for the username to just fill to the right? If you want to see the site I can show you but for now here is some code.

CSS

.Logintable{
        float: right;
        margin:0px 165px 0px 0px ;
        padding-bottom: 5px;

}

html code .




Let me know if you need anything else.

Thanks


EDIT oddly enough TNB doesn't escape my html and deletes it... weird. Let me know if it's still needed.

Post a Reply

Replies

- page 1
Oldest  Newest  Rating
0 Rehman . · June 22, 2015
could you please provide your HTML code ?
CSS seems right to me!
0 Tatrasiel R · June 22, 2015
While not logged in. Let's see if TNB deletes my code or escapes it this time.
I will post a link ... Not sure why TNB isn't escaping my code...



<div class="Logintable">Welcome, visitor!
<table>
<tr>
<td>
<h4><a href="/url/login/">Login </h4></td>
<td>
<h4><a href="/url/register/">Register </h4></td>
</tr>
</table>
</div>

After login

<div class="Logintable">Welcome, User
<table>
<tr>
<td><h4><a href="/urlto/usr/profile/">Profile</a></td></h4>
<td><h4><a href="/url/to/inbox/">Inbox</a></td></h4>
<td><h4><a href="/url/to/log/out/">Logout</a></td></h4>
</tr>
</table>
</div>

Perhaps this is due to the extra value in the logged in portion? is there anyway around this?
If you need the site I can provide this .
0 Rehman . · June 22, 2015
Yes please provide me your site link !
There is nothing wrong with this part.

/images/forum/upload/2015-06-22/01936a692f1d862aa49c84906636ff93.jpg
0 Tatrasiel R · June 22, 2015
sent.
 I played a bit and it does look to be from the fact I am using more <td> in the after logged in process.
0 Rehman . · June 22, 2015
Well Tatrasiel the CSS you are using on is another page when we click on the link "login" it goes to another page who's div is not set to the class="Logintable".
I just checked it & used your code see it below:
The only thing you need to do is place the class in div where i placed "style" it will solve the issue. I was too lazy to make another file for CSS :p hope it helped


<html>
<div style="float: right;
        margin:0px 165px 0px 0px ;
        padding-bottom: 5px;">
<form method="post" action="https://mal-source.com/forum/wp-login.php" class="bbp-login-form">
<fieldset class="bbp-form">
<legend>Log In</legend>

<div class="bbp-username">
<label for="user_login">Username: </label>
<input type="text" name="log" value="" size="20" id="user_login" tabindex="101" />
</div>

<div class="bbp-password">
<label for="user_pass">Password: </label>
<input type="password" name="pwd" value="" size="20" id="user_pass" tabindex="102" />
</div>

<div class="bbp-remember-me">
<style>.Logintable{display: none !important;} </style>
<input type="checkbox" name="rememberme" value="forever"  id="rememberme" tabindex="103" />
<label for="rememberme">Keep me signed in</label>



<!--<div class="bbp-submit-wrapper"> --> <!--button change -->

<button type="submit" tabindex="104" name="user-submit" class="button submit user-submit">Log In</button>
</div>

<input type="hidden" name="user-cookie" value="1" />

<input type="hidden" id="bbp_redirect_to" name="redirect_to" value="/forum/forums/"<input type="hidden" id="_wpnonce" name="_wpnonce" value="546449debb" /><input type="hidden" name="_wp_http_referer" value="/forum/login/" />
</div>
</fieldset>
</form>
</style>
</div>
</fieldset>
</form>
</div>
</html>

code]
0 Rehman . · June 22, 2015
/images/forum/upload/2015-06-22/bde6466473a9068072c3b6639c8c5647.jpg
0 Tatrasiel R · June 22, 2015
oh I am not talking about the login page... Here let me get you a picture.
0 Tatrasiel R · June 22, 2015
You might ahve to right click and open image in a new tab  to see the full image./images/forum/upload/2015-06-22/a9d8a2a5601b6a160b4a28e291adc15a.png
0 Tatrasiel R · June 22, 2015
see how the above is misaligned with the search bar?
0 Tatrasiel R · June 22, 2015
see how the above is misaligned with the search bar?

Sorry if I gave you any false information. This is what happens when I am coding at 3:00 am.
  • 1
  • 2

HTML / CSS / Web Design

107,186 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators