Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 2 of 2 FirstFirst 12
Results 16 to 27 of 27

Thread: Second sidebar

  1. #16
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by qim View Post

    Here goes the very unprofessional HTML. Everything works very nicely; the problem is that I want another side bar:
    When posting code in the forum, please use the code tags, [code][/code] - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  2. #17
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by qim View Post

    I tested the snippet in EditPlus and it gave me a green sidebar on the left, a right sidebar on the right; and a blue area below the green sidebar, rather than in the center.
    I don't know what EditPlus is but it is not a browser. You should test your markup the same way it's going to be used in the real world, in a browser. That's the reason for the suggestion in my signature line.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  3. #18
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Look at your site this way -
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>FORM</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    body { background: #ccc url(../images/woodgrain.jpg); }
    .page, header, footer, .sidebar, .sidebar2, nav {
    	-webkit-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.5);
    	box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.5);
    }
    .page {
    	width: 1000px;
    	margin: 28px auto;
    	padding: 8px;
    	background: #fff;
    }
    header {
    	margin-bottom: 38px;
    	background: #BABD98;
    	border: 10px solid #BABD98;
    	text-align: center;
    }
    .sidebar {
    	width: 200px;
    	float: left;
    }
    .sidebar2 {
    	width: 200px;
    	float: right;
    }
    	nav, .loginarea {
    		background: #D4D3BA;
    		margin-bottom: 28px;
    		padding: 18px;
    	}
    	nav ul {
    		margin: 0;
    		padding: 0;
    		list-style-type: none;
    	}
    .maincontent {
    	height: 400px; /*demo only*/
    	overflow: auto;
    	background: #f00; /*demo only*/
    }
    footer {
    	padding: 8px;
    	clear: both;
    	background: #808000;
    	text-align: center;
    }
    footer ul {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    }
    footer ul li { display: inline;}
    h1, h2, h3 { margin: 0; }
    </style>
    </head>
    <body>
    	<div class="page">
    		<header> 
    			<img title="Lisboa" alt="Lisboa" src="images/Lisboa.jpg">
    			<h1>Registration Page</h1>
    		</header>
    		<div class="sidebar">
    			<nav>
    				<ul>
    					<li class="lh">Menu</li>
    					<li><a href="#">Privacy Policy</a></li>
    					<li><a href="#">Link</a></li>
    					<li><a href="#">Link</a></li>
    					<li><a href="#">Link</a></li>
    				</ul>
    			</nav>
    			<nav>
    				<ul>
    					<li><a href="/index.html">Home</a></li>
    					<li><a href="#"></a></li>
    					<li><a href="#"></a></li>
    					<li><a href="#"></a></li>
    				</ul>
    			</nav>
    		<!--end .sidebar--></div>
    		<div class="sidebar2">
    			<nav>
    				<ul>
    					<li class="lh">Menu</li>
    					<li><a href="#">Privacy Policy</a></li>
    					<li><a href="#">Link</a></li>
    					<li><a href="#">Link</a></li>
    					<li><a href="#">Link</a></li>
    				</ul>
    			</nav>
    			<nav>
    				<ul>
    					<li><a href="/index.html">Home</a></li>
    					<li><a href="#"></a></li>
    					<li><a href="#"></a></li>
    					<li><a href="#"></a></li>
    				</ul>
    			</nav>
    		<!--end .sidebar2--></div>
    			<div class="maincontent">
    			<!--end .maincontent--></div>
    		<footer>
    			<ul>
    				<li><a href="#">Link</a></li>
    				<li><a href="#">Link</a></li>
    				<li><a href="#">Link</a></li>
    				<li><a href="#">Link</a></li>
    			</ul>
    		</footer>
    	<!--end .page--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  4. #19
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much Excavator

    I've been monitoring Page 1 of the thread... waiting for a reply and just realized your answer came in a following page.

    I've tested your code and, yes, that is exactly what I need. I guess this will replace my css file, but as I see code that is in my php file I wonder is I shoudl get rid of both and rebuild this one alone?

    qim
    Last edited by qim; 04-05-2013 at 09:00 PM.

  5. #20
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

    First of all, thank you very much. I have managed to get everything together and it looks greart. I have one problem and one doubt:

    The problem: you put in a slider that looks nice but it means that my text labels which were fixed (position: absolute) are now nowhere near where they shiould be. How can I solve that?

    the doubt: before I had a form.php and a regfister.css that then connected to my database.php.

    Does this mean that now instead of form.php and register.css I should only have this new code? And what extension should I give it? HTML/CSS?

  6. #21
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    The problem: you put in a slider that looks nice but it means that my text labels which were fixed (position: absolute) are now nowhere near where they shiould be. How can I solve that?
    We really need to see the most current version of your work to know what you're talking about. Like I keep saying, a link to the test site is always best.





    Does this mean that now instead of form.php and register.css I should only have this new code? And what extension should I give it? HTML/CSS?
    You should be able to append the new code to your existing documents so none of the names or links change.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  7. #22
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Excavator. I have not published; I am doinf everything locally until it is ready.

    the slide is new and I expect ylou added it. It is nice. Puts everything within the single screen without need to scoll down. My problem is that in the original form I had trouble centering the text above the fields, so I used position:absolute. That in fact created another problem because if you look at the page in a smaller screen the text is not where it is supposed to be. Maybe it has to do with using pixels instead of percentages?

    This is an example from the code I sent earlier:

    <DIV style="position: absolute; left:700px; width:40px; height:25px">Username</DIV>
    <DIV style="position: absolute; right:445px; width:120px; height:25px">Repeat username</DIV> <br>

    <center> <p><label for="Username"> </label><input type="text" name="username" />
    <label for="Repeat Username"></label><input type="text" name="repeat-username" /></p>

    <DIV style="position: absolute; left:700px; width:40px; height:25px">Password</DIV>
    <DIV style="position: absolute; right:445px; width:120px; height:25px">Repeat password</DIV> <br>

    <p><label for="Password"> </label><input type="text" name="password" />
    <label for="Repeat Password"></label><input type="text" name="repeat-password" /></p><br>
    How can I get the text to stay above each field box and centred with it?

  8. #23
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok I manged to publish something:

    http://pintotours.net/coding/coding.html

    Thank you

    qim

  9. #24
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by qim View Post
    the slide is new and I expect ylou added it. It is nice.
    No, you added it with this bit highlighted in red -
    Code:
    .maincontent {
        background: none repeat scroll 0 0 #BABD98;
        height: 400px;
        overflow: auto;
    }
    That was for demo only when there was no content in it. Leaving that in makes the overflow: auto; make a scrollbar to handle the overflow.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  10. #25
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good. I'd like to keep it.

    Do ylou know how I can place the text labels above the fields in such a way that they stay there as you scroll and also in smaller screens?

    You've been very helpful.

    Thank you

    qim

  11. #26
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

    I found a way of doing what I wanted: placing the text labels above the field boxes. However, I now have a big problem and don't know how to get round it. My form was based on
    <form method="post" action="./database.php">

    and I have just realized that "form" and "div" don't go together. Is there a quick way of converting from form to div so that the database.php gets the correct information? What I added to the css file works well.

    This is the beginning of what I ended up with:

    <form method="post" action="./database.php">


    <div class="fieldBlock">

    <div class="username">Username</div>

    <input id="username" value="" size="20"/>

    </div>



    <div class="fieldBlock">

    <div class="repeat-username">Repeat username</div>

    <input id="repeat-username" value="" size="20"/>

    </div>
    <br><br><br><br>





    <div class="fieldBlock">

    <div class="password">Password</div>

    <input id="password" value="" size="20"/>

    </div>



    <div class="fieldBlock">

    <div class="repeat-password">Repeat password</div>

    <input id="repeat-password" value="" size="20"/>

    </div>
    <br><br><br><br>

    <DIV style="position: absolute; left:540px; width:140px; height:25px">Agency name</DIV>
    <DIV style="position: absolute; right:560px; width:140px; height:25px">IATA number</DIV> <br>
    <p><label for="Agency name"> </label><input type="text" name="agency-name" />
    <label for="IATA number"> </label><input type="text" name="iata-number" /></p>

    <DIV style="position: absolute; left:600px; width:40px; height:25px">City</DIV>
    <DIV style="position: absolute; right:630px; width:40px; height:25px">Country</DIV><br>
    <p><label for="City"> </label><input type="text" name="city" />
    Last edited by qim; 04-08-2013 at 02:50 PM.

  12. #27
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Resolved!
    Last edited by qim; 04-08-2013 at 03:21 PM.


 
Page 2 of 2 FirstFirst 12

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •