CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)
-   -   Logo placement should probably be done differently... (http://www.codingforums.com/showthread.php?t=284963)

operapixie 12-28-2012 06:44 PM
Logo placement should probably be done differently...
 
My current layout has the logo image being called inline instead of via CSS, but I couldn't get it to work otherwise. Perhaps someone here can show me how to make this work better?

http://dev.yourbusybee.com/kaleco/te...lecoindex.html

Excavator 12-28-2012 07:04 PM
Quote:
Originally Posted by operapixie (Post 1302727)
My current layout has the logo image being called inline instead of via CSS, but I couldn't get it to work otherwise. Perhaps someone here can show me how to make this work better?
You already give it a class that can be targeted from your CSS. Remove the inline styles and try something like this -
Code:
img.top_logo {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1
}

operapixie 12-29-2012 06:12 PM
Thanks muchly, Excavator (again...you are wonderful help).

But now my menu banner seems to be living underneath everthing else, and my page margins don't seem to be accomplishing anything - in other words, the top of the page is all flush fat the top, instead of starting a few pixels below and showing the nice rounded corners. Argh...fix one thing, only to uncover new issues! LOL

BUT, I did validate the markup and CSS using your links so thank you for that.

Excavator 12-29-2012 06:53 PM
I think you are flailing with CSS. You seem to be adding things with no idea what they do...
Code:
h1 {
    color: #FFFFFF;
    font-family: 'sf_cartoonist_hand_scregular';
    font-size: 54px;
    font-weight: normal;
    margin-top: -160px;
    padding-left: 15px;
    text-shadow: 1px 1px 1px #000000;
    z-index: 150;
}
Why is #xcontainer positioned absolutely? What are you hoping display: table-cell will do for you? z-index only works on positioned elements, it does nothing for your ul.social and h1. Your absolute positioned ul.social li a strong is really messing with you. #button should probably be floated in #banner, but if you're going to use ap on it you should not use margin to position it.


Make your CSS look like this once (make a backup of your original!!)
Code:
@charset "ISO-8859-1";
/* CSS Document */

@font-face {
    font-family: 'sf_cartoonist_hand_scregular';
    src: url('fonts/sfcartoonisthandsc-webfont.eot');
    src: url('fonts/sfcartoonisthandsc-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/sfcartoonisthandsc-webfont.woff') format('woff'),
        url('fonts/sfcartoonisthandsc-webfont.ttf') format('truetype'),
        url('fonts/sfcartoonisthandsc-webfont.svg#sf_cartoonist_hand_scregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sf_cartoonist_hand_scbold';
    src: url('fonts/sfcartoonisthandsc-bold-webfont.eot');
    src: url('fonts/sfcartoonisthandsc-bold-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/sfcartoonisthandsc-bold-webfont.woff') format('woff'),
        url('fonts/sfcartoonisthandsc-bold-webfont.ttf') format('truetype'),
        url('fonts/sfcartoonisthandsc-bold-webfont.svg#sf_cartoonist_hand_scbold') format('svg');
    font-weight: normal;
    font-style: normal;
}


html,body {
    height:100%;
}

body {
        background-image: url(bkgd.png);
        margin-left: 0px;
        margin-top: 20px;
        margin-right: 0px;
        margin-bottom: 20px;
        background-color: #f5f5f5;
}

.shadowbox {
        width: 1020px;
  margin: 50px auto;
        -moz-border-top-left-radius: 15px;
        border-top-left-radius: 15px;
        -moz-border-top-right-radius: 15px;
        border-top-right-radius: 15px;
        -moz-border-bottom-left-radius: 15px;
        border-bottom-left-radius: 15px;
        -moz-border-bottom-right-radius: 15px;
        border-bottom-right-radius: 15px;
        -webkit-box-shadow: 0px -2.6px 7px #ccc;
        -moz-box-shadow: 0px -2.6px 7px #ccc;
        box-shadow: 0px -2.6px 7px #ccc;
}

#header {
        background: url(header2.png);
        width:1020px;
        margin-left:auto;
        margin-right:auto;
        -moz-border-top-left-radius: 15px;
        border-top-left-radius: 15px;
        -moz-border-top-right-radius: 15px;
        border-top-right-radius: 15px;
}

#xcontainer {
        width:1020px;
  overflow: auto;
}

#banner {
    position: relative;
    width:1020px;
  height: 50px;
    background: url(bannerbkgnd.png) repeat scroll 0% 0% transparent;
    margin-right:0px;
       
        z-index:50;
}



img.top_logo {
  position: absolute;
  top: -100px;
  left: 20px;
  z-index: 1;
  width:235px;
}


h1 {
        font-family:'sf_cartoonist_hand_scregular';
        font-size:54px;
        color:#ffffff;
        font-weight:normal;
  margin: 0;
        padding-left:15px;
        text-shadow: 1px 1px 1px #000;
  position: relative;
  z-index: 2
}

/* Social Media Menu ----------------------------------------------------------------------*/

.social {
        list-style:none;
  margin: 20px 20px 0;
}

.social li {
        display:inline;
        float:right;
        margin-right:5px;
}

.social li a {
        display:block;
        width:32px;
        height:32px;
        position:relative;
}

.social li a strong {
        font-family: Century Gothic;
        font-size:11px;
        text-decoration: none;
        color:black;
        text-shadow:1px 1px 0 #ccc;
}
 
li.facebook {
        background-image:url("Facebook.png");
}

li.twitter {
        background-image:url("Twitter-1.png");
}

li.pinterest {
        background-image:url("Pinterest.png");
}

li.rss {
        background-image:url("RSS.png");
}
 
.social li {
        transition-property: opacity;
        transition-duration: 500ms;
}

.social li a strong {
        opacity:0;
        transition-property: opacity, top;
        transition-duration: 300ms;
}
 
.social li:hover a strong {
        opacity:1;
        top:-10px;
}

/* End Social styles */


/* Menu ----------------------------------------------------------------------*/

#button {
        position:absolute;
  top: 0;
  right: 0;
        padding: 0;
}

#button li {
        display: inline;
}

#button li a {
        font-family: Century Gothic;
        font-size:11px;
        text-decoration: none;
        padding: 15px;
        background-color: #728b3a;
        color: #fff;
}

#button li a:hover {
        background-color: #8cab48;
        margin-top:0px;
        padding-bottom:12px;
}

/* End Menu styles */

.main {
        background-color: #fff;
        height:inherit;
        padding:8px;
        margin-left:auto;
        margin-right:auto;
}

/* Sidebar */

#sidebar {
        width:175px;
        float:left;
}

/* slider styles */
#sliderFrame {
        position:relative;
        width:800px;
        margin-left:180px;
} /*remove the "margin:0 auto;" if you want to align the whole slider to the left side*/

#slider {
    width:700px;height:306px;/* Make it the same size as your images */
        background:#fff url(loading.gif) no-repeat 50% 50%;
        position:relative;
        margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
        position:absolute;
        border:none;
        display:none;
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
        z-index:2;
        display:none;position:absolute;
        top:0px;left:0px;border:0;padding:0;margin:0;
        width:100%;height:100%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
        position:absolute;
        width:100%;
        height:auto;
        padding:0;
        left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
        bottom:0px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
        z-index:3;
        overflow:hidden;
        font-size: 0;
}
div.mc-caption-bg {
        background-color:black;
}
div.mc-caption {
        font: bold 14px/20px Arial;
        color:#EEE;
        z-index:4;
        padding:10px 0;/*Adding a padding-left or padding-right here will make the caption area wider than its background. Sometimes you may need to define its width again here to keep it the same width as its background area (div.mc-caption-bg).*/
        text-align:center;
}
div.mc-caption a {
        color:#FB0;
}
div.mc-caption a:hover {
        color:#DA0;
}


/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
        top:320px; left:280px; /* Its position is relative to the #slider */
        width:150px;
        background:none;
        padding-left:20px;
        position:relative;
        z-index:5;
        cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div
{
    width:11px; height:11px;
    background:transparent url(bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}

div.navBulletsWrapper div.active {background-position:0 -11px;}


/* --------- Others ------- */
#slider
{
        transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}

/* End slider styles */

/* Footer styles */
.outer {
    margin-top: 0px;
        width:1020px;
        height:100px;
    margin-left:auto;
        margin-right:auto;
        overflow:visible;
}

.inner {
    background-image: url(header2.png);
        background-repeat:repeat;
        width:100%;
    height: 75px;
        -moz-border-bottom-left-radius: 15px;
        border-bottom-left-radius: 15px;
        -moz-border-bottom-right-radius: 15px;
        border-bottom-right-radius: 15px;
}

#copyright {
        text-align: center;
}

.nav4 {
        font-family: Century Gothic;
        font-size: 8pt;
        color: #4F514F;
        text-decoration: none;
        word-spacing: normal;
}


 .nav4 a:link {
        color: #4f514f;
        text-decoration: none;
}

.nav4 a:visited {
        color: #4f514f;
        text-decoration: none;
}

.nav4 a:hover {
        color: #c05961;
        text-decoration: none;
}

.nav4 a:active {
        color: #4f514f;
        text-decoration: none;
}

/* End footer styles */

operapixie 12-29-2012 06:58 PM
Yeah, I'd just found the -160px and taken it out a few minutes ago. Actually getting closer. BUT, yes...absolute and relative positioning are a bit of a mystery for me.

The display: table-cell code came from some snippet I'd used on a splash page, I believe. I think it had to do with trying to display something the full height of the screen...but it's been awhile now so I'm not really sure :-( And that function certainly isn't something I want/need for *this* site.

Thank you for your patience and help.

Excavator 12-29-2012 08:34 PM
Quote:
Originally Posted by operapixie (Post 1302936)
Yeah, I'd just found the -160px and taken it out a few minutes ago. Actually getting closer. BUT, yes...absolute and relative positioning are a bit of a mystery for me.


Maybe a quick tutorial on positioning would help. This may shed some light on absolute and relative positioning and why we need it - http://www.barelyfitz.com/screencast...s/positioning/

As a rule, I generally don't position anything until there is no better way to do it.


All times are GMT +1. The time now is 09:01 PM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.