7 Replies - 806 Views - Last Post: 30 April 2013 - 03:13 AM

#1 qim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 17-April 13

padding problems

Posted 29 April 2013 - 02:19 PM

I have a sidebar with a log-in panel and now decided to add another just above in a separate div. Somehow, when I adjust the padding in the new one it affects also the other. Yet, I have text-align:left in one and text-align:center in the other and those seem to be independent. I don't understand what is happening. The main problem is that the code for the earlier panel was not written by me and I don't really understand it.

Any help in making me introduce padding-left in the .box1 without affecting the other will be much appreciated.

.sidebar {
	width:200px; float: left;
	background-color:#ffffdb;
	height:970px;
	text-align:center;	
}





nav, .loginarea {
	background-color:#D4D3BA;
	margin: 28px 0;
	padding:18px 0 18px 6px;
	text-align:left;
}

.loginarea label, .loginarea input[type=submit] {
	cursor: pointer;
}

.loginarea input {
	width: 157px;
	margin-bottom: 18px;
}

nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	
}

.sidebar .box1 {
	border: solid 1px #CCCCCC;
	background-color: #D4D3BA;
	float:left;
	padding-left:0;
	margin: 4px 0px 8px 0;
height:100px;
width:200px;
text-align: center;

}

Attached image(s)

  • Attached Image

This post has been edited by qim: 29 April 2013 - 02:21 PM


Is This A Good Question/Topic? 0
  • +

Replies To: padding problems

#2 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3818
  • View blog
  • Posts: 13,534
  • Joined: 12-December 12

Re: padding problems

Posted 29 April 2013 - 03:16 PM

Some HTML would help, together with a more precise description of what is going wrong (as the screenshot looks okay to me).

And which browsers are you testing this in? With an older version of IE, invalid or missing DOCTYPE, or malformed HTML, IE may drop into a former mode, where the width includes the padding. Otherwise, the standard is to exclude the padding from the width.

This post has been edited by andrewsw: 29 April 2013 - 03:16 PM

Was This Post Helpful? 0
  • +
  • -

#3 qim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 17-April 13

Re: padding problems

Posted 29 April 2013 - 11:05 PM

Hi

The problem is that I want to use padding on the panel above and the one below starts misbehaving. This post is meant to try and understand what is going on. I'm quite new to this and understand that the sidebar is in a dix; that I added another div withun the div, but can'y understand how the login panel sits inside the sidebar without a dic. It seesm to use nav, which I umnderstood to be for navigation bars.

here is the html

<?php session_start();?> 
<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">

	<title>Page Title</title>
	
	<link rel="stylesheet" href="style.css">
	 
</head>


<body>




<?php if(!isset($_SESSION['username']) && $_SESSION['active'] != 1) 
{ 
?>
    
    <div id="popup">
        <a href="#x" id="close">X</a>
        <form class="logo" action="./login.php" method="post">
        <label for="iata">Iata number</label>
        <input id="iata" type="text" name="iata">
        <label for="username">Username:</label>
        <input id="username" type="text" name="username">
        <label for="password">Password:</label>
        <input id="password" type="password" name="password">
<br><br>
        <a href="./form.php">Register</a>
        <a href="./Forgot.html"id="middle">Forgot Password?</a>
        <input type="submit" value="Login">
        
       
        <br>
    </form>
    </div>
<?php 
} 
?>





	
	


	<div class="sidebar">
	
<a href="/index.html"><img src="images/logocream.png" title="Home" alt="Home button"/></a>

<br><br><br>

<div class="box1">
<br>
<b>You arrived at this page because you have an older version of Internet Explorer </b>
<br><br><br><br><br<

	</div>

<?php if(!isset($_SESSION['username']) && $_SESSION['active'] != 1) 
{ 
?> 
				
		<div class="loginarea">
			
			 <form method="post" action="./login.php" class="logo"> 
			<div>
                                <label for="iata">Iata number</label>
				<input name="iata" id="iata" type="text">
				
				<label for="username">Username:</label>
				<input name="username" id="username" type="text">
				<label for="password">Password:</label>
				<input name="password" id="password" type="password">
				<input type="submit" value="Login">
				
				<a href="./Forgot.html">Forgot Password?</a><br>
				
<br>				<a href="./form.php">Register</a>
<br><br><br>
			     
			</div>
			</form>
			
 		<!--end loginarea--></div>
 		
 		<?php 
} 
?> 

 		
             <!--end sidebar--></div>

	
	
		
			
	      
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3818
  • View blog
  • Posts: 13,534
  • Joined: 12-December 12

Re: padding problems

Posted 30 April 2013 - 02:02 AM

You need to post the HTML without the PHP. View the source of the resultant page.

You should validate the HTML (and CSS) as well - it is malformed. There are links in my signature.

What's with all the br-tags :dontgetit: ? Use css to properly format the page.
Was This Post Helpful? 0
  • +
  • -

#5 qim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 17-April 13

Re: padding problems

Posted 30 April 2013 - 02:08 AM

Hi thanks, I'll do the validating.

meanwhile could you explain the difference between nav and div in the css code? I would have thought that for the login panel to reside in the sidebar you would need something like .sidebar .loginarea { etc...

if I get to understand this I guess I can work out why the padding in .sidebar .box 1 { etc, seems to affect the login panle.

This post has been edited by qim: 30 April 2013 - 02:09 AM

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3818
  • View blog
  • Posts: 13,534
  • Joined: 12-December 12

Re: padding problems

Posted 30 April 2013 - 02:26 AM

I would still prefer to see the HTML page, but there are no nav-tags mentioned in your previous code.

There is nothing special about the HTML5 nav-tag, it is just intended to contain navigation elements.

MDN reference
Was This Post Helpful? 0
  • +
  • -

#7 qim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 17-April 13

Re: padding problems

Posted 30 April 2013 - 02:33 AM

Hi

I think there is a misunderstanding. I sent you the html:all of it. I have a main page that includes the login popup and also the old login panel. Because the the opoup does not work with IE8 I copied the html page, gave it another name and deleted everything that was not needed, as all I want now is the sidebar with the login panel and the exctra box above to explain why the user gets there. It all works fine.

If you look at the css in my forst post you will see that the login panel turns up in the sidebar via a .nav and that is the first thing that i don't understand. When I do, I guess I can work out why when I introduce padding in the box1 the login panel reacts adversely.

As for the html without the php , do you mean strip the above code of the php and rsend it with just html? I left it there so that you can see that this is part of a login procedure connecting to the server.

This post has been edited by qim: 30 April 2013 - 02:40 AM

Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3818
  • View blog
  • Posts: 13,534
  • Joined: 12-December 12

Re: padding problems

Posted 30 April 2013 - 03:13 AM

Yes, there are misunderstandings. Perhaps someone else will assist you. Good luck!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1