I have a sidebar and I want it to fit the browser height.So I used 100vh.
It does work if I deleted the p element(with the background-text class).
* {
margin:0;
padding:0;
}
body{
overflow:hidden;
}
.wrapper>div{
display:inline-block;
}
.sidebar{
background-color:#4e4e4e;
height:100vh;
width:25%;
}
.picproperties{
padding:30px 0px 0px 30px;
}
.background-text{
display:block;
}
.returnbar{
height:25px;
background-color:#5a5a5a;
}
.workspace{
height:100vh;
width:75%;
background-color:red;
}
<body>
<div class="wrapper">
<div class="sidebar">
<div class="returnbar">
<div class="returnbtn"></div>
</div>
<div class="picproperties">
<div class="pp-background">
</div>
<div class="pp-ratio">
</div>
<div class="pp-patterns">
</div>
</div>
<div class="imgproperties">
<div class="ip-layers">
</div>
<div class="ip-image">
</div>
</div>
</div><!--
--><div class="workspace">
</div>
</div>
</body>
But when I keep the p element It doesnt work
* {
margin:0;
padding:0;
}
body{
overflow:hidden;
}
.wrapper>div{
display:inline-block;
}
.sidebar{
background-color:#4e4e4e;
height:100vh;
width:25%;
}
.picproperties{
padding:30px 0px 0px 30px;
}
.background-text{
display:block;
}
.returnbar{
height:25px;
background-color:#5a5a5a;
}
.workspace{
height:100vh;
width:75%;
background-color:red;
}
<body>
<div class="wrapper">
<div class="sidebar">
<div class="returnbar">
<div class="returnbtn"></div>
</div>
<div class="picproperties">
<div class="pp-background">
<p class="background-text">Background :</p>
</div>
<div class="pp-ratio">
</div>
<div class="pp-patterns">
</div>
</div>
<div class="imgproperties">
<div class="ip-layers">
</div>
<div class="ip-image">
</div>
</div>
</div><!--
--><div class="workspace">
</div>
</div>
</body>
How can I keep the p element and still make the sidebar fit the browser screen height (sorry for my bad english).
if you add float:left to sidebar it works:
* {
margin:0;
padding:0;
}
body{
overflow:hidden;
}
.wrapper>div{
display:inline-block;
}
.sidebar{
background-color:#4e4e4e;
height:100vh;
width:25%;
float:left;
}
.picproperties{
padding:30px 0px 0px 30px;
}
.background-text{
display:block;
}
.returnbar{
height:25px;
background-color:#5a5a5a;
}
.workspace{
height:100vh;
width:75%;
background-color:red;
}
<body>
<div class="wrapper">
<div class="sidebar">
<div class="returnbar">
<div class="returnbtn"></div>
</div>
<div class="picproperties">
<div class="pp-background">
<p class="background-text">Background :</p>
</div>
<div class="pp-ratio">
</div>
<div class="pp-patterns">
</div>
</div>
<div class="imgproperties">
<div class="ip-layers">
</div>
<div class="ip-image">
</div>
</div>
</div><!--
--><div class="workspace">
</div>
</div>
</body>
for an overview on css designing principles take a look at this!!
Related
I am making my website responsive but I am getting certain issues
the small text like dk and /md goes off the screen when in mobile mode
.box-head is not same as PSD I have if you compare the attached image and my code result there is less space in the head.
here is my code:
<div class="container">
<div class="row-fluid">
<div class="col-md-4">
<div class="box">
<div class="box-head">
<h3>BASIC</h3>
<div class="line"><hr></div>
<p>18 TV channels</p>
<p>See the list</p>
</div>
<!-- Box Head Closed -->
<div class="box-info">
<div class="content-wrapper">
<img src="card.png" alt="" class="img-responsive">
<div class="text-wrapper">
<div class="row">
<div class="col-md-8">
<h1>99</h1>
</div>
<div id="pack-price">
<span>dk</span>
<br>
<span class="md">/md</span>
</div>
</div>
</div>
</div>
<div id="charges">
<p>Min charge DK 1992 , -</p>
<p>8 months plan</p>
</div>
</div>
<button type="submit" class="btn btn-danger btn-lg center-block">Tell Me More</button>
</div>
</div>
CSS
.box {
background:white;
}
.box-head {
height:25%;
}
.box-head p,h3 {
text-align:center;
position:relative;
}
.box-head p {
font-size:18px;
font-weight:700;}
.box-head p a {
color:#2f84cc;
font-size:13px;
text-decoration:underline;
position:relative;
top:-15px;
}
.box-head h3 {
top:20px;
font-size:36px;
}
.box-info h1 {
text-align:center;
margin-top:40px;
}
#pack-price {
position:relative;
top:22px;
}
#charges {
text-align:center;
position:relative;
top:10px;}
.box button {
margin-top:30px;
}
image:
#create-summary {
width: 200px;
height:150px;
margin-top:20px;
overflow-x:auto;
overflow-y:auto;
}
.lv2 {
margin-left:15px;
}
.lv3, .lv4, .lv5, .lv6{
margin-left:15px;
}
#create-summary div {
border:1px solid red;
}
<div id="create-summary">
<div class="lv1">
1. Title1
<div class="lv2">1.1. Title1.1</div>
<div class="lv2">
1.2. Title1.2
<div class="lv3">1.2.1. Title1.2.1</div>
<div class="lv3">
1.2.2. Title1.2.2
<div class="lv4">
1.2.2.1. Title1.2.2.1
<div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div>
</div>
<div class="lv4">1.2.2.2. Title1.2.2.2
<div class="lv5">1.2.2.2.1. Title1.2.2.2.1</div>
<div class="lv5">1.2.2.2.2. Title1.2.2.2.2
<div class="lv6">1.2.2.2.2.1 Title1.2.2.2.2.1</div>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see the
class "lv6" and class"lv5" is not display correctly even I set overflow-x:auto.
How to set overflow:x auto to make it correctly?
You mean like that?
#create-summary {
width: 180px;
height:200px;
margin-top:20px;
overflow-x: auto;
}
.lv2 {
margin-left:15px;
}
.lv3, .lv4, .lv5, .lv6{
margin-left:15px;
white-space: nowrap;
}
<div id="create-summary">
<div class="lv1">
1. Title1
<div class="lv2">1.1. Title1.1</div>
<div class="lv2">
1.2. Title1.2
<div class="lv3">1.2.1. Title1.2.1</div>
<div class="lv3">
1.2.2. Title1.2.2
<div class="lv4">
1.2.2.1. Title1.2.2.1
<div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div>
</div>
<div class="lv4">1.2.2.2. Title1.2.2.2</div>
</div>
</div>
</div>
</div>
You need to make the whole div larger, Or you can set overflow-x to scroll.
#create-summary {
width: 250px;
height:200px;
margin-top:20px;
}
.lv2 {
margin-left:15px;
}
.lv3, .lv4, .lv5, .lv6{
margin-left:15px;
}
#create-summary div {
border:1px solid red;
}
<div id="create-summary">
<div class="lv1">
1. Title1
<div class="lv2">1.1. Title1.1</div>
<div class="lv2">
1.2. Title1.2
<div class="lv3">1.2.1. Title1.2.1</div>
<div class="lv3">
1.2.2. Title1.2.2
<div class="lv4">
1.2.2.1. Title1.2.2.1
<div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div>
</div>
<div class="lv4">1.2.2.2. Title1.2.2.2</div>
</div>
</div>
</div>
</div>
Add CSS white-space: nowrap; to lvl elements.
Here's what I'm trying to achieve: I want to have a sticky header, below it and adjacent to it a sticky div (which will contain an image, and it's height may vary, depending on the attached image size); below this sticky image container I want to have a div which will contain a gallery of smaller divs, and the gallery div must be scrollable, of course. Here's what I have so far:
HTML:
<body>
<header>
<div id="header_content">Header title</div>
</header>
<section>
<div id="div_main_image_container">
<div id="div_main_image">
<img id="img_main" src="http://imageshack.com/a/img543/2281/iu7x.jpg" />
</div>
</div>
<div id="gallery">
<div class="div_item_container">1</div>
<div class="div_item_container">2</div>
<div class="div_item_container">3</div>
<div class="div_item_container">4</div>
<div class="div_item_container">5</div>
<div class="div_item_container">6</div>
<div class="div_item_container">1</div>
<div class="div_item_container">2</div>
<div class="div_item_container">3</div>
<div class="div_item_container">4</div>
<div class="div_item_container">5</div>
<div class="div_item_container">6</div>
<div class="div_item_container">1</div>
<div class="div_item_container">2</div>
<div class="div_item_container">3</div>
<div class="div_item_container">4</div>
<div class="div_item_container">5</div>
<div class="div_item_container">6</div>
<div class="div_item_container">1</div>
<div class="div_item_container">2</div>
<div class="div_item_container">3</div>
<div class="div_item_container">4</div>
<div class="div_item_container">5</div>
<div class="div_item_container">6</div>
<div class="div_item_container">1</div>
<div class="div_item_container">2</div>
<div class="div_item_container">3</div>
<div class="div_item_container">4</div>
<div class="div_item_container">5</div>
<div class="div_item_container">6</div>
<div class="div_item_container">1</div>
<div class="div_item_container">2</div>
<div class="div_item_container">3</div>
<div class="div_item_container">4</div>
<div class="div_item_container">5</div>
<div class="div_item_container">6</div>
</div>
CSS
body { font-family:Verdana, Calibri, Arial, Helvetica, sans-serif; }
header { background:#000; height:60px; left:0; position:fixed; width:100%; top:0; }
#header_content{ line-height:60px; margin:0 auto; width:785px; color:#fff; }
section
{
height:auto;
left:0;
position:fixed;
width:100%;
top:60px;
}
#div_main_image_container
{
margin:auto;
width:785px;
color:#399;
background-color:#E0E0E0;
overflow:hidden;
margin-bottom:10px;
border-radius:0 0 3px 3px;
}
#div_main_image
{
margin:5px;
width:775px;
overflow:hidden;
border-radius:3px;
}
#div_main_image img { border-radius:3px; }
#gallery
{
margin:auto;
width:785px;
color:#399;
background-color:#fff;
}
.div_item_container
{
width:235px;
padding:5px;
float:left;
margin-right:25px;
background-color:#E0E0E0;
border-radius:3px;
margin-bottom:20px;
}
.div_item_container:nth-child(3n+0) { margin-right:0; }
Here's the full working code:
http://jsfiddle.net/272ww/5/
I can't make the gallery div be scrollable. I tried to place it outside the , but I can't make it to be exactly below the sticky image div. I also can't make it be fixed in a position, since the image div's height may change from image to image.
How can it be done?
Update css
section
{
height:auto;
width:100%;
padding-top:60px;
}
#div_main_image_container
{
position:fixed;
top:80px;
margin:auto;
width:785px;
margin-left:50%;
left:-392px;
color:#399;
background-color:#E0E0E0;
overflow:hidden;
margin-bottom:10px;
border-radius:0 0 3px 3px;
}
jQuery to Set Position
var headerHeight = $('#header_content').outerHeight(),
imgHeight = $('#div_main_image_container').outerHeight();
myPaddingTop = headerHeight + imgHeight;
$('#gallery').css({
paddingTop: myPaddingTop
})
Update Demo
First of all, you need to remove position:fixed; from your section, that will make page scrollable. As for the other contents, I'm afraid I need further explanation :(
How can i place text below three circles with responsive design in a one div. Sample image below.
The following should be a good starting point.
HTML
<div class="container">
<div class="circle-content">
<div class="circle"></div>
<p>Circle One</p>
</div>
<div class="circle-content">
<div class="circle"></div>
<p>Circle Two</p>
</div>
<div class="circle-content">
<div class="circle"></div>
<p>Circle Three</p>
</div>
</div>
CSS
.container {
width:100%;
}
.circle-content {
width:33%;
text-align:center;
float:left;
}
.circle {
display:inline-block;
width:60%;
padding-bottom:60%;
border-radius:60%;
border:15px solid #333;
}
.circle-content p {
font-size:16px;
color:#666;
}
http://denartcc.org/images/help.jpg
As you can see from the arrows in my attached picture, I'm trying to slide those four divs (Who's Online, Upcoming Events, Statistics, and Weather) UP to fill the void. The column on the right has a variable height, and when it expands, those four aforementioned divs continue to move down the page. They need to stay underneath the white box.
The problem with absolute positioning is that the four divs (Who's Online, Upcoming Events, etc.) will also have variable heights, so I don't want to stick the second row of those in an absolute position.
HTML
<div id="TopContentWrapper">
<div id="phototicker">
<jdoc:include type="modules" name="phototicker" />
</div>
<div class="RightSide">
<div class="rtsidemod">
<div class="rtsidetitle">Control Panel</div>
<div class="rtsidecontent"><jdoc:include type="modules" name="controlpanel" /></div>
</div>
<div class="rtsidemod">
<div class="rtsidetitle">Newletter</div>
<div class="rtsidecontent"><jdoc:include type="modules" name="newsletter" /></div>
</div>
<div class="rtsidemod">
<div class="rtsidetitle">Event Notifications</div>
<div class="rtsidecontent"><jdoc:include type="modules" name="eventnotifications" />Check Check</div>
</div>
<div class="rtsidead">
<img src="http://denartcc.org/dev/templates/NexGenDEN/images/ads/forum.png"></img>
</div>
<div class="rtsidead">
<img src="http://denartcc.org/dev/templates/NexGenDEN/images/ads/ts.png"></img>
</div>
<div class="rtsidead">
<img src="http://denartcc.org/dev/templates/NexGenDEN/images/ads/ts.png"></img>
</div>
</div>
<div class="midbox1">
<div class="modbox">
<div class="modtitle">Who's Online
</div>
<div class="mid1">
<p class="mid"><jdoc:include type="modules" name="whosonline" /></p>
</div>
</div>
<div class="modbox">
<div class="modtitle">Upcoming Events
</div>
<div class="mid2">
<p class="mid"><jdoc:include type="modules" name="upcomingevents" /></p>
</div>
</div>
</div>
<div class="midbox2">
<div class="modbox">
<div class="modtitle">Statistics
</div>
<div class="mid1">
<p class="mid"><jdoc:include type="modules" name="statistics" /></p>
</div>
</div>
<div class="modbox">
<div class="modtitle">Weather
</div>
<div class="mid2">
<p class="mid"><jdoc:include type="modules" name="weather" /></p>
</div>
</div>
</div>
</div>
CSS
#TopContentWrapper {
width:920px;
margin:0 auto;
position:relative;
}
div.RightSide {
width:255px;
float:left;
margin-left:5px;
}
div.rtsidemod {
float:left;
width:100%;
padding-bottom:5px;
background-image:url(../images/rightbg.png);
background-repeat:repeat-y repeat-x;
}
div.rtsidetitle{
font-weight:bold;
color:white;
font-size:12px;
background-image:url(../images/rttitlebg.png);
background-position:top left;
height:15px;
}
div.rtsidetitle:hover {
background-position:bottom left;
}
div.rtsidecontent {
font-size:11px;
color:white;
}
div.rtsidead {
width:255px;
float:left;
margin:5px 0 0 0px;
border:1px solid black;
}
div.modtitle {
width:322px;
height:15px;
font-size:12px;
color:white;
font-weight:bold;
background:url(../images/midmodbg.jpg);
background-repeat:repeat-x;
}
div.mid1 {
display:block;
float:left;
background-image:url(../images/midmodcontentbg.png);
background-repeat:repeat-both;
width:320px;
border:1px solid black;
border-top:none;
height:70px
}
div.mid2 {
display:block;
float:left;
background-image:url(../images/midmodcontentbg.png);
background-repeat:repeat-both;
width:320px;
border:1px solid black;
border-top:none;
height:70px
}
div.modbox {
float:left;
width:310px;
margin-right:19px;
margin-top:5px;
}
div.midbox1 {
float:left;
width:660px;
margin:0px 0 0px 5px;
padding:0;
}
div.midbox2 {
float:left;
width:700px;
margin:0px 0 0px 5px;
padding:0;
}
Rearrange your divs to be in 2 columns rather than 4 quadrants. You currently have:
<div id="phototicker">
...
</div>
<div class="RightSide">
...
</div>
<div class="midbox1">
...
</div>
<div class="midbox2">
...
</div>
Instead, arrange them like this:
<div class="LeftSide">
<div id="phototicker">
...
</div>
<div class="midbox1">
...
</div>
<div class="midbox2">
...
</div>
</div>
<div class="RightSide">
...
</div>
That way, the midboxes will naturally flow under the phototicker. You will need to have a specific width on the right and left side divs and then just float the both left.