...

View Full Version : Resolved Layout Issues



bzilbe1
07-29-2011, 04:29 PM
Hey all, I hope someone can help me out here. Been trying to figure this out and having trouble. Complete newbie and learning how to code css on the fly. My Current website is http://wgic.cloudaccess.net . What I want is to have a logo and space for menu bar to be where a header would usually go, side by side. I would like their height to be bigger too, but anytime i seem to change the height it either does nothing or sends everything else going amuck. Also, i want the container to be the widths specified, but expandable and viewable on any resolution (which i currently think i have unless i mux with the code trying to accomplish the above. Below is the code i curently have. Any help is greatly appreciated.



* {
padding: 0;
margin: 0;
}

img {
border: 0;
}

html, body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3em;
margin: 0;
padding: 0;
font-size: 13px;
color: #0F0F0F;
height: 100%;
background-image:url('../images/body_bg.jpg');
background-repeat:no-repeat;
background-position:right top;
}

a:link, a:visited {
text-decoration: underline;
font-weight: normal;
color: #000;
outline: none;
text-align: left;
}

.float {
float: left;
}

.clear {
clear: both;
}

.overall {
background-color: #fff;
}

div.center {
text-align: center;
margin: 0px auto 0 auto;
padding: 0;
width: 950px;
}

#container {
position:relative;
margin:0 auto;
width:960px;
height: auto !important;
height: 100%;
min-height:100%;
text-align: left;
}

#top_logo {
text-align: center;
height: 98% 10px no-repeat;
width:250px;
}

#header {
text-align: center;
height: 98% 10px no-repeat;
width:700px;
}

#content {
width: 598px;
text-align: left;
padding: 5px;
}

#sidebar_left {
text-align: center;
width: 165px;
padding: 5px;
}

#sidebar_right {
text-align: center;
width: 165px;
padding: 5px;
}

#footer {
position:absolute;
width:100%;
bottom:0;
text-align:center;
padding: 5px;
}


Index.php file


<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!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"
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/wgic3/css/template.css" type="text/css" />
</head>

<body>
<div id="container">
<div id="top_logo"> <jdoc:include type="modules" name="logo" /> </div>
<div id="header"> <jdoc:include type="modules" name ="top" /> </div>
<div id="sidebar_left" class="float"> <jdoc:include type="modules" name="left" /> </div>
<div id="content" class="float"> <jdoc:include type="component" /> </div>
<div id="sidebar_right" class="float"> <jdoc:include type="modules" name="right" /> </div>
<div id="footer" class="clear"> <jdoc:include type="modules" name="footer" /> </div>
</div>
</body>

</html>

Sammy12
07-29-2011, 06:36 PM
http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-44.png

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-45.png

bzilbe1
07-29-2011, 08:14 PM
thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum