This is my website footer . as you an see it's not well aligned . i just need to align the text . list header and sub listings should come in same alignment . how can i do that ? i've used UL and LI
Since you are using display:inline on the UL elements, all you have to add is vertical-align:top.
You will need the following CSS:
* {
margin:0;
padding:0;
}
#footer {
background-color: rgb(70,221, 93);
height:250px;
padding:40px 0;
width:100%;
}
#footer > div {
text-align:center;
width:24%;
display:inline-block;
vertical-align:top; /* See this line its important for all the 'headers' to align properly */
}
#footer > div > span {
margin:0 0 30px 0;
display:block;
font-weight:bold;
}
a {
display:block;
color:White;
text-decoration:none;
margin-bottom:10px;
}
See this here: http://jsfiddle.net/StARu/
Hope this helps!!!
Related
I have a list with floated <li> elements, the heights are different, thats the problem. I know I know theres an alternative, display:inline-block but this propery adds extra spaces, and I dont know why.
My css:
ul {
padding:0;
margin:0;
list-style:none;
width:700px;
}
ul li {
float:left;
border:1px solid #000;
width:24%;
margin:0 0.3% 20px 0.3%;
font-size:11px;
}
.yellow {
background:yellow;
}
online preview: http://jsfiddle.net/f3CA3/1/
you can do it clearing the sides as:
clear:both;
or maybe
clear:right;
just as an example, could be also;
clear:left;
Hi guys I'm new and making progress in css design. I tried setting the border, margin, padding to 0 of container that has a gray background, but I can't remove the whitespace above, below, left and right. How do I remove it and stretch to fit the browser without extra white space on top, bottom left and right?
Here's what I have so far. Thanks :) http://jsfiddle.net/blackknights/3yhRt/embedded/result/
#charset "utf-8";
/* CSS Document */
#container {
min-width:1024px;
min-height:768px;
background:#CCC;
border:0;
padding:0;
margin:0;
}
#container2 {
width:1080px;
background-color:#FFF;
min-width:1024;
}
#wrapper {
min-width:800;
min-height:600px;
}
#header {
width:900px;
min-height:120px;
background-color:violet;
}
#menubar {
width:900px;
height: 30px;
padding-top:5px;
padding-bottom:5px;
text-decoration: none;
}
ul {
list-style-type:none;
padding:0;
margin:0;
display:inline;
}
li {
list-style-type:none;
background-color:#;
border-right:1px solid #CCC;
float:left;
padding-left:30px; /*adjust space of menu text to each other*/
padding-right:30px;
padding-top:8px;
padding-bottom:8px;
}
a:link {
text-decoration:none;
} /* unvisited link */
a:visited {
text-decoration:none;
} /* visited link */
li:hover {
background-color:#ffd640;
}
ul#mcolor li:hover > a {
background-color:#ffd640; <!-- sets all link color when hovering to yellow -->
}
try:
body{
margin:0px;
padding:0px;
}
Try
body,html
{
min-width: 100%;
}
I agree with #ra_htial
I have updated fiddle for the same
Please refer and reply.
I'm using the Yahoo CSS reset, and all of my CSS uses pixel values rather than relative measures like ems. You'll notice that the bottom right corner of the div containing the form is shifted in Chrome from where it is in FireFox.
Check it out:
http://jsfiddle.net/rhewitt/anMmX/
Chrome:
FireFox
/*header style*/
html{
background:url(../Images/textureslice.png) repeat;
}
body {
font-family:Georgia;
color:#93b9bb;
}
/* Links */
li a{
color:#93b9bb;
text-decoration:none;
}
li a:hover {
text-decoration:underline;
color:#6b8f91;
}
/* Navigation Structure */
#nav {
width:920px;
margin:auto;
text-align:center;
padding-top:120px;
list-style-type:none;
}
#outterBox li{
display:inline-block;
padding:0 50px;
position:relative;
}
#linksLeft{
float:left;
border-top:3px solid #93b9bb;
border-bottom:3px solid #93b9bb;
margin:60px 0 0 25px;
padding:5px 0;
}
#linksLeft li ul {
background-color:#93b9bb;
margin-top:10px;
border-radius:6px;
}
#amy {
clear:both;
font-weight:bold;
letter-spacing:6px;
font-size:120%;
}
#talent{
font-size:70%;
}
#logo {
float:left;
background:url(../Images/logocropped.png) no-repeat;
height:134px;
width:160px;
}
#linksRight{
float:left;
border-top:3px solid #93b9bb;
border-bottom:3px solid #93b9bb;
margin-top:60px;
padding:5px 0;
}
/* Subnavigation menu */
#linksLeft li ul li {
display:block;
padding:10px 15px;
text-align:left;
}
#subNav a{
color:#FFF;
}
#subNav {
position:absolute;
left:10px;
top:15px;
z-index:999;
}
#subnavborder {
margin:10px 10px;
border: 6px solid white;
border-radius:6px;
}
#nav ul ul {
display:none;
}
#nav ul li:hover > ul {
display:block;
}
The text size for the browser was set > 100% (not page zoom). This caused the rendering to be wonky on my machine and also explains why it couldn't be replicated by others.
I cant replicate the difference either.
Did you clear cache in chrome? Try reloading by shift+f5.
I assume it should look like the second screenshot.
http://jsfiddle.net/xLTE4/
Adjust the buttons css right propperty and it should be fine in both browsers, at least it works on my end.
Also consider maybe doing this layout without everything being positioned absolutely.
#submitBtn{
position:absolute;
right:45px;
top:430px;
width:80px;
}
I have the following CSS Menu with float:left; how could I make this center. Where do I add margin:0 auto?
CSS:
/* === 7. Navigation === */
#nav{
width:100%;
margin:30px auto;
}
.ie7 #nav{
padding:10px 0 0 30px;
}
#nav ul li{
margin:0 auto;
}
#nav li{
float:left;
text-align:center;
list-style:none;
font-weight:bold;
}
#nav li a{
margin-right:30px;
text-decoration:none;
color:#5d5e5d;
}
#nav li a:hover{
text-decoration:underline;
}
#nav li a:active{
font-family:inherit;
font-size:inherit;
color:#fff;
}
HTML:
<ul id="nav"><!--Navigation-->
<li id="homenav">Home</li>
<li id="portfolionav">Portfolio</li>
<li id="contactnav">Contact</li>
</ul>
If you don't have an specified width to center your menu you can just declare your list items as display:inline-block instead of float:left and jut set the text-align property to center, like so:
CSS
#nav > li {
display:inline-block;
*display:inline; /* ie7 fix */
zoom:1; /* hasLayout ie7 trigger */
list-style:none;
font-weight:bold;
}
#nav {
text-align:center;
}
This way your menu will center regardless of a width.
Add display property of your #nav as table and margin for both left and right auto.
#nav{
display:table;
margin-left:auto;
margin-right:auto;
}
First your #nav element needs to have a width less than 100%. Then add "margin:0 auto" and it should center.
Take a look at this article. It works for me when ever I am having centering issues. Its also cross-browser compatible.
Inside #nav {...};. Be aware that your nav needs a fixed-width in order for this to work.
I have the following code which prints an img if the current page is selected. The issue i have is if the list item is a varied height i cant position it in the middle of the list item on the far right...
<li><?php echo $child->link($child->title); ?><?php echo (url_start_with($child->url) ? '<img src="images/ico-arrow.png" class="pointer">': null); ?></li>
how can i ammend the "TOP" so that it will position itself vertically no matter what the height using css
#bf-fest-list li { margin:0; padding:5px 25px; position:relative; }
#bf-fest-list li a:hover { color:#ec1c23; text-decoration:none; }
#bf-fest-list li.current { background:#a0a1a4; padding:10px 25px; }
#bf-fest-list li.current a { color:#FFF; }
#bf-fest-list li .pointer { position:absolute; top:10px; left:233px; }
You can align block-level elements using
margin-top: auto;
margin-bottom: auto;
height: 16px;
This should vertically center your image. (replace height with your own height).
Alternatively you can set the vertical-align property of the parent element to center.
I managed to solve it...
The key is making sure the li has a height of 100%. Then add a negative margin half the height of the image to align it vertically and put a position of top:50%.
The above code then changes to:
#bf-fest-list li { margin:0; padding:5px 25px; position:relative; }
#bf-fest-list li a:hover { color:#ec1c23; text-decoration:none; }
#bf-fest-list li.current { background:#a0a1a4; padding:10px 25px; }
#bf-fest-list li.current a { color:#FFF; }
#bf-fest-list li .pointer { position:absolute; top:10px; left:233px; }