Jump to content
piano0011

how to make the following div class in the same line

Recommended Posts

Hey guys!

I am trying to make certain information bold and have created a div class for those elements, named information but it is displayed on the next line, instead of at the end of the same line: Here is my php and css code:

echo '<div class="update_text">';
                                 echo 'Your premium membership subscription plan A is: <div class="information">'.$row['subscriptionplan'].'</div>';
                                 echo '<br></br>';
                                 echo 'Your premium membership date of subscription for subscription plan A is: <div class="information"> '.$row['subscriptionplandate'].'</div>';

CSS code:

div.information {

  font-size: 16px;
  font-weight: bold;
}

image.thumb.png.3ffd674182846b7ff78d7765a34a4b02.png

Share this post


Link to post
Share on other sites

I can get it to work by doing this but I thought it would be possible to do this in CSS

 echo '<br></br>';
                                 echo '<div class="update_text">';
                                 echo 'Your premium membership subscription plan A is: <b>'.$row['subscriptionplan'].'</b>';

 

Share this post


Link to post
Share on other sites

DIVs not doing a good job of hammering in those screws, huh? Wherever you learned to throw DIVs at your problems, forget it and never go back again.

You want bold? Use a <b> or <strong>. It's not the best markup to be sure, but where you are now you should focus on learning one step at a time.

Share this post


Link to post
Share on other sites

There's an intrinsic difference between divs and spans. Divs don't display inline unless specifically told to do so, while spans do. So in a case such as this, you'd use a span element instead of div. In this specific case, you'd listen to requinix and use a strong tag as it's semantically and structurally correct.

Share this post


Link to post
Share on other sites

thanks and I got it to work using the span element but just wondering how i can get it to work with div?

Edited by piano0011

Share this post


Link to post
Share on other sites

I may be wrong here but I don't think so.  When you use a class name such as in your use of 'information', you don't then reference it in your css as "div.information".  You need to define the 'information' class itself, not as a reference to the div tag's contents.

Share this post


Link to post
Share on other sites

I think I understand now.. roughly, I have to display it as inline block with a div class and it does work!

Edited by piano0011

Share this post


Link to post
Share on other sites
17 minutes ago, ginerjm said:

I may be wrong here but I don't think so.  When you use a class name such as in your use of 'information', you don't then reference it in your css as "div.information".  You need to define the 'information' class itself, not as a reference to the div tag's contents.

Either option is technically correct.

https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

Share this post


Link to post
Share on other sites
31 minutes ago, piano0011 said:

thanks and I got it to work using the span element but just wondering how i can get it to work with div?

You would need to modify the display property of the <div> tag. For example,

div.information {
  display:inline;
  font-size: 16px;
  font-weight: bold;
}

More information can be found here:

https://css-tricks.com/almanac/properties/d/display/

Share this post


Link to post
Share on other sites

You would be mis-using html tags if you "forced" it.  That comes from a lack of learning about html as well as css.  As already mentioned though not driven home, there are inline elements (span for one) and there are 'box model' elements (div for one).  Use the appropriate instead of coming up with complex styling that makes it look like you want it to look.  If you have a piece that you want to re-style without losing your current 'position', then you use a span tag/element.  When you want to group a set of things in one place and be able to move it intact to a specific place you use a div tag/element and add a class or id attribute to it to link it to some css that controls how it appears on your page, ie, things such as border, size, location, relative location, spacing, color, text size and more.

While my previous point on this was deemed to be 'technically' correct here is how most css is coded.

You have a design element in your html such as a div box so you write it as such:

	<div class='main_box'>
	<p>asdl;fkjasd;lfkjasdf</p>
	<p>asd;flkjasdf;lkjasd;flkjasdf;lkj</p>
	</div>
	

Now you define that class in your css section as such:

	<style type='text/css'>
	.main_box
	{
	    position:relative;
	    float:left;
	    width:30%;
	    margin:1% 3% 1% 10%;
	    padding:10px;
	    border:1px solid black;
	    text-size:1em;
	}
    </style>
	

Now you have created a design template (basically) called 'main_box' which is a Class.  You can assign it to any div tag that may add on later and it will appear the same.  A more complex design may force you to take some elements out of this template and leave the basic design to be used by multiple items and place the removed items in their own class definition as well as alter some of those items and create a second class definition and then use the new classes as additional ones added to your html tag.  For ex.   You may want to alter the border on the main_box to something else for a second box.  Take the border out of this definition and create these:

	.yellow
	{
	    border:1px solid yellow;
	}
	.black
	{
	    border:1px solid black;
	}
	

(Remember to remove the border attribute from the .main_box definition)

In your html you alter the original div tag like this:

	<div class='main_box black'>
	

and create your new box

	<div class='main_box yellow'>
	(new stuff for the yellow box)
	</div>
	

What you will end up with is two boxed the same size next to each other one with a black border and the other with yellow.  They will be spaced by the margin settings.

Seems like a lot of work but if you don't start trying to understand and use things properly rather than bastardize them and force things to work, you will never do well at this.  And I won't even try to tell you how much you will hate yourself months later when you try to modify your work (having hopefully learned something by then) and are pulling your hair out while cursing your own stupidity.

 

Edited by Barand
Change <script> tags to <style>

Share this post


Link to post
Share on other sites
1 hour ago, ginerjm said:

You would be mis-using html tags if you "forced" it.

For what it's worth, I agree that in this particular example it would be better to use an inline element like the <b> or <strong> tag. However, it is worth knowing how to make a block elements act like inline elements and vice versa. When building mobile-friendly websites, for example, you may want certain tags to act one way on a mobile platform and a different way on non-mobile.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.