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).
Related
Hiw can I split my page into one top (50% height, width=100%) and two bottom columns(50% height, 50% width).
I tried but no success...
<html>
<head>
<title>CSS devide window into three (horizontal, 2 vertical )</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
.wrapM {
width: 100%;
height: 100%x;
padding:2px;
}
.wrapT {
width: 100%;
height: 50%;
padding:2px;
}
.wrapB {
width: 100%;
height: 50%;
padding:2px;
}
.wrapl {
width: 50%;
height: 100%;
padding:2px;
}
.wrapr {
width: 50%;
height: 100%;
padding:2px;
}
</style>
</head>
<body>
<div class="wrapM">
<div class="wrapT">Hello World This is upper Content</div>
</div>
<div class="wrapB">
<div class="wrapl">Hello World This is bottom LEFT Content</div>
<div class="wrapr">Hello World This is bottom right Content</div>
</div>
</body>
</html>
To get .wrapB1 and .wrapB2 side by side, they should float: left. But this is not sufficient, because of the padding. Add box-sizing: border-box to have this fixed.
To get a height of 50%, html and body should be set to 100% height. Additionally, you have a syntax error in your height specification of .wrap.
Have a look at https://jsfiddle.net/sgtb00nt/ to see a working version. I have also fixed the wrong nesting of <div>s.
Im trying to create a fluid layout of 3 or more DIV boxes that can sit in a fixed or fluid container that looks like this:
example:
So far ive used display: inline-block to make two of the boxes sit next too each other, which does work, however when the width is set to 48% and margin is set to 1% (Which when everything is inline, should add up to a total of 100% if im correct?) the second div goes on to a new line.
With regards to the 3rd box, when i set the width to 98% (and then the margin of 1% that is applied) the box overhangs the container on the right...
What ive essentially ended up with is this:
problem:
I can alter and reduce the % to make it all 'sort of' fit how i want, but then the top two boxes and bottom large box just don't align up nicely.
For example:
http://imgur.com/igI73Y1
Essentially what im trying to produce is a quick snippet to use that i can add to any container on a website that provides a nice, clean layout, ready for content to be added.
(Im making a few different layouts)
Id like to try and limit how many classes are created so i can easily edit the layouts as needed.
for example:
.contentbox (the main 'settings' to make these boxes work)
.smallbox (if 3 divs are set to .smallbox one after another, the 3 will show inline)
.normalbox (if 2 divs are set to .normalbox one after another, the 2 will show inline)
.largebox (if 1 divs are set to .largebox it will go to the edge of the container)
I want to use % so irregardless of the size of the container, it will always fit without having to change width pixels etc.
Currently this is what ive got:
<!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>Untitled Document</title>
<style type="text/css">
#container {
width: 600px;
border: thin solid #000;
}
.contentbox {
position:relative;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #00F;
border-right-color: #00F;
border-bottom-color: #00F;
border-left-color: #00F;
display: inline-block;
width: 48%;
margin: 1%;
vertical-align: top;
}
.largebox {
width:100%;
}
</style>
</head>
<body>
<div id="container">
<div class="contentbox">class="contentbox"</div>
<div class="contentbox">class="contentbox"</div>
<div class="contentbox largebox">class="contentbox largebox"</div>
</div>
</body>
</html>
Thank you in advanced for any help!
You have to take into consideration that borders take up width and that the margin of 1% of either side of the large container means that it can only be less than 100% width. I set it to 94, and your small ones to 45 and set padding to 0!important; Now it works.
#container {
width: 100%;
padding: 0!important;
border: thin solid #000;
}
.contentbox {
position: relative;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #00F;
border-right-color: #00F;
border-bottom-color: #00F;
border-left-color: #00F;
display: inline-block;
width: 45%;
margin: 1%!important;
vertical-align: top;
}
.largebox {
width: 94%;
}
<!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>Containers</title>
</head>
<body>
<div id="container">
<div class="contentbox">class="contentbox"</div>
<div class="contentbox">class="contentbox"</div>
<div class="contentbox largebox">class="contentbox largebox"</div>
</div>
</body>
</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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {
width: 100%;
border: thin solid #000;float:left;
}
.contentbox {
position:relative;
border:0px solid #00f;
display: inline-block;
width: 48%;float:left;box-shadow:0px 0px 2px 0px #555555;
margin: 1%;
vertical-align: top;
}
.largebox {
width:98%;margin: 1%;
}
</style>
</head>
<body>
<div id="container">
<div class="contentbox">class="contentbox"</div>
<div class="contentbox">class="contentbox"</div>
<div class="contentbox largebox">class="contentbox largebox"</div>
</div>
</body>
</html>
This is the snippet from my css file
#centered{
position: relative;
text-align: center;
width: 50%;
margin-left: auto;
margin-right: auto;
}
#table{
text-align: center;
font-size: 1.5em;
font-weight: 900;
background-color: #5E9DC8;
}
This is the html section that I'm trying to use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Bicycle Store Database</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>
<body>
<h1>ACME BICYCLE SHOP</h1>
<h2>GET IN GEAR!</h2>
<div id="centered">
<table id="table" border="0" cellpadding="10">
<tr>
<td>Go Shopping!<br/><br/>
Check a Service Ticket</td>
</tr>
</table>
</div>
<p><br/>HOME</p>
</body>
</html>
This is the result:
Everything I've read indicates that I've done this correctly, but it's off centered in all my browsers. Any thoughts?
Why you are using table for that? any specific reason? Can't you simply do it like this?
<div class="center">
Go Shopping
<br>
</div>
.center {
margin: auto;
/* Other styles goes here, width height background etc */
}
you are centering #centered but not the table in it.
add margin:0 auto; to #table.
The div is centred in the page.
The table is left aligned in the div.
Add table { margin-left: auto; margin-right: auto; } to centre the table in the div.
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.
as I've understood, for a div to actually be 100% in height, the parent div needs to be set right?
So, imagine a div structure that looks like this:
<title>A CSS Sticky Footer</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="gallery">gallery</div>
<div class="push">This is inside the push</div>
</div>
<div class="footer">Footer</div>
</body>
This is supposed to essentially be a sticky footer layout based on Ryan Faiths sticky footer layout.
How can in this case the gallery have 100% height as well as the wrapper? I can't figure this out.
My CSS looks like this: Exactly the same as Ryan's CSS, only with the gallery class added.
* {
margin: 0;
}
html, body {
height: 100%;
}
.gallery {
background-color:blue;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%
margin-left: auto;
margin-right: auto;
width:830px;
margin-bottom: -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px;
margin-left: auto;
margin-right: auto;
width: 830px;
}
(Deleted all the old stuff)
Here is the new HTML with gallery 100%, hope it works :-)
<!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>
<title>A CSS Sticky Footer</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
.header{background-color: green;position: fixed; top:0;width: 830px;height: 80px; z-index:1;}
.gallery {background-color:blue;height: 100%;}
.wrapper {
height: 100%;
margin: 0 auto;
width:830px;
}
.footer, .push {
height: 80px;
width: 830px;
background-color: #CCFF00;
position: fixed;
bottom:0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="content gallery">gallery</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
I don't know if this is technically an answer, but it's more of an answer than a comment so here goes:
Personally I don't like the Ryan Fait Sticky Footer approach, I much prefer the one used here: http://www.digital-web.com/extras/positioning_101/css_positioning_example.php. To me it's a much cleaner solution and makes more sense from a design and standards point of view. From my experience it works almost 100%, and degrades gracefully the rest of the time.
My 2cents...