Need help to code a simple non-profit website, (not hosted yet)


#1

Hi, sitepoint! How do I use html5 and css3 to make four boxes on the page, each with an unordered list in it. The four boxes themselves are also a list. So effectively a nested list. Also, how do I remove these bulletpoints? Can someone help us please?


#2

Welcome to the forums. I hope you have already made an attempt to do this yourself before you asked for help here. This is a discussion forum, not a coding service. Please post what you have so far and explain what your problem with it is, and someone will be happy to help you out.


#3

That’s simply done in CSS:

list-style-type: none;

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

As @WebMachine has already explained, you should post the code you have so far for the lists and we can help you work on it.


#4
<!doctype html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
<title>heaven.org</title> 
</head> 
<body> 
	<h1>Melbourne, AU</h1> 
	<ul> 
		<li>
			<h2>News</h2>
			<ul> 
				<li>Front Page</li> 
				<li>Political</li>
				<li>Finance</li>
				<li>Sports</li> 
				<li>Entertainment</li> 
				<li>Trending Online</li> 
				<li>Public Opinion Poll vote!</li>
			</ul>
		</li> 
		
		<li>
			<h2>Useful</h2>
			<ul> 
				<li>Time</li> 
				<li>Weather</li>
				<li>Alexandra</li>
				<li>Alfred</li> 
				<li>Q&A</li>  
				<li>Evolve</li> 
			</ul>
		</li> 
		
		<li>
			<h2>Interest</h2> 
			<ul> 
				<li>Local Photo</li> 
				<li>TV and Cable</li>
				<li>Film</li>
				<li>Book</li> 
				<li>Game</li> 
				<li>Car</li> 
				<li>Wine</li>
			</ul>	
		</li> 
		
		<li>
			<h2>Market</h2> 
			<ul> 
				<li>Local Food/Drink Deals</li> 
				<li>Local Clothing Deals</li>
				<li>Other Local Deals</li>
				<li>Garage Sale</li> 
				<li>Call in a Favour</li> 
			</ul>
		</li> 
	</ul> 
</body> 
</html> 

Yes, I’ve been working through a dummies guide on html5 and css3, while trying to code this website.

This is what I have so far, I think the html is ok… But the styling I don’t know how to make the four lists in their own little box. If the screen is horizontal and in quarters, each box is in a quadrant. The background is white.

Any tips? Like which tags to use?

And where do I put the styling for: list-style-type: none; ?

Thanks very much.


#5

This is what we are trying to build, I know it’s hard to tell!

heaven.org, a non-profit homepage


#6

Hi martin,
Flexbox can do that for you. Take a look at this example and it should get you pointed in the right direction.

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Four Box Nested List</title>
<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

h1 {text-align: center;}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wrap {
  max-width: 65em;
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.wrap > li {
  flex: 1 1 40%;
  min-width: 15em;
  max-width: 30em;
  border: 1px solid;
  margin: 1.5em;
  padding: 0 1em;
}
.wrap h2 {
  margin: .5em 0;
  font-size: 1.2em;
  text-decoration: underline;
}
.wrap li li {
  margin:.5em 0;
}
</style>

</head>
<body>
<h1>Melbourne, AU</h1>
<ul class="wrap">
  <li>
    <h2>News</h2>
    <ul>
      <li>Front Page</li>
      <li>Political</li>
      <li>Finance</li>
      <li>Sports</li>
      <li>Entertainment</li>
      <li>Trending Online</li>
      <li>Public Opinion Poll vote!</li>
    </ul>
  </li>
  <li>
    <h2>Useful</h2>
    <ul>
      <li>Time</li>
      <li>Weather</li>
      <li>Alexandra</li>
      <li>Alfred</li>
      <li>Q&A</li>
      <li>Evolve</li>
    </ul>
  </li>
  <li>
    <h2>Interest</h2>
    <ul>
      <li>Local Photo</li>
      <li>TV and Cable</li>
      <li>Film</li>
      <li>Book</li>
      <li>Game</li>
      <li>Car</li>
      <li>Wine</li>
    </ul>
  </li>
  <li>
    <h2>Market</h2>
    <ul>
      <li>Local Food/Drink Deals</li>
      <li>Local Clothing Deals</li>
      <li>Other Local Deals</li>
      <li>Garage Sale</li>
      <li>Call in a Favour</li>
    </ul>
  </li>
</ul>
</body>
</html>


#7

Wow, so many things not in this book… Thanks Ray! And Webmachine and Technobear! I’ll post an update of how I go soon :smile:


#8

Flexbox worked great, Ray! Thanks a ton! I’ve worked some more on the font and colors, using my book. I think it looks alright… Going to start working on the global/local tabs for the two lists on the left.

Do you think I should put this on github, to see if anybody wants to help out with the website? I hear that’s where a lot of people collaborate on projects, but I don’t have an account yet.


#9

Regardless of whether somebody contributes to your project on GitHub, it’s not a bad idea to sign up for an account and learn how it works. And learn about version control. That is a very useful skill to have if you plan on working on more projects in the future.


#10

Version control, I see… okay, I’ll get an account and see how I go.


#11
<!doctype html> 
<html lang="en"> 
<head> 
	<meta charset="utf-8"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>heaven.org</title> 
<style> 
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

h1 { 
	font-family: monospace;
	text-align: center;
	color: rgb(255, 255, 129);
} 

ul {
	margin: 0; 
	padding: 0; 
	list-style: none; 
}
.wrap {
	max-width: 65em; 
	margin: 0 auto; 
	display: flex; 
	flex-flow: row wrap; 
	justify-content: center;
}
.wrap > li {
	flex: 1 1 40%; 
	min-width: 15em; 
	max-width: 30em; 
	border: rgb(204 255 255) 1.8px solid; 
	margin: 1.5em; 
	padding: 0 1em; 
}
.wrap h2 {
	margin: .5em 0; 
	font-size: 0.8em; 
	font-family: monospace;
	color: rgb(215, 215, 215);
	text-decoration: underline; 
}
.wrap li li {
	margin:.5em 0; 
	color: rgb(185, 185, 185); 
	font-size: 0.85em;	
	font-family: monospace;
}
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

</style>


</head> 
<body> 
	<h1><br></br>Melbourne, AU</h1> 
	<ul class="wrap">  
		<li>
			<h2>News</h2>
			<ul> 
				<li>Front Page</li> 
				<li>Political</li>
				<li>Finance</li>
				<li>Sports</li> 
				<li>Entertainment</li> 
				<li>Trending Online</li> 
				<li>Public Opinion Poll vote!</li>
			</ul>
		</li> 
	
	<!-- Tab links -->
		<div class="tab">
			<button class="tablinks" onclick="openCity(event, 'Global')">Global</button>
			<button class="tablinks" onclick="openCity(event, 'Local')">Local</button>
		</div>

	<!-- Tab content -->
		<div id="Global" class="tabcontent">
			<h3>Global</h3>
			<p>abcdefg.</p>
		</div>

		<div id="Local" class="tabcontent">
			<h3>Local</h3>
			<p>wxyz.</p> 
		</div> 
	
		<li>
			<h2>Useful</h2>
			<ul> 
				<li>Time</li> 
				<li>Weather</li>
				<li>Alexandra</li>
				<li>Alfred</li> 
				<li>Q&A</li>  
				<li>Evolve</li> 
			</ul>
		</li> 
		<li>
			<h2>Interest</h2> 
			<ul> 
				<li>Local Photo</li> 
				<li>TV and Cable</li>
				<li>Film</li>
				<li>Book</li> 
				<li>Game</li> 
				<li>Car</li> 
				<li>Wine</li>
			</ul>	
		</li> 
		<li>
			<h2>Market</h2> 
			<ul> 
				<li>Local Food/Drink Deals</li> 
				<li>Local Clothing Deals</li>
				<li>Other Local Deals</li>
				<li>Garage Sale</li> 
				<li>Call in a Favour</li> 
			</ul>
		</li> 
</ul> 

<script type="text/javascript"> 
		function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active","");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
</script>
 
</body> 
</html>

This is what I have so far, I tried to build the tabs with what I learned on the w3schools website. But it doesn’t seem to work. Is it the html, css, or javascript that is bugged?


#12

I think you missed the closing bracket of the function.

  evt.currentTarget.className += " active";
}
</script>

#13

Thanks Paul, I’ll remember to put the closing bracket from now on.

Though it’s still not quite displaying like it shows on the w3 instruction page, somehow. My plan was to code it following the instructions first, and then style it the way I need it. But yeah, it looks a bit different.

I’ve attached some photos, of my code too because it doesn’t seem to have posted properly in my previous posts.


#14


#15


#16


#17


#18


#19


#20