I have this this code, http://jsfiddle.net/rnbcoder/WjzbH/
HTML :
<div class="mframes">
<div class="mframe" id="liveBand">
<div class="mframeDetails mfrDetSum" style="background-color: rgba(255,0,0,0.5);">
<p>Live Band Performance</p>
<p>Stay tuned for more details</p>
<div class="mframeBtn" id="leftmframeBtn" style="">Read More</div>
</div><div class="mframeDetails mfrDetFull" style="left:50%;background-color: green;">
<p>This is the main interesting blah blah </p>
</div>
</div><div class="mframe" id="dj">
<div class="mframeDetails mfrDetFull" style="left:0%;background-color: green;">
</div><div class="mframeDetails mfrDetSum" style="left:50%;background-color: rgba(255,0,0,0.5);">
<div class="mframeBtn" id="rightmframeBtn" style=""></div>
</div>
</div>
</div>
CSS :
.mframes{
position: absolute;
height:70%;
width:70%;
margin-top: -18%;
margin-left: -35%;
top: 50%;
left: 50%;
white-space: nowrap;
overflow: hidden;
}
.mframe{
margin: 0;
height: 100%;
width: 50%;
background-color: black;
overflow: hidden;
}
.mframeDetails{
position: absolute;
display: inline-block;
height: 100%;
width: 50%;
text-align: center;
}
.mframe contains divs larger than itself. Its overflow style is set to hidden. Yet it can not trim its children.
What's wrong ?
remove position: absolute; ? Are you setting the top and left in JS or can they be relative?
It could be from the height and width as % rather than numbers too. I'll play around a little for you.
EDIT: Below, I think I found it.
Remove the line below from this class in the jsfiddle link you posted.
display: inline-block;
.mframe{
margin: 0;
height: 100%;
width: 50%;
background-color: black;
overflow: hidden;
}
http://jsfiddle.net/WjzbH/9/
To set and height and width make sure you are display:block, then overflow can be applied =)
Does height and width not apply to span?
Related
I have a vertical line running down the middle of my page, but it only goes as far as the first section. What I want it to do is run all the way down to the very end of the page when you scroll all the way down. I'm not sure how to achieve this.
Right now my CSS for my line is this:
.line{
position: absolute;
top: 100px;
margin: auto;
width: 50%;
height: 100%;
border-right: 1px dotted black;
}
I don't want to have a set height, because as I start adding more projects to the site, I would like the line to grow with the page without having to change the height every time.
Here's a codepen: https://codepen.io/Furr/pen/gJLapb
This website is my inspiration, I would like it to be something like this: https://www.rezo-zero.com/projects/
Thanks in advance.
I think you may actually want 3 divs like this. ( the line is a div)
.vl {
border-left: 1px dotted black;
height: 500px;
}
#parent {
display: flex;
}
#right {
width: 300px;
margin-left: 5px;
}
#left {
flex: 1;
}
<div id="parent">
<div id="left">Left Side</div>
<div class="vl"></div>
<div id="right">Right Side</div>
</div>
another reason to have 3 divs is that you can "break up" the line with clickable content just like in your example
One of feasible way is to use pseudo element to make the vertical line so that it will expand according to the container. Here is an simple example.
.timeline-container {
position: relative;
width: 500px;
margin: 0 auto;
}
.timeline-container:after {
content: " ";
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background-color: #000;
}
.timeline-container .event {
width: 50%;
}
.timeline-container .event.left {
text-align: right;
}
.timeline-container .event.right {
margin-left: 50%;
}
.timeline-container .event-content {
margin: 10px;
}
<div class="timeline-container">
<div class="event left">
<div class="event-content">2019-05-14<br>Testing Events</div>
</div>
<div class="event right">
<div class="event-content">2019-05-10<br>Another Events</div>
</div>
<div class="event left">
<div class="event-content">2019-04-25<br>Great Exhibition</div>
</div>
<div class="event right">
<div class="event-content">2019-03-27<br>School Festival</div>
</div>
</div>
You can look at the source code for the website you wanted to emulate by typing CTRL + SHIFT + I in Chrome after opening it.
I've a problem with the overflow hidden, it doesn't work at all with my container percentage width, here an example of the html and css structure:
<div class="container">
<div class="container-inner">
<div class="box-container">
<div class="box-overflow">
<div class="box-overflow-inner" style="width: 3680px; left: 0px; display: block; position: relative;">
<div class="box-item">
</div>
<div class="box-item">
</div>
</div>
</div>
</div>
</div>
I know it is quite nested but here it is the css:
.container { width: 100%; display: inline-block; }
.container-inner { width: 100%; display: inline-block; }
.box-container { width: 100%; display: inline-block; }
.box-overflow { overflow: hidden; position: relative; width: 100%; }
The problem seems with the 'container' element, if I add a fixed width everything seems to work correctly, but with a percentage width, all the contents takes the 3680px and I don't know why.
Any help it'd really appreciated!
Thank you all!
I want to move down the red div like my example but I still get extra space above the image div (class two), like the red div is still there in the top of the page.
How can I solve this in a better way? I don't want to use absolute position because my site is responsive and set the Image div (class two) to top: -50px sounds like bad solution.
.one {
top: 100px;
position: relative;
width: 100px;
height: 50px;
background-color: red;
}
<div class="one">Some text</div>
<div class="two">
<img src="http://via.placeholder.com/350x350">
</div>
.one {
top: 100px;
position: relative;
width: 100px;
height: 50px;
background-color: red;
margin-bottom: -50px;
}
<div class="one">Some text</div>
<div class="two">
<img src="http://via.placeholder.com/350x350">
</div>
http://i.imgur.com/Veauoig.png
I am currently trying to work out how to make the 'From £' text to keep in the same position as the buttons above. The page is responsive so I have been unable to keep the text in one position.
The CSS I have used so far -
element.style {position: absolute; width: 97%;}
I put each of the 'From £' parts in their own class. Not sure if there is an easier way?
<div class="price2">From £300</div>
Any help would be great. Thanks!
Add a container for the element for the price and button so that they remain in context with each other.
http://jsfiddle.net/05orkj1a/
.prices{
width: 100%;
}
.price-column{
display: table-cell;
width: 33%;
text-align: center;
margin: 0 auto;
padding: 0 5px;
}
<div class="prices">
<div class="price-column">
<button>Bass</button>
<div class="price2">From £65</div>
</div>
<div class="price-column">
<button>Mid</button>
<div class="price2">From £300</div>
</div>
<div class="price-column">
<button>Treble</button>
<div class="price2">From £715</div>
</div>
</div>
You could also Float the columns left to cause them to collapse vertically as the screen shrinks with the same html. Just change the margin or padding depending on how far apart you want them spaced
http://jsfiddle.net/z6agt11e/
.prices{
width: 100%;
overflow: hidden;
}
.price-column{
display: block;
float: left;
text-align: center;
padding: 5px 5px;
}
You can also add an outer container and then create a inner container for each button-price set.
Here is the HTML code:
<div class="outter">
<div class="block">
<div class="button">button1</div>
<div class="price2">From £65</div>
</div>
<div class="block">
<div class="button">button2</div>
<div class="price2">From £300</div>
</div>
<div class="block">
<div class="button">button3</div>
<div class="price2">From £715</div>
</div>
</div>
Here the CSS:
.outter{
width:100%;
}
.block{
width:33%;
background-color: yellow;
float:left;
text-align: center;
}
And here a jsfiddle:
http://jsfiddle.net/SoniaGM/ej4mdwx9/1/
Hope it helps.
You can use the CSS3 ::after pseudo-selector.
Give at button class:
position: relative;
Then you have to write something lime this:
.button-class::after {
content: 'From £300';
background: transparent;
height: 1%;
width: 3%;
position: absolute;
top: 20px;
left: 0px;
}
Obviously, you have to change height: 1%; width: 3%; and top: 20px; left: 0px;with whatever you want!
I want to build a container that contains an image on the left side and to its right there is supposed to some information about it, like a headline and some description.
I want the container to be able to expand between some minimum and maximum width dynamically. The images can also have different widths between two boundaries and if the container already has a maximum width, but the headline is longer, the headline should be shortened and there should appear some dots.
I found a way to shorten the headline, like here: http://jsfiddle.net/h0452569/
, but therefore I need to limit the width of the container next to the image. I tried this with the code below, but I can't find a way with CSS to dynamically limit the div width to not extend the container's div!
I would be very happy if anyone had an idea out there!
jsfiddle
HTML:
<div class="container">
<div class="image"><img src="https://farm6.staticflickr.com/5238/14184095861_d3787020c7_t.jpg" width="100" height="71" alt="alt_flickr-7"></div>
<div class="meta-container">
<div class="headline">Some very very very long headline</div>
<div class="description">Some description</div>
<div class="description">Other stuff</div>
</div>
<div style="clear:both"></div>
CSS:
.container {
min-width: 200px;
max-width: 250px;
max-height: 100px;
position: absolute;
border: 1px solid #666666;
white-space:nowrap;
}
.image {
float: left;
display: inline-block;
vertical-align: top;
}
.image img {
max-width: 100px;
max-height: 80px;
vertical-align: top;
}
.meta-container {
overflow: hidden;
text-overflow:ellipsis;
display: inline-block;
}
.headline {
width: 100%;
white-space:nowrap;
}
.description {
font-size:.8em;
}
In the example you refer to, those styles are added to the text element itself. In your design, the styles are given to the parent element.
Solution: add the styles to .headline instead of .meta-container.
.container {
min-width: 200px;
max-width: 250px;
max-height: 100px;
border: 1px solid #666666;
overflow: hidden;
}
.image {
float: left;
}
.image img {
max-width: 100px;
max-height: 80px;
vertical-align: top;
}
.headline {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.description {
font-size: .8em;
}
<div class="container">
<div class="image"><img src="https://farm6.staticflickr.com/5238/14184095861_d3787020c7_t.jpg" width="100" height="71" alt="alt_flickr-7"></div>
<div class="meta-container">
<div class="headline">Some very very very long headline</div>
<div class="description">Some description</div>
<div class="description">Other stuff</div>
</div>
</div>
<p>Next element</p>
In order to break the word use "word-wrap: break-word" in your .headline class, you also need to set a width (in px). For example:
.headline{
width:100px;
word-wrap: break-word;
}