Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > ASP General > [OT] <div> <span>

Reply
Thread Tools

[OT] <div> <span>

 
 
Rob Meade
Guest
Posts: n/a
 
      07-25-2006
Hi all,

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


 
Reply With Quote
 
 
 
 
CJM
Guest
Posts: n/a
 
      07-25-2006

"Rob Meade" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
>
> 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...
>


Do you have a URL that demonstrates the problem? What exactly are the
symptoms?


 
Reply With Quote
 
 
 
 
Mike Brind
Guest
Posts: n/a
 
      07-25-2006

Rob Meade wrote:
> Hi all,
>
> 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:100%">
<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...G=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.

 
Reply With Quote
 
Rob Meade
Guest
Posts: n/a
 
      07-26-2006
"CJM" wrote ...

> 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...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 &amp;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;
}


 
Reply With Quote
 
Mike Brind
Guest
Posts: n/a
 
      07-26-2006

Rob Meade wrote:
> "CJM" wrote ...
>
> > 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...


Set all margins, paddings and borders to 0 to start, then as you add
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

 
Reply With Quote
 
Dave Anderson
Guest
Posts: n/a
 
      07-26-2006
Mike Brind wrote:
> Oh, and check your results in both Firefox *and* IE.
> They implement the CSS box model differently.


And IE7 implements it differently from IE6, at least under strict DOCTYPEs.



--
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.


 
Reply With Quote
 
Rob Meade
Guest
Posts: n/a
 
      07-26-2006
"Mike Brind" wrote...

> Set all margins, paddings and borders to 0 to start, then as you add
> 10px padding here, compensate by removing 10px width from your div
> there...


Thanks for the advice, the problem with the example I've posted the code up
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
> 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.


yeah...I guess, just was hoping for quicker results....

> Oh, and check your results in both Firefox *and* IE. They implement
> the CSS box model differently.


deffo - I work for the NHS, which is where these templates will be used, our
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


 
Reply With Quote
 
Rob Meade
Guest
Posts: n/a
 
      07-26-2006
"Dave Anderson" wrote ...

> And IE7 implements it differently from IE6, at least under strict
> DOCTYPEs.


We've already had reports that some of our ASP apps dont work in IE7 -
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! )

Rob


 
Reply With Quote
 
Rob Meade
Guest
Posts: n/a
 
      07-28-2006
"Dave Anderson" wrote ...

> 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.


hehe, true - just be nice if we could sit them all down in a room, bash some
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! )

Rob


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off




Advertisments