We help IT Professionals succeed at work.

CSS class forcing new line

tru504187211
tru504187211 asked
on
Medium Priority
904 Views
Last Modified: 2012-05-06
I have one line of code...

<a href="home.php" class="maintextsmallwhite">HOME</a><div class="maintextsmallwhite">|</div>

and the | after the link, I want on the same line of code, but it goes below the actual link.  Why is this and how can it be fixed?
body {
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 0px;	
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
}
 
 
.maintext {
        font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
	vertical-align: top;
}
 
.maintext_midsize {
        font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	vertical-align: top;
}
 
a {  font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	font-weight: bold;
 
	text-decoration: none;
 
  }
 
 
 
.maintextsmallwhite {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #ffffff;
	vertical-align: top;
}
 
a.maintextsmallwhite:Hover { 
 
font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #ffffff;
	vertical-align: top;
	
}
 
 
.maintextsmallblack {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	vertical-align: top;
}
 
 
 
.subtopictext {
        font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #7b7b7b;
}  
 
a {  font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
	font-weight: bold;
 
	text-decoration: none;
 
  }
 
a:hover {  font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
	background-color: #FFCC33;
 
	
 
  }
 
div#main h1 {
	margin:10px 0 0 7px;
	padding:0;
	width:98%;
	text-align:left;
	font-size:25px;
	color:#333;
	border-bottom:1px dotted #003300;
	font-weight:normal;
}

Open in new window

Comment
Watch Question

Here you go, you need to float those suckers.

 
.maintextsmallwhite {
      float:left;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #000;
        vertical-align: top;
}

PS - I would HIGHLY recommend you these in your body {  } parameters (that way you can remove the many redundant phrases and clean your code up a bit:

font-family: Arial, Helvetica, sans-serif;font-size: 12px; color: #000000;
 

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
BTW, I think I know what your doing, but your going about it the wrong way...

please take a look at this site that I am currnetly building for a client:

http://equinoxits.com/home.php

look at the footer.  I am using \ where it looks like you want to use | .  Same thing really. Feel free to look at/use/copy the code all you want.  Here is the CSS:

http://equinoxits.com/style.css

just do a search for FOOTER in the css and that will bring you to the area you'r looking for

Rich

Commented:
instead of div use a span, it is the correct for this situation


remove: <div class="maintextsmallwhite">|</div>

use: <span class="maintextsmallwhite">|</span>

Commented:
hi you need to float the .maintextsmallwhite class, so that the next element will 'float up' next to it

also you need to add a new class that targets just the div so you can display it inline, this stops it pushing in width all the way to the right of the page, you could specify a width instead.

presuming you are going to have a list of horizontal links, i added some padding around the |

.maintextsmallwhite {
          font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #ffffff;
        vertical-align: top;
        float: left;
}

div.maintextsmallwhite {
   display: inline;
   margin: 0 4px 0 4px;
}

Author

Commented:
Thanks for the help!  I'll take a look at your code example from your second post eventually! THANKS!
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.