23 replies [Last post]
nclundsten
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2009-02-12
Posts: 14
Points: 0

ok... heres what im trying to do...

ive gotten everything, EXCEPT the ability reorder the divs, in the markup,

i have brought this up to a few friends... they all seem to think they can do it..

havent seen it working yet.

reply if you think you know how to do it Tongue

stifmeizter
stifmeizter's picture
Offline
Regular
Last seen: 10 years 49 weeks ago
Timezone: GMT+1
Joined: 2008-12-30
Posts: 14
Points: 7

isn't it easier just to

isn't it easier just to change the content of the div's instead of the position?

nclundsten
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2009-02-12
Posts: 14
Points: 0

the divs have to be able to

the divs have to be able to be reordered, for search engine optimization

content div being most likely to be the first div that i would want to list. as its most important.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 20 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Here is a three column

Here is a three column layout with the content div coming before the two side divs.
http://blog.html.it/layoutgala/LayoutGala08.html

You will just have to rework the code to have the sticky footer.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

This is very easy and done

This is very easy and done all the time, source ordering isn't that difficult but also it is not a given that it is that important in fact it's a bit of a myth that people have latched on to , links are important too as well as content and you won't be able to demonstrate any definite improvement in one before the other.

As for the layout, you'll be out of luck; Google around don't ask people to do your school work assignments as that is not about to happen Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

nclundsten
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2009-02-12
Posts: 14
Points: 0

very easy and done? prove

very easy and done? prove it.
i have "googled around" for 10+ hours.. and have not found a way to make it match ALL the rules listed on the example image.

nclundsten
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2009-02-12
Posts: 14
Points: 0

Deuce wrote:Here is a three

Deuce wrote:

Here is a three column layout with the content div coming before the two side divs.
http://blog.html.it/layoutgala/LayoutGala08.html

You will just have to rework the code to have the sticky footer.

wouldnt i have to rework the whole thing, to make the content div use a fluid width? :/

nclundsten
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2009-02-12
Posts: 14
Points: 0

THIS IS AS CLOSE AS IT WILL EVER GET...

THIS IS AS CLOSE AS IT WILL EVER GET...

please dont come in here and flame me for "not doing my homework" Sad

this is everything, minus the reordering of the divs, in the source file.

[url]http://iamnigel.com/example.php
[/url]

<body>
	<div id="wrapper">
          <div id="header">Top</div><!-- / Header -->
	     <div id="InnerWrapper">
	          <div id="WrapContent">
	                <div id="leftbar"><p>Left sidebar</p></div>
	                <div id="rightbar"><p>Right Sidebar</p></div>
	               <div id="content">CONTENT HERE!</div>
	               <div class="clear"></div>
			</div><!-- /wrapContent -->
		</div><!-- /innerwrapper -->
		<!-- Start Footer -->
		<div id="footer">Sticky Footer</div>
	</div><!-- /wrapper -->
  </body>

 	* {margin: 0;padding: 0;}
	html, body {border:0;margin:0;padding:0;height: 100%;}
	body {font: 100%/1.25 arial, helvetica, sans-serif; min-width: 780px;}
 	p { margin: 15px 0; } 
	p, h1, h2, h3, h4, h5, h6 { padding: 0 1em; } 
	/*****header*****/
	#header {width: 100%;font-size: 1em;color: white;text-align: center;margin: 0;padding: 0;height: 60px;background-color: #494949;}
	/*****content*****/
	#wrapper {min-width: 960px;padding:0;margin:0;position: relative;min-height: 100%;height: auto !important;height: 100%;}
	#InnerWrapper {width: 100%;padding-bottom: 1px;}
	#WrapContent {padding-bottom: 58px;width: 100%;margin: 0;}
 	#WrapContent:after {clear: both;display: block;content: ".";height: 0;visibility: hidden;}
	#leftbar {z-index: 2;float: left;width: 200px;margin: 0;padding: 10px 0;background-color: #ffcccc;}
	#rightbar {z-index: 5;float: right;width: 200px;margin: 0;padding: 10px 0;background-color: #99ff99;}
 	#content {z-index: 0;display: block;width: auto;padding: 10px 0;text-align: left;margin: 0 200px 0 200px;background-color: #ffff99;}
 	.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}
	/*****footer*****/
	#footer {position: absolute;bottom: 0 !important;bottom: -1px;clear:both;padding:0;margin:0;width: 100%;height: 58px;color: white;text-align: center;background-color: #494949;}

Forget the special footer even, this cannot be done.
Any 3 column div, with outside colums being a fixed width, and the inner column a fluid width, can not have the divs reordered in the page source

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 2 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

My first result when doing a

My first result when doing a Google search..

http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm

This is what you are trying to do isn't it? Fixed width outer columns, with a fluid center column.. and the center column comes before the outer.

Taken from the linked page: "Notice that the main content column (col1) comes before the other columns, this is great for SEO."

I really don't think anyone was flaming you at all.. it's better to learn (especially when doing a homework assignment) by hunting down the info on your own, as opposed to anyone just flat out handing it to you. I'm pretty sure that's all that comment meant. Smile

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 20 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

nclundsten wrote:Deuce

nclundsten wrote:
Deuce wrote:

Here is a three column layout with the content div coming before the two side divs.
http://blog.html.it/layoutgala/LayoutGala08.html

You will just have to rework the code to have the sticky footer.

wouldnt i have to rework the whole thing, to make the content div use a fluid width? :/

http://blog.html.it/layoutgala/LayoutGala01.html

There... 3.2 seconds of googling... in fact - make a choice - http://blog.html.it/layoutgala/ - there are a handful of layouts coded for you. The only thing you will have to change is the footer.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I don't flame people if

:mad: I don't flame people if indeed that remark was addressed to myself, There is an unwritten rule that homework assignments don't get done by forum members, it is for you to work this out for yourself, what we can and will do is help you with any problems you have with constructing this layout.

The idea of a three column, fixed sidebars, fluid centre, content/centre first in source order, is not rocket science there are countless very good tried and tested examples on the web, I myself use this layout principle all the time I always work with a framework template that places content first in source followed by two sidebars, I then use CSS and the odd extra div to allow a variety of layout configurations.

One things concerns me in your postings and that is you keep referring to moving markup around, do you mean this literally? as in different markup order? the markup never changes if the content is first it remains so, the only way of changing this is server side scripting to manipulate your markup layout

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

nclundsten
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2009-02-12
Posts: 14
Points: 0

yes, markup. sometimes the

yes, markup.

sometimes the "content" div will be first in the source
next time, the "navigation" div might be first, php will decide the order, based on a lot of variables...

anyways... that other example i was given again, isnt right

center is fluid, but the sides are not fixed!

im becoming more sure that this cannot be done

i bet i get another 50 plus posts of "go google it"

a few of you have posted examples now, but they do not match what i've specified.

lemme sum it up:
1.reorderable divs in the source still produces same visual result,
2. center is fluid
3. sides are fixed
these 3 divs cannot be absolute, as i need them to be able to collide with the footer

thats it.

i dont think it can be done anymore.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 2 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

You can't even use

You can't even use absolute/fixed positioning for this? Interesting issue.. I'm heading home now. If I have time, I'll see if I can play around with it tonight and post back any findings. Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Right why don't you think

Right why don't you think this can be done? what are you basing this assertion on ? have you tried anything?
Why is there this desire to move the markup around? is this simply an exercise? I can think of no real reason to do this in real world environments but even so it's possible, this is the power of CSS. Given three elements one with one extra div wrapping it it will be possible to have them in any order and always produce a fluid center with flanking sidebars of fixed width.

Many of the layout links provided so far will show you approaches to achieve this , reading the 'one true layout' treatise will give some very powerful examples of of playing with the visual order of elements, this can be extrapolated to cover markup that itself is subject to change.

I will grant you though that to achieve this sort of markup isn't simple and is definitely not for the novice.

So is this a homework assignment?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

nclundsten
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2009-02-12
Posts: 14
Points: 0

not a homework

not a homework assignment...

and yes, id say im... novice range. maybe a bit better, lol
The reason I need certain elements, before other elements in the source(will differ based on what is in each page), is for search engine optimization, because when pages are indexed (specifically by google) by the source, it is done from top to bottom. the topmost content of each page being most relevant when being searched.

hope that makes sense

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 3 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

I Think I finally understand

I Think I finally understand what you want,correct me if I am wrong.
The layout will visually always look the same just the source order to differ.
You will need to use PHP to manipulate the markup or the order of the source.
CSS will just display them how you want it to look.
Changing column order via CSS wont do anything to the source/markup.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

nclundsten, people here

nclundsten, people here don't respond well to assertions like your "ridiculously hard layout, nearing impossible status". This site isn't competitive, a number of people that use HTML+CSS professionally in their daily (work) lives contribute here. Those people will help you if you help yourself and don't try to tell them stuff they know not to be true.

The way knowledge flows on the internet, if one person can do something then other people only need the ability to read their code to know how to do it too. That's hardly impossible or difficult. And what you describe has been done.

One mechanism for visually reordering columns without changing the source order is through, floats, negative margins, wrapper elements and padding. If your googling has really revealed no solution, you've not come across the one true layout.

nclundsten
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2009-02-12
Posts: 14
Points: 0

done

it works.
http://iamnigel.com/example.php
it even has min and max width in ie6
grab the source if you like.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

nclundsten wrote:it

nclundsten wrote:

it works.
http://iamnigel.com/example.php
it even has min and max width in ie6
grab the source if you like.

You sound surprised! we have been saying all along that there is no great difficulty here, it was only yourself that seemed to think this was problematic.
[edit] is this link to example not the same as the much earlier one you posted :? what is going on here why do you post it a second time as though it was just achieved? were there adjustments made to it?

So is this your worked up example, what guide did you follow? this is a fairly well known method to negging the sidebar margins there are other approaches that work. One thing I'm surprised by is your example works in Quirks mode in IE6! you should put a DTD in that page and switch the rendering to Standards mode.

One thing your example of course doesn't show is how you cope with now moving the markup around , changing the source order, can you demonstrate this aspect? at the moment the layout works for sidebars following after content, how will you cope with sidebars first or even side bars top and bottom of content.

Off tangent: Nice reply of Chris's definitely meretricious of a 'best reply' badge Wink

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

nclundsten
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2009-02-12
Posts: 14
Points: 0

i used # 13

i used # 13 from:<a href="http://blog.html.it/layoutgala/" rel="nofollow">http://blog.html.it/layoutgala/</a>
then i found a sticky footer somewhere (history is gone already, i didnt bookmark it)
but i had to tweak it.. along with the rest.. and finally, it works. if you would really like to see the divs in the source, in a different order.. i could make an example2.php
<a href="http://iamnigel.com/example2.php" rel="nofollow">http://iamnigel.com/example2.php</a>

holy grail+sticky footer+SEO Laughing out loud

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Well i only ask as so far

Well i only ask as so far you have a set of rules for that particular source order if and when it changes how are you intending on working the rules and applying?

As I said earlier there is a not a great deal of point in moving source order around from page to page, if you want content first then leave it at that.

And please place a DTD on your examples Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

nclundsten
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2009-02-12
Posts: 14
Points: 0

yes, there would need to be

yes, there would need to be different css rules for each order, i dont care to write them, decided to leave the content div first, always, and forever Tongue

and ill go ahead and get your DTD Tongue

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 20 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

So, Chris gets best reply

So, Chris gets best reply award but you use the link i provided?
Just doesn't seem fair :rolleyes:

mod edit: A big thumbs up. Woo-hoo! :thumbsup:
--gary

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

nclundsten
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2009-02-12
Posts: 14
Points: 0

ha, sorry! thank you very

ha, sorry!
thank you very much for that page.

http://iamnigel.com/example.php
redundant, I know.

DTD added
CSS validated
XML validated(minus two errors, after the /HTML tag, added by my hosting provider! pretty lame.)

a moderator can close this thread, thanks Smile