When I zoom out far on my browser, Chrome, the info_table moves down. Why does it do this? Also when added overflow: auto; to section, it also moves. What can I do?
Jsfiddle http://jsfiddle.net/PbwS8/3/
CSS
*{
font-size:100%;
margin: 0px;
padding: 0px;
}
body{
width: 100%;
}
#info_table{
float: left;
width: 480px;
margin: 40px 0px 0px 16px;
border-spacing: 0px 0px;
}
#left{
float:left;
margin: 60px 0px;
}
#photo{
float: left;
width: 176px;
height: 176px;
border: 1px solid black;
}
#section{
margin: 160px auto 0px;
width: 675.2px;
height: 320px;
#overflow: auto;
#border:1px solid black;
}
#choosephoto{
width: 64px;
}
#submitwords{
width: 72px;
height: 28px;
margin-left: 104px;
#border:1px solid purple;
}
#wrapper{
display: block;
box-shadow: 3px 10px 5px #888888;
margin: 0px auto;
margin-top: 48px;
width: 1024px;
height: 960px;
overflow: auto;
background:white;
}
HTML
<div id="section">
<body>
</body>
<form>
<div id="left">
<div id="photo">
</div>
<br/>
<input type="file" id="choosephoto" name="uploadphoto"/>
</div>
<table id="info_table">
<tr>
<td>Name:</td>
</tr>
<tr>
<td><input/></td>
</tr>
<tr>
<td>Info:</td>
</tr>
<tr>
<td><textarea></textarea></td>
</tr>
<tr>
<td><button type="submit" id="submitwords">Update</button></td>
</tr>
</table>
</form>
</div>
As for what is going on: It appears the browser is compensating for the zoom level by changing the width of the borders on #photo.
67% Zoom:
50% Zoom:
As for how to fix it? Unless being able to zoom like this is a badly needed, I wouldn't worry about it because it is a lot of work to make sure everything scales correctly.
This is because the width for info_table is set too wide for section width.
For example, reducing the width in info_table would alleviate this. So you could try replacing it with the following.
#info_table{
float: left;
width: 460px;
margin: 40px 0px 0px 16px;
border-spacing: 0px 0px;
}
Having said that, it would be better to read up on using a Grid System (like 960.gs).
Why you have a body tag inside?
Your code is a mess, I re-write it for you here
Related
Greetings Stackoverflow!
I have problems pixel-perfect setting my tags. Here is the codepen: https://codepen.io/anon/pen/NLbyag
My aim is to have my <svg> and <table id="time-h-axis"> tags horizontally scrollable inside their <div id="main-charts"> parent, but not vertically.
<svg> and <table id="time-h-axis"> have height 330 and 70 which makes the 400px height of <div id="main-charts">.
However, there are a few extra vertical pixels coming from somewhere (one can scroll vertically and see a bit of lightgreen of the div in the codepen)...
I am out of ideas... Help needed! Thanks ;-)
HTML:
<div id="main-charts">
<table id="time-h-axis"><tr></tr></table>
<svg height="330" width="11970"></svg>
</div>
CSS:
#main-charts {
width:1000px;
height: 400px;
background-color: lightgreen;
margin: 0px;
border: 0px;
padding: 0px;
overflow: scroll;
}
#time-h-axis {
border-spacing: 0px;
width: 11970px;
height: 70px;
background-color: violet;
padding: 0px;
border: 0px;
margin: 0px;
}
#main-charts svg {
background-color: red;
margin: 0px;
border: 0px;
padding: 0px;
}
Set the SVG to display:block (per this SO Q&A) and the wrapper to overflow:auto
#main-charts {
width: 1000px;
height: 400px;
background-color: lightgreen;
margin: 0px;
border: 0px;
padding: 0px;
overflow: auto;
}
#time-h-axis {
border-spacing: 0px;
width: 11970px;
height: 70px;
background-color: violet;
padding: 0px;
border: 0px;
margin: 0px;
}
#main-charts svg {
background-color: red;
margin: 0px;
border: 0px;
padding: 0px;
display: block;
}
<div id="main-charts">
<table id="time-h-axis">
<tr></tr>
</table>
<svg height="330" width="11970"></svg>
</div>
Codepen Demo
Trying to convert a HTML to PDF using wkhtmltopdf.
I want the table in the generated PDF to be at the center but the table represented here in HTML always aligns left in the created PDF?
What could be going wrong?
PS: I am new to the front-end altogether. I think i am making some small mistake in styling.
<div class="divGeneral" id="sumDiv">
<table id="infoTable">
<tr>
<th>Pr Name: </th>
<td><textarea id="pName" class="noBorderInput" rows="1"></textarea></td>
</tr>
<tr>
<th>Su Date: </th>
<td><textarea id="suDate" class="noBorderInput" rows="1"></textarea></td>
</tr>
</table>
</div>
The style sheet has
.divGeneral {
width: 100%;
//float: left;
text-align: center;
margin: 0 auto;
object-fit: cover;
}
#sumDiv {
// margin-bottom: 50px;
// display: inline-block;
// float: none;
text-align: left;
margin: 0 auto;
}
#infoTable th {
border: 0px;
vertical-align: top;
padding: 4px 2px 0px 2px;
width: 180px;
text-align: right;
margin-left: auto;
margin-right: auto;
}
#infoTable td {
border: 1px solid black;
padding: 3px 3px 2px 3px;
text-align: left;
vertical-align: top;
margin-left: auto;
margin-right: auto;
}
textarea
{
margin: 0px;
}
textarea .multiline{
margin-top: 2px;
}
If I understand your question correctly, you can add
#infoTable{
margin: 0 auto;
}
This simply center-align the table in .divGeneral which is width:100%.
I also removed some css code that has no effect in the current task.
Please run the code below to see if this is what you want.
.divGeneral {
width: 100%;
object-fit: cover;
}
#sumDiv {
text-align: left;
margin: 0 auto;
}
#infoTable{
margin: 0 auto;
}
#infoTable th {
vertical-align: top;
padding: 4px 2px 0px 2px;
text-align: right;
}
#infoTable td {
border: 1px solid black;
padding: 3px 3px 2px 3px;
text-align: left;
vertical-align: top;
}
textarea .multiline{
margin-top: 2px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="divGeneral" id="sumDiv">
<table id="infoTable">
<tr>
<th>Pr Name: </th>
<td><textarea id="pName" class="noBorderInput" rows="1"></textarea></td>
</tr>
<tr>
<th>Su Date: </th>
<td><textarea id="suDate" class="noBorderInput" rows="1"></textarea></td>
</tr>
</table>
</div>
</body>
</html>
Use flexbox method.I hope this will work for you.
.divGeneral {
display:flex;
justify-content:center;
align-items:center;
}
This is the code that I have in my page
<fieldset style="width: 60%; border: 1px solid #BBB; margin-left: auto; margin-right: auto; border-radius: 10px; text-align: center;">
<div style="width: 95%; margin: 5px; padding: 6px; margin-left: auto; margin-right: auto; overflow-x: scroll; text-align: center;">
<canvas id="graph" width="1645" height="300"></canvas>
</div>
</fieldset>
As you can see I have a canvas inside a div, which has set the overflow-x: scroll property.
This is the result that I have which is what I am not looking for. As you can see the fieldset (which is width: 60%;) covers the entire screen width and over. The div is scrolling only a little part of the canvas.
This should be the result that I'd like to see:
Here I set the canvas width to 750 just to show what I want to have.
In conclusion, I want to have the fieldset with a width: 60% and a div that scrolls the overflow-x of the canvas. How could I do it?
This is a known issue with the width/min-width of the fieldset element. See this question and it's answer for fixes.
In Webkit you can fix it by simply adding min-width: 0; to your fieldset.
Here a snippet:
fieldset {
width: 60%;
border: 1px solid #BBB;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
text-align: center;
min-width: 0;
}
fieldset div {
width: 95%;
margin: 5px;
padding: 6px;
margin-left: auto;
margin-right: auto;
overflow-x: scroll;
text-align: center;
}
<div>
<fieldset>
<div>
<canvas id="graph" width="1645" height="300"></canvas>
</div>
</fieldset>
</div>
I'm having a layer problem where this layer content-3f display over all other layers below it:
<div id="content-3f">
<div id="content-3-1f"></div>
<div id="content-3-2f"></div>
<div id="content-3-3f"></div>
</div>
<div class="line"><hr class="top" /></div>
Css:
#content-3f {
float: left;
width: 880px;
height: auto;
padding: 10px 0px 10px 26px;
height: 103px;
clear:both;
}
#content-3-1f
{
float: left;
width: 269px;
height: 202px;
margin:0px 20px 0px 0px;
padding: 0px;
background: url('../images/Guided-tour-logo.png') no-repeat left top;
}
#content-3-1f a
{
width: 269px;
height: 202px;
display:block;
}
#content-3-2f
{
float: left;
width: 269px;
height: 202px;
margin:0px 20px 0px 0px;
padding: 0px;
background: url('../images/Taste-chinatown-logo.png') no-repeat left top;
}
#content-3-2f a
{
width: 269px;
height: 202px;
display:block;
}
#content-3-3f
{
float: left;
width: 269px;
height: 202px;
margin:0px 0px 0px 0px;
padding: 0px;
background: url('../images/Taste-chinatown-logo.png') no-repeat left top;
}
Screenshot:
As you see it goes over the <hr>
How to fix?
the problem is due to the "float:left" on your #content-3f. The float needs to be cleared for this to work. Here's your solution::
HTML
<div id="content-3f">
<div id="content-3-1f"></div>
<div id="content-3-2f"></div>
<div id="content-3-3f"></div>
</div>
<div class="clear"></div>
<div class="line"><hr class="top" /></div>
Notice the additional div with class "clear" This is used to clear the float in your elements.
Now the CSS
#content-3f {
width: 880px;
height: auto;
padding: 10px 0px 10px 26px;
height: 103px;
}
.clear {
clear:both;
}
The rest of the css remains the same. Hope this helps.
Yes, I agree with gapple. I guess I didnt study your css properly. its the "height:103px" that's creating the problem. remove that and it works as it is.
But I would like to point out that its always a good idea to clear floats nonetheless.
Adding the following to your CSS should give you the answer you are looking for.
#content-3-1f,
#content-3-2f,
#content-3-3f {
position:relative;
z-index: 1;
}
Basically z-index tells things which "layer" to live on. The default layer is z-index: 0;
You also need to specify a relative or absolute position for it to take affect.
The more elegant solution is to use display:inline-block rather than float:left on your boxes.
http://www.vanseodesign.com/css/inline-blocks/
I'm encountering some difficulty with some CSS I'm coding.
Whenever I minimise the window a horizontal scrollbar appears and the problem with this scrollbar is that it doesn't go away even when I maximise the window.
What could I be doing wrong?
Thanks in advance
CSS
body {
background-color: #C5C5C5;
margin-left: 0px;
margin-top: 0px;
}
html {
overflow-y: scroll;
}
.header_bg {
background-color: #F1F1EE;
padding: 10px 10px 10px 10px;
border-top: 2px solid #738ebe;
width: 100%;
}
.header_main {
width: 960px; // would it be better to change this to width: 80%
margin:0 auto;
overflow: hidden;
}
.header_main img {
float: left;
}
.header_main div {
float: right;
}
HTML
<div class="header_bg">
<div class="header_main">
<img src="resources/img/login_logo.png" width="163" height="66" />
<div>Already a member? Sign in</div>
</div>
</div>
This:
.header_bg {
background-color: #F1F1EE;
padding: 10px 10px 10px 10px;
border-top: 2px solid #738ebe;
width: 100%;
}
Is adding to the calculated width of it's container, ie, body, which header_bg is stretching to fit 100%, so the padding is shifting bodys dimensions beyond the viewport, thus triggering scroll-x.
Remove it and your scroll bar goes away:
padding: 10px 0;
Edit: http://jsfiddle.net/userdude/782fc/2/
Full: http://jsfiddle.net/userdude/782fc/2/embedded/result
Or, alternatively, put the width on the body with margin: 0 auto; so it auto-centers:
body {
background-color: #C5C5C5;
width: 1024px;
margin: 0 auto;
}
...
.header_bg {
background-color: #F1F1EE;
padding: 10px;
border-top: 2px solid #738ebe;
width: 100%;
}
.header_main {
width: 100%;
margin:0 auto;
overflow: hidden;
}
Edit: http://jsfiddle.net/userdude/782fc/4/
Full: http://jsfiddle.net/userdude/782fc/4/embedded/result/