I have CSS sheet which fails to create a horizontal scroll bar when the table width is greater than 800px wide.
CSS looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
html, body {
max-width : 800px;
margin-left:auto;
margin-right:auto;
}
body
{
background-color:#000000;
}
#content {
position:relative;
z-index:1;
}
#header
{
position:relative;
background-image: url(http://img.photobucket.com/albums/v224/Tahira/HARPALGETMENERDS4.jpg);
padding: 110px;
background-repeat:no-repeat;
background-position: 52% 0%;
}
#header h1.bottom {margin: -100px;}
#header2
{
position:relative;
margin-top: -70px;
margin-left: -40px;
background-position: 0% 0%;
}
#container
{
background: #ffffff;
}
table, td, th
{
width: 800px;
overflow: auto;
overflow-y: hidden;
scrollbar-base-color:#ffeaff
font-size: 93%;
font-family:Calibri;
border-collapse:collapse;
border-bottom: 1px solid #fff;
}
th
{
background-color:#6293d9;
color:#d1d9ec;
}
td
{
background-color:#e8edff;
color:#0059ff;
}
...
</style>
try to wrap your table inside a
<div style="width:800px; overflow-x:auto;">
<table>...</table>
</div>
You need to remove this:
overflow-y: hidden;
That means that when it overflow horrozontally it will just hide the content rather than show a scroll bar.
Example on jsFiddle.com
div.scroll{
width: 800px;
overflow:auto;
overflow-y: hidden;
}
table
{
scrollbar-base-color:#ffeaff
font-size: 93%;
font-family:Calibri;
border-collapse:collapse;
border-bottom: 1px solid #fff;
}
th
{
background-color:#6293d9;
color:#d1d9ec;
}
td
{
background-color:#e8edff;
color:#0059ff;
}
</style>
</head>
<body>
<div class="scroll">
<table>
<tr>
<td>test</td><td>test</td> ... <td>test</td>
</tr>
<tr>
<td>test</td><td>test</td> ... <td>test</td>
</tr>
</table>
<div>
</body>
</html>
Related
I know there are a lot of topics about image header; but I checked most of them, and they couldn't help me.
This is my problem: I have an image that I want to use as header. I finally found the way to place it, but then it shows with its original size. I tried max-width:100%, but the size didn't change and just stays there.
HTML:
<body>
<header id="niberus">
<img src="nib1.jpg" alt="nib1" width="1900px" height="450px"></img>
</header>
And for my CSS, I have this:
header#niberus
{
width: 100%;
}
I tried to remove the width and the height from my HTML file, but then the image stays at normal size. When I add the width and height like now, it fills the screen; but of course, when you make the window smaller, the picture doesn't change.
Here is my full HTML code:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css">
<title>Niberus-gaming</title>
</head>
<body>
<header id="niberus">
<img src="nib1.jpg" alt="nib1" width="1900px" height="450px"></img>
</header>
<div class="hbuttons">
<ul>
<li>-Home-</li>
<li>-News-</li>
<li>-Forum-</li>
<li>-Upcoming projects-</li>
<li>-About me-</li>
<li>-Contact-</li>
</ul>
</div>
<hr>
<table border="1" cellpadding="5px" cellspacing="10px">
<tr>
<td width="300px"><h1>Under construction</h1></td>
<td width="1300px" ><h1>Under construction</h1></td>
<td width="300px"><h1>Under construction</h1></td>
</tr>
</table>
</body>
</html>
And here is my full css code:
ul.horizontal li{
display:block;
float:left;
padding:0 10px;
width: 150px;
}
header#niberus
{
width: 100%;
}
body
{
background-color:black;
}
h1
{
color: white;
}
table
{
color: white;
text-align: left
}
.hbuttons{
float: left;
width: 100%;
background-color: #00FF00;
overflow:hidden;
position:relative;
}
.hbuttons ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
.hbuttons ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
.hbuttons ul li a {
display:block;
margin:0 0 0 1px;
padding:10px 10px;
font: 30px Impact;
color: white;
text-decoration:none;
line-height:15px
}
Currently you are targeting the header tag, you need to target the image itself. Remove the width and height attribute from the html. You can also set a max-width for the img tag if you need to
Target the image
header#niberus {
display: block;
}
header#niberus img {
width: 100%;
max-width: xxxx;
}
I have an issue with the div on my page. It's the only one I have, and it covers the middle of my page. With a few tweaks in CSS, I made it go all the way down.
The problem though, is that the video(which is inside the div element), is sneaking out like so:
http://i.stack.imgur.com/xybem.jpg
Here's the html:
<html>
<head>
<link rel="shortcut icon" href="Images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="Style.css" media="screen" />
<title>Arthur</title>
<meta content="text/html" charset="windows-1251">
</head>
<Body background="Images/background2.jpg">
<IMG class="imgborder" src="Images/button.png" align="left" height="50">
<div id="wrapper" style="background-color:black; width:60%; margin-left: auto ; margin-right: auto ;">
<img class="center" width="60%" src="Images/logo2.png">
<BR>
<img class="center imgborder" height="300" src="Images/muller.jpg">
<P>...</P>
<P>...</P>
<P>...</P></Font><
<iframe class="center" width="500" height="300" src="..." frameborder="5"
allowfullscreen></iframe></div>
</body>
</html>
And here's the CSS:
#charset "utf-8";
/* CSS Document*/
/*This section is for links*/
a:link
{
font-weight:normal; color:crimson
}
a:visited
{
font-weight:normal; color:Crimson;
}
a:hover
{
font-weight:bold; color: Royalblue; font-variant:small-caps;
}
/*This section is for a paragraph section*/
p {
font-style:normal; font-size:18px;
}
blue {
color:crimson;
}
/*This section is for the image's black border.*/
.imgborder {
border-color: crimson; border:thick; border-style:outset;
}
.body
{
background-color: #0000FF;
}
html {
height:100%;
}
body{
height:100%;
background-image:url('Images/background2.jpg');
background-repeat:no-repeat;
background-size:100%;
}
}
#wrapper {
margin: 0 auto;
width: 990px;
height:100%;
overflow:scroll;
position:relative;
}
#navigation {
margin: 0 auto;
width: 990px;
height: 55px;
background-color: #fff;
}
#bottomHalf {
margin: 0 auto;
width: 990px;
height: 100%;
background-color: #4d3c37;
}
div { /* set div to full width and height */
width: 100%;
height: 100%;
}
p {
margin-left:2cm; margin-right:2cm; font-family:"calibri"; color:crimson; font-size:16; text-align:justify;
}
table {
color:crimson;
}
.center {
margin: 0 auto;
}
img.center {
display: block; margin-left: auto; margin-right: auto;
}
iframe.center {
display: block; margin-left: auto; margin-right: auto;
}
How can I have proper borders around the midItem element?
http://jsfiddle.net/PmfLm/
Here is the minified code of the same fiddle,
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style type="text/css">
span,.midItem {
border-style: solid;
}
.midItem {
border-color: blue;
padding: 5px;
}
p {
text-align:justify;
}
.leftPage,.rightPage{
display:inline-block;
width: 33%;
padding: 5px;
}
.centerBox {
display:table-cell;
text-align: center;
vertical-align: middle;
}
.leftBox,.rightBox {
display: table;
border-style:dotted;
border-width:5px;
width: 100px;
height: 100px;
border-color:green;
}
.leftBox,.leftPage {
float:left;
}
.rightBox,.rightPage {
float:right;
}
</style>
</head>
<body>
<span class="leftPage"><span class="leftBox"><p class="centerBox">Leftbox</p></span>
<p>Some Text</p>
</span>
<span class="rightPage"><span class="rightBox"><p class="centerBox">rightBox</p></span>
<p>SomeText</p>
</span>
<p class="midItem">SomeText</p>
</body>
</html>
Not getting your question properly but do you need something like this? If yes than clear your floats, use overflow: hidden; for the container div
Demo
CSS
span,.midItem {
border-style: solid;
overflow: hidden;
}
If you use table-cell to get the same height in all elements, then you should set it to all three elements
.midItem {
border-color: blue;
padding: 5px;
display:table-cell;
}
.leftBox,.leftPage {
display:table-cell;
}
.rightBox,.rightPage {
display:table-cell;
}
http://jsfiddle.net/PmfLm/3/
I am trying to create a footer that sticks to the bottom of the page. I have:
<body>
<form id="form1" runat="server">
<div id="wrap">
<div id="content">
<uc2:logo ID="logo1" runat="server" />
</div>
</div>
<uc1:footer ID="footer1" runat="server" />
</form>
</body>
Here is my css
body {
margin: 30px 10px 0px 10px;
font-size: 14px;
font: 76% Arial,Verdana,Helvetica,sans-serif;
}
html, body, form, #wrap { height: 100%; }
form > #wrap { height: auto; min-height: 100%; }
#wrap {
width: 1000px;
margin: auto;
}
#content {
text-align:left;
}
#footer {
clear: both;
position: relative;
z-index: 10;
width:1000px;
margin:auto;
}
What am I missing? The footer appears below the viewport (scrollbars are also on the page). I'm expecting it to be some type of margin issue.
Look at this: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Try position absolute :
#footer {
clear: both;
position: absolute;
z-index: 10;
width:1000px;
margin:auto;
bottom:0px;
height:50px;
}
What I want is to have a centered content column that has a bg with a long vertical gradient. It will most likely extend past the browser, however I don't want it to create scrollbars. I want it to act as if it were like the body background where it continues and is only revealed if the browser is larger or there is more content.
Looks like you need something like this. My example used tables, but you can try to replace it with div layout.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>aruseni</title>
<style type="text/css">
body {
font-size: 14px;
font-family: arial, helvetica, sans-serif;
color: #000;
background-color: #9b9b9b;
}
html, body{
margin:0;
padding:0;
height:100%;
border:none
}
a, a:link {
font-weight: bold;
color: #000;
}
a:visited {
font-weight: bold;
color: #444;
}
img {
border: 0;
}
table.site {
border: 0;
padding: 0;
border-spacing: 0;
margin: 0 auto;
width: 80%;
height: 100%;
min-width: 700px;
}
tr {
vertical-align: top;
}
td {
padding: 0;
}
td.left_side {
width: 200px;
}
td.right_side {
width: 200px;
}
td.content {
padding: 10px;
background-color: #fff;
background-image:url('gradient-1x2000.png');
background-repeat: repeat-x;
width: 200px;
}
</style>
</head>
<body>
<table class="site">
<tr style="padding: 0px;">
<td class="left_side"> </td>
<td class="content">
<p>Your contents go here. :)</p>
</td>
<td class="right_side"> </td>
</tr>
</table>
</body>
</html>
The gradient here is an image with 2000 height and 1 weight. The gradient starts in the top, and if the browser’s height is more than 2000 pixels (oh, really?), as “background-color: #fff;” specifies, the white colour is rendered.