<div class="container">
<div class="leftclass" style="float:left">
<div class="topbar">
menu1 menu2 menu3 menu4
</div>
<div class="bottombar">
menu5 menu6 menu7 menu8
</div>
</div>
<div class="rightclass" style="float:right">
<table class="table responsive">
<tr><td>info1</td><td>link1</td></tr>
<tr><td>info2</td><td>button2</td></tr>
</table>
</div>
</div>
I want to have responsive container with left side - two bars(one below other) containing menu-items and right side - table with some info and button-links.
Moreover I want this container to be fixed positioning and responsive for zooming in bootstrap
You could be better off building the foundations of your site with the Bootstrap Grid System. It's very flexible and will most likely get you most of the way there.
Check out the examples.
Related
I've got a problem with my header menu. The menu div is inside a container (width 1240px) and the div is 100%. I would like to have a full green colored menu (like above from Stack Exchange).
Can I change it with CSS? Could anybody help me please?
You'll need to take the menu div out of the container and place it above.
If you are using bootstrap, you could use container-fluid, if not follow the answer of Jordan and move the menu out of the container
Assuming this is your situation
<div class="container" width="1240px">
<div class="menu" width="100%">..</div>
</div>
You can either do the following
<div class="menu" width="100%">..</div>
<div class="container" width="1240px">
</div>
or
<div class="container-fluid">
<div class="menu" width="100%">..</div>
</div>
What i have is sidebar and on right side i have content. What i want is that both sides are in container but that are both full width . This is my demo: https://jsfiddle.net/DTcHh/19067/
So i want that left background color start from beging of page but text inside is in container and also i want that background color of right content go to the end of page but text is in container. Any suggestion?
<div class="container">
<div class="col-md-3">
<div class="left_sidebar">
menu
</div>
</div>
<div class="col-md-9">
<div class="right-content">
content
</div>
</div>
</div>
Its simple, wrap the colored containers above the container class and use two different containers:
<div class="left_sidebar">
<div class="container">
<div class="col-md-3">
menu
</div>
</div>
</div>
<div class="right-content">
<div class="container">
<div class="col-md-9">
content
</div>
</div>
</div>
Here is a working Fiddle
REMOVED other edits because EDIT 3 should do the trick best
EDIT 3
Here it is, that must be it for sure now. The trick is done with a linear gradientand a custom container above your bootstrap container.
See Fiddle
What you're asking, is by default impossible, since the .container class has a set width on different viewports and it is also horizontally "centerised" by margin:auto.
To achieve what you are trying you will have to follow a different "logic".
I would propose something like this:
<div class="left-sidebar col-md-3">
<div class="sidebar-menu col-xs-6 pull-right">
menu
</div>
</div>
<div class="right-content col-md-9>
<div class="content-text col-xs-10>
content
</div>
</div>
I propse this solution in order to stay in the same "flow" as your code. You could also, just play with paddings, which makes more sense.
use class row before col div
<div class="row">
<div class="col-md6"></div>
<div class="col-md-6"><div>
</div>
So I want the following layout:
Here is an artists mock-up:
But here is what I ended up with after trying for quite a few days:
I need help to make the last elements line up right. If I use the wrong components you are free to change them. The site needs to be mobile friendly. I have made a fiddle here.
.
I also seem to have the issue of being unable to scroll vertically on the page if overflow occurs.
In bootstrap 3 seems a simple layout like this (just a suggestion)
<div class='container-fluid'>
<div class='navbar navbar-default navbar-fixed-top'> .... <(div>
</div> <!-- end container full width -->
<div class='container'><!-- begin container center margin auto -->
<div class=' col-md-12'><img src='yourlink'></div>
<div class=' col-md-12' ><h1>Title</h1></div>
<div class='jumbotron col-md-12' </div>
<div class='row col-md-12>
<div class='col-md-6>
... content for left lower box
</div>
<div class='col-md-6'>
<div> content for r2ght lower 1 box</div>
<div> content for right lower 2 box</div>
</div>
</div>
</div><!-- end of container --!>
with a background image
I'm currently in the process of designing part of my web page, but have encountered difficulty positioning the contact cards as they appear below:
Currently the second column of contact cards is not vertically aligned because of the follwing markup structure. The <h2 class="text200 margbottom margtop">Contact Us</h2> is 'pushing' the other 2 contact cards in the first grid 4 down vertically, but of course this is not happening in the second grid 4 as no <h2> is present. Is there any way to have the contact cards positioned at the same height so they are aligned horizontally as shown in the image above by amending my HTML markup?
Here is the link: http://www.bestcastleintown.co.uk/pg/
<div class="grid_4">
<h2 class="text200 margbottom margtop">Contact Us</h2>
<div class="contact_block_tiny trophy clearfix">
<!-- content -->
</div>
<div class="contact_block_tiny target clearfix">
<!-- content -->
</div>
</div>
<div class="grid_4 omega">
<div class="contact_block_tiny drink clearfix">
<!-- content -->
</div>
<div class="contact_block_tiny editorial clearfix">
<!-- content -->
</div>
</div>
Is the "Contact Us" the heading for the first column or for both columns? If it is the heading for both columns, then why do you put it inside the first column? That's not where it belongs semantically, and consequentially breaks your layout.
I am having hard time aligning elements inside the footer of a jQuery Mobile Page.
We have three different pieces of information to display: COPYRIGHT, VERSION NUMBER and CONNECTION STATUS. The goal is to align the footer in such a way that COPYRIGHT is left aligned, VERSION NUMBER is centered and CONNECTION STATUS is right aligned all on the same footer line.
I tried the following which unfortunately, did not work:
<div data-role="footer">
<span style="text-align:left">COPYRIGHT</span>
<span style="text-align:center">VERSION NUMBER</span>
<span style="text-align:right">CONNECTION STATUS</span>
</div>
Any suggestions how to accomplish this alignment setup?
Many thanks!
You should use jQuery Mobile grid like this:
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
<div class="ui-grid-b">
<div class="ui-block-a" style="text-align: left;">COPYRIGHT</div>
<div class="ui-block-b" style="text-align: center;">VERSION NUMBER</div>
<div class="ui-block-c" style="text-align: right;">CONNECTION STATUS</div>
</div><!-- /grid-a -->
</h3>
</div>
And here's a working example: http://jsfiddle.net/Gajotres/e2uaU/
And style it as you want. Everything should be wrapped in h3 tag so that footer can retain its height.