Please see my jsfiddle example below.
Can anyone figure out what I am doing wrong here?
I am attempting to use a third party plugin called Smart Wizard it all works except for this one aspect as shown in the jsfiddle.
The [X] is on a new line, it should be directly to the right of the error message.
http://jsfiddle.net/jamesjw007/4wJv4/1/
just add
.content { width: 90%; float: left; }
example fiddle: http://jsfiddle.net/4wJv4/9/ - Adjust the width of content element as you prefer
Try adding this to the Stylesheet..
It worked..
.swMain .msgBox .close {
float: left;
}
You have to float all the elements to
the Left in the same tag to get the
elements to be in One line.
Just the "float" will do..
You need to float the content div as well as the close icon. In addition to this, you might want to float the close button to the right of the message box as opposed to immediately after the text.
.swMain .msgBox .content { float:left; width:auto; }
.swMain .msgBox .close { float: right; }
I've updated your fiddle with these changes - http://jsfiddle.net/4wJv4/19/
Related
I have some CSS problem. On the website http://astrazlata.rs/ on the accordion section "Finansijski izveštaji", how can I make text inside that section center on the page, so that is not align to the left? I tried few ways with text-align:center or margin: 0 auto, but it want works.
Also I on the accordion I have some problem with:
ul {
list-style: circle;
}
When I leave it like that, page push that circle bullets little bit outside the section (it looks ugly and unclean), but it nicely displays text.
Other scenario is when add:
ul {
list-style: circle inside;
}
circle bulltets are displayed perfectly in the line with the section but text acts little bit funky like this - https://www.dropbox.com/s/pb3kxmfjod3084d/bullets%28text%29.png?dl=0
Is there any way to solve that problem, so that circle bullets are in line with section, but without the funky looking text?
For the first part of your question.
https://jsfiddle.net/wieslaw/y26k6amu/.
Answer to your question is also in https://stackoverflow.com/a/14510696/1643235.
.container {
text-align: center;
}
ul {
display: inline-block;
}
add following code into your style.css file:
.accordion-content ul {
position: relative;
left: 50%;
}
you can adjust 50%; value to whatever you like.
I have this site header I'm working on but I can't get the logo and the site title to line up horizontally. I'm relatively new to CSS so would appreciate any hand-holding anyone can offer please ;-)
The logo image is styled with:
.logo {
float:left;
}
Whereas the h1.site-title and h2.site-description text is styled thus:
h1.site-title, h2.site-description {
position:relative;
margin-left: 130px; !important
}
I'm pretty sure I need to make another DIV and can't get the positioning right so the logo is at the left, then immediately next to it the site title/description.
(it should be #logo) Floating them both left works
#logo {
float: left;
}
.home-link {
float: left;
}
and remove the margin-left
There are a couple of things that I would recommend changing:
In your HTML, you have logo set to an ID, so in your CSS it should use a # instead of a period.
You do not need to tag qualify your classes in your CSS, meaning the h1 and h2 are not needed, just .site-title and .site-description should work.
Avoid using !important whenever possible. It makes your code very hard to adjust later.
instead of working with .site-title and .site-description work with their wrapping container, .home-link. Float both it and #logo left.
If you want them to line up side by side, you will have to change the width of home-link to something smaller than 100%.
remove the margin-left.
so your CSS would look like this:
#logo { float: left; }
.home-link { float: left; width: 75%; }
On my homesite I have slideshow with cars. My problem is, that slideshow is on the next line (or block I should say) under paragraph "Vitajte!". I want that slideshow next to paragraph "Vitajte!" on the right side. Here is link on my CSS. Thx for help :)
Just add:
float:left;
to div#welcome;
div#welcome
{
float: left;
}
Add the above css to the div, which will bring your slider to right side. If you want to move the slider little down and move left add
.ppy-placeholder
{
margin-top: 55px !important;
width: 450px !important;
}
I suggest you to make the below changes to your CSS and get the paragraph to align right.
The CSS:
div#welcome {
display: inline;
height: 148px;
margin-top: 0;
text-align: right;
width: 290px;
}
EDIT
If you want to keep the paragraph to the same place and move the slideshow inline with the paragraph, you need to add a float:left to the div#welcome
For Instance,
div#welcome {
float:left;
}
Hope this is what you are looking for.
Not sure how to describe it. Why aren't the last two li floating correctly?
Site: http://symphonyninjas.com/interviews/
Add clear:left:
.photo-id.first, .first.interviewee {
margin-left: 0;
clear: left;
}
The LIs are all floating, but the images are different heights. The fifth image is hitting the third image and sitting next to it instead of underneath it.
Clear the float when you want to start a new row. You already have a class on that LI to remove the margin, simply add clear:left;
.photo-id.first, .first.interviewee {
[...]
clear: left;
}
Might be a bit too early in the morning for me but I struggling to figure out what I've done wrong here.
I have a page with 9 boxes and I would like them to be positioned with 3 on one line, 3 on another and 3 on the other.
Have a look here: http://dev.tim-morgan.co.uk/other/Untitled-1.html
Right now you can see, the list bullets are showing and each box looks like it's going down like a staircase since I put in float: left;
Any ideas of what I'm doing wrong?
Thanks
You need to:
Move float: left from ul.tabs2 a to ul.tabs2 li.
Add overflow: hidden to .tabs2 to clear the floats.
Add clear: left to every 3n+1 li using :nth-child, try this:
ul.tabs2 li:nth-child(3n+1) {
clear: left
}
If you need to support Internet Explorer 8 and lower (no nth-child support), you can use http://selectivizr.com/, or just add the clear: left rule yourself to each relevant li.
You might want to remove the default styles on your <li>s, they could be interfering with the floating of the <a>s in the <li>s.
I’d suggest:
ul.tabs2 {
list-style: none;
}
ul.tabs2 li {
margin: 0;
padding: 0;
}
For getting three in a row, #thirydot’s answer looks good. If you know how wide you want each box to be, you could set that width on the <a>s, then set a width on the <ul>:
ul.tabs2 {
width: 300px;
}
ul.tabs2 li a {
width: 100px;
}
In your css add this
ul.tabs2 li {display:block;float:left;width:33%;margin:0 0 10px 0;padding:0;}
and also add overflow:hidden and list-style:none to your ul.tabs2 if you don't want bullets.