The app (RoR) shows a set of rows with posts info. Each row has the title aligned to the left and date aligned to the right.
I need to have a link working over all the row, not only over the text.
If I don't use float, the link works properly over all the row but I cannot establish a margin-top. If I use float, the margin-top works OK, but then the link only works over the text.
I don get what the issue is. Any ideas?
This is my css:
.post {
margin-left: auto;
margin-right: auto;
width: 900px;
height: 40px;
border-bottom: 1px solid #BDBDBD;
}
.post a {
display: block;
text-decoration: none;
}
.post a span.title{
float: left;
margin-top: 7px;
}
.post a span.date{
float: right;
margin-top: 7px;
}
I assume your html structure is like this:
<div class="post">
<a href="#">
<span class="date">date</span>
<span class="title">title</span>
</a>
</div>
Note: I moved the date up and title down, because we're going to make the first one to float right. You can then use margin or padding as needed.
.post {
margin-left: auto;
margin-right: auto;
width: 900px;
border-bottom: 1px solid #BDBDBD;
}
.post a {
display: block;
text-decoration: none;
padding: 10px 0;
}
.post a span.date {
float: right;
}
DEMO: http://jsfiddle.net/42vdh6bL/
Related
the contact form i have on my front page that im making, has some CSS on it so its all centred, fits inside the white box it creates etc, yet one of the fields doesn't seem to fit inside the white box but everything else does, heres the site.
https://www.traveltradewinds.com/ttw/
When i change the CSS to try and fix it, i noticed that the width being set to 110% fits it in, but then isn't in the centre of the screen as a result, on a side note, the checkbox isn't the default input type checkbox it has a style to it that i haven't added, can anyone help me to show whats going wrong as it looks like ti should work to me?
Many thanks
Edit: forgot to add the CSS code, sorry:
#media only screen and (min-width: 40.063em) {
.hero .hero-inner {
width: 100% !important;
float: left;
margin-left: 1.38889%;
margin-right: 1.38889%;
}
}
.hero .hero-inner {
width: 100%;
float: left;
margin-left: 1.38889%;
margin-right: 1.38889%;
}
ul {
display: flex;
}
form {
border: 1px solid white;
background: white;
padding: 10px;
border-radius: 5px;
}
.widget ul {
list-style: none;
margin: 0;
padding: 0;
}
.hero .widget ul li, .hero .widget ol li {
list-style: none;
height: 48px;
margin: 50px 15px;
height: 48px;
margin: 50px 15px;
}
.hb-submit{
text-align:center;
}
Looks like it belongs to hotel-booking.css. Please check this
You didn't need to use the FORM tag for parent and LIST tag to children. You would use the DIV to create this part and then give 17% of main width to each subDIV.(1% to margin) such as below code:
body {
width: 100%;
text-align: center;
}
.mainDIV {
background: red;
width: 80%;
}
.subDIV {
background: blue;
height: 100px;
width: 17%;
margin: 1%;
display: inline-block;
}
<div class="mainDIV">
<div class="subDIV">
</div>
<div class="subDIV">
</div>
<div class="subDIV">
</div>
<div class="subDIV">
</div>
<div class="subDIV">
</div>
</div>
I hope it will be useful.
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.
The project is to create a micro-blogging website similar to Twitter. I chose to name the site Chirper (how clever of me). Each post is structured by a parent div, an avatar div and a content div. The avatar and content divs are displayed inline, but they are not aligned properly. Any help is appreciated.
HTML:
<div class="chirp">
<div class="chirp_avatar_region">
<img src="img/avatar/default.png" alt="Avatar" width="64" height="64">
</div>
<div class="chirp_content">
<p>
USER
<span class="timeStamp">2013-11-22 16:43:59</span>
</p>
<p>
COMMENT
</p>
<p>
ReChirp!
</p>
</div>
The div's aren't aligned how I want them to be (level and 100% of the parent).
I can't post images, so here is a link to an imgur page: http://imgur.com/Mn9mE5q
Relevant CSS:
body {
font-family: Verdana, Geneva, sans-serif;
color: #000;
background-color: #666;
font-size: 1em;
}
/* Containers */
div {
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border-style: solid;
border-width: 3px;
border-color: #000;
padding: 10px;
}
div.pane {
width: 70%;
background-color: 0099FF;
}
div.chirp {
border-width: 1px;
margin-bottom: -1px;
width: 80%;
padding: 5px;
}
div.chirp_avatar_region {
display: inline-block;
width: 10%;
height: 100%;
text-align: center;
/*border-style: none;*/
}
div.chirp_content {
display: inline-block;
width: 80%;
height: 100%;
/*border-style: none;*/
}
div.chirp_avatar_region > img, div.chirp_content > p {
margin-top: 0;
vertical-align: middle;
}
You can either float your inner divs then clear the float following the container
or
use vertical-align:top to position your divs at the top of the container
Not entirely sure, but what I think is happening is that by defining position:inline-block, it's putting them on the same line, and making the line-height the height of the chirp_content container. In a sense anyway.
Set to vertical-align:top; and it should solve it.
Ex.
.chirp_content, .chirp_avatar_region{ vertical-align:top; }
JS Fiddle
Give to the avatar_region a float: left, and remove its width: and height: setting. Remove the chirp_content div, it circumvents the inlining.
Please take a look at this laytout which i built with divs:
First of all you can ignore Header section
So Content has to be centered exactly at the center and it has a fixed width which is easy, but Left Column needs to extend from left side until it reaches Content and here is the difficult part, since the gap betwen Left Column and Content can be any length it's hard to know what width to set.
Now i know it would be fairly easy to do this with javascript but i would like to avoid that if possible.
EDIT as requested here is the code:
<div class="left_column"></div>
<div class="content"></div>
.left_column{
width:100px;
height:100px;
float:left;
}
.content{
width:100px;
height:100px;
margin:auto;
position:relative;
}
Take a look at Object-Oriented CSS. In particular, check out their grids page
tried percentages?
overflow: auto;
padding: 10px;
width: 45%;
try float left float right as well as display inline, you could also try width auto but that don't work too well
float:left;
width:auto;
height: auto;
display: inline;
there is also one more trick used in menus
<div id="mail_menu">
<ul>
<li><a href=something</a></li>
</ul>
</div>
css
#mail_menu {
position: relative;
top: 0px;
left: 0px; /* LTR */
z-index: 3;
color: #000;
}
#mail_menu ul {
list-style-type: none;
}
#mail_menu li {
display: inline;
float:left;
margin: 0px;
padding: 3px;
}
#mail_menu a {
color: #000;
background: #FFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 1px;
border-color:#CCC;
border-width:1px 0;
padding: 2px;
float:left;
border-width:1px;
border-style:solid;
border-bottom-color:#aaa;
border-right-color:#aaa;
border-top-color:#ddd;
border-left-color:#ddd;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#mail_menu a:hover {
color: #0000DD;
text-decoration: none;
background-image: url(/images/lyel.png);
background-repeat: repeat-x;
}
css to middle something
.middle {
display: block;
width: 50em;
margin-left: auto;
margin-right: auto
}
and finally some table values for display to mess with
.td {
display: table-cell;
display:inline
}
.wrap{
position: inherit;
}
.tr {
display: table-row;
display:inline
}
table {
border-collapse: collapse;
}
th {
text-align: left; /* LTR */
padding-right: 1em; /* LTR */
border-bottom: 3px solid #ccc;
}
I would use percentages, but go 1% short of where you should. I've found a lot of times a browser will "round up" a pixel or something, so if you have your percentages totaling 100%, any extra added will push a div below.
For instance, if you wanted two divs, one on the right and one on the left, have one of them have width:49%; and the other width:50%;.
This can be accomplished using this hack, please try this:
div.header { height: 50px; line-height: 50px; background-color: #222; color: #eee; }
div.wrapper { background-color: #b261da;position: relative;z-index: 0; }
div.wrapper div.content { width: 600px;margin: 0 auto; background-color: #6189fe; color: #fefefe; }
div.wrapper div.left-column { background-color: #00fe72; position: relative;width: 550px;float: left;z-index: -1000; }
with this markup:
<div class="header">Header</div>
<div class="wrapper">
<div class="left-column">Left Column</div>
<div class="content">Content</div>
</div>
Note the left-column will be cutted if you resize the screen too much. Either way, I hope it helps.
I am trying to create a little graphical box for a time element on a website. What I would like to have is something like this:
I have this HTML:
<div class="entry-meta">
<time class="entry-date" datetime="2011-09-16T09:59:48+00:00" pubdate="">
<span class="date-day">16</span>
<span class="date-month">Sep</span>
<span class="date-year">2011</span>
</time>
</div>
And this CSS so far:
.entry-meta {
display: block;
color: white;
float: left;
background: #aaa;
}
.date-day {
display: block;
font-size: 30px;
background: #444;
float: left;
}
.date-month {
display: block;
font-size: 12px;
background: #666;
float: left;
}
.date-year {
display: block;
font-size: 12px;
background: #888;
float:left;
}
My problem is that I cannot achieve two things:
To align the text to the corners of the box and forget about the baseline. I would like to align 16 to the top left corner and cut it's box at the bottom right corner. I am looking for eliminating all the spacing pixels.
To move the year under the month, without specifying exact width and height properties. If I delete float: left then it goes under the day. What I would like to have is to move it right of the day and under the month. Do I need to create an other div or spand for the month + year?
Also, it seems that it doesn't matter if I remove display: block from the span CSS-es why is it?
Here is a jsFiddle I created:
http://jsfiddle.net/ESbqY/3/
An update one based on Kolink's suggestion:
http://jsfiddle.net/ESbqY/5/
Fully customizable:
http://jsfiddle.net/5MMc9/8/
html:
<div class="entry-meta">
<time class="entry-date" datetime="2011-09-16T09:59:48+00:00" pubdate="">
<div class="date-day">16</div>
<div class="container">
<div class="date-month">Sep</div>
<div class="date-year">2011</div>
</div>
</time>
</div>
css:
.entry-meta {position: relative; font-family: Trebuchet MS;}
.container {float: left;}
.date-day {font-size: 70px; line-height: 55px; float: left; background: #fa7d7d;}
.date-month {font-size: 25px; line-height: 25px; background: #627cc6; padding: 0 0 5px 0;}
.date-year {font-size: 25px; line-height: 25px; background: #3ce320;}
Furthermore, you can add display: inline-block; to the month css if you want the div to be same width as text inside.
The following:
<span style="font-size: 2em;">16</span><span style="display: inline-block;">Sep<br />2011</span>
Will produce, more or less exactly, the result shown in the image.
This seems to work as required:
time span {
display: block;
font-size: 1em;
margin-left: 2.5em;
}
time span.date-day {
float: left;
position: absolute;
font-size: 2em;
margin: 0;
}
.entry-meta {
border: 2px solid #ccc;
display: block;
float: left;
position: relative;
}
JS Fiddle demo.
Edited to amend/use the colours from the question, and to remove the (possibly unwanted) margin between the date-day and the other span elements:
time span {
display: block;
font-size: 1em;
margin-left: 2em;
}
time span.date-day {
float: left;
position: absolute;
font-size: 2em;
margin: 0;
background-color: #444;
}
time span.date-month {
background-color: #666;
}
time span.date-year {
background-color: #888;
}
.entry-meta {
border: 2px solid #ccc;
display: block;
float: left;
position: relative;
background-color: #ccc;
}
JS Fiddle demo.