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.

Padding area problem help

Discussion in 'HTML & Website Design' started by nerdGraphic, Aug 31, 2015.

  1. #1
    I'm viewing this on my Firefox. The left grid isn't the same with the other two grids.

    It works on chrome though. I guess.

    http://raineer24.github.io/shoegame/

    [​IMG]
    Google chrome:
    [​IMG]
    [​IMG]
    How can I align them together? Is it with the padding: 1.2em?
     
    Last edited: Aug 31, 2015
    nerdGraphic, Aug 31, 2015 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #2
    Just put a <br> between free and shipping

    Your bigger problem is this

    [​IMG]
     
    sarahk, Aug 31, 2015 IP
  3. nerdGraphic

    nerdGraphic Member

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #3
    How about display: table?
     
    nerdGraphic, Aug 31, 2015 IP
  4. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #4
    use css property min-height.
    <h2 style="
    min-height: 65px;
    ">free shipping</h2>
     
    webcosmo, Aug 31, 2015 IP
  5. nerdGraphic

    nerdGraphic Member

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #5
    http://raineer24.github.io/shoegame/

    I tried using display: flex and I guess it's kinda working.

    And the last right Li. How can I move it more to the right?
    [​IMG]

    http://raineer24.github.io/shoegame/
     
    nerdGraphic, Sep 1, 2015 IP
  6. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #6
    webcosmo, Sep 1, 2015 IP
  7. nerdGraphic

    nerdGraphic Member

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #7
    Is it working already? I made some adjustments.

    http://raineer24.github.io/shoegame/
     
    nerdGraphic, Sep 2, 2015 IP
  8. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #8
    Looks good but still a few snickers in there.
     
    sarahk, Sep 2, 2015 IP
  9. nerdGraphic

    nerdGraphic Member

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #9
    [​IMG]


    [​IMG]

    Should I use again the display: flex for this one?

    http://raineer24.github.io/shoegame/
     
    nerdGraphic, Sep 3, 2015 IP
    sarahk likes this.
  10. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #10
    webcosmo, Sep 3, 2015 IP
  11. nerdGraphic

    nerdGraphic Member

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #11
    http://raineer24.github.io/shoegame/

    Should I use media queries for this one? Viewing it on 1000px res. Because I'm viewing this on min-width: 1200px.

    [​IMG]

    The font is too small but when I'm viewing it on a viewport: 1000px res. It's okay.

    [​IMG]

    http://raineer24.github.io/shoegame/

    From min-width: 1200px. Is it just the font okay?

     
    nerdGraphic, Sep 4, 2015 IP
  12. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #12
    does that mean you have lots of H1 tags on the page?
    that's an SEO no-no ;)
     
    sarahk, Sep 4, 2015 IP
    deathshadow likes this.
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    Not just SEO, it's semantic gibberish since a H1 is the heading under which EVERYTHING on the page is a subsection. Unless you've got those HTML5-tard SECTION or ARTICLE tags in there (which piss on semantics and logical document structure) there shouldn't be more than one h1... of course you've got anchors wrapping them which despite HTML 5's asshat "Go ahead and do that" is STILL broken garbage cross-browser.

    Though really when it comes to bad practices that entire site is a DISASTER. From the pathetically broken attempt at being responsive, to the design concepts (like fixed element heights) that have no damned business on a website in the first place if you care about accessibility (lemme guess, site started life with some disphit spanking it on the screen in photoshop?), endless pointless DIV, ID and classes for NOTHING, lists around things that quite clearly aren't lists, gibberish use of numbered headings (makes it look like they were chosen for their appearance not their meaning), scripttardery for christmas only knows what and presentational classes...

    You'd almost think it was built with the idiotic mouth-breathing halfwit nonsense known as bootcrap. OH WAIT...

    My advice, pitch it in the trash and start over, spending some time learning about semantics and how to do things without bootstrap wrapped around your ankes like a "hobble skirt".
     
    deathshadow, Sep 5, 2015 IP
    sarahk likes this.
  14. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    818
    Best Answers:
    7
    Trophy Points:
    320
    #14
    I see HEADER tags scattered throughout the BODY of the site. WTF???

    And look at this mess:

    untitled.JPG

    As per others, learn how to write proper HTML and start over.
     
    mmerlinn, Sep 5, 2015 IP
  15. nerdGraphic

    nerdGraphic Member

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #15

    What do you mean I should use only one h1? I need to use h1 because its the header part. Like how for example one H1?

    I'm still not on that path. What do you mean from the entire header?
     
    nerdGraphic, Sep 5, 2015 IP
  16. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #16
    An H1 (unless you are using HTML 5's halfwit SECTION or ARTICLE tags) is the heading under which ALL subsections of the site -- are subsections. This is why under properly written semantic websites the H1 is typically the name of the site or wrapping the logo -- since all sections of the page are subsections of that.

    For the headings of your subsections, that's a H2's job since H2 means the start of a subsection of the H1. H3 mean the start of a subsection of the H2, and so forth.

    Your current heading structure looks like this:
    http://raineer24.github.io/shoegame/
    25 headings
    
    <h1>shoes sneakers boots ruggedness
    <h1>shoes sneakers boots ruggedness
    <h1>shoes sneakers boots ruggedness
    	<h2>free shipping
    	<h2>new shoes collection
    	<h2>money back guarantee
    		<h3>our shoe categories
    			<h4>Sneakers
    			<h4>Running shoes
    			<h4>Mountain Shoes
    		<h3>our latest arrivals
    <h1>Bullsy Shoes in white
    <h1>Rough Bullsy Shoes for Winter
    <h1>Bullsy Sneakers
    <h1>Bullsy grey Sneakers / Shoes
    	[b]<h2>(Missing heading)[/b]
    		<h3>featured products
    <h1>Bullsy running Sneakers
    <h1>Rough Hiking Shoes
    <h1>Waterproof Bullsy Sneakers
    <h1>Bullsy working Shoes
    	[b]<h2>(Missing heading)[/b]
    		<h3>latest from the blog
    		<h3>Extra rugged flip-flops will arrive soon
    		<h3>New models of Bullsy Sneakers just arrived
    		<h3>Extra rugged flip-flops will arrive soon
    		<h3>bullsy-a rugged store for rugged people
    Code (markup):
    Utter and complete gibberish... apart from the overstuffing of keywords, redundant headings with the exact same text in them, headings that don't even HAVE content (that stupid malfing bandwidth and space wasting slideshow crap -- not a fan of those)... well, the order doesn't even make sense. You have H3 that don't even have h2 to be subsections of, and even if you went to the h1 before them it's still gibberish.

    From what I'm seeing for CONTENT, this should probably be the structure:

    <h1>BULLSY RUGGED SHOE STORE
    	<h2>Free Shipping
    	<h2>New Shoe Collection
    	<h2>Money Back Guarantee
    	<h2>Our Shoe Categories
    		<h3>Sneakers
    		<h3>Running Shoes
    		<h3>Mountain Shoes
    	<h2>Our Latest Arrivals
    		<h3>Bullsy Shoes in White
    		<h3>Rough Bullsy Shoes for Winter
    		<h3>Bullsy Sneakers
    		<h3>Bullsy Grey Sneakers / Shoes
    	<h2>Featured Products
    		<h3>Bullsy Running Sneakers
    		<h3>Rough Hiking Shoes
    		<h3>Waterproof Bullsy Sneakers
    		<h3>Bullsy Working Shoes
    	<h2>Latest From the Blog
    		<h3>Extra rugged flip-flops will arrive soon
    		<h3>New models of bullsy sneakers just arrived
    		<h3>Extra rugged flip-flops will arrive soon
    	<h2>BULLSY - A Rugged Store for Rugged People
    	<hr>
    Code (markup):
    See how that kind-of fans out like a tree? H1 is like how on every page of a book or newspaper the name of that document is in the top-left corner of every page or page-pair. H2 are the start of subsections of that H1, H3 being the start of subsections of those H2. Half the crap you have as H1 aren't even HEADINGS structurally as they don't even have CONTENT. HR even plays a role as it means a change in topic WITHOUT heading text. H1..H6 do NOT mean "draw text in different sizes" nor does HR mean "draw a line across the screen" -- even if that is the default behavior for those tags. They have a very specific meaning, which is why if you choose your tags based on the default appearance you are choosing all the wrong tags for all the wrong reasons.

    The utter and complete lack of anything resembling proper semantics makes your markup and utter and complete failure so far as accessibility and graceful degradation are concerned -- but that's ENTIRELY typical of the broken flawed "dick around with what it looks like before you have content or semantic markup" approach to design. Again, lemme guess; someone screwing around in Photoshop came up with this? Hell, just your use of the word "grids" sets my teeth on edge.

    Of course the train wreck of how NOT to build a website known as bootcrap certainly isn't helping matters.

    P.S. The grammatical use of shoe vs. shoes can be VERY challenging, you got it wrong on a LOT of those headings. As a modifier noun it's always "shoe", damned if I know why. "Shoes store" sounds outright stupid to native English speakers.
     
    Last edited: Sep 5, 2015
    deathshadow, Sep 5, 2015 IP
  17. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #17
    3 items should also float.
    Don't be afraid of media queries. add them to end of your css, you can always remove it and get back to what you had.
     
    webcosmo, Sep 6, 2015 IP
  18. nerdGraphic

    nerdGraphic Member

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #18
    http://raineer24.github.io/shoegame/

    [​IMG]

    Is this alright with everyone?

    I just added some min-height.
     
    Last edited: Sep 6, 2015
    nerdGraphic, Sep 6, 2015 IP
  19. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #19
    maybe add this to left and right when width of screen is low, or hide lines totaly, noone will miss them:

    span.rightLine {
    1. background: url(../images/border.png) no-repeat 0px 0px;
    2. width: 10%;
    3. position: absolute;
    4. /* display: none; */
    5. right: 12px;
    6. bottom: 5px;
    7. height: 7px;
    }
     
    webcosmo, Sep 7, 2015 IP
  20. nerdGraphic

    nerdGraphic Member

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #20
    I'm done with the front page.

    Any advice?

    http://raineer24.github.io/shoegame/
     
    nerdGraphic, Sep 28, 2015 IP