I was after a little help with z-index...
I'm playing with the code and need my id="hidebar" to sit on top of the "content" and "content-inner" divs. Sorry if this seems really basic, but I struggle =D
My CSS structure file:
body
{
margin: 0;
padding: 0;
height:100%;
width:100%;
background-color: #FFF;
z-index:-1;
}
#content
{
width: 100%;
height: 640px;
background-color:#060;
position:relative;
z-index:-1;
}
#content-inner
{
width: 960px;
height: 640px;
background-color:#666;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:-1;
}
#hidebar
{
width: 100%;
height: 50px;
background-color:#0FF;
position:relative;
z-index:2;
}
#navbar
{
width: 100%;
height: 257px;
background-color:#F00;
position:relative;
}
#navbar-inner
{
width: 960px;
height: 257px;
background-color:#666;
margin-left:auto;
margin-right:auto;
position:relative;
}
#footer
{
width: 100%;
height: 181px;
background-image:url(images/gray-pixel.png);
position:relative;
}
#footer-inner
{
width: 960px;
height: 181px;
background-color:#666;
margin-left:auto;
margin-right:auto;
position:relative;
}
#footer-small
{
width:230px;
float:left;
height:100%;
background-color:#999;
position:relative;
}
#footer-large
{
width:500px;
float:left;
height:100%;
background-color:#CCC;
position:relative;
}
#colour-bar
{
width: 100%;
height: 13px;
background-color:#639;
position:relative;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ul {
list-style-type:none;
}
ul li a{
font:700 49px/1.2em Arial, Helvetica, sans-serif;
color:#fff;
text-decoration:none;
height:59px;
display:inline-block;
list-style-type:none;
text-align:center;
position::relative;
vertical-align: baseline;
}
ul li a:hover{
color:#e25709;
}
div.table
{
border: 0px solid black;
display: table;
margin-left:auto;
margin-right:auto;
}
div.tr {border: 0px solid black; display: table-row; }
div.td {border: 0px solid black; display: table-cell; }
h3
{
color:#FFF;
font-size:22px;
font-family:Arial, Helvetica, sans-serif;
padding-top:30px;
padding-left:25px;
padding-bottom:20px;
}
h4
{
color:#FFF;
font-size:13px;
font-style:normal;
font-family:Arial, Helvetica, sans-serif;
padding-left:25px;
padding-right:25px;
line-height:1.2em;
}
My Source Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/structure.css"/>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="content">
<div id="content-inner">
<a href="index.html">
<img src="images/logo.jpg"/ alt>
</a>
</div>
</div>
<div id="hidebar">
</div>
<div id="colour-bar"></div>
<div id="navbar">
<div id="navbar-inner">
<ul>
<li><button1>About us</button1></li>
<li><button2>Partners</button2></li>
<li><button3>Solutions</button3></li>
<li><button4>Services</button4></li>
</ul>
</div>
</div>
<div id="footer">
<div id="footer-inner">
<div id="footer-small"></div>
<div id="footer-large">
<div class="table">
<div class="tr">
<div class="td">
<h3>Contact Us:</h3>
</div>
<div class="td">
</div>
</div>
<div class="tr">
<div class="td">
<h4>AUS - Melbourne<br />
101 Main Street<br />
Glen Iris VIC 3146</h4>
</div>
<div class="td">
<h4>Email: mail#website.com<br />
Phone: (03) 9888 8888<br />
Fax: (03) 9888 8888</h4>
</div>
</div>
</div>
</div>
<div id="footer-small"></div>
</div>
</div>
<script>
$("button1").click(function () {
$("h4").toggle("slow");
$("button1").toggle();
$("button2").show();
$("button3").show();
$("button4").show();
});
$("button2").click(function () {
$("h4").toggle("slow");
$("button2").toggle();
$("button1").show();
$("button3").show();
$("button4").show();
});
$("button3").click(function () {
$("h4").toggle("slow");
$("button3").toggle();
$("button1").show();
$("button2").show();
$("button4").show();
});
$("button4").click(function () {
$("h4").toggle("slow");
$("button4").toggle();
$("button1").show();
$("button2").show();
$("button3").show();
});
</script>
</body>
</html>
Any help would be amazing <3
If you want #hidebar to be on top of #contents and #content-inner then just reposition the #hidebar.
<div id="content">
<div id="content-inner">
<div id="hidebar">
</div>
<a href="index.html">
<img src="images/logo.jpg" />
</a>
</div>
</div>
Related
The following is my code. My questions are below that:
<html>
<head>
<title>My BBC News Reader</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0;
font-family:arial, helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width:100%;
height:40px;
color:white;
}
.fixedwidth {
width:1050px;
margin:0 auto;
}
#logodiv {
padding-top:5px;
float:left;
border-right:1px solid #990000;
padding-right:10px;
}
#signindiv {
font-weight:bold;
font-size:0.9em;
padding: 6px 80px 12px 20px;
float:left;
border-right:1px solid #990000;
}
#signindiv img {
position:relative;
top:3px;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
padding:0;
margin:0;
}
#topmenudiv li {
list-style:none;
font-weight:bold;
font-size:0.9em;
border-right:1px solid #990000;
height:100%;
padding:10px 20px 12px 20px;
float:left;
}
#searchdiv {
padding:5px 0 0 10px;
float:left;
}
#searchdiv input {
height:25px;
border:none;
padding-left:10px;
background-image:url("images/glass.png");
background-repeat:no-repeat;
background-position:right center;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png"/>
</div>
<div id="signindiv">
<p><img src="images/signin.png" width="18px" height="18px"/>Sign in</p>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search"/>
</div>
</div>
</body>
</html>
Just to show, I uploaded the code here - http://www.mazdoor.net/bbcnews.html . I will remove once I fix the issue.
1. The vertical border lines are sticking out. I can't figure out what the issue is.
2. The Sign in logo and text are not aligning with the BBC logo.
Kindly help me. I just started HTML and CSS 4 days ago.
Thank you
remove
#topmenudiv li{
height: 100%; <!--- remove
}
#signindiv p{
margin:0; <!--- remove default margin given by browser
}
This is because the padding is set on the list items.
Try this:
#topmenudiv li {
list-style: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
height: 100%;
padding: 0px 20px;
float: left;
line-height: 35px;
}
This will remove the height on the padding and set the vertical height of the text with line-height.
this is the correct code
<html>
<head>
<title>My BBC News Reader</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0;
font-family:arial, helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width:100%;
height:auto;
color:white;
}
.fixedwidth {
width:1050px;
margin:0 auto;
}
#logodiv {
padding-top:15px;
float:left;
border-right:1px solid #990000;
padding-right:10px;
min-height: 53px;
}
#signindiv {
font-weight:bold;
font-size:0.9em;
padding: 6px 80px 12px 20px;
float:left;
border-right:1px solid #990000;
}
#signindiv img {
position:relative;
top:3px;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
padding:0;
margin:0;
}
#topmenudiv li {
list-style:none;
font-weight:bold;
font-size:0.9em;
border-right:1px solid #990000;
/*height:100%;*/
padding:26px 20px;
float:left;
}
#searchdiv {
padding:5px 0 0 10px;
float:left;
}
#searchdiv input {
height:25px;
border:none;
padding-left:10px;
background-image:url("images/glass.png");
background-repeat:no-repeat;
background-position:right center;
}
.clear{float:none !important;clear:both;}
ul li:last-of-type{padding:0px !important;border:none;height:0px !important;}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png"/>
</div>
<div id="signindiv">
<p><img src="images/signin.png" width="18px" height="18px"/>Sign in</p>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
<li class='clear'></li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search"/>
</div>
<div class='clear'></div>
</div>
</div>
</body>
</html>
in here all the things what have i done is hard to explain i explained it briefly.study the code...and try to understand
1.<li class='clear'></li> add for clear floats in ul
<div class='clear'></div> add for clear floats fixedwidth div
change topbar div height to auto to get the topbar height according to its inside content.
#topmenudiv li padding changes padding: 26px 20px then its height will equal with signindiv height.
delete #topmenudiv li height then #topmenudiv li height will be height auto.( if #topmenudiv li{height:auto;} list items get full screen heigh)
2.
to align logos vertically simply add padding top value to logodiv.you have to use your eye sight to check whether is it align with signout logo or not.
I'm trying to create a fluid grid layout with different columns. I have one wrapper with 2 50% columns and one wrapper with 4 25% columns. This is working well in all browsers exept safari there is a tiny gab (1 pixel?) after the last column. After adding margin and padding its getting worse, the gab is much bigger and different width when resizing the browser.
I can't find what is causing this behaviour, what am I doing wrong here??
The HTML:
<div id="column2">
<div class="left">left</div>
<div class="right">right</div>
<div class="clear"></div>
</div>
<div id="column4">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="clear"></div>
</div>
CSS (I left out the reset css it's included in the fiddle):
#column2 {
width:84%;
height:auto;
padding-left:8%;
padding-right:8%;
margin-left:auto;
margin-right:auto;
background-color:#FFFFCC;
}
.left {
float:left;
width:50%;
height:100px;
background-color:#FFFF66
}
.right {
float:left;
width:50%;
height:100px;
background-color:#FF9900;
}
#column4 {
width:84%;
height:auto;
padding-left:8%;
padding-right:8%;
margin-left:auto;
margin-right:auto;
background-color:#66FFFF;
}
#column4 .box1, #column4 .box2, #column4 .box3, #column4 .box4{
float:left;
width:22.25%;
height:100px;
padding-left:1%;
padding-right:1%;
margin-left:1%;
}
#column4 .box1 {
background-color: #FF3300;
margin-left:0;
}
.box2 {
background-color: #333399;
}
.box3 {
background-color: #3366FF;
}
.box4 {
background-color: #009900;
}
.clear {
clear:both;
}
I've setup a quick basic fiddle here: http://jsfiddle.net/emmetje/7ttsE/2/
Many thanks in advance for your help!
its not working 100%
but this better : http://jsfiddle.net/7ttsE/4/
<div id="column2">
<div id="spaces">%8</div>
<div class="left">left</div>
<div class="right">right</div>
<div id="spaces">%8</div>
<div class="clear"></div>
</div>
<div id="column4">
<div id="spaces">%8</div>
<div class="box1">box1</div>
<div id="margin"> </div>
<div class="box2">box2</div>
<div id="margin"> </div>
<div class="box3">box3</div>
<div id="margin"> </div>
<div class="box4">box4</div>
<div id="spaces">%8</div>
<div class="clear"></div>
</div>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#spaces {
width:8%;
float:left;
}
#margin {
float:left;
width:1%;
}
#column2 {
width:100%;
height:auto;
margin-left:auto;
margin-right:auto;
background-color:#FFFFCC;
}
.left {
float:left;
width:42%;
height:100px;
background-color:#FFFF66
}
.right {
float:left;
width:42%;
height:100px;
background-color:#FF9900;
}
#column4 {
height:auto;
margin-left:auto;
margin-right:auto;
background-color:#66FFFF;
}
#column4 .box1, #column4 .box2, #column4 .box3, #column4 .box4{
float:left;
width:20.25%;
height:100px;
}
#column4 .box1 {
background-color: #FF3300;
margin-left:0;
}
.box2 {
background-color: #333399;
}
.box3 {
background-color: #3366FF;
}
.box4 {
background-color: #009900;
}
.clear {
clear:both;
}
I can't work out why any object will not go straight under the 3 divs.
Here is the HTML
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>The Trek</title>
</head><body>
<div id="wrap">
<div id="main">
<div id="bucket"><img src="img/golf.png" width="100%"><div id="button">Text</div></div>
<div id="bucket"><img src="img/4wd.png" width="100%"><div id="button">Text</div></div>
<div id="bucket"><img src="img/mara.png" width="100%"><div id="button">Text</div></div>
<p>Text</p>
</div>
</div>
</div>
</body>
</html>
Here is the CSS
*{padding:0px;margin:0px;font-family:geneva;}
body{background-image:url(img/bg.png);background-repeat:repeat;}
#wrap{padding:50px;}
#main{margin:auto;padding:40px; width:900px;height:850px; position:relative;}
#bucket{width:30.2%;float:left; margin-right:40px;height:auto;display:block;}
#main div:last-child{margin-right:0px;}
#button {float:left;width:100%;height:auto;text-decoration:none;text-align:center;color:#eee;width:96.5%;height:100%; background:#633;text-decoration:none; padding:5px; font-size:20px;}
Any help will be appreciated!
First of all you are using the same ID for multiple elements... Change this to a class. An ID must always be unique.
Clearing the floating is one way, but i don't like it as it becomes a bit messy later on.
My suggestion is to wrap your "bucket" elements into a div. This will solve your problem.
EXAMPLE
HTML
<div id="wrap">
<div id="main">
<div id="buckets">
<div class="bucket">
<img src="img/golf.png" width="100%" />
<div class="button">Text</div>
</div>
<div class="bucket">
<img src="img/4wd.png" width="100%" />
<div class="button">Text</div>
</div>
<div class="bucket">
<img src="img/mara.png" width="100%" />
<div class="button">Text</div>
</div>
</div>
<p>Text</p>
</div>
</div>
CSS
* {
padding:0px;
margin:0px;
font-family:geneva;
}
body {
background-image:url(img/bg.png);
background-repeat:repeat;
}
#wrap {
padding:50px;
}
#main {
margin:auto;
padding:40px;
width:900px;
height:850px;
position:relative;
}
.bucket {
width:30.2%;
float:left;
margin-right:40px;
height:auto;
display:block;
}
#main div:last-child {
margin-right:0px;
}
.button {
float:left;
width:100%;
height:auto;
text-decoration:none;
text-align:center;
color:#eee;
width:96.5%;
height:100%;
background:#633;
text-decoration:none;
padding:5px;
font-size:20px;
}
Hope this helps
So there's a few suggestions I'll make about your code first, id="" is only used on a element that is only used once, typically you don't use them, instead use class="" which can be used as many times as needed on a page, you can select this by . instead of # in your CSS. The reason your <p> element was going beside is was because there was room for it next to the 3 <div>. Obviously a quick fix to this could be like #plalx said use clear: both; property but that's just covering up your error and not really fixing it. You could also use display: block on what ever element you want to go below. To really fix this issue you need to make use that the 3 <div> fill the width of it's container. I've cleaned up your code let me know if you have any questions, good luck!
EXAMPLE
HTML
<div class="wrap">
<div class="main">
<div class="bucket">
<img src="http://placehold.it/350x150"/>
<div class="button">Text</div>
</div>
<div class="bucket">
<img src="http://placehold.it/350x150"/>
<div class="button">Text</div>
</div>
<div class="bucket">
<img src="http://placehold.it/350x150"/>
<div class="button">Text</div>
</div>
<p>Text</p>
</div>
</div>
CSS
/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
strong {
font-weight: bold;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
*,*:before,*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-image: url(img/bg.png);
background-repeat: repeat;
font-family: geneva;
}
img {
display: block;
max-width: 100%;
}
.wrap {
padding: 20px;
width: 960px;
}
.main {
margin: 0 auto;
padding: 20px;
}
.bucket {
display: inline-block;
width: 31.33%;
margin-right: 20px;
}
.bucket:last-of-type { margin-right: 0;}
.button {
width:100%;
text-decoration:none;
text-align:center;
color:#eee;
background:#633;
padding:5px;
font-size:20px;
}
It's because you did not cleared the left floating. There are several ways to achieve this, like:
#main p {
clear: both;
}
This will prevent floated elements to the left or right of all p tags withing the #main element.
I'm trying to design a website where everything is contained withing one main div that restricts everything to 85% of the screen width. I am trying to center the outer div, which seems to have worked, and make the inner div (menubar) float to the left. But no matter what I do I can't get it to go to the left of the outer div, it goes all the way to the left of the page. Thanks for any help.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accessorize With Style | Index</title>
<style type="text/css">
body {
overflow:hidden;
}
img.background {
position:absolute;
top:0;
left:0;
width: 100%;
z-index:-1;
}
.menu{
margin:0;
padding:0;
width:300px;
list-style:none;
background:rgb(255,255,255);
}
.menu li{
padding:0;
margin:0 0 1px 0;
height:40px;
display:block;
}
.menu li a{
text-align:left;
height:40px;
padding:0px 25px;
font:16px Verdana, Arial, Helvetica, sans-serif;
color:rgb(255,255,255);
display:block;
background:url('images/verMenuImages.png') 0px 0px no-repeat;
text-decoration:none;
}
.menu li a:hover{
background:url('images/verMenuImages.png') 0px -40px no-repeat;
color:rgb(0,0,0);
}
.menu li a.active, .menu li a.active:hover{
background:url('images/verMenuImages.png') 0px -80px no-repeat;
color:rgb(255,255,255);
}
.menu li a span{
line-height:40px;
}
#site {
width:85%;
}
</style>
</head>
<body>
<img src="images/background.jpg" class="background" />
<div id="site" align="center">
<div id="menubar" align="left">
<ul class="menu">
<li><span>Home</span></li>
<li><span>About</span></li>
<li><span>Necklaces</span></li>
<li><span>Bracelets</span></li>
<li><span>Earings</span></li>
<li><span>Rings</span></li>
<li><span>Scarves</span></li>
<li><span>Contact</span></li>
</ul>
</div>
<div id="gallery" align="center">
</div>
</div>
</body>
</html>
In your CSS, add
#menubar {
position: relative;
left: 0px;
}
and remove the inline CSS:
<div id="menubar">
You might want to use HTML5 notation.
Live Demo
HTML
<main>
<aside>Menu</aside>
<section>
<article>Content</article>
</section>
</main>
CSS
html {
background-color:black;
}
main {
background-color:red;
width:85%;
height:400px;
margin: 0 auto;
padding:4px;
}
aside {
width:20%;
height:90%;
margin-top:5%;
background-color:blue;
color:white;
clear:left;
display:inline-block;
}
section {
display:inline-block;
background-color:green;
padding:4px;
}
article {
background-color:#F60;
}
My issue is that when I zoom in or out of the page (in all the browsers I tried), only some parts of it are displayed as zoomed (the contents that are in the divs, but not the divs themselves). I put the borders to show it easily.
When I searched for a solution, all of them mentioned that it is because of fixed width values by using pixels (px). So, I used % when putting values to width and height; but still, the issue remains...
Here are some screenshots to illustrate my problem:
When zoomed-in:
When zoomed-out:
Here is my code:
HTML:
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="title_bar">
some txt here
<div id="title_img"></div>
<div id="title_txt"></div>
<div id="menu_navigation"></div>
</div>
<div id="title_bar_2">
some txt here
</div>
<div id="container_columns">
<div id="column_1">
<span id="column_1_content">some txt here</span>
</div>
<div id="column_2">
<span id="column_2_content">some txt here</span>
</div>
</div>
</body>
</html>
CSS:
html body
{
margin: 0;
width: 100%;
height: 100%;
background-color:#f2f2f2;
}
div#title_bar
{
height:4%;
width:76%;
margin:auto;
margin-top:4%;
border-style:solid;
border-color:blue;
}
div#title_bar_2
{
text-align:center;
height:44%;
width:76%;
margin:auto;
margin-top:2%;
border-style:solid;
border-color:blue;
}
div#title_bar img
{
margin-top:1%;
float:left;
}
div#title_txt
{
float:left;
margin-left:2%;
margin-top:1.4%;
font-style: italic;
font-family:verdana;
font-size: 16px;
}
div#menu_navigation
{
float:left;
margin-left:35%;
margin-top:1.4%;
font-size:19px;
}
div#container_columns
{
margin:auto;
width:76.5%;
margin-top:2%;
height:27%;
border-style:solid;
border-color:blue;
}
div#column_1
{
height:100%;
width:49%;
float:left;
border-style:solid;
border-color:blue;
}
div#column_2
{
margin-left:1%;
width:48%;
float:left;
height:100%;
}
Hi This is happening because you are using the property height. try not to use it, if you want this property.
html body{
margin: 0;
width: 100%;
background-color:#f2f2f2;}
div#title_bar{
width:76%;
margin:auto;
margin-top:4%;
border-style:solid;
border-color:blue;}
div#title_bar_2{
text-align:center;
width:76%;
margin:auto;
margin-top:2%;
border-style:solid;
border-color:blue;}
div#title_bar img{
margin-top:1%;
float:left;}
div#title_txt{
float:left;
margin-left:2%;
margin-top:1.4%;
font-style: italic;
font-family:verdana;
font-size: 16px;}
div#menu_navigation{
float:left;
margin-left:35%;
margin-top:1.4%;
font-size:19px;}
div#container_columns{
margin:auto;
width:76.5%;
margin-top:2%;
border-style:solid;
border-color:blue;
display:block;}
div#column_1{
width:48%;
float:left;
border-style:solid;
border-color:blue;}
div#column_2{
margin-left:1%;
width:48%;
float:left;}