PDA

View Full Version : CSS/DIV Positioning Question



GraphicsChicken
Mar 16th, 2010, 07:24 AM
Greetings,

I am fairly new to CSS and am attempting to build a layout with it. Below I included a mockup of the basic layout I'm trying to construct. As I planned it, the outer border would be it's own DIV. Then the inner space would be it's own DIV as well, but centered within the parent DIV. Then to the left I'm attempting to float buttons but yet have the overlap.

All my attempts thus far to make this so have been futile. What would be the best way to do this?

http://i39.tinypic.com/1zqac8p.gif

I thank you for sharing your expertise regarding this matter.
Peace and long life.

Arbitrator
Mar 16th, 2010, 09:24 AM
All my attempts thus far to make this so have been futile. What would be the best way to do this?Probably floats. Here's an example; I added dashed borders and a translucent background (non-IE only) to make things easier to understand when looking over the code.

HTML5
Live: http://www.jsgp.us/demos/CF191609.GraphicsChicken.1/

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<!DOCTYPE html>
<html xml:lang="en-US" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Demo for CodingForums.com Thread 191609</title>
<style>
/* Test Code */
* { margin: 0; padding: 0; } /* kills non‐zero browser defaults on |ul| element */
div { margin-left: 3em; border: 1.5em solid #ff7c55; }
ul { float: left; margin: 1em 0 0; }
li { margin: 2em 2em 1em 0; }

/* Other Code */
html { margin: 1em; background: gray; color: black; }
body, ul, p { border: 0 dashed white; }
body, ul { border-width: 0.1em; }
div { background: #4a342d; color: #ff7c55; }
ul { width: 15em; border-left-width: 0; background: rgba(0, 255, 0, 0.4); }
li { display: block; padding: 0.5em; background: #d3bdb6; color: black; }
p { border-top-width: 0.1em; }
p:first-child { border-top-width: 0; }
</style>
</head>
<body>
<ul>
<li>button</li>
<li>button</li>
<li>button</li>
</ul>
<div>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
</body>
</html>

GraphicsChicken
Mar 17th, 2010, 06:33 AM
Thank you sir!

This has become a valuable resource for me from which I can improve my CSS knowledge.

I have one last question regarding this layout. I modified the code you provided so that it's centered and has a fixed width of 800px. While I was able to get the main DIV centered, I could not get the buttons to follow. How could I keep the buttons aligned with the centered DIV?

Here is the modified code:


</head>
<style>
/* Test Code */
* { margin: 0; padding: 0; } /* kills non‐zero browser defaults on |ul| element */
div { margin-left:auto; margin-right:auto; width:800px; border: 1.5em solid #ff7c55; }
ul { float: left; margin: 1em 0 0; }
li { margin: 2em 2em 1em 0; }

/* Other Code */
html { margin: 1em; background: gray; color: black; }
body, ul, p { border: 0 dashed white; }
body, ul { border-width: 0.1em; }
div { background: #4a342d; color: #ff7c55; }
ul { width: 15em; border-left-width: 0; background: rgba(0, 255, 0, 0.4); }
li { display: block; padding: 0.5em; background: #d3bdb6; color: black; }
p { border-top-width: 0.1em; }
p:first-child { border-top-width: 0; }
</style>

Many thanks once again.

drhowarddrfine
Mar 17th, 2010, 02:23 PM
He's not going to be serving it as XHTML. I'd remove the first line, change the second to just <html> and remove the closing slash from the meta tag. (/>). The reason for this is the browser will treat your markup as "tag soup" instead of real XHTML, which only modern browsers understand and not IE.

Arbitrator
Mar 19th, 2010, 11:06 AM
I have one last question regarding this layout. I modified the code you provided so that it's centered and has a fixed width of 800px. While I was able to get the main DIV centered, I could not get the buttons to follow. How could I keep the buttons aligned with the centered DIV?You merely need to put the layout in a container element, give that element the desired width, and center that element. Here, a container element already exists (the body element), so I just added a single CSS rule: body { width: 800px; margin: 0 auto; }.

HTML5
Live: http://www.jsgp.us/demos/CF191609.GraphicsChicken.2/

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<!DOCTYPE html>
<html xml:lang="en-US" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Demo 2 for CodingForums.com Thread 191609</title>
<style>
/* Test Code */
* { margin: 0; padding: 0; } /* kills non‐zero browser defaults on |ul| element */
body { width: 800px; margin: 0 auto; }
div { margin-left: 3em; border: 1.5em solid #ff7c55; }
ul { float: left; margin: 1em 0 0; }
li { margin: 2em 2em 1em 0; }

/* Other Code */
html { margin: 1em; background: gray; color: black; }
body, ul, p { border: 0 dashed white; }
body, ul { border-width: 0.1em; }
div { background: #4a342d; color: #ff7c55; }
ul { width: 15em; border-left-width: 0; background: rgba(0, 255, 0, 0.4); }
li { display: block; padding: 0.5em; background: #d3bdb6; color: black; }
p { border-top-width: 0.1em; }
p:first-child { border-top-width: 0; }
</style>
</head>
<body>
<ul>
<li>button</li>
<li>button</li>
<li>button</li>
</ul>
<div>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
</body>
</html>


He's not going to be serving it as XHTML. I'd remove the first line, change the second to just <html> and remove the closing slash from the meta tag. (/>). The reason for this is the browser will treat your markup as "tag soup" instead of real XHTML, which only modern browsers understand and not IE.The code is written in HTML5 in a way that it's simultaneously correct HTML 5 and XHTML 5. And yes, I'm aware that the spec is in a draft state, but I figured I'd start learning it now since all of the browser vendors are already implementing it well before it's reached Candidate Recommendation status.

The first line, the XML declaration, shouldn't have a detrimental effect on any browser except for IE6 (and older), a browser which was released nine years ago and has since had two successors. I'm not interested in writing code for it and my CSS (i.e., the first-child pseudo-class) isn't compatible with it either. Per HTML 4.01, processing instructions are simply ignored, so I wouldn't expect it to cause a problem in pre-HTML5 implementations either.

Striking every attribute from the html element would be totally inappropriate since it contains element language information.

I don't which browser historically choked on the "closing slash" (i.e., NET syntax), but those days are long gone. The slash is allowed (and ignored) in HTML 5.

The tag soup issue you mentioned has largely been mitigated in HTML5 since all of these errors now have defined handling.

And it might be worth noting that IE will apparently support real XHTML based on the recently released IE9 Platform Preview so creating XHTML-compatible documents is a bit more meaningful.