I'm attempting to create a simple responsible logo inside of a navbar. I've recreated the problem with this codepen.
Essentially I have a .logo wrapper around an <svg> logo:
#navbar .logo {
height: 80px;
}
#navbar .logo svg {
width: 100%;
height: 100%;
display: inline-block;
overflow: hidden;
padding: 20px 0;
}
At around 500-600px in width you can see that the SVG element box is much wider than the actual logo. I can fix this by removing the height rule on the .logo div. But then the SVG goes beyond 80px in height.
How can I constrain the navbar height to 80px and maintain the actual width of the SVG so that the logo remains flush against the left side of the container?
If I replace width: 100%; with width: auto;, the logo flushes to the left like I want, but then the .logo div is much larger than the SVG.
I'm not sure if this is what you wanted. I set a max-width to the div .logo and made the width of the svg to 100%.
Check this out: https://codepen.io/samuellawrentz/pen/LBzRwM?editors=1100
Related
I have two images centered side-by-side in a div. Both are restricted by a max-width property, but one image is significantly taller than another. I'd like the taller image to match the height of the smaller image and adjust its size based on viewport size.
My current code is as follows for the container
<div class="process">
<img src="http://via.placeholder.com/926x2260">
<img src="http://via.placeholder.com/1584x1926">
</div>
with the CSS as
.process {
text-align: center;
}
.process img {
margin: 4rem 3rem;
display: inline-block;
max-width: 40%;
}
A max-height of 740px looks perfect with a full-sized viewport but isn't responsive. I'd like this to be done in CSS and without an extra container for the larger image, but I'm not sure if that's possible.
Here's a jsfiddle to see what it looks like.
The images are a screenshot of a mobile and tablet layout of a website, so they should retain their ratio--if there's a better way to display these I'll take other ideas too!
Make them size based on the parent div. Check this out:
.process {
text-align: center;
height: 70vh;
}
.process img {
margin: 4rem 3rem;
display: inline-block;
width: auto;
}
So I want to write some css so I can make a preset div size that I can put the pictures in. Even if the picture is bigger than the div i would like to make it show only what the div can show you. So kinda like cropping it or something. I want to make a little thumbnail that you can click on and see the whole picture. I have no idea where to start. Please help. Thanks!
you can do something like:
div {
width: 300px;
height: 300px;
overflow: hidden;
}
the width and height will prevent the div from automatically re sizing, and overflow: hidden will hide (or crop) everything that excedes the div's boundries
this JSFiddle will show you how the JS, and CSS are really simple...
http://jsfiddle.net/ProgrammerKid/bh2dz8Lq/
(make sure that you look at the css... it is awfully simple)
#divId{
width: xpx;
height: xpx;
}
#imgId{
margin-right: auto;
margin-left: auto;
}
#imgId:hover{
width: 100%;
}
The image will shrink to the size of the div when you hover over it.
.yourDivClass {
height: #px;
width: #px;
}
.yourDivClass img {
margin-left: auto;
margin-right: auto;
}
This will create your fixed size div, and then center your image inside the div, with only the size of your div being visible of the image.
I've created the following demo to show my issue:
http://francisbaptiste.com/nov17/
Each div is 33.33% wide. Within the div is an image with 100% width. I want it to be a perfect grid of images, but the height of the div is always a little more than the height of the image.
Shouldn't the height of the div be set by the height of the image within it? So why is there that little bit of space at the bottom?
The gap is coming from the actual whitespace after the image tag. You can use this to fix it:
.card img {
display: block;
}
Fiddle
Or a more hacky solution:
.card {
font-size: 0;
}
Fiddle
I thinks the problem is the height of outer div, you cannot use auto since the browser may have some default action for the div and its inside content. Instead, I specify the percentage of height and solved the problem
.card {
width: 33.333%;
height: 50%;
overflow: hidden;
float: left;
background: black;
color: white;
}
Does that make sense to you?
I'm working on a responsive wordpress theme but I have little problem. My page includes several boxes that are displayed side by side. Each box has a responsive height and width and contains an image and text(text is overlaid on the image).
Is there a way to set all boxes to the same height considering the correct aspect ratio(image)? Also if some boxes don't contain an image?
Live-Preview: http://apu.sh/3ne
JsFiddle http://jsfiddle.net/tjwHk/
My suggestion for your case is to fix all the boxes width & height to a value of your preference.
then, give a max-width & max-height of 100% to the image. causing it to never overflow the parent div [box] without losing the aspect ratio of the image. (if you'll try to do this with width & height you will lose the ratio)
Edit: padding:none; is not valid. use padding:0; instead
So, to summarize, change this in your CSS:
#custom-list .custom-list-element
{
width: 50%;
height: 200px; /* fix any height you want*/
float: left;
background-color: #333333;
text-align: center; /*so the image will always be centered in the div*/
position: relative;
}
#custom-list .custom-list-element img
{
max-width: 100%; /* the width never overflow the div*/
max-height: 100%; /* the height never overflow the div*/
}
#custom-list .custom-list-element article p
{
padding: 0; /* valid value */
}
#custom-list .custom-list-element article h1
{
color: #fff;
padding: 0; /* valid value */
font-size: 1.5em;
}
and finally, because I like Fiddles so much.. http://jsfiddle.net/avrahamcool/tjwHk/1/
I'm working on a website that fits perfectly in the browser window. Below is a basic blueprint of the website layout:
So far, the Red area is just display:block. The Green area is also display:block with margin-right:200px. The Blue areas(nested in a div) is float:right.
So I've got the width sorted. It's the height I need advice on. The Red and Dark Blue areas are a set height, but I need the Green and Light Blue areas to fit the height of the browser window view.
I'm trying to use box-sizing, but it exceeds the height of the window view because it's extending to the max height of the window. Sorry for my poor explanation. Any advice if would be excellent. Thank you!
For green div set height: calc(100%-{red-div-height}); and for the light blue div set height: calc(100%-{dark-blue-div-height}-{red-div-height});
This is kinda the legacy version of C-Link's answer.
jsFiddle and fullscreen
This has the limitation of any content falling below one page-full falling outside of its container (you can see if you scroll down in the fiddle, but not on the fullscreen).
Make sure our page stretches to its full height.
body, html { height: 100%; width: 100%; margin: 0; padding: 0;}
Set a static-height header.
header {
height: 101px;
background: red;
}
Create a box for everything under the header. You were on the right track with the box-sizing. We can add padding to it, in the same amount as our header. Then percentages inside it work nicely.
.content {
position: absolute;
box-sizing: border-box;
padding-top: 111px;
padding-bottom: 10px;
top: 0; left: 0;
height: 100%; width: 100%;
}
We float our aside (may or may not be the correct element, depending on contents) and set some styles on it.
aside {
float: right;
width: 20%;
height: 100%;
padding-bottom: 111px;
box-sizing: border-box;
}
.top {
height: 100px;
background: blue;
}
.bottom {
margin-top: 10px;
height: 100%;
background: skyblue;
}
This is our main, large, content area, which we float to the left. The width could be specified exactly if we wanted exact padding at the cost of additional HTML.
[role="main"] {
width: 78%;
background: limegreen;
height: 100%;
float: left;
box-sizing: border-box;
}
You can also set overflow-y: auto on our main or aside elements, to have them scroll when they run out of space. There should also be mobile styles for this page that remove the floating, absolute positioning, absolute styling, and widths should be nearly 100%.
you can always set the green box height to the window height minus the red box height.
accordingly the light box height to the window height minus the (red box height + the dark blue box height)
Edit 1: I haven't mentioned that has to be done with javascript.
Edit 2: Consider any paddings and margins too.
Could you not just give the divs a max or min height depending on their purpose?
I use a main container or wrapper div that the others would be contained in, that div is then my effective page or screen area.
<div id="wrapper">
<div id="content">
<div id="sidebar">
</div>
</div>
</div>
#wrapper{
min-height: Whatever value you want here;
max-height: Whatever value you want here;
}
It might be a good idea to set up your page using main container divs, hot only for the content but for the header and footer as well.
As an example, I have a main wrapper that is the whole page, within that is the header div, the content div, the nav div and the footer div. These are the main ones. Everything else can then be contained within them.
So, you can set the layout out using percentages so you have a fluid design that'll react to each browser size. The other elements will then 'fit' inside the main divs and be constrained to them. You may need to look into positioning etc but this is certainly the direction you should head towards.
<div id="wrapper">
<div id="header">Header Here including any divs to be contained within this space</div>
<div id="content">All content etc here</div>
<div id="nav">This is your sidebar</div>
<div id="footer">Footer, as per header</div>
</div>
Then use the css to re deisgn the above layout focusing only on those main divs. Use % instead of px to maintain fluidity.
#wrapper{
width: 100%;
height: 100%
}
#header{
width: 100%;
height: 20%
}
#content{
width: 70%;
height: 60%;
float:left;
}
#nav{
width: 30%;
height: 60%;
float:left;
}
#footer{
width: 100%;
height: 20%
}
A pretty common trick is to give the green (and light blue) box absolute positioning, a padding AND a negative margin. Because 100% width is relative to the containing box (could be a parent div, or just the window itself) this is not suitable. When the header was a relative height, say 10%, it would've been easy. The padding makes sure the content will not disappear behind the header, the negative margin puts the box back in place. Don't forget the z-index (otherwise the content (green part) will overlap the header).
The css looks like this:
.header { position: absolute; width: 100%; height: 100px; background: red; z-index: 1; }
.content { position: absolute; width: 100%; height: 100%; padding: 100px 0 0; margin-top: -100px; background: green; z-index: 0; }
The fiddle looks like this: http://jsfiddle.net/2L7VU/