I have a code like
<span ><img src="xxx.png">Tab1</span><span ><img src="yyy.png">Tab2</span>
This code creates two tab but the only problem is that tab1/tab2 and image xxx/yyy are in same line.I want them to be in different line and i want both span element in same line.
The tabs should look like this
Float:left property of css would be beneficial in doing your work
You may be using the wrong element. <span> is use for inline content, whereas <div> may be better suited to what you're trying to do. You want them on a new line, but span is specifically created/used for non-line breaking items.
Try this:
<div><img src="xxx.png">Tab1</div><div><img src="yyy.png">Tab2</div>
More info on What is the difference between HTML tags <div> and <span>?
I take the markup for granted:
img { display: block; }
span { float: left; }
Related
Please, take a look to this piece of code:
<span class="something">
<label>test1</label><br/>
<label>test2</label><br/>
<label>test3</label>
</span>
This will create a vertical list of labels. Is possible to do this without the <br> tags using CSS? It is, is possible to show the same vertical aligned label list with this HTML code?:
<span class="something">
<label>test1</label>
<label>test2</label>
<label>test3</label>
</span>
You could do this:
span.something label {
display: block; /* as opposed to display: inline; */
}
This works because by default <label>s are inline elements. If you change them to display block they will display in a list with line breaks between them.
However this is probably a bad way to do what you want. What you really want is an unordered list:
<ul class="something">
<li>test1</li>
<li>etc...</li>
</ul>
To get rid of the bullet points:
ul.something {
list-style: none;
}
Or, without changing the contents of the span to block elements:
span.something label:after {content: '\A'; white-space: pre-line}
See http://jsfiddle.net/VsnKx/
Edit: Another way (if you don't mind floats) is
span.something label {float:left; clear:both}
which doesn't use :after, although it does use floats, which may be undesirable. You also will have to clear the first element after the span.
You can set display:block for the labels, which will adjust them to be displayed on a new line.
Example:
http://jsfiddle.net/niklasvh/eZ8t5/
It is possible. Use this css code:
span.something label{
display:block;
clear:both;
}
Yes, there are several ways, those mentioned in other answers as well as setting label { display: table-row}. However, there is no apparent reason not to use br tags or div containers or a table in HTML, if you want the labels on separate lines, and no apparent reason for wanting that (what is a label without an associated input field?).
I've been stuck on a float issue for a little while so I am hoping the community can help me again. I have a new webform here. As usual it looks fine in everything but IE7 (or IE8 in compatibility).
For some reason some of the containers are ending up with the form field on a new line below the form text. CSS is not my strong point, otherwise I'd be able to fix this I am sure. Can anyone tell me what I am missing here?
I tried adding float: left to the form text but that ended up with a whole other mess.
Try to small change markup: place items with a float before items without it (from the same row). It should help.
I know it's been a long time since this was posted, but I found a solution that I like for this. The gist is using 'expression' tag in your CSS for IE7 only to move the floated element to be the first element of the parent in the DOM. It will be semantically correct for all other browsers, but for IE7 we modify the DOM to move the floated element.
In my case, I have:
<div>
<h1></h1>...<p>any other content...</p>
<small class="pull-right"></small>
</div>
In my CSS for pull-right, I use:
.pull-right {
float:right;
*zoom: ~"expression( this.runtimeStyle.zoom='1',parentNode.insertBefore( this,parentNode.firstChild ))";
}
The result is that IE7 moves my <small> to be the first element of <div> but all other browsers leave the markup alone.
This might not work for everyone. Technically, it is modifying the markup but only in the DOM for IE7 and it's also a javascript solution.
Also, I understand there may be some performance issues with expression (it's slow), so perhaps it's not ideal there are a lot of floats like this. In my case, it worked well and allowed me to keep semantically correct HTML.
If you float your .formText left, float your span.required left, and then float your inputs left as well you should be able to line them up on the same line.
I'd modify your markup a bit. your <span class="formText"> should really be a <label>
For example:
<P class=formRow>
<label for="FirstName">First Name<SPAN style="FLOAT: left" class=required>*</SPAN></label>
<INPUT id=FirstName class=formTextbox name=FirstName>
</P>
and your css would be something like this:
.formRow {
clear: both;
}
.formRow label {
float: left;
width: 150px;
}
.formRow input {
float: left;
}
You could try to make the span tags you have for the text a fixed width, float them left, and do the same for the input field you want to correspond with. I'd also recommend using a label tag instead of a span tag on forms. No real solid reason for it, it's just that a label was meant for exactly what you have the span tag doing.
What you want to do is add a clear:both as the last sibling of your floated elements.
So something like:
<div style="float:left;">
<!-- children of div here -->
</div>
<div style="clear:both;">
<!-- leave empty -->
</div>
This question already has answers here:
Is putting a div inside an anchor ever correct?
(16 answers)
Closed 8 years ago.
I want to make a div click-able and but inside this <div> i have another <div> which also should be click-able or linked.
HTML
<a href="#">
<div class="box">
<div class="plus"><img src="aaa.jpg"/></div>
</div>
</a>
CSS
.box{
float:left;
width:100px;
height:100px;
}
.plus{
float:left;
width:30px;
height:30px;
}
Can i make both <div>s to link and for different links?
and Is this proper way use div inside a href ?
As of HTML5 it is OK to wrap <a> elements around a <div> (or any other block elements):
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
Just have to make sure you don't put an <a> within your <a> ( or a <button>).
No, the link assigned to the containing <a> will be assigned to every elements inside it.
And, this is not the proper way. You can make a <a> behave like a <div>.
An Example [Demo]
CSS
a.divlink {
display:block;
width:500px;
height:500px;
float:left;
}
HTML
<div>
<a class="divlink" href="yourlink.html">
The text or elements inside the elements
</a>
<a class="divlink" href="yourlink2.html">
Another text or element
</a>
</div>
This is a classic case of divitis - you don't need a div to be clickable, just give the <a> tag a class. Then edit the CSS of the class to display:block, and define a height and width like a lot of other answers have mentioned.
The <a> tag works perfectly well on its own, so you don't need an extra level of mark-up on the page.
Nesting of 'a' will not be possible.
However if you badly want to keep the structure and still make it work like the way you want,
then override the anchor tag click in javascript /jquery .
so you can have 2 event listeners for the two and control them accordingly.
I think you should do it the other way round.
Define your Divs and have your a href within each Div, pointing to different links
I would just format two different a-tags with a { display: block; height: 15px; width: 40px; } . This way you don't even need the div-tags...
In code we got from a "psd2html"-service, I see a lot of spans surrounding the contents of div-tags.
I know the difference between spans and divs, but I cant figure out why the code looks like this:
<div class="forgot-password">
<span>Forgot password?</span>
</div>
...
<div>
<span>Sign in</span>
</div>
Instead of just:
<div class="forgot-password">
Forgot password?
</div>
...
<div>
Sign in
</div>
I'm guessing its either some kind of cross-browser fix, or perhaps to "prepare" for the future if we want to put more stuff into the divs?
Edit:
Here is the CSS for the forgot-password part:
div.forgot-password
{
float: left;
width: 145px;
height: 22px;
margin-left: 3px;
}
div.forgot-password span
{
display: block;
float: left;
padding-top: 3px;
padding-left: 0px;
}
div.forgot-password span a
{
color: #C5C5C5;
text-decoration: none;
}
Although plain text can be "naked" in a div, some consider it good practice to wrap text content with an inline tag such as a span. This means you can separate out inline styles from block styling. With respect to your psd2html service, what you are seeing is an artefact of the conversion algorithm. Any algo is only going to have a finite set of rules. In this case I am guessing there is a rule like "wrap text in a span", and a rule like "wrap links in an a". In your example above, all your text content is a link, so you are seeing
<span><a..>text content</a></span>
From an HTML perspective, in this case the outer span is unnecessary. However it doesn't do any harm, and for styling purposes - unless you want to change the css - you need to keep them in.
To me it looks like overly complicated code. It would make sense if the code was:
<div class="forgot-password">
<span> some text </span> Forgot password?
</div>
So that you can discriminate text and links in CSS or jQuery.
Here we should look at the CSS to see what is done, but my first impression is that the span's could be removed since they add no semantic nor operational meaning.
To me, span has always been a way of quickly formatting text in a css compliant way. So I would suppose that they add spans to prepare for further formatting, but as no formatting is given, they don't apply any stylesheets, thus the span is "empty".
I'd say that these spans could as well be removed. They don't hurt in that case, but they don't have any use here.
It looks like these are buttons being marked up here, so it might be used for the Sliding Doors technique, so you can have two background images, so that if the content grows, you'll still have nice corners. It's probably just something they do on all things which look like buttons, but they might not use it to its full potential everywhere.
I am essentially trying to create a version of the "figure" element (upcoming in HTML5), whereby I have an image with a short description below it.
However, I want to limit the width of this entire element to that of the image, so the text isn't wider than the image (wrapping to multiple lines if necessary).
Basic HTML:
<div class="figure">
<img src="..." alt="..." width="..." height="..." /><br />
A description for the image
</div>
I'm well-versed with CSS but I can't think of any pure CSS solution, without adding a style="width:100px" to the div to match the image width.
Update: After a bit of searching and thinking, the best method seems to be using an inline width on the div. I will keep the width attribute on the image, in case I wish the div to be a bit wider than the image (for example to accomodate a longer caption).
This approach also means I could have two images side-by-side with a caption below. If I have a set of images the same size, I can of course add an extra style to each div.
Thanks to everyone who answered!
This could also be accomplished using 'display: table-caption' for the caption, as follows:
HTML
<div class="wrapper">
<img src="image.jpg" />
<div class="caption">My caption...</div>
</div>
Stylesheet
.wrapper {
display: table;
}
.caption {
display: table-caption;
caption-side: bottom;
}
This block can also be floated left of right of other text. I've tested this in IE8+. Here's a JSBin example: http://jsbin.com/xiyevovelixu/1
For setting the width to match the image automatically you could use
.figure {
display: table;
width: 1px;
}
This makes the div behave like a table (not supported in Internet Explorer). Or you could use a table instead of the div. I don't think there is another way of setting the width automatically.
Edit: The simplest way is to forget about the auto width and set it by hand. If it is really needed you can use JavaScript or a table. In this case the use of a table is not so ugly because you are addressing a limitation of the HTML version. In the case of server-side scripting you could also set the width when generating the page.
Stylesheet
div.figure img,
div.figure div.caption {
width: 100%;
}
div.figure div {
overflow: hidden;
white-space: nowrap;
}
note: to enable wrapping just remove that last css line
HTML
<div class="figure" style="width:150px;">
<img src="logo.png" alt="logo" />
<div class="caption">A description for the image</div>
</div>
I've checked it in Chrome, Firefox and IE7 and it looks good in all three. I realise this has the width on the div and not the img, but at least you only need to set the width in one place. Short of using css-expressions (IE only) I can't see a way of setting the outer divs width to the width of the first child element.
I had the same problem and after reading this decided to use an inline-style on the surrounding element. Seems the better solution over using a table to me.
You can also acheive this using the following solution proposed by Temani Afif in his blog post (All credits to him, I just don't want the solution to be forgotten)
<div class="box">
<img>
<h1>Lorem ipsum dolor ..</h1>
</div>
.box {
display: inline-block;
}
h1 {
width: 0;
min-width: 100%;
}
Make the container inline-block, and makes the h1 (or whatever text tag you use) occupy the space dictated by the sibling element. It's essentially a hack, but it works! No unintended semantic consequences like the table solutions
You could use the display:table solution for all other browsers, and a CSS Behaviour for Internet Explorer.