Learn VBA & Macros in 1 Week!

CSS - Strange Problem With Block Element Spacing/positioning

Full Excel VBA Course - Beginner to Expert

Strange Problem With Block Element Spacing/positioning	View Content

I am working on a site right now. I have two adjacent divs, one on top of the other. Both are styled with margins and padding set to "0." I want the second div to be directly below the first with no spacing. If I include a single-pixel border on the second div, the elements touch with the border being the only thing between the first and second div. Without the border, there is a space of what I believe to be 20 pixels. I don't want to actually use the border so I'm not sure what to do. I don't understand why the page is behaving this way. Feel free to check it out at kellyshipe.com. I would have linked but forum rules evidently prevent it.

Full Excel VBA Course - Beginner to Expert

Pushing The Positioning Of An Element Out Based On Content-length Of Earlier Element.

Similar Tutorials

View Content

Hi,

My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner).

Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page.

I have tried various approaches and read up on positioning but so far have not been able to do it using css.

Any help is much appreciated.

Jim

Center Align Block + Margin Spacing Help

Similar Tutorials

View Content

For the first time, rather than coding my own layout CSS, I'm adapting a layout and CSS created by someone else... and I've run into some problems figuring out a couple of things. The layout in question is one written for Movable Type, and is freely able to be edited and changed.

I'm working with the layout in a test setting now, before moving it to its permanent home. You can see it in action at:
Code:

http://www.outincenterfield.com/mt/

Two things I need to figure out:

1. How to align the whole layout in the center of the page. (the header image, the 3-columns, and the footer)

2. How to increase space(margin) between the boxes in the sidebars, so that the underlying white background color shows through.

Any help would be GREATLY appreciated - as the way this layout is coded has got me turned all around. I've tried everything I could think of, and can't sort out how to do these two things.

Here's the main CSS:
Code:

/*
THEME NAME: Diurnal
THEME URI: http://ntuat.wordpress.com/
DESCRIPTION: This flexible 5-in-1 theme changes according to the time of day
VERSION: 1.0
AUTHOR: Carolyn Smith
AUTHOR URI: http://not-that-ugly.co.uk/
TEMPLATE: sandbox
*/

/* use any structure in /sandbox-layouts; more details in the readme*/
/* included here for Movable Type */


/* links to time-specific stylesheets */
@import url('sunrise/style.css');
@import url('morning/style.css');
@import url('afternoon/style.css');
@import url('sunset/style.css'); 
@import url('night/style.css'); 

div#container {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
}
div#content {
    margin: 0 400px 0 0;
}
div.sidebar {
    float: left;
    overflow: hidden;
    width: 180px;
}
div#primary {
    margin: 0 0 0 -400px;
}
div#secondary {
    margin: 0 0 0 -200px;
}
div#footer {
    clear: left;
    width: 1000px
}


body {font: 0.75em arial, helvetica, verdana, sans-serif;
margin:0;
padding:0;
color:#444}

#container {background:#fff;}

#content {
padding:0 10px 0 10px}

/* header */
#header {height:200px;}

#header h1 {font:3em 'century gothic', futura, serif;
margin:0;
padding: 0 10px 0 10px;}

#blog-description {padding:7px 10px 0px 10px;
color:#fff}

.skip-link {display:none}



/* prev/next links */
.navigation {margin:1em;
text-align:center;
width:95%;
height:1em}

.nav-previous {float:left;
text-align:left;
width:45%}

.nav-next {float:right;
text-align:right;
width:45%}

.nav-previous a {padding-left:20px;
background:url(leftarrow.gif) center left no-repeat;}

.nav-next a {padding-right:20px;
background:url(rightarrow.gif) center right no-repeat;}

span.meta-nav {display:none}


/* page navigation */
#menu ul li {
margin:0;
padding:0;
display:inline;
font:1.2em 'century gothic', futura, sans-serif;
}

#menu ul li ul {margin:0;
display:inline;
font-size:0.8em;
}

#menu ul li a {
padding: 3px 20px 3px 10px;
letter-spacing:0.05em;
}





/* sidebar stuff */
.sidebar {margin:0;
padding: 10px;
background:#fff}

.sidebar h3, .comments h3, #respond h3 {letter-spacing:0.05em;
margin:0;
padding:7px 10px 3px 20px;
font: 1.4em 'century gothic', futura, sans-serif}

#menu ul, .sidebar ul {list-style:none;
margin:0;
padding:0;}

.widget, .sidebar li.linkcat {border:1px #ccc solid;
margin-bottom:2em;}

.sidebar ul li, #wp-calendar caption {background:#f0f0f0 url(greybk.png) top left repeat-x;
border:1px #ccc solid;}

.sidebar h3 {border:1px #ccc solid;}

.sidebar ul li ul li, .sidebar ul li div {background:#fbfbfb;
border:0;
padding:3px 10px 3px 10px;}

.sidebar ul li ul li ul li {
padding-left:20px;
background:url(rightarrow.gif) center left no-repeat;}



/* posts & comments */
.post, body.page div.hentry, .comment, .trackback, .pingback {border:1px #ccc solid;
margin:10px 0 10px 0}

.entry-title, .comment-author {letter-spacing:0.05em;
margin: 0;
background:#f0f0f0 url(greybk.png) top left repeat-x;
padding:5px 10px 0px 10px;
font: 2em 'century gothic', futura, sans-serif}

abbr.published {border:0;}

.entry-date, .comment-meta, #trackbacks-list div.comment-author  {
text-transform:uppercase;
font-size:0.9em;
margin:0;
background:#f0f0f0; 
padding:0px 10px 5px 10px;}

.entry-date {background:#f0f0f0 url(clock.gif) top left no-repeat;
padding-left:20px}


#trackbacks-list div.comment-author {font-family: arial, helvetica, verdana, sans-serif;
border-bottom:1px #ccc solid;
letter-spacing:0em;
padding-top:5px}

.comment-meta {border-bottom:1px #ccc solid;}

.comment p, #trackbacks-list p {padding:0px 10px 0px 10px;
background:#fbfbfb;}

.entry-content {line-height:1.4em;
padding:10px;
background:#fbfbfb;
border-top:1px #ccc solid;
}

.entry-meta{
clear:both;
background:#f0f0f0;
border-top:1px #ccc solid;
padding:5px 10px 5px 10px}

.meta-sep {padding-left:18px;
color:#f0f0f0;}

li.bypostauthor div.comment-author {background:#f0f0f0 url(starbk.png) top left repeat-x}



/* forms */
input, textarea {background:#f0f0f0 url(greybk.png) top left repeat-x;
border:1px #ccc solid;
color:#444;
font:1em arial, helvetica, verdana, sans-serif;
overflow:auto}


#commentform #submit {margin:10px 0 10px 0;
color:#333}

#searchform div{background:#f0f0f0;
margin:10px}

#searchform submit {color:#333}


/* calendar */
#calendar h3 {display:none}

div#calendar_wrap {padding:0;
background:#f0f0f0 url(greybk.png) top left repeat-x;}

#wp-calendar {width:100%;
background:#fbfbfb;}

#wp-calendar caption {font:1.4em 'century gothic', futura, sans-serif;
margin:0;
padding: 5px 0px 5px 20px;
text-align:left
}

#wp-calendar td {text-align:center;
border:#ccc 1px solid;
background:#f0f0f0 url(greybk.png) repeat-x;}


#wp-calendar tfoot td {
background:#fbfbfb;
border:0;
}

#wp-calendar td.pad {border:0;
background:#fbfbfb}

td#today {
background:#ccc;
border:#999 1px solid}




/* image handling */
#content img {max-width:98%;}

#content, .sidebar {overflow:hidden}

a img {border:0}

.alignright {
float:right;
margin:5px}

.alignleft {
float:left;
margin:5px}

.center {
margin:auto;
display:block;
}


/* getting asides to LOOK like asides */
body.home div.category-asides {
margin:20px 0px 20px 0px;
padding:5px 10px 5px 10px}

body.home div.category-asides *{
display:inline;
}

body.home div.category-asides .entry-content {border:0;
font-size:1em;
line-height:1.5em;
padding:0}

body.home div.category-asides div.entry-meta {background:#fbfbfb;
margin:0;
border:0
}

body.home div.category-asides .entry-title, 
body.home div.category-asides .entry-date,
body.home div.category-asides .author, 
body.home div.category-asides .meta-sep,
body.home div.category-asides .cat-links    
{display:none}


/* html elements */

a {text-decoration:none}

blockquote {border:1px #ccc solid;
padding:5px}

h2 {font: 2em 'century gothic', futura, sans-serif;
margin:10px 0 -10px 0;
}

.hentry ul {list-style-image:url(rightarrow.gif)}

#footer {
background:#f0f0f0 url(greybk.png) repeat-x;
text-align:center;
border-top:#ccc 1px solid;
padding:10px 0 10px 0;
}

Right Alignment Within Inline-block Element

Similar Tutorials

View Content

I usually lurk in the Javascript forum, but a frustrating CSS issue has presented itself. I've googled this extensively and haven't found any working solutions. I'll write in pseudo-code what I want to happen, and hopefully someone can fill in the blanks... here goes:

Code:


<style type="text/css">
  .container {
    display: inline-block;
  }

  .title {
    align: left;
  }

  .subtext {
    align: right;
  }
</style>

<div class="container">
  <div class="header">
    <div class="title">Title Goes Here</div>
    <div class="subtext">Align Me Right</div>
  </div>
  <div class="content">
    Variable content which container needs to size dynamically to fit.  Could be 300px wide, could be 500px wide...
  </div>
</div>

What I've tried so far: Tried setting the container width to 1% so IE would autosize to content (while setting white-space: nowrap for the title/subtext), but IE wrapped between the title and subtext elements) Played around with setting absolute widths for the container, but I would really prefer being able to have variably sized content
And unfortunately (in many ways) it only has to work in IE. Any help would be greatly appreciated. Thanks!

Width Property Is Being Ignored On A Block Element

Similar Tutorials

View Content

the width property of the element "#globalNavWrapper #nav .subnav li a" in this drop down menu is being ignored. when i add padding-right: 200px to it, the full element is visible in the drop down menu, but the long text strings get cut off. why is the width element being ignored?

Thanks in advance!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>Groups</title>

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

#navbar {
	position: relative;
	z-index: 10000;
}

#globalNavWrapper {
	position: relative;
	width: 100%;
	font-family: Arial, Verdana, sans-serif;
	font-size: 11px;
	z-index: 10;
}

#globalNavWrapper #nav ul {
	list-style: none;
	z-index: 20;
}

#globalNavWrapper #nav li {
	float: left;
	background: #0f0 url(sprite.gif) no-repeat scroll 0%;
	display: inline;
	height: 24px;
}

#globalNavWrapper #nav li.navpadleft {
	border-left: 1px solid #999;
}

#globalNavWrapper #nav li a {
	display: block;
	background: #0f0 url(sprite.gif) no-repeat scroll 0%;
	height: 0;
	width: 100%;
	padding-top: 24px;
	overflow: hidden;
}

#globalNavWrapper #nav li#nav_home, #globalNavWrapper #nav li#nav_home a:hover, #globalNavWrapper #nav #nav_home.over a { width: 53px; }
#globalNavWrapper #nav li#nav_home a { background-position: -155px -18px; }
#globalNavWrapper #nav li#nav_home.active a { background-position: -155px -64px; }
#globalNavWrapper #nav li#nav_home a:hover, #globalNavWrapper #nav li#nav_home.active.over a, #globalNavWrapper #nav #nav_home.over a { background-position: -155px -87px; }

#globalNavWrapper #nav li#nav_myXXXX, #globalNavWrapper #nav li#nav_myXXXX a:hover, #globalNavWrapper #nav #nav_myXXXX.over a { width: 73px; }
#globalNavWrapper #nav li#nav_myXXXX a { background-position: -720px -18px; }
#globalNavWrapper #nav li#nav_myXXXX.active a { background-position: -720px -64px; }
#globalNavWrapper #nav li#nav_myXXXX a:hover, #globalNavWrapper #nav li#nav_myXXXX.active.over a, #globalNavWrapper #nav #nav_myXXXX.over a { background-position: -720px -87px; }

#globalNavWrapper #nav li#nav_people, #globalNavWrapper #nav li#nav_people a:hover, #globalNavWrapper #nav #nav_people.over a { width: 56px; }
#globalNavWrapper #nav li#nav_people a { background-position: -208px -18px; }
#globalNavWrapper #nav li#nav_people.active a { background-position: -208px -64px; }
#globalNavWrapper #nav li#nav_people a:hover, #globalNavWrapper #nav li#nav_people.active.over a, #globalNavWrapper #nav #nav_people.over a { background-position: -208px -87px; }

#globalNavWrapper #nav li#nav_groups, #globalNavWrapper #nav li#nav_groups a:hover, #globalNavWrapper #nav #nav_groups.over a { width: 60px; }
#globalNavWrapper #nav li#nav_groups a { background-position: -264px -18px; }
#globalNavWrapper #nav li#nav_groups.active a { background-position: -264px -64px; }
#globalNavWrapper #nav li#nav_groups a:hover, #globalNavWrapper #nav li#nav_groups.active.over a, #globalNavWrapper #nav #nav_groups.over a { background-position: -264px -87px; }

#globalNavWrapper #nav li#nav_tnn, #globalNavWrapper #nav li#nav_tnn a:hover, #globalNavWrapper #nav #nav_tnn.over a { width: 103px; }
#globalNavWrapper #nav li#nav_tnn a { background-position: -324px -18px; }
#globalNavWrapper #nav li#nav_tnn.active a { background-position: -324px -64px; }
#globalNavWrapper #nav li#nav_tnn a:hover, #globalNavWrapper #nav li#nav_tnn.active.over a, #globalNavWrapper #nav #nav_tnn.over a { background-position: -324px -87px; }

#globalNavWrapper #nav li#nav_green, #globalNavWrapper #nav li#nav_green a:hover, #globalNavWrapper #nav #nav_green.over a { width: 91px; }
#globalNavWrapper #nav li#nav_green a { background-position: -427px -18px; }
#globalNavWrapper #nav li#nav_green.active a { background-position: -427px -64px; }
#globalNavWrapper #nav li#nav_green a:hover, #globalNavWrapper #nav li#nav_green.active.over a, #globalNavWrapper #nav #nav_green.over a { background-position: -427px -87px; }

#globalNavWrapper #nav li#nav_ecards, #globalNavWrapper #nav li#nav_ecards a:hover, #globalNavWrapper #nav #nav_ecards.over a { width: 60px; }
#globalNavWrapper #nav li#nav_ecards a { background-position: -518px -18px; }
#globalNavWrapper #nav li#nav_ecards a.active { background-position: -518px -64px; }
#globalNavWrapper #nav li#nav_ecards a:hover, #globalNavWrapper #nav li#nav_ecards.active.over a, #globalNavWrapper #nav #nav_ecards.over a { background-position: -518px -87px; }

#globalNavWrapper #nav li#nav_shopping, #globalNavWrapper #nav li#nav_shopping a:hover, #globalNavWrapper #nav #nav_shopping.over a { width: 73px; }
#globalNavWrapper #nav li#nav_shopping a { background-position: -578px -18px; }
#globalNavWrapper #nav li#nav_shopping a.active { background-position: -578px -64px; }
#globalNavWrapper #nav li#nav_shopping a:hover, #globalNavWrapper #nav li#nav_shopping.active.over a, #globalNavWrapper #nav #nav_shopping.over a { background-position: -578px -87px; }

#globalNavWrapper #nav li#nav_petit, #globalNavWrapper #nav li#nav_petit a:hover, #globalNavWrapper #nav #nav_petit.over a { width: 69px; }
#globalNavWrapper #nav li#nav_petit a { background-position: -651px -18px; }
#globalNavWrapper #nav li#nav_petit a.active { background-position: -651px -64px; }
#globalNavWrapper #nav li#nav_petit a:hover, #globalNavWrapper #nav li#nav_petit.active.over a, #globalNavWrapper #nav #nav_petit.over a { background-position: -651px -87px; }

#globalNavWrapper #nav li#nav_don, #globalNavWrapper #nav li#nav_don a:hover, #globalNavWrapper #nav #nav_don.over a { width: 107px; }
#globalNavWrapper #nav li#nav_don a { background-position: -793px -18px; }
#globalNavWrapper #nav li#nav_don a.active { background-position: -793px -64px; }
#globalNavWrapper #nav li#nav_don a:hover, #globalNavWrapper #nav li#nav_don.active.over a, #globalNavWrapper #nav #nav_don.over a { background-position: -793px -87px; }

#globalNavWrapper #nav li.over .subnav, #globalNavWrapper #nav li.over iframe { display: block; }

#globalNavWrapper #nav .subnav {
	position: absolute;
	margin: -1px;
	border: 1px solid #999;
	background: #fff;
	width: 150px;
	z-index: -10;
	display: none;
	overflow: hidden;
}

#globalNavWrapper #nav .subnav li {
	clear: both;
	float: none;
	display: block;
	background: none;
	line-height: 18px;
	height: 18px;
	width: 150px;
	list-style: none;
	border: 0;
}

#globalNavWrapper #nav .subnav li.hr {
	border-bottom: 1px solid #999;
}

#globalNavWrapper #nav .subnav li a {
	background: #fff;
	padding: 0 0 0 5px;
	width: 1000px;
	height: 18px;
	color: #000;
	text-decoration: none;
}

#globalNavWrapper #nav .subnav li a:hover {
	background: #e4f5e5;
	color: #009f00;
}

#globalNavWrapper #nav li iframe {
	display: none;
	z-index: -1000;
	height: 220px;
	width: 151px;
	-moz-opacity: 0;
	opacity: 0;
	filter: alpha(opacity=0);
}
</style>
</head>

<body>

	<div id="globalNavWrapper">
		<ul id="nav">
			<li id="nav_home" class="navpadleft">
				<a href="#">Home</a>
			</li>
			<li id="nav_myXXXX">
				<a href="#">My XXXX</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_people">
				<a href="#">People</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			<li id="nav_groups" class="active">
				<a href="#">People</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_tnn">
				<a href="#">News Network</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_green">
				<a href="#">Green Living</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_ecards">
				<a href="#">E-Cards</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_shopping">
				<a href="#">Shopping</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_petit">
				<a href="#">Petite</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_don">
				<a href="#">Don</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
		</ul>
	</div>

<script type="text/javascript">
	startList = function() {
		var navRoot = document.getElementById("nav");
		var is_MSIE = false;
		if(navigator.userAgent.indexOf('MSIE') >= 0) is_MSIE = true;

		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if ( (node.nodeName=="LI") && (!node.id.match(/noMenu$/)) ) {
				node.onmouseover = function() { this.className += " over"; }
				node.onmouseout = function() {
					this.className = this.className.replace(" over", "");
					this.className = this.className.replace("over", "");
				}

				for(j=0; j<node.childNodes.length; j++) {
					if(node.childNodes[j].nodeName=="UL"){
						if(is_MSIE) {
							var iframe = document.createElement('<iframe frameborder="0">');
							iframe.style.position = 'absolute';
							iframe.border = '0';
							iframe.frameborder = 0;
							iframe.style.backgroundColor = '#f00';
							iframe.src = 'about:blank';
							node.appendChild(iframe);
						}
					}
				}
			}
		}
	}
	startList(); // could run elsewhere on the page, or onLoad, but inline just after seems to work best.

	document.getElementById('nav').style.zIndex = 2000;
</script>

</body>
</html>

Centering An Image Within A Block Element

Similar Tutorials

View Content

Position Absolute Within Block Level Element

Similar Tutorials

View Content

Hey,

I've got a quick question - I know this must have a common workaround to it, I just can't seem to find it.

I have a div positioned absolutely within several parent divs making up the rest of the page. To put the issue simply, it seems to be positioning this child div relative to the body. top:20; and left:20; will put it 20 from the top and left of the body of the page rather than he top and left of the block level div it's nested within. There's no positioning applied to its direct parent.

The issue is the same in both IE5.5+ and FF.

I can whip up a code example, but I think this is a simple issue that would be easier interpreted as I've put it.

Thanks in advance for any help on this. =)

Block Element Alignment Issue In Firefox

Similar Tutorials

View Content

I'm having trouble getting two textual elements to align oppositely, one left one right, within a DIV.

Visually, I am attempting this:
PHP Code:
=================================================================
User: John Doe Main Menu :: Logout
=================================================================

To accomplish this in all browsers as compliantly as possible, I attempted to define the outer div in CSS, align the content left in the XHTML, and then float another DIV inside to the right to hold the right-aligned textual content.

I know that since <DIVs> are considered block level items, they are preceeded and followed by a linebreak. Thus, I defined the Right-floated DIV as display: inline, hoping to fix that.

The CSS:
PHP Code:
#loginbar {
height: 14px;
font-size: 7pt;
line-height: 7pt;
font-weight: bold;
color: #ffffff;
background: #285064;
margin: 0;
padding: 3px 3px 0px 3px;
}

#logout {
float: right;
display: inline;
}

.loglink {
font-size: 7pt;
line-height: 7pt;
font-weight: bold;
color: #ffffff;
}

And the markup:
Code:

<div id="loginbar" align="left">
User: '.$_SESSION['fullname'].'
<div id="logout" align="right">
<a class="loglink" href="main.php">Main Menu</a> :: <a class="loglink" href="logout.php">Logout</a>
</div></div>

This system works nicely in every browser I've tried (IE6 Win, IE5.1 Mac, Opera 7.54, Camino, Safari, and NN7.2) EXCEPT Firefox. Firefox continues to put the linebreak in before the logout, dropping the text halfway below the bottom of the div even when the div is defined as display:inline. (Interesting enough, the other so-called compliant browsers don'tput in the linebreak before the div even when it's not defined inline.)

Anyone have a more elegant solution to this? I'm pretty sure I'm doing it the hard way now and can't see the forest from the trees at this point

Block Level Element Inside Inline?

Similar Tutorials

View Content

Hello,

I know that putting a block level element (such as <p> or <div>) inside an inline element (such as <a>) is against "xhtml 1.0 strict" rules, so I'm putting a <span> (inline) within an <a> (also inline).

I've made my <span> "display: block;", and it works in all browsers and validates fine, but I feel like I'm cheating the system a bit?

The thing is, I need to put a margin under a piece of text without using <br /> (as when a browser forces a line break, it will use that rule and make different pieces of text look odd), but all the text is within an anchor tag, so I can't use <p> or <div>.

Would appreciate any thoughts on the matter,

Cheers!

Simple Q: Block Element Without Line Break

Similar Tutorials

View Content

try to make a UL into a horizontal nav.

i want the a's inside the li's to be display:block, so i need a block element around the outside, but that means they wrap to new lines.

What is block without new lines?

thanks.

Block Element Doesn't Fill Parent Container.

Similar Tutorials

View Content

Hi all,
The easiest way to see the problem is to look at this demo in firefox. (I haven't patched it to work in IE yet.)

The menu items in the 1st 2 menu's don't expand to fill the available area. Any ideas?

Block Element: Inherit Height Of Surrounding Table Cell

Similar Tutorials

View Content

Hi everybody

Is there a way to inherit the height of a surrounding table cell?

<td>
<a href="..." style="display: block;">...</a> 
</td>

Thanks for help :-)
Josh

Strange - Absolute Positioned Element Acting Funny

Similar Tutorials

View Content

Hi everyone.

I have a header section to my website, and to line up the navigation to the top of the bottom most element, I used absolute positioning to acheive this inside a relative positioned element.

The strange thing is is that when first loaded, the absolutely positioned navigation is pulled completely from the parent relative div and shoved to the top of the screen. However, on refresh it jumps to where it should be per the css.

Here's the CSS...
Code:

#hd {
position: relative;
float: left;
width: 780px;
margin: 30px 0 0 0;
padding: 0;
background-color: #0099CC;
}

#hdlogo {
float: left;
margin: 0 0 18px 0;
padding: 0;
text-align: left;
}

#hdnav {
margin: 0;
padding: 0;
}

#hdnav ul {
position: absolute;
bottom: 16px;
right: 0;
height: 22px;
margin: 0;
padding: 0;
}

#hdnav ul li {
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}

#hdnav ul li a:link img, #hdnav ul li a:visited img {
border: 0;
}

#hdbar {
clear: right;
width: 780px;
margin: 0;
padding: 0;
}

And the HTML...

Code:

<div id="hd">
<div id="hdlogo">
<img src="images/logo.gif" alt="Home" title="Home"/>
</div>
<div id="hdnav">
<ul>
<li><a href="index.htm"><img src="images/home.gif" alt="Home" title="Home" /></a></li>
<li><a href="aboutus.htm"><img src="images/aboutus.gif" alt="About us" title="About us" /></a></li>
<li><a href="performance.htm"><img src="images/performance.gif" alt="Performance" title="Performance" /></a></li>
<li><a href="aesthetics.htm"><img src="images/aesthetics.gif" alt="Aesthetics" title="Aesthetics" /></a></li>
<li><a href="sustainability.htm"><img src="images/sustainability.gif" alt="Sustainability" title="Sustainability" /></a></li>
</ul>
</div>
<div id="hdbar">
<img src="images/hd-bar.gif" alt="" title="" /> <!-- hd-bar is 780px wide by 16px high -->
</div>
</div>

Just for further knowledge, here's the body tag, and the two container wraps for the rest of the site...

Code:


body {
margin: 0;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #555759;
}

body a:link, body a:visited {
text-decoration: underline;
color: #555759;
}

body a:hover {
text-decoration: underline;
color: #555759;
}

#content {
width: 780px;
margin: 0 auto;
padding: 0;
}

#allwrap {
float: left;
width: 780px;
margin: 0;
padding: 0;
}

#content centers everything and #allwrap is a container for all it's child elements.

I've also had a colleague that said in IE 6.0 that the navigation stacks, rather than displays inline.

Does anyone have any ideas?

Thanks a bunch..

-Brian

Positioning Block Elements

Similar Tutorials

View Content

hey, I have 4 block elements like this:

Code:


<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>

<div id="banner">
</div>

<div id="logo">
<img src="images/logosmall.png">
</div>

<div id="registercontent">
</div>

<div id="footer">
</div>

</body>
</html>

and the following CSS:

#banner {
height: 75px;
width: 100%;
background-image: url(images/bg1.gif);
}

#logo {
position: absolute;
top: 30px;
left: 34px;
z-index: 10;
}

#registercontent {
position: static;
width: 600px;
margin-left: 50px;
margin-top: 50px;
margin-bottom: 50px;
padding-top: 20px;
padding-left: 25px;
font-family: verdana;
font-size: 12px;
border: 1px solid #39ce96;
color: #39ce96;
background-color: #efefef;
}

#footer {
height: 75px;
width: 100%;
background-image: url(images/bg1.gif);
}

now I have found out that when I include the 'logo' block in the page and view the page in browser, the positioning of my 'registercontent' goes haywire (specifically, the block loses its top margin), if I take out the 'logo' block, the 'registercontent' block returns to normal behaviour. Only problem is, I don't know why..!!! help much appreciated.

Positioning A Div Block Relative To Another

Similar Tutorials

View Content

I have a div block which contains links on the left, it is using absolute positioning, I want to have the contents div block on the right, I want it 20 pixels away from the right border and 20 pixels away from the left div block, so if I resize my left div block, my right div block is always 20 pixels ahead of it. The code is included below:

Code:

	<div 
		style="position:absolute; 
		top:20; left:20; width:200; height:200; 
		z-index:1; 
		padding:3px; 
		border: #0000FF 1px solid; 
		background-color:#FFFFFF;">

		<div align="left">- <a href="#1">News</a></div>
		<div align="left">- <a href="#3">FAQ</a></div>
		<div align="left">- <a href="#2">ABC</a></div>
		<div align="left">- <a href="#6">Forums</a></div>
		<div align="left">- <a href="#7">Contact</a></div>
	</div>
	
	<div 
		style="position:absolute; 
		top:20; left:235; right:20;
		z-index:1; 
		padding:3px; 
		border: #0000FF 1px solid; 
		background-color:#FFFFFF;">

		<div align="left">Caption</div>
		<div align="left">bla bla bla This is the right side.
		</div>
	</div>

Div Positioning...3 Block Layout

Similar Tutorials

View Content

I have been using css for a while, but mostly just for style, not layout. I am trying to do a site, with basically three divs. One on the left for content, two on the right...one for a menu, and the other showing an image.

I have stripped down the page to the smallest possible that I can show the problem. Basically, I want the image (red background) to be below the menu (dark purple bg), and both of them on the right of the content (lavendar bg).

I have validated the html, but I am not getting a response from the css validator right now.

Here is my html so far:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html>
<head>
<title>Vote YES Mosinee!</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
	body{
		padding: 0px;
		background-color: #FFF; 
		text-align: center;
    	font: 76% Verdana,Arial,sans-serif;
    }
    div#container{
		width:800px;
		margin: 0 auto;
		text-align: left;
		background:  #ff0;
	}
	div#content{
		background: #d1c9e2;
		width:550px;
	}
	div#nav{
		float: right;
		width:240px;
		background: #484393;
	}
	div#nav p{
		padding: 5px 0;
	}
	div#nav h2{
		font-size: 110%;
		color: #333;
	}
	div#imageSection{
		float: right;
		width: 240px;
		background: #ff0000;
	}
</style>
</head>
<body>
<div id="container">
	<div id="nav">
		<ul>
			<li>There will be a menu here.</li>

			<li>It will have many items.</li>
			<li>It will have many items.</li>
			<li>It will have many items.</li>
			<li>It will have many items.</li>
			<li>It will have many items.</li>
			<li>It will have many items.</li>

			<li>It will have many items.</li>
			<li>It will have many items.</li>
		</ul>
	</div>
	<div id="imageSection">
		<img src="(URL address blocked: See forum rules)" alt="Children">
	</div>
	<div id="content">

		<p>Vote YES is dedicated to reaching out to the members of the Mosinee community and to raising awareness of the situation our elementary students face each school day.  Through their efforts, they hope to gain the support of Mosinee's voters and help the community create a facility that enables an optimal and safe learning environment.</p>

<p>After years of failed referendums and the advent of another proposed addition, numerous community members have come together and organized "Vote YES" (VOTE for Your Elementary School).  The organization was formed to support the referendum proposed by the school board and help educate individuals around the community.  </p>

<p>On April 3, 2007, the voters of the Mosinee School District will be asked to approve a referendum to address space inadequacies and safety issues at the current elementary school.  The VOTE YES group formed for a number of different reasons.  Teachers and parents found it difficult to ignore the glaring parking issues, overcrowding in the cafeteria, the use of hallways and storage closets for classes, and the 20-year band-aid solution of adding portable classrooms.  Taxpayers couldn't ignore the problem and individuals throughout the community stepped forward to help.  </p>

<p>Many More Paragraphs....</p>
	</div>
</div>
</body>
</html>

How can I achieve this?

Strange Positioning Of Div?

Similar Tutorials

View Content

I have a DIV on my page with the style 'bottom' applied to it.

It is coloured red so you can see it.

I would like it at the bottom outside of all the other divs/containers.

The DIV with the red background should be at the very bottom of the page, under the large DIV.

This is the HTML placing it on the page:

HTML Code:
Code:

  <!-- InstanceEndEditable --></div>
<div class="bottom">bottom</div>
</body>

You can see it is the last DIV on the page.

Yes I am using Dreamweaver templates.

Here is the CSS for the bottom class:

Code:
Code:

.bottom {
 margin: 0px;
 padding: 0px;
 background-color: red;
 border: 0px solid #999999;
 height: 20px;
 width: 100%;
}

It appres in different places on different pages.

'bottom' DIV at the top of the page:
http://www.jfwebdesign.co.uk/photog/

'bottom' DIV almost at the bottom of the page:
http://www.jfwebdesign.co.uk/photog/about.php

'bottom' DIV at the top of the page:
http://www.jfwebdesign.co.uk/photog/work.php

'bottom' DIV at the top of the page:
http://www.jfwebdesign.co.uk/photog/contact.php

Here is a link to the CSS file:
http://www.jfwebdesign.co.uk/photog/styles.css

Can anyone explain why?

Many thanks.

Positioning And Text Spacing

Similar Tutorials

View Content

Its been a long time now and I am finnaly getting back into website desiging. I am doing a simple coding but I am having a hard time trying to figure out how to do the following.

I want to create a table but using only divs. So basically I am going to have a parent div acting as the whole table then sub-div acting as each row, and within those divs there will be more divs acting as each cell.

But I can't figure out how to make each cell be right next to each other instead of on the next line. How do I make it look like below:

|<div>| |<div>| |<div>| |<div>|
|<div>| |<div>| |<div>| |<div>|
|<div>| |<div>| |<div>| |<div>|
|<div>| |<div>| |<div>| |<div>|

Also, what CSS properity do I have to use so that the content of each cell will overlap with all th surrounding cells? By overlap I mean so they will be touching each other.

Relative Positioning To Another Element

Similar Tutorials

View Content

How can I position several elements, relative to the position of another element?

I tried this:

<div>
Test
<span style="position:relative;top:40;left:40">Foo</span>
<span style="position:relative;top:40;left:40">Bar</span>
</div>

I want both Foo and Bar to be 40 pixels to the right and below of Test.

But they appear next to eachother instead of stacking on top of eachother.

How can I position them "relative" to the div tag?

Positioning My Element Showing Different

Similar Tutorials

View Content

Absolute Positioning In Relative Element

Similar Tutorials

View Content

I was under the understanding that an element positioned absolutely is positioned in context to the closest parent object that has positioning of absolute or relative, and barring that, the body.

I have quite simple code:

html4strict Code:
Original - html4strict Code <div style="position:relative; height:50px; width:250px; background:#69c;"> <input type="text" style="position:absolute; top:5px; left:0; right:0;"> </div>

  

  


 <div style="position:relative; height:50px; width:250px; background:#69c;">


     <input type="text" style="position:absolute; top:5px; left:0; right:0;">


 </div>

I would expect this to be top-aligned with 5 pixels of blue showing, and stretched the width of the containing div, but it's not. It's the correct height from the div but not the sides of the container - can anyone tell me why that is, or what should be done ( short of width:100%; )?

Thanks,

Brett