Fluid width layout using CSS - css

I am trying to put together a page that has a header that spans accross the page.
the header contains menu items and looks something like this (ASCII rendering below)
<------ Fixed Width ----------> <----------- Variable Width (Depends on Screen Width) -->
-----------------------------------------------------------------------------------------
LOGO HERE (Fixed Width) | Menu One | Menu Two | menu Three | Menu Four
| | | |
-----------------------------------------------------------------------------------------
I have designed this in HTML like this:
<div id="topMenu">
<div id="topMenuLogo"><!-- flash logo stuff here --></div>
<div id="topMenuContainer">
<div id="topMenuTopBar" class="right-align">
<div class="useroption floatleft">Action 1</div>
<div class="useroption floatleft">Action 2</div>
<div class="spacer"> </div>
</div>
<div id ="topMenuNavBar">
<div id=topmenuMenuContainer">
<ul>
<li>Menu One</li>
<li><!-- Other menus follow below ...... --></li>
</ul>
</div>
</div>
<div class="spacer"> </div>
</div>
<div class="spacer"> </div>
</div>
where the CSS class 'spacer' matches the pattern {height:1px;clear:both;}
I want to be able to write the above so that the page dynamically expands to fit the screen regardless of the resolution. The logo has a fixed width so that does not change, but I want the topMenuContainer dive element to adjust its width dynamically depending on the screensize. basically, that element will contain the following:
A topMenuContainer element that expands or contracts depends on
the screen resolution
A topMenuTopBar that is floated right within the topMenuContainer element
A topMenuNavBar that is floated left within the topMenuContainer element
I would be very grateful if someone could show the CSS required to structure the above HTML snippet in the manner I have described.

This should be your #1 resource for general layout questions like these:
http://layouts.ironmyers.com/
You will find any CSS layout you could possibly want on his site. If you don't know CSS yet, you can check out the tutorials at w3schools:
http://www.w3schools.com/css/

Related

How to change fxFlex size on Window Size change?

I have two divs within my main fxLayout Container. They look like this:
Where the red box is the fxLayout Container, the blue box is the Information and the black box is the Chart. As may be noted, the charts div is larger than the information box's div. I would like it to stay this way when resized at all times. In order to achieve this, I have done the following:
information.component.html:
This component is simply a box with several mat-card. It is within a fxLayout container as well.
<div id = "dataInformation" fxLayout="column" fxLayoutAlign="space-evenly center" fxLayoutGap="5%">
<h1>CrowBox Information</h1>
<!-- ...CODE FOR DROPDOWN BUTTON... -->
<!-- ...EXAMPLE MAT-CARD... -->
<mat-card>
<mat-card-title>NICKNAME</mat-card-title>
<mat-card-content>{{ crowboxNickname }}</mat-card-content>
</mat-card>
<!-- ...SAME MAT-CARDS JUST WITH DIFFERENT PROPERTIES... -->
</div>
The only styling applied is width:75% for .mat-card and font related styling.
I then call this component in another component.
data.component.html
In here, I create the charts, call the information.component and place all of this within another fxLayout container. I also specify what should happen if the window is resized. I would like for the size proportions to remain the same when the container goes from a row to a column. However, for some reason, fxFlex.xs does not seem to be working for me and the chart ends up looking really small as can be seen here:
<div class="wrapper" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-evenly center" >
<div id = "charts" fxFlex="60" fxFlex.xs="60">
<!-- THE CHART -->
<div *ngIf="showCoinsDeposited === false" >
<canvas baseChart
[datasets]="crowOnPerchChartData"
[labels]="crowOnPerchChartLabels"
[options]="crowOnPerchChartOptions"
[legend]="crowOnPerchChartLegend"
[chartType]="crowOnPerchChartType"
[colors]="crowOnPerchChartColor"
>
</canvas>
</div>
<!-- ...ANOTHER CHART HERE... -->
</div>
<!-- THE INFORMATION BOX -->
<div fxFlex="27" fxFlex.xs="27" style="border: blue; border-style: double;">
<app-information [crowsOnPerch]="crownsOnPerchValues" [coinsDeposited]="coinsDepositedValues"></app-information>
</div>
</div>
I have set fxFlex.xs for the chart to be 60 and fxFlex.xs for the information box to be 27. I do not think this is being accurately reflected and cannot seem to figure out why. I would like the chart to fill the width of the screen and be much larger. How might I achieve this?
Note: The charts and wrapper do not have any positional styling (only fonts and borders).
If I'm not mistaken, you want the two boxes on different rows while using the xs screens.
Note: fxFlex="60" is a shorthand for fxFlex="1 1 60%".
I think it's better to remove the fxLayout.xs="column" and use fxLayout="row wrap" and add fxFlex.xs="100" or whatever for your chart div. Then after adding fxFlex.xs for the next box, if the sum of the sizes is more than 100, the next item would go to the next row.
<div fxLayout="row wrap" fxLayoutAlign="space-evenly center">
<div fxFlex="60" fxFlex.xs="87" style="background: green">
box1
</div>
<div fxFlex="27" fxFlex.xs="40" style="background: yellow;">
box2
</div>
</div>
Also, there are lots of useful information and examples about flex-layout in here and here.

Using Gutters in Bootstrap 4 Layout

I'm trying to use Bootstrap 4 to create a layout that has a gutter on each side. This layout has a nav row and a subnav row. I'm trying to create something that looks like this:
+-----------------------------------------------------------------------+
| Welcome Monday |
+-----------------------------------------------------------------------+
| Home 11.27.2017 |
+-----------------------------------------------------------------------+
| Content will go here and wrap multiple lines and fill up the |
| screen. |
| |
| |
| |
| |
+-----------------------------------------------------------------------+
I want to use the nav element for styling. In addition, I want to collapse the second row on mobile, which is another reason to use the nav element. Still, I can't seem to figure out how to use a gutter when in desktop mode. When I use a row, it doesn't use the full available width. Currently, I'm using the following code:
<div style="background-color:#eee;">
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand text-light" href="#">Welcome</a>
<ul class="list-inline navbar-nav d-inline">
<li class="list-inline-item nav-item">Today is Monday</li>
</ul>
</nav>
<nav class="navbar navbar-light" style="background-color:#fff !important;">
<div class="row">
<div class="col-1"></div>
<div class="col-8">Home</div>
<div class="col-2 float-right">11.27.2017</div>
<div class="col-1"></div>
</div>
</nav>
<div class="row mx-0">
<div class="col-10 offset-1" style="height:400px;">
Content
</div>
</div>
</div>
How do I create a layout that includes gutters, while still using nav elements in Bootstrap 4?
no not tow navbars...do one navbar two UL's one gets the hidden on mobile d-flexbox class and make one of the ul's the one hiiden on mobile the toggler collapse target..
In summary:
One navbar and two UL's
the one hidden on mobile has also the collapse class is the target of your toggler and than you should not have to use any d-flexbox hide classes as you will mark the full navbar as expand md
Gutters are not on the outside but rather the inside. The concept comes from publishing books (paper, go figure). Consider adding pl-5 and pr-5 to each of the nav classes and content div class. This will add padding to each side effectively giving extra space where you want it.
Here is the link to Bootstraps spacing. https://getbootstrap.com/docs/4.0/utilities/spacing/
I hope this helps.

Why do I have extra so much space between my side bar and my content?

I've boiled my layout down to this fiddle or the full screen version
I am having two problems. The first, is that space between the side bar and the content is very large. I want them to be spaced as normal. In my case, I'm expecting the side bar to be span2 in size, my main content to be span7 in size and then a right hand column to be span3.
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav-fixed">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
...other links ...
</ul>
</div>
</div>
<div class="span7 span-fixed-sidebar">
<div id="world-map" style="display:block;"> </div>
</div>
<div class="span3">
<div class="row-fluid">
<div class="span12" id="country-info">
<h2 id="country-info-header">
The Detail Header
</h2>
<p id="country-info-summary">
A set of summary information. A short paragraph of text.
</p>
</div>
</div>
</div>
However, I'm getting a result with a huge gap between my sidebar and my content (the red box), and the right hand content is on the left hand side and under my sidebar. How can I fix this layout?
You need to experiment with Bootstraps offset classes. I made you a quick example here:
http://jsfiddle.net/tXzjX/5/
Your position:fixed takes the element out of the natural flow of the page, and in a way "resets" the columns on the grid. Using Bootstrap's offset classes can counteract that issue. Check here: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem under "Offsetting Columns".
Could you not just reduce the margin size like so:
.row-fluid > .span-fixed-sidebar {
margin-left: 100px;
}
as that seems to move the red bar in nicely
EDIT: I have had a play about and come up with a slightly simpler looking code with what I think is the effect you require with a bit of tweaking. http://jsfiddle.net/bmgh1985/UeFRa/

CSS and MediaWiki - auto-expanding a DIV correctly with absolute and relative DIVs

Here is my fiddle:
http://jsfiddle.net/XKs8H/1/
And here's my problem:
I'm creating a wiki using MediaWiki. I'm trying to avoid using a lot of extensions and third-party stuff in my installation.
What I'm using is a MediaWiki Template to generate the content shown in my example. Because it's a template, it renders once for every time it's called. So, for each character in the example, the template first creates a left-floating DIV for the name tab and a DIV below that for the content of the character's bio. I can make that part work with absolute positioning, but then the rest of the wiki page content shows up below the absolute div.
Example:
<div id="tab1">Tab 1</div>
<div id="bio1">Tab 1's bio</div>
<div id="tab2">Tab 2</div>
<div id="bio2">Tab 2's bio</div>
<div id="pagebody">Rest of the page's content</div>
Each tab should float next to each other. The bio should show up below the row of tab divs, and pagebody should show up below everything.
I'd recommend something like this:
<div class="tab">
<div class="tab-name">Tab 1</div>
<div class="bio">Tab 1's bio</div>
</div>
<div class="tab">
<div class="tab-name">Tab 2</div>
<div class="bio">Tab 2's bio</div>
</div>
<div class="clearfix">Rest of the page's content</div>
Where the tabs themselves are floating, and clearfix is the common float-clearing page body.

extend header/footer bg to screen edge using 960.gs

I'm using the 960.gs style sheets for a drupal site - I would like to extend both the header, and footer sections to the edge of the webpage- resulting in something precisely like stack overflow's website.
I believe you need to use a div with no predefined helper classes, as div's will by default expand to the full width of their parent (if theres no wrapper - it will be the full screen)
Some trivial example:
<header>
<nav>
<ul>
<li> blarg </li>
</ul>
</nav>
</header>
<div id="main" role="main" class="container_12">
....
....
</div>
<footer>
<p>Thanks!</p>
</footer>
Hope this helps.

Resources