Quantcast

Not Sure How to Get Links to Appear in a Different Container, on the Same Webpage

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Not Sure How to Get Links to Appear in a Different Container, on the Same Webpage

douglasdbenoit
Not sure how to get links to pull up target pages in a different container, on the same webpage...the article section.  Is this possible?  I have:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Site Page Structure Version 2</TITLE>
<!--<CFOUTPUT>#css2#</CFOUTPUT>-->
<STYLE TYPE="text/css">
BODY {
background-image: URL(whatever.jpg);
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
}

IMG.100 {
    max-width: 50%;  /*This is based on the original image size being "page-ready." */
    height: auto;    /*This will dynamically adjust to keep the original aspect ratio. */
}

IMG.50 {
    max-width: 50%;  /*This is based on the original image size being "page-ready." */
    height: auto;    /*This will dynamically adjust to keep the original aspect ratio. */
}

IMG.10 {
    max-width: 10%;  /*This is based on the original image size being "page-ready." */
    height: auto;    /*This will dynamically adjust to keep the original aspect ratio. */
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
/*    text-align: left; */
}

.flex-container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}

.article {
text-align: left;
color: white;
}

header {
/*background-image: URL(http://65.61.35.197/cnc/md/img/ut/bg/grass_tile.jpg);*/
/*background: black;*/
color: white;
align: left;
}

footer {
/*background: #aaa;*/
color: white;
text-align: center;
}

.nav {
/*background: #eee;*/
}

.nav ul {
list-style-type: none;
padding: 0;
}
   
.nav ul a {
text-decoration: none;
}

@media all and (min-width: 768px) {
    .nav {text-align: left;-webkit-flex: 1 auto; flex: 1 auto;-webkit-order: 1; order: 1;}
    .article {-webkit-flex: 5 0px; flex:5 0px; -webkit-order: 2; order: 2;}
    footer {-webkit-order: 3; order: 3;}
}
</STYLE>
</HEAD>

<BODY>

<DIV CLASS="flex-container">

<HEADER>
<IMG SRC="logo.gif">
</HEADER>

<NAV CLASS="nav">
<UL>
  <li><a href="#" target="Article">about_us.gif</a></li>
  <li><a href="#">find_us.gif</a></li>
  <li><a href="#">opportunities.gif</a></li>
  <li><a href="#">services.gif</a></li>
  <li><a href="#">inquiries.gif</a></li>
  <li><a href="#">your_voice.gif</a></li>
</UL>
</NAV>

<ARTICLE CLASS="article">
<H1>Content Page Title</H1>
<P>
Page Content goes here.
</ARTICLE>

<FOOTER>©2016 Me</FOOTER>
</DIV>

</BODY>
</HTML>

I would like the about_us.htm to appear in the article section of this page.  Is this possible?  And, if so, can I get a separate left menupage to show up when I click on services.gif
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Not Sure How to Get Links to Appear in a Different Container, on the Same Webpage

Daniel Holbert-3
Sorry, this question is off-topic for this mailing list -- this mailing
list is about discussion of the internals of Firefox's layout engine.

If you need help designing your website, you might consider asking on
Stack Overflow, or a web-design mailing list.

While I'm replying, here's an extremely brief maybe-answer to your
question [which may or may not be correct, depending on context -- or
may help you refine your question when you end up asking it somewhere else]:
 - If you can modify the HTML source of the page, then of course you can
move the element around, simply by placing it in a different section of
the HTML.
 - If you can't modify the HTML but you *can* modify the CSS, you could
add absolute positioning (e.g. "position:absolute; top: 0") to the
element that you want to move around.  Not ideal, but it gives you
arbitrary control over the placement of elements.

But you really want to find a more dedicated resource (or forum) on web
development to get an actual answer to your question.

Good luck!
~Daniel



On 10/31/2016 02:03 PM, [hidden email] wrote:

> Not sure how to get links to pull up target pages in a different container, on the same webpage...the article section.  Is this possible?  I have:
> <!DOCTYPE HTML>
> <HTML>
> <HEAD>
> <TITLE>Site Page Structure Version 2</TITLE>
> <!--<CFOUTPUT>#css2#</CFOUTPUT>-->
> <STYLE TYPE="text/css">
> BODY {
> background-image: URL(whatever.jpg);
> margin-left: 0;
> margin-right: 0;
> margin-top: 0;
> margin-bottom: 0;
> }
>
> IMG.100 {
>     max-width: 50%;  /*This is based on the original image size being "page-ready." */
>     height: auto;    /*This will dynamically adjust to keep the original aspect ratio. */
> }
>
> IMG.50 {
>     max-width: 50%;  /*This is based on the original image size being "page-ready." */
>     height: auto;    /*This will dynamically adjust to keep the original aspect ratio. */
> }
>
> IMG.10 {
>     max-width: 10%;  /*This is based on the original image size being "page-ready." */
>     height: auto;    /*This will dynamically adjust to keep the original aspect ratio. */
> }
>
> .flex-container {
>     display: -webkit-flex;
>     display: flex;
>     -webkit-flex-flow: row wrap;
>     flex-flow: row wrap;
> /*    text-align: left; */
> }
>
> .flex-container > * {
> padding: 15px;
> -webkit-flex: 1 100%;
> flex: 1 100%;
> }
>
> .article {
> text-align: left;
> color: white;
> }
>
> header {
> /*background-image: URL(http://65.61.35.197/cnc/md/img/ut/bg/grass_tile.jpg);*/
> /*background: black;*/
> color: white;
> align: left;
> }
>
> footer {
> /*background: #aaa;*/
> color: white;
> text-align: center;
> }
>
> .nav {
> /*background: #eee;*/
> }
>
> .nav ul {
> list-style-type: none;
> padding: 0;
> }
>    
> .nav ul a {
> text-decoration: none;
> }
>
> @media all and (min-width: 768px) {
>     .nav {text-align: left;-webkit-flex: 1 auto; flex: 1 auto;-webkit-order: 1; order: 1;}
>     .article {-webkit-flex: 5 0px; flex:5 0px; -webkit-order: 2; order: 2;}
>     footer {-webkit-order: 3; order: 3;}
> }
> </STYLE>
> </HEAD>
>
> <BODY>
>
> <DIV CLASS="flex-container">
>
> <HEADER>
> <IMG SRC="logo.gif">
> </HEADER>
>
> <NAV CLASS="nav">
> <UL>
>   <li><a href="#" target="Article">about_us.gif</a></li>
>   <li><a href="#">find_us.gif</a></li>
>   <li><a href="#">opportunities.gif</a></li>
>   <li><a href="#">services.gif</a></li>
>   <li><a href="#">inquiries.gif</a></li>
>   <li><a href="#">your_voice.gif</a></li>
> </UL>
> </NAV>
>
> <ARTICLE CLASS="article">
> <H1>Content Page Title</H1>
> <P>
> Page Content goes here.
> </ARTICLE>
>
> <FOOTER>©2016 Me</FOOTER>
> </DIV>
>
> </BODY>
> </HTML>
>
> I would like the about_us.htm to appear in the article section of this page.  Is this possible?  And, if so, can I get a separate left menupage to show up when I click on services.gif
> _______________________________________________
> dev-tech-layout mailing list
> [hidden email]
> https://lists.mozilla.org/listinfo/dev-tech-layout
>
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Not Sure How to Get Links to Appear in a Different Container, on the Same Webpage

douglasdbenoit
In reply to this post by douglasdbenoit
On Monday, October 31, 2016 at 5:24:45 PM UTC-4, Daniel Holbert wrote:

> Sorry, this question is off-topic for this mailing list -- this mailing
> list is about discussion of the internals of Firefox's layout engine.
>
> If you need help designing your website, you might consider asking on
> Stack Overflow, or a web-design mailing list.
>
> While I'm replying, here's an extremely brief maybe-answer to your
> question [which may or may not be correct, depending on context -- or
> may help you refine your question when you end up asking it somewhere else]:
>  - If you can modify the HTML source of the page, then of course you can
> move the element around, simply by placing it in a different section of
> the HTML.
>  - If you can't modify the HTML but you *can* modify the CSS, you could
> add absolute positioning (e.g. "position:absolute; top: 0") to the
> element that you want to move around.  Not ideal, but it gives you
> arbitrary control over the placement of elements.
>
> But you really want to find a more dedicated resource (or forum) on web
> development to get an actual answer to your question.
>
> Good luck!
> ~Daniel
>
>
>
> On 10/31/2016 02:03 PM, [hidden email] wrote:
> > Not sure how to get links to pull up target pages in a different container, on the same webpage...the article section.  Is this possible?  I have:
> > <!DOCTYPE HTML>
> > <HTML>
> > <HEAD>
> > <TITLE>Site Page Structure Version 2</TITLE>
> > <!--<CFOUTPUT>#css2#</CFOUTPUT>-->
> > <STYLE TYPE="text/css">
> > BODY {
> > background-image: URL(whatever.jpg);
> > margin-left: 0;
> > margin-right: 0;
> > margin-top: 0;
> > margin-bottom: 0;
> > }
> >
> > IMG.100 {
> >     max-width: 50%;  /*This is based on the original image size being "page-ready." */
> >     height: auto;    /*This will dynamically adjust to keep the original aspect ratio. */
> > }
> >
> > IMG.50 {
> >     max-width: 50%;  /*This is based on the original image size being "page-ready." */
> >     height: auto;    /*This will dynamically adjust to keep the original aspect ratio. */
> > }
> >
> > IMG.10 {
> >     max-width: 10%;  /*This is based on the original image size being "page-ready." */
> >     height: auto;    /*This will dynamically adjust to keep the original aspect ratio. */
> > }
> >
> > .flex-container {
> >     display: -webkit-flex;
> >     display: flex;
> >     -webkit-flex-flow: row wrap;
> >     flex-flow: row wrap;
> > /*    text-align: left; */
> > }
> >
> > .flex-container > * {
> > padding: 15px;
> > -webkit-flex: 1 100%;
> > flex: 1 100%;
> > }
> >
> > .article {
> > text-align: left;
> > color: white;
> > }
> >
> > header {
> > /*background-image: URL(http://65.61.35.197/cnc/md/img/ut/bg/grass_tile.jpg);*/
> > /*background: black;*/
> > color: white;
> > align: left;
> > }
> >
> > footer {
> > /*background: #aaa;*/
> > color: white;
> > text-align: center;
> > }
> >
> > .nav {
> > /*background: #eee;*/
> > }
> >
> > .nav ul {
> > list-style-type: none;
> > padding: 0;
> > }
> >    
> > .nav ul a {
> > text-decoration: none;
> > }
> >
> > @media all and (min-width: 768px) {
> >     .nav {text-align: left;-webkit-flex: 1 auto; flex: 1 auto;-webkit-order: 1; order: 1;}
> >     .article {-webkit-flex: 5 0px; flex:5 0px; -webkit-order: 2; order: 2;}
> >     footer {-webkit-order: 3; order: 3;}
> > }
> > </STYLE>
> > </HEAD>
> >
> > <BODY>
> >
> > <DIV CLASS="flex-container">
> >
> > <HEADER>
> > <IMG SRC="logo.gif">
> > </HEADER>
> >
> > <NAV CLASS="nav">
> > <UL>
> >   <li><a href="#" target="Article">about_us.gif</a></li>
> >   <li><a href="#">find_us.gif</a></li>
> >   <li><a href="#">opportunities.gif</a></li>
> >   <li><a href="#">services.gif</a></li>
> >   <li><a href="#">inquiries.gif</a></li>
> >   <li><a href="#">your_voice.gif</a></li>
> > </UL>
> > </NAV>
> >
> > <ARTICLE CLASS="article">
> > <H1>Content Page Title</H1>
> > <P>
> > Page Content goes here.
> > </ARTICLE>
> >
> > <FOOTER>©2016 Me</FOOTER>
> > </DIV>
> >
> > </BODY>
> > </HTML>
> >
> > I would like the about_us.htm to appear in the article section of this page.  Is this possible?  And, if so, can I get a separate left menupage to show up when I click on services.gif
> > _______________________________________________
> > dev-tech-layout mailing list
> > [hidden email]
> > https://lists.mozilla.org/listinfo/dev-tech-layout
> >


I found Zen Garden
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Loading...