• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Dynamic Page Content When Using Flex

Explorer ,
Jun 07, 2022 Jun 07, 2022

Copy link to clipboard

Copied

Hi Guys,

 

I'm curious how you would implement dynamic page content using Flex.  I found a sample that I thought was pretty interesting and wanted to try using it in my template but the sample doesn't use flex so I'm guessubg that it would have to be modified.   This is the original HTML and CSS code.  What aspects of it would have to be modified to work with Flex?  Thanks In Advance.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CSS Tabs Revisited</title>
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<main>
	<h1>CSS Tabs Revisited</h1>
	<input id="menuitemone" type="radio" name="menutabs" checked>
	<input id="menuitemtwo" type="radio" name="menutabs">
	<input id="menuitemthree" type="radio" name="menutabs">
	<input id="menuitemfour" type="radio" name="menutabs">
	<div id="menutabs">
		<label id="menutabone" for="menuitemone">Home</label>
		<label id="menutabtwo" for="menuitemtwo">Services</label>
		<label id="menutabthree" for="menuitemthree">Locations</label>
		<label id="menutabfour" for="menuitemfour">Profile</label>
	</div>
	<div id="content">
		<section id="content1">
			<h3>Based on this Dribbble</h3>
			<p>
				<a href="https://dribbble.com/shots/509024-Tabbed-Menu">
					https://dribbble.com/shots/509024-Tabbed-Menu
				</a>
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis adipiscing risus, porttitor viverra urna condimentum et. Donec vestibulum lacus vel dolor dictum pellentesque. Aliquam sodales sem quis urna condimentum, sit amet elementum magna semper.</p>
		</section>
		<section id="content2">
			<h3>Something Clever</h3>
			<p>Aliquam condimentum hendrerit nisi, nec vestibulum mi feugiat ut. Donec lobortis nisi neque, in egestas eros venenatis eu. Vestibulum nulla nisi, venenatis at pretium id, fermentum quis risus. Quisque porta suscipit neque eu placerat. Etiam scelerisque, quam in sodales iaculis, velit velit mattis nunc, quis dapibus massa elit nec enim. Vivamus quis libero aliquam, volutpat nisl sed, consectetur ante.</p>
			<p>Donec aliquam semper felis, in placerat leo blandit in. Integer interdum elit quis felis tempor venenatis. In faucibus ac mauris id commodo. Proin in sapien tincidunt, luctus mi id, bibendum dui. Nunc tincidunt libero ut purus vehicula, sit amet tincidunt mi sollicitudin. Donec varius erat magna, sed convallis purus adipiscing ut. Duis sagittis ut leo ut auctor. Ut convallis nisl nec purus sollicitudin, nec iaculis felis rutrum. </p>
		</section>
		<section id="content3">
			<h3>Interesting Heading Text</h3>
			<p>Fusce pulvinar porttitor dui, eget ultrices nulla tincidunt vel. Suspendisse faucibus lacinia tellus, et viverra ligula. Suspendisse eget ipsum auctor, congue metus vel, dictum erat. Aenean tristique euismod molestie. Nulla rutrum accumsan nisl, ac semper sapien tincidunt et. Praesent tortor risus, commodo et sagittis nec, aliquam quis augue. Aenean non elit elementum, tempor metus at, aliquam felis.</p>
		</section>
		<section id="content4">
			<h3>Here Are Many Words</h3>
			<p>Vivamus convallis lectus lobortis dapibus ultricies. Sed fringilla vitae velit id rutrum. Maecenas metus felis, congue ut ante vitae, porta cursus risus. Nulla facilisi. Praesent vel ligula et erat euismod luctus. Etiam scelerisque placerat dapibus. Vivamus a mauris gravida urna mattis accumsan.</p>
			<p>Duis sagittis massa vel elit tincidunt, sed molestie lacus dictum. Mauris elementum, neque eu dapibus gravida, eros arcu euismod metus, vitae porttitor nibh elit at orci. Vestibulum laoreet id nulla sit amet mattis.</p>
		</section>
	</div>
	<footer>
		
	</footer>
</main>
<!-- partial -->
  
</body>
</html>
@Import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
  background: #B1A7A0;
  color: #FCF9F4;
  font-family: "Open Sans", "Arial";
}
main {
  max-width: device-width;
  margin: 30px auto;
  background: #3F3F3D;
  padding: 30px;
  box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
input[name=menutabs] {
  display: none;
}
a {
	color: #3E6EB6;
}
#menutabs {
	padding: 0 0 0 50px;
	width: calc(100% + 50px);
	margin-left: -50px;
	background: #2B2A28;
	height: 80px;
    border-top: 5px solid #3E6EB6;	
	border-bottom: 5px solid #3E6EB6;
	box-shadow: 0 3px 5px #00000033;
}
#menutabs::before {
	content: "";
	display: block;
	position: absolute;
	z-index: -100;
	width: 100%;
	left: 0;
	margin-top: 16px;
	height: 80px;
	background: #2B2A28;
	border-bottom: 5px solid #3E6EB6;
}
#menutabs::after {
	content: "";
	display: block;
	position: absolute;
	z-index: 0;
	height: 80px;
	width: 102px;
	background: #3E6EB6;
	transition: transform 400ms;
}
#menutabs label {
	position: relative;
	z-index: 100;
	display: block;
	float: left;
    font-size: 11px;
	text-transform: uppercase;
	text-align: center;
	width: 100px;
	height: 100%;
	border-right: 1px dotted #575654;
	cursor: pointer;
}
#menutabs label:first-child {
	border-left: 1px dotted #575654;
}
#menutabs label::before {
	content: "";
	display: block;
	height: 30px;
	width: 30px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	filter: invert(40%);
	margin: 10px auto;
}
#menutabone::before {
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/paper-plane.png);
}
#menutabtwo::before {
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/big-cloud.png);
}
#menutabthree::before {
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/folding-brochure.png);
}
#menutabfour::before {
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/mans-silhouette.png);
}
#menuitemone:checked ~ #menutabs #menutabone::before, #menuitemtwo:checked ~ #menutabs #menutabtwo::before, #menuitemthree:checked ~ #menutabs menutabthree::before, #menuitemfour:checked ~ #menutabs #menutabfour::before {
	filter: invert(100%);
}
#menuitemone:checked ~ #menutabs::after {
	transform: translateX(0);
}
#menuitemtwo:checked ~ #menutabs::after {
	transform: translateX(101px);
}
#menuitemthree:checked ~ #menutabs::after {
	transform: translateX(202px);
}
#menuitemfour:checked ~ #menutabs::after {
	transform: translateX(303px);
}
#content {
	position: relative;
	height: 500px;
}
#content::before {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	margin-left: -50px;
	border-top: 8px solid #000;
	border-right: 10px solid #000;
	border-left: 10px solid transparent;
	border-bottom: 8px solid transparent;
}
#content::after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	margin-left: calc(100% + 30px);
	border-top: 8px solid #000;
	border-left: 10px solid #000;
	border-right: 10px solid transparent;
	border-bottom: 8px solid transparent;
}
#content section {
	position: absolute;
	transform: translateY(50px);
	opacity: 0;
	transition: transform 500ms, opacity 500ms;
}
#menuitemone:checked ~ #content #content1, #menuitemtwo:checked ~ #content #content2, #menuitemthree:checked ~ #content #content3, #menuitemfour:checked ~ #content #content4 {
	transform: translateY(0);
	opacity: 1;
}
footer {
  position: fixed;
  bottom: 0;
  right: 0;
  font-size: 13px;
  background: #555;
  padding: 5px 10px;
  margin: 5px;
}
TOPICS
Code , How to

Views

377

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 07, 2022 Jun 07, 2022

Copy link to clipboard

Copied

Flexbox and CSS Grid are ways to divide a page into a suitable layout. The example that you have shown does not need either of these because there is just the one column, more like a layout that would suit a mobile device.

 

In a previous reply, I gave you an example that you could use to replace the above by removeing some of the columns. I shall repeat my example hoping that it does not fall on deaf ears this time round.

 

<!doctype html>
<html lang="en-AU">
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Layout using Flexbox">

<style>
    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    div, nav {
        min-height: 50px;
        border: 1px solid black;
        padding: 5px;
        margin: 5px;
    }
    @media screen and (min-width: 768px) {
        main {
            display: flex;
            flex: 1;
        }
        main div:nth-of-type(1) {
            flex: 2;
            order: 2;
        }
        main div:nth-of-type(2) {
            flex: 1;
            order: 1;
        }
        main div:nth-of-type(3) {
            flex: 1;
            order: 3;
        }
        footer {
            display: flex;
        }
        footer div {
            flex: 1;
            text-align: center;
        }
    }
</style>
</head>
<body>
    <header>
        logo
        <nav>
            navigation bar
        </nav>
    </header>
    <main>
        <div>
            main content
        </div> 
        <div>
            <article>
                <h3>First Left Article</h3>
            </article>
            <article>
                <h3>Second Left Article</h3>
            </article>
            <article>
                <h3>Third Left Article</h3>
            </article>        
        </div>
        <div>
            <article>
                <h3>First Right Article</h3>
            </article>
            <article>
                <h3>Second Right Article</h3>
            </article>
            <article>
                <h3>Third Right Article</h3>
            </article>
        </div>
    </main>
    <footer>
        <div>
            left footer
        </div>
        <div>
            center footer
        </div>
        <div>
            right footer
        </div>
    </footer>
</body>
</html>

 

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 07, 2022 Jun 07, 2022

Copy link to clipboard

Copied

Sorry, I should have posted my code which does use flex and has more than one colum.  Your help has NEVER fallen on deaf ears and has ALWAYS been appreciated.  I'm sorry you feel otherwise.

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Holy Grail</title>
<link rel="stylesheet" href="css/full.css">
</head>
<body>
<div id="headernavigation" >
  <div id="headerwrapper">
    <header id="header" >Header
      <div id="logo"> Logo </div>
    </header>
  </div>
  <div id="navigationwrapper">
    <input id="menuitemone" type="radio" name="menutabs" checked>
    <input id="menuitemtwo" type="radio" name="menutabs">
    <input id="menuitemthree" type="radio" name="menutabs">
    <input id="menuitemfour" type="radio" name="menutabs">
    <div id="menutabs">
      <label id="menutabone" for="menuitemone">Home</label>
      <label id="menutabtwo" for="menuitemtwo">Products</label>
      <label id="menutabthree" for="menuitemthree">Services</label>
      <label id="menutabfour" for="menuitemfour">Contact Us</label>
    </div>
  </div>
</div>
<div id="bodywrapper">
  <aside id="leftaside" class="bodystyle">
    <article class="toparticle">First Left Article</article>
    <article class="middlearticle">Second Left Article</article>
    <article class="bottomarticle">Third Left Article</article>
  </aside>
  <article id="content" class="bodystyle">
    <section id="content1">
      <h3>Based on this Dribbble</h3>
      <p> <a href="https://dribbble.com/shots/509024-Tabbed-Menu"> https://dribbble.com/shots/509024-Tabbed-Menu </a> </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis adipiscing risus, porttitor viverra urna condimentum et. Donec vestibulum lacus vel dolor dictum pellentesque. Aliquam sodales sem quis urna condimentum, sit amet elementum magna semper.</p>
    </section>
    <section id="content2">
      <h3>Something Clever</h3>
      <p>Aliquam condimentum hendrerit nisi, nec vestibulum mi feugiat ut. Donec lobortis nisi neque, in egestas eros venenatis eu. Vestibulum nulla nisi, venenatis at pretium id, fermentum quis risus. Quisque porta suscipit neque eu placerat. Etiam scelerisque, quam in sodales iaculis, velit velit mattis nunc, quis dapibus massa elit nec enim. Vivamus quis libero aliquam, volutpat nisl sed, consectetur ante.</p>
      <p>Donec aliquam semper felis, in placerat leo blandit in. Integer interdum elit quis felis tempor venenatis. In faucibus ac mauris id commodo. Proin in sapien tincidunt, luctus mi id, bibendum dui. Nunc tincidunt libero ut purus vehicula, sit amet tincidunt mi sollicitudin. Donec varius erat magna, sed convallis purus adipiscing ut. Duis sagittis ut leo ut auctor. Ut convallis nisl nec purus sollicitudin, nec iaculis felis rutrum. </p>
    </section>
    <section id="content3">
      <h3>Interesting Heading Text</h3>
      <p>Fusce pulvinar porttitor dui, eget ultrices nulla tincidunt vel. Suspendisse faucibus lacinia tellus, et viverra ligula. Suspendisse eget ipsum auctor, congue metus vel, dictum erat. Aenean tristique euismod molestie. Nulla rutrum accumsan nisl, ac semper sapien tincidunt et. Praesent tortor risus, commodo et sagittis nec, aliquam quis augue. Aenean non elit elementum, tempor metus at, aliquam felis.</p>
    </section>
    <section id="content4">
      <h3>Here Are Many Words</h3>
      <p>Vivamus convallis lectus lobortis dapibus ultricies. Sed fringilla vitae velit id rutrum. Maecenas metus felis, congue ut ante vitae, porta cursus risus. Nulla facilisi. Praesent vel ligula et erat euismod luctus. Etiam scelerisque placerat dapibus. Vivamus a mauris gravida urna mattis accumsan.</p>
      <p>Duis sagittis massa vel elit tincidunt, sed molestie lacus dictum. Mauris elementum, neque eu dapibus gravida, eros arcu euismod metus, vitae porttitor nibh elit at orci. Vestibulum laoreet id nulla sit amet mattis.</p>
    </section>
  </article>
  <aside id="rightaside" class="bodystyle">
    <article class="toparticle">First Right Article</article>
    <article class="middlearticle">Second Right Article</article>
    <article class="bottomarticle">Third Right Article</article>
  </aside>
</div>
<div id="footerwrapper">
  <div id="leftfooter" class="footerstyle"> Left Footer </div>
  <div id="centerfooter" class="footerstyle"> Center Footer </div>
  <div id="rightfooter" class="footerstyle"> Right Footer </div>
</div>
</body>
</html>

 

* {
  box-sizing: border-box;
}

#bodywrapper {
  flex: 1;
  display: flex;
}

#header {
  margin: .1em;
  padding: .2em;	
  min-height: 100px;
  border: var(--default-border-width) var(--default-border-style);
  border-radius: var(--default-border-radius);
}

#logo {
  padding: .2em;
}

#menutabs {
    margin: .1em;
    padding: .2em;	
	padding: 0 0 0 50px;
    height: 80px;
    border-top: 5px var(--default-border-style);	
	border-bottom: 5px var(--default-border-style);
}

#menutabs::before {
	content: "";
	display: block;
	position: absolute;
	z-index: -100;
	width: 100%;
	left: 0;
	margin-top: 16px;
	height: 80px;
    border-bottom: 5px var(--default-border-style);	
}

#menutabs::after {
	content: "";
	display: block;
	position: absolute;
	z-index: 0;
	height: 80px;
	width: 102px;
	transition: transform 400ms;
}

#menutabs label {
	position: relative;
	z-index: 100;
	display: block;
	float: left;
    font-size: 11px;
	text-transform: uppercase;
	text-align: center;
	width: 100px;
	height: 100%;
	cursor: pointer;
}

#menutabs label:first-child {
	border-left: var(--default-border-width) var(--default-border-style);
}

#menutabs label::before {
	content: "";
	display: block;
	height: 30px;
	width: 30px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	filter: invert(40%);
	margin: 10px auto;
}

#menutabone::before {
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/paper-plane.png);
}

#menutabtwo::before {
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/big-cloud.png);
}

#menutabthree::before {
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/folding-brochure.png);
}
#menutabfour::before {
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/mans-silhouette.png);
}

#menuitemone:checked ~ #menutabs #menutabone::before, #menuitemtwo:checked ~ #menutabs #menutabtwo::before, #menuitemthree:checked ~ #menutabs menutabthree::before, #menuitemfour:checked ~ #menutabs #menutabfour::before {
	filter: invert(100%);
}

#menuitemone:checked ~ #menutabs::after {
	transform: translateX(0);
}

#menuitemtwo:checked ~ #menutabs::after {
	transform: translateX(101px);
}

#menuitemthree:checked ~ #menutabs::after {
	transform: translateX(202px);
}

#menuitemfour:checked ~ #menutabs::after {
	transform: translateX(303px);
}

#content {
	position: relative;
	height: 500px;
}
#content::before {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	margin-left: -50px;
	border-top: 8px solid #000;
	border-right: 10px solid #000;
	border-left: 10px solid transparent;
	border-bottom: 8px solid transparent;
}
#content::after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	margin-left: calc(100% + 30px);
	border-top: 8px solid #000;
	border-left: 10px solid #000;
	border-right: 10px solid transparent;
	border-bottom: 8px solid transparent;
}
#content section {
	position: absolute;
	transform: translateY(50px);
	opacity: 0;
	transition: transform 500ms, opacity 500ms;
}
#menuitemone:checked ~ #content #content1, #menuitemtwo:checked ~ #content #content2, #menuitemthree:checked ~ #content #content3, #menuitemfour:checked ~ #content #content4 {
	transform: translateY(0);
	opacity: 1;
}

#leftaside {
  display: flex;
  flex-wrap: wrap;	
  flex-basis: 20%;	
}

#content {
  flex: 1;	
  flex: 60%;
}

#rightaside {
  display: flex;
  flex-wrap: wrap;	
  flex-basis: 20%;	
}

#footerwrapper {
  display: flex;
  gap: .2em;
}

#leftfooter {
  flex: 20%;
}

#centerfooter {
  flex: 60%;
}

#rightfooter {
  flex: 20%;
}

.bodystyle {
  margin: .1em;
  padding: .2em;	
  border: var(--default-border-width) var(--default-border-style);
  border-radius: var(--default-border-radius);
}

.footerstyle {
  text-align: center;
  border: var(--default-border-width) var(--default-border-style);
  border-radius: var(--default-border-radius);
}

.toparticle {
  margin: .1em;
  padding: .2em;	
  border: var(--default-border-width) var(--default-border-style);
  border-radius: var(--default-border-radius);
  align-self: start;
  flex-basis: 100%;	
}

.middlearticle {
  margin: .1em;
  padding: .2em;	
  border: var(--default-border-width) var(--default-border-style);
  border-radius: var(--default-border-radius);
  align-self: center;
  flex-basis: 100%;	
}

.bottomarticle {
  margin: .1em;
  padding: .2em;	
  border: var(--default-border-width) var(--default-border-style);
  border-radius: var(--default-border-radius);
  align-self: end;
  flex-basis: 100%;	
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 08, 2022 Jun 08, 2022

Copy link to clipboard

Copied

Have a look at this code where I have not created a click-on-menu-item behaviour. At this stage I have concentrated on the layout.

 

<!doctype html>
<html lang="en-AU">
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Layout using Flexbox">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<style>
    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    div, header, nav {
        min-height: 50px;
        padding: 5px;
        margin: 5px;
    }
    nav {
        border: none;
    }
    nav ul {
        list-style-type: none;
    }
    nav ul li {
        display: inline-block;
        margin-right: 80px;
        padding: 10px;
        text-align: center;
    }
    nav ul li.active {
        background: blue;
        color: white;
    }
    @media screen and (min-width: 768px) {
        main {
            display: flex;
            flex: 1;
        }
        main div:nth-of-type(1) {
            flex: 2;
            order: 2;
        }
        main div:nth-of-type(2) {
            flex: 1;
            order: 1;
        }
        main div:nth-of-type(3) {
            flex: 1;
            order: 3;
        }
        footer {
            display: flex;
        }
        footer div {
            flex: 1;
            text-align: center;
        }
    }
</style>
</head>
<body>
    <header>
        <h1>Logo</h1>
        <nav>
            <ul>
                <li class="active"><i class="fas fa-home fa-2x"></i><br>Home</li>
                <li><i class="fas fa-cloud fa-2x"></i><br>Services</li>
                <li><i class="far fa-map fa-2x"></i><br>Locations</li>
                <li><i class="fas fa-user fa-2x"></i><br>Profile</li>
            </ul>
       </nav>
    </header>
    <main>
        <div>
            <article>
                <h2>All about Dribble</h2>
                <p>Short explanation</p>
                <section>
                    <h3>Based on this Dribbble</h3>
                    <p>
                        <a href="https://dribbble.com/shots/509024-Tabbed-Menu">
                            https://dribbble.com/shots/509024-Tabbed-Menu
                        </a>
                    </p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis adipiscing risus, porttitor viverra urna condimentum et. Donec vestibulum lacus vel dolor dictum pellentesque. Aliquam sodales sem quis urna condimentum, sit amet elementum magna semper.</p>
                </section>
                <section>
                    <h3>Something Clever</h3>
                    <p>Aliquam condimentum hendrerit nisi, nec vestibulum mi feugiat ut. Donec lobortis nisi neque, in egestas eros venenatis eu. Vestibulum nulla nisi, venenatis at pretium id, fermentum quis risus. Quisque porta suscipit neque eu placerat. Etiam scelerisque, quam in sodales iaculis, velit velit mattis nunc, quis dapibus massa elit nec enim. Vivamus quis libero aliquam, volutpat nisl sed, consectetur ante.</p>
                    <p>Donec aliquam semper felis, in placerat leo blandit in. Integer interdum elit quis felis tempor venenatis. In faucibus ac mauris id commodo. Proin in sapien tincidunt, luctus mi id, bibendum dui. Nunc tincidunt libero ut purus vehicula, sit amet tincidunt mi sollicitudin. Donec varius erat magna, sed convallis purus adipiscing ut. Duis sagittis ut leo ut auctor. Ut convallis nisl nec purus sollicitudin, nec iaculis felis rutrum. </p>
                </section>
                <section>
                    <h3>Interesting Heading Text</h3>
                    <p>Fusce pulvinar porttitor dui, eget ultrices nulla tincidunt vel. Suspendisse faucibus lacinia tellus, et viverra ligula. Suspendisse eget ipsum auctor, congue metus vel, dictum erat. Aenean tristique euismod molestie. Nulla rutrum accumsan nisl, ac semper sapien tincidunt et. Praesent tortor risus, commodo et sagittis nec, aliquam quis augue. Aenean non elit elementum, tempor metus at, aliquam felis.</p>
                </section>
                <section>
                    <h3>Here Are Many Words</h3>
                    <p>Vivamus convallis lectus lobortis dapibus ultricies. Sed fringilla vitae velit id rutrum. Maecenas metus felis, congue ut ante vitae, porta cursus risus. Nulla facilisi. Praesent vel ligula et erat euismod luctus. Etiam scelerisque placerat dapibus. Vivamus a mauris gravida urna mattis accumsan.</p>
                    <p>Duis sagittis massa vel elit tincidunt, sed molestie lacus dictum. Mauris elementum, neque eu dapibus gravida, eros arcu euismod metus, vitae porttitor nibh elit at orci. Vestibulum laoreet id nulla sit amet mattis.</p>
                </section>
            </article>
        </div> 
        <div>
            <article>
                <h3>First Left Article</h3>
            </article>
            <article>
                <h3>Second Left Article</h3>
            </article>
            <article>
                <h3>Third Left Article</h3>
            </article>        
        </div>
        <div>
            <article>
                <h3>First Right Article</h3>
            </article>
            <article>
                <h3>Second Right Article</h3>
            </article>
            <article>
                <h3>Third Right Article</h3>
            </article>
        </div>
    </main>
    <footer>
        <div>
            left footer
        </div>
        <div>
            center footer
        </div>
        <div>
            right footer
        </div>
    </footer>
</body>
</html>

 

 

There are a number of remarks to be made of the code that you have shown:

1. "aside" has been misused (see the discussion in your previous topic)

2, using "header", "nav" and "main" will enhance sematics

3. "article" requires a header tag as in <h3> or similar.

4. Far too many useless ID's and classes

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 08, 2022 Jun 08, 2022

Copy link to clipboard

Copied

Ben,

Thank you for your assistance and advice.  You are correct.  My code has become cluttered as this project has evolved.  I should have focused more on getting the basic layout the way I wanted it before proceeding further.  I am going to start from scratch and use the code you provided as a starting point.  I appreciate your time patience and assistance.  I will keep you posted on my progress.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 08, 2022 Jun 08, 2022

Copy link to clipboard

Copied

Dismissing for a moment the code bloat and misused HTML tags, this code is not DYNAMIC.  It's static. 

 

DYNAMIC means content is coming from a database or external files and page is populated by the server.  There are many ways to build dynamic sites, the most common is PHP/MySQL because it's cheap & readily available on commercial hosting plans.  But ColdFusion, Python, ASP.NET, NODE.js and other options will work too if your server and coding skills support them.

 

Creating a DYNAMIC site begins with a plain vanilla semantic structure.

Data is called. Then code strings are inserted inside HTML tags. The code strings tell the server exactly which content goes where.  

 

Obviously some careful planning goes into creating the database & how  data will be used later.  Once everything is working,  then you can style it to fit various devices.  Don't put the cart ahead of the horse.

 

By way of example, this is a dynamic web page in PHP/MySQL. Notice the minimal use of HTML tags, <main> <section> <ul> <li>. 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DYNAMIC PHP/MYSQL</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<!--SITEWIDE <HEADER> AND <NAV> FROM FILES-->
<?php include("incl/header.html"); ?>
<?php include("incl/nav.html"); ?>

<main class="container">
<section class="row">
<h3><a href="new_products.php">New Products</a></h3>

<!--NEW PRODUCTS SLIDESHOW FROM DATABASE-->
<ul id="horizontal">
<?php 
$con = mysqli_connect("localhost","database","password","table_id");
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }
$sql = "SELECT * FROM table_id ORDER BY prod_id DESC LIMIT 10";
$result = mysqli_query($con, $sql);
// Associative array
while ($row = mysqli_fetch_assoc($result)){
echo '<li><a href="detail-page.php?prodid='.$row['prod_id'].'#product"><img alt="'.$row['prod_code'].'" title="'.$row['prod_name'].'"  class="img-thumbnail" src="'.$row['prod_thumb'].'"></a></li>';}
// Free result set
mysqli_free_result($result);
mysqli_close($con);
?>
</ul>
</section>
</main>

<!--SITEWIDE <FOOTER> FROM FILE -->
<?php include("incl/footer-text.html"); ?>
</body>
</html>

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 08, 2022 Jun 08, 2022

Copy link to clipboard

Copied

quote

Dismissing for a moment the code bloat and misused HTML tags, this code is not DYNAMIC.  It's static. 

 

By @Nancy OShea

 

The OP means animations, elements that move/change onclick, scroll - events - I guess that could loosely be designated as being 'dynamic'. Some times its difficult to label something as everyone has their own definition.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 08, 2022 Jun 08, 2022

Copy link to clipboard

Copied

I never thought I'd be citing Wix as an authority but here goes...

https://www.wix.com/blog/2021/11/static-vs-dynamic-website/

 

In the context of website creation, static and dynamic refers to the ways in which websites deliver and display content. A static website is one with stable content, where every user sees the exact same thing on each individual page. On the other hand, a dynamic website is one where content is pulled on-the-fly, allowing its content to change with the user.

 

Examples of Dynamic sites:

  • Shopify
  • Facebook
  • Amazon
  • Hubspot
  • Netflix
  • WordPress
  • YouTube

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 09, 2022 Jun 09, 2022

Copy link to clipboard

Copied

quote

I never thought I'd be citing Wix as an authority but here goes...

https://www.wix.com/blog/2021/11/static-vs-dynamic-website/

 

In the context of website creation, static and dynamic refers to the ways in which websites deliver and display content. A static website is one with stable content, where every user sees the exact same thing on each individual page. On the other hand, a dynamic website is one where content is pulled on-the-fly, allowing its content to change with the user.

 

Examples of Dynamic sites:

  • Shopify
  • Facebook
  • Amazon
  • Hubspot
  • Netflix
  • WordPress
  • YouTube

 


By @Nancy OShea

 

Like everything concerning the web these days it's a sh*teshow with anyone and everyone just making things up from a view point of how they see it.

 

I mean come on everything is an application these days - 2 lines of javascript adding a couple of numbers together is supposedly an application

 

And no you shouldnt be quoting anything from Wix, you'll soon be pointing to a blog from Wix supposedly informing us how to create a responsive website!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 09, 2022 Jun 09, 2022

Copy link to clipboard

Copied

LATEST

if you don't mind... let's push the deconstruction further... without entering into a sophism, and that's where lies the complexity and the question...


a site written in HTML is a site that necessarily presents the same information, whatever the user

so
a site written in HTML is thus a static site, nothing moves, in term of existing contents, if it is not the addition of new contents corresponding to the addition of new HTML static pages


the same site written in PHP, which will just allow us to mutualize the common parts, like the header, the menus, the third party information... using includes,  but which will store each page in a database, and will always present the same pages to the users, in term of content... will also be a static site... although the pages will be dynamically generated.
so a site with static content is a static site although written in PHP


so WIX is a 2.0 tool according to the definition made by Tim O'reilly https://www.oreilly.com/pub/a/web2/archive/what-is-web-20.html ... and so produces static sites


In that way, Wordpress produces also static content... except in the case where the user must be connected to read articles dedicated to him, and to which all Internet users will not necessarily have access... in the same way certain parts of articles will be able to be delivered only when the visitors will have filled certain operations, as subscription, as gain of new level or rank... but... but... how many Wordpress web site are developped that way, compare to mass of WP.com or WP 5 minutes installation... are done...


so we can say, that in some cases WP can generate dynamic sites but in the vast majority of cases, WP produces static sites according to the availability generated by the web 2.0

 

I 100% agree with @osgood_ when he talks about adding one line of JS to get an app... so real...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 08, 2022 Jun 08, 2022

Copy link to clipboard

Copied

Your original code example in POST 1 is all well and good when used as a 'playground' to show off ones skills as a coder BUT how is this supposed to work on mobile devices. If you limit your nav to 3 or 4 short items it will be ok but if you have more items in the nav then probably would need to rethink the whole concept. Not sure it is worth wasting time on only to discover its not usable on mobile devices. There is more to this than meets the eye.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 08, 2022 Jun 08, 2022

Copy link to clipboard

Copied

Yes  thank you for the advice.   All good points for sure.  I apprecaite all the help and suppoer.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines