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.
Related
I'm hoping for some enlightenment from a CSS whiz. Take a look at the bottom of any page at http://oicjapan.org - the address/phone info section would look a lot better in the center of the page, but I can't seem to get it to go there. Setting text-align:center on aside#footer-sidebar or div#fsidebar just centers the text inside the <li>, while the whole thing stays on the left side of #wrapper. And margin-left:auto; margin-right:auto; doesn't have any visible effect on any of several elements I tried (#footer-sidebar, #fsidebar, or #fsidebar-ul).
I'm not limited to CSS changes - if the markup needs to be changed, I can do that.
Remove float:left; from #hsidebar .widget-container, #fsidebar .widget-container or you can overwrite this rule using this:
#fsidebar #text-4 {
float: none;
text-align: center;
}
Then, remove float:left; from #fsidebar #text-4 .textwidget > div > div or overwrite it with this rule:
#fsidebar #text-4 .textwidget > div > div {
display: inline-block;
float: none !important;
}
Hope this will works!
If you want the block centered to the page, you will need to add a width to your #fsidebar such as:
#fsidebar {
margin: 0 auto; // does the same thing as margin-left: auto; margin-right: auto;
width: 400px;
}
If you are wanting the block to be moved inline with the right-column of your web page, why not just margin / pad the block over? Something along the lines of:
#fsidebar {
margin-left: 350px; // use whatever looks to your liking
}
Hi here's the code to center the footer text on your website, for a
#fsidebar {
text-align: center;
}
.widget-container {
margin: 5.0%;
}
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%; }
Can't figure out what's going on, I know it's div related but can't quite figure out where I'm going wrong. Can someone have a quick look and tell me where I'm goofed, or better yet, how to fix it?
It's the blue line at the bottom of the page. I've tried everything I know (which isn't much anymore). Thanks for any advice!
Website:
http://www.cityplaceselfstorage.com
-Jason
Change the height property on #templatemo_middle to auto. Currently the height is specified at 347px.
Update following rule:
#templatemo_middle {
background: url("images/templatemo_content.jpg") no-repeat scroll left bottom transparent;
clear: both;
color: #F6F6F6;
height: 305px;
margin-bottom: 40px;
width: 960px;
}
changing height auto will misplace the world map image of background of this div.
You have to do few arrangement of css code and add extra div
First Step:
Change CSS of .templatemo_middle to following
.templatemo_middle{
clear: both;
width: 960px;
height: auto;
color: #f6f6f6;
margin-bottom: 40px;
/** remove background image from here **/
}
/**add new class which will be used for new div */
.new_class{
background: url(/images/templatemo_content.jpg) no-repeat scroll left top transparent;
}
Second Step:
Content Within .v_divider should be enclosed to another div and the background can be assigned
<div class="col_w540 float_l v_divider">
<div class='new_class'>
....here goes content....
.....
</div><!-- end the new div -->
</div><!-- end of div.v_divider -->
Save it and run
I have an image with text aligned to the left of it. Both the image and text is sitting inside a div that I have styled to look like a red bubble in the background of the post. The bubble only goes as far as the text and not the image (the image goes down much farther than the text), causing the image to break into other posts. How do I make this div the correct size that can fit anything i put into it (in this case the image)?
jsfiddle: http://jsfiddle.net/Sederu/CzNr6/
Add overflow:auto to your .post-bubble rule.
div.post-bubble {
padding: 10px;
background-color: #e17474;
border-radius: 10px;
overflow:auto;
}
jsFiddle example
If you want the content to allow anything inside of it, give it overflow:auto.
If you want the bubble to extend so that it also covers the img tag, however, give .post-bubble a height:
div.post-bubble {
padding: 10px;
background-color: #e17474;
border-radius: 10px;
height:600px;
overflow:auto;
}
The reason why the image extends farther than the div is because the img is taken out of the flow of the page, i.e. no longer being a block element, when you declare align:right.
either add overflow:auto; to your post-bubble div or define a height to the post-bubble div eg.. height: 600px; covers it nicely..
On div tag do a display:block in css
I think the best solution is to force element to self-clear its children.
div.post-bubble:after {
clear: both;
content: '';
display: table;
}
You can also create a specific class for other elements in your project/projects like:
.clear-children:after {
clear: both;
content: '';
display: table;
}
And add this class (.clear-children, without :after) to every element with floated children.
http://jsfiddle.net/CzNr6/4/
I'm trying to build the liquid layout shown below in CSS.
The left column should stretch to all available space, and if it's possible, on same line.The column on right should became with the same width.
I have already achieved a result very close to what I want. Take a look at http://jsfiddle.net/tcWCC/34/embedded/result/
But there are two problems. The height of both aligned DIVs should be equal. The first or second DIV should grow to be the same height as the other.
The second question is that when the width is not sufficient for 2 DIVs, I want the first (NomeEvento) div to be on top. and not the second div (DataEvento).
I am not sure I understood your question correctly. Is the following layout something similar to what you want? http://jsfiddle.net/5sjgf/
Here's more CSS to try out. If you wanted a margin on that left side. I added background colors to help differentiate.
div.NomeEvento {
text-align: left;
float: left;
width: 75%;
background-color: #eee;
}
div.DataEvento {
text-align: left;
margin-left: 5%;
width: 20%;
float:left;
background-color: #ccc;
}
It seems like a lot of extraneous CSS to me. But maybe the other stuff is in there for a reason. This works fine as the sum-total of your CSS though:
div.Evento {
overflow: hidden;
margin-top: 10px;
}
div.NomeEvento {
background: #eee;
padding-right: 20%; /* the same as the right column width */
}
div.DataEvento {
float:right;
background: #ddd;
}
...BUT, if you're right-floating an element, place it first in the layout - here it's element class DataEvento:
<div class="Evento">
<div class="DataEvento">#evento.Data</div>
<div class="NomeEvento">#evento.Nome</div>
</div>
Check it: http://jsfiddle.net/J89Hp/
Cheers
I acomplished what I want using display table, table row and table cell in my divs.
Take a look. It's exactily what I want.
http://jsfiddle.net/tcWCC/47/embedded/result/