Killersites.com Homepage Welcome Guest   |   Register  |  Login
Login Name Password
  Search  
  Index  | Recent Threads  | Unanswered Threads  | Who's Online  | User List  | Help


Quick Go »

No member browsing this thread
Thread Status: Active
Thread Type: Sticky Thread
Total posts in this thread: 39
Posts: 39   Pages: 4   [ Previous Page | 1 2 3 4 ]
[ Jump to Last Post ]
Post new Thread
Author
Previous Thread This topic has been viewed 39658 times and has 38 replies Next Thread
Male gavinmcnamee
Stranger




Joined: Mar 20, 2008
Post Count: 2
Status: Offline
Reply to this Post  Reply with Quote 
Re: Standard - floating nav and banner

I think these layouts are very standard, but with the correct styling you can build websites that you would never recognize as using these. That is the beauty of web design. I find that you will use these designs very roughly and then it is the finer details that will add the flare and uniqueness!
[Mar 20, 2008 11:10:04 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male mukesh_vasava
Stranger



India
Joined: Jun 10, 2008
Post Count: 2
Status: Offline
Reply to this Post  Reply with Quote 
applause Re: Standard Website Layouts

can i get more examples for layouts????
[Jun 10, 2008 5:11:44 AM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest    mack_47_135@yahoo.co.in [Link] Report threatening or abusive post: please login first  Go to top 
Male gigaturn
Stranger
Member's Avatar


Joined: Jun 17, 2008
Post Count: 6
Status: Offline
Reply to this Post  Reply with Quote 
smile Re: Standard Website Layouts

CSS 2.0 is very powerful to create these layouts alongwith browser/OS compatibility.

I am using same for my site [URL deleted as spam]
----------------------------------------
[Edit 1 times, last edit by LSW at Jun 17, 2008 12:22:07 PM]
[Jun 17, 2008 11:51:38 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male MacRankin
Advanced Member
Member's Avatar


Joined: Dec 18, 2005
Post Count: 368
Status: Offline
Reply to this Post  Reply with Quote 
Re: Standard Website Layouts

Blimey, talk about d�j� vu, or what? But, haven't I said this before somewhere..?
I'm having another go at creating a more simplified version of my website, so that I can get to grips with this stuff again.

Anyway, I was wondering; do you contain the whole body in a wrapper, or do you do as I have in the past and create the wrapper just for floating divs beneath the header and nav bar divs?

Also, are there any issues that might crop up as a result of doing either?

I am yet again having another go at re-re-creating a more simplified... Oh well, anyway, you get the picture.

For the last couple of days now, I've been working on a new holy grail. Well, it's not really holy, but it has got some lovely holes in it.

The funny thing is, that that question I once posed concerning whether one should use one wrapper to contain the whole layout, or a smaller wrapper to contain just the 3 floated divs has yielded quite an interesting development.

As far as I can tell, it works in most browsers, except for I.E. on Windows 2000, which is a bit disappointing, really, because I.E. on Windows 2000 has always been more stable (would you believe) than that other pile of useless dren spread all over the shop.

Anyway, I haven't really done any serious testing with it, but once I've completed all my commenting within the html file itself, including commenting between css code, maybe then, I'll let billyboy eye it over, and if he thinks it's ok, then I'll let it loose here in the wild. biggrin
----------------------------------------
We Brits do things differently, but we still get shot at!
[Sep 14, 2008 4:50:01 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male MacRankin
Advanced Member
Member's Avatar


Joined: Dec 18, 2005
Post Count: 368
Status: Offline
Reply to this Post  Reply with Quote 
Re: Standard Website Layouts



Hi there Stefan smile

3 Equalizing Column Layout with header and footer & Your Javascript
Erm, I've again taken your excellent matching divs javascript, and applied something akin to a layout that seems to work in IE, but only up to a point.

I have been testing it on emulated versions of IE 6 & 7. In IE6 it will break if you wave the view-port around and to a smaller than average screen size.

I have not noticed this, though with IE7. The thing I am noticing though that is apparent with all browsers is when you do wave the view-port or browser window all over the shop, the text over-runs their containing divs.

The only way the text can be restored when the browser window is moved around like this, is to re-fresh the page. The page cannot be simply re-sized from the menu, sadly.

Is there a way you think of say, applying another javascript to instantly re-fresh a page if its view-port is re-sized in this way? Or perhaps there is a simpler way to prevent this from happening?

Re-sizing from the menu does not present the same problems, thankfully...

http://www.macrankin.co.uk/web_projects/layouts/grail_hunting/tp_02.html
----------------------------------------
We Brits do things differently, but we still get shot at!
[Oct 13, 2008 5:57:44 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male Voyd
Stranger




Joined: Oct 1, 2008
Post Count: 9
Status: Offline
Reply to this Post  Reply with Quote 
Re: Standard Website Layouts

First Template Submission - Fixed Centered 2 Column Layout

CSS hacks? IE conditional statements?

You don't need them for this layout. Ok, some IE Cond Statements will be needed to adjust padding and margin errors in IE when adding background images in the top, left and footer divs (to be pixel perfect).

Let me know if you see any bugs, etc., b/c this is what I use for a lot of my sites now. This is like the fifth edition and seems to hold up really well. It will accomodate a browser of 765px or wider.
Enjoy! smile


CODE: All css is included. Add your own personality to dress this up.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Template</title>
<meta name="Keywords" content="key, words">
<meta name="Description" content="Description">
<meta name="Author" content="MaineWebworks http://mainewebworks.com">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
/* Global Style */
body{
margin:0;
padding:0;
font:100% Arial,sans-serif;
background:#f2f2f2;
color:#333;
}
p {
margin:0;
padding:5px;
font-size:95%;
line-height:1.3em;
text-align:left;
}
blockquote p {
margin:0;
padding:0;
font-size:85%;
font-style:italic;
color:#808080;
}
ul {
margin-top:0;
color:#000;
}
li {
line-height:1.4em;
}

/* Structure and minor style */
#wrap{
position:relative;
margin:0 auto;
padding:0;
width:765px;
border:0;
background:#fff;
color:#333;
}
#top {
margin:0;
padding:0;
width:100%;
height:120px;
background:#fff;
border:1px dotted #808080;
color:#000;
}
#logo {
margin:0;
padding:0;
background:transparent url(your_logo.jpg) no-repeat top left;
width:270px;
height:100px;
color:inherit;
}
#top h1 {
margin:-50px 0 0 290px;
padding:0;
font-size:120%;
}
#main {
margin:0;
padding:0 15px;
width:500px;
float:right;
border:1px solid #333;
background:#fff;
color:#333;
}
#main h1{
margin:5px 0 0 0;
padding:0;
text-align:center;
font-size:105%;
}
#main h2{
margin:10px 0 0 5px;
padding:0;
font-size:95%;
}
#left {
margin:0;
padding:0 15px;
width:200px;
float:left;
background-color:#DADADA;
color:inherit;
}
#left ul {
margin-left:10px;
padding:0;
}
#left li {
list-style-type:none;
}
#bot {
margin:0;
padding:20px 0 0 0;
clear:both;
height:50px;
font-size: 70%;
background:#808080;
}
#bot p{
text-align:center;
}
.divider {
padding:10px;
text-align:center;
}
</style>

<!--[if lte IE 6]>
use for an alternate style sheet geared for IE fixes
<![endif]-->

</head>

<body>
<div id="wrap">
<!-- sof Head -->
<div id="top">
<div id="logo">&nbsp;[add your logo here]</div>
<h1>Company Name or Tag Line</h1>
</div>
<!-- eof Head -->

<!-- sof Main **right side** -->
<div id="main">
<h1>HEADER 1 TEXT - TOPIC 1 INTRO</h1>
<p>The beautiful thing about this 2 column layout is the left navigation. It is the last container block before the footer, yet it floats to the top left of the page. THe css is plain jane. Normally, it would contain background images, and pretty mark-up for the text. Also, it should be linked from an external file. For example: link < rel="stylesheet" type="text/css" href="style.css" ></p>
<h2>Header 2 Text - Sub Topic</h2>
<p>This is an important technique because it creates a more search engine friendly page. SE's will index the test content in the main div before crawling the left side links.</p>
<p><strong>The Benefits</strong> &mdash;</p>
<ul>
<li>No css hacks</li>
<li>no IE conditional statements</li>
<li>validates 4.01 strict</li>
</ul>
<p><strong><em>Look Ma! No tag soup!</em></strong></p>
<!-- a bit of deco -->
<div class="divider">? ? ?</div>

<h1>HEADER 1 TEXT - TOPIC 2 INTRO</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sagittis, leo a adipiscing tincidunt, massa erat ultrices lorem, non nonummy lorem risus ac orci.</p>
<blockquote><p>Here is a blockquote. Here is a blockquote. Filler text for the purpose of filing a blockquote container.</p></blockquote>
<p>Filler text Filler text Filler text</p>
</div>
<!-- eof Main -->

<!-- sof Left Side-->
<div id="left">
<p><b>plain ul vanilla menu</b></p>
<ul>
<li><a href="#nogo" title="">Link</a></li>
<li><a href="#nogo" title="">Link</a>
<ul>
<li>&ndash;> <a href="#nogo" title="">nested links</a></li>
<li>&ndash;> <a href="#nogo" title="">nested links</a></li>
</ul>
</li>
<li><a href="#nogo" title="">Link</a></li>
<li><a href="#nogo" title="">Link</a></li>
</ul>
</div>
<!-- eof Left Side-->

<!-- sof Footer -->
<div id="bot">
<p>Copyright &copy; 2006 Your Name. All rights reserved.</p>
<p><a href="http://mainewebworks.com" title="maine web development">Design & Development by MaineWebworks</a></p>
</div>
<!-- eof Footer -->

</div>
<!-- eof wrap-->
</body>
</html>

*some of the html characters did not post well here. You can go to http://maine-webworks.com/forum-posts/2_column_css/index.html to get the source code.

Compatible for IE6+, NS6+, and Firefox. (it degrades ok in IE 5.0, 5.2, 5.5, NS 4.78 and others) To see this in various browsers/OS, go to http://www.browsercam.com/public.aspx?proj_id=234474

-John

Well I started webdesign not long ago and am still taking baby steps xD Just finished the Opera web standards curriculum and it helpd ALOT.

My question is ... is it possible to add a scroll bar where the h1,h2 are to be able to add more info ?? Also if I wanted to display the info in like pages to be able to display older info how would I be able to pull that off??? xD

THX for your help
~Voyd

*back to fooling around with your htm*
[Dec 4, 2008 8:35:36 AM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male Wickham
Advanced Member
Member's Avatar

UK
Joined: Sep 17, 2007
Post Count: 590
Status: Offline
Reply to this Post  Reply with Quote 
Re: Standard Website Layouts

is it possible to add a scroll bar where the h1,h2 are to be able to add more info ??

You can create a scrollbar for any div. In this case add overflow: scroll and a height to #main:-

#main { overflow: scroll; height: 400px;
margin:0;
padding:0 15px;
width:500px;
float:right;
border:1px solid #333;
background:#fff;
color:#333;
}

This results in most or all of the page showing on the screen (all of the #main div with the h1 and h2 headings shows on my 1024*768 resolution where it didn't before). This saves using the right hand page scrollbar which is used if you just add more content into the right #main div without overflow: scroll and a height.

You can set the height of #main so that the whole page will show on a window with your chosen resolution (in my example above, about 768px height), but viewers with a smaller window height will see a page scrollbar and a scrollbar for the div #main.
----------------------------------------
Code downloaded to my PC will be deleted in due course.
WIN XP SP3; IE7, Firefox 3.0, Opera and Safari for Windows; screen resolution usually 1024x768.
IE6 on W98 with 800*600.
----------------------------------------
[Edit 1 times, last edit by Wickham at Dec 4, 2008 9:49:23 AM]
[Dec 4, 2008 9:47:05 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male Voyd
Stranger




Joined: Oct 1, 2008
Post Count: 9
Status: Offline
Reply to this Post  Reply with Quote 
Re: Standard Website Layouts

THX for your help wickham :)
[Dec 5, 2008 9:21:28 AM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male iceVet
Stranger




Joined: Dec 5, 2008
Post Count: 4
Status: Offline
Reply to this Post  Reply with Quote 
Re: Standard Website Layouts

"Browsercam"? Sheer genius. Wish I've thought of that. The monthly nut is kinda too rich for my liking, though. The day we don't need that kind of service is the day I can blissfully forget about accommodating hacks and workarounds and just focus on my design and work.
[Dec 6, 2008 10:31:58 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Posts: 39   Pages: 4   [ Previous Page | 1 2 3 4 ]
[ Jump to Last Post ]
Show Printable Version of Thread  Post new Thread