I have the following page:
HTML:
<div class="spacer">
<div id="conversation"></div>
</div>
<div class="colorbox">
</div>
<div class="box">
<div id="message"> XXXX </div>
</div>
CSS:
body {padding: 0; margin: 0; overflow: hidden; font-family: Helvetica;}
.box {
background-color: #FFFFFF;
height:200px;
width: 700px;
border-top-style:solid;
border-top-width: 2px;
border-top-color: #EEEEEE;
display: inline-block;
}
.spacer {
background-color: #FFFFFF;
height:40px;
}
.colorbox{
display: inline-block;
height:120px;
width:120px;
border:1px solid #000;
background-color:blue;
}
#message{
margin:5px;
}
JS Fiddle: http://jsfiddle.net/qtv4c10o/5/
I would like to be able to delete the XXX text without moving the line in that border box, but unfortunately that's not working. When I remove it the line moves to look like this:
http://jsfiddle.net/qtv4c10o/6/
I am eventually going to be updating the XXX text using javascript and don't want the border line to move as well.
The reason your line goes under the blue square is:
You gave a fixed width of 700px to the box class.
So if you reduce the size of the window, your line cannot reach 700px: it has to go where there is more space, ie below the box.
Solution: give it a width that can be achieved within the remaining space
The issue was resolved in chat. Here is a working solution:
Let's first wrap colorbox and box with an outer div.
<div class="outer">
<div class="colorbox"></div>
<div class="box">
<div id="message"> XXXX </div>
</div>
</div>
The outer class is so:
.outer {
width:100%;/* the whole width available */
height:120px;/* same height as blue square */
display:table;
}
We'll give outerbox the following property:
display:table-cell;
and add to box:
width: 100%; //the remaining width, actually
margin-top:105px; // blue square height minus height of message
Here is a working fiddle: http://jsfiddle.net/xzxn4rzf/1/
Related
I am having an issue with the position-fix; top 100px;. when I use position-fix; top 100px; and run the program, the result will be "google scroller doesn't show up on the screen". when I don't use when I use position-fix; top 100px; then google scroller shows up on the screen.
Here is the HTML code.
<body>
<section class="container">
<div style="position:fixed; top:180px" class="First">
<ul id="ListName" class="">
<li><a style="text-decoration:none" href="interest.html"> Interest </a></li>
</ul>
</div>
<div style="position:fixed; top:180px;" class="Second">
<h1 align="center"> sport</h1>
<p>
<ul>
<li> soccer and,</li>
<li> football </li>
</ul>
</p>
</div>
</section>
<div id="" class="" style="clear:both;"></div>
</body>
Here is the CSS code.
<style>
.container {
width: 99%;
height: auto;
margin: auto;
padding: 10px;
font-family: Verdana,Geneva,Tahoma,Arial,Helvetica,sans-serif!important;
}
.First {
height: auto;
width: 20%;
background: white;
border:1px solid #666;
float: left;
}
.Second {
margin-left: 21%;
height: auto;
width:640px;
border:1px solid #666;
background: white;
}
</style>
Your requirement is bit confusing, it's not clear that whether you want to make the second div inside the section element scrollable then you can do it by adding a height or max-height property to the Second class.
Same holds true for any container scroll bar appear only when the content inside a div or any container exceeds the height specified.
If you want to make second div scrollable, you need to do following.
.Second {
height:100px !important;
overflow-y: scroll !important;
margin-left: 21%;
height: auto;
width: 640px;
border: 1px solid #666;
background: white;
}
If you want to make body element scrollable then you can set a height property or when your content increases the automatically body will be scrollable.
checkout the fiddle here.
I have added a width property to the second div in order to make it fit in the fiddle window.You may remove it. Also pasted some sample text inside body to demonstrate that body is scrollable when it has enough text or if you want a set a fix height you can do that as well.
NOTE: you need to set the property value with !important so that it overrides and forces browser to apply that css.
height:100px !important;
Hope it helps!!
On our page we have a position: fixed header that stays at the top of the page as you scroll. Our product team wishes to have a gap/margin between this fixed element and the top navbar.
However, once we add in this gap, when the user scrolls, they can then see the elements scrolling away above the fixed header. I have created a jsfiddle to show the problem:
https://jsfiddle.net/9n50o567/
If you scroll down, the grey sections appear above the light-blue header while you are scrolling.
Is there anyway to hide this from the user? So all that would show above the fixed element is the background colour, or the background image if there is one (as it will vary from user to user). Essentially masking the elements?
We have tried creating a div that takes on the same colour as the body's background colour, however this just doesn't work when there is a background image. Also we tried using jQuery to detect what elements are present in that section and hiding them as they scroll through, but if the element is bigger than the header, it would dissapear prematurely.
I'm not sure if any of this is making sense, so if you have any more questions, please don't hesitate to ask below.
This is not perfect, certainly it works for colors, but background-images may be a little harder.
A positioned pseudo-element on the <body> which inherits the body bg color seems to work.
body {
background: red;
position: relative;
}
body::before {
content: '';
height: 25px;
display: block;
width: 100%;
background: inherit;
position: fixed;
top: 0;
left: 0;
}
.header {
background-color: #ccffff;
height: 300px;
width: 500px;
border: 1px solid black;
position: fixed;
top: 25px;
left: 8px;
}
.push {
height: 335px;
}
.section {
background-color: #cccccc;
height: 300px;
width: 500px;
border: 1px solid black;
margin-bottom: 15px;
z-index: 10;
}
<div class="header"></div>
<div class="push"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
JSfiddle Demo
Background image fiddle (with background-attachment:fixed) - Fiddle
Use a div to act as the gap (.headergap) see below.
Css:
.headergap{
background-color: #cccccc;
position:fixed;
top:0px;
height: 25px;
width: 100%;
}
.header {
background-color:#ccffff;
height:300px;
width:500px;
border:1px solid black;
position:fixed;
top:25px;
left:8px;
}
.push {
height:335px;
}
.section {
background-color: #cccccc;
height:300px;
width:500px;
border:1px solid black;
margin-bottom:15px
}
Html:
<div class="headergap"></div>
<div class="header"></div>
<div class="push"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
See fiddle:
https://jsfiddle.net/6bhhn869/
Updated code
I have used vh for timing you may use jquery to calculate height and apply it to in-wrap.
So quick question, I haven't been able to find the correct phrasing perhaps in google but I'm attempting to make a fixed banner will scale when the page is resized. I've found that using a percentage width works for at least the large container, however my banner container within the main container will not rescale into that adequately (The banner is extending longer than the main container).
CSS:
.contMain {
width:80%;
position: top
padding-top: 0;
border-top: 0;
margin: 0 auto;
background-color: #F1EDCC;
}
.contMain-banner {
position:fixed;
width: inherit;
background: #87AADF;
}
HTML:
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Some Title</h1>
{{> MeteorTemplate}}
</div>
</div>
The only higher level css is a .body tag in css for a background color. I am using MeteorJS for this. Cheers
Try this - codepen here
css
body {
height:100%;
width:100%;
}
.contMain {
height:150px;
width:80%;
padding:0;
margin: 0 auto;
background-color: #333333;
}
.contMain-banner {
position:fixed;
width: inherit;
height:auto;
background: #d7d7d7;
}
span {
color:#fff;
position:absolute;
top:125px;
}
HTML
<body>
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Main Content Banner</h1>
{{> MeteorTemplate}}
</div>
<span>This is the main container</span>
</div>
</body>
So I have a dropdown thingy. You click on the 'Click Me' text and it'll show. Here's a demo to it http://jsfiddle.net/QzLst/
Now here's the issue. The blue text on the right, shows even when I placed it in the div that slides up and down. I'm not really sure where to go from here. Here's my markup
<div class="search">
<div class="text">
Some text
</div>
</div>
<div class="click">Click me</div>
And the CSS
.search{
width: 100%;
background: #000;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
z-index: 200;
height:0;
transition: 0.5s;
}
.toggle{
height:100px;
}
.text{
color: #009dff;
float: right;
}
The demo will help you understand what I mean. All I want is the text to slide with the div named search. So when search closes, basically I guess text would also close
Add overflow: hidden to .search.
This solves that problem:
[update to your fiddle] [http://jsfiddle.net/QzLst/1/]1
We can simply hide the .text class with this CSS:
.text {
display: none;
}
Then we toggle the .text class:
$(".click").click(function(){
$(".search").toggleClass("toggle");
$(".text").toggle()
});
I'm working on a mobile site page, I got two divs in a parent roughly set up like so:
<div id="parent">
<div id="left" style="float:left;"> </div>
<div id="right" style="float:right;"> </div>
</div>
They both have a min-width and margin set.
They display next to each other fine. But I want to set it up so that if the width is too small (say on an iphone), they span two lines and take up the whole width of the page by itself.
At the moment, I can't get the width to dynamic jump to 100% of the page when they span two lines. All it does is the left div sticks to the left and the right div to the right.
I've read somewhere about using inline block, and toying with the overflow and position but I can't get it to work.
Any tips or suggestions?
Thanks.
edit:
Here's the css I'm using at the moment
<div style="width:96%;">
<div style="float:left; min-width:220px; margin:10px auto 5px auto;">
content
</div>
<div style="float:right; min-width:230px; margin:0px auto 5px auto;">
content
</div>
</div>
Try this
CSS
#parent {
border : 2px solid #000;
overflow:hidden;
}
.parent div {
min-height: 200px;
padding: 10px;
}
#left {
background-color: gray;
float:left;
margin-right:20px;
width:140px;
}
#right {
background-color: white;
overflow:hidden;
margin:10px;
min-height:170px;
}
#media screen and (max-width: 400px) {
#left {
float: none;
margin-right:0;
width:auto;
border:0;
}
}
HTML
<div id="parent">
<div id="left">left</div>
<div id="right">right</div>
</div>
DEMO
You have to set media queries for the style tags. Take the CSS out of the inline and set them in the stylesheet instead.
#media only screen and (min-width: 481px) {
#left {float:left;}
#right {float:right;}
}
The DIVs then only float to the left and right if the screen is wider than 480px:
<div id="parent">
<div id="left" > </div>
<div id="right"> </div>
</div>