I'm currently trying to make a new design for my website. I got to this point, but I cannot find out how to remove the blank space to the right of the picture (slide the webpage to the right and you see it, a huge blank space).
Here is the JSFiddle: https://jsfiddle.net/yscu95hb/1/
And here is part of the code that I think I have to change.
#conteudo {
top: 15px;
position: absolute;
margin: 0px 15px 0px 260px;
}
.images {
margin: auto;
position: relative;
width: calc(100vw - 260px);
align-content: center;
}
.images img {
max-height: calc(100vh - 35px);
max-width: 100%;
position: absolute;
z-index: 990;
}
Can anyone help me?
Thank you.
-- edit --
I already posted the code that shows the image but I cannot make it to center. Any suggestions?
the reason you see the "white" space on the right side is the css you are applying to your #conteudo element.
This is your css for the element:
#conteudo {
top: 15px;
position: absolute;
margin: 0px 15px 0px 260px;
width: 100vw;
}
there are multiple ways to fix this. one way would be to remove the margin attribute or change the width to something lower than 100vw.
What you are doing is saying the element should be as wide as the browser window (100% of the window width) and then also saying that outside that width it should have more margin (in your case 15px on the right and 260px on the left), and that is "streching the page", causing the total widht to be larger than window width.
Add Eric Meyers resets to the top of your css file. It removes all styling that the browser automatically includes such as margin and padding. It seems like alot and most of it will go unused, but its nice to have all of it just in case.
Its good practice to have a set of resets at the beginning of every webpage and from my experience this one is the best.
Related
I've just spent 3 or 4 hours trying to understand how to get a "symmetric" DIV inside an HTML page that has to be not scrollable.
The DIV must have the same margins from the window on all sides and must contain an IMG whose size should scale according to the window size maintaining it's ratio.
At the following link you can find the best I've been able to do.
As you can see the DIV has the right margins on the left, top and right size but not on the bottom one! Why not?
Is there something wrong with the DIV style?
<div style="margin: 50px;">
I hope it's quite clear, thank you for your help! :)
Edit: since on JSFiddle it doesn't appear as it should be I've just uploaded an image about what I get on my browser:
Edit 2: this is the link to the last working solution, thank you all for your help, in particular to dcardoso. :)
You should add to your body and html tags (doesn't work in jsfiddle) and remove 'overflow: hidden':
position: relative;
height: 100%;
and to your div tag (remove 'margin:50px'):
box-sizing: border-box; /*This allows for the div padding to be included in the height and width size */
height: 100%;
padding:50px;
The page is getting cut because you are using overflow: hidden; for html and body .
when adding style tag inside jsfiddle style, it is not working. so scroll is visible.
Ahhh, I think I get what you're saying. If the page is longer than your div the space on the bottom is greater than the 50px margin.
You have a couple of choices here, this is just one of many.
I'm using calc() to calculate the 100% width/height minus the 50px on each side.
html, body {
margin: 0px;
overflow: hidden;
}
.maxSizeElement {
width: calc(100vw - 100px);
height: calc(100vh - 100px);
margin: 50px;
}
/* OR YOUR COULD USE... */
.maxSizeElement {
position: absolute;
width: 85vw;
height: 85vh;
top: 0;
right: 0;
left: 0;
bottom:0;
margin:auto;
}
<body>
<div>
<img class="maxSizeElement" src="https://thelostdigit.files.wordpress.com/2014/05/wp_ss_20140507_0002.png" />
</div>
</body>
http://revive-blue-introblogger.blogspot.com/2010/07/demonstrating-all-theme-styles.html#comment-form
I was trying to install this theme on my blog and I noticed a little problem - the avatars in the comment section are not displaying in full, they're cut off as well as the container. I've edited the codes a hundred times but I just can't figure out what the problem is. Help would be much appreciated!
Use your developer toolbar (Chrome) and inspect the image. If you don't see anything wrong with the image, work up the DOM until you see the problem. Check their widths, heights, paddings, margins, and "top" and "left" CSS attributes.
This element <div class="avatar-image-container vcard"> has max-height: 36px which is too small.
The image element itself has width and height attributes of 35x35 even though the image is 45x45.
You're restricting the height, that's why it's cutoff.
Comment out the height rules like this:
#comments-block .avatar-image-container {
left: -41px;
width: 48px;
/* height: 48px; */
margin-top: 25px;
}
.comments .avatar-image-container {
float: left;
/* max-height: 36px; */
overflow: hidden;
width: 36px;
}
#comments-block .avatar-image-container {
/* height: 37px; */
left: -45px;
position: absolute;
width: 37px;
}
Turning off those 3 rules shows the image with dimensions that you've defined in the rule #comments-block .avatar-image-container img.
Remove these three and it should do the trick. I think padding is the main culprit here along with other things.
#comments-block .avatar-image-container img {
border-width: 3px 0 3px 3px;
height: 48px;
padding: 5px;
}
1) Remove padding from
2) Remove max-height from .avatar-image-container
3) You're done. Play with settings to get desired results.
.comments .avatar-image-container has max-height:36px. Remove it or your avatars will be chop off since this element has overflow:hidden.
The image also has height="35" inline, which is not affecting on chrome, but can be removed.
My fixed header is overlapping my content.
Much like here (Position fixed content overlapping problem)
but my header is dynamic so not always 50px in height sometimes 52, 100 ...
Try to position it in your box better.
When you create a fixed element, it requires an exact position:
Example:
#header{
height: 95px;
width: 640px;
position: fixed;
top: 30px;
right: 30px;
}
So, this is how your browser will read this: I will place a fixed element in the top-right corner of the screen: 30 pixels from the top, and 30 pixels from the right of my screen.
THE REASON those fixed elements are one on top of another it's because he didn't define a top/bottom and left/right position correctly. Add more text and you will see if you can scroll on the fixed elements (you can't..).
Put everything in a div and ID'it #bigBody. Give the #bigBody an exact width and height, let's say 1000 width and 600 height.
Now add these:
#header {
height: 50px;
width: 600px;
position: fixed;
top: 30px;
right: 30px;
}
#footer {
background: #fff;
bottom: 0;
right: 0;
height: 30px;
width: 600px;
position: fixed;
}
min-width is irrelevant here... you use this only if you design big websites that require multiple devices access like iPhones, Tablets etc... if your just playing with the code just stick with the basics.
You can do that via JavaScript, updating both the size of the header and the margin of other widgets. See my fiddle for an example (with CoffeeScript, tested on Firefox and Chrome), or this other fiddle that uses jQuery. Basically it's changing the CSS together for more than one element.
header { height: value + "px"; }
.contents { margin-top: anotherValue + "px"; }
If the size change isn't done by JavaScript/CoffeeScript, you'll have to put a event listener to update the .contents CSS.
I have problem with margin: auto - vertical centering
#something {
width: 97%;
height: 300px;
border: 1px solid red;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
This work in every modern browser - when the page (viewport) is higher then 300px, its centered vertically, but, when the page(viewport) is lower then 300px stopped it works everywhere except in firefox... In firefox run it good (maybe it is bad functionalitiy, but its logical functionality) in other browsers the top of centered element disappers in the top of viewport.
http://jsfiddle.net/LhHed/2/ Here is god example - when you resize result window, in firefox work it well, in others browsers not. Is posible tu fix it? Or its bad functionality of firefox?
EDIT: live example http://dev8.newlogic.cz
From what I gather, you're wanting the top of the divider to display at the top of the page. This currently isn't happening because you have the position set to top:0; bottom:0;, the top property is conflicted by the bottom property, ultimately positions the divider to the bottom of the page. Simply removing the bottom property prevents the top of the element appearing outside of the viewport:
#something {
width: 97%;
height: 300px;
border: 1px solid red;
position: absolute;
top: 0;
margin: auto;
}
JSFiddle.
I removed the problem in browsers, when i use position: relative to the body element. Now its working in firefox and in other browser too. Live example on http://dev8.newlogic.cz
I have a movingboxes jquery plugin on my web site, and the left side of the panels in the box are shifted over approx 40px.
I suspect this has something to do with my stylesheet padding something but I can't seem to find it. Can anyone explain what is shifting this over?
My site is www.generationd.com and the movingboxes is found at Products | High Availability Asterisk, then click Screen Shots tab.
Thanks!
If you are referring to the weird space on the left of the screenshots slider thingy, the offending css seems to be:
.mb-scrollContainer, .mb-scroll {
width: 830px;
height: 100%;
overflow: hidden;
margin: 0 auto;
padding: 0;
position: relative;
left: -35px;
top: 0;
font-size: 18px;
}
It's a bit half assed as i changed the width to acomodate pretty much the width of your slider thingy, and had to move it 35px to the left.
It may take a bit more work, but at least you have an idea of where the problem is.