3 replies [Last post]
apvit
apvit's picture
Offline
newbie
Last seen: 1 week 4 days ago
Timezone: GMT-6
Joined: 2019-11-17
Posts: 3
Points: 4

Hi All,

I am using a free css template on my site www.rheumatologymindmap.com and being a very basic user I cannot understand how to either move the words "Rheumatology Mind Map" slightly up, or reduce the height of the top puzzle picture, so everything will look more harmonic. I feel this is something extremely basic but I try and can't understand the css code. Is there any chance to help me please? Here are three css files I have in this template, I separated them with double lines:

=============================================================================
grid.css
===============
 
/*
Variable Grid System.
Learn more ~ <a href="http://www.spry-soft.com/grids/
Based" rel="nofollow">http://www.spry-soft.com/grids/
Based</a> on 960 Grid System - <a href="http://960.gs/
 
Licensed" rel="nofollow">http://960.gs/
 
Licensed</a> under GPL and MIT.
*/
 
/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
margin-left: auto;
margin-right: auto;
width: 960px;
}
 
/* Grid >> Global
----------------------------------------------------------------------------------------------------*/
 
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display:inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
}
 
/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
 
.alpha {
margin-left: 0;
}
 
.omega {
margin-right: 0;
}
 
/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/
 
.container_12 .grid_1 {
width:60px;
}
 
.container_12 .grid_2 {
width:140px;
}
 
.container_12 .grid_3 {
width:220px;
}
 
.container_12 .grid_4 {
width:300px;
}
 
.container_12 .grid_5 {
width:380px;
}
 
.container_12 .grid_6 {
width:460px;
}
 
.container_12 .grid_7 {
width:540px;
}
 
.container_12 .grid_8 {
width:620px;
}
 
.container_12 .grid_9 {
width:700px;
}
 
.container_12 .grid_10 {
width:780px;
}
 
.container_12 .grid_11 {
width:860px;
}
 
.container_12 .grid_12 {
width:940px;
}
 
/* Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
 
.container_12 .prefix_1 {
padding-left:80px;
}
 
.container_12 .prefix_2 {
padding-left:160px;
}
 
.container_12 .prefix_3 {
padding-left:240px;
}
 
.container_12 .prefix_4 {
padding-left:320px;
}
 
.container_12 .prefix_5 {
padding-left:400px;
}
 
.container_12 .prefix_6 {
padding-left:480px;
}
 
.container_12 .prefix_7 {
padding-left:560px;
}
 
.container_12 .prefix_8 {
padding-left:640px;
}
 
.container_12 .prefix_9 {
padding-left:720px;
}
 
.container_12 .prefix_10 {
padding-left:800px;
}
 
.container_12 .prefix_11 {
padding-left:880px;
}
 
/* Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
 
.container_12 .suffix_1 {
padding-right:80px;
}
 
.container_12 .suffix_2 {
padding-right:160px;
}
 
.container_12 .suffix_3 {
padding-right:240px;
}
 
.container_12 .suffix_4 {
padding-right:320px;
}
 
.container_12 .suffix_5 {
padding-right:400px;
}
 
.container_12 .suffix_6 {
padding-right:480px;
}
 
.container_12 .suffix_7 {
padding-right:560px;
}
 
.container_12 .suffix_8 {
padding-right:640px;
}
 
.container_12 .suffix_9 {
padding-right:720px;
}
 
.container_12 .suffix_10 {
padding-right:800px;
}
 
.container_12 .suffix_11 {
padding-right:880px;
}
 
/* Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
 
.container_12 .push_1 {
left:80px;
}
 
.container_12 .push_2 {
left:160px;
}
 
.container_12 .push_3 {
left:240px;
}
 
.container_12 .push_4 {
left:320px;
}
 
.container_12 .push_5 {
left:400px;
}
 
.container_12 .push_6 {
left:480px;
}
 
.container_12 .push_7 {
left:560px;
}
 
.container_12 .push_8 {
left:640px;
}
 
.container_12 .push_9 {
left:720px;
}
 
.container_12 .push_10 {
left:800px;
}
 
.container_12 .push_11 {
left:880px;
}
 
/* Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
 
.container_12 .pull_1 {
left:-80px;
}
 
.container_12 .pull_2 {
left:-160px;
}
 
.container_12 .pull_3 {
left:-240px;
}
 
.container_12 .pull_4 {
left:-320px;
}
 
.container_12 .pull_5 {
left:-400px;
}
 
.container_12 .pull_6 {
left:-480px;
}
 
.container_12 .pull_7 {
left:-560px;
}
 
.container_12 .pull_8 {
left:-640px;
}
 
.container_12 .pull_9 {
left:-720px;
}
 
.container_12 .pull_10 {
left:-800px;
}
 
.container_12 .pull_11 {
left:-880px;
}
 
/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
 
/* <a href="http://sonspring.com/journal/clearing-floats" rel="nofollow">http://sonspring.com/journal/clearing-floats</a> */
 
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
 
/* <a href="http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack" rel="nofollow">http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack</a> */
 
.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
 
.clearfix {
display: inline-block;
}
 
* html .clearfix {
height: 1%;
}
 
.clearfix {
display: block;
}
 
==================================================================================
reset.css
=====================
 
a, abbr, acronym, address, applet, article, aside, audio,
b, blockquote, big, body,
center, canvas, caption, cite, code, command,
datalist, dd, del, details, dfn, dl, div, dt,
em, embed,
fieldset, figcaption, figure, font, footer, form,
h1, h2, h3, h4, h5, h6, header, hgroup, html,
i, iframe, img, ins,
kbd,
keygen,
label, legend, li,
meter,
nav,
object, ol, output,
p, pre, progress,
q,
s, samp, section, small, span, source, strike, strong, sub, sup,
table, tbody, tfoot, thead, th, tr, tdvideo, tt,
u, ul,
var{
background: transparent;
border: 0 none;
font-size: 100%;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top; }
 
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
table, table td {
padding:0;
border:none;
border-collapse:collapse;
}
img {
vertical-align:top;
}
embed {
vertical-align:top;
}
 
=================================================================================
style.css
=====================
 
body {
background:#EEEEEE;
color: #696969;
font-family: Arial;
font-size: 13px;
font-style: normal;
letter-spacing: 0;
line-height: 22px;
}
#wrapper {
background-color: #FFFFFF;
margin: 0 auto;
width: 980px;
}
a, a:visited {
color: #709B80;
text-decoration: none;
}
a:hover {
color: #336666;
text-decoration: underline;
}
a img {
border: medium none;
}
.imgborder {
border: 1px solid #CCCCCC;
border-radius: 7px 7px 7px 7px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
padding: 2px;
}
a:focus, a:hover, a:active {
outline: medium none;
}
h1, h2, h3, h4, h5, h6 {
color: #336666;
font-family: Times New Roman;
font-weight: bold;
margin: 0 0 5px;
padding: 0;
text-decoration: none;
}
h1 {
font-size: 32px;
line-height: 34px;
}
h2 {
font-size: 24px;
line-height: 1.3em;
}
h2 a, h2 a:visited {
color: #444444;
text-decoration: none;
}
h2 a:hover {
color: #CC3300;
text-decoration: none;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 16px;
}
h6 {
font-size: 14px;
}
p {
margin: 0;
padding: 0 0 10px;
}
ul {
list-style-type: square;
margin: 0;
padding: 0 0 15px;
}
ul li {
list-style-type: square;
margin: 0 0 0 20px;
padding: 0;
}
ul ul {
list-style-type: square;
margin: 0;
padding: 0;
}
ol {
margin: 0;
padding: 0 0 15px;
}
ol li {
margin: 0 0 0 20px;
padding: 0;
}
ol ol {
margin: 0;
padding: 0;
}
#header {
margin: 0 auto;
padding: 0;
}
#header .inner {
background-image: url("../images/banner-bg.jpg");
background-repeat: no-repeat;
border-radius: 0 0 7px 7px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
height: 220px;
margin-top: 0;
}
#logo {
float: left;
margin: 74px 0 0;
opacity: 1.1;
overflow: hidden;
padding: 13px 0;
}
#logo h1 {
font-family: arial;
font-size: 40px;
font-weight: bold;
line-height: 30px;
margin: 0;
padding: 0 0 0 0px;
}
#logo h1 a {
color: #FFFFFF;
margin: 0;
padding: 0;
text-decoration: none;
}
#logo h1 a:hover {
color: #336666;
text-decoration: none;
}
#logo #slogan {
color: #FFFFFF;
font-size: 19px;
font-weight: normal;
margin: 0;
padding: 0 0 0 30px;
}
#nav ul {
background-color: #336666;
border-radius: 7px 7px 7px 7px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
list-style-type: none;
margin: -16px 0 0;
padding: 16px 0;
}
#nav ul li {
display: inline;
}
#nav ul li a:link, #nav ul li a:visited {
color: #FFFFFF;
font-family: arial;
padding: 6px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#nav ul li a:hover, #nav ul li a:active {
background-color: #709B80;
color: #FFFFFF;
border-radius:7px;
}
#banner .inner h2 {
color: #FFFFFF;
font-size: 39px;
font-style: normal;
letter-spacing: 0;
line-height: 1.4;
padding: 56px 335px 0 46px;
text-decoration: none;
text-transform: none;
word-spacing: 0;
}
#content .inner {
margin-top: 10px;
}
#main h2 {
color: #336666;
}
#home-bottom {
margin: 15px 0 0;
padding: 15px 0 0;
}
#home-bottom h2 {
color: #336666;
margin-left: 10px;
}
#home-bottom a:link, #home-bottom a:visited {
color: #709B80;
text-decoration: underline;
}
#home-bottom a:hover {
color: #336666;
text-decoration: none;
}
#col1, #col2 {
border-radius: 7px 7px 7px 7px;
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
margin: 10px;
padding: 10px;
}
#col2 {
}
#address {
background-color: #709B80;
border-radius: 7px 7px 7px 7px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
color: #FFFFFF;
margin: 20px 0;
padding: 15px;
}
#address h3 {
color: #FFFFFF;
}
#footer {
margin-top: 15px;
}
#footer .inner {
border-top: 1px solid #CCCCCC;
font-size: 10px;
padding-top: 10px;
text-align: center;
}
#footer .inner a {
text-decoration: none;
}
#footer .inner a:hover {
text-decoration: underline;
}
 
========================================================================================

Appreciate your help!
Regards,
Alex

apvit
apvit's picture
Offline
newbie
Last seen: 1 week 4 days ago
Timezone: GMT-6
Joined: 2019-11-17
Posts: 3
Points: 4

The css files above are in

The css files above are in separate css folder, and I also noticed that there is another style.css file in the root folder. Anyway, my attempts to reduce the height of the top banner or to move the words to the center fail. Here is the style.css code:

body {
        background-color: #E6E6E6;
}
 
h1 {
        color: #6699FF;
        font-family: Arial, Helvetica, sans-serif;
        font-weight:bold;
        font-size: medium;
        margin: 0 0 0px 0px;
        padding:0;
}
 
img {
        border: 0;
}
 
form {
        margin: 0;
        padding: 0;
}
 
#container {
        width: 600px;
        margin-left:auto;
        margin-right:auto;
        border: 1px solid #CCCCCC;
        padding: 9px;
        background-color:#FFFFFF;
 
}
 
#breadcrumbs {
        color: #6699FF;
        font-family: Arial, Helvetica, sans-serif;
        font-size:small;
        margin: 0 0 8px 8px;
}
 
#breadcrumbs a, #breadcrumbs a:visited, #breadcrumbs a:link, #breadcrumbs a:active {
        color: #6699FF;
        text-decoration:none;
}
 
#breadcrumbs a:hover {
        text-decoration:underline;
}
 
#listingcontainer {
        background-image:url(bg.gif);
        padding: 10px;
        background-color:#E0DEDE;
}
 
#listingheader {
        color: #476BB3;
        font-weight:bold;
        font-family:Arial, Helvetica, sans-serif;
        font-size:small;
        text-align:right;
}
 
#listingheader a, #listingheader a:active, #listingheader a:visited, #listingheader a:link {
        text-decoration: none;
        color: #476BB3;
}
 
#listingheader a:hover {
        text-decoration: underline;
        color: #476BB3;
}
 
 
#headerfile {
        text-align:left;
        float: left;
        width: 320px;
}
 
#headersize {
        text-align:right;
        width: 75px;
        float: left;
}
 
#listing {
        border: 1px solid #A7C5FF;
}
 
#listing a {
        display:block;
        padding: 2px 5px 2px 5px;
        font-size:small;
        color: #6285CA;
        font-family:Arial, Helvetica, sans-serif;
        text-decoration:none;
        width:568px;
        text-align:right;
 
}
 
#listing a:hover {
        background-color:#DBE6FE;
}
 
#listing a img {
        float:left;
        margin-right: 4px;
}
 
 
 
#listing a strong {
        width: 300px;
        float:left;
        cursor:hand;
        cursor:pointer;
        text-align:left;
}
 
#listing a em {
        float: left;
        width: 75px;
        text-align:right;
        cursor:hand;
        cursor:pointer;
}
 
#listing a span {
        position: absolute;
        margin-left: -151px;
        margin-top: -2px;
}
 
#listing a span img {
        width: 150px;
        background-color:#CCCCCC;
        visibility: hidden;
}
 
#listing a:hover span img {
        border: 1px solid #666666;
        visibility: visible;
}
 
#upload {
        border: 1px solid #A7C5FF;
        display:block;
        margin-top: 10px;
        font-size:small;
        color: #6285CA;
        font-family:Arial, Helvetica, sans-serif;
        text-decoration:none;
        width:568px;
        background-color: #E9F0FF;
}
 
#uploadtitle {
        background-color: #DBE6FE;
        padding: 2px 5px 2px 5px;
        border-bottom: 1px solid #A7C5FF;
 
}
 
#uploadcontent {
        padding: 2px 5px 2px 5px;
}
 
 
#copy {
        width: 600px;
        margin-left:auto;
        margin-right:auto;
        text-align:center;
        font-size:x-small;
        color: #666666;
        font-family:Arial, Helvetica, sans-serif;
}
 
#copy a {
        text-decoration: underline;
        color: #666666;
}
 
.b {
        background-color: #E9F0FF;
 
}
 
.w {
        background-color:#FFFFFF;
}
 
.mod {
        float:right;
}
 
.size {
        float:right;
}
 
.style3 {
        color: #FF0000;
        font-weight: bold;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 13 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Not thoroughly tested

See
style.css line 114

#logo {
    float: left;
    margin: 37px 0 0;
    opacity: 1.1;
    overflow: hidden;
    padding: 13px 0;
    }

I changed the top margin from 74px to 37px. You should find the value you prefer.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

apvit
apvit's picture
Offline
newbie
Last seen: 1 week 4 days ago
Timezone: GMT-6
Joined: 2019-11-17
Posts: 3
Points: 4

That's amazing, Gary, thank

That's amazing, Gary, thank you so much! Yes this is the string I was searching for so all is fixed!