Learn VBA & Macros in 1 Week!

CSS - Simple Q: Block Element Without Line Break

Full Excel VBA Course - Beginner to Expert

Simple Q: Block Element Without Line Break	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.

Full Excel VBA Course - Beginner to Expert

Div Line Break?

Similar Tutorials

View Content

How do I create two div blocks that lay side by side from each other?

Right now I have two "column" divs (one left and one right), and separate "box" div that contain the content.

CSS:

Code:

div#frame
{
width: 40%;
    margin-top: auto;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
border-style: solid;
border-width: 5px;
border-right-color: black;
border-bottom-color: black;
border-left-color: white;
border-top-color: white;
}
div#title
{
width: 100%;
background-color: black;
color: white;
}
div.box
{
width: 100%;
border-style: solid;
border-width: 5px;
border-right-color: black;
border-bottom-color: black;
border-left-color: white;
border-top-color: white;
}
div#left
{
width: 45%;
}
div#right
{
width: 45%;
margin-left: 50%;
}

HTML:
Code:

<div id="frame">
        <!--------------------------->
        <div id="left">
        <div class="box">
        <div id="title">NEWS</div>
        fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div>
        <div class="box">
        <div id="title">RECENT GAMES</div>
        fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div>
        </div>
        <!--------------------------->
        <div id="right">
        <div class="box">
        <div id="title">NEWS</div>
        fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div>
        <div class="box">
        <div id="title">RECENT GAMES</div>
        fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div>
        </div>
        </div>

Link: http://mushsauce.110mb.com/art.html

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

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!

Line Break Problem

Similar Tutorials

View Content

This is probably the dumbest question ever, but I hardly ever work on GUI stuff anymore so here it goes...

I have some buttons that have their size (height and width) controlled by CSS. The text I'm putting on them is sometimes too long to fit unless it would wrap, but it doesn't want to wrap, it wants to disappear off the side of the button. Is there a way to explicity tell it to wrap if it needs to, or even insert a "new line" character?

Thanks!

Css Padding With Line Break?

Similar Tutorials

View Content

Hi im having trouble with a padding problem. I have a paragraph with a background color, and I need the paragraph to be on two seperate lines so I add the <br> tag and when i do this happens. http://www.sloweducation.com/la.htm

You see, it only does the padding-left on the top line.. is there a way I can make it pad the bottom line also? I dont know what to do at all.
Thanks.

No Line Break On List

Similar Tutorials

View Content

Below is my CSS file for list.
Code:

li {
   list-style-position: outside;
}
ul {   
   list-style-position: outside;
   list-style-type: disc;
   margin-left: 15;
}
ul ul {
   list-style-position: outside;
   list-style-type: circle;
   margin-left: 25px;

}
ol {
   list-style-position: outside;
   list-style-type: upper-alpha;

}
ol ol {
   list-style-position: outside;
   list-style-type: decimal;
   margin-left: 25px;

}

ol ol ol {
   list-style-position: outside;
   list-style-type: upper-alpha;
   margin-left: 35px;

}

Now, here's the problem. When I do this:

Code:

<b>Section Title</b>
<ul><li>List 1</li>
   <li>List 2</li>
   <li>List 3</li>
</ul>

The result showed up like this:

Section Title

*List 1
*List 2
*List 3

Is there a way to not having the line break after the "Section Title"? I want it to show up like this:

Section Title
*List 1
*List 2
*List 3

How to I take out the extra line break?

Any help is grateful!

ljCharlie

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!

Mysterious Line Break Between Divs

Similar Tutorials

View Content

Hi, folks. I'm having a curious problem with the navigation on my page. I'd like the nav and header to be all on the same line. It works when I just include the nav icons as images directly in the HTML. But when I make the nav icons into links, set each link to display:block, and give it the appropriate background-image, it puts all the icons on a new line. I'm not sure why. Any ideas?

You can see the page with the problem and the effect I'm trying to achieve at these two TinyURLs:

Problem: TinyURL dotcomslash a8qnky
Working: TinyURL dotcomslash 8tj29l

(The HTML validates, and the CSS validates except for the IE PNG transparency fix. I'm still experiencing this problem without that fix in place.)

What's Making My <p> Tags Not Break A Line?

Similar Tutorials

View Content

Hi,

What is my CSS file is making my <p></p> tags not break a line?

My css file is located he
Code:

/*
Theme Name: U5
Theme URI: (URL address blocked: See forum rules)
Description: This theme is form <a href="utombox.com">UtomBox.com</a>.
Version: 6.11
Author: Utom
Author URI: (URL address blocked: See forum rules)
*/
* {
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}

blockquote { 
margin-left:15px; 
background-color:#F8F5D1; 
border-left:5px solid #F9CA68;
border-right:1px solid #F9CA68;
border-bottom:1px solid #F9CA68;
border-top:1px solid #F9CA68; 
margin-right:15px; 
padding:4px; 
}

.navigation { 
font-family:"Trebuchet MS", Verdana, sans-serif; margin-bottom:5px; font-size:12px;
}

.navigation a { 
color:#3E6697; 
text-decoration:none; 
}

.navigation a:hover { 
color:#3E6697; 
text-decoration:underline; 
}

.navigation .alignleft { 
float:left; 
}

.navigation .alignright { 
float:right; 
}

.post { 
margin-right:10px; 
clear:both; 
border-bottom:1px dotted #999999; 
margin-bottom:5px; 
padding-bottom:10px; 
margin-top:10px;  
}

.post h1 { 
font-size:30px; 
font-family:"Trebuchet MS", Verdana, sans-serif;
}

.post h1 a { 
color:#4374b0; 
text-decoration:none; 
padding-left:1px; 
padding-right:1px;  
}

.post h1 a:hover { 
color:#4374b0; 
text-decoration:underline; 
padding-left:1px; 
padding-right:1px;  
}

.post h2 { 
font-size:20px; 
font-family:"Trebuchet MS", 
Verdana, sans-serif; 
}

.post h2 a {
font-size:20px; 
color:#4374b0; 
text-decoration:none; 
padding-right:1px; 
margin-top:5px; 
}

.post h2 a:hover { 
font-size:20px; 
color:#4374b0; 
text-decoration:underline; 
padding-right:1px; 
margin-top:5px; 
}

.post small { 
font-size:10px; 
color:#666666; 
font-family:Verdana, Arial, Helvetica, sans-serif; 
}

.post small a { 
color:#3E6697; 
text-decoration:none; 
}

.post small a:hover { 
text-decoration:underline; 
}

hr { clear:both; border:0px; 
background-image:url(/images/hor_div.gif); 
background-repeat:repeat-x; 
height:1px; 
background-color:#FFFFFF; 
padding:0px; }

body {
overflow:auto;
background:#fff;
color:#fff;
font-size:11px;
line-height:22px;
font-family: "Verdana", Lucida Grande, Arial, Helvetica, sans-serif;
}

p {
font-size:11px;
margin:0;
margin-bottom:15px;
}

p a {
color:#333;
text-decoration:none;
margin:0;
margin-bottom:15px;
}

p a:hover {
color:#333;
text-decoration:underline;
margin:0;
margin-bottom:15px;
}


h1,h2,h3,h4,h5,h6 {
font-family:"Trebuchet MS";
}

p,.entry ol,.entry ul {
margin:0;
}

.entry ol,.entry ul {
padding:0;
}
.entry strike{
text-decoration:line-through;
}
input,textarea {
background:#fff;
border:1px solid #999;
font:11px "Verdana", Arial, Helvetica, sans-serif;
color:#333;
padding:2px;
}

input[type=text]:focus,textarea:focus {
background:#fff;
border:1px solid #666;
font:11px/150% "Verdana", Arial, Helvetica, sans-serif;
color:#333;
}

#wrapper {
background:#fff url("images/bg.png") repeat-y center center;
margin:0 auto;
padding:0 5px;
}

#header {
height:100px;
}

#headerimg {
height:100px;
}

#headerimg h1 a {
background:transparent url("images/logo.png") no-repeat 0 0;
position:absolute;
width:180px;
height:100px;
overflow:hidden;
text-indent:400px;
line-height:200px;
}

#headerimg .description {
display:none;
}

#box {
padding:0 20px 20px;
}

#content,#sidebar {
float:left;
margin:0 20px 0 0;
}

#content {
width:550px;
color:#333;
}

#content2 {
width:550px;
color:#333;
float:left;
margin:0 50px 0 0;
}

.narrowcolumn a {
color:#333;
text-decoration:underline;
margin:0;
margin-bottom:15px;
}

.narrowcolumn ul.u_datetime {
background:#666 url("images/datetime.png") no-repeat 0 0;
width:60px;
height:60px;
float:left;
text-align:center;
color:#FFF;
margin:0 10px 0 0;
}

.narrowcolumn li.u_month {
font-size:10px;
line-height:20px;
}

.narrowcolumn li.u_day {
font-size:20px;
font-weight:700;
line-height:20px;
}

.narrowcolumn li.u_year {
font-size:12px;
font-weight:700;
line-height:20px;
}

.narrowcolumn h2 a {
color:#4374b0;
font-size:20px;
margin:0;
}

.narrowcolumn .u_tag,.narrowcolumn ul.u_postinfo li {
line-height:23px;
margin:0 10px 0 0;
padding:0 0 0 20px;
}

.narrowcolumn .u_tag {
background:transparent url("images/tag_blue.png") no-repeat left center;
}

.narrowcolumn .u_author {
background:transparent url("images/user.png") no-repeat left center;
}

.narrowcolumn .u_timepost {
background:transparent url("images/time.png") no-repeat left center;
}

.narrowcolumn .u_category {
background:transparent url("images/folder.png") no-repeat left center;
}

.narrowcolumn .u_comment {
background:transparent url("images/comments.png") no-repeat left center;
}

.narrowcolumn .entry {
clear:both;
padding:10px;
overflow : hidden;
}

.narrowcolumn .entry blockquote {
border-left:2px solid #fff;
color:#666;
margin:0 0 0 2em;
padding:0 0 0 2em;
overflow:hidden;
}

.narrowcolumn .entry ol li {
list-style:decimal;
}

.narrowcolumn .entry ul li {
list-style:disc;
}

.narrowcolumn .entry img {
margin:5px;
}

.narrowcolumn .entry a:hover img {
border:0px solid #FFF;
}

.narrowcolumn .navigation {
height:20px;
margin:0 0 20px;
}
.narrowcolumn .navigation_page a,.narrowcolumn .navigation_page .utompage{
font-size: 10px;
float: left;
height: 20px;
padding: 0 5px;
line-height: 20px;
margin: 0 1px 1px 0;
}
.narrowcolumn .navigation_page a{
background: #fff;
border:0px solid #fff;
color: #666;
}
.narrowcolumn .navigation_page a:hover, .narrowcolumn .navigation_page .utompage{
color: #4374b0;
background: #fff;
border:0px solid #fff;
}
.narrowcolumn .alignright {
float:right;
}

.narrowcolumn .postmetadata {
border-top:1px solid #fff;
border-bottom:1px solid #fff;
margin:20px 0;
padding:10px;
}

.narrowcolumn .postrss2 a {
background:transparent url("images/rss_big.png") no-repeat 0 0;
position:absolute;
width:80px;
height:80px;
overflow:hidden;
text-indent:400px;
line-height:200px;
margin:-5px 0 0 400px;
}

.narrowcolumn .postmetadata li {
line-height:23px;
padding:0 0 0 20px;
}

.narrowcolumn .postdatetime {
background:transparent url("images/time.png") no-repeat left center;
}

.narrowcolumn .postcategory {
float:left;
background:transparent url("images/folder.png") no-repeat left center;
margin:0 10px 0 0;
}

.narrowcolumn .posttag {
float:left;
background:transparent url("images/tag_blue.png") no-repeat left center;
}

.narrowcolumn .posttrackback {
clear:both;
background:transparent url("images/arrow_refresh.png") no-repeat left center;
}

.narrowcolumn .postedit {
clear:both;
background:transparent url("images/pencil.png") no-repeat left center;
}

span.ugr {
float:left;
width:50px;
height:50px;
border:0px solid #666;
margin:0 3px 3px 0;
}

.narrowcolumn h3#comments,.narrowcolumn h3#respond {
font-size:15px;
margin:10px 0;
}

.narrowcolumn ol.commentlist {
border:0px solid #666;
border-bottom:none;
margin:0 0 20px;
}

.narrowcolumn ol.commentlist li {
border-bottom:0px solid #666;
background:#fff;
padding:10px;
}

.narrowcolumn ol.commentlist li.alt {
background:#fff;
}

.narrowcolumn .commentlist .uar,.narrowcolumn .commentlist .uar a {
font-size:14px;
font-weight:700;
color:#333;
}

.narrowcolumn .spost,.narrowcolumn .commentlist p {
clear:both;
}

.narrowcolumn #comment {
width:80%;
}

My homepage is he
Code:

tonycai.com

As you can see my paragraphs doesn't break a line.

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?

Strange Problem With Block Element Spacing/positioning

Similar Tutorials

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.

Removing Line Break After List Items

Similar Tutorials

View Content

Anyway to remove the automatic line break after list items? I'd like to use styles to create roll-over effects in a menu I've used an unordered list to create that menu. But, I'd like a horizontal menu bar rather than a vertical menu column.

Thanks!
David Goldfeder

Any Way Of Making Sure Words/letters Break To A New Line?

Similar Tutorials

View Content

Hi all,

I've created a template in CSS and divs, but when someone puts a word like this_is_a_template - with no spaces in it, it breaks the left nav.

Is there any way of making sure words break once they get to the width of the leftnav, even when they don't have spaces in them?

Cheers.

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

Phpbb - Two Problems, Text Color And Line Break

Similar Tutorials

View Content

I am having two problems with a theme I have for PHPBB3. One problem is the text that you type into textboxes when making a new post, updating your profile, or a few other spots is white on a very light grey background; therefore, hardly showing up.

The second problem is that the page display a white line at the bottom of a few pages (but not others) and the line goes away if you resize the IE window smaller, but reappears again if you full screen it.

I know the first problem has to exist in the stylesheet.css file; however, I am not sure where to make these changes as I am not familiar with PHPBB stylesheets. If anyone could help it would be greatly appreciated. Thanks!

Forums: Click Here

Stylesheet: Click Here

Pictures of my problems:
Text problem-

Line Problem -

Valid <form> Without Line-break In Strict Xhtml/css

Similar Tutorials

View Content

I have a search box/button I want to keep on a single line in a tool bar on my page in strict XHTML/CSS. The <form> tag produces a line break beforehand.

In old HTML I could put the <form> tag outside of the table row or data tags, but XHTML does not allow that (bad nesting). I found in devshed here to use style="display:inline;" which works! But the page does not validate as strict XHTML/CSS (using validator.w3.org).

<table><tr><td> 
<form method="get" action="..." style="display:inline;">
<input type="text" name="q" size="10" maxlength="255" value="" />
<input type="submit" name="sa" value="go" />
</form>
</td></tr></table>

The Error and reason given is below. It seems that you can not have a block-level element (<input>) within in inline-level element (<form>).

***
document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
***

Does anyone know how to code this to not have the linebreak and still maintain strict XHTML/CSS code?

Last Line Of Block Extends To Right Margin

Similar Tutorials

View Content

Working on a project that has listing of physical features of frogs. In one listing, the text in the descriptions are in a block for which the last line extends to the right margin. Here is a sample of what the text looks like:

Code:

1. A weak tarsal fold; outer fingers one-third webbed; males having spiny
   nuptial tuberosities; color in life tan or brown with blotches or
   reticulations, never green; iris bronze color . . . P. euthysanota group--2
   No tarsal fold; outer fingers having only vestige of web; males lacking
   nuptial tuberosities; color in life green or brown; iris red or golden
   color  . . . . . . . . . . . . . . . . . . . . . .  P. schmidtorum group--5

My question is how to write the CSS to get only the LAST line of a block of 'justified' text to extend to the right edge. Also, if the user resizes the page, I don't want the right-aligned text to write on top of the left-aligned text. One of the biggest constraints is that it HAS to be done with CSS and not through javascript.

Thanks.