I'm having some problems in a specific part of a responsive fluid page I'm trying to build for tablet dimensions for now with 960px converted to 96% container's size.
To see what's the problem, it's available here: http://shopper.izigo.pt/vote/
The arrows figure image in the button is not fluid as the rest of all elements and if I try to change to portrait's orientation, the arrow gets to small. I have made the calculation based on target % context but in this particular case it's not working (here is the code):
css:
main form button img {
float: right;
width: 12.3943661971831%; /* 44px current element size % 355px parent (button) size */
margin-right: 2.8169014084507%; /* 10px current element size % 355px parent (button) size */
margin-top: 3.09859154929577%; /* 11px current element size % 355px parent (button) size */
}
And the footer is not centered (here is the code):
css:
footer {
position: absolute;
bottom: 30px;
width: 96%; /* equal to the containers width because it's in a absolute position */
}
I think that img inside your button is actually styling, and not content. Therefore it belongs in your css as a background image, and not in your html as a img. This also makes the positioning a lot easier:
main form button {
background: url(path/to/image.png) no-repeat right center;
padding-right: 20px; /* width of image to prevent the label from laying on top of it */
}
(May I suggest you add a class to that button and target it that way, in stead of those long, hard to maintain, and slower selectors you use now)
For the footer, in stead of defining a width you can just set the right and left property to 0 (when it is positioned absolute that is). this way it will take over the width of the parent. Something like this:
footer {
position: absolute;
bottom: 30px;
left: 0;
right: 0;
}
Both should work fine in your fluid design...
Related
i've been trying to properly set the css properties to have a ng-bootstrap carousel image fit into a given space (div) inside a custom ng-bootstrap modal. Watch this forked stackblitz code.
As seen in the sample source, the image overlaps the given space (height) of the modal as well as the col-8 where it is placed.
How do i make carousel follow the size of its parent col-8? so as to not overlap with modal size.
UPDATE
For those who can't see the issue, you can visit the actual app here
After some trial and error, i've come to this point. Only carousel-inner and its children does not follow its parent div which is ngb-carousel.carousel-modal. See this image below
As shown in the image above, i can't make carousel-inner follow the size of its parent ngb-carousel.carousel-modal which already follow the modal height. it always overlaps and extends over the carousel-modal height. Do note that i set them to max-height:100% to make it responsive.
Basically you just need to bring height 100% down the hierarchy of tags.
To set the modal-body height I set 100% - Modal Header Height (69px).
.modal-body {
height: Calc(100% - 69px);
}
ngbd-modal-content, ngb-carousel, .carousel-inner, .modal-body .row {
height:100%;
}
Stackblitz: https://stackblitz.com/edit/angular-csyyp8-heb7xf?file=styles.css
Give the image a fixed height within the container (that has a fixed height too). Then position the carousel caption accordingly, like so:
img {
height: 650px; /*adjust for your project*/
width: auto !important;
}
#media only screen and (max-width:767px){
img { width: 100% !important
}
}
.carousel-caption {
position: absolute;
bottom: 20px;
left: 3%; /*adjust for your project*/
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
max-width: 50%; /*adjust for your project*/
}
Play around with the values til it fits your needs.
After hours of understanding height, max-height and its relation to its parent tag. I've came up with the fix. see updated stackblitz here.
Basically, i made the image resize to fit in parent content giving the parent content as well as the img a fix height. Therefore, it will make the image auto resize to fit its parent div.
I would like to have my menu bar across the entire screen, currently it is in the middle with white space on either side. I would like the bar to be stretched along the top of the page but for it to not "hover". I have tried the position:fixed and that has achieved the look of the menu that I want however I don't want the menu bar to be fixed to the top of the screen as the reader scrolls down the page. The URL to my blog is as follows : http://www.blankesque.com and I have included the css coding for the menu bar below :
#topdropcont {
width:100%;
height:45px;
padding: 5.5px 0 0 0;
z-index:100;
top:-2px;
left: 0px;
position:absolute;
background:#f5f5f5;
}
Change position:absolute; to position: fixed;
The other option is running the following jQuery script that calculates the width using JS
$("#wctopdropcont").css('left',($(document).width() - 1080) / 2 * -1).width($(document).width());
Best I can tell (and assuming I understand how you want your page to look), the problem isn't in your topdropcount, it's in your content-outer, which appears to specify a space that's 1080 pixels wide.
If you dont want a fixed header you have to change the position attribute of div.content-outer & .fauxborder-left to position: static (actually relative).
The problem here is you're using a relative width (100%) inside of a defined width container (.content-outer{1080px;}). You can see how this works by adding a larger relative width to your #topdropcont. (e.g. #topdropcont {width: 120%;}).
You can easily solve this by moving the markup of the menu outside of that container.
Just like #Matthew Darnell said your class content-outer has the following css styles min-width: 1080px and max-width: 1080px so having a width of 100% on your menu will give it a width of 1080px. If you don't want to move your menu outside of countent-outer, you can make the following changes to your css:
1) Remove min-width: 1080px and max-width: 1080px from .content-outer
2) Add min-width: 1080px, max-width: 1080px and margin: 0 auto to your header tag and to .main-outer
This should solve your issue.
Since first parent element of the Menu that has 100% width is .content, make sure it has position: relative, than make sure all other parent Menu elements have no position set. Than you can set your menu container to absolute positioning.
Final CSS should be:
.content {
position: relative;
}
.content-outer {
/* REMOVE: position: relative; */
}
.fauxborder-left {
/* REMOVE: position: relative; */
}
#wctopdropcont {
position: absolute;
/* Fading script should be removed...
it changes opacity and display, so: */
display: block !important;
opacity: 1 !important;
}
What you get after is this:
just got a question regarding relative & absolute positioning and applying clearfix to the main container cos I've written the code and it's not behaving as I expected.
Structure-wise this is a simple page about product history. nav-bar with drop-down menu at the top across the screen, then a big hero image across the screen, followed by a few paragraphs and a simple footer, that's it.
here's my problem:
I need to put 3 components in the hero image area - the hero image itself, one title word on the top left corner and one logo on the top right corner. What I've done is: I created a div and used the hero image as background image. I set the position value of the div to relative. I created another div to hold the title word and set the position to absolute, using top and left to give it a location. Following the same logic, I created another div to hold the logo and set it to float right, with position set to absolute and top and right to give a location. I've applied clearfix to the main div and everything looks ok on my screen (resolution 1280 x 1024) until I saw it on the wide screen(1680 x 1050) --- the logo is not on the hero image! It's to the right side of the hero image.
What caused this? I thought by putting 2 divs inside the main div and applying clearfix, the three will "get together" and act as one and won't separate... Is it because I haven't written any code for responsive layout? Or was it because I shouldn't have used the hero image as the background? Would this problem be solved if I used z-index instead to specify the stack order of hero image, logo and title word?
Below is my code and any help would be much appreciated!
<div id="history-content" class="clearfix">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px;
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp img {
width: 10%; /*not sure I'm doing the right thing here either*/
height: 40%; /*not sure I'm doing the right thing here either*/
float: right;
position: absolute;
right: 100px;
top: 20px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
Few things:
Absolutely positioned elements are taken out of normal flow, hence doesn't affect the size of their parent.
Since they're out of normal flow, float has no effect on them (as far as i know)
Absolutely positioned elements shrink wraps to fit it's contents unless width and height is set explicitly or stretched using the top, right, bottom & left properties.
Now your parent div #history-content doesn't have any height set, and all of it's content of are absolutely positioned, So it's not visible (height 0)
applying a proper height for the parent seems to fix the issues for me.
Side note: unlike what you think, you don't have two absolutely positioned<div>'s, #stamp img absolutely positions the <img> inside div#stamp, for the same reason mentioned above, div#stamp is also invisible (height 0) you'll get the same result with and without it. And without floats
As others have said, float doesn't have an effect on absolute positioned elements, and so technically you don't need clearfix in this case.
I'm not exactly sure why your logo is positioned outside the outermost container #history-content, but you could try to put a border around the #history-content to further troubleshoot.
EDIT: Maybe check your hero image dimension, is it smaller than 1608px in width?
<div id="history-content">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
I've changed your CSS below
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px; /*set whatever minimum height you wish*/
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp {
display: block;
position: absolute;
right: 100px;
top: 20px;
width: 10%; /*set width of image in containter instead*/
height: auto;
}
#stamp img {
max-width: 100%; /*image width will not stretch beyond 100% of container*/
height: auto;
}
JSFiddle: http://jsfiddle.net/5L9WL/3/
in my website there is 3 vital parts
Top Bar (must remain in the top, not fixed, 40px height, 100% width)
Timeline this is always floating left to the main area, the timeline is not re sizable, it is neutral in size
main area re sizes with the window it is Horizontally scrolled so it can be small width as long as you can still keep scrolling right/left
here is my progress so far......
JSFiddle
My issues:
the top bar child elements are not aligned. like those simple inputs/text is at the bottom of the topbar and part of it is hidden, this doesnt happen with the image removed?? i need the top bar to always keep elements inline vertically centered and never resize in height
i cant get timeline and main area to take up the remaining height, i have them at 800px because nothing was working.
width: 100%;
height: 100% !important;
margin: 0px;
I added a padding and checked your fiddle it looks much better. Is it this what you are after?
.top_bar
{
z-index:100;
width:100%;
height:40px;
max-height:40px !important;
background-color:#ffff00;
color:black;
padding:40px;
overflow: auto;
}
For your top bar just float your image:
.wtblogo {
float:left; /* Add this to your current CSS */
}
and add a line height equal to your top bars height to vertically align objects with in it:
.top_bar {
line-height: 40px; /* Add this to your current CSS */
}
I am not sure what you mean for your second issue.
For #1 you can easily fix it by adding:
vertical-align: middle;
to your image class.
So you'll have:
.wtblogo {
height: 40px;
vertical-align: middle;
}
For #2, I'm not sure what you're trying to do. Could you clarify?
I am trying to create a bottom aligned, fluid width sticky footer that contains three links that are the same height as the container, which also have fluid widths.
I have created a top aligned version of this footer, where the links are not the full height of their container. It breaks if I set the bottom of the container to zero. I have put the code for this here:
http://jsfiddle.net/bHJR3/1/
How can I modify what I have so the bottom edge of the container is flush with the bottom of the window, and the links are the same height as the container?
I know how to do this through jquery but I am trying to avoid js if at all possible.
Thanks for any help.
EDIT:
Here's a jquery solution I came up with in case of no answers if anybody wants to see it. http://jsfiddle.net/bHJR3/2/
The reason it broke when you set bottom: 0 on #footer is because everything inside #footer had position: absolute. Absolutely positioned elements do not take up any space in the document flow and will not cause their parent elements to expand to contain them. Setting a height on #footer solves this. Setting height: 100% on the a tags will cause them to size relative to their parent element. You can keep div.content, but you would also have to set height: 100% on it.
Add the following CSS to #footer:
bottom: 0;
height: 90px;
Add the following CSS to A:
height: 100%;
line-height: 90px; /* matches the height from #footer to vertically center the link text */
Remove div.content. It doesn't seem necessary here.
Edit
You can center the footer by adding/changing the following CSS on #footer:
width: 640px;
left: 50%; /* positions left edge of #footer to center of page */
margin-left: -320px; /* pulls footer to the left (width / 2) * -1 */
Edit
You can use max-width and a media query to alter the styling of the footer if the window width is < 640px:
#footer {
position: fixed;
width: 100%;
max-width: 640px;
height: 114px;
bottom:0;
left: 50%;
margin-left: -320px;
}
#media only screen and (max-width: 640px) {
#footer {
margin-left: auto;
left: 0;
}
}