Border Line on Div To Reach The Footer

HTML & CSS
1

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

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.

3

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 :smiley: (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

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 :slight_smile:

5

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

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 :p.

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.

7

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

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

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

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

Well, let’s just say I think we have a different definition of the word “functional” and leave it at that.

12

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

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…


<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.


	 <div id="navigation">

Pointless wrapper.


    <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.


    <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.


	<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.


                <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:


<!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

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 :slight_smile:

Mike

15

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

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.

17

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

Hi, I managed to get a look at IE7. Pretty simple to fix :slight_smile:

#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 :).

19

Thanks Ryan :lol:

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

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.