I want to create a layout like shown in the picture.
I am using twitter bootstrap 3.
My current empty page layout looks like following
<jsp:include page="includes/topmenu.jsp" />
<div id="wrap">
<div class="container">
<div class="row">
</div>
</div>
</div>
<jsp:include page="includes/footer.jsp" />
Now i need to design the whole page inside row class.
How can i achieve this ? is there already a free template available like this.
You can find answer here:
http://getbootstrap.com/css/#grid
Personally I would divide the contents something like that:
<div class="row">
<div class="col-md-3">photo</div>
<div class="col-md-6">tabs</div>
<div class="col-md-3">nothing</div>
</div>
A fiddle
HTML
<div class="box">Some terrible bootstrap tabs</div>
CSS
html, body {
height: 100%;
}
.box {
min-height: 100%;
/* just for display purposes */
border-right: 1px solid red;
border-left: 1px solid blue;
width: 50%;
margin: 0 auto;
}
Related
I'm pretty sure that the problem has some simple solution but I am not able to find one yet other than overriding the bootstrap's default behavior which doesn't seem like a good idea to me.
The issue is simple. When I have this:
#main {
margin-top: 100px;
width: 100px;
background-color: black;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div id="main" class="col-lg-12 col-md-12 col-sm-12">
</div>
</div>
</div>
You can see a black stripe on the screen even though there is not content.
After some inspection/investigation I understood that bootstrap has this default style:
// Prevent columns from collapsing when empty
min-height: 1px;
I've read this Bootstrap min height question and several other posts on the topic so it seems that it is intended to have this style.
However, and I guess this is not something uncommon, I have a page with a search functionality and when the user perform a search and select any of the results, a report should be displayed below the search but until this happens I have several stripes, where the content should be displayed at some point and I would like them to not be visible.
I can think of some JS workarounds, but wonder if it's possible to do this with pure CSS? I can always override the default value of min-height to 0 but I guess the bootstrap guys had a good reason to add this, and maybe there's a known way to avoid displaying stripes with the background color when no content is available.
If you do not feel like overriding bootstrap style, then the :empty selector can be used to remove background
#main {
margin-top: 100px;
width: 100px;
background-color: black;
}
#main:empty {
background: none;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div id="main" class="col-lg-12 col-md-12 col-sm-12"></div>
</div>
</div>
And idea is to hide it with a small inset box-shadow but you need to pay attention to transparency:
.main {
margin-top: 100px;
width: 100px;
box-shadow:0 1px 0 inset #fff;
background-color: black;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="main col-lg-12 col-md-12 col-sm-12">
</div>
</div>
</div>
Another idea is to rely on gradient for the background and you can adjust slightly the position:
.main {
margin-top: 100px;
width: 100px;
background: linear-gradient(black,black) 0 1px no-repeat;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="main col-lg-12 col-md-12 col-sm-12">
</div>
</div>
</div>
you can also add a border-top transparent and adjust the background-clip
.main {
margin-top: 100px;
width: 100px;
border-top:1px solid transparent;
background:black;
background-clip:padding-box;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="main col-lg-12 col-md-12 col-sm-12">
</div>
</div>
</div>
Bootstrap by default set min-height:1px; on his cols, so you have to set min-height:0px; to avoid this.
I've read quite a few similar questions to mine but none is quite the same or has an answer which works for me.
I'm using Twitter Bootstrap 3. I have two rows, and each row contains a col-sm-12 div, so they're the same width. The content in the first row is wider than its container but I have overflow:auto set on the element containing the two rows so a horizontal scrollbar is displayed and the content can be seen using that, so that's fine.
In the second row I have a div to which I'm applying a jQuery plugin (jqxGrid, for what it's worth). I've set the width option of the plugin to be "100%". The resultant grid's content is also too wide for its container but because of the way the jQuery plugin creates the grid it constricts the grid's width to 100% of its parent's width rather than overflowing.
So what I really need is for the .row elements to all be as wide as the widest overflowing content so that when the jQuery plugin evaluates the width of its parent so as to set its own width, the resultant grid ends up being as wide as the overflowing content in the first row.
I've made a fiddle which I hope will illustrate the problem. I feel that at its heart this is a CSS problem so a pure CSS solution would be excellent, but I doubt that that's possible.
.wrapper {
color: #fff;
padding: 10px;
}
.container-fluid {
background-color: #333;
overflow: auto;
}
.row1 {
background-color: yellow;
}
.row2 {
background-color: orange;
}
.short-content {
background-color: red;
width: 100%;
}
.long-content {
width: 2000px;
background-color: blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="wrapper">
<div class="container-fluid">
<div class="row row1">
<div class="col-sm-12">
<div class="long-content">
Long content
</div>
</div>
</div>
<div class="row row2">
<div class="col-sm-12">
<div class="short-content">
THe jQuery plugin here is too wide to fit but won't overflow because its width is set to match its parent.
</div>
</div>
</div>
</div>
</div>
To my understanding, wrapping each .col-sm-12 into their own parent .row is a verbose way of having all .col-sm-12 in a single .row container, as .col-sm-12s are always wrapping into a new line.
So, in case your setup allows for removing the intermediate .row tags, the only additional line of css you have to write is float: left; on .row. (In the example below I used the id #custom on .container-fluid to isolate this modification from the rest of your page).
body {
color: #fff;
padding: 10px;
}
.container-fluid {
background-color: #333;
overflow: auto;
}
.row1 {
background-color: yellow;
}
/*.row2 {
background-color: orange;
}*/
.short-content {
background-color: red;
width: 100%;
}
.long-content {
width:2000px;
background-color: blue;
}
#custom .row {
float: left;
}
<div id="custom" class="container-fluid">
<div class="row row1">
<div class="col-sm-12">
<div class="long-content">
Long content
</div>
</div>
<!-- </div> -->
<!-- <div class="row row2"> -->
<div class="col-sm-12">
<div class="short-content">
THe jQuery plugin here is too wide to fit but won't overflow because its width is set to match its parent.
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
I'm looking to learn how I can position images in CSS, multiple ones, without affecting my footers position, size, etc.
I coded some CSS I thought would work, but it messed up my footers position. (It wouldn't stay at the bottom.)
So, I fixed that issue but found the code I wrote for the image position messed with the footers position.
I don't really know how, but I would like to have my images positioned, perhaps by px/space.. they just need to look good in a row spaced.
The example is in red, is how I want it to look.
look here for an example of how I want it to look.
HTML
<div class="batesimg">
<p><strong>Bates</p></strong>
<div class="shadow"> <!-- makes a shadow, surrounding the characters picture. -->
<img src="images/bates.png" alt="Bates" width="150" height="150"> <!-- defines the img -->
CSS
/* Bates profile picture. */
.batesimg { /* or whatever class name works for you */
position: auto;
left:250px;
top:250px;
margin-right: 500px;
}
NOTE, the css above isn't positioning the image how i want it, showed in the image example, can someone help me positiong the image like i have it in my example image?
Thanks!
You want to repeat same type of pattern of name,img and descriptions. We will call this 'card'. Now you have two problems in hand.
1) Placing multiple cards in page. For this use some layout like flexbox.
2) Setting inside of card properly..
/*1st Problem*/
#flex-container{
display: flex;
flex-wrap:wrap;
width: 600px;
justify-content: space-around;
}
#flex-container>div.card{
flex-grow:0;
flex-shrink:0;
}
/*1st Problem ends*/
/*2nd Problem*/
.card{
width: 200px;
height:calc(200px + 2em);
}
.card>.name ,.card>.desc{
width: 100%;
text-align: center;
}
.card>div.img{
position: relative;
margin-left: 25px;
width: 150px;
height: 150px;
border-radius: 100%;
}
/*2nd Problem ends*/
.card:nth-child(1) div.img{background-color: red;}
.card:nth-child(2) div.img{background-color: green;}
.card:nth-child(3) div.img{background-color: blue;}
.card:nth-child(4) div.img{background-color: yellow;}
/*Centering Content*/
#flex-container{
margin: 0 auto;
/*top,bottom both zero.. and left,right both auto..
handling margin is complicated..read about them
*/
}
<div id="flex-container">
<div class="card">
<div class="name">Name1</div>
<div class="img"></div>
<div class="desc">Desc1</div>
</div>
<div class="card">
<div class="name">Name2</div>
<div class="img"></div>
<div class="desc">Desc2</div>
</div>
<div class="card">
<div class="name">Name3</div>
<div class="img"></div>
<div class="desc">Desc3</div>
</div>
<div class="card">
<div class="name">Name4</div>
<div class="img"></div>
<div class="desc">Desc4</div>
</div>
</div>
For any other problem visit Flexbox
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
.div1 {
border: 1px solid red;
float: left;
width: 20px;
}
.div2 {
border: 1px solid green;
width: 100%;
}
Please look at my code at JS Fiddle
I'm wanting to get div 1 to stretch the height of both divs 2 and 3, like you would do with table's rowspan.
I'm not proficient enough with understanding how to do table stuff in divs to figure this one out.
Thanks!
You can use the table/table-cell display css options.
UPDATED Fixed stretching issue.
<div style="display:table">
<div style="display:table-cell;height:100%;" class="div1">
1
</div>
<div style="display:table-cell;width:100%">
<div class="div2">2</div>
<div class="div2">3</div>
</div>
</div>
Link to JSFiddle: https://jsfiddle.net/pho5p7cc/8/
Here's what I would do. Create a div around all of your current div, then use css positioning to edit the lengths within the div.
Here's an example,
http://jsfiddle.net/tjgerot/v2469Leu/
<div class="table">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
</div>
I would use a container to hold your DIV 2,3. Then margin the left of the container to allow space for your DIV 1.
Im not sure it's the smoothest way to code, but it works.
https://jsfiddle.net/pho5p7cc/3/
html
<div class="div1">1</div>
<div class="container">
<div class="div2">2</div>
div class="div2">3</div>
</div>
css
.div1 {
border: 1px solid red;
float: left;
width: 20px;
}
.div2 {
border: 1px solid green;
width: 50px;
margin-left:20px;
}
.container{
}
I'm having some issues trying to write CSS to make a box float to the right of my page.
I have a div called #right-box-uploadphoto that is the grey box on this page http://s361608839.websitehome.co.uk/salesboard/After_Login.html
The CSS is this:
#right-box-uploadphoto{
width: 240px;
height: 240px;
background: #e6e6e6;
border: 1px solid #d7d7d7;
margin-left: 15px;
float: right;
}
It's somehow being pushed down. It needs to line up with #page-box2.
Is this not right?
Thanks
You placed the div incorrectly on your page. Try adding your div to your mainFrame like:
<div id="mainFrame">
<h2>Set up your Salesboard</h2>
<p>There's only a few steps to go!</p>
<div class="line"></div>
<div id="page-box2">
<div id="step-box-select"><span class="icon-step">1</span> Set Up Your Profile</div>
<div id="step-box-unselect"><span class="icon-step">2</span> Set Up Your Team</div>
<div id="step-box-unselect"><span class="icon-step">3</span> Add Team Member</div>
<br><br>
<form action="" method="get">
</form>
Upgrade</div>
<div id="right-box-uploadphoto"></div>
</div>
Try putting "right-box-uploadphoto" div into the "mainFrame" div.
<div id="mainFrame">
...
<div id="page-box2"></div>
<div id="right-box-uploadphoto"></div>
</div>
That will do the trick!