Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   Re: overlapping boxes (http://www.velocityreviews.com/forums/t722781-re-overlapping-boxes.html)

freemont 05-11-2010 07:27 PM

Re: overlapping boxes
 
On Tue, 11 May 2010 18:51:39 +0000, Lewis writ:

> I made a page as a demo showing a left and right menu, a heading, and a
> min article window. The left and right menus are set to 15% are are
> floated to the left and right.
>
> The middle div is set to be 70% wide.
>
> However, the floated left and right divs are intruding into the center
> div because of the padding in the #article definition. I actually want a
> border around the article without having that border intrude into the
> menus. Is there a way to specify that the padding should be INSIDE the
> border while still making the page completely fluid?
>
> I suppose I can just pad the right and left side of the menus, but if
> their font sizes are different, that still won't line up correctly.
>
> <http://home.kreme.com/logo-demo.html>


I don't follow. Do you like the menu borders intruding into the article
or not? If not just adjust widths.

But I suspect that's not the problem you see. Req more input pls. :-)
--
⁂ "Because all you of Earth are idiots!"
¯`·.¸¸.·´¯`·-> ※freemont※ <-·´¯`·.¸¸.·´¯

freemont 05-11-2010 08:17 PM

Re: overlapping boxes
 
On Tue, 11 May 2010 19:50:03 +0000, Lewis writ:

> In message <13b65$4be9af96$6216f0ea$30969@ALLTEL.NET>
> freemont <freemontspammenot@freemontsoffice.com> wrote:
>> On Tue, 11 May 2010 18:51:39 +0000, Lewis writ:

>
>>> I made a page as a demo showing a left and right menu, a heading, and
>>> a min article window. The left and right menus are set to 15% are are
>>> floated to the left and right.
>>>
>>> The middle div is set to be 70% wide.
>>>
>>> However, the floated left and right divs are intruding into the center
>>> div because of the padding in the #article definition. I actually want
>>> a border around the article without having that border intrude into
>>> the menus. Is there a way to specify that the padding should be INSIDE
>>> the border while still making the page completely fluid?
>>>
>>> I suppose I can just pad the right and left side of the menus, but if
>>> their font sizes are different, that still won't line up correctly.
>>>
>>> <http://home.kreme.com/logo-demo.html>

>
>> I don't follow. Do you like the menu borders intruding into the article
>> or not? If not just adjust widths.

>
> I don't want the menu borders to intrude at all. The widths are
> currently set so that the total is 100% (15%, 70%, 15%). I WANT the menu
> boxes ot be flush to the article box, adjusting the width of the menu's
> divs doesn't do this.
>
>> But I suspect that's not the problem you see. Req more input pls. :-)

>
> For example, I changed the widths of the side menus to 12% from 15% Make
> the window narrow and really wide to see how they move in and then move
> away from the article div.


OIC. Try floating everything to the left, and repositioning the rightmost
menu under the article in your html. Then adjust margins and widths.
--
⁂ "Because all you of Earth are idiots!"
¯`·.¸¸.·´¯`·-> ※freemont※ <-·´¯`·.¸¸.·´¯

Beauregard T. Shagnasty 05-11-2010 08:29 PM

Re: overlapping boxes
 
Lewis wrote:

>> Lewis writ:
>>> <http://home.kreme.com/logo-demo.html>


Currently unreachable.

> I don't want the menu borders to intrude at all. The widths are
> currently set so that the total is 100% (15%, 70%, 15%). I WANT the
> menu boxes ot be flush to the article box, adjusting the width of the
> menu's divs doesn't do this.


Since your page won't come up, I'll volunteer this: make your total
width some bit less than 100% -- say 13-14% for the sides, and 68-69%
for the middle.

You're forgetting the outside margins of the three columns, I'll wager.

--
-bts
-Four wheels carry the body; two wheels move the soul

freemont 05-11-2010 09:55 PM

Re: overlapping boxes
 
On Tue, 11 May 2010 21:33:07 +0000, Lewis writ:

> I reduced the width a bit (12% 70% 12%) but they still overlap when the
> window is narrow and then they separate when the window is very wide.


<http://freemontsoffice.com/test/lewis/3col.htm>
--
⁂ "Because all you of Earth are idiots!"
¯`·.¸¸.·´¯`·-> ※freemont※ <-·´¯`·.¸¸.·´¯

freemont 05-11-2010 10:04 PM

Re: overlapping boxes
 
On Tue, 11 May 2010 22:00:59 +0000, Lewis writ:

> In message <baa3c$4be9d263$6216f0ea$30969@ALLTEL.NET>
> freemont <freemontspammenot@freemontsoffice.com> wrote:
>> On Tue, 11 May 2010 21:33:07 +0000, Lewis writ:

>
>>> I reduced the width a bit (12% 70% 12%) but they still overlap when
>>> the window is narrow and then they separate when the window is very
>>> wide.

>
>> <http://freemontsoffice.com/test/lewis/3col.htm>

>
> The 'right' menu is at the bottom of the page after the article (in
> Safari, Chrome, and Firefox)
>
> If I change the float for menu2 to right, is still appears under the
> article.


Oh fer crissake... I left in an edit when I uploaded. Refresh.
--
⁂ "Because all you of Earth are idiots!"
¯`·.¸¸.·´¯`·-> ※freemont※ <-·´¯`·.¸¸.·´¯

freemont 05-11-2010 10:40 PM

Re: overlapping boxes
 
On Tue, 11 May 2010 22:15:05 +0000, Lewis writ:

> In message <15611$4be9d46b$6216f0ea$30969@ALLTEL.NET>
> freemont <freemontspammenot@freemontsoffice.com> wrote:
>> On Tue, 11 May 2010 22:00:59 +0000, Lewis writ:

>
>>> In message <baa3c$4be9d263$6216f0ea$30969@ALLTEL.NET>
>>> freemont <freemontspammenot@freemontsoffice.com> wrote:
>>>> On Tue, 11 May 2010 21:33:07 +0000, Lewis writ:
>>>
>>>>> I reduced the width a bit (12% 70% 12%) but they still overlap when
>>>>> the window is narrow and then they separate when the window is very
>>>>> wide.
>>>
>>>> <http://freemontsoffice.com/test/lewis/3col.htm>
>>>
>>> The 'right' menu is at the bottom of the page after the article (in
>>> Safari, Chrome, and Firefox)
>>>
>>> If I change the float for menu2 to right, is still appears under the
>>> article.

>
>> Oh fer crissake... I left in an edit when I uploaded. Refresh.

>
> OK, that works, but if I wanted to swap the menu's right to left I'd
> have to edit the HTML to move menu2 and menu3 instead of simply changing
> the style sheet.
>
> Or if I wanted a style sheet that put menu3 at the bottom...
>
> Hmm... will have to think on this.


My immediate thought: how often are you going to swap major page areas
like that?

That said, just replace the float:lefts with float:rights and they
swap. :-)
--
⁂ "Because all you of Earth are idiots!"
¯`·.¸¸.·´¯`·-> ※freemont※ <-·´¯`·.¸¸.·´¯

Jenn 05-11-2010 10:54 PM

Re: overlapping boxes
 


"freemont" <freemontspammenot@freemontsoffice.com> wrote in message
news:15611$4be9d46b$6216f0ea$30969@ALLTEL.NET...
> On Tue, 11 May 2010 22:00:59 +0000, Lewis writ:
>
>> In message <baa3c$4be9d263$6216f0ea$30969@ALLTEL.NET>
>> freemont <freemontspammenot@freemontsoffice.com> wrote:
>>> On Tue, 11 May 2010 21:33:07 +0000, Lewis writ:

>>
>>>> I reduced the width a bit (12% 70% 12%) but they still overlap when
>>>> the window is narrow and then they separate when the window is very
>>>> wide.

>>
>>> <http://freemontsoffice.com/test/lewis/3col.htm>

>>
>> The 'right' menu is at the bottom of the page after the article (in
>> Safari, Chrome, and Firefox)
>>
>> If I change the float for menu2 to right, is still appears under the
>> article.

>
> Oh fer crissake... I left in an edit when I uploaded. Refresh.



When you resize your page, the nav on the right drops to the bottom of the
page
--
Jenn (from Oklahoma)



Jenn 05-11-2010 11:14 PM

Re: overlapping boxes
 


--
Jenn (from Oklahoma)
"Lewis" <g.kreme@gmail.com.dontsendmecopies> wrote in message
news:slrnhujksr.2rf.g.kreme@cerebus.local...
> In message <baa3c$4be9d263$6216f0ea$30969@ALLTEL.NET>
> freemont <freemontspammenot@freemontsoffice.com> wrote:
>> On Tue, 11 May 2010 21:33:07 +0000, Lewis writ:

>
>>> I reduced the width a bit (12% 70% 12%) but they still overlap when the
>>> window is narrow and then they separate when the window is very wide.

>
>> <http://freemontsoffice.com/test/lewis/3col.htm>

>
> The 'right' menu is at the bottom of the page after the article (in
> Safari, Chrome, and Firefox)
>
> If I change the float for menu2 to right, is still appears under the
> article.
>


Remove the margin and padding on this and it seems to work now w/o moving
the right nav to the bottom when you resize it smaller.
#article
{
border: green solid 1px;
width: 65%;
float:left;
*margin: 0 auto 0 auto;
* padding: 0 2% 0 2%;
border-collapse: collapse;
}



Jenn 05-11-2010 11:22 PM

Re: overlapping boxes
 

"Jenn" <nope@noway.atnohow.anyday> wrote in message
news:hscobu$k42$1@news.eternal-september.org...
>
>
> --
> Jenn (from Oklahoma)
> "Lewis" <g.kreme@gmail.com.dontsendmecopies> wrote in message
> news:slrnhujksr.2rf.g.kreme@cerebus.local...
>> In message <baa3c$4be9d263$6216f0ea$30969@ALLTEL.NET>
>> freemont <freemontspammenot@freemontsoffice.com> wrote:
>>> On Tue, 11 May 2010 21:33:07 +0000, Lewis writ:

>>
>>>> I reduced the width a bit (12% 70% 12%) but they still overlap when the
>>>> window is narrow and then they separate when the window is very wide.

>>
>>> <http://freemontsoffice.com/test/lewis/3col.htm>

>>
>> The 'right' menu is at the bottom of the page after the article (in
>> Safari, Chrome, and Firefox)
>>
>> If I change the float for menu2 to right, is still appears under the
>> article.
>>

>
> Remove the margin and padding on this and it seems to work now w/o moving
> the right nav to the bottom when you resize it smaller.
> #article
> {
> border: green solid 1px;
> width: 65%;
> float:left;
> *margin: 0 auto 0 auto;
> * padding: 0 2% 0 2%;
> border-collapse: collapse;
> }
>

sorry .. I forgot to turn on my OE quotefix



--
Jenn (from Oklahoma)



freemont 05-11-2010 11:23 PM

Re: overlapping boxes
 
On Tue, 11 May 2010 17:54:57 -0500, Jenn writ:

> "freemont" <freemontspammenot@freemontsoffice.com> wrote in message
> news:15611$4be9d46b$6216f0ea$30969@ALLTEL.NET...
>> On Tue, 11 May 2010 22:00:59 +0000, Lewis writ:
>>
>>> In message <baa3c$4be9d263$6216f0ea$30969@ALLTEL.NET>
>>> freemont <freemontspammenot@freemontsoffice.com> wrote:
>>>> On Tue, 11 May 2010 21:33:07 +0000, Lewis writ:
>>>
>>>>> I reduced the width a bit (12% 70% 12%) but they still overlap when
>>>>> the window is narrow and then they separate when the window is very
>>>>> wide.
>>>
>>>> <http://freemontsoffice.com/test/lewis/3col.htm>
>>>
>>> The 'right' menu is at the bottom of the page after the article (in
>>> Safari, Chrome, and Firefox)
>>>
>>> If I change the float for menu2 to right, is still appears under the
>>> article.

>>
>> Oh fer crissake... I left in an edit when I uploaded. Refresh.

>
>
> When you resize your page, the nav on the right drops to the bottom of
> the page


<http://i41.tinypic.com/mm8thz.png>
<http://i44.tinypic.com/w8nj80.png>

It's not my page. If the page's author discovers such a problem and asks
for help, I might look at his findings. The screenshots above show what I
see. If a visitor has their viewport set narrower than the first picture,
well, they're probably used to sites looking weird.

You supplied this as your favorite site you've made:

<http://cdkdistribution.com/>
<http://i39.tinypic.com/974t1j.png>

Instead of looking for fault with other peoples' work, you should be
working to fix that site so that it renders correctly in a web browser.
For starters, I would fix it so that the only scrollbar visible on the
user's screen is the one on the edge of the browser.
--
⁂ "Because all you of Earth are idiots!"
¯`·.¸¸.·´¯`·-> ※freemont※ <-·´¯`·.¸¸.·´¯


All times are GMT. The time now is 04:47 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.