I am trying to make a CSS footer but have ran into some major problems.
Here is what my footer looks like
Logo Games Database
Home About Contact
Where the logo is an image at the far left. Games Database appears in text. Both appear about 1 line above
I would like my footer to look like this
Logo Games Database Home About Contact
Alright, I decided to post the full HTML output I received from the browser. I removed the data turbo links and a bunch of the rows in my table because I wanted to be as concise as possible.
<!DOCTYPE html>
<html>
<head>
<title>Games</title
</head>
<body>
<header class='navbar navbar-fixed-top navbar-inverse'>
<div class='navbar-inner'>
<div class='container'>
Games Database
<nav>
<ul class='nav pull-right'>
<li>Home</li>
<li>Help</li>
<li>Profile</li>
<li>Favorites</li>
<li><a data-method="delete" href="/signout" id="signout" rel="nofollow">Sign Out</a></li>
</ul>
</nav>
</div>
</div>
</header>
<h1>Games Database</h1>
<table>
<thead>
<tr>
<th id = 'title_id'><a class="current asc" href="/games?direction=desc&sort=title">Title</a></th>
<th id = 'console_id'>Console</th>
<th id = 'genre_id'>Genre</th>
<th id = 'release_id'>Release Date</th>
</tr>
</thead>
<tbody>
<tr>
<td id = 'title'>Animal Crossing</td>
<td id = 'console'>Gamecube</td>
<td id = 'genre'>Life Simulation</td>
<td id = 'released_on'>2001</td>
<div>
<td>Show</td>
<td>Edit</td>
<td><a data-method="delete" href="/games/36" id="delete" rel="nofollow">Delete</a></td>
</div>
</tr>
<tr>
<td id = 'title'>Donkey Kong Country</td>
<td id = 'console'>Super Nintendo</td>
<td id = 'genre'>Platform</td>
<td id = 'released_on'>1994</td>
<div>
<td>Show</td>
<td>Edit</td>
<td><a data-method="delete" href="/games/35" id="delete" rel="nofollow">Delete</a></td>
</div>
</tr>
</tbody>
</table>
<p>
Add a new game
</p>
<ul class = 'footer'>
<li><img alt="83ec69e47df392e6856aca4a7a276e9b" id="footer-logo" src="http://m1.behance.net/rendition/modules/59245571/disp/83ec69e47df392e6856aca4a7a276e9b.jpg" />
<li id = "footer-left">Games Database</li>
<div id = 'footer-center'>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</body>
</html>
Here is my CSS file
.footer {
display: inline-block;
border-top: 1px solid #eaeaea;
color: black;
bottom: 0;
position: fixed;
li {
display: inline;
}
#footer-center {
float:right;
word-spacing: 20px;
margin-left: 980px;
color: black;
}
#footer-logo {
height: 30px;
width: 50px;
}
}
#logo {
float: left;
padding-top: 10px;
margin-right: 10px;
font-size: 1.5em;
text-transform: uppercase;
&:hover {
text-decoration: none;
}
}
#links {
color: black;
}
I've tried just about everything. I've tried setting the footer to fixed, relative and absolute. I tried setting the bottom property to 0, fiddling around with it, even in the negatives.
I tried margin-top and margin bottom on the left hand side, but just cannot figure this out.
I even tried to post it on jsfiddle, but I had no luck because I can't figure out how to get that site to work.
I'm using bootstrap.
Help is appreciated.
I finally got the CSS to show in CSSDesk, but I'm not sure I trust it, because it doesn't render bootstrap. Anyways, here goes
http://cssdesk.com/eL2J2
You can't wrap three of your list elements in a div the way you currently have it. Here is a potential solution:
-- the plain CSS --
.footer { position: relative; width: 100%; overflow: auto; }
#footer-left { float: left; }
#footer-right { float: right; }
.footer ul { margin: 0; padding: 0; }
.footer li { display: inline-block; list-style-type: none; margin: 0; padding: 0; }
.footer a { color: black; }
#footer-logo { height: 30px; width: 50px; }
#game { float: right; }
-- the HTML --
<div class="footer">
<ul id="footer-left">
<li><img alt="83ec69e47df392e6856aca4a7a276e9b" id="footer-logo" src="http://m1.behance.net/rendition/modules/59245571/disp/83ec69e47df392e6856aca4a7a276e9b.jpg" />
<li id="game">Games Database</li>
</ul>
<ul id="footer-right">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
No idea how this would be implemented in bootstrap, but this should give you a basic idea for how to structure your footer.
Related
Here is the jsfiddle link please do take a look
http://jsfiddle.net/o9rf3thy/
There seems to be a problem with the html.
CSS
.taro{
display: inline;
margin-left: 200px;
}
I am still learning CSS so please do be patient with me.
I am trying to obtain this result
https://www.dropbox.com/s/lq80rkc4w5fqpki/Screenshot%202014-11-21%2017.36.51.png?dl=0
Items that have display:inline either by default or by setting are not affected by margins.
What I think you require is display:inline-block
JSfiddle Demo
This might be useful LearnLayout.com
Hope this is what you want http://jsfiddle.net/89f5o3jL/2/
CSS
.list-group {
list-style-type: none;
margin: 0;
padding: 0;
}
.list-group-item {
overflow: auto;
padding-top: 15px;
}
.img-circle {
float: left;
margin-right: 20px;
border-radius: 30px;
}
.info {
float: left;
width: 500px;
border-bottom: #ccc 1px solid;
padding: 0 0 15px 0;
}
.label {
background: #5390fc;
color: #fff;
border-radius: 4px;
display: inline-block;
padding: 2px 7px;
margin: 10px 0;
}
HTML
<ul class="list-group">
<li class="list-group-item">
<img src="http://placepic.me/profiles/60-60" width="60" height="60" class="img-circle">
<div class="info">
<strong>
Crondeau Viner, MD
<span>Nov 5th , 2014</span>
</strong>
<br />
<span class="label">Note</span>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum.</p>
</div>
</li>
</ul>
Your html contains several invalid tags:
you should use a self closing tag for img i.e. end it with /> instead of >
you should use <br /> instead of <br>
I would also consider changing the nesting of your tags so the spans don't contain br tags as it makes it easier to follow and style correctly.
Finally, if you want to make all the text display to the right of the image change display: inline to display: inline-block (jsfiddle)
<ul class="list-group">
<li class="list-group-item">
<img src="http://placepic.me/profiles/80-80" width="40" height="40" class="img-circle" />
<p class="taro">
<strong>
<b>Crondeau Viner, MD</b>
<label>
Nov 5th , 2014
</label>
</strong>
<br />Note
<br />
<span>hello Dr Jacqueline test - nov 5 </span>
<br />
</p>
</li>
</ul>
And your CSS would become
.taro{
display: inline-block;
margin-left: 200px;
}
I'm trying to move a table row containing navigation links for my website from being left aligned to being right aligned, but no matter what I edit nothing moves. I've only recently started learning HTML and CSS so any help would be appreciated.
HTML
<div id="nav">
<table>
<tr>
<td>
<a href="index.html">
<img src="Images/Home.png"/>
</a>
</td>
<td>
<a href="Learn.html">
<img src="Images/Learn.png"/>
</a>
</td>
<td>
<a href="Practice.html">
<img src="Images/Practice.png"/>
</a>
</td>
<td>
<a href="About.html">
<img src="Images/About.png"/>
</a>
</td>
<td align="right">
Donate
</td>
</tr>
</table>
</div>
CSS
#nav {
width: 100%;
height: 10%;
float: right;
background-color: #47B531;
margin: 0px;
padding:0px;
white-space: nowrap;
}
#nav tr {
margin: 0px;
padding: 0px;
width: 100%;
}
#nav td {
font-size: 18px;
margin: 0px;
padding: 5px;
text-align: right;
margin: 0px;
}
#nav img {
width: 30px;
height: 30px;
display: inline;
padding: 5px;
margin: 0px;
}
Please use
<table align="right">
instead of just table tag.
Usually, the navigation menues are designed using lists instead of tables. Here a very very simple example:
HTML:
<div id="nav">
<ul>
<li>
<img src="Images/Home.png"/>
</li>
<li>
<img src="Images/About.png"/>
</li>
<li>
<img src="Images/Contact.png"/>
</li>
<li>
Donate
</li>
</ul>
</div>
CSS:
#nav ul {
list-style: none;
}
#nav ul li{
float:right;
margin-left: 10px;
}
The options using this method is endless, give it a try and let us know if you got stuck or have questions about it.
Heres the Fiddle: http://jsfiddle.net/Q5Vh3/
If you mean that you want the links on the right, within the div element, without changing the table cell rendering from the current one, just add the rule
#nav table { float: right; }
Use #Dave's suggestion next time. Lists are much more efficient and easier. But to answer your question you can use align=right on the table to fix it.
Look at this fiddle http://jsfiddle.net/uhLuh/
Awareness of current web standards is crucial. I recommend diving head into HTML 5 & CSS3.
I believe that you should be looking to follow HTML 5 standards with CSS3.
Here is how to ideally approach a HTML5 navigation element and the base CSS3 elements and attributes that should get you pointed in the right direction :)
HTML5
<nav>
<img src="Images/Home.png"/>
<img src="Images/Home.png"/>
<img src="Images/Home.png"/>
<img src="Images/Home.png"/>
</nav>
CSS3
ul { }
nav ul
{float: right; *Adjust to suit
text-align:right; *Adjust to suit
list-style: none;} *Adjust to suit
nav ul li { }
nav ul a { }
Hope this helps you!
I have a dropdown menu that appears when mousing over cells in a large table in the page. The table gets large enough that cells can sometimes appear at the far right of the window. Mousing over a row shows the menu just below the row, and it dynamically shifts to be under the cell you are hovering (all via JQuery). A menu button or header div is revealed that you can mouseover to show the dropdown, which is a container div which contains two ul's that float: left so they stay side-by-side.
It works fine unless I mouseover a cell at the far right of the page. It works in Safari, in that if the dropdown is outside the window, the ul's stay in their float and bleed off the page/window. But in Firefox, there's a line break/the ul's lose their float the second one breaks to the next line to stay within the window.
I tried this hack, but Firefox 7 still doesn't like it:
CSS floats - how do I keep them on one line?
Any help is greatly appreciated. Relevant markup/code:
HTML
<table summary="" class="tbl">
<thead>
<tr>
<th>Select</th>
<th>Employee<br>ID</th>
<th>Position Title</th>
<th>Job Code</th>
<th>Name</th>
<th>Employee<br>Dept</th>
<th>Organization</th>
<th>Location</th>
<th>FTE</th>
<th>Annualized FTE<br>Base Pay</th>
<th>Performance<br>Rating</th>
<th>Grade</th>
<th>Annualized<br>Base Min</th>
<th>Annualized<br>Base Max</th>
<th>Annualized<br>Compa-ratio</th>
<th>Annualized Range<br>Penetration</th>
</tr>
</thead>
<tbody>
<tr class="dataRow">
<td class="dataCell"><input type="checkbox"></td>
<td class="dataCell">1002</td>
<td class="dataCell">Accounting Manager</td>
<td class="dataCell">ACC1000</td>
<td class="dataCell">Doe, John</td>
<td class="dataCell">Accounting</td>
<td class="dataCell">Portland</td>
<td class="dataCell columnGreen">Abbottabad</td>
<td class="dataCell">1</td>
<td class="dataCell">$82,000</td>
<td class="dataCell">3</td>
<td class="dataCell"></td>
<td class="dataCell columnBlue">$30,000</td>
<td class="dataCell">$50,000</td>
<td class="dataCell">2.050</td>
<td class="dataCell">260%</td>
</tr>
<tr class="dataRow">
<td class="dataCell"><input type="checkbox"></td>
<td class="dataCell">1002</td>
<td class="dataCell">Accounting Manager</td>
<td class="dataCell">ACC1000</td>
<td class="dataCell">Doe, John</td>
<td class="dataCell">Accounting</td>
<td class="dataCell">Portland</td>
<td class="dataCell columnGreen">Abbottabad</td>
<td class="dataCell">1</td>
<td class="dataCell">$82,000</td>
<td class="dataCell">3</td>
<td class="dataCell"></td>
<td class="dataCell columnBlue">$30,000</td>
<td class="dataCell">$50,000</td>
<td class="dataCell">2.050</td>
<td class="dataCell">260%</td>
</tr>
</tbody>
</table>
<div id="menu">
<div id="menuHeader">Menu</div>
<div id="menuItems">
<ul>
<li>Select</li>
<li>View or Edit</li>
<li>Assign to Job Markets</li>
<li>Add a Note</li>
<li>Delete</li>
</ul>
<ul>
<li>Select</li>
<li>View or Edit</li>
<li>Assign to Job Markets</li>
<li>Add a Note</li>
<li>Delete</li>
</ul>
<br style="clear: both"/>
</div>
</div>
CSS
#menu {
position: absolute;
top: 36px;
left: 600px;
display: none;
white-space: nowrap;
}
#menu #menuHeader {
line-height: 24px;
height: 24px;
padding: 0 15px 0 0px;
}
#menu #menuHeader a {
height: 23px;
width: 61px;
margin: 0 58px 0 0;
display: inline-block;
padding: 0 0 0 15px;
}
#menu #menuItems {
border-collapse: collapse;
position: relative;
display: none;
}
#menu #menuItems ul {
float: left;
position: relative;
}
#menu #menuItems li {
display: block;
position: relative;
height: 23px;
line-height: 23px;
}
#menu #menuItems a {
display: block;
position: relative;
padding: 0 15px 0 15px;
}
JQuery
// row highlighting, menu display (visiblity)
$('tr.dataRow').mouseenter(
function () {
$('div#menu').css('display', 'block');
}
);
// menu offset relative to td hovered
$('td').mouseenter(
function () {
var tempOffset = $(this).offset();
var tempHeight= $(this).outerHeight();
var tempTop = tempOffset.top + tempHeight - 1;
var tempLeft = tempOffset.left;
$('div#menu').offset({top:tempTop, left:tempLeft});
}
);
Hi I have the following HTML:
<div id="CONTENT">
<div id="SIDEBAR"></div>
<div id="MAIN">
<table>
<tr>
<td>
<div><label><span><a><span>My Label</span></a></span></label><span class="colon">:</span></div></td>
<td>hsadnsdjfjkasdfhkjadshfjkahsdkfjhasdjkfhjkasdhfjkaf</td>
</tr>
<tr>
<td>
<div><label><span><a><span>My Label with a really long title</span></a></span><span class="colon">:</span></div></label>
</td>
<td>hsadnsdjfjkasdfhkjadshfjkahsdkfjhasdjkfhjkasdhfjkaf</td>
</tr>
<tr>
<td>
<div><label><span><a><span>My Label</span></a></span><span class="colon">:</span></div></label>
</td>
<td><input value="hsadnsdjfjkasdfhkjadshfjkahsdkfjhasdjkfhjkasdhfjkaf" /></td>
</tr>
</table>
</div>
</div>
and my CSS:
#CONTENT{
font-size: 87%;
padding: 5px;
}
#SIDEBAR{
width: 24em; float: left; margin-right: 0.5%;height: 200px;
border: 1px solid green;
}
#MAIN {
/*margin-left: 25em;*/
border: 1px solid purple;float:right;
}
table div{
position:relative;
}
.colon {
position: absolute;
right:0;
}
label {
margin-right: .4em;
}
In IE7 if you resize the window and make it thinner the table seems to move down the page. I would like to simply show a scrollbar like IE9 and FF.
Live Example : http://jsfiddle.net/aJsg2/19/
You'll need to set a min-width on the CONTENT in the stylesheet to be whatever the minimum width of the sidebar + main content is.
I know there are many variations of this question posted, but none I've found quite provide an answer that works for this case.
I basically have two left floated divs. Inside those two divs are div headers and tabled content.
I want the Div headers (Hour/Minute) to stretch to the width of the tabled content, but they only do this in FF and Chrome, not IE7. IE7 is my works official browser so the one I need it to work with the most.
Here is the CSS:
#ui-timepicker-div { padding:0.2em; }
#ui-timepicker-hours { float:left; }
#ui-timepicker-minutes { margin:0 0 0 0.2em; float:left; }
.ui-timepicker .ui-timepicker-header { padding:0.2em 0; }
.ui-timepicker .ui-timepicker-title { line-height:1.8em; text-align:center; }
.ui-timepicker table { margin:0.15em 0 0 0; font-size:.9em; border-collapse:collapse; }
.ui-timepicker td { padding:1px; width:2.2em; }
.ui-timepicker th, .ui-timepicker td { border:0; }
.ui-timepicker td a {
display:block;
padding:0.2em 0.3em 0.2em 0.5em;
text-align:right;
text-decoration:none;
}
Here is the HTML (did not include tabled content):
<div style="position: absolute; top: 252.667px; left: 648px; z-index: 1; display: none;" class="ui-timepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ui-timepicker-div">
<div id="ui-timepicker-hours">
<div class="ui-timepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
<div class="ui-timepicker-title">Hour</div>
</div>
<table class="ui-timepicker">
</table>
</div>
<div id="ui-timepicker-minutes">
<div class="ui-timepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
<div class="ui-timepicker-title">Minutes</div>
</div>
<table class="ui-timepicker">
</table>
</div>
</div>
Sorry to answer my own question, but after literally hours on this I just found out that by removing the 'ui-helper-clearfix' class from the ui-timepicker-header, all now works well in IE7 and FF