SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Border Line on Div To Reach The Footer

    Hello,

    If you see in my website on the sidebar div I have a border-right, is it possible to make this border always go right down to the footer.

    http://modocom.ca/secstore/

    Also one other question, does it look good in IE so far? Still got lots to do to it, but just want to make sure its working correctly.

    One more question when you roll over Storage, Structures and Logistics I want the logo in the far left to change on roll over, is this possible with HTML and CSS or will I need to use some javascript.

    Most important thing is the border issue though.

    Thanks,

    Mike

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, with your current setup, it's not possible (well it is, and I'll get to it).

    Your sidebar isn't taller than your content (in this page anyway) and as a result it won't go all the way down to the footer. However, I'd maek an image (starting 105 px over from the left, which is the width of the sidebar) which looks like a border. Make it repeat-y'able. Then place it on #main and let it repeat down. It'll reach the footer . Since you have a fixed width sidebar, you won't have any disgusting overlap issues.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Native IE8 looks fine.

    Plugging it into Browser Lab, IE6 gets majorly --------...er...screwed up. IE7 has some improvement, although the slideshow is still a bit left of it's intended position. IE9 is fine. While I was at it, I checked the other browsers available. You're good (Although there's no Opera support in BL)

    My normal browser (Chrome) displays well, too.

    Can you just extend the div? I don't see why not.

    For the image change, I think it's JS only, although don't quote me on that.

    ~TehYoyo

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    IE6 is pretty bad (ignore it. It's dead)
    Ie7 is pretty screwed up
    IE8/9 are fine.

    Now, I have to ask. Why did you code your page that way? Do you also realize taht floating/absolute positioning doesn't do anything? Well, it's the same as just declaring position:absolute. Floating while AP'd does nothing.

    First of all. Make these changes. You have to change hte way you structure the page.

    Inside the #main div. Make hte order of those divs: Navigation, Sidebar, Slider, Content

    Now make these CSS changes. On #sidebar, remove the position:absolute. On #layerslider, remove the position:relative and you have to lower the width to at most 894px.

    It may not look amazing to you yet (looks basically the same over here, but you may nitpick)

    I'm sorry for doing another post but I didn't see your other questions. Do those HTML/CSS changes. Your page will be much better for it. Never use AP to structure a page. It's a nightmare, trust me .

    Off Topic:

    Hello Mbond5. Long time no see
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello Ryan,

    Ok I understand the main thing with the image repeat-y and will get to it just dont have time right now.

    Did the other changes from your most recent post and it doesnt look like the way I intended it too now which is why I had the absolute positioning, the slider needs to be 1000px wide its suppose to go behind the sidebar as in the other one and doing it this way I can not achieve that, any suggestions to get it looking like how I had it before by doing it this way and I'll fix up my border image tomorrow when I'm at work, also I need the logo to go up so it connects with the navigation border.

    Thanks,

    Mike

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You can add relative positioning and a negative left: value to move it over a bit now. I don't know (or remember) what the original effect was .

    Off Topic:

    Are you messing with the page? Upon refresh it keeps looking different


    How far up did you want the logo to be? You have a div right above it (the dot div) which is taking up space. Both the sidebar and the dot div have top margins set on them, so adjust those values accordingly.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry bout that, got the logo up now to the position I want it, only thing with the repeat image though is wont it extend all the way to the top of the browser window or should I make that blue dot a jpg with white background to go over the line and placed right at the top.

    Now my only issue ill be the slider needs to be 1000px wide and also it will need to go behind the main div if the main div has that line cause the slider must go behind it as it was inteded in the design, can this be done since the slider is inside the main div with current way its coded.

    Thanks

    EDIT... I'll check the forums in the morning got to get to bed, thanks for the help hopefully we can get the slider issue resolved so its behind the sidebar.

    Thanks,

    Mike

  8. #8
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey Ryan,

    Thanks for all the help, think I solved the issue, if you get a chance could you let me know what it looks like on IE Browsers as I only got a Mac and just tried on Firefox, Chrome and Safari and all look the same on each one.

    One other issue I just noticed with the #main div where I have the images going all the way down the two lines it doesnt go all the way down to the footer when the window is large. Any idea how I can fix that issue.

    Thanks

    *EDIT Nevermind fixed it I believe, put the image on the #wrap instead of the #main and it seemed to have solved the issue, does it look ok in IE browsers now.

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    PAINFULLY broken and useless here -- I'm seeing four different appearances in as many browser engines, to the point I'm not even sure what it's supposed to look like; the absurdly undersized fixed metric (px) content fonts and use of serifs at that small size isn't helping, leaving me to dive for the zoom when zooming breaks the needlessly complex and space wasting animooted banner.

    Of course that's hardly shocking given the jquery for nothing, abuse of the REL attribute, presentational images in the markup, static text as images resulting in a total lack of actual content, endless extra div for nothing and total lack of anything resembling semantic markup.

    In other words, throw it out and start over, the very concept isn't viable for web deployment.... and maybe get some ACTUAL content on the page?

  10. #10
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Only one, I see it looking bad in is IE7 on Adobe BrowserLabs otherwise looks good in IE8 and IE9.

    Anyways thanks for your input deathshadow60 but it is almost done and is functional, as for the font and text this is temp till I get content for the site, just making design work.

    Also, Ryan take a look what I mean for the two lines which need to go overtop on the inside pages heres a link too what Im working on...

    http://modocom.ca/secstore/storage.html

    See how the image goes over top of the borders, would it be best to make another div the high of that area with a background image of the lines infront of the image div so that it still shows them, thats only way I can think of

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mbond5 View Post
    but it is almost done and is functional
    Well, let's just say I think we have a different definition of the word "functional" and leave it at that.

  12. #12
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Well ok, but can you explain or give some advice rather than just straight out bash stuff, let me know what you would do differently to achieve the look I'm trying to accomplish thats all, I come here for advice and to learn which people like Ryan and Paul have been great help too and I'm still learning and figured that this is working for the most part.

  13. #13
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mbond5 View Post
    Well ok, but can you explain or give some advice rather than just straight out bash stuff, let me know what you would do differently to achieve the look I'm trying to accomplish thats all
    That's the problem -- the 'look' you are trying to accomplish is not viable. That massive slideshow/banner thing for example is by itself larger than the screen on your average sub $800 laptop. It's a massive block of nothing; to go with the massive gaps between content at the top meaning on anything less than a 1200px tall display, the layout is painfully useless and will leave users bouncing or wondering like the old lady in the 80's Wendy's commercials "where's the beef" -- much less that images off theres' no content. Scripting off the whole page seems to break.

    You're using technologies that probably shouldn't even be on such a simple page in the first place -- and the markup reflects this. You've got more code just to load scripting nonsense than you do actual content on the page; 576k total for the whole page -- only 162k of that being able to be blamed on the images -- to deliver in terms of content less than 1k of plaintext...

    You have no heading tags, images for what's obviously text -- so get the text in the markup semantically instead of as images... swing an axe at all the pointless bloated javascript --- some 387k of it in five files; a sure-fire indicator something is amiss; like actually thinking jquery has something of value to offer.

    Even as is, you've got all sorts of extra div in there for nothing...

    Code:
    <div id="secure">
        	<img src="images/securestore.png" />
    </div>
    Should probably be a heading tag with meaningful text inside it with image-repacement. As topmost heading it wouldn't even need an ID/class.

    Code:
    	 <div id="navigation">
    Pointless wrapper.

    Code:
        <div id="wedo">
        	<p>WE DO:</p>
        </div>
    Assuming that would be a P, the DIV serves no purpose.... though you'd have a hard time convincing me that two words and a punctuation mark constitutes a paragraph; Also pretty much pointless text that just wastes space that could be better used to just show the menu and get the user to the actual content.

    Code:
        <div id="nav">
        	<ul>
    	        <li class="storage"><a href="storage.html">storage</a></li>
                <li class="structures"><a href="#">structures</a></li>
                <li class="logistics"><a href="#">logistics</a></li>
                <li class="about"><a href="#">about us</a></li>
                <li class="contact"><a href="#">contact</a></li>
            </ul>
        </div>
    Pointless DIV since there's nothing being applied that couldn't be done to the UL directly. Just as George Carlin once joked "not every ejaculation deserves a name" not every semantic block level tag needs a extra DIV around it.

    Code:
    	<div id="sidebar">
        
        	<div id="white">
            	<img src="images/white.jpg" />
            </div>
        	<div id="dot">
            	<img src="images/dot.png" />
            </div>
            <!-- DOT -->
        	<div id="logo">
            	<img src="images/logo.png" />
            </div>
            <!-- LOGO -->
        </div>
        <!-- SIDEBAR -->
    Pointless DIV around each IMG tag, NOT that those should even be in the markup since by all accounts that's presentation, not content.... meaning the entire div#sidebar may in fact serve no real purpose on the page. Oh, and your comment placements could trip rendering bugs in older versions of IE and FF -- YES, I said comments. They end up between floats, inline-blocks and several other complex formatting and you could have entire sections of the page not render, or worse render TWICE once atop the other slightly offset. It's why I put the closing comment BEFORE the closing tag, so can't end up between sibling elements.

    Code:
                    <div class="ls-layer" rel="slidedirection: left; slidedelay: 6000">
    					<img class="ls-s6" src="gallery/secure-slide1-lines.png" alt="sublayer" rel="durationin: 1400; easingin: easeOutQuart">
    					<img class="ls-s5" src="gallery/secure-slide1-graphics.png" alt="sublayer" rel="durationin: 3000; easingin: easeOutExpo">
    					<img class="ls-s2" src="gallery/secure-slide1-text.png" alt="sublayer" rel="delayin: 1400; easingin: easeOutBack">
    				</div>
    Presentation inlined in the markup, abuse of the REL attribute, all tied to the goofy script and images that are too large to be viable for use on a website and that are basically a waste of bandwidth for plaintext. Again, I'd axe that ENTIRE animooted banner as non-viable.

    But without seeing the actual content for every element or at the very least a reasonable facsimile, it's very hard to say what the HTML should actually be... since content should dicate the markup AND the layout -- no actual content, you have no business even MAKING the layout or the markup.

    ... and of course I'd swing an axe at the html 5 for nothing nonsense letting you lose the stupid pointless shiv, axe the redundant/pointless meta's (like setting robots to the default?)...

    So something more like:
    Code:
    <!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"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <link
    	rel="shortcut scon"
    	href="images/favicon.png"
    />	 
    
    <title>
    	SecureStore
    </title>	 
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<h1>
    		SecuStore
    		<span></span>
    	</h1>
    	
    	<ul id="mainMenu">
    		<li><a href="storage.html">storage</a></li>
    		<li><a href="#">structures</a></li>
    		<li><a href="#">logistics</a></li>
    		<li><a href="#">about us</a></li>
    		<li><a href="#">contact</a></li>
    	</ul>
    	
    	<hr />
    		
    	<div id="content">
    	
    		<p>
    			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in purus nisl, non lobortis mauris. Aliquam condimentum dapibus justo quis pulvinar. Integer nunc velit, porta vitae congue non, lobortis eget elit. Nunc mi nunc, pharetra sit amet fringilla dignissim, elementum sed nunc. Nunc sodales condimentum porttitor. Aenean pretium ipsum vitae tellus aliquet tincidunt. Phasellus dignissim tempus sapien ac euismod.
    		</p><p>
    			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in purus nisl, non lobortis mauris. Aliquam condimentum dapibus justo quis pulvinar. Integer nunc velit, porta vitae congue non, lobortis eget elit. Nunc mi nunc, pharetra sit amet fringilla dignissim, elementum sed nunc. Nunc sodales condimentum porttitor. Aenean pretium ipsum vitae tellus aliquet tincidunt. Phasellus dignissim tempus sapien ac euismod.
    		</p>
    		<a class="button" href="#">send us your rfp</a>
    		
    	<!-- #content --></div>
    	
    	<hr />
    	
    <!-- #pageWrapper --></div>
    
    <div id="footer">
    	Sample footer content
    </div>			
    
    </body></html>
    Though again, no clue what I'd replace that animated banner with -- probably something a bit leaner on the bandwidth like actually just leading in with text describing the companies purpose, maybe with a small (256px or narrower) trailing plate. (trailing plate == floated right image. Leading plate == floated left... just plain plate == center.)

    All those extra DIV you had -- pointless, especially up top/before the banner.

  14. #14
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks unfortunately I need the large slider as that is how the designer designed it and has been approved same as the layout.

    I will flush out all the extra divs now that you mention they are pointless. I understand where your coming from and definitely appreciate all the feedback, but with my current layout which is what I need to go on, is there any help you could provide to make it look same in IE7 as does in IE8/9 and all Firefox, Chrome and Safari.

    Currently looks good in everything from what I can tell except IE7. Any suggestions to fix it there.

    Thanks for the feedback and I really appreciate it man, will keep into consideration for future projects

    Mike

  15. #15
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mbond5 View Post
    Thanks unfortunately I need the large slider as that is how the designer designed it and has been approved same as the layout.
    Pfft. "Designers" - that explains a lot. People who think because they can draw a pretty picture in Photoshop that they have any business making layouts for websites.

    When implementing their "designs" usually means a broken buggy bloated inaccessible disaster. Whoever came up with this whole "draw a pretty picture first" approach to making websites needs to be put down like Old Yeller.

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You could use position:relative and move it over with a negative left offset value to drag it across.

    As DS mentioned, this design is kind of complicated to do. It's not feasible to make some pretty design in photoshop and just convert it to code. It doesn't always work like that.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  17. #17
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan, I ended up putting lines on the SecureStore image which is ontop of the slider and seems to work except of course in IE7 where lots doesnt work, do you know if theres a few fixes to make to it so it looks like it is now in all the other browsers as in IE7. I know what you guys mean when it comes to the design it definitely is more complicated then I expected when designer said it was simple lol

    Thanks

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, I managed to get a look at IE7. Pretty simple to fix
    Code:
    #nav{clear:both;}#main{position:relative;}
    #secure{top:0;left:0;}
    I'll explain.
    The #nav is clinging to the #wedo element, because taht's floated. You need to clear it under.
    The #main element code above is to have a stacking context for the absolute element #secure. Which brings me to my next point. You need to set coordinates for AP elements, which #secure was msising. If you add in the coordinates, it removes the guessing that the browsers do (which IE differs in greatly most of the time)

    Hope that was able to help .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  19. #19
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TehYoyo
    Native IE8 looks fine.

    Plugging it into Browser Lab, IE6 gets majorly --------...er...screwed up. IE7 has some improvement, although the slideshow is still a bit left of it's intended position. IE9 is fine.
    Quote Originally Posted by RyanReese View Post
    IE6 is pretty bad (ignore it. It's dead)
    Ie7 is pretty screwed up
    IE8/9 are fine.
    Thanks Ryan

    mbond5, if you don't want criticism, then don't post here.

    Most (although leaning more heavily told all of what he says is right. It's good advice to keep in mind, although it can be given harshly.

    You really should change the sans-serif fonts. In general, sans-serif for headings and serif for body text. Hence why Times New Roman (or a similar, easily-readable font) is the main body font for major publications.

    Really try to limit the images. they take up a lot of space.

    For instance, the green dot at the top could be done with CSS (border-radius) and even if it ended up square, it wouldn't even look that bad. In fact, the large part of your website could be done with CSS.

    I'm not a fan of the slideshow. Cool? Yes, but also unnecessary. The purpose of your slideshow at this point is to redirect. Static images are fine.

    ~TehYoyo

  20. #20
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You really should change the sans-serif fonts. In general, sans-serif for headings and serif for body text. Hence why Times New Roman (or a similar, easily-readable font) is the main body font for major publications.
    There is actually some debate as to whether serif or sans-serif are easier to read on a computer screen. I tend to lean more towards sans-serif for body text as I think it is easier to read.
    Bryan Waldron
    Waldron Digital Designs
    waldrondigitaldesign.gmail.com

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    @tehyoyo, border radius is a huge task for browsers and there is much doubt in my head as to whether an image would take less processing time than border radius . Both of which don't really matter because of the speed these days
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  22. #22
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by waldo567 View Post
    There is actually some debate as to whether serif or sans-serif are easier to read on a computer screen. I tend to lean more towards sans-serif for body text as I think it is easier to read.
    NOT to drag things way off topic, but...

    Most of the 'debate' is by people who don't take time to think about it or understand that *shock* screen and print are two radically different devices (though Apple is trying to do something about that with 'retina')

    Serifs DO help legibility in print... there are tons of studies that show it makes it easier to distinguish each glyph when the glyphs are fully formed... but to be fully formed you need analog print (daisy wheel, old-fashioned typeset) or really high DPI (300+)... this is consistent with modern print where your average professional printing STARTS at 1200dpi. That's plenty of dots in a inch to form the entire glyph and it's serifs properly. a 12 point character getting anywhere from 50 dots height on a crappy 300dpi laser to as much as 800 dots in high end professional lithography.

    Screen just doesn't have the resolution or pixels per inch for that... you take a 14px "comfortable" font from a OS that 'thinks' it's running at 96dpi (which is usually a lie on the actual display) that gets if you are lucky 13px from the caps-line to the descender... roughly a quarter of normal print from a cheap printer and half that of the barely legible 'draft' print. There aren't enough pixels to render serifs as anything more than a blurry mess... which is why serifs on screen are usually a bad idea at 'normal' (12px to 18px) sizes. You bump the sizes up to give them enough pixels and combined with anti-aliased/font hinting rendering, then you can use serifs.

    It's also why you never saw a whole lot of serif fonts being used in the 9 pin dot matrix printer days.

    Though there ARE exceptions -- and we don't get to use them. Raster fonts can often get away with serifs on as little as 8px height -- because each character is crafted EXACTLY for that size. Dynamic/vector type fonts -- like postscript and truetype -- can't be done that way. The original IBM PC CGA text is a great example of this -- a legible serif font that fits each character into 8x8 with no hinting/smoothing/aliasing. Good luck getting that out of a vector font.

    It's something the people who pimp vector graphics like they were the second coming don't like to talk about. Vectors are great for scaling up -- but scaling down below a certain point they fall apart miserably; and that's where raster graphics really start to shine... though raster of course falls apart the moment you try to resize it.


Bookmarks

Posting Permissions

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