I need your help!
Been searching for a solution, but couldn't find one, so thought I should just ask it.
For a school project I need to postion a random number of halls into the right position on a map.
As an example I just used 4 halls an just hard coded all the info that's retreived from a JSON with Angular as you can see in this CodePen
<div class="hall" id="hall01" style="width:15%; padding-bottom:50%; left:00%; top:00%; background-color:red;"></div>
<div class="hall" id="hall02" style="width:85%; padding-bottom:20%; left:15%; top:00%; background-color:green;"></div>
<div class="hall" id="hall03" style="width:15%; padding-bottom:10%; left:85%; top:40%; background-color:yellow;"></div>
<div class="hall" id="hall04" style="width:85%; padding-bottom:20%; left:15%; top:60%; background-color:blue;"></div>
I already have solved the issue of resizing the halls, when the page gets resized.
The only problem that remains is that the absolute positioning with top isn't working like it should.
Everything is calculated with a width of 1000px and a height of 500px in mind, but it should all resize if the browser also resizes.
Also getting the parent to adjust to the right height is something I struggle with.
Can somebody please help me with this?
The problem is that when using the top property, percentages are calculated based on the height of the container, not its width.
To fix this, set the top to 0 and then use margin-top: x%;. All margins are calculated based on the container's width, so the margin-top will shrink as well when the window is resized.
Related
I have a header pic which is made up of a Vuetify carousel.
The section container for the carousel is 100vh and the v-carousel element height is set to be 100%.
I would expect that setting a min-height of 300px on the section element would prevent the carousel pic from having a height smaller than 300px. Instead, while decreasing the screen height, I notice a line marking the min-height but the pic inside becomes smaller as I reduce the height of the screen. Below there is my code, can someone suggest what I am doing wrong? I see from the inspection tool that the v-carousel-item is a div with a background-image and I wonder if this affects somehow my code.
<template>
<div class="home router-view">
<section style="height:100vh;
background-size:cover;
background-attachment:fixed;
background-position:center;
position:relative;
max-height:1300px;
min-height: 400px">
<v-carousel
cycle
hide-controls
hide-delimiters
style="position:absolute;top:0;width:100%;height:100%"
>
<v-carousel-item
:src="require('#/assets/images/picture.jpg')"
>
</v-carousel-item>
I am confused by your styling. Are you trying to make the cover the whole page (100vh), all the time? Then you don't need min-height or anything.
Anyways, try adding min-height:100% inside v-carousel's styling to force height.
If it doesn't work, please see v-carousel's props and try add height="100%" natively provided by vuetify.
see: https://vuetifyjs.com/en/api/v-carousel/#props
If you provided a reproduction, codepen etc. your problem would be much clearer to understand.
Please let me know if it works!
I put videos (in ) to the 3 column layout using "column-count 3". And every time when I hit play button on the second or third video on top, I got it jumped to the bottom of the previous column. It happens only in Chrome. In Firefox it's perfect as expected.
I tried to apply all the tips regarding similar questions I've found on StackOverflow, however, none of them works for me (including addition of the translate property to the wrapping container). Could you please help me with that?
Here is my code (Jade):
.column-list.column-list--three
each video in content['pausecast']
+video-panel(video)
mixin video-panel(obj)
.video-panel
.aspect-ratio
iframe(scrolling="no" frameborder="0" src="//www.youtube.com/embed/"+ obj.youtubeId.replace('watch?v=',''))
.aspect-ratio
position relative
width 100%
height 0
padding-bottom 51%
// transform translate3d(0,0,0)
.aspect-ratio iframe
position absolute
width 100%
height 100%
left 0
top 0
.video-panel
border-bottom grey 2px solid
margin-bottom 40px
I definitely cannot go to any fixed heights or widths as I need it to be flexible while resizing + keeping correct aspect ratio. So applied changes should be minimised as possible. Thank you in advance!
Well, the solution that worked for me was to get rid of column-count and use other grid instead. Used Jeet and col(4/12, cycle: 3). That's it. Very weird behaviour of column-count + position absolute.
I have problem with CSS on my school project blog. I have two columns, left and right in container with max-width to aim automatic resizing.
However it´s not working correctly.
On some specific width the left column with articles jumps under the right column and it starts resizing only when it come to the edge of text.
My aim is to resize it to preserve the left column next to right.
As you are not able to view my blog without login here I created fiddle for deomnstration and this is the important part of css.
#content{
max-width:65em;
margin:0 auto;}
#left-column{
float:left;
max-width:44em;
}
#right-column{
max-width:19em;
float:right;
margin-left:1em;
}
http://jsfiddle.net/2Nbu2/
Thank you
Try giving them both a css float to the left.
Using fixed pixel size's and adding a clearfix - explained here http://themergency.com/css-clearfix-demystified/
Remove the float on the left-column.
I'm struggling trying to get images responsive in a container and it's driving me bonkers. I've looked at many different answers and the only one that seems to work is just making the image set to 100% of the width of the container (not using max-width), but I don't want to set the image at 100% all the time. Here's what I got:
HTML
<div id="interior_banner" class="title_pic">
<img src="assets/images/portraits_header-24.png" />
</div>
CSS:
img{max-width:100%;border:3px solid #fff}
.title_pic{text-align:center;margin:0 0 1em;}
Now setting the img to just width:100% works, but I really want this banner to flex only when it doesn't fit the container. I don't want it to size before then.
What am I missing? I know it's something.
Thanks in advanced!
With out a live demo this is a little harder but I'll give it my best go.
I think you're on the right path. Currently isn't the image it's regular width? It should shrink when the container gets small enough. But if the container is bigger than the image the image won't scale up.
Or do you want the image to scale up? More info would be awesome.
Atm I'm doing my first attempt at a website, recently got a new job which requires me to learn some basic HTML&CSS so for a starters I set myself up to duplicate an exsisting site.
The question/problem is:
I wanna make 3 columns at 100% height, the left and right being scaleable to 0 upon downsizing the browserwindow, while the middle column is containing the actual content of the site, min-width at 60%. At lower resolutions im planning on implementing media-things in my css to remove the left n right columns when the resolution goes below a certaint limit.
I've set html&body&all to hight & width 100%.
I'm trying to do something a bit like here: The site im trying to duplicate
My current attempt can be found here: My attempt
Some code for the lazy ones that don't wanna inspect the site:
<div id=all>
<div id=leftmargin></div>
<div id=wrapper>
<div id=header></div>
<div id=nav></div>
<div id=content></div>
<div id=rightmargin></div>
</div>
</div>
Since im very new to web development, please excuse me if you need more info.
My problem is in essence that "leftmargin' and 'rightmargin' overlaps the 'wrapper'-div. I'd very much like that to be in the center of the page and then make the margin-divs 'expendable' at lower resolution by css.
I hope I made myself relatively clear, thanks in advance.
Kind regards
Mike
I'd avoid using a div for the sole purpose of creating a margin space. Instead, let your side bar content create the margin you're looking for. The content is overlapping the margin because it's not contained within the margin div. You'll need to tweak how the main content is centered by using "margin-left: " the same size as the sidebars or some other way, but it'll improve your overall structure.
As for text overlapping the container at small sizes, remove the "width: 18.8%;" and "white-space: nowrap;" from #lefttop and "max-width: 18.8%;" from #leftnav. This will let the text be the full width of the gray container on the left, and the words will wrap if the line doesn't fit.
Finally, to get rid of the side bars at small widths, as jerrylow recommended, use
/* screen sizes smaller than 750px apply these styles */
#media screen and (max-width: 750px) {
#leftnavwrap {
display: none;
}
#shortcut {
display: none;
}
#content {
width: 100%;
}
}