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 1 of 2 12 LastLast
Results 1 to 15 of 27

Thread: Second sidebar

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

    Second sidebar

    I have a page with one sidebar and a main area, styled in CSS. I would like to get another sidebar on the other side, but everything I tried does not work, e.g. margin-left: auto ; margin-right: auto ;

    but all this does is to push to exiasting sidebar down, as if assuming that the space to the left and right belongs to it as a margin.

    Can you help, please?

    Thank you

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    try changing the width of your main area,

    or else, provide your piece of code...

  • #3
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I did, but lost control of everything

    Here is CSS code



    Thank you
    Last edited by qim; 04-05-2013 at 07:40 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello qim,
    Your CSS now shows a 1000px wide .page holding a 200px wide .sidebar and a 780px wide .maincontent.

    See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

    To hold another 200px wide .sidebar, your .page would have to be 1200px wide and your new .sidebar would need to be placed in the correct spot in your markup.

    Have a look at a simple 3 column layout here. Notice only the columns are floated in that example, that may or may not work for you.
    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

  • #5
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your reply. I'mvery new to this business and am obviously not doing things right!

    I changed the CSS code to add a .sidebar2 and changed the widths, like this, in accordance with one of the links you gave me but it does not work. the main section comes all the way to the left; the existing sidebar content gets pushed down below the main; and the new sidebar on the right , I expect exists but is blank
    Now, what I have not done and expect must do is to include something in my form.php. is that right? What, exactly, if you don't mind?

    .sidebar {
    width:200px; float: left;
    }

    .maincontent {
    width:600px;
    autoflow: auto;
    }
    .sidebar2 {
    width:200px; float: right;
    }
    One thing that confuses me is the ### in the CSS code in the link that you sent me. My own code, which I wrote with a lot of online help has dots and sometimes nothing. Can I mix them? Can I, for instance change
    .sidebar {
    width:200px; float: left;
    }
    to #sidebar {
    width:200px; float: left;
    }
    Last edited by qim; 04-05-2013 at 04:29 PM.

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


    One thing that confuses me is the ### in the CSS code in the link that you sent me. My own code, which I wrote with a lot of online help has dots and sometimes nothing. Can I mix them? Can I, for instance change
    #sidebar would refer to a div element in your markup with the ID of sidebar, like this <div id="sidebar">

    .sidebar would refer to a div element in your markup with the CLASS of sidebar, like this <div class="sidebar">

    See this explanation of ID vs CLASS.
    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
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by qim View Post
    Thank you for your reply. I'mvery new to this business and am obviously not doing things right!

    I changed the CSS code to add a .sidebar2 and changed the widths, like this, in accordance with one of the links you gave me but it does not work. the main section comes all the way to the left; the existing sidebar content gets pushed down below the main; and the new sidebar on the right , I expect exists but is blank
    In the new CSS you just posted, where did you get autoflow: auto; ?
    Replace that with overflow: auto; and re-arrange your markup so the floats come first like they do in the example I linked you to.

    Check out the links about validation in my signature line. Validating is a good way to find little mistakes like that.


    In this example, see how I've given a temporary height and background color to the different elements. Just so you can see them while developing your layout.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
     .page, header, footer, .sidebar, > div, 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;
    }
    .sidebar, .sidebar2, .maincontent {height: 400px;} /*demo only*/
    .sidebar {
    	width: 200px;
    	float: left;
    	background: #0f0; /*demo only*/
    }
    .maincontent {
    	width: 600px;
    	overflow: auto;
    	background: #00f; /*demo only*/
    }
    .sidebar2 {
    	width: 200px;
    	float: right;
    	background: #f00; /*demo only*/
    }
    </style>
    </head>
    <body>
    	<div class="page">
    		<div class="sidebar"></div>
    		<div class="sidebar2"></div>
    		<div class="maincontent"></div>
    	<!--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

  • #8
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    SORRY: I did not realize Excavator had posted. Going to have a look now.


    disaster!!

    Well I've added sidebar to the form.php by virtually copying what I had for the other one. The good news is that the boxes thart were in the original sidebar are also in the other and on the right. However the main content is not centered, and the boxes of the sidebars are pushed down below the maincontent instead of being on top.

    I don't know if I should but decided to add the word sidebar2 to this

    .page, header, footer, .sidebar,sidebar2> div, 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);
    }

    This is what it looks like now: Horrrrible


    http://picpaste.com/Capture_CSS-IQvk2Lci.JPG
    Last edited by qim; 04-05-2013 at 05:07 PM.

  • #9
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you Excavator.

    I'm afraid it still does not work. I must be doing somnething wrong, starting with the fact that I din not follow your instrucyions, YET; regarding colour because my page is quite well advances and if I start changing too much I'm lost!

    I re-arranged the markup so the floats come first like they do in the example but it stlill does not work. See image below, please:

    http://picpaste.com/CaptureCSS2-Fohz9QiM.JPG

    PS: what is markup? Code?

  • #10
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,436
    Thanks
    23
    Thanked 629 Times in 628 Posts
    paste your code. Picture do not help. By code I mean html plus css.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #11
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm pasting the original code before I started messin about with it. I'm also including a pic to show what I have which has only one sidebar. What I need is to cennter the maincontent and add a sidebar on the other side. The text for the fields are out of place because I reduced the image by 50% and theur are position:absolute



    http://pastebin.com/EkhJNZUy

    Thank you very much for your interest and help

    qim
    Last edited by qim; 04-05-2013 at 07:41 PM.

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

    PS: what is markup? Code?
    Markup is your HTML. We really need to see that as your CSS alone doesn't give us enough information to help you.

    Even better would be a link to the test site!!
    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

  • #13
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,436
    Thanks
    23
    Thanked 629 Times in 628 Posts
    And better than pastebin is to use the hash tag(#) in the tool bar above the message box to generate [CODE] tags and paste it here.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by qim View Post
    However the main content is not centered, and the boxes of the sidebars are pushed down below the maincontent instead of being on top.
    Look at that demo snippet I posted.

    Have you corrected the error in your CSS?
    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

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

    I had to go out and got lost again: what error in CSS are you referring to? The overflow was ameded in the Test CSS file. The one I sent you now is the original as the other got so messed up I gave up.

    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.

    Here goes the very unprofessional HTML. Everything works very nicely; the problem is that I want another side bar:

    HTML document text
    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>FORM</title>

    <link rel="stylesheet" href="register.css">



    </head>

    <body>

    <div class="page">

    <header>
    <img title="Lisboa" alt="Lisboa" src="images/Lisboa.jpg">
    <h1>Registration Page</h1>
    </header>



    <div class="maincontent">


    <div class="loginarea">


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

    <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>


    </center>

    <br>
    <center><h2>Agency details</h2><br><br>


    <DIV style="position: absolute; left:660px; width:140px; height:25px">Agency name</DIV>
    <DIV style="position: absolute; right:440px; 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:700px; width:40px; height:25px">City</DIV>
    <DIV style="position: absolute; right:500px; width:40px; height:25px">Country</DIV><br>
    <p><label for="City"> </label><input type="text" name="city" />


    <label for="Country"> </label><select name="country">
    <option value="">Please, choose...</option>
    <option value="Afganistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    <option value="Virgin Islands (USA)">Virgin Islands (USA)</option>
    <option value="Wake Island">Wake Island</option>
    <option value="Wallis &amp; Futana Is">Wallis &amp; Futana Is</option>
    <option value="Yemen">Yemen</option>
    <option value="Zaire">Zaire</option>
    <option value="Zambia">Zambia</option>
    <option value="Zimbabwe">Zimbabwe</option>
    </select></p>

    <br>
    <DIV style="position: absolute; right:580px; width:40px; height:25px">Website</DIV><br>
    <p><label for="Website"> </label><input type="text" name="website" /></p><br>

    <DIV style="position: absolute; left:700px; width:40px; height:25px">Email</DIV>
    <DIV style="position: absolute; right:440px; width:140px; height:25px">Repeat Email</DIV> <br>


    <p><label for="Email"></label><input type="text" name="email" />
    <label for="Repeat email"></label><input type="text" name="repeat-email" /></p>

    <br><br>

    <center><h2>Contact details</h2><br><br>

    <DIV style="position: absolute; left:660px; width:140px; height:25px">Person responsible</DIV>
    <DIV style="position: absolute; right:437px; width:140px; height:25px">Position in Agency</DIV> <br>

    <p><label for="Person responsible"> </label><input type="text" name="person-responsible" />
    <label for="Position in Agency"> </label><input type="text" name="position-in-agency" /></p>
    <DIV style="position: absolute; left:700px; width:40px; height:25px">Telephone</DIV>
    <DIV style="position: absolute; right:490px; width:40px; height:25px">Fax</DIV> <br>

    <p><label for="Telephone"> </label><input type="text" name="telephone" />
    <label for="Fax"></label><input type="text" name="fax" /></p>

    <br><br>
    <input type="submit" value="Submit" name="submit"><input type="reset" value="Reset">

    <br><br><br><br><br>
    </form>

    </div>

    </div>




    <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>

    <p> <a href="/index.html">Home</a> </p>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    </ul>
    </nav>


    </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>

    </div>

    </body>

    </html>
    Last edited by qim; 04-05-2013 at 07:49 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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