I'm working on the site www.albafitness.com
As you can see, the social media icons and the footer menu are not horizontally aligned. Can someone tell me how to do this please?
Is there any particular reason why you use table for your social icons? It is recommended to use ul tag for things like this.
Try this CSS:
.footer_content {
border-top: 1px solid #1F2024;
clear: both;
float: left;
margin: 30px 30px 0;
padding: 20px 0 0;
width: 940px;
text-align: center; // Align both elements horizontally
}
table.cnss-social-icon tr td, table.cnss-social-icon, table.cnss-social-icon tr {
background: none repeat scroll 0 0 transparent !important;
border: medium none !important;
margin: 0 !important;
padding: 0 !important;
vertical-align: middle !important;
display: inline-block; // inline-block will make it inherit rules from text-align rule
}
.footer_menu {
padding: 10px 0;
// float: right; //float will always pull your element to one side. This should be removed.
}
TO position something, you have three super powers:
1. POSITION ABSOLUTE
2. VERTICAL ALIGN
3. FLOAT
this time we are using no. 1
CSS:
.footer_content_wrraper
{
position:absolute;
bottom:0;
}
HTML:
<div class="footer_content_wrapper">
....../
</div>
if you need to keep the same html you have, you can just use a negative margin on the menu
.footer_menu {margin-top: -21px}
but you will need remove it will a media query when you get down to a mobile size. so they don't overlap
Related
My CSS positioning skills have always been truly terrible. I'm looking to place my nav bar next to my logo, as well as making it move with the page and not get all screwy on anything smaller than a maximized window on a 1080p screen.
What it currently looks like: http://5.9.78.201/abellant/
It will likely look odd if you're on a different screen size.
I've (so far) used methods found on here, to no avail, using relative, absolute, and even clearing before giving up on it.
Can anyone show me where I'm screwing this up? I'm quite embarrassed by the fact that of all things, my positioning is just so bad.
Thank you.
If you want to position your logo and navbar at the center of the page::
Set #header "display:inline-block", "height:auto" and "text-align: center;" and remove all the css you have added to #logo and #navigation
#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
text-align: center;
}
And if you want to set your logo and navigation side by side::
#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
}
#logo {
float: left;
width: 50%;
}
#navigation {
float: right;
margin: 40px;
}
If you want to move your header section with page scroll. Set #header to "position:fixed".
So part of the problem is that you have a fixed left and right margin. Remove the fixed left and right margin for #logo and #navigation and do something like the following in your CSS:
#header {
margin: 0 auto; /* 0 px on top and bottom, auto on left and right => centered for a block element */
width: 960px; /* You need a width that will accomodate the logo and nav */
}
To make this work at other sizes, you'll need to look into CSS3 breakpoints. Here is a tutorial:
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en
I solve your problem.
.container {
min-width: 500px;
position: relative;
text-align: center;
}
#logo {
display: inline-block;
vertical-align: middle;
}
#navigation {
display: inline-block;
}
If you noticed that the logo and the menu are NOT perfectly center it's because your image has a small white space, if you could delete that space and replace the new image it will be PERFECTLY center :)
I'm trying to make a banner on my webpage, the part on the top that is 700px wide and 80px high.
Code looks like:
<div class="container-narrow" style="heigth: 80px;">
<img src="#" width="52" height="52" alt="my logo" />
<ul>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
Css:
.container-narrow
{
margin: 0 auto;
max-width: 700px;
background: yellow;
}
ul
{
float: right;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
a
{
float: right;
width: 6em;
color: black;
text-decoration: none;
padding: 0.2em 0.6em;
}
a:hover {color: #ccc; text-decoration: none;}
li {display: inline;}
What I want is the image and the horizontal menu to be vertically aligned in the center of the 80px. the logo to the left and the menu to the right.
I've tried to set the height and then padd/margin my way to get the job done but it feels rubbish...
Problem:
ul has a width:100%; if you give it a black border you will see that its occupying the width of the page, means it has no space to reside on the left of the logo inside the yellow header.
Removing this width will give the following result: http://jsfiddle.net/YBVe6/
Now since the header has a fixed max width, which is 700px, there's many ways to center the logo and the menu.
Fastest way I can think of is the following:
Give ul a display: inline-block;, (remove float: right;) then give the header a text-align: center;, here's the result : http://jsfiddle.net/YBVe6/1/
And if you want the menu to be displayed in the upper part, just add vertical-align: top;.
To start of, it's a good practice if you have an external CSS, don't put additional CSS in your HTML blocks:
<div class="container-narrow">
and put the height style in your css sheet, as you have a class setup for your div there anyway.
Second, making typo's is a pain if you want your CSS to work properly, so instead of heigth you should use height, will make you div actually 80px high.
Third of all: margins are there the position elements. Use them!
.container-narrow
{
height: 80px;
margin: 0 auto;
max-width: 700px;
background: yellow;
}
img
{
margin-top:14px;
}
ul
{
float: right;
padding: 0;
margin: 0;
list-style-type: none;
margin-top:25px;
}
a
{
width: 6em;
color: black;
text-decoration: none;
padding: 0.2em 0.6em;
}
a:hover {color: #ccc; text-decoration: none;}
li {display: inline;}
Edit
This is mostly applicable for vertical alignment. If you want to auto-center horizontally, you can make use of the margin:auto concept. This is possible because a page can't extend beyond the browser width (browser height can extend as you have scrolling available as default behavior).
I have a template which has 3 equally spaced boxes, the problem is that i am unable to get the last box to align correctly the first two elements.
how do i add a 3 block equally spaced box in css without tables?
my attempt http://khine.3b1.org/activities/activities.html
any advise much appreciated.
thanks
Make all three boxes float left:
.box ul.supports-list li.last {
width: 200px;
position: relative;
float: left;
}
And provide more width overall:
.box .holder .frame {
background: url(./box-b.gif) no-repeat 0 100%;
width: 620px;
padding: 18px 4px 42px 16px;
}
try to change the next CSS rules to:
.box ul.supports-list {
font-size: 11px;
list-style: none outside none;
margin: 7px 0 0;
overflow: hidden;
padding: 0;
}
.box ul.supports-list li.supports-list-item {
display: list-item;
float: left;
outline-style: none;
width: 200px;
}
.box ul.supports-list li.last {
float: left;
width: 200px;
}
My guess would be to put each box into a div, and then adjust each div's margin-left and margin-top properties to get them to all line up. You'd also want to set the float property of all of the boxes to left. It might not be the most-widely-accepted way of doing things, but that's how I usually solve problems like this.
You can take a look at this example jsFiddle I did for you here: http://jsfiddle.net/Cwca22/g8x5E/ - Hope this helps!
I want to center my web page footer and create a reasonable gab between it and the above content. Currently, the footer has a line and paragraph joined to the above content. I can push down the content but the line does not move. I am sure the property I am missing out in my css style sheet. Could someone help?
This is my html mark up:
<div id="footer">
<p>Copyright (c) 2010 mysite.com All rights reserved</p>
</div>
Which css property can I use to solve this problem? A sample would be appreciated. Thanks.
#footer{
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Center a div horizontally? Typically done by setting margin: 0 auto, or margin-left: auto; margin-right: auto.
And if you want a gap above it, give it a top margin.
Use margin:auto to centre blocks with CSS, and margin-top or padding-top to make a gap above it:
#footer {
margin-left:auto;
margin-right:auto;
margin-top:2em;
}
I've used 2em for the top margin; feel free to change that as you like, even to a fixed pixel size if you prefer. You can also use padding-top as well as or instead of margin-top, depending on exactly what you need to achieve, though the centering can only be done with margin left/right, not padding.
The above code can be condensed using the shorthand margin code, which lets you list them all in the same line of code:
#footer {
margin: 2px auto 0 auto;
}
(sequence is top, right, bottom, left)
hope that helps.
I solved it with this:
#footer {
width: 100%;
height: 28px;
border-top: 1px solid #E0E0E0;
position: absolute;
bottom: 0px;
left: 0px;
text-align: center;
}
You can center the text with the following CSS
#footer {
margin: 0 auto;
}
If you want more space on top add
margin-top: 2em;
after the previous margin line. Note that order matters, so if you have margin-top first it gets overwritten by margin rule.
More empty vertical spacing above the footer can also be made using
padding-top: 2em;
The difference between margin and padding can be read about W3C's CSS2 box model. The main point is that margin makes space above the div element's border as padding makes space inside the div. Which property to use depends from other page elements' properties.
I used this code for bottom copyright.
.footer-copyright {
padding-top:50px;
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Panel01 {
vertical-align:bottom;
bottom: 0;
margin-left:auto;
margin-right:auto;
width: 400px;
height: 100px;
}
Notes:
#Panel1 is the id for a DIV and the above code is CSS.
It is important that the DIV is large enough to contain the items
within it.
#footer{
text-align:center
}
.copyright {
margin: 10px auto 0 auto;
width: 100%;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: normal;
text-align: center;
color: #ccbd92;
border-top: 1px solid #ccbd92;
}
Although li.textmenu has width: 140px, padding: 5px, and div.textmenu has width: 150px, the one list item i've made so far has a big left margin, and extends beyond the right edge of the div by at least 30px. What could be causing this and how can I restrict it's width?
http://www.briligg.com/frailty.html
CSS
div.textmenu {
background-color: #3b3b3b;
float: left;
width: 150px;
margin: 30px 10px 0 30px;
}
li.textmenu {
background-color: #4a4a4a;
margin: 0;
padding: 5px;
border: none;
width: 140px;
list-style: none;
text-align: right;
}
HTML
<div class="textmenu">
<ul>
<li class="textmenu">
<a class="pink" href="http://www.briligg.com/frailty.html#culture">Stress Causes Addiction</a>
</li>
</ul>
</div>
Did you add a zip/uni reset to the top of your css file?
* { margin:0; padding:0; }
( Put that exactly as is at the very top of CSS to override browser default margins/padding ).
Most likely the ul is being given default padding/margin, so this is to counter-act it.
Make sure the ul does not have padding and margin of its own, by resetting it with padding:0;margin:0;
The ul has a margin and padding set it on by the browser. You'll want to remove this:
div.textmenu ul {margin:0;padding:0;}
Only the padding affects the width, but you'll probably want to take off the margin too.
Its like smeridan said. There are for all html elements preset styling properties.
I recommend you to use the reset css by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/
You can include it at the top of your document. After that you have more control about your desired styling.
Make sure you've calculated the exact width and height of the Li you want to fix inside the Div by making sure the DIV has enough space within it.
div.textmenu {
background-color: #3b3b3b;
float: left;
width: 150px;
margin: 30px 10px 0 30px;
}
li.textmenu {
background-color: #4a4a4a;
margin: 0;
padding: 5px;
border: none;
width: 140px;
list-style: none;
text-align: right;
}
Since you made the padding: 5px, calculated by the 2xwidth + height of the Li, the Li should exceed 150px width of the Div box. you can fix by reducing your padding pixel of the LI.