I'm using JQuery's sortable (as grid) to be able to sort divs, the first of which is approximately three times as wide as the rest. I want to display them in just two rows, which Chrome and Firefox have been able to do just fine, but Safari is displaying them sort of like this:
BIGDIV
DIV DIV
DIV DIV
DIV DIV
By the way I'm doing this in rails which will explain my code below:
<ul id="sortable" style= "width: 1050px; height: 625px;" >
<li id="newspod" style="width: 610px;">
<div class="pod" style="width:598px;">
<div id="header" style="width: 598px">NEWS</div>
</div>
</li>
<% #pods.each do |podli| %>
<li class="ui-state-default">
<div class="pod">
<div id="header"><%= podli.name %></div>
</div>
</li>
</ul>
I removed a little to make it more readable. Also, here's my CSS:
#sortable { list-style-type: none; margin: 20px 10px 10px 10px; padding: 0;}
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 200px; height: 294px; font-size: 4em; text-align: center; }
.pod {
width:188px;
height:282px;
background-color:#FFFFFF;
/********** CSS 3 **********/
box-shadow:3px 3px 10px #000;
-webkit-box-shadow:3px 3px 10px #000;
-moz-box-shadow:3px 3px 10px #000;
}
Thanks so much for any help.
Related
Trying to display a list of upcoming events, showing the date(s), an icon, and a brief description. All of these should line up side by side, like columns, but when the description wraps, it falls down to the next line. This is probably insanely simple, but I've tried various combinations of float and inline-block with no success.
<div class="events">
<ul class="list-unstyled">
<li>
<div class="event-date">Jun 16 -
<br />Jun 27</div><i class="glyphicon glyphicon-star">a</i>
<div class="event-text">Opening Day for Faculty and Staff</div>
</li>
<li>
<div class="event-date">Sep 10 -
<br />Oct 08</div><i class="glyphicon glyphicon-star">b</i> <div class="event-text">Coffee with a Cop, 7:45 a.m. # Cafeteria Courtyard</div></li>
<li>
<div class="event-date">Mar 12</div><i class="glyphicon glyphicon-ban-circle">c</i> <div class="event-text">Labor Day: Campus Closed</div></li>
</ul>
.list-unstyled {
list-style: none outside none;
padding-left: 0;
}
.events li {
border-bottom: 1px solid #4188d6;
margin-bottom:10px;
}
.event-date {
background-color: #74a2c2;
border-radius: 3px;
color: #ffffff;
display:inline-block;
font-weight: bold;
margin: 0px 10px 10px 10px;
padding: 5px;
width: 65px;
vertical-align:top
}
.event-text {
vertical-align:top;
display:inline;
border:1px solid green
}
i {
display:inline-block;
vertical-align:top;
border:1px solid red
}
http://jsfiddle.net/d4h2A/1/
Using your existing HTML (good as is), try the following CSS:
.list-unstyled {
list-style: none outside none;
padding-left: 0;
}
.events li {
border-bottom: 2px solid #4188d6;
margin-bottom:10px;
overflow: auto;
}
.event-date {
background-color: #74a2c2;
border-radius: 3px;
color: #ffffff;
font-weight: bold;
margin: 0px 10px 10px 10px;
padding: 5px;
width: 65px;
float: left;
}
.event-text {
overflow: auto;
border: 1px dotted gray;
}
i {
float: left;
vertical-align:top;
border:1px solid red;
margin-right: 10px;
}
See demo: http://jsfiddle.net/audetwebdesign/y54Zb/
To allow for a fluid width of .event-text, start by using float: left for .event-date and i (optinally, add a right margin as needed).
To contain the floated elements within the li blocks, use overflow: auto.
Finally, apply overflow: auto for .event-text to keep the text from wrapping around the floated elements.
The net result is that as you shrink the window width, the text will start wrapping at the left edge next to the icon. As you expand the window, the text will simply stay on a single line for a wide enough window (use max-width if this is an issue).
You might want to set a min-width for the text block depending on your layout design.
I need your help. How to fix that 2px difference? I really have no idea...
<nav id="navigation" class="col-full" role="navigation">
<ul class="nav fr parent">
<li id="menu-item-99" class="menu-item menu-item-type-custom">
<div id="search">
<form method="get" action="site" >
<input type="text" name="s" placeholder=" search..." />
<input type="submit" value="" name="submit" />
</form>
</div>
</li>
</ul>
</nav>
And here is CSS:
#search {
float: left;
background: #000;
color: #fff;
}
#search input[type="text"]{
width: 95px;
background: #000;
color: #fff;
border: 0;
margin-left: 1px solid #fff;
#navigation {
float: right;
clear: none;
border: 0;
box-shadow: none;
width: 850px;
background: 0;
}
#navigation ul.nav {
float: right;
}
The Screenshot: http://i.stack.imgur.com/fYcBs.png
Your reset CSS doesn't work as you'd expect it to.
Styles computed for the submit input in FF are:
[name=submit] {
width: 6px;
padding: 3px 6px;
border-width: 3px;
}
which makes it 24px wide in total.
And for the Chrome:
[name=submit] {
width: 0;
padding: 1px 6px;
border-width: 2px;
}
which makes it 16px wide in total.
Here's an example: http://jsfiddle.net/n5u9L/2/
You should reset the padding, border-width and the width for this input, like this:
#search [name=submit] {
padding: 0;
width: 6px; /* or whatever you want */
border-width: 0;
}
Well, it's hard to read anything from the image you provided but I guess the problem is font rendering. As we can see from the CSS the #search is float: left, so its position will depend on the element that is on the left hand side of it. I assume that there is some text in the left container. Unfortunately you covered it with black rectangle and you didn't provide us any HTML of it.
The problem is, every browser renders font faces different even if they're the same font-family. Each letter might differ in width and spacing.
You must style your #search so that its position doesn't depend on the width of the element on the left side.
When I enter more than one line of content in the 'wrap' div it creates vertical space at the bottom of the div. How can I prevent this?
Screen shot
JSFiddle
HTML
<div id="widgets">
<div id="wrap">
<h1 class="name" >Models</h1>
<li>Rename a column</li>
<li>git add all new or modified files</li>
<li>Heroku assets:precompile plugin </li>
<li>Heroku tail logs</li>
<li>Rename a column</li>
<li>Heroku load db:schema </li>
<li>Heroku: connect to database </li>
<li>Postgres: show tables</li>
<li>git switch to a branch </li>
<li>add records from console </li>
</div>
</div>
CSS
#widgets {
margin: 15px 0px 50px 15px;
text-align: center;
}
#wrap {
margin: 15px 15px 0px 0px;
text-align: left;
width: 300px;
height: 300px;
padding: 1px 20px 5px 20px;
background: #ffffff;
border: 1px solid #fff;
border-radius: 5px;
display: inline-block;
}
#Arman P.'s answer works, but if you want to keep using your inline-block method instead of floats like you are now, you can just add this:
#wrap {
vertical-align: top;
}
Simply add float: left to your #wrap css declaration. Updated jsFiddle.
#wrap { float: left; }
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Formatting an <li> element within a <div>
The facebook and twitter elements are not aligned. I want them to be positioned perfectly, one above the other. Please can you help?
Here's my code:
#floating-box {
width: 65px;
height:auto;
background-color: #484848;
margin: 54px 10px 0px 623px;
position:absolute;
z-index:1;
text-align: justify;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
border-right: 1px solid #484848;
}
.social {
position : relative;
list-style-type : none;
margin-left: 2px;
}
.social li a {
float: left;
padding: 1px 5px 5px 0px;
margin: 0px 0px 3px 0px;
display: inline;
}
The HTML that uses this CSS is:-
<div id="floating-box">
<img src="likeusnow.jpg" />
<ul class="social"><!-- Facebook Like/Share Button -->
<li><a name="fb_share" type="box_count" rel="nofollow" share_url="http://www.mysite.com"></a>
</li>
<li>
Tweet
</li>
</ul>
try display: inline-block; instead
Ok I am making a lot of assumptions on this one.
Assumptions
You are using the vertical Facebook share (which has been deprecated, so I'm demonstrating with the Facebook Like Button)
Your are using the similarly styled Twitter share, also with the vertical count.
This is supposed to be a modal dialog that pops up in the middle of the screen.
The image "likeusnow.jpg" is just the text "Like Us Now"
I'd float the <li> elements rather than the <a>'s. Styling the <a>'s will not matter since their content is an <iframe>. It's the fixed width of the div that is getting you into trouble. While the buttons are supposed to be floated left, there is not enough room and the Twitter button is being bumped below the Facebook one.
CSS:
#floating-box {
position:absolute;
background-color: #484848;
margin: 54px 10px 0px 623px;
z-index:1;
text-align: justify;
border: 1px solid #000;
border-right: 1px solid #484848;
padding: 15px;
}
.social {
position: relative;
list-style: none;
margin-left: 2px;
padding: 0;
}
.social li {
float:left;
margin-left: 10px;
}
I made a demo using jsFiddle and inserted placeholder Facebook Like and Twitter Share plugins here.
this is small code for side menu of my page
<div style="display: block;" id="overlay" class="overlay">
<div id="sideMenuGroups">
<div id="sideMenuGroupHeader" class="mSideMenuSeparator">GROUPS</div>
<div id="sideMenuGroupContent" class="mSideMenuContent">
<div id="teacherGroup">As Teacher
<a onclick="groupFeeds();" href="#">Data Mining</a>
<a onclick="groupFeeds();" href="#">Data Structures</a>
<a onclick="groupFeeds();" href="#">C Language</a>
//**display anchor tag to full width of overlay**
<a onclick="groupFeeds();" href="#">Introduction to IT</a>
</div>
</div>
</div>
</div><!--overlay ends here-->
the css for the styles used is
*mSideMenuConten*t has no style defined
mSideMenuContent a- tells how each anchor tag would be visible, i have tried display:table-cell property, but it is not effective for me
overlay tells how the side menu would be
.mSideMenuContent
{
}
.mSideMenuContent a
{
display: table-cell;
height: 37px;
color: #c4ccda;
padding: 3px 0 3px 8px;
font-size: small;
}
.mSideMenuContent a:hover
{
background:#262c3a;
color: #c4ccda;
}
.mSideMenuSeparator
{
background: #434b5c;
border-top: 1px solid #242a37;
border-bottom: 1px solid #242a37;
font-family:Helvetica, sans-serif;
font-size:x-small;
color: #7a8292;
height:17px;
padding-top:4px;
padding-left: 10px;
text-shadow: 0 1px 0 rgba(0, 0, 0, .6)
}
.overlay {
z-index: 1000;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 50%;
height: 100%;
background:#31394a;;
color: #c4ccda;
display: none;
}
i want to display the anchor tag to full width of the side menu, how do i do that??
Use this:
display:inline-block;
width: 100%;
By saying inline block, you allow yourself to define a width for the element. Inline elements can't do this be default.
I found display block more convenient. I applied some margin and padding and i got cool/desired output.
display:block;
padding: some padding;
margin: some margin;