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.

div background image problem

Discussion in 'CSS' started by xXmahriXx, Jul 1, 2013.

0
  1. #1
    I'm curently building my website & I'm having problems setting the background for a div
    so I made a div which I called "footer" & in which I wrote the copyright stuff
    for each div in the website I made a simple background image , transparent & gradient black on sides for a cool effect
    all works great except this footer div
    it's background image goes up instead of remaining down where its supposed to be
    in chrome & mozilla its shows like this http://prntscr.com/1d06d8
    while only in opera its shown correctly http://prntscr.com/1d06ux
    this is the website http://katz.66ghz.com/

    what shall I do ?
    thanks

    also if you could tell me how to make a menu bar with like a list that appears when you hover your mouse over it (something like this http://www.worldofmiscrits.com/ but only 1 column) that would be awesome

    thank you again
     
    xXmahriXx, Jul 1, 2013 IP
  2. aidanriley629

    aidanriley629 Banned

    Messages:
    429
    Likes Received:
    23
    Best Answers:
    3
    Trophy Points:
    175
    #2
    Hm, I think the footer is inheriting a 1px margin and padding. in the #footer section of the CSS file, specify 0px margins and padding and let me know if that works. The reason it could be a problem is that the footer is given a height of 25px and the background image is exactly 25px as well.
     
    aidanriley629, Jul 1, 2013 IP
  3. aidanriley629

    aidanriley629 Banned

    Messages:
    429
    Likes Received:
    23
    Best Answers:
    3
    Trophy Points:
    175
    #3
    And the menu that you're talking about is called a dropdown list. There are plenty of free scripts in Google I'm sure.
     
    aidanriley629, Jul 1, 2013 IP
  4. xXmahriXx

    xXmahriXx Member

    Messages:
    41
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #4
    thank you for help
    no matter what I did it didn't work so I simply removed it
    it was kinda useless anyways xD
    I found a simple dropdown list so I'll use it for now :D
     
    xXmahriXx, Jul 2, 2013 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    1) No doctype, so you're in quirks mode for IE, and believe it or not there ARE some behavioral quirks in non-IE browsers too from that. (most of that's scripting though)

    2) Non-semantic markup isn't helping.

    3) this is 2013, not 1997 -- you shouldn't have a CENTER tag in there, much less deprecated attributes like BACKGROUND.7

    4) you seem to have two DIV around the menu UL for no good reason I can figure.

    5) no MEDIA targets on the LINK for your CSS

    6) The logo image is more a presentational affectation of text, as such it has no business in the markup as a IMG. (if anything that should be your H1)

    7) it helps to NOT use classnames that are the same as pseudoclasses -- like "active".

    Of course, the fixed width layout is also a no-no... but one thing at a time... and © MEANS copyright, so it's "copyright copyright"?!? :D

    The first order of business is to drag the markup kicking and screaming into THIS century.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="viewport"
	content="width=device-width; initial-scale=1.0"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Kat'z
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Kat'z
		<span><!-- image replacement --></span>
	</h1>

	<ul id="mainMenu">
		<li><a href="index.html" class="current">Home</a></li>
		<li>
			<a href="#">Projects</a>
			<ul>
				<li><a href="#">C#</a></li>
				<li><a href="#">C++</a></li>
			</ul>
		</li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	
	<div id="content">
		<p>
			hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world
		</p>
	<!-- #content --></div>
	
	<div id="footer">
		&copy; Kat'z
	<!-- #footer --></div>
	
<!-- #pageWrapper --></div>	

</body></html>
    Code (markup):
    I'm out the door soon, but when I get back I'll belt out the CSS I'd be using with that. Generally speaking that's how the markup for your page given it's styling SHOULD look... though I'm wondering how you're planning on actually having legible color contrasts for text on the page since, well...
     
    deathshadow, Jul 2, 2013 IP
  6. xXmahriXx

    xXmahriXx Member

    Messages:
    41
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #6
    @deathshadow
    wow , thank you , that's awesome & so much simpler than what I did

    if you don't mind could you please explain a bit more #6 as I don't quite get it , I mean shouldn't the logo look "cool" to attract people ?
     
    xXmahriXx, Jul 2, 2013 IP
  7. aidanriley629

    aidanriley629 Banned

    Messages:
    429
    Likes Received:
    23
    Best Answers:
    3
    Trophy Points:
    175
    #7
    He's just saying to put the logo in an <h1> tag instead of an <img src=""> tag, for SEO purposes.
     
    aidanriley629, Jul 2, 2013 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    SEO and semantics -- presentational images, which that 'logo' falls into the category of, belong in the CSS not the markup. That empty SPAN would be absolute positioned over the text.

    Generally speaking you should write your page with plain semantic markup FIRST before even THINKING about it's screen appearance, that way when CSS or fancy styling is missing the page will still be useful/presentable to visitors. Semantic markup is entirely about being useful to as many users as possible, then 'progressively enhancing' that functionality as need be with CSS for appearance and Javascript for behavior. A good rule of thumb is that if you can't make the page useful and functional images off, CSS off and Scripting off, you are doing something wrong... the only real exceptions are 'true' web applications (that I'm not convinced serve a legitimate purpose with the rarest of exceptions like google maps) or pages where images ARE the content. Screen readers, braille readers, non-CSS browsers, and yes -- search engines, all could give a flying purple fish about your colors, presentational images, layout, or anything else you slap on top of the markup. (Except that Google and some screen readers ignore elements set to display:none or visibility:hidden!)

    What they care about is the semantic markup saying what your content IS, and the content itself... Something anyone making websites should be focusing on LONG before they even THINK about what the site is going to look like; hence why sleazing out some stupid PSD or playing with layout before you have semantic markup of your content or a reasonable facsimile of what's expected for content is putting the cart before the horse -- a completely back-assward way of building websites no matter if it's become an accepted practice.

    ... and it is also why most SEO bravo sierra is fictional garbage made up by scam artists. SEO should be a small but important and NATURAL part of writing the content of a page and marking it up; it most certainly is not worthy of being a profession unto itself much less have a cottage industry spring up around it.

    My life took a bit of a left turn so I've not done any CSS to go with that markup as yet. I'm hoping to get to it this weekend if possible. I did notice you used a LOT of alpha transparency, and in a manner that to be frank, has no business on a website, particularly the way that logo is put together since it by definition restricts you to a fixed width layout.
     
    deathshadow, Jul 4, 2013 IP