PDA

View Full Version : Any HTML5 / WebDev peeps here? Urgent!

EchoedTruth
01-30-2013, 01:49 PM
Hey everyone,

So I'm designing my first website for a business I'm starting up - I can't for the life of me get this one thing right.

My nav section will not line up with my article section (nav = home, about us, services... article = the llama rant).

Here is my code so far:



<!DOCTYPE html>
<html>
<head>
****** charset="utf-8">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title> My Magical World </title>

<style>

html, body { margin: 0px; padding: 0px; border: 0px }
body { background-color: silver }
article { margin: 20px; padding: 15px; border: 2px solid black; }
footer { clear:both; background-color: red; border:5px solid black; text-align:center; }

* { margin: 0; }
html, body { height: 100%; }
.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; }
.footer, .push { height: 4em; }
.b { border:5px solid black; text-align: center; background-color: red; }
.field { border:2px solid black; text-align: center; background-color: red; }



</style>
</head>

<body>

<div class="wrapper">

<header class="b">

<h1 style="border: 5px solid black">

Hello World!

</h1>

<h2 style="border: 2px solid black">

Welcome to a magic world

</h2>

</header>


<nav style="background-color: red; border: 2px solid black; margin: 10px; padding: 10px; float: left; ">

<fieldset class="field"><a href="BTSMain.html"><b>Home</b> </a></fieldset>
<fieldset class="field"><a href="BTSServices.html"><b>Services We Offer</b></a></fieldset>
<fieldset class="field"><a href="BTSAboutUs.html"><b>Request Service</b></a></fieldset>
<fieldset class="field"><a href="BTSTestPage.html"><b>Contact Us</b></a></fieldset>
<fieldset class="field"><a href="BTSTestPage2.html"><b>About BTS</b></a></fieldset>

</nav>


<article style="float: left">

My world is a strange place... it is populated by lemurs, lobsters, larvae, lampreys, and llamas. Lllaaaammmaaaaaaaaaassssssssssssssssssssssssss.... ....... Lllaaaammmmmmmmaaaaaaassssssssssssssss

<h4> <b> Llamas...... </b> </h4>

</article>


<div class="push"> </div>
</div>


<div class="footer">

<footer>

<h1> <a href="BTSAboutUs.html"><b>About My World </b></h1>

</footer>

</div>

</body>



</html>



Thanks in advance :D
Ihealyou
01-30-2013, 02:24 PM
I have no idea if this is the "correct" way to do it, but if you take out float:left from the article it'll appear next to the navbar
Nuncio
01-30-2013, 02:38 PM
You should be using tables to set this up. I'm no expert, so you know, take my advice for what it's worth.

There is a free wysiwyg that will help you get on with this, Kompozer.

http://www.kompozer.net/

I gotta say, that's damn ugly, though. Red backgrounds with blue links, not so awesome. If you feel like messing with a little CSS, you'd probably do yourself some favors. You'd also be able to do rounded corners and such.
EchoedTruth
01-30-2013, 02:57 PM
You should be using tables to set this up. I'm no expert, so you know, take my advice for what it's worth.

There is a free wysiwyg that will help you get on with this, Kompozer.

http://www.kompozer.net/

I gotta say, that's damn ugly, though. Red backgrounds with blue links, not so awesome. If you feel like messing with a little CSS, you'd probably do yourself some favors. You'd also be able to do rounded corners and such.

Yea this is all prototype stuff... I'm gonna change the style a great deal - just trying to get the structure down. I was yelled at for using tables to format the page on like 5 different websites lol... people are really hardcore about only using tables for tabular data, not for setting up structure.

To Ihealyou: when I take float: left out of the code, it puts the article next to the nav bar, but the border of the article goes behind the nav bar (it extends across the page). I'm trying to have a border and have it lined up next to the nav bar properly.
Nuncio
01-30-2013, 03:19 PM
Yea this is all prototype stuff... I'm gonna change the style a great deal - just trying to get the structure down. I was yelled at for using tables to format the page on like 5 different websites lol... people are really hardcore about only using tables for tabular data, not for setting up structure.

To Ihealyou: when I take float: left out of the code, it puts the article next to the nav bar, but the border of the article goes behind the nav bar (it extends across the page). I'm trying to have a border and have it lined up next to the nav bar properly.

Then you need to go with CSS,

I did this in about 5 minutes with tables. Theres no reason not to use tables in your case.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>****** content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>pigugly</title></head><body style="color: rgb(0, 0, 0); background-color: black;" alink="#000099" link="#000099" vlink="#990099">
<div style="text-align: center;"><br>
<table style="text-align: left; width: 90%; margin-left: auto; margin-right: auto; height: 599px;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr align="center">
<td colspan="2" style="vertical-align: top; width: 1010px; background-color: red; height: 50px; text-align: center;"><font size="+3"><span style="font-weight: bold;">Hello World!</span></font><br>
</td>
</tr>
<tr align="center">
<td colspan="2" rowspan="1" style="vertical-align: middle; width: 1010px; background-color: red; height: 35px; text-align: center;"><font size="+1">Welcome to a magical, eye-killing world</font><br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 194px; text-align: center; background-color: red; height: 20px;"><a href="index.html">Home</a><br>
</td>
<td colspan="1" rowspan="6" style="vertical-align: top; width: 1010px; background-color: silver; height: 327px;">My world is a strange place... it is populated by lemurs, lobsters,
larvae, lampreys, and llamas.
Lllaaaammmaaaaaaaaaassssssssssssssssssssssssss.... .......
Lllaaaammmmmmmmaaaaaaassssssssssssssss


<h4> <b> Llamas...... </b> </h4>
</td>
</tr>
<tr align="center">
<td style="vertical-align: top; width: 194px; background-color: red; height: 25px;"><a href="services.html">Services We Offer</a><br>
</td>
</tr>
<tr align="center">
<td style="vertical-align: top; width: 194px; background-color: red; height: 25px;">Request Services<br>
</td>
</tr>
<tr align="center">
<td style="vertical-align: top; width: 194px; background-color: red; height: 25px;">Contact Us<br>
</td>
</tr>
<tr align="center">
<td style="vertical-align: top; width: 194px; background-color: red; height: 25px;">About BTS<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; background-color: red; height: 327px;"><br>
</td>
</tr>
<tr align="center">
<td colspan="2" rowspan="1" style="vertical-align: top; height: 35px; background-color: red;"><a href="about.html"><font size="+2">About My World</font></a><br>
</td>
</tr>
</tbody>
</table>

</div>
</body></html>


Still ugly as shit.
Nuncio
01-30-2013, 03:28 PM
I'll put this simply, cuz I already kinda did.

If you wont use tables, you have to use divs in CSS to do what you want easily and properly.

There is no reason NOT to use tables.
Ihealyou
01-30-2013, 04:34 PM
To Ihealyou: when I take float: left out of the code, it puts the article next to the nav bar, but the border of the article goes behind the nav bar (it extends across the page). I'm trying to have a border and have it lined up next to the nav bar properly.

You could set the width of the navbar section and then set the margin-left of the article to the same width, like this:

<nav style="background-color: red; border: 2px solid black; margin: 10px; padding: 10px; float: left; width:150px; ">

<fieldset class="field"><a href="BTSMain.html"><b>Home</b> </a></fieldset>
<fieldset class="field"><a href="BTSServices.html"><b>Services We Offer</b></a></fieldset>
<fieldset class="field"><a href="BTSAboutUs.html"><b>Request Service</b></a></fieldset>
<fieldset class="field"><a href="BTSTestPage.html"><b>Contact Us</b></a></fieldset>
<fieldset class="field"><a href="BTSTestPage2.html"><b>About BTS</b></a></fieldset>

</nav>


<article style="margin-left:150px;">

My world is a strange place... it is populated by lemurs, lobsters, larvae, lampreys, and llamas. Lllaaaammmaaaaaaaaaassssssssssssssssssssssssss.... ....... Lllaaaammmmmmmmaaaaaaassssssssssssssss

<h4> <b> Llamas...... </b> </h4>

</article>

Again, I don't know if this is best practices or anything, but it got me through my web development class.
Nuncio
01-30-2013, 04:46 PM
You should just do CSS.

Heres a quick one, with the style inside the document, so you'd want to make a separate style sheet and then each page, obviously.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

****** content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
<style type="text/css">


.wrapper {
margin: 0px auto;
width: 1000px;
background-color: black;
}


.header {
margin-top: 20px;
margin-bottom: 10px;
float: center;
width: 1000px;
text-align: center;
background-color: red;
color: black;
height: 45px;
background-position: center center;
direction: ltr;
font-family: Arial,"Microsoft Sans Serif",sans-serif;
font-stretch: normal;
font-style: normal;
-moz-border-radius: 7px;
border-radius: 7px;
vertical-align: text-middle;
}

.top {
margin-top: 10px;
float: center;
width: 1000px;
height: 35px;
text-align: center;
background-color: red;
color: black;
background-position: center center;
direction: ltr;
font-family: Arial,"Microsoft Sans Serif",sans-serif;
font-stretch: normal;
font-style: normal;
-moz-border-top-left-radius: 7px;
-moz-border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}

.left1 {
border: 0px solid black;
float: left;
width: 170px;
text-align: center;
height: 306px;
background-color: red;
color: black;
background-position: center center;
direction: ltr;
font-family: Arial,"Microsoft Sans Serif",sans-serif;
font-size: normal;
font-stretch: normal;
font-style: normal;
font-variant: normal;
}
.center1 {
border: 0px solid black;
float: left;
width: 829px;
text-align: left;
background-color: white;
color: black;
height: 306px;
background-position: center center;
direction: ltr;
font-family: Arial,"Microsoft Sans Serif",sans-serif;
font-stretch: normal;
font-style: normal;
vertical-align:text-top;
}


.button {
border: 1px solid black;
margin: 5px;
float: center;
width: 159px;
text-align: center;
background-color: red;
color: black;
height: 35px;
background-position: center center;
direction: ltr;
font-family: Arial,"Microsoft Sans Serif",sans-serif;
font-size: large;
font-stretch: normal;
font-style: normal;
font-variant: normal;
vertical-align:text-bottom
-moz-border-radius: 7px;
border-radius: 7px;
}


.bottom {
border: 0px solid black;
float: left;
width: 1000px;
text-align: center;
background-color: red;
color: black;
height: 20px;
background-position: center center;
direction: ltr;
font-family: Arial,"Microsoft Sans Serif",sans-serif;
font-stretch: normal;
font-style: normal;
font-size: small;
-moz-border-bottom-left-radius: 7px;
-moz-border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
vertical-align: text-middle;
}





</style>
</head>

<body style="color: rgb(0, 0, 0); background-color: black;" alink="#000099" link="#000099" vlink="#990099">

<div class="wrapper">

<div class="header"><h1><font size="+1">Something about magic.</h1>
</div>

<div class="top">
Somethinng else about magic
</div>

<div class="left1">
<div class="button">
button 1
</div>
<div class="button">
button 2
</div>
<div class="button">
button 3
</div>
<div class="button">
button 4
</div>
<div class="button">
button 5687565
</div>
</div>

<div class="center1">
A lot of words that start with "L", including Llamas. A lot of words that start with "L", including Llamas. A lot of words that start with "L", including Llamas.
</div>



<div class="bottom">
about something or other
</div>

</div>
</body>
</html>


Still super ugly. You could put borders around some of the divs to separate shit if you wanted, I guess.
Nuncio
01-30-2013, 04:49 PM
Why does this filter get rid of "meta" inside the "html" code?


****** content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">

is supposed to be meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
with a "<" in front of it.

wtf meta?
Nuncio
01-30-2013, 04:56 PM
That said, Ihealyou's changeup worked pretty well.
EchoedTruth
01-30-2013, 05:23 PM
Ihealyou's recommendation = gold. Exactly what was needed. Thanks for all the input yall :D

One last question - anyone know how to change the color of a link? IE so my linked sites / nav sites aren't ugly blue :D
Nuncio
01-30-2013, 05:39 PM
prolly in body style,

alink="#000000" link="#000000" vlink="#000000"
myriverse
01-31-2013, 10:38 AM
If you're using CSS, then it's

a {color:#000000;}
a:visited {color:#000000;}
a:hover {color:#000000;}
a:active {color:#000000;}

And no... only use tables for tabular data, never layout.
EchoedTruth
01-31-2013, 12:03 PM
Thanks yall
Andrew Jackson
02-04-2013, 03:27 AM
this thread enraged me
Knuckle
02-04-2013, 11:51 AM
lol