Question about the <div> tag

Get Started
1

Hello everyone. New member here and also new to website building. I’ve just begun following an online tutorial on html/css/php/etc, and been playing around with some coding. I have a question regarding the <div> tag. I’ve used 2 examples given by the tutorial and 1 doesn’t seem to work.

1st:

<body>
<div style=“background: green”>
<h5 >SEARCH LINKS</h5>
<a target=“_blank” href=“http://www.google.com”>Google</a>
</div>
</body>

2nd:

<div id=“content” align=“left” bgcolor=“white”>
<h5>Content Articles</h5>
<p>This paragraph would be your content
paragraph with all of your readable material.</p>
</div>

My question is regarding the background color. It’s green when using the 1st example. But, there is no color when using the 2nd. What exactly is the difference/problem here?

2

The bgcolor attribute is not a valid attribute, so that is why it doesn’t work. Try style=“background:green;”

3

That worked like a charm. Thank you, rguy. :slight_smile:

I think I should look for a better tutorial. Some of the things are a little confusing/conflicting at that site. lol

4

Olson, htmldog is quite a nice starting point. :slight_smile:

5

Thanks for the link, K. I’ll shoot on over there. I would just hate to start learning and learn a lot of bad habits from the beginning. Cheers! :slight_smile:

6

Hello, I’m back with another question. :slight_smile:
Ok, basically I’m trying to replace tables with the div. I don’t want to use tables unless I have actual tabular data. I have a div block/“table” at the top of the page where my navigation links are. I’m trying to get another div container below it to hold the main content. But, I can’t get them on top of each other. The 2nd div is being placed inline after the 1st div. So far, I managed to get it to look how I want by using 2 </br> tags between the two containers. Is there a better/correct way? Or is the </br> the only way?

7

Hi Olson,

there definitely is a better way, but it’d be good to see a link to the site you’re working on so that we know what code you’re using and how the elements interact with one another.

8

Hello kohoutek,

Thanks for the response. :slight_smile:
Here’s a link to my testing page. I can get 2 div blocks to stack on top of each other. But something about the actual block I’m trying to work with just won’t stack properly. You should be able to tell what I’m trying to do by looking at the sample page.

9

Ok, I think I figured it out. I had an extra </div> closing tag at the end of the first div for some reason. :slight_smile:

10

Ok, I added another portion to this and hit two more problems.

First, my nav links are located at the very top of the container. I tried to use padding to lower the text, but my login box gets lowered with it. Is there a way to lower just the nav links independently of the login box?? I want the text to come down and match the “Partners” text.

Second, at the far right, there’s a big space after “Sign Up” when viewing with FireFox. It looks the way I want when viewing in Chrome however. But, if I fix it to look good in FF, it throws everything out of whack in Chrome.

I’ll try to paste the code below. Hopefully it’s something easy that I’m just missing.

<body>



<div class="topnavcontainer">


   <div class="topnavleft">
<a href="">HOME</a> |
<a href="">CONTACT US</a> |
<a href="">WEBMASTERS</a> |
<a href="">BOOKMARK US</a>
</div>



   <div class="topnavright">

<form action="partner.php" method="POST">
<input type="hidden" name="partner" value="overview"/>
<a href="">Partners</a>:
<input type="text" size="13" name="login_username" value="" />
<input type="password" size="13" name="login_password" value="" />
<button type="submit">Login</button>


<a href=""><u>Sign Up</u></a>


</form>

</div>
</div>

CSS:

.topnavcontainer {max-width: 1000px;
height: 25px;
margin-left:auto;
margin-right:auto;
border: solid 1px #63C684;
}

 .topnavleft {
float:left;
width: 600px;
height: 2px;
border: solid 0px #63C684;
text-align: bottom;
background:#111111;
color:red;
font-family: Arial, Helvetica;
    font-size: 12px;
color: #DEDEDE;
padding: 0px;}

 .topnavright {
float:right;
height: 2px;
width: 400px;
border: solid 0px #63C684;
background:#111111;
color:red;
font-family: Arial, Helvetica;
    font-size: 12px;
color: #DEDEDE;
padding: 0px;}
11

Hi Olson,

the HTML is somewhat faulty.

I’d do something like this:

#top {
	background: #111;
	width: 100%;
	overflow: hidden; /* contain floats */
	border: 1px solid #63C684;
	padding: 10px 0;
}

#top a:link, #top a:visited {
	color: #dedede;
	text-decoration: none;
}

#top a:hover, #top a:focus {
	text-decoration: underline;
}

#nav {
	width: 50%;
	float: left;
	list-style: none;
	padding: 0;
	margin: 0;
}

#nav li {
	display: inline;
	margin: 0 15px 0 0;
	border-left: 1px solid #666;
	line-height: 2;
}

#nav li:first-child { /* remove border from first li */
	border: none;
}

#nav li a {
	padding: 5px 10px;
	color: #dedede;
	text-transform: uppercase;
}

#top form {
	width: 50%;
	float: left;
	color: #dedede;
}

#top fieldset {
	border: none;
}

#top legend { /* needs to be modified for IE6/IE7 if you need it to display next to input fields */
	float: left; 
	color: #dedede;
}

#top label {
	position: absolute; /* hide labels but read them out to screen readers */
	left: -9999px;
}



		<div id="top">
			<ul id="nav">
				<li><a href="#">Home</a></li>
				<li><a href="#">Contact Us</a></li>
				<li><a href="#">Webmasters</a></li>
				<li><a href="#">Bookmark Us</a></li>
			</ul>
			<form action="partner.php" method="post">
				<fieldset>
					<legend>Partners:</legend>
					<input type="hidden" name="partner" value="overview">
					<label for="login_username">Username:</label>
					<input type="text" name="login_username" id="login_username" value="">
					<label for="login_password">Password:</label>
					<input type="text" name="login_password" id="login_password" value="">
					<input type="submit" name="submit" value="Login">
					<span><a href="#">Signup</a></span>
				</fieldset>
			</form>
		</div>

See the live example here.

12

Thank you very much for that, kohoutek. I actually tried to use the <ul> to make my menu bar at first, but it kept coming out as an actual list…lol. I didn’t even think or know to add that data into the css file to control it. I will toy around with your code and see if I can tweak it a little. But first, I need to look at it and try to understand how it all works together…lol. Thanks again K. :slight_smile: