so i'm making a project and I want the three box style page, however when I do the auto-expand to fit the content inside the boxes it floats over the other boxes - as I have had to position them.
html code:
<div class="content">
<h2>Contact me</h2>
<p>--content holder--</p>
</div>
<div class="content-bottom-left">
<p>--content holder--</p>
</div>
<div class="content-bottom-right">
<p>--content holder--</p>
</div>
my CSS:
.content {
background-color: 373737;
top: 15%;
width: 55%;
right: 25%;
position: absolute;
overflow: hidden;
margin-bottom: auto;
}
.content-bottom-left {
background-color: 373737;
width: 27%;
left: 15%;
top: 60%;
position: absolute;
overflow: hidden;
}
.content-bottom-right {
background-color: 373737;
width: 27%;
right: 20%;
top: 60%;
position: absolute;
overflow: hidden;
}
Outcome:
Outcome
add this CSS rule to your Div tags:
display:inline-block;
Your CSS doesn't allow the positions of the elements to move with above content
adding the following to both of the lower should do it.
clear: both;
tells elements to avoid collisions with elements on their left and right with which they collide, along with behnam bozorg's comment it should work.
You might also remove the top absolute positioning as it is being pushed down anyways.
.content-bottom-left {
background-color: 373737;
width: 27%;
left: 15%;
top: 60%;
position: absolute;
overflow: hidden;
}
.content-bottom-right {
clear: both;
display: inline-block;
background-color: 373737;
width: 27%;
right: 20%;
top: 60%;
position: absolute;
overflow: hidden;
}
Related
I have some issues with div sizing when I resize browser window. I want child divs always remain inside the parent div and decrease in size proportionally to parent div when browser window resizing. I guess it should be a javascript but I dont know which one exactly and how to use it. Any advice will be appreciated!
#parent
{
position: fixed;
width: 100%;
height: 11%;
background-color: white;
left: 0;
}
#child1
{
left: 100px;
position:absolute;
}
#child2
{
position: absolute;
left: 700px;
margin-top: 15px;
font-size: 1.5em;
}
<div id="parent">
<div id="child1">
<a> <img src="img\linkedin.png" alt="jhj" width="200px;" height="70px;" /> </a>
</div>
<div id="child2"> <a>Home</a> <a>Examples</a> <a>Tricks</a> <a>Contact us</a>
</div>
</div>
Try changing the styles for both children to the following:
#child1 {
left: 100px;
position:absolute;
width: 50%;
}
#child2 {
position: absolute;
right: 0;
margin-right: 20px;
text-align: right;
width: 50%;
margin-top: 15px;
font-size: 1.5em;
}
To be able to affect to the parent div the #child2 should be position: relative; like this:
#child2 {
position: relative;
top: 15;
margin-top: 0;
}
https://jsfiddle.net/eapo/1tkqsm5q/
I created an image slider, but I am running into an issue. I want the width of the images to be the entire width of the screen; I accomplished this. However, my images' height are more than 100% of the height of the screen. I am wanting the height to be around 50-70% of the screen (preferably 50%). I tried adding height: 70vh; to my images, but that did not help.
Can anyone suggest something to help this?
My slider can be viewed at: http://realtorcatch.com/slider3
My code is:
* {
padding: 0;
margin: 0;
}
body {
font-family: Sans-Serif;
}
img {
max-width: 100%;
/*height: 70vh;*/
}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200%;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 999;
cursor: pointer;
}
.cycle-prev {
left: 10%;
}
.cycle-next {
right: 10%;
}
.cycle-pager {
width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 20px;
z-index: 999;
cursor: pointer;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
overflow: hidden;
}
.cycle-pager .cycle-pager-active {
background-color: #FFF;
}
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/subway.jpg" alt="subway">
<img src="images/beach.jpg" alt="beach">
<img src="images/space.jpg" alt="space">
</div>
On your img declaration, instead of max-width set width to 100% and height to 70vh. If you'd like more variety in the height, try setting the min-height to be 50vh and the max-height to be 70vh.
Be warned, this will skew your images and make them look disproportionate.
Alternate solution:
Create a "scrim". By this, I mean create a box that covers up the bottom half of the page. You can actually do this with a pseudo-element from your wrapper:
.cycle-slideshow {
position: relative;
...
}
.cycle-slideshow:after {
content: '';
width: 100%;
height: 50%; //50% of parent element
background-color: white;
position: absolute;
top: 50%;
left: 0;
z-index: 2;
}
change style of img to img {width: 100%; height: 100vh;}
It will work for you. Thank you.
try this,, Hope it will help you.
var vHeight = $(window).height()/2, // for 50%
vWidth = $(window).width(),
I'm using ng-repeat to display some messages, and I'm trying to make the "message_area" scrollable as the messages naturally cause overflow over time, but my code doesn't work as expected.
<div class="main_area">
<div id = "message_area" ng-repeat = "message in selected_conversation_object.messages.slice().reverse()">
<div class="message_container" ng-if = "message.sender != me._id">
<div class="message_received">{{message.message}}</div>
</div>
<div class="message_container" ng-if = "message.sender == me._id">
<div class="message_sent_by_me">{{message.message}}</div>
</div>
</div>
</div>
.main_area {
position: absolute;
top: 0;
bottom: 0;
left: 325px;
right: 0;
height: 100%;
background: white;
}
#message_area {
position: relative;
overflow-y: scroll;
}
.message_container {
position: relative;
width: 100%;
height: 30px;
}
.message_received {
}
.message_sent_by_me {
position: relative;
background-color: #0084FF;
border-radius: 5px;
width: 100px;
color: white;
float: right;
}
I've not been able to understand why my code does not work.
Any suggestions would be appreciated.
You need to set min-height for the #message_area selector.
#message_area {
position: relative;
min-height: 50px; // Add This.
overflow-y: scroll;
}
Use scroll to your .main_area. When the ever the data gets more than the given height it manages it with scroll bar on y-axis.
.main_area {
position: absolute;
top: 0;
bottom: 0;
left: 325px;
right: 0;
height: 100%;
background: white;
**overflow-y: scroll;**
}
Working Plunker.
I'm having a small problem with some text jumping around in my sticky menu. This is my code: http://jsfiddle.net/u6ywraj8/
As you can see, I want the red #menu to stick to the top when a user scrolls down. However, the text in the top left part of the menu jumps around. I want this text to always be in the top left part of the red menu, I don't want it to have the initial ~100px padding.
Thank you for your help!
Try this one
sticknav {
background: none repeat scroll 0 0 #ffffff;
display: inline-block;
height: 30px;
left: 0;
margin-left: 0;
margin-right: 0;
position: relative;
right: 0;
width: 100%;
z-index: 9999;
}
Add float: left; to this class sticknav{}
sticknav {
background: #ffffff;
height: 30px;
width: 100%;
margin-right: 0px;
margin-left: 0px;
left: 0px;
right: 0px;
position: relative;
z-index: 9999;
float: left;
}
Problem:
On hover div .galleryIndex will be "filled" with div .galleryHover. .galleryIndex has width in percentage and doesn't have fixed height. I want to put div .white_line_gallery_hover at the bottom of div .galleryHover.
HTML:
<div class="galleryIndex">
<img src="images/galleryIndex1.png" class="imageResponsive" />
<div class="galleryHover">
<img src="images/kotacGalerija.png" class="imageResponsive" />
<div class="white_line_gallery_hover">
Some text
</div>
</div>
</div>
CSS:
.galleryIndex
{
width: 33.33%;
height: auto;
overflow: hidden;
float: left;
position: relative;
z-index: 1;
}
.galleryHover
{
position:absolute;
top:0;
left:0;
bottom: 0;
width:100%;
height:100%;
background-color: rgba(24, 2, 51, 0.8);
}
.imageResponsive
{
width: 100%;
height: auto;
}
.white_line_gallery_hover
{
width: 90%;
height: 10%;
overflow: hidden;
padding-left: 10%;
font-size: 20px;
line-height: 40px;
background-color: white;
}
Try giving ".white_line_gallery_hover" "position: absolute; bottom: 0" and removing the "height: 10%". This will cause "white_line_gallery_hover" to overlay the bottom portion of the image in "galleryIndex".
See: http://jsfiddle.net/ff22qayv/
.galleryIndex
{
width: 33.33%;
height: auto;
overflow: hidden;
float: left;
position: relative;
z-index: 1;
}
.galleryHover
{
position:absolute;
top:0;
left:0;
bottom: 0;
right: 0;
background-color: rgba(24, 2, 51, 0.8);
}
.imageResponsive
{
width: 100%;
height: auto;
}
.white_line_gallery_hover
{
position: absolute;
bottom: 0;
width: 90%;
overflow: hidden;
padding-left: 10%;
font-size: 20px;
line-height: 40px;
background-color: white;
}
<div class="galleryIndex">
<img src="https://placekitten.com/g/300/300" class="imageResponsive" />
<div class="galleryHover">
<img src="images/kotacGalerija.png" class="imageResponsive" />
<div class="white_line_gallery_hover">
Some text
</div>
</div>
</div>
If this is not what you want, you might consider updating your question with a visual representation of the desired result.