Results 1 to 10 of 10

Thread: Columns aligning

  1. #1
    Junior Member
    Join Date
    Aug 2015
    Posts
    5

    Solved: Columns aligning

    Hello,

    I am busy adjusting my website and want eventually to make it more mobile friendly. My designer has left and now I have to do the designing as well myself. So far it goes pretty good, but now I run into a problem with outlining my colums.

    I have a Navbar and want to align some items. But now my second part of the columns (the col-md-11) is not filling up the space. But the cols count up to 12 everytime. Any ideas what I am doing wrong (or should change)?
    Currently I have the following code:

    Code:
    <div class="container fluid>
       <div class="navbar-header col-md-1">
       </div>
       <div class="collapse navbar-collapse col-md-11">
            <ul class="nav navbar-nav col-md-3">
           </ul>
            <ul class="nav navbar-nav col-md-4">
           </ul>
            <ul class="nav navbar-nav navbar-right col-md-5">
           </ul>
       </div>
    </div>
    Last edited by Coder; 08-08-2015 at 06:29 PM. Reason: Solved

  2. #2
    Hi coder! Welcome to the community, I am sorry to hear about your troubles.. I may not be a rocket scientist.. but look at your first div it doesnt have an ending quotation.. so the class isnt being closed.. causing script to be screwy.. Also, when posting code when looking for an answer than please post the whole code not just a bit of it otherwise i dont know what your trying to do, if your code is that its self..

    Looks like you have a fluid container which is good for multi platforming but now your trying to make a navigation menu all wrong dont use the nav classes unless your using TBS's navigation bar that has been specified under the components section under navbar, personally how I would do what you are attempting to do is this;

    Code:
    <div class="row-fluid"> <!-- start fluid row-->
    	<div class="top_bar col-md-12"> <!-- start base col -->
    		<div class="col-md-1"><!--start branding-->
    			<img src="images/filler.jpg" class="picture" />
    		</div><!--end branding-->
    		<div class="item_control col-md-11"><!-- nav bar content-->
    			<div class="col-md-3"><!-- first section -->
    			</div><!--first section close-->			
    			<div class="col-md-4"><!-- second section -->
    			</div><!--second section close-->	
    			<div class="col-md-5"><!-- third section -->
    			</div><!--third section close-->
    		</div><!--end nav bar content-->
    	</div><!--end base col-->
    </div><!--end container -->
    Style
    Code:
    .top_bar{
    background-color:#222; 
    width:100%; 
    height:45px;	
    }
    .picture{
    width:45px; 
    height:45px;	
    }
    .item_control{
    color:#FF8000;	
    }
    I did this with out multiplatform in mind, you can simply add some code into your script searching the OS and sending them to a specially built website version like facebook does (m.facebook.com), I love playing with cols in div format, you can add the listing tags inside each of the divs and style them how ever you would like so it could be like this:

    Code:
    <div class="row-fluid"> <!-- start fluid row-->
    	<div class="top_bar col-md-12"> <!-- start base col -->
    		<div class="col-md-1"><!--start branding-->
    			<img src="images/filler.jpg" class="picture" />
    		</div><!--end branding-->
    		<div class="item_control col-md-11"><!-- nav bar content-->
    			<div class="col-md-3"><!-- first section -->
                             <ul class="something">
                              <li>Your item</li>
                             </ul>
    			</div><!--first section close-->			
    			<div class="col-md-4"><!-- second section -->
    			</div><!--second section close-->	
    			<div class="col-md-5"><!-- third section -->
    			</div><!--third section close-->
    		</div><!--end nav bar content-->
    	</div><!--end base col-->
    </div><!--end container -->
    If you need anything else feel free to message me

  3. #3
    Junior Member
    Join Date
    Aug 2015
    Posts
    5
    Hi Disconnected,

    Thanks for your message. I had a link to my website where the complete code was. But after 1.5 day without activity on the forum, I removed that. I wasn't thinking of getting an answer soon and already did it otherwise, without a center middle part (which was my whole idea).
    I'll look at this later today. Thanks so far.

    Jarry

  4. #4
    Sorry, I usually lurk on the forums, my internet was out for the past few days otherwise I would have looked into it the second you made your post

    Cheers

  5. #5
    Junior Member
    Join Date
    Aug 2015
    Posts
    5
    Hi Disconnected, Thanks for your message. No need to apologize! It is only appreciated if you reply. Maybe I was a little unpatient. I am also not a rocket scientist and pretty new with bootstrap. Thanks for your info. I couldn't get it working though. I have added the colsback again. I try to center the middlepart which was my problem since the beginning and I though with cols I could do that better. You can see my current version on: http:///www.eubepro.com:8000. There you can see that when I add cols it just does not fill up the complete top bar. Hope the visual information will give you a clue of my problem. Hope you can help in solving it.

    Thank you very much in advance!

    ps: Why using col-md, isn't it better for better compatibility to use col-xs?

  6. #6
    First, is this an open source project that your planning to sell, like Vbulletin?

  7. #7
    So im pretty tired, but i managed to fit the time in to do this script, i looked at your nav bar and it seems pretty cluttered.. and personal preference I hated it, so I made a cleaner version of it that you may or may not want to use, if not it will show you how to do something like you are trying to do;

    Style
    Code:
    .top_bar{
    background-color:#222; 
    width:100%; 
    height:45px;	
    }
    .brander{
    font-size: 20px;
    padding-top:8px;	
    color:#FFFFFF;
    }
    .brander:hover{	
    color:#777;
    cursor:pointer;
    }
    .center{
    text-align: center;	
    }
    .time{
    font-size: 14px;
    padding-top:13px;	
    color:#FFFFFF;	
    display: block;
    }
    .log{
    font-size: 14px;
    padding: 13px 0px 0px 13px;	
    color:#FFFFFF;	
    display: block;
    height:45px;
    width:150px;
    }
    .log:hover{
    background-color:#777;	
    color:#FFFFFF;	
    display: block;
    cursor:pointer;
    }
    .order{
    font-size: 14px;
    padding:13px 0px 0px 13px;	
    color:#FFFFFF;	
    display: block;
    background-color:#777;
    height:45px;
    }
    .icons{
    font-size: 14px;	
    color:#FFFFFF;	
    display: block;
    height:45px;
    }
    .i{
    padding: 16px 0px 0px 14px;	
    background-color:#222;	
    height:45px;
    width:40px;
    }
    .i:hover{
    background-color:#777;	
    cursor:pointer;
    }
    .on{
    padding: 16px 0px 0px 14px;	
    background-color:red;	
    height:45px;
    width:40px;
    }
    .on:hover{
    cursor:pointer;	
    }
    .lang{
    background-color:red;	
    height:45px;
    width:40px;
    border:0;
    border-radius:0;
    margin-top:-3px;	
    }
    .lang:hover{
    color:#fff;	
    }
    I dont know if you have it or not but I used both bootstrap and font awesome for this, so once you link them both to the file you can just paste and go from there;

    Code:
    <div class="row-fluid"> <!-- start fluid container -->
    	<div class="top_bar col-md-12"> <!-- start base col -->
    		<div class="col-md-1"><!--start branding-->
    			<p class="brander">Eubepro</p> <!--brand-->
    		</div><!--end branding-->		
    		<div class="col-md-2"><!--start log section-->
    			<p class="log">Not Logged On &nbsp; <i class="fa fa-chevron-down"></i></p><!-- sets up your not logged in bar with the chevron glyph from font awesome -->
    		</div><!-- close log section -->
    		<div class="col-md-5"><!--order section-->
    			<p class="center order">Order ID : F59D3-3J38D-DXL32-DL3D0</p><!-- give them the order id, can be up to 40 characters -->
    		</div>	<!-- close order section -->
    		<div class="col-md-2"> <!-- start icons -->
    		<p class="icons"><i class="i fa fa-wrench"></i><i class="i fa fa-calendar"></i><i class="on fa fa-power-off"></i><button class="btn lang">EN</button></p>
    		</div><!-- close icons -->
    		<div class="col-md-2"><!-- Set your time here -->
    			<p class="center time">August 6th 2015 : 9:40 PM</p>
    		<div><!--close time section -->	
    	</div><!--end base col-->
    </div><!--end container -->

  8. #8
    Junior Member
    Join Date
    Aug 2015
    Posts
    5
    Hi Disconnected,

    Thanks for your time. I'll PM you about the rproject and will look into you code later today!
    Thanks for taking the time to aid!

  9. #9
    Junior Member
    Join Date
    Aug 2015
    Posts
    5
    Thanks, I noticed what you did and got it aligned correctly now as I wanted. But now I found some new issues about Nav-bar collapse etc. But at least this is solved, I will continue on the next things. Thank you very much!

  10. #10
    Your welcome, hope it all works out for you

Posting Permissions

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