I would like to set two images inline with CSS, but the CSS should be in the HTML element, not in a separate style.css file.
Like this :
<ul style="display: inline">
<li>image</li>
<li>image</li>
</ul>
I would like to add more images on this page http://www.top20broker.com/eco-calender/ beside the video corner image.
If you want to set two images in one line you can do it as follows:
<div style="display:inline"><img src="pic1.jpg" /></div>
<div style="display:inline"><img src="pic2.jpg" /></div>
The first image should be rapped in a div element with display: inline.
if what you need is to have two images side by side in the same line, if the container is large enough you shouldn't need any special code because IMG tags work like an inline-block element.
<img src='http://placehold.it/250x130'>
<img src='http://placehold.it/250x140'>
Related
Here is my jsFiddle with full code example.
I am trying to achieve the following to no avail:
I want the glyphicon-globe to appear centered and above the "Community" label (<h1>), and I want all three elements (the glyphicon, the <h1> heading and <h3> subheading) to be horizontally-centered in the middle of the screen
I want the "Community" label to appear with the correct font (see what happens when you remove the glyphicon...)
I have a feeling that the glyphicon is causing both problems:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1><span class="glyphicon glyphicon-globe"/>Community</h1>
<h3>A free online community to all new fizz-comers.</h3>
</div>
</div>
</div>
Perhaps this is malformed somehow or causing weird CSS rules to fire. Any ideas?
span tags shouldn't be self-closing. Here's a better explanation.
This updated example should style the heading and icon the way you want. By center aligning the text in the H1, the span inside it will also center (if set to display: block). The H1 will take the full width of the container element - setting it to display:inline-block is to make this example look better.
<h1 style="text-align: center; display: inline-block;"><span class="glyphicon glyphicon-globe" style="display: block"></span>Community</h1>
I am facing with a problem that my top menu overlaps the body. When actually menu must be placed above body.
I've already tried display: block; but it didn't help
Can you look trough it please ?
Here my Demo
Okay, try this. Give the menu div
style="display:table;"
and hope it will solve your issue. Before it doesnot assume any space for div itself, but only for the content and the main div occupies the space right from the top.
Here is the fiddle. I have given there inline css. But I suggest to define a class for menu and put the css in there.
Have you created a container div for the entire page? And then have a background div and a separate menu div?
<div id="page_container">
<div id="background"> Background code
<div id="menu">Menu code
</div>
<div id="body_content">Content in body code
</div>
</div>
</div>
I am kind of new to css and trying to create a layout that presents a list of books. Therefore I want to display a cover image (represented by a fixed width div in the fiddle) at the left side of a two column layout. To the right of the cover I want to present information about the book: The title and an ordered list which has property-value items.
These items should fill the remaining part of the width. The property and its corresponding value should be placed on the same line.
One of the property value items also contains a button, which is just represented by a span here. The button should be placed in the same line right after the property.
I have run into several problems, which I couldn't sort out so far:
The property list is not formatted correctly. I guess that is because I haven't been able to configure the containing list item to extend to the full width. In the end a property value item should be displayed on the same line.
The Title is underlined and I would like to see that underline extend to the full width of the body. Currently it is truncated and I haven't been able to figure out a way to make that happen.
I have created a fiddle, which should show the problems: http://jsfiddle.net/7Xeb7/3/
This is my basic html structure:
<body>
<ul class="book">
<li>
<div class="cover"></div>
</li>
<li class="bookdetail">
<div class="title">Title</div>
<ol class="attributes">
<li>
<span class="property">property <span>btn</span></span>
<span class="value">value</span>
</li>
<li>
<span class="property">property</span>
<span class="value">value</span>
</li>
</ol>
</li>
</ul>
</body>
Short Answer
Your HTML is somewhat more complicated than necessary and makes unorthodox use of list elements for things that aren't really lists. Simplifying it would make styling the page easier. I have done so in this jsFiddle, where I think your problems have been taken care of by absolutely positioning .cover and adding appropriate padding to .bookdetails: http://jsfiddle.net/7Xeb7/10/. (Edit: new jsfiddle reflects comments)
Long Answer
As much as possible, the HTML tags you use should be semantically-related to the content they represent. So use ul or ol for lists of things, use img for images, and use heading tags (h1, h2, etc.) for headings. There's no need to use tables here (which are generally frowned upon for layout since they violate this semantic logic). Here I've preserved your structure and CSS classes but used more logical tags:
<div class="book">
<img class="cover" src="" alt="Book Title Here" />
<div class="bookdetail">
<h2 class="title">Title</h2>
<ol class="attributes">
<li>
<span class="property">property</span> <!-- this span wasn't closed before! -->
<span class="button">btn</span></span>
<span class="value">value</span>
</li>
<li>
<span class="property">property</span>
<span class="value">value</span>
</li>
</ol>
</div><!-- /.bookdetail -->
</div><!-- /.book -->
Once the HTML has been cleaned up you can more easily make the necessary CSS changes. Your main issue is getting .bookdetail in the right place. It's hard at the moment because you're trying to balance a fixed-width element (.cover) with a variable-width element (.bookdetail) that you want to take up the whole of its container - except for the fixed-width element.
This can be solved fairly easily by absolutely positioning .cover, so it no longer has any effect on the positioning of other elements in .book. Then you can just set the padding of .bookdetail to 0 0 0 140px - which is automatically relative to the most recent parent element with a specified position, which I've made .book. So .bookdetail expands to fill book like you want, but the right padding (or margin, if you prefer) means that it doesn't overlap with the cover image.
I've also made a few other CSS changes, visible in the jsFiddle, to make .title display better and to accommodate my HTML changes, but they're not directly relevant to solving your main issue so I'll leave them there.
I have changed your layout accordingly using div and tables
<div class="leftColumn">
</div>
<div class="rightColumn">
<div class="header">
Title
</div>
<div class="content">
<table width="100%">
<tr><td>Property1<td><td>Value</td>
<tr><td>Property2<td><td>Value</td>
<tr><td>Property3<td><td>Value</td>
<div>
</div>
and css
.leftColumn
{
float:left;
width:30%;
height:250px;
background-color:red;
}
.rightColumn
{
float:right;
width:70%;
height:250px;
background-color:green;
}
.header
{
font-size:25px;
padding:15px;
height:30px;
verticle-align:middle;
border-bottom:1px solid #ccc;
}
have a look here
you are missing width attribute for dimensions but not sure if this is how you want to see it:
http://jsfiddle.net/Riskbreaker/7Xeb7/4/
I added width: 100% on you bookdetail class
.bookdetail {
vertical-align:top;
display: inline-block;
width: 100%;
}
I am trying to insert an image along with text. when i insert the div, it puts the image on the next line. the div has a background image set to it. here is my code:
Chat Rooms <div class="dot"></div>
the text is aligned by center.
Use float with right or left options
Chat Rooms <div class="dot" style="float: right;"></div>
Browsers always place a line break before and after the element.
http://www.w3schools.com/tags/tag_div.asp
So you have to use the float attribute to get the desired result:
<div class="dot" style="float: left"></div>
Alternatively, you can do:
<p>Chat Rooms <img src="link to your image" alt="altext" /> </p>
you can do this way-
<div><span style="float:left;">chat room</span> <span class="dot"></span>
<div style="clear:both;"></div></div>
If I understand your problem correctly, your <div> goes to a new line because div tags, by default, have a display: block; property which tells them, put simply, to go on their own line and leave anything that is around them above or below themselves.
To correct this issue, you can either apply this bit of CSS to your document:
.dot {
display: inline;
}
Setting the div's display property to inline (and giving it a width and height alongside) should allow it to sit on the same line as the content that is around it. However, I suggest that you instead use an <img> tag, which already presents the correct behavior for cases such as yours.
For reference about the <img> tag, visit this link:
https://developer.mozilla.org/En/HTML/Element/Img
I have 2 links and each of them have style="float:right" . I have another div element in between these two links.
Now , in IE7 , the 2 links are displaying properly whereas the div in between is pushed to the left.
Here's the code :
<a style="float:right" href="javascript:exportqueryresulttocsv();">Export Query Result to CSV</a>
<div style="overflow:auto">
<!-- I have a table displaying a report here -->
</div>
<a style="float:right" href="javascript:exportqueryresulttocsv();">Export Query Result To CSV</a>
What is the problem in positioning these divs?
Are you wanting it look like this?
http://jsfiddle.net/8NTt3/10/
if so float all the items to the right, but use a clearfix between each element. eg
<div style="clear:both"></div>
so float them all right, they should align evenly