FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Help me in CSS

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


barryforever
Guys i have installed Joomla and my template looks great ..
but there is one issue about the template..

The menu table at the left hand top part which containing home,search,Knowledgebase, have a little space left towards the left of the table ..

I want to make it more compact so that my content pane looks wider.
Its written in Css I do have a little knowledge in Css can some one help me edit these CSses for me

www.blazeout.frih.net
CyanEyed
im not an expert but i think if u specify 0% padding on the left it should do the trick.

i cant remember the exact syntax for it but http://www.w3schools.com/ should help.

EDIT::: The page with the exact syntax is here: http://www.w3schools.com/css/pr_padding-left.asp

hope it helps,

CyanEyed
the6thfactor
As I am unfamiliar with the Joomla code, is there anyway you could post the area of CSS that involves those links? So that we could take a look? I believe it could be padding like cyaneyed said but we can be sure if we look at the code. Thanks Smile
barryforever
Thank YOu for your Help This is the Code
this is the Default Code :

Code:
/* custom stuff */

html {
  height: 100%;
  margin-bottom: 1px;
}

.clr {
  clear: both;
}

td.columnpad {
  padding-left: 15px;
}

body {
   margin: 0;
  padding: 0;
   height: 100%;
}

body.grey {
     background: #fff;
}

td,tr,p,div {
   font-family: Tahoma, Arial, Helvetica, sans-serif;
   font-size: 12px;
   line-height: 1.45em;
   color: #333333;
}

td {
   text-align: left;
}

div.show {
   visibility: visible;
   white-space: nowrap;
}

div.mosimage {
   margin: 0 5px;
}

div.mosimage_caption {
  background: #efefef;
  color: #999999;
  font-size: 11px;
}


#wrapper {
  min-width: 750px;
  max-width: 1050px;
  width: expression(document.body.clientWidth > 1050? "1050px": "auto" );
}

#padding {
   float: left;
   padding: 0 15px;
}

#center {
   margin: auto;

}

div#header1 {
   width: 100%;
   float: left;
   margin-top: 17px;
}

div#header2 {
   width: 100%;
   float: left;
}

div#header3 {
   width: 100%;
   float: left;
}

div#header4 {
   width: 100%;
   float: left;
}

#logo {
   float: left !important;
   float: none;
   width: 100%;
}

#search {
   position: relative;
     float: right;
   padding: 13px 0px;
   padding-right: 20px;
 
}

#search input {
   width: 150px;
}

#header_bottom {
   position: relative;
   float: right;
   clear: right;
   width: 100%;
}

#content {
   float: left;
   width: 100%;
   margin-top: 12px;

}

td.left {
   padding-right: 15px;
}

td.right {
   padding-left: 15px;
}

#footer {
   margin: 20px;
}

#footer div {
   font-size: 90%;
   color: #999;
}


a.mainlevel {
   display: block;
   background: url(../images/dm_underline.png) bottom left repeat-x;
   line-height: 20px;
   padding: 2px 0px;
   padding-left: 15px;
}


ul#mainlevel a.mainlevel {
  background: none;
  padding: 0 10px;
}

a.sublevel {
   padding: 4px !important;
   padding: 0px;
   font-size: 90%;
}

ul#mainlevel {
  margin: -7px -9px 0px -9px;
  list-style-type: none;
}

ul#mainlevel li {
  background: url(../images/dm_underline.png) bottom left repeat-x;
  height: 22px;
  padding-left: 0px;
}

ul#mainlevel li a {
  display: block;
  font-size: 11px;
  line-height: 20px;
  padding-left: 20px;
}

ul#mainlevel li a:hover {
  background: #ffffff;
}

/* module stuff */

div.module-color h3, div.module-color td.contentheading {
   margin: 0;
   padding: 0;
   height: auto;
}

div.module, div.module-color, div.module-menu {
   margin-bottom: 20px;
}

div.module-color, div.module-menu {
  border: 0px solid #00f;
}

div.module-color div, div.module-menu div {}

div.module-color div div, div.module-menu div div {
 width: 100%;
}

div.module-color div div div, div.module-menu div div div {
   padding: 10px;
   width: auto;
}

div.module-color div div div div, div.module-menu div div div div {
   background: none;
   padding: 0;
}

div.module-menu div div div {
   padding: 10px 0px;
}

div.module-menu table {
   padding-top: 2px;
}

div.module-menu h3 {
   padding-left: 15px;
   margin: 0;
   background: none;
}


div.module-menu table td {
   padding: 0;

}

div.module-menu a.mainlevel {
   display: block;
   height: 30px;
   padding: 0;
   padding-left: 15px;
   line-height: 30px;
}

div.module-menu a.mainlevel:hover {
   background-position: 0 -30px;
}


/* heading */

h1, div.componentheading, td.componentheading {
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
  font-size: 200%;
  line-height: 200%;
}

h3, .contentheading, table.moduletable th  {
  margin: 0;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 160%;
  line-height: 160%;
  color: #333;
  font-weight: normal;
  background: url(../images/dm_underline.png) bottom left repeat-x;
  margin-bottom: 10px;
}

table.moduletable td {
   padding-top: 10px;
}
table.moduletable {
  margin-bottom: 15px;
}

.box#right h3 {
   background: none;
   font-weight: bold;
   font-size: 100%;
   line-height: 24px;
   font-family: Verdana, Helvetica, sans-serif;
   color: #fff;
}

.contentheading {
   height: 50px;
   vertical-align: bottom;
}

.pagenav {
   text-align: center;
   border: 1px solid #cccccc;
   padding: 5px;
}

td.sectiontableheader {
   background: #efefef;
   padding: 2px;
   font-size: 110%;
   font-weight: bold;
}

td.sectiontablefooter {
   padding: 10px;
   text-align: center;

}

.poll {
   padding: 0px;
   margin: 0px;
}

table.pollstableborder {
   border: 0px;
   margin: 0px;
   padding: 0px;
   border-collapse: collapse;
}

td.sectiontableentry1 {
  padding: 2px;

}

td.sectiontableentry2 {
  padding: 2px;
}

tr.sectiontableentry1 td {
  padding-left: 4px;
  padding-right: 4px;
}

tr.sectiontableentry2 td {
  padding-left: 4px;
  padding-right: 4px;
}

tr.sectiontableentry1 {
   background: #fcfcfc;
}

tr.sectiontableentry2 {
   background: #f6f6f6;
}

span.highlight {
   background: #ffff66;
}

/*  ***************************** */


table td.smallpadding {
  padding: 1px;
}


span.pathway {
  display: block;
  font-weight: normal;
  line-height: 20px;
  height: 20px;
}



/* required stuff */

#content-pane .tab-page {
   
}

table.contentpane {
   text-align: left;
   width: 100%;
   padding: 0px;
   margin: 0px;
   border-collapse: collapse;
}

table.contentpaneopen {
   text-align: left;
   width: 100%;
   padding: 0px;
   margin: 0px;
   border-collapse: collapse;
}


.small {
  font-family: Verdana, Helvetica, sans-serif;
   font-size: 10px;
   color: #666666;
   font-weight: normal;
   text-align: left;
}

.modifydate {
  font-family: Verdana, Helvetica, sans-serif;
   font-size: 10px;
   color: #666666;
   font-weight: normal;
   padding-top: 8px;
   padding-bottom: 10px;
   text-align: left;
}

.createdate {
  font-family: Verdana, Helvetica, sans-serif;
   line-height: 11px;
   font-size: 10px;
   color: #666666;
   font-weight: normal;
   vertical-align: top;
   padding-bottom: 10px;
   padding-top: 0px;

}

.readon {

}

/* For content item titles that are hyperlink instead of Read On */
a.contentpagetitle:link, a.contentpagetitle:visited {
     padding-top: 5px;
   font-size: 18px;
    font-weight: normal;
   text-align: left;
   width: 100%;
}

a.contentpagetitle:hover {

}

a:link, a:visited {
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  font-weight: bold;
  text-decoration: none;
}

a.category:link, a.category:visited {

}

a.category:hover {

}

a.pagenav, a.pagenav:visited {

}

a.pagenav:hover {

}

.frontpageheader {
   color: #ffffff;
   font-size: 15px;
   font-weight: bold;
   line-height: 30px;
}

.newsfeedheading {
   font-size: 11px;
   font-weight: bold;
   color: #333333;
   text-align:left;
}

.newsfeeddate {

}

.fase4rdf a:link {

}

.fase4rdf a:hover {

}

ul
{
 margin: 0;
 padding-left: 2em;
}

ul li
{
   margin: 0;
   
}


.button {

}

.inputbox {
  font-size: 11px;
  font-family: Verndana, Arial, Helvetica, sans-serif;

}

/* ---------------- unedited below here ----------------------*/

/* Styles for dhtml tabbed-pages */
.ontab {
   background-color: #121A1D;
   border-left: outset 1px #9DA6B3;
   border-right: outset 1px #9DA6B3;
   border-top: outset 1px #9DA6B3;
   border-bottom: solid 0px #ffffff;
   text-align: center;
   cursor: pointer;
   font-weight: normal;
   color: #ff6600;
}
.offtab {
   background-color: #25343B;
   border-left: outset 1px #9DA6B3;
   border-right: outset 1px #9DA6B3;
   border-top: outset 1px #9DA6B3;
   border-bottom: solid 1px #9DA6B3;
   text-align: center;
   cursor: pointer;
   font-weight: normal;
   color: #cccccc;
}

.tabpadding {
}

.tabheading {
   background-color: #eeeeee;
   text-align: left;
}

.pagetext {
   visibility: hidden;
   display: none;
   position: relative;
   top: 0;
}

h4 {

}

h5 {

}

h6 {

}

/* Horizontal Line */
hr {
   background: #999999; height:1px; border: 1px solid;
}

hr.separator {

}


/* Content - Sections & Categories */
table.contenttoc {
  margin-left: 5px;
  margin-bottom: 5px;
   border: solid 1px #cccccc;
   padding: 10px;

}

table.contenttoc th {
  color: #666666;
  font-weight: bold;

  text-align: left;
  padding: 2px;
}

table.contenttoc td {
   padding: 2px;
}

.contentdescription {
   text-align: left;
}

/** polls and search results **/


.smalldark {
   font-size: 11px;
   color: #333333;
   text-decoration: none;
   font-weight: normal;
}


.pagenav {
   display:block;
   float: left;
   margin-top:10px;
   margin-bottom: 10px;
   margin-right: 4px;
   font-weight: bold;
}

.pagenavbar {

}

/* Content voting */
.content_rating {
   font-weight: normal;
   font-size: 8pt;
}

.content_vote {
   font-weight: normal;
   font-size: 8pt;
}

/* Javascript Back button */
.back_button {
   text-align: center;
   margin-top: 40px;
   margin-bottom: 10px;
}

strong {
   color: #333333;
}


/* SuckerFish Menus Default */

#nav {
  text-align:right;
  float: right;
   padding-right: 20px;
}
#nav ul {
  margin:0;
  padding: 0;
  list-style:none;
}

/* top level links */


#nav li {
   float:right;
   margin:0;
   margin-left:2px;
   padding:0 0 0 6px;
}

#nav a {
   float:left;
   font-size: 11px;
   display:block;
   line-height: 28px;
   padding: 0px 25px 0px 20px;
   text-decoration:none;
}

div#nav li.active {}

div#nav li.active a {}

div#nav li.active:hover a {
   color: #333;

}

/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#nav a {float:none;}
/* End IE5-Mac hack */




mathiaus wrote:

Please use the code BBCode tags when pasting large amounts of code.
Code:
[code][/code]

the6thfactor
OK the more I look at your post I'm a little confused at what you're asking.

If you're talking about the little white space between the links Home, Blog, Search, etc. and the left side of the table, that can be fixed by doing this:

Code:
a.mainlevel {
display: block;
background: url(../images/dm_underline.png) bottom left repeat-x;
line-height: 20px;
padding: 2px 0px;
padding-left: 15px;
}


Remove the line:
padding-left: 15px;


If that wasn't what you were talking about, let me know and I'll take a better look. Hope that helps.



mathiaus wrote:

Please use the code BBCode tags when pasting large amounts of code.
Code:
[code][/code]

barryforever
You are almost close to what i asked you ....
Im talking about the right hand side of the Home ,search , Knowledge base ...
There are a lot of spaces left towards the right of these letters(within the main menu) can u see..
If you are able to understand then that is the thing you need to correct make that width of table which contains the main menu smaller
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.