HTML/CSS newbie... - Techist - Tech Forum

Go Back   Techist - Tech Forum > Internet > Web Graphics and Design
Click Here to Login
Reply
 
Thread Tools Display Modes
 
Old 10-17-2017, 01:58 AM   #1 (permalink)
Lord Techie
 
Join Date: Feb 2005
Location: asdf
Posts: 8,880
Default HTML/CSS newbie...

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;
}
__________________

c0rr0sive is offline   Reply With Quote
Old 10-17-2017, 10:01 AM   #2 (permalink)
Private Joker
 
carnageX's Avatar
 
Join Date: Feb 2007
Location: South Dakota
Posts: 24,483
Default Re: HTML/CSS newbie...

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
__________________
Laptop: MSI GT70 2OC-059us | i7-4700MQ | 16GB | GTX 770m | 500GB SSD / 750GB HDD | 17.3" | Win10 Pro
Desktop: 4690k | 12GB g.Skill RipJaws | GTX 970 | 520hx | Z87X-UD4H | Corsair Vengeance C70 | Corsair H110 | Acer 25" | Acer 22" | Win10
Mobile: Samsung Galaxy Note 5


If I help you, or you just like what I said, rep me by clicking the under my post
carnageX is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Newbie Newbie Newbie - Fresh Meat goodkarma New Member Introductions 4 06-20-2014 06:46 AM
CSS Articles-CSS Mistakes-CSS Faqs paul120 Programming 2 03-26-2008 06:29 AM
Help with HTML/CSS Max Power Programming 3 06-16-2006 03:13 PM
Addison Wesley Spring Into HTML and CSS Apr 2005 Osiris Tips, Tricks & Tutorials 0 03-09-2006 10:37 PM
Learn HTML, XHTML, CSS, TCP/IP Dry Ice Programming 8 11-30-2004 10:47 PM



Copyright 2002- Social Knowledge, LLC All Rights Reserved.

All times are GMT -5. The time now is 12:51 AM.


Powered by vBulletin® Version 3.8.8 Beta 1
Copyright ©2000 - 2017, vBulletin Solutions, Inc.