First Post- Web Design for all Resolutions

Page 1 of 1

5 Replies - 440 Views - Last Post: 28 June 2012 - 02:38 PM

#1 0rchid0  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 20-June 12

First Post- Web Design for all Resolutions

Posted 28 June 2012 - 07:49 AM

Hi guys. I'm new here, so if I haven't asked the right questions or given the right information, please be gentle!

So, I'm building a website right now, and I'm having a big of an issue. My laptop's screen is 17 inches, and rather wide. The layout looks fantastic on my screen, but when pulled up on a smaller screen, pretty much everything cuts off or runs into everything else.
I've tried position:fixed and position:absolute for a lot of it, but I'm unsure whether or not I'm violating some rather basic and important scruples with regard to CSS/HTML design. I wrote most of the code from scratch, so maybe I'm not structuring it properly. Tips on how to make this code more flexible would be appreciated!

The website is bellaandcharlie.com. I would post code, but I have no idea where to start. :/

Is This A Good Question/Topic? 0
  • +

Replies To: First Post- Web Design for all Resolutions

#2 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: First Post- Web Design for all Resolutions

Posted 28 June 2012 - 09:13 AM

The problem is that you're using percentages for your widths, and as you re-size the browser the site will shrink down accordingly. And because you've designed it for a specific site it may mess up on other screen sizes, in terms of alignment and things overlapping.

Do you want a percentage based width or a fixed width site?

Don't use position absolute to position the main wrapper.

- Also, you should use a DOCTYPE, like the XHTML doctypes, or the HTML5 one.
- I would recommend using a reset css file, to zero out the browser defaults. Like this one for example http://meyerweb.com/...ools/css/reset/

This is an example of a fixed width layout I mocked up: (This will always remain the same width when resizing the browser. View it here: http://jsfiddle.net/j5s4E/ or copy the following:


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>

<style>
	

#wrapper { width:960px; margin:0 auto; border:1px solid #000; }
header { height:100px; background-color:#eee; border-bottom:6px solid #ccc }
footer { height:30px; background-color:#eee; border-top:6px solid #ccc }


</style>

</head>
<body>
	

<div id="wrapper">

	<header>
		
		<h1>Header</h1>
	</header>
	<div id="content">
		<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p>

		<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p>


	</div>

	<footer>
		<span>Footer text here</span>		
	</footer>

</div>

</body>
</html>

Was This Post Helpful? 1
  • +
  • -

#3 0rchid0  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 20-June 12

Re: First Post- Web Design for all Resolutions

Posted 28 June 2012 - 10:31 AM

I'm a bit ignorant to some what you're saying, I must admit.
Thank you for the tip on the reset file. Defo going to use it.

I think I want a fluid layout, but I don't think I can do it, due to certain page elements (the link bubbles are arranged on the page using fixed pixel data. I suppose as long as I focus on making it 800x600 compatible, a fixed layout should be alright? Is there any way to arrange certain page elements fluidly? With the bubbles it's: 
.contactlink {
  width:              310px;
  height:             85px;
  position:           absolute;
  top:                 2px;
  left:                870px;
  background:     url(../images/nav_cloud_4.png) no-repeat;
  padding-top:     12px;
  padding-left:    160px;
}


The bubbles are the whole reason I used that div. The central image moves if I don't pin it down.

Would the general consensus be fixed-width in this case? Or is there another way to render the same effect using a fluid layout?

Thank you for the help, btw!

My apologies for any typos... I don't seem to have an edit button. :/
Was This Post Helpful? 0
  • +
  • -

#4 0rchid0  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 20-June 12

Re: First Post- Web Design for all Resolutions

Posted 28 June 2012 - 12:08 PM

Now that I've implemented all of this, I'm having a massive problem with getting the body content not to bunch up into the header and nav space. How can one tackle that?
Was This Post Helpful? 0
  • +
  • -

#5 DarenR  Icon User is offline

  • D.I.C Lover

Reputation: 200
  • View blog
  • Posts: 1,540
  • Joined: 12-January 10

Re: First Post- Web Design for all Resolutions

Posted 28 June 2012 - 01:24 PM

if your floating your image and other items with %'s and your placing position absolute then all your junk will colapse on itself. You should try to stay away from absolute and just use percentage for everything
Was This Post Helpful? 1
  • +
  • -

#6 0rchid0  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 20-June 12

Re: First Post- Web Design for all Resolutions

Posted 28 June 2012 - 02:38 PM

Thanks Daren. I'll try to implement that.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1