I'm struggling to get the text of a rotating banner (the text in red) aligned to the right (to the left of the social icons). It would be too long to post the code here so here is a link where you can see it in action (note that I'm using modern-ticker plugin).
I suspect that this could come from the below code (part of modern-ticker.css) but when I change it to float: right the text disappears. I also tried text-align: right at various places without success. Thanks for your help!
.mt-news li {
float: left;
}
Floating elements get as wide as their content, so you need to specify it in order to be as wide as the container (in this case the container is very very wide but the visible area is 400px wide).
.mt-news li {
width: 400px;
}
More changes
In this example, you don't really need the parent to be very wide and the lis to float because you're fading them in a way that they're not displayed at once. I would recommend:
Remove width: 50000px; from ul
Remove float: left; from li
Remove float: left; from .mt-news
That is if the real live situation won't be different from this example.
Related
I've setup a vertical set of tabs as outlined here. However the content area only extends about halfway across the page.
I've been trying to adjust the CSS to allow it to flow to the far edge of the page by adding width='100%' attributes to various UI CSS-tags or playing the built in width attribute values and it does extend the window but it starts putting the actual content in the wrong place.
For example if you remove the width: 55em from .ui-tabs-vertical the white container area does extend fully but the 'hello' text appears in the following spot:
How can I adjust the CSS to allow the content area to full the page width but still start at a nicely padded left side of the vertical tab list?
JsFiddle example
If setting width might fix it, try doing this one :
width: calc(100% - 162px);
162px is what I assume the width of the left sidebar.
Changing the .ui-tabs-vertical .ui-tabs-panel rule from
.ui-tabs-vertical .ui-tabs-panel
{
padding: 1em;
float: right;
width: 40em;
}
To float: left
.ui-tabs-vertical .ui-tabs-panel
{
padding: 1em;
float: left;
width: 40em;
}
Appears to work as expected.
I'm wondering why adding a "width" element to a box is destroying the effect of "float".
For example, when I have
.login form {
float: right;
background-color: green;
}
All elements shifts to the right and the background color only encircles the elements that are there (it does not create a green bar at the top of the screen as I want). I figured I could ameliorate this problem by setting a width,
… width: 800px; …..
but although I get a green by striping the top of the screen, all of my box elements seem to float to the left, so I have a green bar with login elements at the left and not the right.
Could someone please tell me how to take my .login box element, justify all of the five attributes that it has to the right (textfields, boxes, and a button), and still have a green bar at the top of the screen even where there is just blank space.
trying it with padding-left:(something px) ; instead of width: 800px; will probably fix this problem
What is likely causing this problem is that you're using the full capacity of the overlaying div, this makes it useless to float-right since there is nothing left to float away from
You can even put to the container: overflow:auto; or you can you the clearfix method found here.
I am working on a landing page, and this is how it looks at the moment: https://a00baa69ca400642fad5c0cead23ef741b6473f7.googledrive.com/host/0B9XEA2QvXeaQZmdGcW1kVk9Kajg/main.html
Here is the wireframe: http://static.squarespace.com/static/52228ba5e4b02da2a90a906c/t/529bc6f9e4b09eb80192c1ae/1385940737162/Good%20Collab.jpg?format=1000w
For the landing page, I was able to get the three photos to align regardless of the width of the viewer's monitor size by setting up max-width and margin to auto.
** Here is the CSS used for the three photos:**
.three-containers {
max-width: 1080px;
margin: auto;
display: block; }
However, I wasn't able to set the section below the three photos to center side by side (i.e. the How it Works part and the form). I tried applying similar code as I did to the three photos - I set a div up for each of them (one div for How it Works and another for the form)
div class="two-texts" for the HOW IT WORKS PART and another div class="two-texts" for the FORM PART
and CSS:
.two-texts {
max-width: 900px;
margin: auto;
display: block;
clear:left;
}
Problem is now the form is aligned under the How it Works part when I actually want it side by side with the How it Works part (see link to wireframe at top).
Can anyone point out what the issue might be? Thanks.
Welcome to StackOverflow!
In HTML, some elements default to stacking horizontally and some vertically. divs are designed to stack vertically by default because they have their display property defaulted to block. Try the following CSS style to see what happens to the three divs with images:
.three-containers > div {
display: inline-block;
max-width: 300px;
}
(the max-width is there because of the images those divs contain)
Similarly, to make the two divs stack horizontally, try the following CSS:
#bodytext, .form {
display: inline-block;
}
Let me know if that helps you get on the right path!
i am having trouble center aligning images.
The images should stay in center never mind what size your screen is.
the problem is that the images are only center aligned until a specific size. my screen is quite small so they're perfectly centered, but when i go down to %75 the images are already not center aligned wich makes everything ugly.
i'm going to save you from spamming my code here, so just view the source of this page.
Thank you for reading :)
You're wrapping the images in a span8 offset2 div, which isn't designed for keeping them centered, but for keeping the element at a set width/left-offset.
Trying setting that parent div like so:
#showcase .row-fluid > div { margin: 0 auto; width: 612px }
Your code is pretty close already, since your .head divs are already inline-blocked, and your #header is text-align: center. What you'll want to do is remove the offset2, and change the span8 to a span12 so it encompasses the entire width.
The div holding the images needs to have
margin: 0 auto;
and the image blocks need to have:
float: none;
display: inline-block;
I have seen this in your CSS and HTML code, if you remove it(CSS only) will stay in center.
HTML
<div class="span8 offset2">
</div>
CSS
Before
.offset2:first-child {
margin-left: 17.094%;
}
After
.offset2:first-child {
/* margin-left: 17.094%;*/
}
I have a two column layout. If a certain screen size is met they break so that everything will be shown in one column. That is why the ordering of those elements is important to make sure that the proper elements are shown first when viewed with a smaller screen.
The issue with this set up is, that the second "to be made sticky" aside-element is not properly floating right, but instead some where in between.
see in action: http://jsfiddle.net/zn3qz/
.main {
width: 60%;
margin-right: 5%;
float: left;
}
aside {
width: 35%;
float: right;
}
<section class="main">Header</section>
<aside>picture</aside>
<aside>to be made sticky</aside>
<section class="main">List of things</section>
Depending on your requirements, here's another variation: http://jsfiddle.net/panchroma/TtT6h/
The only real change I've made is to the CSS where I've added
aside{
clear:right;
}
This ensures that the second aside clears the first aside and can slide completely to the right.
Hope this helps!
For something like this jquery is very help full. You can get the window width and based on that width you can edit the css to make one column or two.