I'm very new in frontend world (I did html in 99 year... many changes since that time...)
Example of sourse is here:
css codehttps://jsfiddle.net/titan83/bm13dqyy/1/
You can see that vertical scrollbar is sticked to top element (combobox). Howewer the table in problem have a right position.
How to force scrollbar to be aligned like table?
Thanks.
Got your issue, give margin-top: 10px instead of padding-top: 10px to the div with overflow
<select id="SGroups" onchange="onSGroupChanged(this.value)" style="width: 100%"></select>
<div style="height:80vh; overflow: scroll; margin-top: 10px;">
<table id="worksheetTable">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
</table>
</div>
Related
So there's this image in my code and with following code it is centered correctly horizontally,
img#headerImage{
width: 600px;
margin-left:auto !important;
margin-right:auto !important;
}
but when I add margin-left:-300px; the image is resized appropriately but it is slightly offset to the left and no longer exactly centered.
Any ideas?
Also, here's some of the HTML:
<tr>
<td class="headerContent" id="logoContainer">
<img src="url" style="max-width:600px;"
id="headerImage" mc:label="header_image" mc:edit="header_image"
mc:allowdesigner="" mc:allowtext="" />
</td>
</tr>
You could better still use margin:0px auto;
add display: block to your img css
When you say margin-left:-300px you are saying you want the picture moved 300px to the left. With a right margin set to auto it will of course be offset left. If you want to make it center and then move it over just slightly then I recommend reading up on this answer here: Offset div from center
Also you will want to add
display:block;
Not sure if this is possible, but I have a div with a "border" background. Inside this div is another div that holds the content, and I want this div to appear under the border.
Is this possible to do with CSS?
Edit: Sorry for writing it in a hurry, let me try to explain more.
The parent div uses background-image like so:
background-image: url(images/SomeImage.png)
SomeImage.png is just a custom border that appears at the top of the div.
I have a child div inside this parent div, and I want it to appear beneath SomeImage.png. Is this possible?
Do something like this:
HTML
<div id="border-bg">
<div id="content">
Your content goes here
</div>
</div>
CSS
#border-bg {
background:url(images/border.png) no-repeat;
z-index:100;
position:relative;
}
#border {
z-index:10;
position:relative;
}
Make sure to add the width and height of border image.
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
Check this for more info about z-index
it is possiple. try changing the opacity of the parent div.
for example
$("#childdiv").css({ opacity: 1.0 });
$("#parentdiv").css({ opacity: 0.75 });
I think you want to apply inner shadow http://sublimeorange.com/css/css3-inner-shadow/ on the content div?
<div id="border-frame" style="padding: 10px; background-color: red">
<div id="content" style="padding: 10px; box-shadow:inset 0 0 10px #000000; background-color:white">
this is some great text
</div>
</div>
http://jsfiddle.net/gzbVG/
I ended up putting the "background image" in another div and using negative margins. Sorry for the confusion but none of the other solutions worked for me.
Just throwing this out there...
I'm using this to put a background image behind a login screen...
<table align=center width=100% border=0 cellpadding=0 cellspacing=0 background="images/image.png" STYLE="background-repeat: no-repeat; background-position:center">
<tr>
<td align=center valign=middle height="350" background="images/loginimage.png" STYLE="background-repeat: no-repeat; background-position:center">
Content Here
</td>
</tr>
</table>
To demonstrate this issue, below HTML file displays a very tall DIV (named div1), which is initial hidden, and a button to show or hide div1. Open it in Google Chrome, then click on the button to show the div. You will notice that the div is now displayed, but there is no way to see its lower part because it is too tall to fit in the window and Chrome does not display a scroll bar.
If you open it in Firefox, there is no such issue. Firefox displays a scroll bar when the div1 is shown so that you can scroll to see its lower part.
<html>
<head>
<script src="http://api.prototypejs.org/javascripts/pdoc/prototype.js" type="text/javascript"></script>
</head>
<body>
<input type="button" onclick="$('div1').toggle();" value='Toggle'></input>
<table>
<tr>
<td>
<div style="position:relative">
<div style="position:absolute">
<div id='div1' style="position:absolute; height:1500px; width: 200px; border: 1px solid gray; display:none"></div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
I found this had something to do with the table element and the first div. If I either remove the table/tr/td tags or change the style of the first div from "position: relative" to "position:absolute", Google Chrome will display the scroll bar properly. Unfortunately, in my project, I could not do this as it would affect a lot of elements in the page.
It looks like a bug in Chrome? Are there any other workarounds/fixes?
This also occurs in Safari.
Changing the position of the div wrapping #div1 from absolute to relative will fix this:
<div style="position:relative">
<div id='div1' style="position:absolute; height:1500px; width: 200px; border: 1px solid gray; display:none"></div>
</div>
I need to show a page with a product icon (which is usually 300x400px in dimensions) on the left side of the page and its details on right side.
I thought I'd put the description in rows of a table.I created 3 div elements- a containerdiv,an icondiv,and a detailsdiv and tried to float the icondiv to left and detailsdiv to right.I got the icondiv on left side of page,but the detailsdiv is shown below the icondiv not side by side!
Ideally the icondiv should be 25-30% in width of containerdiv and detailsdiv should take up the rest of the width.I am wondering if there is a way to do it without mentioning width in pixels.
please correct me if there is something wrong with my css
thanks
mark
<div class ="itemdetailscontainer">
<div class="itemicondiv">
<img border="0" src="${item.isbn }.png" alt="${item.isbn }.png" />
</div>
<div class="itemdetailsdiv">
<table id="itemdetailstable" width="100%">
<tr>
<td>
${item.name }
</td>
</tr>
<tr>
<td>by</td>
</tr>
<tr>
<td>${item.maker.name }</td>
</tr>
<tr>
<td>
<p>Description:</p>
<p>${item.description}</p>
</td>
</tr>
</table>
</div>
</div>
css is
div.itemdetailscontainer{
float:clear;
}
div.itemicondiv{
float:left;
}
div.itemdetailsdiv{
float:right;
}
I tried this
div.itemdetailscontainer{
width:100%;
}
div.itemicondiv{
float:left;
width:25%;
}
div.itemdetailsdiv{
float:right;
width:75%;
}
and this gets the effect..
thanks everyone for responding..Is the use of
width : 25% etc problematic? Do I need to hardcode width in pixels etc?
The overflow property was new for me..
See: http://jsfiddle.net/Uys4s/
div.itemdetailscontainer{
overflow: hidden;
background: #eee
}
div.itemicondiv{
float: left;
width: 30%;
background: #ccc
}
div.itemdetailsdiv{
overflow: hidden;
background: #aaa
}
width: 30% handles this: "Ideally the icondiv should be 25-30% in width of containerdiv"
overflow: hidden on div.itemdetailsdiv handles this: "detailsdiv should take up the rest of the width".
overflow: hidden on div.itemdetailscontainer will contain the floats in the way I think you imagine the nonexistent clear: float will. Take a look at the valid values of clear. If you desperately wanted to use clear: both to clear your floats, this is how you'd do it: http://jsfiddle.net/Uys4s/1/ - but overflow: hidden is easier.
Be sure that your container (itemdetailscontainer) has enough width to hold them side by side. Inspect with Firebug or other tool and check the width.
Also I would suggest you use div's for the itemdetailstable for consistency.
There's nothing called float:clear It should be :
float : none;
or if you're trying to clear the float it should be :
clear:both
float: clear does not exist!
I think you want this: clear: left/right/both
I have a problem with headline tags when I float them around an image in compability-mode in explorer.
<img src="1.gif" style="float: left; margin-right: 10px"><h1>Some headline</h1>
The picture is like 100px high, and by default the text centers in middle, which it should, but with compability-mode on it aligns top.
How can I fix so it vertically aligns center?
/Molgan
Is there a specific need to float the H1 tag next to the image? Another alternative would be to assign the image as a background to the H1 tag, and then use css background-position and padding to position your text and image to display correctly. Can you provide your html markup or a link to the page?
h1 { background: url(/path/to/my_image) 10px 15px no-repeat; padding: 20px; }
That would put your image as the background of the H1, and position it 10px from the left and 15px from the top, for example.
Why float the image? Save yourself some time and put the image in the headline tag, and then you can use vertical align to position it.
JsFiddle solution
Works cross-browser as far as I can check.
It's not "pure CSS", but it is "IE-proof"!
<table>
<tr>
<td style="margin-right: 10px">
<img src="1.gif">
</td>
<td valign="middle">
<h1>Some headline</h1>
</td>
</tr>
</table>