1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

how to center logo?

Discussion in 'CSS' started by talkmeow, Mar 26, 2014.

0
  1. #1
    talkmeow, Mar 26, 2014 IP
  2. DuneDreamer

    DuneDreamer Well-Known Member

    Messages:
    363
    Likes Received:
    213
    Best Answers:
    0
    Trophy Points:
    135
    #2
    You may want to try this code:

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -104px;
  margin-left: -193px;
}
</style>
</head>

<body>
<div class="centered">
<img src="clawandpawlogo.png">
<div>
</body>
</html>
    Code (markup):
    In your case, I think you must style the container class in your css file.
     
    Last edited: Mar 26, 2014
    DuneDreamer, Mar 26, 2014 IP
  3. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #3
    All you really need is a #logo {text-align:center;}. I'm glad you made an effort to use numbered headings properly.
    However, you should really deploy the Glider/Levin method.
     
    wiicker95, Mar 27, 2014 IP
    ryan_uk, deathshadow and DuneDreamer like this.
  4. srivin

    srivin Member

    Messages:
    31
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    38
    #4
    use <center> tag .
     
    srivin, Apr 5, 2014 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    1997 called, it wants it's markup back! Lemme guess, you're still using FONT too, aren't you?

    Cannot believe that in 2014 there are still people who would even say that? Not been paying attention for 17 years or something? I mean I know people still sleaze out HTML 3.2 and slap either 4 tranny or 5 lip-service on it, but DAMN...
     
    deathshadow, Apr 6, 2014 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    ... and this is how it should be done; though being turdpress more than half the idiotic bloated garbage markup it saddled you with belongs in the trash; since in any sane and rational code this trainwreck of fat maggot ridden filth:
    	<header class="main-header">
		<div class="container">
														<h1 id="logo">
							<a href="http://yorkcountyclawandpaw.com"><img src="http://yorkcountyclawandpaw.com/wp-content/uploads/2014/03/clawandpawlogo2.png" alt="York County Claw and Paw"></a>
						</h1><!-- END #logo -->
									                				              
			</div><!--#header-->
		</div><!--.container-->
        <div class="secondary-navigation">
            <nav id="navigation" >
                                    <ul id="menu-menu-1" class="menu"><li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-15"><a href="http://yorkcountyclawandpaw.com/">Tournament Info</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://yorkcountyclawandpaw.com/?page_id=23">Scholarship Guidelines</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://yorkcountyclawandpaw.com/?page_id=21">Scholarship Application</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://yorkcountyclawandpaw.com/?page_id=19">Pictures</a></li>
</ul>                            </nav>
        </div>
	</header>
    Code (markup):
    Really shouldn't be much more than:

    	<h1>
		<a href="/">
			York County Claw &amp; Paw Tournament
			<span><!-- image replacement --></span>
		</a>
	</h1>
	
	<ul id="mainMenu">
		<li><a href="/" class="current">Tournament Info</a></li>
		<li><a href="/?page_id=23">Scholarship Guidelines</a></li>
		<li><a href="/?page_id=21">Scholarship Application</a></li>
		<li><a href="/?page_id=19">Pictures</a></li>
	</ul>
    Code (markup):
    Though most of that can be blamed on the HTML 5 'bloat for nothing' and the halfwit garbage that turdpress has the giant set of brass to call markup.
     
    deathshadow, Apr 6, 2014 IP
  7. imbrod

    imbrod Well-Known Member

    Messages:
    212
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    123
    #7
    What's the benefit of that method instead of this one (IDK the proper name)?
    #logo {
    display: block; /* or inline-block */
    background: url(clawandpawlogo.png) no-repeat 0 0;
    width: ...; height: ...;
    text-indent: -9999px;
}
    Code (markup):
    Please help me understand because I hear about this G/L method recently very often, (as I googled it dates back to mid-2000) and I use this other method for years and thought that was the right way.
     
    imbrod, Apr 29, 2014 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    The problem is very simple. Turn images off... and what do you get with text-indent? You get NOTHING!

    One of the entire reasons to use a image-replacement method is that real text is there for when images are disabled. If you use text-indent to slide the text off the screen, you don't have any text when CSS is on and images are off. Gilder-levin provides this as you hide the text under the image instead of off screen.

    Hence why with images blocked my ewiusb website looks like this:
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbCom800WideNoImages.jpg

    As opposed to it's normal appearance:
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbCom800Wide.jpg

    It's not exactly pretty images off, but at least people can still use it. That's the point.

    ... and no matter what the bandwidth hogging jackasses pissing out blood in photoshop might try to tell you, a lot of users block images to reduce bandwidth, or only enable images on a case by case basis. See our friends on metered mobile plans, metered connections in Canada and Australia, or are stuck in back woods New Hampshire, Maine, Utah, Idaho, or the Dakota's where 56K dialup is still a good day -- and if you are LUCKY a 768kbps metered satellite plan MIGHT be available IF you can get line of sight. Yeah, right...

    But of course the jackasses citing in their nice comfy 'burbs with fiber will argue this as if they are the only users that matter.
     
    Last edited: Apr 29, 2014
    deathshadow, Apr 29, 2014 IP
  9. imbrod

    imbrod Well-Known Member

    Messages:
    212
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    123
    #9
    I see. What about adding the title attribute to the anchor, wouldn't it display text instead of image if the user turned images off?
     
    imbrod, Apr 30, 2014 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Only on anchors, only on hover and only in supported browsers... which if there's nothing there to indicate moving the mouse to it or the user isn't even using a mouse, just how would that help? Title or no there'd still be a big blank empty space of nothingness. That's not what TITLE does or is for. (though honestly TITLE as an attribute should probably be deprecated too, as if you need it, there's something wrong with the contents of your tag!)

    99.99% of the time people use the TITLE attribute it's pointless bloat that doesn't actually do anything useful; in some cases it can even make the site harder to use (as the browser popup gets in the way -- hence why FF moved them to the bottom left corner of the screen). See the outright idiotic halfwit bull you see with people writing dumbass code like this:

    <a href="/" title="Home">Home</a>

    Anyone out there who doesn't know what's wrong with that, do us all a favor and back the **** away from the keyboard NOW!

    Only legitimate reason to do that would be when building an accesskeys menu, and since the one browser to ever implement that properly has discarded 99.99% of their functionality by turning into a pathetically useless shadow of it's former self by slapping the Opera logo on Chrome... There's now NO reason to make a TITLE that's identical to the content of the tag it's around.

    Now, if you used a IMG tag with ALT, THEN it would show, but then you don't have real text, you have a image also defeating the point of using image replacement; again, presentational images have no business in a IMG tag...

    Really though, neither TITLE or ALT are replacements for actual CDATA.
     
    deathshadow, Apr 30, 2014 IP
  11. imbrod

    imbrod Well-Known Member

    Messages:
    212
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    123
    #11
    What I meant actually was ALT; title was slip of the tongue.
    But I agree that G/L method is prettier than alt text on missing image. I wasn't just aware that so many people actually disable viewing images...
     
    imbrod, Apr 30, 2014 IP