Layout Disaster! (CSS)

HTML & CSS
1

Hi guys. Here’s the design I’m trying to code:

I’m supposed to code everything except for the “what people are saying” section.

I’m a beginner designer and coder so I didn’t realize that this design would look kinda awful on a wide screens compared to the Photoshop mock up. If you guys have any suggestions on how I can make it more like the attachment without having too much space on the sides on wider screens or making the content too wide, please tell.

But that’s not the biggest problem. If you re-size or zoom, the layout completely gets destroyed. I was trying to center the main image (it’s supposed to be a slideshow, but I’m going to add then in later) with the airplane. But I can’t use the margin:auto because floats/widths crap that’s confusing. I tried wrapping the slideshow div in a container, but it didn’t work.

CODE: http://www.myairportsedan.com/redesign/index.html

Thanks in advanced.

2

How are you setting widths? If in PX, and not %'s, of course it will look bad at most but all one resolution.

If you work at setting your widths to percentages you should see imporovement. Can you give us a site where this is at? We can point you in the right direction.

Margin:0 auto; works on static block elements with a width. Why can’t you use it here? If you provide us with the site we should be able to show where you are going wrong :).

3

I’m using percents but it still doesn’t look as good. I guess I shouldn’t expect it to look exactly the same. I’m not going to worry about the width size issue for now. The thing that is really messed up is the floats and I can’t get it to center. Floats are really bothering me. I added the link in my original post to the site so you can view the source: http://www.myairportsedan.com/redesign/index.html

4

You can’t get the content to center? Where is your attempt? #main just needs a width and margin:0 auto; to center. If the children are floats, it needs overflow:hidden; also to contain the floats

If you are having other issues you need to be more specific :). Issues with “floats” doesn’t help me help you :p.

5

I tried that if you look at the slideshow div. It’s overflowed plus I tried clearing it by adding a blank block type span. Also, the main is the very outside so it cannot have a width. Also, if you read my original post, it says that if you re-size the layout or zoom in twice, the layout completely breaks. I’m trying to prevent it from breaking. The floats start getting messed up when you zoom in or resize. I’m using percentages for the layout and ems for font sizes.

6

Welcome to why I don’t consider most photoshop jockeys to be qualified to draw a pretty picture of a website in the first place. That’s chock full of “accessibility, what’s that” and “but I can do it in Photoshop” – things even many advanced developers would kick the PSD jockey in the groin over.

It’s a fixed width design, it’s going to be too big for small screens, look stupid on big screens, and there’s not a whole lot you can do other than call the ‘artist’ out for not knowing enough about the Internet to be drawing their goof-assed pictures in a paint program.

Not a lot you can do other than have it suck for everyone except the handful of people who have that magical combination of screen size and resolution the artist did.

7

I’ve found out by my altering the width in my photoshop design that I can still make it look reasonable on all sizes. So you guys don’t have to worry about the screen width issue.

JUST TELL ME HOW TO FIX THE LAYOUT BREAKING PLEASE.

8

Your problem is that no widths on anythign are set. On your floats (for example, the header), you have no width set on the social icons OR the nav. So when the width (from zoom) is too big, it’ll break. Set widths on them and make sure with those widths (such as percentage widths) that it will never overlap.

The same concept goes for the other stuff on the page :). Set font sizes using ems so that it’ll scale with text resize, and set widths (either ems or %'s) to allow scaling :).

9

I’ve found out by my altering the width in my photoshop design that I can still make it look reasonable on all sizes. So you guys don’t have to worry about the screen width issue.

What is begin said… andd take that this is coming from another “photoshop jokey” is that that is just a PLAIN BAD strategy for web design, web coding , web acessibility and web apeal. DON’T DO THIS. :slight_smile:

First off you really need to separate your content from your style. that too is strategy. For example why did you have your gradients as IMAGES in the HTML?? On a lesser notes are the icons and logos “content”??? In the case of the gradients I am 100% sure that’s a “no” and in the case of the icon, I would also lean towards a negative answer.

Eliminate BRs. You also had some minor typos… gotta watch out for those as they will cause “mysterious looking bugs”

Don’t have elements (divs and such) merely to hold backgrounds… for example I eliminated all your class =“hr” divs. added the class to the Hxs. Now what you have to remember is to add padding-bottom equal to the height of your hr image and set background-position bottom left.

MANY MANY more things… but here is a rough of what I mean, hope it helps:



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
	
<html>

<head>

	<title>Get affordable car service with My Airport Sedan</title>
	
	<meta name="description" content="Your affordable limo, sedan, and SUV company serving BWI, IAD, and DCA airport." />
	
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<style type="text/css">
	/* http://meyerweb.com/eric/tools/css/reset/
	v2.0 | 20110126
	License: none (public domain)
	*/

	html, body, div, span, applet, object, iframe,
	h1, h2, p, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video
	{
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* End of Reset */

	#icons{
		float: right;
	}
	
	#icons img{
		margin: 0 .3em;
	}
	
	div.hr {
		height: 15px;
		background: #fff url("images/hrLineImage.png") no-repeat;
	}
	
	div.hr hr {
		display: none;
	}
	
	body{
		font-size: 100%;
		font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
		color: #3c3c3c;
		padding: 1em 0 0 0;
		min-width: 850px;
	}
	
	
	#nav .wrap, #main, #footer>*{margin: 0 20%;}
	h1{
		font-family: Tahoma, Geneva, sans-serif;
		font-size: 2em;
		width: 15em;
		text-transform: uppercase;
	}
	h1 small{
		display:block;
		color: #a1d4df;
		font-weight: bold;
		font-size: 60%;
		text-transform: none;
		margin-top:-.4em;
	}
	h1 span:first-letter{font-size: 1.2em;}
	h1 span {display:inline-block;}
	.my{color: #1faecc;}
	
	#nav{background:url('images/gradNav.jpg')repeat-x bottom left;}
	#nav .wrap{
		overflow: hidden;
		position:relative;
	}
	#nav li a{
		display: block;
		text-decoration: none;
		font-size: 1.2em;
		font-family: Tahoma, Geneva, sans-serif;
		color: black;
		font-weight: bold;
		padding: 1em 1em 0 1em;
	}
	#nav {padding-bottom:1em;}
	#mainNav li, #social li{
		float: left;
	}
	
	#nav ul{
		list-style-type: none;
	}
	
	#mainNav .current{
		color: #1faecc;
	}
	
	#mainNav a.first{
		padding: 1em 1em 0 0;
	}
	
	#social{ position:absolute; top:0; right:0;}
	#social li{ float: right; height:41px; width:41px; font-size: 50%; font-weight:normal; margin-left: 20px; overflow: hidden }
	#social li a { position: relative}
	#social a:after{ position: absolute; top:0 ; left:0;height: 41px; width:41px;  }
	#social .fb a:after{  background: #fff; content:url(images/fbIcon.png); }
	#social .tw a:after{  background: #fff; content:url(images/twIcon.png);}
	#social .gg a:after{  background: #fff; content:url(images/gpIcon.png);}
	
	
	#slideshowCont{
		background: #80d4e8;
		overflow: hidden;
		line-height: 1;
	}
	#slideshow  {margin:0 auto;background: url(images/leftGrad.jpg) repeat-y left top; padding:0 108px; width:830px;}
	#slideshow .wrap{margin:auto;background: url(images/rightGrad.jpg) repeat-y right top; margin-right:-108px; }
	#slideshow img{ display:block; margin-right:108px; }
	
	.wheels:after{content:url(images/carsIcon.png);}
	.transfer:after{content:url(images/planeIcon.png);}
	.hr {padding-bottom:15px;}
	
	#main {overflow:hidden;}
	.fleet li, .airport li{float:left; width: 33.3%; list-style: none;}
	.fleet li>a:before, .airport li>a:before{content:"> "}
	.Limo:before { content:url(images/limoIcon.png); display:block; margin:0:auto;}
	.Sedan:before { content:url(images/sedanIcon.png); display:block; margin:0:auto;}
	.Bus:before { content:url(images/busIcon.png); display:block; margin:0:auto;}
	.BWI:before { content:url(images/bwiLogo.jpg) "BWI"; display:block; margin:0:auto;font-weight: bold;font-size:65px; line-height: 1}
	.IAD:before { content:url(images/bwiLogo.jpg)"IAD"; display:block; margin:0:auto;font-weight: bold;font-size:65px; line-height: 1}
	.DCA:before { content:url(images/bwiLogo.jpg)"DCA"; display:block; margin:0:auto;font-weight: bold;font-size:65px; line-height: 1}	
	.airport strong{display:block;}
	
	#footer{ background: #555;}
	</style>
	
	
	

</head>

<body>
	<div id="nav"><div class="wrap">
		<h1><span class="my">My</span> <span>Airport</span> <span>Sedan</span> <small>Your Affordable Luxury</small></h1>
		<ul id="social">
			<li class="fb"><a href="#">Facebook URL</a></li>
			<li class="tw"><a href="#">Twiter URL</a></li>
			<li class="gg"><a href="#">Google URL</a></li>
		</ul>
		<ul id="mainNav">
			<li><a class="first current" href="#">Home</a></li>
			<li><a href="services.html">Services</a></li>
			<li><a href="rates.html">Rates</a></li>
			<li><a href="bookUs.html">Book Us</a></li>
			<li><a href="aboutUs.html">About Us</a></li>
		</ul>
	</div></div>
		<div id="slideshowCont">
		<div id="slideshow"><div class="wrap">
			<img src="images/ss1.jpg" />
			<!-- slideshow goez here -->
		</div></div>

		</div>
		
		<div id="main">
		
				<div id="content">
			
					<p>

					Anyone who has ever lived, worked or traveled to the Washington D.C. or Baltimore area will agree; there is nothing more frustrating than driving in DC traffic, especially in the traffic that thrives around the area's major airports. Don't make your trip any more stressful than it needs to be, but take advantage of <b><i><span class="my">Your</span> Airport Sedan</i></b> and let us do the driving! <a href="aboutUs.html">Read More.</a>
					</p>
					
					
					<!--Reviews not working till Google fixes it.
					<h2>What People are Saying <img src="images/reviewIcon.png" /> </h2>
					div class="hr"><hr />/div> -->
				
					<h2 class="hr wheels" >Your Fleet </h2>
				    <ul class="fleet">
						<li class=" Sedan"><a href="bookSedan.html"> Book a Lincoln Towncar Sedan</a></li>
						<li class=" Limo"><a href="bookLimo.html"> Book a Lincoln Towncar Stretch Limo</a></li>
						<li class=" Bus"><a href="bookBus.html"> Book a coach bus</a></li>
					</ul>
					
					<h2 class="hr transfer">Airport Transfers</h2>
				    <ul class="airport">
						<li class="BWI">
							<strong>Baltimore Washington Intl Airport</strong>
							<a href="bwi-airport.html">Book a reservation to/from BWI</a>
						</li>
						<li class="IAD">
							<strong>Dulles International Airport</strong>
							<a href="iad-airport.html">Book a reservation to/from IAD</a>
						</li>
						<li class="DCA">
							<strong>Reagan National Airport</strong>
							<a href="iad-airport.html">Book a reservation to/from DCA</a>
						</li>
				    </ul>
			</div>	
			
		<!--content--></div>	
	<div id="footer">
		<div class="wrap">footer goez here</div>
	</div>
</body>
</html>
10

Wow, I love how you fixed everything for me. Thank you so much, except one thing really worries me. The pseudo classes you used like :first, :before, etc, are they compatible with IE7? Because I heard that they don’t work so well with IE7. These are my stats for visitors that use IE over 4 month period:

  1. 8.0 - 775 - 56.12%
  2. 9.0 - 395 - 28.60%
  3. 7.0 - 197 - 14.27%
  4. 6.0 - 14 - 1.01%
    197 visitors is a lot so I need to have full support for IE 7. I don’t care about IE6 anymore.
    Please tell me what I can do for IE7.

Oh and thanks for the great tips. I’ll remember to use a better strategy next time.

11

Instead of using hte pseudo class, you can just assign a class in the HTML instead and reference the class instead of :first, etc.

12

Same with :after. All it does is basically create this span below. Say I had a div with text in it and in the CSS I had :after set for it.

<div>text here<span></span></div>

The span is “created” due to :after. So if you want :after replicated, you’d need additional HTML, or you could find an alternative way to get your desired result. I haven’t seen the page in question so I don’t even konw if I’d go the :after route.

13

Sorry, I think I don’t understand you. Are you saying to use a span tag with some class at the end of whatever I want and style that instead of using :after?

14

If I understand correctly, :after is just another way of selecting an element, like :first-child, etc.

I just tend to use classes. Easier to remember, much less buggy.

I hate to keep beating a dead horse, but that’s why you shouldn’t use only Photoshop to make a website. I have no problem w/ Photoshop for the pre-development stage, but when you start basing your entire design off of PS, that gets to be a problem.

~TehYoyo

15

Yes, but we’re talking about alternatives to the pseudo classes so the site will be compatible with IE7.

16

Hence…non-pseudo classes.

17

Glad to help.

I am notoriously lazy for this, but there are more techniques you can EASILY proportional to support needed.

for example IE 6 doesn’t do + or > but you can add the classes in the mark up. Yeah it’s a bother and only slight clutter of the HTML, but if you MUST support an 11 year old browser…

For example to turn this: li>a{…} to li .child and add “.child” to the A thats a DIRECT CHILD of your LI and there u have IE6 support.
as far as peseudo ELEMENTS: Add a conditional comment for IE<8 ( as IE8 has :before/:after) and put this in it:


 [B]ALL selectors that you INTEND  to have pseudo classes [/B]	{zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
	);	

  zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('afterBegin','<span class="before"></span>')
	);}
[B]selector that has  .after [/B]{ your :after style}
[B]selector that has  .before[/B] { your :after style}
[B]other selector that has  .after[/B] { your :after style}
[B]other selector that has  .before [/B]{ your :after style}

essentially the first part of this generates a fake : before/after… ( actually I normally separate those two, but i wanted to condense this explanation. And then your rule is written in selector .after/select .before{}. The Conditional comment serves to keep everything as valid as it’s going to be… :slight_smile:

OR
you could just do it manually,and actually use a blank INLINE element,with a class .before/.after in your HTML. then replace all the :before/:after with .before/.after.

Again, I go for AVOIDING alterations to the MARK UP as much as I can.

Again, hoe that helped.

18

It just doesn’t “select it”…it CREATES IT, and then gets the applied styling.

19

ah crap, I’m not so good with JS so I can’t really do that. I guess I’ll have to put this project to the side until I learn some more JS. Any other ways I can do this with just plain html/css?

20

Although they are rendered by browsers through CSS as if they were like other real DOM elements, pseudo-elements themselves are not part of the DOM, and thus you can’t select and manipulate them with JS/any other library.