I have a responsive layout with a grid of content blocks.
on desktop each row is 4 blocks
on tablet each row is 3 blocks
on phone each row is 2 blocks
I want a horizontal line to run between each row of blocks on all sizes. At the moment I have a border bottom on each block but the line doesn't extend the full width of the page if you have an empty space (eg 3 blocks on a 4 column grid)
The only way I can think of doing it is to wrap each row in a container using JS and reload that function on each screen resize.
Anyone know of a CSS solution?
This image should demonstrate what I'm trying to achieve:
If old browser support is not an issue, you could put some :before or :after code insertion to insert stuff before the start of each row
e.g. something like
<!DOCTYPE html>
<html>
<head>
<title>Quick and dirty border demo</title>
<style>
div {width: 47%; float:left; border: 1px solid #333; margin:1em 5px}
div:nth-child(2n+1):before {
content:'';
border-bottom:1px solid green;
position:absolute;
display:block;
width: 100%;
margin-top: -1em;
}
</style>
</head>
<body>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
</body>
</html>
With different patterns (3n+1 etc) for each media query.
If you don't want a border above the first row, use (2n+3), (3n+4) ... (xn+(x+1))
You can use some CSS media queries instead of javascript:
#media (max-width:768px) { /*Extra small devices - Phones (<768px)*/
/*css here to show only the horizontal line for this size*/
}
#media (min-width:768px) { /*Small devices - Tablets (≥768px)*/
/*css here to show only the horizontal line for this size*/
}
#media (min-width:992px) { /*Medium devices - Desktops (≥992px)*/
/*css here to show only the horizontal line for this size*/
}
#media (min-width:1200px) { /*Large devices - Desktops (≥1200px)*/
/*css here to show only the horizontal line for this size*/
}
Related
So there are a lot of questions like this on StackOverflow but there doesn't seem to be one that will be helpful in my case.
As you can see, I have 2 divs on the screen. One on the left which is
float:left;
and the one in the middle is
margin-left-auto;
margin-right:auto;
So my question is, when I want to put another div JUST like the one on the right on the left of the middle DIV, how will I go on to doing this?
float:right;
has been tried on the right div but that just puts it in a different line because of the left div being floated.
So how do I do this? Answers are greatly appreciated.
I can provide more code such as how the DIV"s are arranged if needed.
All I did was type
display: flex;
in the container div and it worked perfectly.
To create a main body of content with a left and right sidebar, you can float:left and simply define a width for each div in the CSS.
ie:
.div1 {width:25%}
.div2 {width:50%}
.div3 {width:25%}
If you want to account for padding, just reduce the amount divided by three on each div width.
ie: http://jsfiddle.net/simsketch/9tj4va6r/
It might help you to start out using a framework like Foundation or Bootstrap.
Foundation provides lots of starter templates to help get you started here.
http://foundation.zurb.com/templates.html
When using a grid system, instead of needing to define widths in your custom css, you can simply include the foundation.css library, and reference the classes.
ie: <div class="large-6">content</div>
For the layout you're after, this would do the trick.
http://foundation.zurb.com/templates/feed.html
What they're doing there is simply:
<div class="large-3"></div>
<div class="large-6"></div>
<div class="large-3"></div>
As long as the numbers add up to twelve, they will fit perfectly.
This has been a brief introduction to grid systems. Consult the following for more information:
http://foundation.zurb.com/
http://getbootstrap.com/
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
These are the two most popular front-end frameworks but there are dozens more and they are all wonderful.
Flexbox solution
Wrap the items inside a parent container and set the display: flex
flex: 1 on the left and right items will grow and shrink it 1x.
flex: 2 on the middle items will grow and shrink it 2x.
.container {
display: flex;
}
.left,
.right {
flex: 1;
text-align: center;
background: #E77F24;
}
.middle {
flex: 2;
text-align: center;
background: lightblue;
margin: 0 10px;
}
<div class="container">
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
</div>
.div1{
width:25%;
overflow:auto;
float:left;
background-color:blue;
color:white;
text-align:center;
}
.div2{
width:50%;
overflow:auto;
float:left;
background-color:red;
color:white;
text-align:center;
}
.div3{
width:25%;
overflow:auto;
float:left;
background-color:green;
color:white;
text-align:center;
}
<body>
<div class="div1">First Div</div>
<div class="div2">Second Div</div>
<div class="div3">Third Div</div>
</body>
I have 2 divs side by side inside a main div. Lets say- left_div & right_div. When browser is in full screen mode- than left_div is 60% and right_div is 40% in width(as, main_div is 100% width).
Now if i restore the browser window and reduce its width- than the divs get underneath each other but still remains the same percentage as 60% & 40% of the screen.
What i want is that if the browser width gets underneath a certain amount than the divs will get underneath each other and also fillup the whole screen width-ie become full browser width.
How can i do it? Do i need to do it with JavaScript or jQuery?
HTML:
<div class="mainDiv">
<div class="left">
test
</div>
<div class="right">
test2
</div>
</div>
CSS:
div.main
{
width:100%;
}
div.left
{
width:60%;
background-color:red;
float:left;
height:100px;
}
div.right
{
width:40%;
background-color:blue;
float:left;
height:100px;
}
#media (max-width: 350px) {
div.left, div.right
{
float:none;
width:100%;
}
}
check this once may be help you here is demo
HTML
<div class="left-div">Left</div>
<div class="right-div">Right</div>
CSS
.left-div{width:60%;height:100px;float:left;background-color:#000;color:#fff}
.right-div{width:40%;height:100px;float:right;background-color:#333;color:#fff}
#media (max-width: 479px) {
.left-div, .right-div{float:none;width:100%;}
}
Your problem has been many people's problem. While you can write your own CSS, but you should consider screens with different DPIs and different devices and different browsers. But Bootstrap allows you to easily manage these situations.
http://getbootstrap.com/
once you include bootstrap in your page, you can have two DIVs like this
http://jsfiddle.net/Gt25L/119/
<div class="col-md-4"></div>
<div class="col-md-8"></div>
Also look at the tutorials, and they guide you through how to make responsive websites using bootstrap. you will not need any JavaScript. Bootstrap is based on CSS only.
This way you have less CSS to maintain and less chance of wrong behaviour in different browsers & devices over time.
I have a simple web page meant as a table of contents to other pages. I have five images used as buttons to those other pages, but I need them to be displayed in a specific way. I have everything centered, and the background is static and doesn't move when you scroll, but the problem is with the buttons.
I would like them to be of a specific height based on the current height of the browser. I say current height because I need it to resize itself if the user resizes the window.
Also, and more importantly, I need this to prevent the table of contents from ever being larger than the height of the browser. I noticed that on different screen resolutions, the images are larger or smaller and can look terrible because of this.
So, for instance, I want the height of there to be the same amount of space between the bottom of the browser and the table of contents, and between the top of the browser and the table of contents, no matter how large the browser window is or the resolution of the user's screen.
I was thinking, through javascript, to grab the size of the window using something like window.innerHeightand set the height of the div encompassing the table of contents to this value.
This is what I have so far, but the script doesn't seem to do anything at all (it's my first time using javascript so I might very well be doing something stupid.):
<html>
<head>
<style>
html, body {
height: 100%;
}
body {
background-image: url(../images/background.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
#logo {
width: 200px;
margin-top: 15px;
}
.c1 {
width: 300px;
margin-top: 15px; <!--margin between buttons-->
}
</style>
<title>Some Title</title>
</head>
<body bgproperties="fixed"> <!--static background-->
<div align="center" id="contents">
<div >
<a href="http://somewebpage">
<img id="logo" src="images/logo.png" alt="Logo"> <!--title button-->
</a>
</div>
<div >
<a href="http://somewebpage">
<img class="c1" src="images/img1" alt="image 1"> <!--second button-->
</a>
</div>
<div>
<img class="c1" src="images/img2" alt="image 2"> <!--third button-->
</div>
<div >
<img class="c1" src="images/img3" alt="image 3"> <!--fourth button-->
</div>
<div>
<img class="c1" src="images/img4" alt="image 4"> <!--fifth button-->
</div>
</div>
<script>
var ht = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; <!--Get the height of the browser-->
document.getElementById("contents").style["height"] = ht; <--set height of table of contents-->
</script>
</body>
</html>
You can set this all by CSS but you can go with JavaScript also.
What you need is to set properties in Percentage(%); Such as:
width: 90% (You can replace value as you need to show on screen)
For preventing to not go more than specified width then you can set max-width(Again in percentage)
You can set height as auto.
$(document).resize(function(){
if(document.innerHeight > 350) {
do something
}
});
I agree with other answers in adjusting size, width and height etc. But after reading your question, i think responsive UI is what something you are looking for. Why not you try frameworks like BootStrap to help you. Instead of reinventing the wheel we can use some thing existing that is very easy to use. getbootstrap.com is the url and easy to implement.
(I couldn't post it as comment as i have less reputation :))
You can accomplish your goal two ways:
CSS Media Queries: CSS detects the size of the viewport (window, for lack of a better way of explaining it), and applies certain rules if the viewport matches the #media query. Below are some examples. Also, have a look at this CodePen for a better idea of how it works.
/* If the browser width is anything less than 100px, */
#media (max-width: 100px){
/* Set the height of an element */
#my_element{
height: 200px;
}
}
/* If the browser width is 1000px or more, */
#media (min-width: 1000px){
/* Set the height of an element */
#my_element{
height: 2000px;
}
}
/*
You can also do widths in ranges.
If the width is between 600px and 800px,
*/
#media (min-width: 600px) and (max-width: 800px){
/* Styles here */
}
/* This applies to height as well */
#media (max-height: 500px){
/* Styles here */
}
Another way you can get it done is using percentage units: set the width of your buttons to 50%, and resize the browser window. They should now be flexible. Play around with percentages until your satisfied. Personally, I prefer media queries as they allow for more precision, but take your pick! Hope this was helpful!
I want to know how to make an adjustable div container which adjusts its own width and height according screen its being displayed in laptop, netbook or desktop. It must be so that no text under or overflows its container and no white spaces are left within the container.
I tried using % or em but since its based on base font-size 16px there are occasion in smaller netbook screen where the text overflows or in bigger screen desktop where there are whitespaces left in the bottom of container.
Any suggestions would be greatly appreciated.
<style type="text/css">
.tt
{
border: 2px solid red;
height: 80px;
width: 168px;
font-size: 16px;
padding: 0px;
}
</style>
</head>
<body>
<div class="tt">
Hello World Hello World<br>
Hello World Hello World<br>
Hello World Hello World<br>
Hello World Hello World<br>
</div>
</body>
You can try this to make the div stretch to the screen:
html, body, .tt { width:100%; height:100%; padding: 0; margin: 0;}
.tt
{
border:2px solid red;
font-size:16px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
Beware, box-sizing is a CSS3 property.
If you don't want to use it, you can remove the border from the div, or use tables (deprecated).
Do you also need to fill the hole screen with text?
In that case, this will be usefull: CSS: Set font to a size so the text would occupy whole container
(the link is a duplicated question, but in my opinion has a more easy to understand answer).
I want to achieve this kind of layout with pure CSS:
The gradient in the background is 100% the width of the browser window. The inner text is inside a 1000px div, centered inside the browser window. Now I want the text to define the height of the gradient. And here is the problem: The gradient is positioned absolute (left: 0px; width: 100%), but the text is inside another div.
I've tried some things with display:table; and display:table-cell; but once I put the gradient div to position:absolute it doesn't inherit the height of the text div.
Anyone a solution how to achieve this in pure CSS without javascript?
EDIT:
I'm sorry I forgot to mention that the gradient isn't the problem (I' using css3). And furthermore I also forgot to add the code: http://jsfiddle.net/kxu8N/1/
Absolutely-positioned elements are not part of the layout flow, therefore they cannot inherit dimensional information from parent elements.
You should be using a CSS background image (or a CSS3 gradient) on the element wrapping your text to give you the gradient instead of using a separate element.
You can use the css3 background-size property to scale the height of the gradient. Set the height to auto on a div with the gradient as its background.
Here's an answer without knowing your HTML structure: http://jsfiddle.net/8xagQ/1/
.gradient{
background: -webkit-linear-gradient(left, rgba(0,119,255,0) 0%,rgba(0,119,255,1) 25%,rgba(0,119,255,1) 50%,rgba(0,119,255,1) 75%,rgba(0,119,255,0) 100%);
margin:10px 0;
text-align:center;
color:#fff;
padding:10px 0;
}
Note that I only included the gradient instructions for webkit.
<html>
<head>
<style type="text/css">
p,span{
margin-left:20px;
}
#logo{
font-weight: bold;
height:100px;
}
#slogan{
width:100%;
height:150px;
background: -webkit-linear-gradient(left, rgba(0,119,255,0) 0%,rgba(0,200,230,15) 25%,rgba(0,200,230,15) 50%,rgba(0,200,230,15) 75%,rgba(0,119,255,0) 100%);}
</style>
</head>
<body>
<div id="logo">
<p>Logo</p>
</div>
<div id="slogan">
<span>some text that defines hieght of this</span>
</div>
</body>
</html>
In my Case I move your blue into your gradient. that way, once you add more line, line of text it will increate automaticaly
<div id="container">
<div id="outer">
<div id="blue-background">
<div class="span3" id="blue">
Here is my content<br>
and this content should define the height of the underlying #blue-background <br />
and if we are adding more and more and more
</div>
</div>
</div>
</div>
Then to the text into it I change few setting in the CSS
#blue {
z-index: 1;
position:relative;
margin:auto;
text-align:center;
}
Because I didn't find any solution, I hacked it. Cause my content gets added dynamically through javascript, I added the content two times. The first time visible inside the overlaying div (over the blue background), and the second time inside the blue background. With visibility: hidden I hide all the divs inside the blue background.
And because both divs got the same content, they get the same height. Not beautiful, but it works.