I have the following default html 2-column scheme:
<div id="page">
<div id="header"></div>
<div id="left"> sidebar stuff</div>
<div id="right">
<div id="topbar">
<div id="menu">
<ul>
<li><a href="#">A</li>
<li>B</li>
<li>C</li>
</ul>
<div id="iconmenu">
<button>a</button>
<button>b</button>
<button>c</button>
<button>d</button>
</div>
</div>
<div id="content">
<div style="border: 1px solid black; height:400px">content</div>
</div>
</div>
</div>
</div>
see: http://jsfiddle.net/K9K8b/1/
I want to let the iconbar stay at the position on the right (when decreasing window size) without using JavaScript. Is there a way to do this, probably by using a kind of placeholder and the min/max-width attribute?
Thanks a lot.
Use position absolute like in this fiddle:
http://jsfiddle.net/K9K8b/2/
#iconmenu {
padding-right: 3px;
position: absolute;
right: 0;
height: 50px;
background-color: grey;
}
It should get you in the right direction at least...
Related
Okay I do not know wether I have started completely wrong or just do not know how to get it right.
I want the layout of my website to be like this:
I put a div called 'myWrap' around the header and the content. And added this css:
.myWrap {
position: absolute;
padding: 0px;
margin: 0px;
background: white;
top: 2%;
left: 2%;
right: 2%;
}
.footer {
position: absolute;
background: #363130;
margin-top: 2%;
height: 300px;
left: 0;
width: 100vw;
}
And the footer is not in the myWrap-div. But now it is just floating behind the content because the position of the myWrap is absolute.
How do I put the header and content in the normal flow but infront of the background?
I structured the html like that:
<div class="row container-fluid myWrap">
CONTENT
<div class="container-fluid footer">
FOOTER
</div>
</div>
If I put the footer out of the myWrap div it starts floating around on the top or just overlaps the content/header
Change .myWrap to position: relative, your footer is getting the position absolute of the body, because It dosn't have a parent element with a relative position CSS atribute.
.myWrap {
position: relative;
}
With this, you will get your footer always on the bottom of myWrap. Then you can play with, the top/bottom properties and place it where you want ;)
I have created a Bootply to show it how it's working: http://www.bootply.com/8Wmx3CJHFv
Try this
<div class="myWrap">
<div class="container">
<div class="row">
Then add your footer after the end of the container
Personally, I would not work with your own wrapper. Bootstrap made them with a reason and that reason is they will work perfectly for responsive viewports.
I'd suggest you enhance something like this:
HTML
<html>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</header>
<section id="content">
<div class="container">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</section>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</footer>
</body>
</html>
CSS
body {background-color: #FFF;}
footer {background-color: #FFF;}
header {background-color: #FFF;}
.container-fluid {padding: 0 0;}
Just make sure you remove the padding for the .container-fluid. And a tip: if you ever feel like creating your own wrapper, don't position them with absolute, but with relative. Otherwise it won't work well on all viewports.
You mentioned that you are using bootstrap, in bootstrap the container class wraps your data into a wrapper that has a fixed width on each screen-device-width so you will need to add a container div for the header and the content without adding it inside the footer div.
If you are using bootstrap framework you will need to use these following classes for these div's as the following code:
<div class="site-container">
<div class="header">
<div class="container">
</div>
</div>
<div class="content">
<div class="container">
</div>
</div>
<div class="footer">
</div>
</div>
<style>
body{
background:url(../image.jpg);
}
header {
max-width:600px;
width:100%;
display:block;
background:#ccc;
height:250px; //header height no need to mention in your work
border:1px solid #000;
margin:auto;
}
#content {
max-width:600px;
width:100%;
display:block;
background:#ddd;
height:500px; //content height no need to mention in your work
border:1px solid #000;
margin:auto;
}
footer {
width:100%;
height: 300px;
left: 0;
background:#000;
}
</style>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
// Header
</div>
</div>
</div>
</header>
<section id="content">
<div class="container">
<div class="row">
<div class="col-lg-12">
// Content
</div>
</div>
</div>
</section>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</footer>
Demo: https://jsfiddle.net/q4Lcjmsy/3/
I am trying to implement a design from my graphic designer, which whilst looks cool is giving me some headaches as i don't know how to implement in bootstrap.
We have a call to action section, which aligns with the 12 column grid system on its left and right extremes.
It also stretches to the view-port edges:
On the left we have red background stretching all the way to the view-port edge.
On the right we have a grey background image stretching all the way to the view-port edge.
I haven't been able to find a search term for what I am looking to achieve let alone where to start (other than have the cta use the background for the entire width, then overlay a left element over the top).
Any idea on how to code the below graphical layout in bootstrap please?
<section class="cta" style="background: grey; position: relative">
<div class="red" style="position: absolute; left: 0; width: 10%; background: red"></div>
<div class="text-outer">
<div class="container">
<div class="row">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
</div>
</section>
Using <div class="container-fluid"> as a starting point; I am guessing at your page's layout. Let's try this:
See below:
.cntn {
border: 1px red solid; /* you can remove this (not needed) */
}
.red {
background-color: red;
text-align: right;
margin: 0; /* optional */
width: 100px; /* adjust to suit your needs */
float: left;
}
.cta {
margin: 0; /* optional */
float: right;
border: 1px solid green; /* you can remove this (not needed) */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- make container fluid -->
<div class="container-fluid">
<div class="row">
<!-- heading area: hexagon -->
<div class="red">
<img src="http://placehold.it/100/100" />
</div>
<!-- heading area: call-to-action -->
<section class="cta">
Action
</section>
</div>
<div class="row cntn">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
Simply change 'div class="container"' to 'div class="container-fluid"'
Something like this? Where black should be the grey gradient and max-width:400px could be anything.
.cta {
overflow-x: hidden;
position: relative
}
.text-outer .container {
width: 100%;
max-width: 400px;
background: grey;
z-index: 2;
position: relative;
}
.text-outer:before,
.text-outer:after {
content: "";
position: absolute;
width: 50%;
height: 100%;
top: 0;
}
.text-outer:before {
background-color: red;
left: 0;
}
.text-outer:after {
background-color: black;
right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="cta">
<div class="text-outer">
<div class="container">
<div class="row">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
</div>
</section>
jsFiddleLink
I created with 3 divs as Left Center and Right but if you want to use Left and center then create your own class. Probably following will work
.custom {
width:calc(100% - (50% - 768px/2));
}
.custom {
width:calc(100% - leftCellWidth);
}
You can set height of left as per height of hex image.
Use jumbotron class outside the class container for full-width, as explained here.
HTML:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="red col-xs-4">
</div>
<div class="grey col-xs-8">
</div>
</div
</div>
</div>
CSS:
.red {
background: url('awesomeredimage.png');
background-size: cover;
}
.grey {
background: url('awesomegreyimage.png');
background-size: cover;
}
All your divs should be wrapped in the container div. And as some others have also suggested: container-fluid helps.
Within container fluid you can add a regular container for the rest of your content. My code below explains this.
You could take the easy route and just use the entire cta image you've posted as a clickable image with .img-responsive in a col-xs-12. In that case my fix takes you about 2 minutes:
<section style="background: grey; position: relative">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="/img/cta.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="container">
<!-- All you other content here-->
</div>
</div>
</div>
</div>
</section>
But you could also hack the design into cols, as I try to show in the code snippet below. Of course you need to tweak and decide on the exact sizes yourself.
<section style="background: grey; position: relative">
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 red">
<img src="/img/hexagon.png" class="img-responsive pull-right">
<!--and give this img a negative margin to flow over to the grey area-->
</div>
<div class="col-xs-1 grey-image"></div>
<div class="col-xs-3 grey-image">
<h3 class="text-center">Call to action</h3>
<p class="text-center">Discount etcetera</p>
</div>
<div class="col-xs-5 grey-image">
<button class="btn center-block">Request quote</button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="container">
<!-- All you other content here-->
</div>
</div>
</div>
</div>
</section>
Use class="container-fluid" instead of class="container" and than do this style:
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
}
I'm using Bootstrap and I'm trying to fix the border. It will only appear above the text because of the pull right and left. What should I do to make it appear over the whole line?
HTML
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="pull-left">
<footer class="footer"><p>text1</p></footer>
</div>
</div>
<div class="col-md-6">
<div class="pull-right">
<footer class="footer"><p>text2</p></footer>
</div>
</div>
</div>
</div>
CSS
.footer {
padding-top: 19px;
margin-top: 7px;
color: #777;
border-top: 1px solid #e5e5e5;
}
You can't without changing your markup.
It makes more sense to give your footer row another fitting class: footer-row and apply styles to that instead:
HTML
<div class="container">
<div class="row footer-row">
<div class="col-md-6">
<div class="pull-left">
<footer class="footer"><p>text1</p></footer>
</div>
</div>
<div class="col-md-6">
<div class="pull-right">
<footer class="footer"><p>text2</p></footer>
</div>
</div>
</div>
</div>
CSS
.footer-row {
padding-top: 19px;
margin-top: 7px;
color: #777;
border-top: 1px solid #e5e5e5;
}
Bootply
Change your code like this:
<footer class="container">
<div class="row">
<div class="col-md-6">
<div class="pull-left">
<p>text1</p>
</div>
</div>
<div class="col-md-6">
<div class="pull-right">
<p>text2</p>
</div>
</div>
</div>
</footer>
Basically, you get rid of your double footer element and apply the container class to the footer element so it expands the whole width and remains as a single footer when resized
This solves your issue AND is semantically correct since you won't have 2 footer elements
I have added a Bootply so you can see how it works
If indeed you want text 1 and text two to take up half of the div each, try putting the footer tag as a whole across all columns as one element, then text one and text 2 nested in two divs with columns of 6.
I am using an absolute div so I can overlap one div from another. The div that overlaps is the absolute one (.content). However, if the overlapped div (.left) doesn't fit the screen, a horizontal scroll bar doesn't appear of course. How can I make the horizontal scroll bar automatically appear if its contents doesn't fit the given width? Here is the css:
.left {
width: 70%;
height:100%;
float:left;
overflow-x:auto;
}
.content {
position: absolute;
width: 70%;
height: 100%;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 130px;
background-color: #2b3e50;
border-left-width:5px;
border-left-style:solid;
border-left-color:#153450;
padding-left: 20px;
}
Please help me figure this out.
EDIT
Here is the div structure:
<div class="topbar">
<div class="fill">
<div class="container">
Home
<ul class="nav">
<li> One </li>
<li> Two </li>
<li> Three </li>
<li> Four </li>
</ul>
<p align="right">Log-out </p>
</div>
</div>
</div>
<div id="loader" class="left" style="border-right-width:15px;">
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="span14">
#content
</div>
</div>
</div>
</div>
<script>
$("#loader").html('<object data="#routes.Tags.map(false)" />');
</script>
EDIT
I surrounded the left div with a parent div.
<div class="parent">
<div id="loader" class="left" style="border-right-width:15px;">
</div>
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="span14">
#content
</div>
</div>
</div>
</div>
With the following css for parent.
.parent {
width: 100%;
position: relative;
}
But still doesn't show a scrollbar.
In your html left is not child of content you can't make it scroll.
If you have parent > child then just use position: relative on parent block.
Here is example http://jsfiddle.net/4swN9/
I'm having a problem with layout structure.
Here is a mockup: http://i.imgur.com/JbboQ.jpg
And code:
<ul id="nav">
<li></li>
</ul>
<div id="home">
<div class="slider">
<div class="heading"></div>
<div class="slidebox"></div>
</div>
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
I guess the easiest way would be to just add width style to each div but than I wouldn't be able to nest styles which is not an option.
Right now #home div has 980px width which is perfectly fine but the problem is that slider has 100% background and the parent div has 980px. Maybe it's too late but I just can't find proper and semantic solution for this.
I would be really glad if someone could help me out here,
Thanks.
There are a couple of things you can try:
Separate out your slider div so you can get 100% of your page width.
<div id="home">
...
</div>
<div class="slider">
<div class="heading"></div>
<div class="slidebox"></div>
</div>
<div id="columns">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
.slider { width: 100% }
Or you can set the z-index property of the slider div to a number higher than the index of the home so it renders on top.
<div id="home">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
<div class="slider">
<div class="heading"></div>
<div class="slidebox"></div>
</div>
.home { width: 980px; z-index: 1 }
.slider { width: 100%; position: relative; top:-50; z-index: 2 }
Note: You will have to adjust the positioning of the slider div.