Snowl Posted October 29, 2010 Share Posted October 29, 2010 vulkop When you look on firefox 3.6.10 (linux) it looks normal, but any other browser it doesnt position the image properly :( Link to comment Share on other sites More sharing options...
0 Yusuf M. Veteran Posted October 29, 2010 Veteran Share Posted October 29, 2010 Moved Here Link to comment Share on other sites More sharing options...
0 Mr. Gibs Posted October 29, 2010 Share Posted October 29, 2010 http://validator.w3.org/check?uri=http%3A%2F%2Fwww.vulkop.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 Bunch of errors. According to their HTML tidy (auto fixer) it should be: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Project Vulkaan</title> <link href="login.css" media="screen, projection" rel="stylesheet" type="text/css" /> <link rel="SHORTCUT ICON" href="/favicon.ico" /> <link rel="apple-touch-icon" href="/volcano.png" /> <style type="text/css"> /*<![CDATA[*/ div.c4 {text-align: center} div.c3 {position:relative;margin-left:200px;margin-top:70px; width:450px;} img.c2 {margin-left:-500px;margin-top:-50px;position: absolute;} img.c1 {margin-top:-30px;} /*]]>*/ </style> </head> <body> <div id="container"> <div id="topnav" class="topnav">test</div> <a href="http%3C?%20echo%20HTTPS;%20?%3E://%3C?%20echo%20DOMAIN;%20?%3E"><img src="logo.png" align="left" class="c1" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></div> <div class="hr"> <hr /></div> <div id="maincontainer"><br /> <br /> <div class="c4"><img src="images/about.jpg" class="c2" alt="** PLEASE DESCRIBE THIS IMAGE **" /> <div class="c3">test. why wont the image work :( </div> </div> </div> <?}?> </body> </html> I don't know how good the quality of the above code is (not a HTML developer) but hey give it a shot lol. Link to comment Share on other sites More sharing options...
0 Cupcakes Posted October 29, 2010 Share Posted October 29, 2010 For as simple as this is, I don't see why you need to absolute position the image. Just give the image a class called .left and toss the following: #container { margin: 0 auto 20px auto; } #maincontainer { width: 960px; margin: 0 auto; text-align: center; } .left { float: left; } .right { float: right; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } <div id="maincontainer" class="clearfix"> <img src="images/about.jpg" class="left"> <p class="right">test. why wont the image work :(</p> </div> Also, as you can see I removed some of your bloated code. You don't need random linebreaks when you can apply styles to anything. It's also best to not use in-line styles especially since you're using a stylesheet. Edit: You can also see a working example I did for another user: http://dev.icupcake.org/neowin/skill.html Link to comment Share on other sites More sharing options...
0 Snowl Posted October 29, 2010 Author Share Posted October 29, 2010 For as simple as this is, I don't see why you need to absolute position the image. Just give the image a class called .left and toss the following: #container { margin: 0 auto 20px auto; } #maincontainer { width: 960px; margin: 0 auto; text-align: center; } .left { float: left; } .right { float: right; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } <div id="maincontainer" class="clearfix"> <img src="images/about.jpg" class="left"> <p class="right">test. why wont the image work :(</p> </div> Also, as you can see I removed some of your bloated code. You don't need random linebreaks when you can apply styles to anything. It's also best to not use in-line styles especially since you're using a stylesheet. Edit: You can also see a working example I did for another user: http://dev.icupcake....owin/skill.html Didn't work :( check it out now :( Link to comment Share on other sites More sharing options...
0 Cupcakes Posted October 29, 2010 Share Posted October 29, 2010 Well, obviously it won't work. You can't just give a div a class if there's nothing to the stylesheet for it. You need to add the CSS I gave you and then adjust to your requirements. Link to comment Share on other sites More sharing options...
0 Snowl Posted October 29, 2010 Author Share Posted October 29, 2010 I did :huh: Link to comment Share on other sites More sharing options...
0 Cupcakes Posted October 29, 2010 Share Posted October 29, 2010 You didn't have that added when you after you initially replied to my post. I looked at your URL and the only thing you did was copy/paste the HTML. Link to comment Share on other sites More sharing options...
0 Snowl Posted October 29, 2010 Author Share Posted October 29, 2010 I did. Anyway, it still doesn't work. Thanks anyway for helping ^_^ Link to comment Share on other sites More sharing options...
0 Cupcakes Posted October 29, 2010 Share Posted October 29, 2010 Actually, it is working its just your code is so bloated and messy that it's incorrect. If you remove your unncessary divs, removed ALL of the absolute position crap, then you'd be fine. I'm in MW2 right now else I'd just do it for you to show you. Like I said, you can reference the working example I gave in the URL. Start as that for your base then add extra code that you need. Basically, scrap what you have. Link to comment Share on other sites More sharing options...
0 Snowl Posted October 29, 2010 Author Share Posted October 29, 2010 Actually, it is working its just your code is so bloated and messy that it's incorrect. If you remove your unncessary divs, removed ALL of the absolute position crap, then you'd be fine. I'm in MW2 right now else I'd just do it for you to show you. Like I said, you can reference the working example I gave in the URL. Start as that for your base then add extra code that you need. Basically, scrap what you have. Alrighty :shiftyninja: Link to comment Share on other sites More sharing options...
0 Snowl Posted October 29, 2010 Author Share Posted October 29, 2010 Damn, still cant get it too look like my screeny :( lol :p Link to comment Share on other sites More sharing options...
0 Cupcakes Posted October 29, 2010 Share Posted October 29, 2010 When I said it's working, I meant ~my~ code--not yours. ;) ^_^ http://dev.icupcake.org/neowin/snowl.html <html> <head> <title>Snowl</title> <style type="text/css"> * { margin: 0; padding: 0; } img { border: 0; } div { border: 1px solid #FF0000; } body { color: #333; background: rgb(255,255,255); font-family: arial, verdana, tahoma, sans-serif; font-size: 100%; line-height: 1.7em; } #container { width: 100%; background: #000; margin: 0 0 20px 0; } .wrap { width: 960px; margin: 0 auto; } .left { float: left; } .right { float: right; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } </style> </head> <body> <div id="container"> <div class="wrap clearfix"> <div id="topnav" class="topnav"> </div> <a href="#"><img src="https://www.vulkop.com/logo.png" alt="" class="left" /></a> </div> </div> <div class="wrap clearfix"> <img src="https://www.vulkop.com/images/about.jpg" alt="" class="left"> <p class="right">test. why wont the image work :(</p> </div> </body> </html> You can work off of that base. I added border: 1px solid #FF0000; so you can see what DIVs are where. Link to comment Share on other sites More sharing options...
0 sweetsam Posted October 29, 2010 Share Posted October 29, 2010 This should get you going... Let me know if you have any qns. vulkop.zip Link to comment Share on other sites More sharing options...
0 Cupcakes Posted October 29, 2010 Share Posted October 29, 2010 Sidenote - I used to do the whole image replacement with h1 but this is a good read to get you to stop: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/ Also, not sure if it was intentional or accidental but with your example, there is no text link for the heading if CSS is disabled. You didn't include any text. I'm guessing it was intentional since I didn't see text-indent: -9999px; applied to #header h1 a, #header h1 a:visited. Link to comment Share on other sites More sharing options...
0 sweetsam Posted October 29, 2010 Share Posted October 29, 2010 Interesting article. Thanks. Sidenote - I used to do the whole image replacement with h1 but this is a good read to get you to stop: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/ Also, not sure if it was intentional or accidental but with your example, there is no text link for the heading if CSS is disabled. You didn't include any text. I'm guessing it was intentional since I didn't see text-indent: -9999px; applied to #header h1 a, #header h1 a:visited. Link to comment Share on other sites More sharing options...
0 The_Decryptor Veteran Posted October 29, 2010 Veteran Share Posted October 29, 2010 Sidenote - I used to do the whole image replacement with h1 but this is a good read to get you to stop: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/ ... It's an ok article, although it doesn't take the HTML5 rules into account. Given this bit of nonsensical markup, which header is the top level header? <h3>A h3 Header</h3> <section> <h2>A h2 Header</h2> <section> <h4>A h4 Header</h4> </section> </section> <section> <h1>A h1 Header</h1> </section> It's the <h3> article, it's child headers are the <h2> and then the <h1>, and the <h4> is a direct child of the <h2>. Basically, the number means nothing, it's the level in the document that gives it the meaning. That being said, including an <img> and <h*> tag within an <hgroup> would solve any issues (they're then considered one entity by the semantic rules) Link to comment Share on other sites More sharing options...
0 Cupcakes Posted October 29, 2010 Share Posted October 29, 2010 I'm not sure why your example would have out-of-order headings? HTML5 didn't make any changes to the hierarchy of headings. H1 is still the most important heading in HTML5. So yeah, the number DOES still mean something. Not sure where you read/though otherwise. http://diveintohtml5.org/semantics.html#header-element http://html5doctor.com/the-header-element/ http://boblet.tumblr.com/post/134276674/html5-structure2 http://mindgarden.de/hgroup-and-headings http://www.iheni.com/html-5-to-the-h1-debate-rescue/ https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document Link to comment Share on other sites More sharing options...
0 The_Decryptor Veteran Posted October 29, 2010 Veteran Share Posted October 29, 2010 From the HTML5 outlining algorithm, the MDC page linked even mentions it. ...The heading elements have a rank given by the number in the element name, where <h1> has the highest rank, and <h6> has the lowest rank. Relative ranking matters only within a section; the structure of the sections determines the outline, not the heading rank of the sections. ... So an <h1> means more than an <h2>, only as long as it's in the same section level. If they're at different levels (e.g. an <h3> higher than an <h1>), then the <h3> is a higher level header. Link to comment Share on other sites More sharing options...
0 Cupcakes Posted October 29, 2010 Share Posted October 29, 2010 "Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level. Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content." http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html To me it's not so much as that you CAN do it but rather just what is more clear. Quoted posted goes over an example similar to yours as well. That's really just the point I'm trying to get across :). It's that SEO part of me that's compelled to reorganize it. Link to comment Share on other sites More sharing options...
0 The_Decryptor Veteran Posted October 29, 2010 Veteran Share Posted October 29, 2010 So really it's just a nicer (backwards compatible) way to implement the <h> tag from XHTML2. I suppose I was really taking issue with the fact that the original article treated the <h1> tag as some type of perfect header tag that shouldn't be wasted on a logo (when in reality it's just a header, and if the logo forms part of your header you may as well use it) That being said, I prefer the <img src="" alt="text here" /> rather than doing text replacement via CSS. Link to comment Share on other sites More sharing options...
0 Tekkerson Posted October 29, 2010 Share Posted October 29, 2010 Cupcakes is dominating! Thumbs up on all the work you've done by educating the internets :D +1 To what The Decryptor said. Link to comment Share on other sites More sharing options...
Question
Snowl
vulkop
When you look on firefox 3.6.10 (linux) it looks normal, but any other browser it doesnt position the image properly :(
Link to comment
Share on other sites
21 answers to this question
Recommended Posts