Forum:

HTML Pages with CSS and JavaScript

CSS issue in Grails app, but question is on CSS

Mark Spritzler

ranger

Posts: 17347

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I did something and now my CSS doesn't quite work. I know that is vague.

Here is my issue. The body section for my list, edit, view, etc methods have the forms at the bottom of the page, not to the right of my left side menu.

So the typical header and footer, with a left menu and details to the right of the left menu. But instead the details is showing at the bottom of the page.

Here is my main.gsp

<calendar:resources lang="en" theme="blue"/>
<link rel="stylesheet" href="${resource(dir: 'css/ui-lightness', file: 'jquery-ui-1.8.custom.css')}"/>
<script type="text/javascript" src="${resource(dir: 'js', file: 'jquery/jquery-ui-1.8.1.custom.min.js')}"></script>
<html>
<head>
  <g:render template="/templates/headerTemplate" />
</head>
<body>
  <div class="panelTop">
    <div id="spinner" class="spinner" style="display:none;">
      <img   />
    </div>
    <div id="grailsLogo" class="logo">
      <a href="http://grails.org" rel="nofollow"><img   border="0" /></a>
    </div>
  </div>
  <div id="nav">
    <div class="homePagePanel">
      <div class="panelBody">
        <g:isNotLoggedIn>
          <g:render template="/templates/leftNavNotLoggedIn" />
        </g:isNotLoggedIn>
        <g:ifAllGranted role="ROLE_BAND">
          <g:render template="/templates/leftNavLoggedInTemplate" />
        </g:ifAllGranted>
        <g:ifAllGranted role="ROLE_ADMIN">
          <g:render template="/templates/leftNavAdminTemplate" />
        </g:ifAllGranted>
      </div>
    </div>
  </div>
  <g:layoutBody />
  <div class="panelBtm">
    <g:render template="/templates/footerTemplate" />
  </div>
</body>
</html>

And here is a page that supplies the layoutBody for a list of news.

<%@ page import="com.perfectworldprogramming.bandapp.band.news.News" %>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="layout" content="main" />
  <g:set var="entityName" value="${message(code: 'news.label', default: 'News')}" />
  <title><g:message code="default.list.label" args="[entityName]" /></title>
</head>
<body>
  <div class="nav">
    <span class="menuButton"><g:link class="create" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link></span>
  </div>
  <div class="pageBody">
    <h1><g:message code="default.list.label" args="[entityName]" /></h1>
    <g:if test="${flash.message}">
      <div class="message">${flash.message}</div>
    </g:if>
    <div class="list">
      <table>
         <thead>
         <tr>
           <g:sortableColumn property="title" title="${message(code: 'news.title.label', default: 'Title')}" />
           <g:sortableColumn property="shortDescription" title="${message(code: 'news.shortDescription.label', default: 'Short Description')}" />
           <g:sortableColumn property="newsDate" title="${message(code: 'news.newsDate.label', default: 'News Date')}" />
         </tr>
         </thead>
         <tbody>
         <g:each in="${newsInstanceList}" status="i" var="newsInstance">
           <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
             <td ><g:link action="show" id="${newsInstance.id}">${fieldValue(bean: newsInstance, field: "title")}</g:link></td>
             <td >${fieldValue(bean: newsInstance, field: "shortDescription")}</td>
             <td><g:formatDate date="${newsInstance.newsDate}" /></td>
           </tr>
         </g:each>
         </tbody>
       </table>
    </div>
    <div class="paginateButtons">
      <g:paginate total="${newsInstanceTotal}" />
    </div>
  </div>
</body>
</html>

I'll put the css in another post to this thread, so if you don't want to look at it, skip the next post.

Thanks

Mark

Perfect World Programming, LLC - iOS Apps
How to Ask Questions the Smart Way FAQ

Mark Spritzler

ranger

Posts: 17347

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

My CSS

main.css

html * {
    margin: 0;
    /*padding: 0; SELECT NOT DISPLAYED CORRECTLY IN FIREFOX */
}

/* GENERAL */

.spinner {
    padding: 5px;
    position: absolute;
    right: 0;
}

body {
    background: #fff;
    color: #333;
    font: 11px verdana, arial, helvetica, sans-serif;
}
#grailsLogo {
	padding:20px;
}

a:link, a:visited, a:hover {
    color: #666;
    font-weight: bold;
    text-decoration: none;
}

h1 {
    color: #48802c;
    font-weight: normal;
    font-size: 16px;
    margin: .8em 0 .3em 0;
}

ul {
    padding-left: 15px;
}

input, select, textarea {
    background-color: #fcfcfc;
    border: 1px solid #ccc;
    font: 11px verdana, arial, helvetica, sans-serif;
    margin: 2px 0;
    padding: 2px 4px;
}
select {
   padding: 2px 2px 2px 0;
}
textarea {
	width: 250px;
	height: 150px;
	vertical-align: top;
}

input:focus, select:focus, textarea:focus {
    border: 1px solid #b2d1ff;
}

.body {
    float: left;
    margin: 0 15px 10px 15px;
}

/* NAVIGATION MENU */

.nav {
    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
    border: 1px solid #ccc;
    border-style: solid none solid none;
    margin-top: 5px;
    padding: 7px 12px;
    height: 15px;
}

.menuButton {
    font-size: 10px;
    padding: 0 5px;
}
.menuButton a {
    color: #333;
    padding: 4px 6px;
}
.menuButton a.home {
    background: url(../images/skin/house.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}
.menuButton a.list {
    background: url(../images/skin/database_table.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}
.menuButton a.create {
    background: url(../images/skin/database_add.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}

/* MESSAGES AND ERRORS */

.message {
    background: #f3f8fc url(../images/skin/information.png) 8px 50% no-repeat;
    border: 1px solid #b2d1ff;
    color: #006dba;
    margin: 10px 0 5px 258;
    padding: 5px 5px 5px 30px;
}

div.errors {
    background: #fff3f3;
    border: 1px solid red;
    color: #cc0000;
    margin: 10px 0 5px 258;
    padding: 5px 0 5px 0;
}
div.errors ul {
    list-style: none;
    padding: 0;
}
div.errors li {
	background: url(../images/skin/exclamation.png) 8px 0% no-repeat;
    line-height: 16px;
    padding-left: 30px;
}

td.errors select {
    border: 1px solid red;
}
td.errors input {
    border: 1px solid red;
}

/* TABLES */

table {
    border: 1px solid #ccc;
    width: 100%
}
tr {
    border: 0;
}
td, th {
    font: 11px verdana, arial, helvetica, sans-serif;
    line-height: 12px;
    padding: 5px 6px;
    text-align: left;
    vertical-align: top;
}
th {
    background: #fff url(../images/skin/shadow.jpg);
    color: #666;
    font-size: 11px;
    font-weight: bold;
    line-height: 17px;
    padding: 2px 6px;
}
th a:link, th a:visited, th a:hover {
    color: #333;
    display: block;
    font-size: 10px;
    text-decoration: none;
    width: 100%;
}
th.asc a, th.desc a {
    background-position: right;
    background-repeat: no-repeat;
}
th.asc a {
    background-image: url(../images/skin/sorted_asc.gif);
}
th.desc a {
    background-image: url(../images/skin/sorted_desc.gif);
}

.odd {
    background: #f7f7f7;
}
.even {
    background: #fff;
}

/* LIST */

.list table {
    border-collapse: collapse;
    width: 79%;
}
.list th, .list td {
    border-left: 1px solid #ddd;
}
.list th:hover, .list tr:hover {
    background: #b2d1ff;
}

/* PAGINATION */

.paginateButtons {
    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
    border: 1px solid #ccc;
    border-top: 0;
    color: #666;
    font-size: 10px;
    overflow: hidden;
    padding: 10px 3px;
}
.paginateButtons a {
    background: #fff;
    border: 1px solid #ccc;
    border-color: #ccc #aaa #aaa #ccc;
    color: #666;
    margin: 0 3px;
    padding: 2px 6px;
}
.paginateButtons span {
    padding: 2px 3px;
}

/* DIALOG */

.dialog table {
    padding: 5px 0;
}

.prop {
    padding: 5px;
}
.prop .name {
    text-align: left;
    width: 15%;
    white-space: nowrap;
}
.prop .value {
    text-align: left;
    width: 40%;
}

/* ACTION BUTTONS */

.buttons {
    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
    border: 1px solid #ccc;
    color: #666;
    font-size: 10px;
    margin-top: 5px;
    overflow: hidden;
    padding: 0;
}

.buttons input {
    background: #fff;
    border: 0;
    color: #333;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
    margin-left: 3px;
    overflow: visible;
    padding: 2px 6px;
}
.buttons input.delete {
    background: transparent url(../images/skin/database_delete.png) 5px 50% no-repeat;
    padding-left: 28px;
}
.buttons input.edit {
    background: transparent url(../images/skin/database_edit.png) 5px 50% no-repeat;
    padding-left: 28px;
}
.buttons input.save {
    background: transparent url(../images/skin/database_save.png) 5px 50% no-repeat;
    padding-left: 28px;
}

template.css

#nav {
    margin-top: 40px;
    margin-left: 30px;
    width: 228px;
    float: left;
    height: 100%;
}

.homePagePanel * {
    margin: 0px;
}

.homePagePanel .panelBody ul {
    list-style-type: none;
    margin-bottom: 10px;
}

.homePagePanel .panelBody h1 {
    text-transform: uppercase;
    font-size: 1.1em;
    margin-bottom: 10px;
}

.homePagePanel .panelBody {
    background: url(images/leftnav_midstretch.png) repeat-y top;
    margin: 0px;
    padding: 15px;
}

.homePagePanel .panelBtm {
    background: url(images/leftnav_btm.png) no-repeat top;
    height: 20px;
    margin: 0px;
}

.homePagePanel .panelTop {
    background: url(images/leftnav_top.png) no-repeat top;
    height: 11px;
    margin: 0px;
}

h2 {
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 1.2em;
}

#pageBody {
    margin-left: 280px;
    margin-right: 20px;
    margin-bottom: 40px;
}

#sampleImage {
    display: inline;
}

#sampleImage img {
    margin-top: 20px;
    margin-right: 20px;
    width: 155px;
    height: 230px;
}

.dataImage {
    padding: 5px;
    display: inline;
    width: 60px;
    height: 60px;
}

.cdImage {
    padding: 5px;
    display: inline;
    width: 60px;
    height: 25px;
}

/*dataImage .td img{
    padding: 5px;
    *//*display: inline;*//*
    width: 15px;
    height: 15px;
}*/

#copyright {
    text-align: center;
}

Thanks

Mark

Perfect World Programming, LLC - iOS Apps
How to Ask Questions the Smart Way FAQ

Mark Spritzler

ranger

Posts: 17347

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I moved this from the Groovy/Grails forum, to see if you CSS experts can see what might be wrong with my css. Just ignore that the file type is .gsp, it is just like a .jsp page and CSS all works exactly the same.

Thanks

Mark

Perfect World Programming, LLC - iOS Apps
How to Ask Questions the Smart Way FAQ

Mark Spritzler

ranger

Posts: 17347

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Not that anyone cares.

After 6 months of trying to solve this, I finally solved it.

Basically my table had

table {
border: 1px solid #ccc;
width: 100%
}

I changed the width to 79% and now it works.

Mark

Perfect World Programming, LLC - iOS Apps
How to Ask Questions the Smart Way FAQ