I've searched for several hours and tried out everything I found, but nothing helped, so here goes. I'm trying to set up a website that has a left column and right column both of width 200 pixels, while having the middle column taking up the remaining space. I noticed that margin-right is completely ignored. I tested out overflow, but that didn't seem to work either. Granted, I might have done the overflow bit wrong. Anyways, here's my test site, relevant CSS, and the HTML.
The current background for the middle column just doesn't do well with scaling, so I'll probably swap it for something else.
Site: http://mnslayer27.webs.com/bgtest.html
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mnslayer27</title>
<link rel="stylesheet" type="text/css" href="Mnslayer27.css" />
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
</head>
<body>
<iframe src="Main_Links.html" id="ml" frameborder="0" width="100%" height="1808"></iframe>
<div id="left">
<div id="right">
<div id="column2">
<div class="transbox"></div>
<div class="transtext">
<h1>Text~</h1><br />
</div>
sdtfghujikjuhygtfrdsfghjklhkgjhfdsdfghkn
</div>
</div>
</div>
<div id="column3">
<h3>Pictures</h3>
<div id="pics">
<img src="http://i195.photobucket.com/albums/z255/yukina17/letter%20r/rave%20master/Elie.jpg" border="0" width="100%" alt="Elie" title="Elie"></img><br /><br /><br />
<img src="http://mnslayer27.webs.com/Sasuke%20Eternal%20Mangekyou.gif" border="0" width="100%" alt="Sasuke's Eternal Mangekyou Sharingan" title="Sasuke's Eternal Mangekyou Sharingan"></img>
<center><img src="http://mnslayer27.webs.com/Torch.gif" border="0" width="50%" alt="Torch" title="Torch"></img></center><br /><br />
</div>
</div>
CSS:
#left {
//overflow:hidden;
margin-left: 200px;
}
#right {
margin-right:200px;
}
div.transbox {
width:100%;
//width:auto;
height:180px;
margin:0px 0px;
background-color:#ffffff;
border:none;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
#column2 {
position: absolute;
top: 120px;
//left: 200px;
overflow:hidden;
color: #000000;
float:left;
width: 100%;
height: 1688px;
//margin-left: 200px;
//margin-right: 200px;
border: none;
background-image: url("http://i246.photobucket.com/albums/gg106/mnslayer27/Ren-Winamp2.jpg");
background-repeat: repeat-y;
background-attachment: scroll;
background-position: 0% 0%;
}
You can try using absolute position and specify the left and right for the divs instead of using width.
#left {
position: absolute;
left: 0px;
width: 100px;
height: 100%;
background-color: #d0c0c0;
}
#right
{
position: absolute;
right: 0px;
width: 100px;
height: 100%;
background-color: #d0c0c0;
}
#centre
{
position: absolute;
left: 100px;
right: 100px;
height: 100%;
overflow:hidden;
background-color: #a0a0d0;
border: solid 2px black;
margin: 4px;
padding: 4px;
}
This also has the advantage that any added margin,border or padding do not extend the divs making the whole become wider than the 100% of the page.
Heres a simple JSFiddle
hope that helps
Look at my answer here that helped someone with just about the same exact issue. There's a JSFiddle included
Not positive based on your question exactly what you want the final product to look like but based on your three column approach and trying to get your margins to work properly try floating all three of your columns, like so
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mnslayer27</title>
<link rel="stylesheet" type="text/css" href="Mnslayer27.css" />
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<style>
div.transbox {
width:100%;
//width:auto;
height:180px;
margin:0px 0px;
background-color:#ffffff;
border:none;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
.column1
{
float: left;
width: 200px;
margin: 0 100px 0 100px;
}
#column2 {
color: #000000;
float:left;
border: none;
background-image: url("http://i246.photobucket.com/albums/gg106/mnslayer27/Ren-Winamp2.jpg");
background-repeat: repeat-y;
background-attachment: scroll;
}
#column3
{
float: right;
width: 200px;
}
</style>
</head>
<body>
<div class="column1">
<iframe src="Main_Links.html" id="ml" frameborder="0" width="100%" height="1808"></iframe>
</div>
<div id="column2">
<div class="transbox"></div>
<div class="transtext">
<h1>Text~</h1><br />
</div>
sdtfghujikjuhygtfrdsfghjklhkgjhfdsdfghkn
</div>
<div id="column3">
<h3>Pictures</h3>
<div id="pics">
<img src="http://i195.photobucket.com/albums/z255/yukina17/letter%20r/rave%20master/Elie.jpg" border="0" width="100%" alt="Elie" title="Elie"></img><br /><br /><br />
<img src="http://mnslayer27.webs.com/Sasuke%20Eternal%20Mangekyou.gif" border="0" alt="Sasuke's Eternal Mangekyou Sharingan" title="Sasuke's Eternal Mangekyou Sharingan"></img>
<center><img src="http://mnslayer27.webs.com/Torch.gif" border="0"alt="Torch" title="Torch"></img></center><br /><br />
</div>
</div>
If you set your div to be display: inline-block; instead of display: block;, it may solve the issue you're having. Be aware that this may have other consequences in your code though. I'd be way of using a solution that involves position: absolute; as well though, because this can get messy when you have other elements interacting with it/each other.
I'm sure there was a method involving box-sizing: border-box; but I can't seem to work it out right now.
Related
I want to hide a div outside the screen but the screen size changes when I try.
For example:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body style="margin: 0px;">
<div style="height: 100px; width: 1000px; background-color: black; float: right;"></div>
<div style="height: 100px; width: 1000px; background-color: gray; float: right; transform: translateX(50px);"></div>
</body>
</html>
When I tried this code
I don't want the slider to appear.
Using css overflow: hidden property in the body tag, you can get rid from that slider easily. I have attached the code below, run explore. However you can explore more about overflow property. Read the article I have linked below to explore clearly.
W3 School - css overflow
<!DOCTYPE html>
<html lang="en">
<head></head>
<body style="margin: 0px; overflow: hidden">
<div style="height: 100px; width: 1000px; background-color: black; float: right;"></div>
<div style="height: 100px; width: 1000px; background-color: gray; float: right; transform: translateX(50px);"></div>
</body>
</html>
#div {}
img {
height: 200px;
}
#img1 {
float: left;
}
#img2 {
float: right;
}
#img3 {
float: right;
}
<div id="div">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
Currently, when you shrink the screen horizontally, the images start stacking vertically, which I don't want, I want them to all stay on the same horizontal line.
I'm looking how to do the following things:
Make an image disappear when it starts overlapping another image.
Make the images push to the right past the vertical scroll bar when the images start to overlapping.
The reason I ask for both is because I've now got two projects where each require one of those two and I don't know how to do it :P
I'd also like to avoid #media only screen and (max-width: ---px) if possible.
You need to add separate div for each image, and arrange it by display: flex element. Also use margin for align contents inside the flex div.
#div {
display: flex;
}
.new {
max-height: 200px;
}
.left {
margin-right: auto;
}
img {
max-width: 100%;
max-height: 200px;
}
#media (max-width: 768px) {
.hidden-xs {
display:none;
}
}
<div id="div">
<div class="new left">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
</div>
<div class="new hidden-xs">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
<div class="new">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
</div>
Try this code
#div::after {
display: table;
content: "";
clear: both;
}
#div img {
float: left;
width: 33.33%;
max-width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
<title>Demo</title>
</head>
<body>
<div id="div">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
</body>
</html>
Try this Code::
ul.img {
margin: 0;
padding: 0;
white-space: nowrap;
width: 500px;
overflow-x: auto;
}
ul.img li {
display: inline-block;
width: 200px;
height: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
</head>
<body>
<ul class="img">
<!-- Inline styles added for demonstration purposes only. -->
<li style="background-color: #000"></li>
<li style="background-color: #cdc"></li>
<li style="background-color: #fed"></li>
</ul>
</body>
</html>
try this code, And modify your image height according to need.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
<title>Demo</title>
<style>
#div {
display: flex;
flex-wrap: wrap;
}
#div img{
width: 33.33%;
height: 200px;
}
</style>
</head>
<body>
<div id="div">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
</body>
</html>
The problem is you are using a float for positioning.
Floats will automatically move to a new line when their containers becomes too small.
You could either set the size of the image container to a width of 600px with no resize in which your images would remain in place when the window becomes smaller.
Or you could use the fixed position which is what I would go for.
#img1 {
position: fixed;
width:200px;
left: 0px;
top: 0px;
border: 0px;
padding: 0px;}
#img2 {
position: fixed;
width:200px;
left: 200px;
top: 0px;
border:0px;
padding: 0px;}
#img3 {
position: fixed;
width:200px;
left: 400px;
top: 0px;
border: 0px;
padding: 0px;}
If you dont care about image resize, set the div with a minimum width of a total px sum of the image widths. That way you have less containers.
I am currently creating a practice website for my Arma 2 Unit (88th Airborne Divsion), I have created a simple navigation bar using table headers hyperlinked, however the space between the table headers is dependant on how long the word is. Is there a way of making equal space between the headers?
HTML CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>88th Airborne Division</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="banner"><img src="images/logo.png" width="680" height="125" alt="logo" /></div>
<div id="navbar"><table width="680" border="0">
<tr>
<th>Home</th>
<th>About Us</th>
<th>Members</th>
<th>Apply</th>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS CODE:
*{
margin:0;
}
#container {
height: 100%;
width: 100%;
}
#banner {
height: 125px;
width: 680px;
margin-left:auto;
margin-right:auto;
}
#navbar {
background-color:#333;
width: 680px;
height:25px;
margin-right: auto;
margin-left: auto;
text-align:center;
}
th{
border-right-width:medium;
border-right-color:#000;
border-right-style:groove;
}
Because of table width=680, you can put in CSStr{ width: 170px; }, or, you can change th in CSS
tr{
position: relative; /* you may put it out, maybe it will work without it */
}
th{
border-right-width:medium;
border-right-color:#000;
border-right-style:groove;
width: 25%;
}
which gives you more flexible sizing. Also, I don't know if you have any additional borders or margins. If so, tds will not fit in that 25% (because dimension is measured without margin, padding and border), so play with it (lower percentage until you get the right look).
I'm sure you've heard it before... a div is not centering correctly in IE even though it works perfectly in Chrome and Firefox. I've already researched and tried stuff with text-align and auto margins but have come up empty. I also tried replacing the tags with another div or something else but did not have any positive results. Any insight anyone can offer will be appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.thumbnails {
background-color:white;
border: solid 1px #000099;
height:120px;
width: 640px;
overflow-y:scroll;
margin-bottom:20px;
position:relative;
padding-top: 10px;
}
#hugeimage {
background-color:white;
border-top: solid 1px #000099;
border-left: solid 1px #000099;
border-right: solid 1px #000099;
height:550px;
width: 640px;
display:table-cell;
vertical-align:middle;
}
#hugeimage a,
#hugeimage img {
margin: 0px;
padding: 0px;
border: 0px;
}
#imageinfo {
background-color:white;
border-left: solid 1px #000099;
border-right: solid 1px #000099;
width: 640px;
}
body {
background-color: #99ccff;
text-color: #000099;
}
</style>
</head>
<body>
<h3 align="center">Ship Detail</h3>
<center>
<div class="filedrop">
<div id="hugeimage">
<a href="#" target="_blank">
<img src="images/spin/wait30.gif" />
</a>
</div>
<div id="imageinfo"></div>
<div class="thumbnails"></div>
</div>
</center>
</body>
</html>
I've removed data from the divs. This bare-bones markup still has the hugeimage and imageinfo divs left-aligned in IE but not in chrome/ff.
Remove the <center> tags and the align="center", and add a wrapper <div id="content"> around all your content. Then add this CSS style.
#content {
width: 960px;
margin: 0 auto;
}
Example:
<div id="content">
<h3>Ship Detail</h3>
<div class="filedrop">
<div id="hugeimage">
<a href="#" target="_blank">
<img src="images/spin/wait30.gif" />
</a>
</div>
<div id="imageinfo"></div>
<div class="thumbnails"></div>
</div>
</div>
Here is your solution:
See the working demo
I had the same issue while trying to center a loading modal box in IE. Removing
display: table; did the trick. Maybe this could help someone else.
Ive been banging my head with why MSIE8 doesnt overlap the floating div just as webkit a mozilla both do. I hope you guys can help me out with this one.
I have the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="style" href="style.css" type="text/css" />
</head>
<body style="margin: 0px; background: #3b0404;">
<div align="center">
<div id="top" style="height: 100px; background: yellow; width: 100%;max-height: 100px; ">
<div style="overflow: visible; width: 800px; height: 100px; max-height: 100px; background: aquamarine;">
<div id="logo" style="float: left; margin-left: -3px; width: 203px; height: 201px; background: pink; overflow: visible;"></div>
<div id="menu" style="float: right; width: 595px; height: 100px; background: blue;"></div>
</div>
</div>
<div id="content" style="width: 800px; margin-left: auto; margin-right: auto;">
<div style="background: purple; height: 215px;"></div>
<div style="background: green; height: 350px;"></div>
</div>
<div id="bottom"></div>
</div>
</body>
</html>
I need the pink div to overlap the purple one while maintaining dimensions, however MSIE8 keeps expanding the containing divs so it pushes everything down instead of the desired behaviour.
I hope my question is clear, I dont know if Im doing something wrong and should take a different approach.
Thanks for your help!!
It was the transitional DOCTYPE .. it looked fine on JSFiddle cause it added the strict dtd.
Thanks to everyone for your time.