HTML/CSS newbie...

C0RR0SIVE · Oct 17, 2017

So.. please don't laugh, as I am not big on coding, just don't have the mindset for it anymore. Decided to make a webpage for monitoring my network, it's a static page that refreshes every so often, works great at 1080p with Chrome is in kiosk mode... However, if it's not in kiosk mode, or if the window is any less than full 1080p, the layout breaks. I have tried various things I found by half baked examples online, however, that mostly makes the layout break even further... Anyone wanna take a peak at my half assed CSS and HTML and tell me what I am doing wrong?

Instead of hardcoding the size of things, I did try percentages and such, however, that just broke things even more, soo...

I know I am doing a lot wrong, but any guidance into this would be greatly appreciated...

Kiosk Mode:

Normal View:

Main Page...

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta Http-Equiv="Cache-Control" Content="no-cache">
<meta Http-Equiv="Pragma" Content="no-cache">
<meta Http-Equiv="Expires" Content="0">
<meta Http-Equiv="Pragma-directive: no-cache">
<meta Http-Equiv="Cache-directive: no-cache">
<meta http-equiv="refresh" content="60">
<title>NOC Monitor</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<body bgcolor="#E0E0E0">
<!-- Lets setup an auto-refresh! -->
<script type="text/javascript">
setTimeout(function () { location.reload(true); }, 60000);
</script>
<!-- End of Auto Refresh! -->

<div id="header">
    <div class='noc'>ChucksBasix Network Operations Center Overview (Last 24 Hours)</div>
</div>

<div class="clear">
<!-- Start of Bandwidth Usage Section -->
	<div id="boxed">
		<div id="header2">
			<div class='bwusage'>Bandwidth Usage</div>
		</div>
		<div id="header3">
			<div class='darktext'>Main Internet Bandwidth</div>
		</div>
	<img src="http://observium.scott.local/graph.php?type=port_bits&to=now&id=3&from=-24h&legend=yes&height=125&width=850">

		<div id="header3">
			<div class='darktext'>SME Static Bandwidth</div>
		</div>
	<img src="http://observium.scott.local/graph.php?type=port_bits&to=now&id=9&from=-24h&legend=yes&height=125&width=850">
		<div id="clear"></div>
	</div>
<!-- End of Bandwidth Usage Section -->
<!-- Start of Host Stats -->
	<div id="boxed">
		<div id="header2">
			<div class='bwusage'>ESXi Host Stats</div>
		</div>
		<div id="header3">
			<div class='darktext'>Host CPU Usage - All Cores</div>
		</div>
	<img src="http://observium.scott.local/graph.php?type=device_processor&device=6&legend=no&to=now&from=-24h&height=175&width=850">
		<div id="clear"></div>
	<br>
		<div class="clearleft">
		<div id="header3">
			<div id="header4">Host CPU Usage - Average</div>
		</div>
		</div>
		<div id="header3">
			<div id="header4">Memory Usage</div>
		</div>
	<img src="http://observium.scott.local/graph.php?to=now&id=19&type=processor_usage&bg=ffffff00&from=-24h&height=173&width=375&legend=no">
	<img src="http://observium.scott.local/graph.php?to=now&id=11&type=mempool_usage&from=-24h&height=173&width=375&legend=no">
		<div id="clear"></div>
	</div>
<!-- 2 hours later... End of Host Stats -->	
<!-- and... Start of PFS Stats -->
	<div id="boxed">
		<div id="header2">
			<div class='bwusage'>PFSense Stats</div>
		</div>
		<div class="clearleft">
		<div id="header3">
			<div id="header4">PFS1 Disk Usage</div>
		</div>
		</div>
		<div id="header3">
			<div id="header4">PFS1 Memory Usage</div>
		</div>
	<img src="http://observium.scott.local/graph.php?to=now&id=3&type=storage_usage&from=-24h&height=187&width=375&legend=no">
	<img src="http://observium.scott.local/graph.php?type=device_ucd_memory&device=2&to=now&from=-24h&height=185&width=375&legend=no">
		<div id="clear"></div>
	<br>
		<div class="clearleft">
		<div id="header3">
			<div id="header4">PFS2 Disk Usage</div>
		</div>
		</div>
		<div id="header3">
			<div id="header4">PFS2 Memory Usage</div>
		</div>
	<img src="http://observium.scott.local/graph.php?to=now&id=6&type=storage_usage&from=-24h&height=188&width=375&legend=no">
	<img src="http://observium.scott.local/graph.php?to=now&device=3&type=device_ucd_memory&from=-24h&legend=no&height=185&width=375">
		<div id="clear"></div>
	</div>
<!-- Another hour later... End of PFSense Stats -->
<!-- A short break... Start of Fun Stuff -->
	<div id="boxed">
		<div id="header2">
			<div class='bwusage'>Website & File Server Stats</div>
		</div>
		<div id="header3">
			<div class='darktext'>Disk Storage</div>
		</div>
	<img src="http://observium.scott.local/graph.php?type=device_storage&device=10&legend=yes&to=now&from=-24h&height=175&width=850">
		<div id="clear"></div>
	<br>
		<div class="clearleft">
		<div id="header3">
			<div id="header4">ChucksBasix Throughput</div>
		</div>
		</div>
		<div id="header3">
			<div id="header4">File Server RAM Usage</div>
		</div>
	<img src="http://observium.scott.local/graph.php?type=port_bits&to=now&id=109&from=-24h&height=100&width=375&legend=no">
	<img src="http://observium.scott.local/graph.php?to=now&id=20&type=mempool_usage&from=-24h&height=100&width=375&legend=no">
		<div id="clear"></div>
	</div>
<!-- The end of hell!!! -->
<!-- Note: This script works only on 1080p monitors when the browser is in kiosk mode! My scripting sucks, if ya fix it, I will love chu~! -->
</div>
</body>
</html>

style.css

Code:

#header {
    width: 100%;
	height: 25px;
	font-size: 18px;
    background-color: black;
}
#header2 {
	width: 950px;
	background-color: blue;
}
#header3 {
	width: 470px;
	float: left;
}

#header4 {
	width: 440px;
	float: left;
	color: black;
	font-weight: bold;
	padding-left: 10px;
}

.noc {
    width: 550px;
    margin: auto;
	text-align: center;
	font-weight: bold;
}

.bwusage {
	width: 400px;
	margin: left;
	padding-left: 10px;
	font-weight: bold;
}
.darktext {
	margin: left;
	padding-left: 10px;
	color: black;
	font-weight: bold;
}
.darktextr {
	margin: right;
	padding-left: 10px;
	color: black;
	font-weight: bold;
}
.clearleft {
    clear: left;
}

#boxed {
	width: 950px;
	height: 1000;
	float: left;
	border: 1px solid black;  
}


#first {
    width: 100px;
    float: left;
    height: 300px;
    background-color: blue;
}
#second {
    width: 200px;
    float: left;
    height: 300px;
    background-color: green;
    color: white;
}
#clear {
    clear: both;
}
a {
    color: white;
}
* {
    color: white;
}

carnageX · Oct 17, 2017

Protip: Use a CSS framework/library like Bootstrap, which will take care of the sizing for you. You just have to use a "grid" layout (which your content fits perfectly in).

E.g. Plunker

tanishadave · Nov 30, 2020

Being a Wen designer, I want to suggest that If you have any query related html and CSS then you can easily solve it by using W3schools. I learned everything from this site.

tehnokraat · Nov 30, 2020

Yeh. Today's young people are still really much more capable than the previous generation.
Take for example me, I've been dealing with this thing every day for almost 30 years, and I still don't know everything.
Today's young people are looking at the W3scool website for a moment and that's all, everything is clear.
Only look how people are still evolving, just wonder.

HTML/CSS newbie...

C0RR0SIVE

Golden Master

carnageX

Private Joker,

tanishadave

Beta member

tehnokraat

Daemon Poster

Similar threads