i have this page:
login: maria#mail.com
password: m
I want to have the string "Editar mi perfil" aligned on the right, so i have added:
text-align: right
but it doesn't work,
I have tried also:
float:right
It works but goes a bit upper than I want.
Any idea?
Regards
Javi
The problem is the display:inline. Remove it (and perhaps the top margin, if you don't want it), and it should work.
use <div> instead of <p>
<div style="float: left;">
<h2 id="nombre_apellidos">Maria Galindo Alvarado</h2>
</div>
<div style="float:right;padding-top:0px;" id="editar_o_mensaje">
<a id="enlace_editar_perfil" href="/rs2/web/miembros/edit/id/2">Editar mi perfil</a>
</div>
Change proper padding-top:0px; to align
Adding float: right; padding-top: 5px; in enlace_editar_perfil seems to fix it in Firefox. The padding-top will push it down to the position you want it.
Related
I want to have "This is a test" left aligned and "[Rare photograph]" right aligned but still be on the same line.
I'm a newbie at HTML5, so a simple explanation would be appreciated.
Thanks! :)
<p style = "margin-left:75px;max-width:750px;"><br/>
This is a test.
[Rare photograph]
</p>
You can't do that without an additional tag, but what you can do is inject a <span> tag within a <p> tag, and give each <span> a respective float: left and float: right:
<p style="margin-left: 75px; max-width: 750px;">
<span style="float: left">This is a test.</span>
<span style="float: right">[Rare photograph]</span>
</p>
Hope this helps! :)
I have a problem with the floating. I'll try to explain my problem. What I have is 6 menu bars I want to float. 3 on the left and 3 on the right. However I want the ones on the right to come after the 3 on the left. As in they are no higher than the bottom of the last left one. Similar to the picture someone else had (Credit goes to the topic here
However instead I am getting all of the bars in the same rows like so.
I have provided ALL CSS proporties below. Can anyone figure out why I can't get it the way I wanted? (The bar-groups go inside the gameplay-info-content)
#gameplay-info-content {width: 688px;}
#bar-group-left {float: left; margin: 8px;}
#bar-group-right {float: right; margin: 8px;}
HTML:
<div class="leftcolums">
<div class="left">1</div>
<div class="left">2</div>
<div class="left">3</div>
</div>
//If you want to achieve the first image add a div with class clear below
<div class="clear"></div>
<div class="rightcolums">
<div class="right">4</div>
<div class="right">5</div>
<div class="right">6</div>
</div>
<div class="clear"></div>
STYLES:
.leftcolums{float:left;}
.rightcolums{float:right;}
.clear{clear:both;}
I have the following alignment:
<div class="main">
<div class="header"></div>
<div class="right-bar">
<div class="chat-user-content">
<span class="chat-user-photo">
<img src="http://d13yacurqjgara.cloudfront.net/users/25963/avatars/mini/2013-avatar_(1).png" />
</span>
<span class="chat-user-name">Fulano Silva</span>
<span class="chat-user-status"><img src="http://www.colorhexa.com/a7ba3d.png" /></span>
</div>
</div>
</div>
.chat-user-status > img{
border-radius: 50%;
height:15px;
width:15px;
}
But I can not align the <SPAN> "user-chat-status" right without using an image. I would like the image that appears in green, were a <DIV> or <SPAN>. What am I doing wrong?
JSFiddle
Check this fiddle out: http://jsfiddle.net/3PduX/18/
I put display:block to the span, which i think may have been what you missed.
Radu Chelariu's idea was even better though. I smashed a working example together without having to use the extra span, check it out here: http://jsfiddle.net/3PduX/22/
It uses the :after pseudo element.
If you are using two divisions one after other, you can use clear:both; in current div.
If you want to align the div to right,you can use .
I hope it will work.
Pish, posh. Images for UI are silly. That's why we have pseudo-elements!
Basically, you just have to replace your image with a :after or :before and style that accordingly. Here's a JSFiddle to illustrate:
http://jsfiddle.net/sickdesigner/N99j3/
Cheers!
I have this html:
<div class="speaker-list">
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">
Keith Anderson
</span>
</div>
<div class="views-field views-field-field-job-title">
<div class="field-content">VP, Digital Advisory</div>
</div>
<div class="views-field views-field-field-company">
<div class="field-content">RetailNet Group</div>
</div>
<div class="views-field views-field-title-1">
<span class="field-content">
Store of the Future
</span>
</div>
<div class="views-field views-field-field-headshot">
<div class="field-content">
<div id="file-53" class="file file-image file-image-jpeg contextual-links-region">
<div class="content">
<img typeof="foaf:Image" src="/kanderson.jpg" width="180" height="180" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It's dynamically generated by a Drupal view, so I can't change the output html at all. I need to work with what is here. Here's the desired result:
Without any styling on the headshot, this is what it looks like:
I tried to style the image to force it to float to the left of the text:
.view-speaker-list div.view-content div.views-row div.views-field
div.field-content div.file-image div.content img {
border: 1px solid #666;
float: left;
position: relative; /* tried with and without position (inc. absolute) */
left: 30px;
}
Obviously I'm doing something wrong, because this is what I get (with relative position):
and with absolute position:
I've also tried putting the float on the "uppermost" div class that holds the image, with no position on the div:
.view-speaker-list div.view-content div.views-row
div.views-field-field-headshot {
float: left;
}
It gives the same result as the position: relative screenshot.
Where am I going wrong? If I had control over the html I'd do it differently, but I'm not sure how to deal with all of these nested divs.
EDITED TO ADD NEW SCREENSHOT FOR #WEX
Here's what it looks like when I tried to use your code with the html reordered - http://jsfiddle.net/mPa7z/
I'll try to explain the "right" way to use float so that you can see why your way didn't work.
In your post, you try to apply float: left to the <div> surrounding your image, but that technique only works when the element you are floating is above all the elements you want to wrap around it. That "may" solve your problem, but that technique has it's pitfalls if you're trying to use it to create two distinct columns - if the text on the right is taller than the floated element, the text on the right will wrap below it. So then you have to add another container around your non-floated elements to ensure that it won't wrap. This solves your problem, but doesn't really help if you can't even edit your markup!
I'd argue that the technique I've posted below works better, and solves your problem: http://jsfiddle.net/Wexcode/AQQwX/
.view-content {
position: relative;
min-height: 180px;
padding: 0 0 0 180px; }
.views-row { padding: 20px 0 0 20px; }
.views-field-field-headshot {
position: absolute;
top: 0;
left: 0; }
If you have access to the View itself in Drupal, you can reorder the elements. When logged into Drupal, open the View (in Drupal 7: Structure > Views > Viewname), look for "Fields" and click on the triangle next to "add", which will have a popup, then click "rearrange". You can then drag the photo field to be the first item in the View, then adjust your CSS to float the image to the left.
EmmyS,
Instead of trying to get the headshot to float:left, have you considered making the others float:right? This will give the impression that the image is floating left without having to change the markup in any way.
div.speaker-list div.views-row > div.views-field {
float:right;
clear:both;
}
div.speaker-list div.views-row > div.views-field.views-field-field-headshot {
float:none;
clear:none;
}
The above CSS should work with that specific configuration without altering any of your other Drupal generated markup. In order to make sure that other CSS does not interfere, I've applied as much specificity as possible. Since the headshot will be back in the containing <div>, you shouldn't need to alter the size of it unless the store is simply too large (I don't know without looking at your data). Finally the CSS is concise, so you can add any additional styling you need on a per-element basis.
Hope this helps,
FuzzicalLogic
When you can drop somewhere else on the page some code, you can gain control over the HTML by using jQuery. Then you could make modifications to the DOM tree.
But I do not understand why you can not edit the HTML. Isn't Drupal open source? You should be able to find the file using FTP and manipulate it.
I have the following code:
<div style="float: left; width: 100%;">
<label style="float: left;">ABC</label>
<input style="float: left; font-size: 0.5em;" type="button" onclick="addTiny(0,'Question_Text'); return false;" value="▼" title="Editor" />
<input style="float: left; font-size: 0.5em;" type="button" onclick="remTiny(0,'Question_Text'); return false;" value="▲" title="Hide" />
<div class="adm">
<textarea rows="2;" style="width: 100%" class="text-box multi-line mceEditor">
abc
</textarea>
</div>
</div>
My problem is that the div with class adm floats to the left and so goes on the same line as the label and two input buttons. Is there a way that I can make this shift away from floating?
A standard approach is to add a clearing div between the two floating block level elements:
<div style="clear:both;"></div>
Sometimes clear will not work. Use float: none as an override
You could modify .adm and add
.adm{
clear:both;
}
That should make it move to a new line
add style="clear:both;" to the "adm" div.
Okay I just realized the answer is to remove the first float left from the first DIV. Don't know why I didn't see that before.
You should also check out the "clear" property in css in case removing a float isn't an option
The css clear: left in your adm class should stop the div floating with the elements above it.
For some reason none of the above fixes worked for me (I had the same problem), but this did:
Try putting all of the floated elements in a div element:
<div class="row">...</div>.
Then add this CCS:
.row::after {content: ""; clear: both; display: table;}
Just add overflow:hidden in the first div style. That should be enough.
There's a class in bootstrap for it
class="clearfix";