Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    136
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Question 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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by operapixie View Post
    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
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Nov 2011
    Posts
    136
    Thanks
    11
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 */
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Nov 2011
    Posts
    136
    Thanks
    11
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by operapixie View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •