|
it
newsgroups
|
|||||||||||||||||||||||
|
|||||||||||||||||||||||
[OT] <div> <span>Apologies for the OT-ness of the post, I've only got access to Microsoft groups via Outlook at work and SiteServer.Css looks like its dead.... I'm trying to get two columns within a <div> tag - I seem to be having no end of problems doing so - this all comes from dropping (finally) the table approach for displaying non-tabular data... I've managed to use <div>'s for the header section and footer section, but as soon as I try to get two columns between these they seem to wrap... I've not found a lot of help on Google, wondered if anyone here might have done something similar for their own site... <div style="width:100%"> <div style="width:50%">column 1</div> <div style="width:50%">column 2</div> </div> The above is an example of what I'm trying to achieve, I read somewhere about the <div> tags breaking <p> tags, ie, creating a new paragraph/line - so I've amended the inner tags to <span>'s but still no joy..just doesn't seem to work... If anyone has a "tiny" example of the above I'd be very grateful - for what its worth, but column 1 and column 2 are being generated dynamically and contain additional <div>'s.. Thanks for any help and again my apologies for the OT-ness (cant access Google groups from work either).. Rob
Show quote
Hide quote
"Rob Meade" <ku.shn.tsews.t***@edaem.bor> wrote in message Do you have a URL that demonstrates the problem? What exactly are the news:OCpQgy7rGHA.2240@TK2MSFTNGP04.phx.gbl... > > I've managed to use <div>'s for the header section and footer section, but > as soon as I try to get two columns between these they seem to wrap... > > I've not found a lot of help on Google, wondered if anyone here might have > done something similar for their own site... > > <div style="width:100%"> > <div style="width:50%">column 1</div> > <div style="width:50%">column 2</div> > </div> > > The above is an example of what I'm trying to achieve, I read somewhere > about the <div> tags breaking <p> tags, ie, creating a new > paragraph/line - so I've amended the inner tags to <span>'s but still no > joy..just doesn't seem to work... > symptoms? "CJM" wrote ...
> Do you have a URL that demonstrates the problem? What exactly are the Alas nope as its on our intranet..however...> symptoms? I found a couple of articles on line, and similar to the example posted up by Mike Brind, I had something together, the problem is that I cant make it pixel perfect, ie, if I have a container with a width of 500px, and a left column of 155px, I cant make the second column 345px or else they over lap...and the border disappears...its a minor thing but I'm confronted with the problem of not only make a page that validates, is accessible, looks good, uses less bandwidth, but has to also be easy for the rest of my team to incorporate and use or else I'm just wasting my time - they all understand tables, so teach old dogs new tricks could be tricky... What I have got is the code though....so here you go.....I should add that the majority of this is all from the example I found online, I've just amended the .css files and added a couple of extra divs for spacing to make it look more like our template... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Template</title> <link rel="stylesheet" type="text/css" href="2c-hd-ft-fixed-layout.css" /> <link rel="stylesheet" type="text/css" href="2c-hd-ft-fixed-presentation.css" /> </head> <body> <div id="outer"> <div id="hdr"></div> <div id="bar"><img src="Images/Misc/Shim.gif" style="width:1px;height:15px;border-width:0px;" alt="" title="" /></div> <div style="height:2px"><img src="Images/Misc/Shim.gif" style="width:1px;height:1px;border-width:0px;" alt="" title="" /></div> <div id="bodyblock" align="right"> <div id="l-col" align="center"> <h4 align="center">Menu</h4> <a href="#">Link</a><br /> <br /> <a href="http://www.ssi-developer.net/main/templates/">View more templates.</a> </div> <div id="cont"> <h3 align="center">Two Column Fixed Width with Header &Footer</h3> <div align="center" style="color: red;">Ver 2.3</div> <p>This template is actually a replica of one of my other websites which uses tables for the very same layout. I wanted to see could it be done and it seems to work perfect.</p> <p>This is basically set up as follows: there is a main outer div which centers the page and is a fixed width. There are 4 main div's within this outer div; header (#hdr), bar (#bar), body (#body) and footer (#ftr). The body div holds 2 more divs, the left div which is for navigation and the right div which is for our content.</p><p>This template is actually a replica of one of my other websites which uses tables for the very same layout. I wanted to see could it be done and it seems to work perfect.</p> <p>This is basically set up as follows: there is a main outer div which centers the page and is a fixed width. There are 4 main div's within this outer div; header (#hdr), bar (#bar), body (#body) and footer (#ftr). The body div holds 2 more divs, the left div which is for navigation and the right div which is for our content.</p> </div> </div> <div style="height:2px"><img src="Images/Misc/Shim.gif" style="width:1px;height:1px;border-width:0px;" alt="" title="" /></div> <div id="ftr"><img src="Images/Misc/Shim.gif" style="width:1px;height:15px;border-width:0px;" alt="" title="" /></div> </div> </body> </html> And the .css's... 2c-hd-ft-fixed-layout.css /* Layout Stylesheet */ body { margin:20px; background:#ffffff; color: #333333; text-align:center; padding:0; } #outer { text-align:left; width:650px; margin:auto; border-width: 0px; border-style: collapse; } #hdr { height:60px; background:#ffffff; color: #333333; } #bar { height:15px; background:#6699cc; color: #333333; } #bodyblock { position:relative; background: #f1f1f1; color: #000000; width:650px; padding:0; } #l-col { float:left; background:#f1f1f1; color: #000000; width:150px; /* needs to be 1px narrower than remaining space to allow for border-width of #cont*/ } #cont { width:495px; background:#ffffff; color: #333333; border:solid #999999; border-width:0 0 0 1px; text-align:justify; } #ftr { height:15px; background:#6699cc; color: #333333; margin:0; } 2c-hd-ft-fixed-presentation.css /* Presentation Stylesheet */ h3, p { margin:0; padding:15px; } h4 { margin:0; padding: 5px 0; } p:first-letter { font-size: 80%; font-weight: bold; color:blue; } Rob Meade wrote:
> "CJM" wrote ... Set all margins, paddings and borders to 0 to start, then as you add> > > Do you have a URL that demonstrates the problem? What exactly are the > > symptoms? > > Alas nope as its on our intranet..however... > > I found a couple of articles on line, and similar to the example posted up > by Mike Brind, I had something together, the problem is that I cant make it > pixel perfect, ie, if I have a container with a width of 500px, and a left > column of 155px, I cant make the second column 345px or else they over > lap...and the border disappears... 10px padding here, compensate by removing 10px width from your div there... It can get a bit frustrating to see overlapping divs, or the right hand one popping under the left hand one, but eventually you get the hang of it. Trial and Error. Get your hands dirty. Just like ASP/ADO/SQL. Oh, and check your results in both Firefox *and* IE. They implement the CSS box model differently. -- Mike Brind Mike Brind wrote:
> Oh, and check your results in both Firefox *and* IE. And IE7 implements it differently from IE6, at least under strict DOCTYPEs.> They implement the CSS box model differently. -- Dave Anderson Unsolicited commercial email will be read at a cost of $500 per message. Use of this email address implies consent to these terms. "Dave Anderson" wrote ...
> And IE7 implements it differently from IE6, at least under strict We've already had reports that some of our ASP apps dont work in IE7 - > DOCTYPEs. joy...not sure why, probably because of the popup whoring techniques we've used in the past, my understanding of IE7 (limited as it is) is that it now has tabs, much like FireFox? If so, I would imagine our popups are appearing as new tabs...again, playing our "not supported" card at the moment, but something else we're going to have to consider... Perhaps its time to get out of this business! :o) Rob Rob Meade wrote:
> Perhaps its time to get out of this business! :o) LOL.If ever there were a time to get out of this business, it was when browsers were moving AWAY FROM each other, rather than TOWARD (NN4/IE4 was probably the most divergent point). The current trend is toward standards, and that can only make our jobs easier in the long run. -- Dave Anderson Unsolicited commercial email will be read at a cost of $500 per message. Use of this email address implies consent to these terms. "Dave Anderson" wrote ...
> LOL. hehe, true - just be nice if we could sit them all down in a room, bash some :o) > If ever there were a time to get out of this business, it was when > browsers were moving AWAY FROM each other, rather than TOWARD (NN4/IE4 was > probably the most divergent point). The current trend is toward standards, > and that can only make our jobs easier in the long run. heads together and get them all to develop new version over night that did everything the same - that way, on Monday I could have something consistant to use! :o) Rob "Mike Brind" wrote...
> Set all margins, paddings and borders to 0 to start, then as you add Thanks for the advice, the problem with the example I've posted the code up > 10px padding here, compensate by removing 10px width from your div > there... for is that, unless I make the items in the container use it seems at least 5px less, it just doesn't work, either I get no border at the top on the left (roughly the first paragraph of text), or, none at the bottom, to get both I seem to have to make the contained items considerably less than the container width? > It can get a bit frustrating to see overlapping divs, init!> or the right hand yeah...I guess, just was hoping for quicker results....> one popping under the left hand one, but eventually you get the hang of > it. Trial and Error. Get your hands dirty. Just like ASP/ADO/SQL. > Oh, and check your results in both Firefox *and* IE. They implement deffo - I work for the NHS, which is where these templates will be used, our > the CSS box model differently. Trust (organisation) has the luxury of being Microsoft only, so I know that people will only be using Internet Explorer, and version 5+, HOWEVER - we also make community wide applications using similar templates which are then used by GP practices and other Trusts, whilst the NHS as a whole does have an agreement with Microsoft thus we get lots of goodies for free, there are still some users out there - I'm sure you know the ones - that like to fiddle - as such we've had reports from users that our applications do not work correctly in FireFox (especially the .Net ones) - I am trying to appease all here by developing the templates to work correctly with FireFox, and then AFTERWARDS checking them in IE, as opposed to the other way round which was always the mindset in the past. I figure if I get it right for FireFox my code should be "correct" (I'm validating via W3C etc) - but at the end of the day, the bulk of the users are all IE users so if there are any things I just cant work out I'll obviously have to favour them....this has been a good exercise though because not only have I started creating Server Controls in .Net (something new for me) - I've started using the DIV tags (something new for me) - and have seen the size of my pages reduce quite a bit (by 2 thirds on one of the pages!)... It's just a shame that now, after the W3C has been around so long that all of the browsers haven't adapted the same consistant use of the standards, it would make things so much easier for us as developers, and thus have a big advantage to users, as it wouldn't matter which browser they used they could be assured of the same results, browsers would then compete on features.. Regards Rob Rob Meade wrote:
Show quoteHide quote > Hi all, <div style="width:100%">> > Apologies for the OT-ness of the post, I've only got access to Microsoft > groups via Outlook at work and SiteServer.Css looks like its dead.... > > I'm trying to get two columns within a <div> tag - I seem to be having no > end of problems doing so - this all comes from dropping (finally) the table > approach for displaying non-tabular data... > > I've managed to use <div>'s for the header section and footer section, but > as soon as I try to get two columns between these they seem to wrap... > > I've not found a lot of help on Google, wondered if anyone here might have > done something similar for their own site... > > <div style="width:100%"> > <div style="width:50%">column 1</div> > <div style="width:50%">column 2</div> > </div> > > The above is an example of what I'm trying to achieve, I read somewhere > about the <div> tags breaking <p> tags, ie, creating a new paragraph/line - > so I've amended the inner tags to <span>'s but still no joy..just doesn't > seem to work... > > If anyone has a "tiny" example of the above I'd be very grateful - for what > its worth, but column 1 and column 2 are being generated dynamically and > contain additional <div>'s.. > > Thanks for any help and again my apologies for the OT-ness (cant access > Google groups from work either).. > <div style="width:50%;float:left;"><p>column 1</p></div> <div style="width:50%;float:left;"><p>column 2</p></div> </div> I wondered why our mail server was so slow yesterday, and then found out that someone was using the intranet in peak hours to send 13,000 html emails (which eventually took 9 hrs to clear). Each email contained 28 kB of html, put together by our dezyner using tables and spacer gifs. I rewrote the html for this newsletter thingy, using CSS and divs. Identical result - 12 kB. I just saved 60% or our bandwidth costs for future mailings. Stick with this approach. It's worth it. Start here: http://www.glish.com/css/ then here: http://www.google.co.uk/search?hl=en&safe=off&q=css+layout&btnG=Search&meta= -- Mike Brind PS. I rewrote the html AFTER amending the mailing script to check the quantity of email addresses in a campaign and the time of day. Before 4.30pm for large campaigns, it now tells the user to get lost.  
Thread options
Other interesting topics
|
|||||||||||||||||||||||
