Adding a container

noreturn

Addicted
Joined
Mar 20, 2011
Messages
776
Reaction score
0
FP$
14
So I have been trying to add a container to this site themplate I am coding. But it seems not matter what I do it wont add... Can anyone guide me on how to add it.. If it would be a easier we can do it over TV(teamviewer)

Thanks!
 
It could be helpful if you posted what you've been trying to use to create this container.

Here is what you need to create a div in HTML.

Code:
<div id="container">

</div><!-- container -->

You can name the div whatever you wish, and obviously everything you want contained in your container should be inside the tags.
 
Puma said:
It could be helpful if you posted what you've been trying to use to create this container.

Here is what you need to create a div in HTML.

Code:
<div id="container">

</div><!-- container -->

You can name the div whatever you wish, and obviously everything you want contained in your container should be inside the tags.
That's the basic concept. Just throw all your divs in there and whatnot. Like so:
Code:
<!-- START #container -->
<div id="container">
    <!-- START #inside1 -->
    <div id="inside1">
     Contain all the things!
    </div>
    <!-- END #inside1 -->
</div>
<!-- END #container -->

You would want to give the container a specific width, maybe give it a margin:auto; etc. Also, you could then style the #inside1 div to have further properties within the already set 😉
 
Ok wow, I still count get it to work for some reason no matter what I did maybe someone else can help me HTML file and CSS file is attached.

Thanks for those who are willing to look into this for me.
 
noreturn said:
Oh man I feel so stupid sorry about that.. This one should have everything you need.

Where do you want the container?
 
If you just add the container on your own how is the OP going to learn anything?
 
The main idea here, is to create a div that stores and organizes other information. Css is generally used to actually make the container.

CSS Example:
Code:
body , html {
background: #efefef;
margin: 0;
padding: 0;
}

#container {
background: #ffffff;
border: 1px solid #000000;
width: 90%;
margin: 0px auto;
margin-top: 20px;
padding: 5px;
}


HTML: (Including the above CSS)

Code:
<html>
<head>
<title>Website Name</title>
<style>
body , html {
background: #efefef;
margin: 0;
padding: 0;
}

#container {
background: #ffffff;
border: 1px solid #000000;
width: 90%;
margin: 0px auto;
margin-top: 20px;
padding: 5px;
}
</style>

</head>

<body>
<div id="container"><p>This is a paragraph which will sit inside the container.</p></div>
</body>
</html>


I didn't bother even taking a look at your own code, this way you can look at this and see how things work without just having it done for you.
 
Connor said:
Code:
#container {
background: #ffffff;
border: 1px solid #000000;
width: 90%;
margin: 0px auto;
margin-top: 20px;
padding: 5px;
}

Your code should be indented. Also, by using this:

margin: 0px auto;
margin-top: 20px;


You are considered a lazy developer. It should actually be this:

margin: 20px auto;

Corrected code:

Code:
<html>
	<head>
		<title>Website Name</title>
		
		<style>
		body , html {
			background: #efefef;
			margin: 0;
			padding: 0;
		}

		#container {
			background: #ffffff;
			border: 1px solid #000000;
			width: 90%;
			margin: 20px auto;
			padding: 5px;
		}
		</style>
	</head>

	<body>
		<div id="container">
			<p>This is a paragraph which will sit inside the container.</p>
		</div>
	</body>
</html>

🙂
 
Back
Top Bottom