i need to create CSS divs.
one up the top for the header (full width)
one on the left (180px) for the vertical menu
and one to the right for the main content
the menu on the left will be an iframe and then the one on the right will also be an iframe.
I currently have this code:
<style type="text/css">
body,html {
height:98%;
}
#top-bar {
width:100%;
padding:10px 10px 10px 10px;
margin:0 0 10px 0;
border-bottom:solid 1px #000000;
top:0;
left:0;
}
#left-bar {
width:170px;
display:inline;
float:left;
position:fixed;
z-index:999;
}
#right-bar {
margin-left:180px;
width:auto;
display:inline;
}
#space {
width:100px;
height:120px;
}
</style>
<table width="100%" border="0" cellspacing="10" cellpadding="10" style="position:fixed;z-index:999;top:0;left:0;background-color:#fff">
<tr>
<td><img src="http://www.integradigital.co.uk/images/company/logo.png" width="282" height="41" /></td>
<td align="right">Hello <?php echo $_SESSION["forename"]; ?> | Logout</td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
</table>
<div id="space"></div>
<div id="left-bar"><iframe src="header.php" width="180px" height="480px" frameborder="0" scrolling="auto"></iframe></div>
<div id="right-bar">
<iframe name="rightiframe" src="dash.php" width="100%" height="480px" frameborder="0" scrolling="auto"></iframe>
</div>
but the right content seems to be going under the left menu
i need the top header (currently in the table) to not move when scrolling and the same for the left menu bar and needs to be % so it can all fit on different size screens.
anyone have any ideas what i can do with it?
To start with, move the styles into a separate style sheet and link to this from the <head> of the page. Don't use the <style> element because it's a pain to maintain and results in duplication across pages. The <style> element should not be in the <body> of the page.
Also, don't use tables for layout. It's not semantic.
There's no point making a floated element inline. It won't be inline. If those inline elements weren't floated, the width's you've specified wouldn't be applied. Also, don't use the style attribute on elements - use CSS.
These suggestions probably won't fix your specific issue, but everything's a bit of a mess at the moment, so I think you've got bigger issues to fix at this point...
Try out with the changes below,
<div id="left-bar">
<iframe src="image.png" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
</div>
<div id="right-bar">
<iframe name="rightiframe" src="image.png" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
</div>
#left-bar {
width: 20%;
........
}
#right-bar {
width: 80%;
.......
}
Note: Never use tables for the alignment of contents in a page. Always use divs with the css defined in .css file with the proper 'class' property defined for div tags.
Related
I have tried EVERYTHING I could find. The famous 1px vertical gap on the right side of images still doesn't seem to have a solid fix! Please someone help to to resolve this. I literally have no hair left after pulling them out one by one!
Plesae can someone help?
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body{
margin:0;
padding:0;
}
img{
border:0 none;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
}
a img{
border:0 none;
}
.imageFix{
display:block;
}
table, tr, td{
border-collapse:collapse;
}
#bodyTable{
height:100% !important;
margin:0;
padding:0;
width:799px !important;
max-width: 799px !important;
}
</style>
<table bgcolor="red" width="799" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="176" height="115">
<img src="https://www.htref.co.za/signatures/images/img01-01.png" class="imageFix" alt="logo" width="176" height="115">
</td>
<td width="623" height="115">
<img src="https://www.htref.co.za/signatures/images/img01.png" class="imageFix" alt="logo" width="623" height="115">
</td>
</tr>
</tbody>
</table>
Example show of 1px vertical gap on the right side of the image
bgcolor="red"
Is it necessary? Without this the gap disappeared.
On my computer, no border appear !
Put a lightgrey background-color to body, anything at the right of the image.
Why using a table when you can do this with Flexbox, for example ?
Have you tried not put any white space before or after your images? I kind of remember that whitespace in your source code HTML is collapsed but still rendered as a space character in the output. So no space, tab or newline character before or after your img tag.
But if this is all you signature has, you don't need a table (which is a very 90s way to align pictures). You could use directly your imgs (but still without whitespace before or after your tags):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
width: 799px
}
</style>
</head>
<body><img src="https://www.htref.co.za/signatures/images/img01-01.png"
alt="logo" width="176" height="115"
/><img src="https://www.htref.co.za/signatures/images/img01.png"
alt="logo" width="623" height="115"
/></body>
</html>
I have a small problem.
<div style="height:500px; overflow:hidden">
<table style="height:1000px">....</table>
</div>
overflowed parts of table are visible. how can I fix this
Updated:
My code is exactly like this:
<style>
#trademark img{
width:300px;
height:250px;
box-shadow: 0px 0px 50px #888888;
}
</style>
<div id="trademark" style="height:570px; overflow:hidden; background-color:#F00">
<table id="trade_content" style="position:absolute; margin-left:103px;" border="0" cellpadding="15">
<tr>
<td align="center"><img src="1.png"></td>
<td align="center"><img src="2.png"></td>
<td align="center"><img src="3.png"></td>
</tr>
</table>
</div>
you have added position:absolute; in table so to hide the overflowed parts of table you need to add position:relative; in parent <div id="trademark">
hope this will solve your issue.
The problem with your code is that the div should have a max-height in the style to make the overflow work. This means that your code should look like this:
<div style="max-height: 500px; overflow: hidden">
<table style="height: 1000px">....</table>
</div>
Let me know if it works. In case, give a look at this previously asked question.
It seems that the problem happens when using position:absolute
after removing it everything is working fine thank you all...
Alright so I'm having trouble getting the embed youtube-clip to be % width/height. Trying to make a website that looks the same no matter what resolution you have.
How do I make them use the % instead of px?
<table id="tableframsida" align="center" border="0" height="80%">
<tr>
<td height="100%">
<h2>HeatoN explains how to think when you're creating tactics</h2>
</td>
<td height="100%">
<iframe width="100%" height="100%" src="http://www.youtube.com/embed/UTdFMBReXBw" frameborder="0" allowfullscreen></iframe>
</table>
With so few informations about the layout you'd want, I propose you this HTML / CSS you can adjust to fit your requirement.
I removed the width=100% and height=100% of the iframe, which are the default values for iframes
I changed the table display for a classic wrapping div + elements and a display:inline-block.
HTML
<div class="videoWrapper">
<h2>HeatoN explains how to think when you're creating tactics</h2>
<iframe src="http://www.youtube.com/embed/UTdFMBReXBw" frameborder="0" allowfullscreen></iframe>
</div>
CSS
.videoWrapper{
height:600px;
}
.videoWrapper h2, .videoWrapper iframe{
display:inline-block;
}
.videoWrapper h2{
word-wrap:;
width:25%;
}
.videoWrapper iframe{
width:70%;
}
Fiddle
I want to make a menu with CSS sprites but there's not ONE browser on the planet that can read it. My problem can be found here.
My CSS is:
#menuMusica{
width:340px;
height:190px;
background:url('images/menuMusic.png') 0px 0px;
}
#menuMusica a:hover{
background: url('images/menuMusic.png') 0px -190px;
}
And my HTML:
<div id="menu">
<table cellspacing=100px>
<tr>
<td id="menuMusica" onmouseover="soundGuitar();">
<img src="images/menuP.png" border=0>
</td>
<td id="menuPhoto" onmouseover="soundPhoto();">
<img src="images/menuP.png" border=0>
</td>
</tr>
</table>
</div>
Change #menuMusica a:hover { to #menuMusica:hover {.
The problem is that the 'mouseout' background is applied to your td element, but your 'mouseover' background is applied to the a element inside of it. Since the a element doesn't fill up all the available vertical space, you can't see the rollover.
The quickest solution is to add display: block; to the styles for your a elements.
If you want to be consistent, you should also move the background CSS property from #menuMusica to #menuMusica a.
I am creating a web page, where I have an image that I want to place in the center. On the top of that image I want to have input boxes, labels, and a submit button.
I am trying to use this CSS
img.center
{
z-index:-1;
}
but this does not work. When I change the code to
img.center
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
it makes the image go behind. But then as I used left:0px and top:0px ... it puts the image at location 0,0. But I want the image to stay in the center.
To keep the image in the center, I have added this: <div align="center">.
Is there any way, I can keep the image in the center and make it go behind the boxes, labes, and buttons too?
My HTML page looks like this (I tried to have a background image for my div tag, but no image is appearing on top of it):
<html>
<head>
<title>Question of the Week</title>
<style type="text/css">
body
{
background-image:url('images/background.jpg');
background-repeat:repeat-x;
}
.container
{
background-image:url('images/center.jpg');
background-repeat:no-repeat;
}
td.cntr {padding-top:50px;}
</style>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div align="left"><img src="images/logo.jpg"></div></td>
<td></td>
<td><div align="right"><img src="images/right_logo.jpg"></div></td></tr>
</table>
</tr>
<tr>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="cntr">
<div id="container">
<input name="box" type="textbox" />
<input name="box" type="textbox" />
<input name="submit" type="submit" />
</div>
</td>
</tr>
</table>
</tr>
</table>
</body>
</html>
You can position both the image and the text with position:absolute or position:relative. Then the z-index property will work. E.g.
#sometext {
position:absolute;
z-index:1;
}
image.center {
position:absolute;
z-index:0;
}
Use whatever method you like to center it.
Another option/hack is to make the image the background, either on the whole page or just within the text box.
Well, put your image in the background of your website/container and put whatever you want on top of that.
Your container defined in HTML:
<div id="container">
<input name="box" type="textbox" />
<input name="box" type="textbox" />
<input name="submit" type="submit" />
</div>
Your CSS would look like this:
#container {
background-image:url(yourimage.jpg);
background-position:center;
width:700px;
height:400px;
}
For this to work though, you must have height and width specified to certain values (i.e. no percentages). I could help you more specifically if you wanted, but I'd need more info.
Make it a background image that is centered.
.wrapper {background:transparent url(yourimage.jpg) no-repeat center center;}
<div class="wrapper">
...input boxes and labels and submit button here
</div>
Try this code:
body {z-index:0}
img.center {z-index:-1; margin-left:auto; margin-right:auto}
Setting the left & right margins to auto should center your image.
Start at 0 and go up from there, rather than using -1. For instance, set the div containing your inputs and labels to a z-index of 100, and give the image you want to place behind it a z-index of 50.
Alternatively just set the image as the background-image of the div containing the inputs and labels. Since the image is probably illustrative and therefore presentational, it doesn't really need to be an actual img element.
There are two ways to handle this.
Background Image
Using z-index property of CSS
The background image is probably easier. You need a fixed width somewhere.
.background-image {
width: 400px;
background: url(background.png) 50% 50%;
}
<form><div class="background-image"></div></form>
I style my css in its own file. So I'm not sure how you need to type it in as your are styling inside your html file. But you can use the
Img{
position: relative
Top: 150px;
Left: 40px;
}
This would move my image up 150px and towards the right 40px. This method makes it so you can move anything you want on your page any where on your page If this is confusing just look on YouTube about position: relative
I also use the same method to move my h1 tag on top of my image.
In my html5 file my image is first and below that I have my h1 tag. Idk if this effects witch will be displayed on top of the other one.
Hope this helps.