I am using the following method to style my website for different screen sizes.
<div id="sidebar" class="col-md-3 hidden-xs hidden-sm">
<!-- Inner Classes and Stuff -->
<!-- IMPORTANT: Div auto-inserted by Typo3 -->
</div> <!-- sidebar -->
<div id="sidebar_mobile" class="col-xs-12 hidden-md hidden-lg">
<!-- Inner Classes and Stuff -->
<!-- IMPORTANT: Div auto-inserted by Typo3 -->
</div> <!-- sidebar -->
I then define different styles that I need for #sidebar and #sidebar_mobile in my CSS. This leads to two problems:
Repetition (there are many shared properties between #sidebar and #sidebar_mobile).
Duplicate IDs - The divs that are automatically inserted by Typo3 (Raw HTML content inserted via Typo3 backend) end up having the same ID (inside #sidebar and #sidebar_mobile). This fails WCAG 2.0 AA and I need my website to pass this.
I would like to know if there is a better way of going about things in this case. What would be a better solution
Why are you using two different wrappers for mobile/desktop instead using CSS to style them individually:
<div id="sidebar" class="col-sm-12 col-md-3">
<!-- Inner Classes and Stuff -->
<!-- IMPORTANT: Div auto-inserted by Typo3 -->
</div>
#sidebar {
/* Mobile/Tablet styles (xs, sm) */
}
#media (min-width: 991px) {
#sidebar {
/* Tablet/Desktop styles (md, lg) */
}
}
This is the mobile first variant.
Related
When using bootstrap's grid, what is the best way to markup a single full-width column in a row?
Do you have to use container and row to hold the column (.container > .row > .col-xs-12 > .actual-content), or can you get rid of the row and column altogether and simply use a wrapping container (.container > .actual-content)?
Let's say
<div class="container">
<div class="row">
<!-- multiple columns -->
</div>
<div class="row">
<div class="col-xs-12">
<p>Actual content goes here. It will span the entire width.</p>
</div>
</div>
<div class="row">
<!-- multiple columns -->
</div>
</div>
vs
<div class="container">
<div class="row">
<!-- multiple columns -->
</div>
<p>Actual content goes here. It will span the full width.</p>
<div class="row">
<!-- multiple columns -->
</div>
</div>
Is one approach considered superior over the other? Since the column spans the entire width for all media sizes, I don't need any responsive features. Rendered output should be the same, but maybe there are subtle differences which I'm not aware of. Using container, row, and column seems like overkill …
The one without the row/grid according to Bootstrap's own documentation. It is the correct way -- don't wrap it with more classes, that's more markup for NO reason.
I posted about this a couple days ago: col-*-12 (col-xs / col-sm / etc) use in Bootstrap 3
Documentation:
No grid classes are necessary for full-width elements.
This is the correct way:
<div class="container">
<div class="row">
<!-- multiple columns -->
</div><!-- closing .row -->
<p>Actual content goes here. It will span the full width.</p>
<div class="row">
<!-- multiple columns -->
</div><!-- closing .row -->
</div><!-- closing .container -->
I am attempting to use the :nth-child(even) technique to select my images in every other article/item I have on my page and ultimately float the images within the even articles tot he opposite side of the others.
I am using Joomla 3 with K2 which I know won't make a difference as such but will explain the bloated HTML and lots of div's all nested within each other.
Here are my code snippets:
HTML(snippet of 2 articles/items):
<!-- Start K2 Item Layout -->
<div class="catItemView groupLeading">
<!-- Plugins: BeforeDisplay -->
<!-- K2 Plugins: K2BeforeDisplay -->
<div class="catItemHeader">
<!-- Item title -->
<h3 class="catItemTitle">
Copy of A Little Bit About Us...
</h3>
</div>
<!-- Plugins: AfterDisplayTitle -->
<!-- K2 Plugins: K2AfterDisplayTitle -->
<div class="catItemBody">
<!-- Plugins: BeforeDisplayContent -->
<!-- K2 Plugins: K2BeforeDisplayContent -->
<!-- Item Image -->
<div class="catItemImageBlock">
<span class="catItemImage">
<a href="/index.php/about/cni-solutions-overview/51-a-little-bit-about-us" title="Copy of A Little Bit About Us...">
<img src="/media/k2/items/cache/eb6c7c01c4e98e1f2578f9959463b973_L.jpg" alt="Copy of A Little Bit About Us..." style="width:600px; height:auto;" />
</a>
</span>
</div>
<!-- Item introtext -->
<div class="catItemIntroText">
<h3>Experience, business continuity, quality support</h3>
<p>Our team at CNi Solutions has over 18 years’ IT experience with a proven track record of success supporting small and medium sized businesses across the North West acting as a client’s IT department, or supplementing an existing IT function.</p>
<p>We believe in helping our clients to improve business performance by leveraging well managed IT solutions, backed up by expert IT support services providing highly technical installation, virtualisation and disaster recovery solutions leading to improved technical performances.</p>
<p>Our aim at CNi Solutions is to create long-term partnerships with our clients, maintaining value for money solutions through a combination of high quality support, expert IT project delivery and applicable strategic advice.</p> </div>
<div class="clr"></div>
<div class="clr"></div>
<!-- Plugins: AfterDisplayContent -->
<!-- K2 Plugins: K2AfterDisplayContent -->
<div class="clr"></div>
</div>
<div class="clr"></div>
<!-- Plugins: AfterDisplay -->
<!-- K2 Plugins: K2AfterDisplay -->
<div class="clr"></div>
</div>
<!-- End K2 Item Layout -->
</div>
<div class="clr"></div>
<div class="itemContainer itemContainerLast" style="width:100.0%;">
<link rel="stylesheet" href="/templates/cni_solutions_purity_iii/html/com_k2/templates/about/about_style.css" type="text/css" />
<!-- Start K2 Item Layout -->
<div class="catItemView groupLeading">
<!-- Plugins: BeforeDisplay -->
<!-- K2 Plugins: K2BeforeDisplay -->
<div class="catItemHeader">
<!-- Item title -->
<h3 class="catItemTitle">
Copy of Here to Support You...
</h3>
</div>
<!-- Plugins: AfterDisplayTitle -->
<!-- K2 Plugins: K2AfterDisplayTitle -->
<div class="catItemBody">
<!-- Plugins: BeforeDisplayContent -->
<!-- K2 Plugins: K2BeforeDisplayContent -->
<!-- Item Image -->
<div class="catItemImageBlock">
<span class="catItemImage">
<a href="/index.php/about/cni-solutions-overview/50-here-to-support-you" title="Copy of Here to Support You...">
<img src="/media/k2/items/cache/a522a6005d1cb428ea34ef1769cd7452_L.jpg" alt="Copy of Here to Support You..." style="width:600px; height:auto;" />
</a>
</span>
</div>
<!-- Item introtext -->
<div class="catItemIntroText">
<h3>Supporting your Computer Network Infrastructure</h3>
<p>At CNi Solutions we believe that your Computer Network Infrastructure should be at the very heart of your business, but should not dictate the beat. CNi Solutions has been developed to provide you with full IT support, allowing you to focus on what is important - Developing and growing your business without the interruptions of an unsupported IT Infrastructure.</p>
<p>We understand that your Computer Network Infrastructure needs to be tailored to suit your needs, whether you are a start-up business with one computer, looking for someone to call offering support and advice on your anti-virus and backup needs or a large company with more than one office looking for daily support and guidance on your growing IT demands.</p> </div>
<div class="clr"></div>
<!-- Plugins: AfterDisplayContent -->
<!-- K2 Plugins: K2AfterDisplayContent -->
<div class="clr"></div>
</div>
And so on for each article/item....
CSS:
.catItemBody img {
float: right;
width: 35%;
max-width: 400px;
}
.catItemBody:nth-child(even) img {
float: left;
width: 35%;
max-width: 400px;
}
I can target the img tags using the css above as it is appearing in the element inspector, but it appears to select all the images, not just those in the even articles/items that I want.
Any ideas on where I am going wrong?
The site page is currently situated here during development: http://www.themanofice.co.uk/index.php/about/cni-solutions-overview
Everyone of your .catItemBodys is even:
<div class="catItemView groupLeading">
<div class="catItemHeader"></div> /* This one is odd */
<div class="catItemBody"></div> /* This one is even */
</div>
<div class="catItemView groupLeading">
<div class="catItemHeader"></div> /* This one is odd */
<div class="catItemBody"></div> /* This one is even, again */
</div>
Because the nth-child is calculated from the closest ascendant, not from the document as a whole.
You will have to make the selector "uglier":
.itemContainer:nth-of-type(even) .catItemBody img {}
Unless there will be no other images, then you could just use
.itemContainer:nth-of-type(even) img {}
I'm using nth-of-type instead of nth-child, just because you have clearing divs, so every .itemContainer is odd, actually.
Or you could create a new class for even items.
You are using the nth-child incorrectly to target alternate images. Your styling would only apply to alternate images if all .catItemBody elements were within the same parent.
But since they are nested within .itemContainer, the styles are not getting applied.
Try changing your css styles to:
.itemContainer img {
float: right;
width: 35%;
max-width: 400px;
}
.itemContainer:nth-child(even) img {
float: left;
width: 35%;
max-width: 400px;
}
I have two columns of divs, that I want to display like this.
<div id="cont">
<div class="left">
<div id="d1">1left</div>
<div id="d3">3left</div>
<div id="d5">5left</div>
</div>
<div class="right">
<div id="d4">4right</div>
<div id="d2">2right</div>
<div id="d6">6right</div>
</div>
</div>
However, for purposes of creating a responsive design I don't want to use containers, and I would prefer to not use JS for basic formatting purposes.
The problem with this, is that simply floating containers left and right creates "rows," as you can see here (3left is pushed right due to the increased size of 1left).
Is it possible to create columns of multiple divs without using containers or JS, and if so, how?
Here is my attempt:
.left {
float:left;
width: 185px;
clear:both;
}
.right {
margin-left:185px;
}
Basically, whatever width you set for .left, use that for margin-left in .right. This way you don't have to use the float property on both the div.
UPDATE #1
In .left, add:
clear:both;
JSFiddle Demo
UPDATE #2
For the extra space in the left column (if other columns on the right are larger), use:
margin-top:-50px; // (Other columns height minus the shorter left column's height.)
On the left columns below the one with a shorter height.
JSFiddle Demo
I suggest using the Bootstrap (http://getbootstrap.com/) and create your "grid" like:
<div class="container-fluid">
<!-- left column -->
<div class="col-md-6">
</div>
<!-- right column -->
<div class="col-md-6">
</div>
</div>
With Bootstrap you can specify different layout for various device sizes by just adding some CSS classes. For example if you want to have two columns in large screens and just one in mobile you can add classes like:
<div class="container-fluid">
<!-- left column in medium screens and up -->
<!-- just one column in small screens -->
<div class="col-xs-12 col-md-6">
</div>
<!-- right column in medium screens and up -->
<!-- just one column in small screens -->
<div class="col-xs-12 col-md-6">
</div>
</div>
DEMO:
http://www.bootply.com/f1zspwlokR
I am a bootstrap newbie and I have a 100% wide template that I want to code with bootstrap. The first column begins at the left corner and I have a Google map the stretches to the rightmost. I thought I could do this with container-fluid class, but that doesn't seem to be available any longer. I have no idea how to achieve that layout with bootstrap 3. I am using the Geometry PSD template from themeforest, the link here if you want to see the layout : http://themeforest.net/item/geometry-design-for-geolocation-social-networkr/4752268
For Bootstrap 3, you would need to use a custom wrapper and set its width to 100%.
.container-full {
margin: 0 auto;
width: 100%;
}
Here is a working example on Bootply
If you prefer not to add a custom class, you can acheive a very wide layout (not 100%) by wrapping everything inside a col-lg-12 (wide layout demo)
Update for Bootstrap 3.1
The container-fluid class has returned in Bootstrap 3.1, so this can be used to create a full width layout (no additional CSS required)..
Bootstrap 3.1 demo
This is the complete basic structure for 100% width layout in Bootstrap v3.0.0. You shouldn't wrap your <div class="row"> with container class. Cause container class will take lots of margin and this will not provide you full screen (100% width) layout where bootstrap has removed container-fluid class from their mobile-first version v3.0.0.
So just start writing <div class="row"> without container class and you are ready to go with 100% width layout.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Basic 100% width Structure</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://getbootstrap.com/assets/js/html5shiv.js"></script>
<script src="http://getbootstrap.com/assets/js/respond.min.js"></script>
<![endif]-->
<style>
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-3 red">Test content</div>
<div class="col-md-9 green">Another Content</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>
To see the result by yourself I have created a bootply. See the live output there. http://bootply.com/82136 And the complete basic bootstrap 3 100% width layout I have created a gist. you can use that. Get the gist from here
Reply me if you need more further assistance. Thanks.
Using Bootstrap 3.3.5 and .container-fluid, this is how I get full width with no gutters or horizontal scrolling on mobile. Note that .container-fluid was re-introduced in 3.1.
Full width on mobile/tablet, 1/4 screen on desktop
<div class="container-fluid"> <!-- Adds 15px left/right padding -->
<div class="row"> <!-- Adds -15px left/right margins -->
<div class="col-md-4 col-md-offset-4" style="padding-left: 0, padding-right: 0"> <!-- col classes adds 15px padding, so remove the same amount -->
<!-- Full-width for mobile -->
<!-- 1/4 screen width for desktop -->
</div>
</div>
</div>
Full width on all resolutions (mobile, table, desktop)
<div class="container-fluid"> <!-- Adds 15px left/right padding -->
<div class="row"> <!-- Adds -15px left/right margins -->
<div>
<!-- Full-width content -->
</div>
</div>
</div>
You're right using div.container-fluid and you also need a div.row child. Then, the content must be placed inside without any grid columns.
If you have a look at the docs you can find this text:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Not using grid columns it's ok as stated here:
Content should be placed within columns, and only columns may be immediate children of rows.
And looking at this example, you can read this text:
Full width, single column: No grid classes are necessary for full-width elements.
Here's a live example showing some elements using the correct layout. This way you don't need any custom CSS or hack.
In BOOTSTRAP 4 you can use
<div class="row m-0">
my fullwidth div
</div>
... if you just use a .row without the .m-0 as a top level div, you will have unwanted margin, which makes the page wider than the browser window and cause a horizontal scrollbar.
I have my page structured into 3 different modules: navigation on the left, images in the center, and social sidebar right. Below is the css that formats this content. I'm having trouble when I resize the window; the images in the center overlap with the navigation on the left and the sidebar gets pushed to the bottom of the page and overlaps with the end of the left navigation. The navigation module/sidebar is fixed.
I'm using twitter bootstrap as a base.
Any ideas on what's causing this and how to fix this?
css
div.sidebar{
width: 120px;
position:fixed;
top:12%;
left:2%;
overflow-y:auto;
height:100%;
}
html
<div class ="container-fluid">
<div class = "row-fluid">
<!-- left navigation div -->
<div class = "span1" style = "width:120px;">
<div class = "sidebar" >
#navigation
</div>
</div>
<!-- middle images div -->
<div class = "span8" style = "width: 900px;">
#lot of images
</div>
<!-- social sidebar -->
<div class = "span2" style = "margin-left: 10px; ">
#social module with images
</div>
</div>
</div>
when I make the window smaller
normal
Have you thought about responsive web design?
You say your using twitter bootstrap? Have a look at this:
http://twitter.github.com/bootstrap/scaffolding.html#responsive
Add this to the head
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Change the HTML:
<div class="container-fluid">
<div class="row-fluid">
<!-- left navigation div -->
<div class="span4">
<div class = "sidebar" >
#navigation
</div>
</div>
<!-- middle images div -->
<div class="span6">
#lot of images
</div>
<!-- social sidebar -->
<div class="span4">
#social module with images
</div>
</div>
NOT TESTED. Im also not 100% how big the fluid container is, i think its 12, if its 16 you will have to change the spans so they add up to 16
Couple issues I see...
You are completely defeating the purpose of ".row-fluid" and the framework by adding widths?? Remove all width assignments to the grid elements (ie. .container, .row, .span(x)) and let the framework do what it was designed to do...create the width for you. If you need to adjust width from what is being generated, add it to block level element INSIDE of the .span(x).
Your span HAVE to add up to NO MORE than 12. You have 14 which will absolutely make the last wrap around.
Overriding the spans with inline widths will cause odd behavior. Can you use the default TBS scaffolding instead?
Suggestions :
1.Remove all the extra things you put for style let bootstrap do the things !!
2.always test your div with "well"
Put your codes like this
<div class="container">
<div class="row" style="margin-top:20px;">
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
</div>
col-lg-* for large device
col-xs-* for extra small device
col-sm-* for small device
use it like this you can achieve what you want
Plunker demo
resize your browser to view the effect