Turning sections into divs
1
I recently made a website that uses sections instead of divs because I want the divs to float in line with one another in the same div and that has become quite confusing for me to do.
Presumably, I would like this to be in the head of the webpage but every time I try to remove the containers, the divs collapse on one another causing them to share CSS properties which I don't want to obviously happen.
What my header looks like
What my page should look like
An example of what happens if you remove the containers
I want my divs to stack side by side in the same div and that the only way I found to do that effectively is by using sections but it's not HTML5 standard.
Please tell me how I may fix my code so I can meet the HTML5 standard, thank you.
header, nav, footer, section, clipper, SliderFrame, Picture {
display: block;
margin-bottom: 20px;
}
* {
margin: 0px;
padding: 0px;
}
#clipper
{
float:left;
margin-bottom: 20px;
}
#SliderFrame
{
margin-left: auto;
margin-right: auto;
border: 1px solid;
width: 830px;
height: 450px;
}
#Prices1of3
{
width: 175px;
border: 1px solid;
margin-left: 330px;
float: left;
}
#Prices2of3
{
width: 175px;
border: 1px solid;
margin-left: 175px;
float: left;
}
#Prices3of3
{
width: 175px;
border: 1px solid;
margin-left: 175px;
float: left;
}
#Picture
{
margin-left: 620px;
margin-right: auto;
width: 449px;
height: 226px;
}
#Content
{
margin-left: auto;
margin-right: auto;
max-width: 1260px;
min-width: 780px;
width: 780px;
}
#container
{
margin:0 auto;
background-color:#66B034;
max-width: 1260px;
min-width: 780px;
width: 90%;
color: #000;
font-family: "Trebuchet MS", Arial, Heletica, sans-serif;
}
#logo {
float: left;
width: 302px;
height: 72px;
background-image:url(../images/Logo/Logofin.gif);
background-repeat:no-repeat;
border: 1px solid;
margin-right: 143px;
}
header h1{
visibility: hidden;
}
nav ul li{
list-style: none;
border: 1px solid Gray;
display: inline;
}
nav ul li a{
text-align: center;
padding: 1px;
display: inline-block;
}
nav {
border: solid medium Black;
float: left;
width: 70%;
margin: 1px;
display: inline-block;
}
nav.nav_item1 {
}
nav.nav_item2 {
}
nav.nav_item3 {
}
nav.nav_item4 {
}
section{
border: solid medium Black;
}
footer{
border: solid medium Black;
clear: both;
margin: 10px;
padding: 5px;
}
section ul, ol{
margin: 15px;
}
.mySlides
{
width: 830px;
height: 330px;
display:none
}
.w3-left, .w3-right, .w3-badge
{
cursor:pointer
}
.w3-badge
{
height:13px;
width:13px;
padding:0
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Bog Snorkelling</title>
<link rel="stylesheet" href="../assets/css/webber_1.css" >
<div id="clipper">
<section>
<div id="logo">
</div>
<div id="Navigation">
<nav>
<ul>
<li class="nav_item1"><a href= "../index.html">Home</a></li>
<li class="nav_item2"><a href= "../bogsnorkeling/bog.html">Bog Snorkelling</a></li>
<li class="nav_item3"><a href= "../football/foot.html">Football</a></li>
<li class="nav_item4"><a href= "../golf/golf.html">Golf</a></li>
<li class="nav_item4"><a href= "../racketsports/racket.html">Racket Sports</a></li>
<li class="nav_item5"><a href= "../bookingsfailure/bookingfail.html">Bookings Failure</a></li>
<li class="nav_item6"><a href= "../bookingssuccess/bookingsuccess.html">Bookings Success</a></li>
<li class="nav_item7"><a href= "../bookings/bookings.html">Bookings</a></li>
<li class="nav_item8"><a href= "../community/community.html">Community</a></li>
<li class="nav_item9"><a href= "../induction/induction.html">Induction</a></li>
<li class="nav_item10"><a href= "../inductionsuccess/inductionsuccess.html">Induction Success</a></li>
<li class="nav_item11"><a href= "../inductionfailure/inductionfail.html">Induction Failure</a></li>
<li class="nav_item12"><a href= "../facilities/facilities.html">Facilities</a></li>
<li class="nav_item13"><a href= "../contactus/contactus.html">Contact Us</a></li>
<li class="nav_item14"><a href= "../contactsuccess/contactsuccess.html">Contact Success</a></li>
<li class="nav_item15"><a href= "../contactfailure/contactfail.html">Contact Failure</a></li>
<li class="nav_item16"><a href= "../aboutus/aboutus.html">About Us</a></li>
</ul>
</nav>
</div>
</section>
</div>
</section>
<section>
<h1>Nothing</h1>
</section>
<section>
<div id="Picture">
<img src = "../assets/images/Bog/BogSnork.jpg" alt = "nice pic!" class = center>
</div>
</section>
<section>
<div id="Content">
<h3> Bog Snorkelling </h3>
<br>
<p>Ever wanted to be the fastest at bog snorkelling? Well now you can with our new exciting Bog Snorkeller's course!</p>
<br>
<p>Bog Snorkelling is a Welsh idea conceived in the Neuadd Arms pub in Llawrtyd Wells whereby competitiors snorkel in a 60 foot cold and murky mud bog in order to get the record time without using traditional swimming strokes. </p>
<br>
<p>Our Bog measures 80 feet which is the perfect size to challenge our would be bog champions! Remember to bring your own wetsuit, flippers, snorkel mask, cloth and towels and we'll provide the buckets of clean water! </p>
<br>
<p>Our Prices start from as little as £2.00 (off peak daily sessions) or £10 (weekly sessions) or £50 (monthly sessions).</p>
</div>
</section>
<div id = "Prices1of3">
<section>
<h3>£2</h3>
</section>
</div>
<div id = "Prices2of3">
<section>
<h3>£5</h3>
</div>
</section>
<div id = "Prices3of3">
<section>
</h3>£10</h3>
</div>
</section>
<p></p>
<div id="footer">
<footer>
<p>©Webberbridge Sports Hall</p> <p>Contact us: <a href = "mailto:info@webberbridgesports.mail"> info@webberbridgesports.mail</a></p>
</footer>
</div>
</body>
</html>html css sections
asked Nov 25 '18 at 3:29
StaffbaneStaffbane
163
add a comment |
1
I recently made a website that uses sections instead of divs because I want the divs to float in line with one another in the same div and that has become quite confusing for me to do.
Presumably, I would like this to be in the head of the webpage but every time I try to remove the containers, the divs collapse on one another causing them to share CSS properties which I don't want to obviously happen.
What my header looks like
What my page should look like
An example of what happens if you remove the containers
I want my divs to stack side by side in the same div and that the only way I found to do that effectively is by using sections but it's not HTML5 standard.
Please tell me how I may fix my code so I can meet the HTML5 standard, thank you.
header, nav, footer, section, clipper, SliderFrame, Picture {
display: block;
margin-bottom: 20px;
}
* {
margin: 0px;
padding: 0px;
}
#clipper
{
float:left;
margin-bottom: 20px;
}
#SliderFrame
{
margin-left: auto;
margin-right: auto;
border: 1px solid;
width: 830px;
height: 450px;
}
#Prices1of3
{
width: 175px;
border: 1px solid;
margin-left: 330px;
float: left;
}
#Prices2of3
{
width: 175px;
border: 1px solid;
margin-left: 175px;
float: left;
}
#Prices3of3
{
width: 175px;
border: 1px solid;
margin-left: 175px;
float: left;
}
#Picture
{
margin-left: 620px;
margin-right: auto;
width: 449px;
height: 226px;
}
#Content
{
margin-left: auto;
margin-right: auto;
max-width: 1260px;
min-width: 780px;
width: 780px;
}
#container
{
margin:0 auto;
background-color:#66B034;
max-width: 1260px;
min-width: 780px;
width: 90%;
color: #000;
font-family: "Trebuchet MS", Arial, Heletica, sans-serif;
}
#logo {
float: left;
width: 302px;
height: 72px;
background-image:url(../images/Logo/Logofin.gif);
background-repeat:no-repeat;
border: 1px solid;
margin-right: 143px;
}
header h1{
visibility: hidden;
}
nav ul li{
list-style: none;
border: 1px solid Gray;
display: inline;
}
nav ul li a{
text-align: center;
padding: 1px;
display: inline-block;
}
nav {
border: solid medium Black;
float: left;
width: 70%;
margin: 1px;
display: inline-block;
}
nav.nav_item1 {
}
nav.nav_item2 {
}
nav.nav_item3 {
}
nav.nav_item4 {
}
section{
border: solid medium Black;
}
footer{
border: solid medium Black;
clear: both;
margin: 10px;
padding: 5px;
}
section ul, ol{
margin: 15px;
}
.mySlides
{
width: 830px;
height: 330px;
display:none
}
.w3-left, .w3-right, .w3-badge
{
cursor:pointer
}
.w3-badge
{
height:13px;
width:13px;
padding:0
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Bog Snorkelling</title>
<link rel="stylesheet" href="../assets/css/webber_1.css" >
<div id="clipper">
<section>
<div id="logo">
</div>
<div id="Navigation">
<nav>
<ul>
<li class="nav_item1"><a href= "../index.html">Home</a></li>
<li class="nav_item2"><a href= "../bogsnorkeling/bog.html">Bog Snorkelling</a></li>
<li class="nav_item3"><a href= "../football/foot.html">Football</a></li>
<li class="nav_item4"><a href= "../golf/golf.html">Golf</a></li>
<li class="nav_item4"><a href= "../racketsports/racket.html">Racket Sports</a></li>
<li class="nav_item5"><a href= "../bookingsfailure/bookingfail.html">Bookings Failure</a></li>
<li class="nav_item6"><a href= "../bookingssuccess/bookingsuccess.html">Bookings Success</a></li>
<li class="nav_item7"><a href= "../bookings/bookings.html">Bookings</a></li>
<li class="nav_item8"><a href= "../community/community.html">Community</a></li>
<li class="nav_item9"><a href= "../induction/induction.html">Induction</a></li>
<li class="nav_item10"><a href= "../inductionsuccess/inductionsuccess.html">Induction Success</a></li>
<li class="nav_item11"><a href= "../inductionfailure/inductionfail.html">Induction Failure</a></li>
<li class="nav_item12"><a href= "../facilities/facilities.html">Facilities</a></li>
<li class="nav_item13"><a href= "../contactus/contactus.html">Contact Us</a></li>
<li class="nav_item14"><a href= "../contactsuccess/contactsuccess.html">Contact Success</a></li>
<li class="nav_item15"><a href= "../contactfailure/contactfail.html">Contact Failure</a></li>
<li class="nav_item16"><a href= "../aboutus/aboutus.html">About Us</a></li>
</ul>
</nav>
</div>
</section>
</div>
</section>
<section>
<h1>Nothing</h1>
</section>
<section>
<div id="Picture">
<img src = "../assets/images/Bog/BogSnork.jpg" alt = "nice pic!" class = center>
</div>
</section>
<section>
<div id="Content">
<h3> Bog Snorkelling </h3>
<br>
<p>Ever wanted to be the fastest at bog snorkelling? Well now you can with our new exciting Bog Snorkeller's course!</p>
<br>
<p>Bog Snorkelling is a Welsh idea conceived in the Neuadd Arms pub in Llawrtyd Wells whereby competitiors snorkel in a 60 foot cold and murky mud bog in order to get the record time without using traditional swimming strokes. </p>
<br>
<p>Our Bog measures 80 feet which is the perfect size to challenge our would be bog champions! Remember to bring your own wetsuit, flippers, snorkel mask, cloth and towels and we'll provide the buckets of clean water! </p>
<br>
<p>Our Prices start from as little as £2.00 (off peak daily sessions) or £10 (weekly sessions) or £50 (monthly sessions).</p>
</div>
</section>
<div id = "Prices1of3">
<section>
<h3>£2</h3>
</section>
</div>
<div id = "Prices2of3">
<section>
<h3>£5</h3>
</div>
</section>
<div id = "Prices3of3">
<section>
</h3>£10</h3>
</div>
</section>
<p></p>
<div id="footer">
<footer>
<p>©Webberbridge Sports Hall</p> <p>Contact us: <a href = "mailto:info@webberbridgesports.mail"> info@webberbridgesports.mail</a></p>
</footer>
</div>
</body>
</html>html css sections
asked Nov 25 '18 at 3:29
StaffbaneStaffbane
163
add a comment |
1
1
1
I recently made a website that uses sections instead of divs because I want the divs to float in line with one another in the same div and that has become quite confusing for me to do.
Presumably, I would like this to be in the head of the webpage but every time I try to remove the containers, the divs collapse on one another causing them to share CSS properties which I don't want to obviously happen.
What my header looks like
What my page should look like
An example of what happens if you remove the containers
I want my divs to stack side by side in the same div and that the only way I found to do that effectively is by using sections but it's not HTML5 standard.
Please tell me how I may fix my code so I can meet the HTML5 standard, thank you.
header, nav, footer, section, clipper, SliderFrame, Picture {
display: block;
margin-bottom: 20px;
}
* {
margin: 0px;
padding: 0px;
}
#clipper
{
float:left;
margin-bottom: 20px;
}
#SliderFrame
{
margin-left: auto;
margin-right: auto;
border: 1px solid;
width: 830px;
height: 450px;
}
#Prices1of3
{
width: 175px;
border: 1px solid;
margin-left: 330px;
float: left;
}
#Prices2of3
{
width: 175px;
border: 1px solid;
margin-left: 175px;
float: left;
}
#Prices3of3
{
width: 175px;
border: 1px solid;
margin-left: 175px;
float: left;
}
#Picture
{
margin-left: 620px;
margin-right: auto;
width: 449px;
height: 226px;
}
#Content
{
margin-left: auto;
margin-right: auto;
max-width: 1260px;
min-width: 780px;
width: 780px;
}
#container
{
margin:0 auto;
background-color:#66B034;
max-width: 1260px;
min-width: 780px;
width: 90%;
color: #000;
font-family: "Trebuchet MS", Arial, Heletica, sans-serif;
}
#logo {
float: left;
width: 302px;
height: 72px;
background-image:url(../images/Logo/Logofin.gif);
background-repeat:no-repeat;
border: 1px solid;
margin-right: 143px;
}
header h1{
visibility: hidden;
}
nav ul li{
list-style: none;
border: 1px solid Gray;
display: inline;
}
nav ul li a{
text-align: center;
padding: 1px;
display: inline-block;
}
nav {
border: solid medium Black;
float: left;
width: 70%;
margin: 1px;
display: inline-block;
}
nav.nav_item1 {
}
nav.nav_item2 {
}
nav.nav_item3 {
}
nav.nav_item4 {
}
section{
border: solid medium Black;
}
footer{
border: solid medium Black;
clear: both;
margin: 10px;
padding: 5px;
}
section ul, ol{
margin: 15px;
}
.mySlides
{
width: 830px;
height: 330px;
display:none
}
.w3-left, .w3-right, .w3-badge
{
cursor:pointer
}
.w3-badge
{
height:13px;
width:13px;
padding:0
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Bog Snorkelling</title>
<link rel="stylesheet" href="../assets/css/webber_1.css" >
<div id="clipper">
<section>
<div id="logo">
</div>
<div id="Navigation">
<nav>
<ul>
<li class="nav_item1"><a href= "../index.html">Home</a></li>
<li class="nav_item2"><a href= "../bogsnorkeling/bog.html">Bog Snorkelling</a></li>
<li class="nav_item3"><a href= "../football/foot.html">Football</a></li>
<li class="nav_item4"><a href= "../golf/golf.html">Golf</a></li>
<li class="nav_item4"><a href= "../racketsports/racket.html">Racket Sports</a></li>
<li class="nav_item5"><a href= "../bookingsfailure/bookingfail.html">Bookings Failure</a></li>
<li class="nav_item6"><a href= "../bookingssuccess/bookingsuccess.html">Bookings Success</a></li>
<li class="nav_item7"><a href= "../bookings/bookings.html">Bookings</a></li>
<li class="nav_item8"><a href= "../community/community.html">Community</a></li>
<li class="nav_item9"><a href= "../induction/induction.html">Induction</a></li>
<li class="nav_item10"><a href= "../inductionsuccess/inductionsuccess.html">Induction Success</a></li>
<li class="nav_item11"><a href= "../inductionfailure/inductionfail.html">Induction Failure</a></li>
<li class="nav_item12"><a href= "../facilities/facilities.html">Facilities</a></li>
<li class="nav_item13"><a href= "../contactus/contactus.html">Contact Us</a></li>
<li class="nav_item14"><a href= "../contactsuccess/contactsuccess.html">Contact Success</a></li>
<li class="nav_item15"><a href= "../contactfailure/contactfail.html">Contact Failure</a></li>
<li class="nav_item16"><a href= "../aboutus/aboutus.html">About Us</a></li>
</ul>
</nav>
</div>
</section>
</div>
</section>
<section>
<h1>Nothing</h1>
</section>
<section>
<div id="Picture">
<img src = "../assets/images/Bog/BogSnork.jpg" alt = "nice pic!" class = center>
</div>
</section>
<section>
<div id="Content">
<h3> Bog Snorkelling </h3>
<br>
<p>Ever wanted to be the fastest at bog snorkelling? Well now you can with our new exciting Bog Snorkeller's course!</p>
<br>
<p>Bog Snorkelling is a Welsh idea conceived in the Neuadd Arms pub in Llawrtyd Wells whereby competitiors snorkel in a 60 foot cold and murky mud bog in order to get the record time without using traditional swimming strokes. </p>
<br>
<p>Our Bog measures 80 feet which is the perfect size to challenge our would be bog champions! Remember to bring your own wetsuit, flippers, snorkel mask, cloth and towels and we'll provide the buckets of clean water! </p>
<br>
<p>Our Prices start from as little as £2.00 (off peak daily sessions) or £10 (weekly sessions) or £50 (monthly sessions).</p>
</div>
</section>
<div id = "Prices1of3">
<section>
<h3>£2</h3>
</section>
</div>
<div id = "Prices2of3">
<section>
<h3>£5</h3>
</div>
</section>
<div id = "Prices3of3">
<section>
</h3>£10</h3>
</div>
</section>
<p></p>
<div id="footer">
<footer>
<p>©Webberbridge Sports Hall</p> <p>Contact us: <a href = "mailto:info@webberbridgesports.mail"> info@webberbridgesports.mail</a></p>
</footer>
</div>
</body>
</html>html css sections
asked Nov 25 '18 at 3:29
StaffbaneStaffbane
163
I recently made a website that uses sections instead of divs because I want the divs to float in line with one another in the same div and that has become quite confusing for me to do.
Presumably, I would like this to be in the head of the webpage but every time I try to remove the containers, the divs collapse on one another causing them to share CSS properties which I don't want to obviously happen.
What my header looks like
What my page should look like
An example of what happens if you remove the containers
I want my divs to stack side by side in the same div and that the only way I found to do that effectively is by using sections but it's not HTML5 standard.
Please tell me how I may fix my code so I can meet the HTML5 standard, thank you.
header, nav, footer, section, clipper, SliderFrame, Picture {
display: block;
margin-bottom: 20px;
}
* {
margin: 0px;
padding: 0px;
}
#clipper
{
float:left;
margin-bottom: 20px;
}
#SliderFrame
{
margin-left: auto;
margin-right: auto;
border: 1px solid;
width: 830px;
height: 450px;
}
#Prices1of3
{
width: 175px;
border: 1px solid;
margin-left: 330px;
float: left;
}
#Prices2of3
{
width: 175px;
border: 1px solid;
margin-left: 175px;
float: left;
}
#Prices3of3
{
width: 175px;
border: 1px solid;
margin-left: 175px;
float: left;
}
#Picture
{
margin-left: 620px;
margin-right: auto;
width: 449px;
height: 226px;
}
#Content
{
margin-left: auto;
margin-right: auto;
max-width: 1260px;
min-width: 780px;
width: 780px;
}
#container
{
margin:0 auto;
background-color:#66B034;
max-width: 1260px;
min-width: 780px;
width: 90%;
color: #000;
font-family: "Trebuchet MS", Arial, Heletica, sans-serif;
}
#logo {
float: left;
width: 302px;
height: 72px;
background-image:url(../images/Logo/Logofin.gif);
background-repeat:no-repeat;
border: 1px solid;
margin-right: 143px;
}
header h1{
visibility: hidden;
}
nav ul li{
list-style: none;
border: 1px solid Gray;
display: inline;
}
nav ul li a{
text-align: center;
padding: 1px;
display: inline-block;
}
nav {
border: solid medium Black;
float: left;
width: 70%;
margin: 1px;
display: inline-block;
}
nav.nav_item1 {
}
nav.nav_item2 {
}
nav.nav_item3 {
}
nav.nav_item4 {
}
section{
border: solid medium Black;
}
footer{
border: solid medium Black;
clear: both;
margin: 10px;
padding: 5px;
}
section ul, ol{
margin: 15px;
}
.mySlides
{
width: 830px;
height: 330px;
display:none
}
.w3-left, .w3-right, .w3-badge
{
cursor:pointer
}
.w3-badge
{
height:13px;
width:13px;
padding:0
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Bog Snorkelling</title>
<link rel="stylesheet" href="../assets/css/webber_1.css" >
<div id="clipper">
<section>
<div id="logo">
</div>
<div id="Navigation">
<nav>
<ul>
<li class="nav_item1"><a href= "../index.html">Home</a></li>
<li class="nav_item2"><a href= "../bogsnorkeling/bog.html">Bog Snorkelling</a></li>
<li class="nav_item3"><a href= "../football/foot.html">Football</a></li>
<li class="nav_item4"><a href= "../golf/golf.html">Golf</a></li>
<li class="nav_item4"><a href= "../racketsports/racket.html">Racket Sports</a></li>
<li class="nav_item5"><a href= "../bookingsfailure/bookingfail.html">Bookings Failure</a></li>
<li class="nav_item6"><a href= "../bookingssuccess/bookingsuccess.html">Bookings Success</a></li>
<li class="nav_item7"><a href= "../bookings/bookings.html">Bookings</a></li>
<li class="nav_item8"><a href= "../community/community.html">Community</a></li>
<li class="nav_item9"><a href= "../induction/induction.html">Induction</a></li>
<li class="nav_item10"><a href= "../inductionsuccess/inductionsuccess.html">Induction Success</a></li>
<li class="nav_item11"><a href= "../inductionfailure/inductionfail.html">Induction Failure</a></li>
<li class="nav_item12"><a href= "../facilities/facilities.html">Facilities</a></li>
<li class="nav_item13"><a href= "../contactus/contactus.html">Contact Us</a></li>
<li class="nav_item14"><a href= "../contactsuccess/contactsuccess.html">Contact Success</a></li>
<li class="nav_item15"><a href= "../contactfailure/contactfail.html">Contact Failure</a></li>
<li class="nav_item16"><a href= "../aboutus/aboutus.html">About Us</a></li>
</ul>
</nav>
</div>
</section>
</div>
</section>
<section>
<h1>Nothing</h1>
</section>
<section>
<div id="Picture">
<img src = "../assets/images/Bog/BogSnork.jpg" alt = "nice pic!" class = center>
</div>
</section>
<section>
<div id="Content">
<h3> Bog Snorkelling </h3>
<br>
<p>Ever wanted to be the fastest at bog snorkelling? Well now you can with our new exciting Bog Snorkeller's course!</p>
<br>
<p>Bog Snorkelling is a Welsh idea conceived in the Neuadd Arms pub in Llawrtyd Wells whereby competitiors snorkel in a 60 foot cold and murky mud bog in order to get the record time without using traditional swimming strokes. </p>
<br>
<p>Our Bog measures 80 feet which is the perfect size to challenge our would be bog champions! Remember to bring your own wetsuit, flippers, snorkel mask, cloth and towels and we'll provide the buckets of clean water! </p>
<br>
<p>Our Prices start from as little as £2.00 (off peak daily sessions) or £10 (weekly sessions) or £50 (monthly sessions).</p>
</div>
</section>
<div id = "Prices1of3">
<section>
<h3>£2</h3>
</section>
</div>
<div id = "Prices2of3">
<section>
<h3>£5</h3>
</div>
</section>
<div id = "Prices3of3">
<section>
</h3>£10</h3>
</div>
</section>
<p></p>
<div id="footer">
<footer>
<p>©Webberbridge Sports Hall</p> <p>Contact us: <a href = "mailto:info@webberbridgesports.mail"> info@webberbridgesports.mail</a></p>
</footer>
</div>
</body>
</html>header, nav, footer, section, clipper, SliderFrame, Picture {
display: block;
margin-bottom: 20px;
}
* {
margin: 0px;
padding: 0px;
}
#clipper
{
float:left;
margin-bottom: 20px;
}
#SliderFrame
{
margin-left: auto;
margin-right: auto;
border: 1px solid;
width: 830px;
height: 450px;
}
#Prices1of3
{
width: 175px;
border: 1px solid;
margin-left: 330px;
float: left;
}
#Prices2of3
{
width: 175px;
border: 1px solid;
margin-left: 175px;
float: left;
}
#Prices3of3
{
width: 175px;
border: 1px solid;
margin-left: 175px;
float: left;
}
#Picture
{
margin-left: 620px;
margin-right: auto;
width: 449px;
height: 226px;
}
#Content
{
margin-left: auto;
margin-right: auto;
max-width: 1260px;
min-width: 780px;
width: 780px;
}
#container
{
margin:0 auto;
background-color:#66B034;
max-width: 1260px;
min-width: 780px;
width: 90%;
color: #000;
font-family: "Trebuchet MS", Arial, Heletica, sans-serif;
}
#logo {
float: left;
width: 302px;
height: 72px;
background-image:url(../images/Logo/Logofin.gif);
background-repeat:no-repeat;
border: 1px solid;
margin-right: 143px;
}
header h1{
visibility: hidden;
}
nav ul li{
list-style: none;
border: 1px solid Gray;
display: inline;
}
nav ul li a{
text-align: center;
padding: 1px;
display: inline-block;
}
nav {
border: solid medium Black;
float: left;
width: 70%;
margin: 1px;
display: inline-block;
}
nav.nav_item1 {
}
nav.nav_item2 {
}
nav.nav_item3 {
}
nav.nav_item4 {
}
section{
border: solid medium Black;
}
footer{
border: solid medium Black;
clear: both;
margin: 10px;
padding: 5px;
}
section ul, ol{
margin: 15px;
}
.mySlides
{
width: 830px;
height: 330px;
display:none
}
.w3-left, .w3-right, .w3-badge
{
cursor:pointer
}
.w3-badge
{
height:13px;
width:13px;
padding:0
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Bog Snorkelling</title>
<link rel="stylesheet" href="../assets/css/webber_1.css" >
<div id="clipper">
<section>
<div id="logo">
</div>
<div id="Navigation">
<nav>
<ul>
<li class="nav_item1"><a href= "../index.html">Home</a></li>
<li class="nav_item2"><a href= "../bogsnorkeling/bog.html">Bog Snorkelling</a></li>
<li class="nav_item3"><a href= "../football/foot.html">Football</a></li>
<li class="nav_item4"><a href= "../golf/golf.html">Golf</a></li>
<li class="nav_item4"><a href= "../racketsports/racket.html">Racket Sports</a></li>
<li class="nav_item5"><a href= "../bookingsfailure/bookingfail.html">Bookings Failure</a></li>
<li class="nav_item6"><a href= "../bookingssuccess/bookingsuccess.html">Bookings Success</a></li>
<li class="nav_item7"><a href= "../bookings/bookings.html">Bookings</a></li>
<li class="nav_item8"><a href= "../community/community.html">Community</a></li>
<li class="nav_item9"><a href= "../induction/induction.html">Induction</a></li>
<li class="nav_item10"><a href= "../inductionsuccess/inductionsuccess.html">Induction Success</a></li>
<li class="nav_item11"><a href= "../inductionfailure/inductionfail.html">Induction Failure</a></li>
<li class="nav_item12"><a href= "../facilities/facilities.html">Facilities</a></li>
<li class="nav_item13"><a href= "../contactus/contactus.html">Contact Us</a></li>
<li class="nav_item14"><a href= "../contactsuccess/contactsuccess.html">Contact Success</a></li>
<li class="nav_item15"><a href= "../contactfailure/contactfail.html">Contact Failure</a></li>
<li class="nav_item16"><a href= "../aboutus/aboutus.html">About Us</a></li>
</ul>
</nav>
</div>
</section>
</div>
</section>
<section>
<h1>Nothing</h1>
</section>
<section>
<div id="Picture">
<img src = "../assets/images/Bog/BogSnork.jpg" alt = "nice pic!" class = center>
</div>
</section>
<section>
<div id="Content">
<h3> Bog Snorkelling </h3>
<br>
<p>Ever wanted to be the fastest at bog snorkelling? Well now you can with our new exciting Bog Snorkeller's course!</p>
<br>
<p>Bog Snorkelling is a Welsh idea conceived in the Neuadd Arms pub in Llawrtyd Wells whereby competitiors snorkel in a 60 foot cold and murky mud bog in order to get the record time without using traditional swimming strokes. </p>
<br>
<p>Our Bog measures 80 feet which is the perfect size to challenge our would be bog champions! Remember to bring your own wetsuit, flippers, snorkel mask, cloth and towels and we'll provide the buckets of clean water! </p>
<br>
<p>Our Prices start from as little as £2.00 (off peak daily sessions) or £10 (weekly sessions) or £50 (monthly sessions).</p>
</div>
</section>
<div id = "Prices1of3">
<section>
<h3>£2</h3>
</section>
</div>
<div id = "Prices2of3">
<section>
<h3>£5</h3>
</div>
</section>
<div id = "Prices3of3">
<section>
</h3>£10</h3>
</div>
</section>
<p></p>
<div id="footer">
<footer>
<p>©Webberbridge Sports Hall</p> <p>Contact us: <a href = "mailto:info@webberbridgesports.mail"> info@webberbridgesports.mail</a></p>
</footer>
</div>
</body>
</html>header, nav, footer, section, clipper, SliderFrame, Picture {
display: block;
margin-bottom: 20px;
}
* {
margin: 0px;
padding: 0px;
}
#clipper
{
float:left;
margin-bottom: 20px;
}
#SliderFrame
{
margin-left: auto;
margin-right: auto;
border: 1px solid;
width: 830px;
height: 450px;
}
#Prices1of3
{
width: 175px;
border: 1px solid;
margin-left: 330px;
float: left;
}
#Prices2of3
{
width: 175px;
border: 1px solid;
margin-left: 175px;
float: left;
}
#Prices3of3
{
width: 175px;
border: 1px solid;
margin-left: 175px;
float: left;
}
#Picture
{
margin-left: 620px;
margin-right: auto;
width: 449px;
height: 226px;
}
#Content
{
margin-left: auto;
margin-right: auto;
max-width: 1260px;
min-width: 780px;
width: 780px;
}
#container
{
margin:0 auto;
background-color:#66B034;
max-width: 1260px;
min-width: 780px;
width: 90%;
color: #000;
font-family: "Trebuchet MS", Arial, Heletica, sans-serif;
}
#logo {
float: left;
width: 302px;
height: 72px;
background-image:url(../images/Logo/Logofin.gif);
background-repeat:no-repeat;
border: 1px solid;
margin-right: 143px;
}
header h1{
visibility: hidden;
}
nav ul li{
list-style: none;
border: 1px solid Gray;
display: inline;
}
nav ul li a{
text-align: center;
padding: 1px;
display: inline-block;
}
nav {
border: solid medium Black;
float: left;
width: 70%;
margin: 1px;
display: inline-block;
}
nav.nav_item1 {
}
nav.nav_item2 {
}
nav.nav_item3 {
}
nav.nav_item4 {
}
section{
border: solid medium Black;
}
footer{
border: solid medium Black;
clear: both;
margin: 10px;
padding: 5px;
}
section ul, ol{
margin: 15px;
}
.mySlides
{
width: 830px;
height: 330px;
display:none
}
.w3-left, .w3-right, .w3-badge
{
cursor:pointer
}
.w3-badge
{
height:13px;
width:13px;
padding:0
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Bog Snorkelling</title>
<link rel="stylesheet" href="../assets/css/webber_1.css" >
<div id="clipper">
<section>
<div id="logo">
</div>
<div id="Navigation">
<nav>
<ul>
<li class="nav_item1"><a href= "../index.html">Home</a></li>
<li class="nav_item2"><a href= "../bogsnorkeling/bog.html">Bog Snorkelling</a></li>
<li class="nav_item3"><a href= "../football/foot.html">Football</a></li>
<li class="nav_item4"><a href= "../golf/golf.html">Golf</a></li>
<li class="nav_item4"><a href= "../racketsports/racket.html">Racket Sports</a></li>
<li class="nav_item5"><a href= "../bookingsfailure/bookingfail.html">Bookings Failure</a></li>
<li class="nav_item6"><a href= "../bookingssuccess/bookingsuccess.html">Bookings Success</a></li>
<li class="nav_item7"><a href= "../bookings/bookings.html">Bookings</a></li>
<li class="nav_item8"><a href= "../community/community.html">Community</a></li>
<li class="nav_item9"><a href= "../induction/induction.html">Induction</a></li>
<li class="nav_item10"><a href= "../inductionsuccess/inductionsuccess.html">Induction Success</a></li>
<li class="nav_item11"><a href= "../inductionfailure/inductionfail.html">Induction Failure</a></li>
<li class="nav_item12"><a href= "../facilities/facilities.html">Facilities</a></li>
<li class="nav_item13"><a href= "../contactus/contactus.html">Contact Us</a></li>
<li class="nav_item14"><a href= "../contactsuccess/contactsuccess.html">Contact Success</a></li>
<li class="nav_item15"><a href= "../contactfailure/contactfail.html">Contact Failure</a></li>
<li class="nav_item16"><a href= "../aboutus/aboutus.html">About Us</a></li>
</ul>
</nav>
</div>
</section>
</div>
</section>
<section>
<h1>Nothing</h1>
</section>
<section>
<div id="Picture">
<img src = "../assets/images/Bog/BogSnork.jpg" alt = "nice pic!" class = center>
</div>
</section>
<section>
<div id="Content">
<h3> Bog Snorkelling </h3>
<br>
<p>Ever wanted to be the fastest at bog snorkelling? Well now you can with our new exciting Bog Snorkeller's course!</p>
<br>
<p>Bog Snorkelling is a Welsh idea conceived in the Neuadd Arms pub in Llawrtyd Wells whereby competitiors snorkel in a 60 foot cold and murky mud bog in order to get the record time without using traditional swimming strokes. </p>
<br>
<p>Our Bog measures 80 feet which is the perfect size to challenge our would be bog champions! Remember to bring your own wetsuit, flippers, snorkel mask, cloth and towels and we'll provide the buckets of clean water! </p>
<br>
<p>Our Prices start from as little as £2.00 (off peak daily sessions) or £10 (weekly sessions) or £50 (monthly sessions).</p>
</div>
</section>
<div id = "Prices1of3">
<section>
<h3>£2</h3>
</section>
</div>
<div id = "Prices2of3">
<section>
<h3>£5</h3>
</div>
</section>
<div id = "Prices3of3">
<section>
</h3>£10</h3>
</div>
</section>
<p></p>
<div id="footer">
<footer>
<p>©Webberbridge Sports Hall</p> <p>Contact us: <a href = "mailto:info@webberbridgesports.mail"> info@webberbridgesports.mail</a></p>
</footer>
</div>
</body>
</html>html css sections
html css sections
asked Nov 25 '18 at 3:29
StaffbaneStaffbane
163
asked Nov 25 '18 at 3:29
StaffbaneStaffbane
163
edited Nov 25 '18 at 3:44
Staffbane
asked Nov 25 '18 at 3:29
StaffbaneStaffbane
163
asked Nov 25 '18 at 3:29
StaffbaneStaffbane
163
asked Nov 25 '18 at 3:29
StaffbaneStaffbane
163
163
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
If you want them to appear side by side instead of on new lines you need to use display: inline-block for those elements.
Divs display as block elements by default (and declared in your css), which means they will each render on a new line.
Add a class to those elements that you would like to appear inline, and add the css rule display: inline-block, or add the rule to each id's styling individually.
Example if you wanted to make a class to apply to certain elements would look like this:
.inline {
display: inline-block;
}
and then you would add the attribute class="inline" to each element where you would like this behavior of rendering inline rather than on a new line.
answered Nov 25 '18 at 5:11
tshimkustshimkus
817920
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53464409%2fturning-sections-into-divs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
If you want them to appear side by side instead of on new lines you need to use display: inline-block for those elements.
Divs display as block elements by default (and declared in your css), which means they will each render on a new line.
Add a class to those elements that you would like to appear inline, and add the css rule display: inline-block, or add the rule to each id's styling individually.
Example if you wanted to make a class to apply to certain elements would look like this:
.inline {
display: inline-block;
}
and then you would add the attribute class="inline" to each element where you would like this behavior of rendering inline rather than on a new line.
answered Nov 25 '18 at 5:11
tshimkustshimkus
817920
add a comment |
0
If you want them to appear side by side instead of on new lines you need to use display: inline-block for those elements.
Divs display as block elements by default (and declared in your css), which means they will each render on a new line.
Add a class to those elements that you would like to appear inline, and add the css rule display: inline-block, or add the rule to each id's styling individually.
Example if you wanted to make a class to apply to certain elements would look like this:
.inline {
display: inline-block;
}
and then you would add the attribute class="inline" to each element where you would like this behavior of rendering inline rather than on a new line.
answered Nov 25 '18 at 5:11
tshimkustshimkus
817920
add a comment |
0
0
0
If you want them to appear side by side instead of on new lines you need to use display: inline-block for those elements.
Divs display as block elements by default (and declared in your css), which means they will each render on a new line.
Add a class to those elements that you would like to appear inline, and add the css rule display: inline-block, or add the rule to each id's styling individually.
Example if you wanted to make a class to apply to certain elements would look like this:
.inline {
display: inline-block;
}
and then you would add the attribute class="inline" to each element where you would like this behavior of rendering inline rather than on a new line.
answered Nov 25 '18 at 5:11
tshimkustshimkus
817920
If you want them to appear side by side instead of on new lines you need to use display: inline-block for those elements.
Divs display as block elements by default (and declared in your css), which means they will each render on a new line.
Add a class to those elements that you would like to appear inline, and add the css rule display: inline-block, or add the rule to each id's styling individually.
Example if you wanted to make a class to apply to certain elements would look like this:
.inline {
display: inline-block;
}
and then you would add the attribute class="inline" to each element where you would like this behavior of rendering inline rather than on a new line.
answered Nov 25 '18 at 5:11
tshimkustshimkus
817920
edited Nov 25 '18 at 5:40
answered Nov 25 '18 at 5:11
tshimkustshimkus
817920
answered Nov 25 '18 at 5:11
tshimkustshimkus
817920
answered Nov 25 '18 at 5:11
tshimkustshimkus
817920
817920
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53464409%2fturning-sections-into-divs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
