I'm currently working on a website for a friend of mine who runs a little hotel in Hungary. Here it is.
So far I´m quite pleased with the result. My problem however is, when viewing it on my laptop at 1440x900 or zooming in on my desktop PC the background of the "box" container gets clipped and won´t extend to the bottom of the page.
I fiddled around with all sorts of values but for the life of me, I can't find the error I made. Perhaps someone will spot it instantly.
Here's the html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.kaiserapartman.hu</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head>
<body class="pagebody"><img class="bg" src="img/bg.jpg"/>
<div id="main">
<div id="header">
<div id="flags"><table width="90" border="0" style="text-decoration:none">
<tr>
<td><img src="img/hu.jpg" width="28" height="18" alt=""/></td>
<td><img src="img/de.jpg" width="28" height="18" alt=""/></td>
<td><img src="img/uk.jpg" width="28" height="18" alt=""/></td>
<td><img src="img/ru.jpg" width="28" height="18" alt=""/></td>
</tr>
</table>
</div>
<div id="content">
<div id="buttons"><table width="90" border="0" style="text-decoration:none">
<tr>
<td><img src="img/taxi.png" width="90" height="90" alt=""/></td>
</tr>
<tr>
<td><img src="img/email.png" width="90" height="90" alt=""/></td>
</tr>
<tr>
<td><img src="img/facebook.png" width="90" height="90" alt=""/></td>
</tr>
<tr>
<td><img src="img/skype.png" width="90" height="90" alt=""/></td>
</tr>
<tr>
<td><img src="img/maps.png" width="90" height="90" alt=""/></td>
</tr>
<tr>
<td><img src="img/booking.png" width="90" height="90" alt=""/></td>
</tr>
</table>
</div>
<div id="logo"></div>
<div id="menu">
<div id="navbar" style="width:644px; float:left; clear:both;">
<li>Kezdőlap</li>
<li>Galéria</li>
<li>Árak</li>
<li>Szolgáltatások</li>
<li>Elérhetöség</li></div>
</div>
<div id="box">
<div id="images"><table border="0">
<tr>
<td><img src="img/00001.jpg" width="340" height="225" alt=""/></td>
</tr>
<tr>
<td><img src="img/00002.jpg" width="340" height="225" alt=""/></td>
</tr>
</table></div>
<div id="text"><table border="0">
<tr>
<td><h1>Üdvözöljük a hévízi Kaiser Apartman weboldalán!</h1>
<h2>Apartmanházunk csendes fekvésű helyen, Hévíz főutcájában, a hévízi termáltótól 200 méterre található.<p>Önellátó apartmanokat kínálunk, ingyenes Wi-Fi internettel és kábeltévével, valamint privát parkolási lehetőséggel.<p>A közelben reggelizők, éttermek, kávézók, üzletek találhatók.<p>Házunktól a buszmegálló 200 méterre, Keszthely (Balaton) 7 km-re, a Hévíz-Balaton Airport repülőtér 15 km-re helyezkedik el.<p>Taxi transzfer szolgáltatást biztosítunk távolabbról érkező vendégeink részére.
Kérjen árajánlatot!</h2>
</td>
</tr>
</table>
</div>
<div id="header"></div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
And here´s the CSS:
#charset "utf-8";
/* CSS Document */
.pagebody {
margin:0px;
}
.bg {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
}
#main {
width:100%;
min-height:100vh;
position:absolute;
font:Verdana, sans-serif;
font-size:24px;
font-weight:bold;
z-index:1;
}
#header {
width:100%;
height:70px;
position:absolute;
background-image:url(img/header.jpg);
z-index:3;
}
#flags {
position:absolute;
z-index:3;
padding:0px;
}
#footer {
width:100%;
height:19px;
background-image:url(img/footer.jpg);
position:fixed;
z-index:6;
bottom:0px;
}
#content {
width:1100px;
min-height:100vh;
z-index:2;
position:relative;
left:50%;
margin-left:-500px;
}
#buttons {
width:100px;
height:500px;
left:1000px;
top:70px;
position:absolute;
z-index:5;
}
#box {
width:1000px;
min-height:100vh;
height:auto;
z-index:1;
position:absolute;
background:url(img/content.png);
}
#images {
top:275px;
position:absolute;
z-index:3;
left:10px;
padding-top:5px;
width:356px;
height:255px;
}
#text {
top:70px;
left:370px;
position:absolute;
z-index:3;
font-size:19px;
font:verdana;
font-weight:bold;
color:#4F1700;
width:620px;
}
#logo {
width:356px;
height:250px;
position:absolute;
z-index:4;
background-image:url(img/logo.png);
}
#menu {
width:644px;
height:70px;
background-color:gree;
position:absolute;
z-index:4;
left:356px;
}
#navbar {
width:644px;
height:70px;
font-size:16px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
z-index:5;
position:absolute;
line-height:70px;
color:#FFF;
}
#navbar li {
padding-left:21px;
padding-right:20px;
margin:0;
list-style:none;
float:left;
position:relative;
width:auto;
display:block;
text-align:center;
vertical-align:middle;
color:#4F1700;
text-decoration:none;
z-index:5;
}
#navbar li:hover {
background:url(img/hover.jpg);
z-index:5;
font-style:italic;
color:#4F1700;
}
What You Did
you played with zindexes of the divs and played it wrong..
Lets look at your code:
your div with id = "box" has a z-index 1 while its child div that contains all the text has its own z-index as z-index:3 in that case when the height of the text div will increase then the height of its parent div id = "box" wont increase with it... I have removed the z-index of your "text" div and gave it a margin-left:350px; and its perfect now ... Now you can open it at any resolution zoom it in or out ... It wont clip or break ... as a matter of fact try adding more text and the size of the div will increase ...
add this to your text div
style = "min-height: 30px; word-break: word-wrap; float: left; margin-left: 350px;"
and remove its z-index and absolute property ..
Always be careful when you are changing the z-indexes of the divs ...
You must fit the body to the viewport. you can do this by assigning the below css to body.
body {
position: fixed;
top: 0;
left: 0;
bottom: 0;
}
I know, that's not the best way to do this, but this is what i could come up with over a quick glance. Hope this helps
The problem is the width of #main is 100% which can be less than the width of #content when the window is sized down. #content has a left margin of -500px, so when the width is less than 1000px, it get moved off to the left.
Add min-width:1000px to #main and you'll establish scrolling at anything less than 1000px.
Related
I have a table, but I would like to put my div tag in front of one too, but behind another, in the same table. I would like to put the div with the id "backDrop" behind the td with the id "td1", and the td with the id "menu", everything else should be behind the div
<table style="width:100%;border-collapse:collapse">
<tr style="z-index:1">
<td style="width:91.0vw;" id="header">
<h1>Tyler Silva E-Portfolio</h1>
</td>
<td onclick="openNav()"id="td1" style="background-color:#3953a5;z-index:initial;">
<img style="width:8vw;" id="logo" src="img/logo.png" onclick="openNav()"/>
</td>
<div id="backDrop" style="opacity:0" onclick="alert('hello')"></div>
</tr>
<tr>
<td>
<!--body-->
<h1 style="color:white">
hello world
</td>
<td id="nav" rowspan="2">
<div id="menu"><p>M<br />E<br />N<br />U<br /></p></div>
</td>
</tr>
<tr>
<td><!--footer--></td>
</tr>
</table>
and my css is
body
{
margin:0;
background-color:#55505c;
}
#header
{
height:8vw;
width:100%;
background-color:#77b6ea;
z-index:-1
}
h1
{
font-family:georgia;
font-size:3vw;
margin-top:1.5vw;
}
#logo
{
vertical-align:top;
padding:0;
}
td
{
padding:0
}
#nav
{
position:relative;
height:100vh;
background-color:#3953a5;
font-size:8vw;
z-index:100000;
}
#backDrop
{
position:fixed;
left:0;
top:0;
width:100vw;
height:100vh;
background-color:black;
z-index:initial;
opacity:0;
}
As #j08691 said placing div between a table row tag in invalid HTML. What you are after is something like this:
body
{
margin:0;
background-color:#55505c;
}
#header
{
height:8vw;
width:100%;
background-color:#77b6ea;
z-index:-1
}
h1
{
font-family:georgia;
font-size:3vw;
margin-top:1.5vw;
}
#logo
{
vertical-align:top;
padding:0;
}
td
{
padding:0
}
#nav
{
position:relative;
height:100vh;
background-color:#3953a5;
font-size:8vw;
z-index:100000;
}
#backDrop
{
position:fixed;
left:0;
top:0;
width:100vw;
height:100vh;
background-color:black;
z-index:99;
opacity:0;
border:1px solid #ffffff;
}
<div id="backDrop" style="opacity:0" onclick="alert('hello')"></div>
<table style="width:100%;border-collapse:collapse">
<tr>
<td style="width:91.0vw;" id="header">
<h1>Tyler Silva E-Portfolio</h1>
</td>
<td onclick="openNav()"id="td1" style="background-color:#3953a5;z-index:initial;">
<img style="width:8vw;" id="logo" src="img/logo.png" onclick="openNav()"/>
</td>
</tr>
<tr>
<td>
<!--body-->
<h1 style="color:white">
hello world
</h1>
</td>
<td id="nav" rowspan="2">
<div id="menu"><p>M<br />E<br />N<br />U<br /></p></div>
</td>
</tr>
<tr>
<td><!--footer--></td>
</tr>
</table>
The div has been placed placed above everything using z-index and position.
Is this what you were after?
When hovering over the image to prompt the text to appear, the text and banner flutter once you put the mouse over it. How can this be prevented.
Any help would be appreciated thanks.
Here's the sample. http://jsfiddle.net/a3mcmbby/
Html:
<div id="container-content">
<div id="design-background">
</div>
<div id="content">
<div id="table-content">
<table align="center">
<tbody>
<tr>
<td colspan="2" valign="bottom" style="font-family:ralewayregular; color: rgb(37,37,37); font-size: 110%; line-height: 150%;">
</td>
<td><img src="/images/layout/layoutImg6.png" alt="" width="310" height="182">
</td>
</tr>
<tr>
<td>
<img src="/images/layout/layoutImg4.jpg" alt="" width="304" height="194">
<h3>EXAMPLE</h3>
</td>
<td rowspan="2">
<img src="/images/layout/layoutImg5.jpg" alt="" width="311" height="406">
<h3>EXAMPLE</h3>
</td>
<td>
<img src="/images/layout/layoutImg1.jpg" alt="" width="308" height="195">
<h3>EXAMPLE</h3>
</td>
</tr>
<tr>
<td>
<img src="/images/layout/layoutImg3.jpg" alt="" width="304" height="195">
<h3>EXAMPLE</h3>
</td>
<td>
<img src="/images/layout/layoutImg2.jpg" alt="" width="308" height="195">
<h3>EXAMPLE</h3>
</td>
</tr>
<tr>
<td colspan="3" style="text-align:center; font-family: Semibold; color: rgb(165,97,11); font-size:300%;">Serving St. Catharines and Niagara Region</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS:
#container-content{
position:relative;
margin: 0 auto;
width:100%;
min-height:700px;
background-color:#FFF;
}
#design-background{
position:absolute;
height:350px;
top:50%;
left:0px;
right:0px;
margin-top: -145px;
background: url('../images/background-dec.jpg');
}
#content{
position:relative;
margin: 0 auto;
left:0;
right:0;
width:980px;
}
#table-content{
position:absolute;
margin-top:-30px;
}
#table-content table tr td{
position: relative;
padding:8px;
}
#table-content table tr td h3{
display:none;
}
#table-content table tr td a:hover + h3{
color:#FFF;
display:block;
position: absolute;
z-index:10;
margin: auto;
top:0;
bottom:0;
left:8px;
right:10px;
font-family: ralewayregular;
height:50px;
background-color: rgba(0,0,0,0.7);
text-align: center;
padding-top:25px;
font-size: 200%;
}
http://jsfiddle.net/a3mcmbby/
try this
#table-content table tr td:hover h3{ #do something ... }
In your HTML, nest h3 within a, then adjust your CSS accordingly.
As it is now, h3 is being placed over top of the a tag when the a tag is hovered over. This prevents hovering from working so the hover status is removed. Then, it picks up the cursor hovering again because it is no longer covered - continuing in an endless loop.
When you display the h3, it is intercepting the hover in the underlying element, so it is no longer hovered. Then h3 is not displayed, the underlying element is hovered again , and so on
set
#table-content table tr td h3 {
pointer-events: none;
}
to avoid it
fiddle
Introduction
I have this portion of HTML:
<!DOCTYPE HTML>
[...]
<table class="inv">
<tr>
<td id="i_1"></td><td id="i_2"></td><td id="i_3"></td><td id="i_4"></td><td id="i_5"></td>
<td class="dt" rowspan="5">
<div style="height:460px;position:relative">
<div class="st msg"></div>
<img src="content/images/site/inv.png"><br>
<a id="nm">USER INVENTORY</a><br>
<span class="desc">Contain tradable items of the user, click on an item on the left.</span><br>
<div style="text-align:right;padding-top:15px" class="bts"></div>
</div>
<div id="bot" style="display:none"><span class="bt i_b pp"><</span> <span class="bt i_b np">></span> <span style="font-weight:bold" id="pgs"></span></div>
</td>
</tr>
<tr>
<td id="i_6"></td><td id="i_7"></td><td id="i_8"></td><td id="i_9"></td><td id="i_10"></td>
</tr>
<tr>
<td id="i_11"></td><td id="i_12"></td><td id="i_13"></td><td id="i_14"></td><td id="i_15"></td>
</tr>
<tr>
<td id="i_16"></td><td id="i_17"></td><td id="i_18"></td><td id="i_19"></td><td id="i_20"></td>
</tr>
<tr>
<td id="i_21"></td><td id="i_22"></td><td id="i_23"></td><td id="i_24"></td><td id="i_25"></td>
</tr>
</table>
[...]
Linked to this CSS:
body{
font:16px Arial, Tahoma;
background-color:#222222;
margin:auto;
width:100%;
}
table{
border-collapse:collapse;
color:#FFF;
width:100%;
}
table td{
border:1px solid #FFFFFF;
vertical-align:top;
text-align:left;
padding:0px;
}
.inv{
table-layout:fixed;
}
.inv td:not(.dt){
width:100px;
height:100px;
text-align:center;
vertical-align:middle;
}
.inv td:not(.dt) > img{
max-width:100px;
max-height:100px;
cursor:pointer;
}
.inv td:not(.dt) > img:hover{
position:absolute;
z-index:100;
width:110px;
height:auto;
margin-top:-55px;
margin-left:-55px;
box-shadow:0px 0px 2px 1px #000000;
}
.inv .dt{
width:35%;
padding:10px;
}
.inv .dt img{
width:100%;
height:auto;
}
.inv .dt #desc{
font-size:12px;
color:#B8B6B4;
max-height:60px;
overflow:hidden;
display:inline-block;
}
.bt.i_b{
color:#FFFFFF;
}
.bt.i_b:hover{
background-color:#1B1B1B;
}
.det #nm{
font-size:20px;
font-weight:bold;
}
All the TDs inside the table are filled with images with this code:
for(var i = 0; i < ((inv.length < 25) ? inv.length : 25); i++){
$("td#i_"+(i + 1)).html('<img src="content/images/albums/'+inv[i]["song_id"]+'.png" title="'+inv[i]["song_name"]+'" id="'+(i+1)+'">');
}
The problem
Everything works fine, I get what I need (the table filled), but I get some sort of padding/margin at the bottom of every td with an image in it. Even if I have set width and height of the cells to 100px, in Firebug I can see a height of 103.5px, why this happens? I've read that it can be DOCTYPE causing it, but I can't remove it, id there an alternative solution?
Thanks.
"but I get some sort of padding/margin at the bottom of every td with an image in it."
Because img is an inline element, and thats why you see white space at the bottom, use this
table img {
display: block;
}
Now this will target all the images inside table element, so if you want the specific ones, use a class instead and assign like
table img.your_class {
display: block;
}
Demo
In the first image, I've used style="display: block;" and written inline, and not for the other two, so, you will see white space for the next two images but not the first one
My IFrame doesn't fill the cell in Explorer but does in Chrome. What gives? To fix in Explorer I have to hard code px the height and width. Any ideas why this is happening?
<style type="text/css">
.styleTbl
{
margin-bottom:10%;
margin-left:10%;
width:80%;
}
.styleBg
{
background: #00aced;
}
.style_logo
{
width:80%;
margin-left:10%;
}
.styleObj img
{
width: 100%;
}
iframe
{
background-color:#ffffff;
border-color:#eee9e9 ;
border-width:4px;
height: 99%;
width:99%;
margin:1px;
}
</style>
</head>
<body class="styleBg" onLoad="GetNewsSource()">
<table class="style_logo">
<tr>
<td>
<img alt="logo_banner Missing" class="style_logo" longdesc="Banner" src="logo_banner1.png" align="left"/>
</td>
<td>
<img alt="spinning_wheel" longdesc="Gif" src="Live.gif"style="height: 110px; width: 180px; " align="middle"/>
</td>
</tr>
</table>
<br />
<table class="styleTbl">
<tr>
<td height="100%" width="50%" rowspan="2">
<iFrame src="index.html"scrolling="no"></iFrame></td>
<td class="styleObj">
<img alt="png1" class="styleObj" longdesc="png1" src="png1.png"/></td>
</tr>
<tr class="styleRow">
<td class="styleObj">
<img alt="png2" class="styleObj" longdesc="png2" src="png2.png"/></td>
</tr>
<tr>
<td>
<img alt="png3" width=100% longdesc="png3" src="sentiment.png"/></td>
<td class="styleObj">
<img alt="png3" class="styleObj" longdesc="png3" src="png3.png"/></td>
</tr>
</table>
</body>
</html>
The issue is with using both percentages and pixel measurements for your iframe. Let's say you have a container width of 1000px. 99% of this is 990px, however applying a 1px margin to this results in a total internal width of 992px, leaving 8px for white space.
If you wanted to code this so no gaps would show, you should use a percentage for the margin also; 0.5% would return 4px for both sides in this example, leaving 0px of white space.
I suggest changing IFrame styling code to:
iframe
{
background-color:#ffffff;
border-color:#eee9e9 ;
border-width:4px;
height: 99%;
width:99%;
margin:0.5%;
}
I want to make first input have the width 100% and second + image = 100% so that second input get the rest of the space (100%-img size) on the same line. Is it possible to do using CSS?
<html><head><title>width test</title>
<style type="text/css">
.t {
width: 100%;
table-layout:fixed;
}
.caption {
text-align: left;
width: 35%;
}
.data {
text-align: left;
width: 65%;
}
.edt {
width: 100%;
}
</style>
</head>
<body>
<table class="t">
<tr>
<td class="caption">Caption:</td>
<td class="data"><input type="text" class="edt" /></td>
</tr>
<tr>
<td class="caption">Caption:</td>
<td class="data">
<input type="text" class="edt" /><img width="22px" src="cal.png" />
</td>
</tr>
</table>
</body>
</html>
Yes, this can be done with CSS. The trick is to use display: table and display: table-cell, where where width: 100% means "the rest of the available space".
Here is an example (with wrapper divs around .edt and the image link for better result): http://jsfiddle.net/zgw8q7vj/
The important CSS parts are these:
/*Use "table" layout in the 'data' cells,
and give them all the available width (after the captions)*/
.data {
display: table;
width: 100%;
}
/*Then give the textbox all the available remaining width...*/
.edt-wrapper {
display: table-cell;
width: 100%;
}
/*...after the image has claimed the space it needs*/
.img-wrapper {
display: table-cell;
}
If you don't want the caption column to take more space than it needs, you can even remove table-layout:fixed; and width: 35%; from .t and .caption
untested.
you didn't mention colspans can't be used, so this solution uses it.
<table class="t">
<tr>
<td class="caption">Caption:</td>
<td class="data"><input type="text" class="edt" /></td>
</tr>
<tr>
<td class="caption">Caption:</td>
<td colspan="3"><input type="text" class="edt" /></td>
<td class="data"><img width="22px" src="cal.png" />
</td>
</tr>
</table>
I have found that I can do it with tables. The question still remain, is it possible to do with div/css?
<html><head><title>width test</title>
<style type="text/css">
.t {
width: 100%;
table-layout:fixed;
}
.caption {
text-align: left;
width: 35%;
}
.data {
text-align: left;
width: 65%;
}
.edt {
width: 100%;
}
.joiningtable
{
border-spacing:0px;
border-collapse:collapse;
width:100%;
margin:0px;
border:0px;
padding:0px;
}
.joiningrest
{
width:100%;
margin:0px;
border:0px;
padding:0px;
}
.joiningfixed
{
margin:0px;
border:0px;
padding:0px;
}
</style>
</head>
<body>
<table class="t">
<tr>
<td class="caption">Caption:</td>
<td class="data"><input type="text" class="edt" /></td>
</tr>
<tr>
<td class="caption">Caption:</td>
<td class="data">
<table class="joiningtable">
<tr><td class="joiningrest"><input type="text" class="edt" /></td><td class="joiningfixed"><img src="cal.png" /></td><tr>
<table>
</td>
</tr>
</table>
</body>
</html>
If you're still interested, it is possible but you need to use a little magic..
With absolute positioning, you can stretch those entry fields as wide as you like, or rather, you make them stretch to 100% and put them inside spans that stretch as wide as you like because input fields are stubborn things and won't behave otherwise.
<html>
<body>
<div style="background-color:#DDDDFF; position:absolute; left:10px; top:10px; right:10px; height:80px;">
<span style="position:absolute; left:10px; top:10px;">Caption</span>
<span style="position:absolute; left:10px; top:40px;">Caption</span>
<span style="position:absolute; left:70px; top:10px; right:10px;">
<input type="text" style="width:100%" />
</span>
<span style="position:absolute; left:70px; top:40px; right:40px;">
<input type="text" style="width:100%" />
</span>
<img style="width:22px; position:absolute; top:40px; right:10px;" src="cal.png" />
</div>
<div>
</div>
</body>
</html>
P.S. I've left the style definitions on the entities for simplicity. In a real-world case, I'd move them to a .css file of course.