I am trying to make a big footer. I have tried my best to make the links displayed inline but I am unable to do so. Please help out. Thanks
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#footer{
width:auto;
height:600px;
background:url(footer.png);
}
#footer div{float:left; width:43.5%}
#footer div:nth-child(2n+1){clear:none}
#footer div:nth-child(3n+1){clear:left}
#footer div li a{float:none; width:auto; display:inline; font-size:1em; padding:0; line-height:1.5em; background-color:transparent}
#footer .contribute{border:none; background-color:transparent}
#footer div h4{transition:color 0.3s; -moz-transition:-color 0.3s; -ms-transition:color 0.3s; -o-transition:color 0.3s; -webkit-transition:color 0.3s}
#footer div:hover h4{color:#e53b2c}
#footer div:nth-child(2n){clear:left}
#footer div{width:100%; clear:both}
#footer .contribute{background-color:rgba(255,255,255,0.8); border-bottom:10px solid rgba(0,0,0,0.025); background-color: transparent;
border: medium none;}
#footer div li {display:block; width:94.5%; float:left; font-size:0.95em; }
#footer li{padding:0.125em 0}
#footer a{border-bottom:1px solid rgba(0,0,0,0.1)}
#footer a:hover{border-bottom:1px solid rgb(65,183,216)}
#footer a:active, #footer a:focus { background-color:#e53b2c; border: none; }
</style>
</head>
<body>
<div id="footer">
<div class="contribute">
<h4>Best of Design</h4>
<ul>
<li>Responsive Design</li>
</ul>
</div>
<div class="contribute" >
<h4>Best of Coding</h4>
<ul>
<li>JavaScript & jQuery</li>
</ul>
</div>
<div id="contribute">
<h4>Smashing Hub</h4>
<ul>
<li>Smashing Magazine</li>
</ul>
</div>
<div class="contribute">
<h4>Other Resources</h4>
<ul>
<li>Free Anniversary eBook</li>
</ul>
</div>
</div>
</body>
</html>
Here is a visual of what design I am trying to make,
The typical way you see people accomplish this problem is by using the float property. Note that I added overflow: hidden to #footer to clear the floats.
#footer { overflow: hidden; }
.contribute {
float: left;
width: 25%; }
http://jsfiddle.net/Wexcode/nxvdG/
If you're trying to stick with using inline, you will use similar code, only inline elements behave differently when stuck next to each other. Whitespace in your markup, ie </div> <div> will produce a gap between the two elements. To make it so the elements touch, you need to remove the white space in your markup, like </div><div>.
.contribute {
width: 25%;
display: inline-block; }
http://jsfiddle.net/Wexcode/TkxKm/
You can do this with float: left; instead of display: inline;.
The problem with your CSS is that you override the style for #footer div a lot:
#footer div{width:100%; clear:both}
This is one of these and its the main reason for breaking the layout.
Try to remove part of the style and refactor it to clean out a bit. You will thank us for this.
"If you can't understand your own code, its time to take a break and refactor."
Related
I'm confused in this specific part of code. If anyone could explain to me, it'd be greatly appreciated!!
I'm making a navbar and it looks like this:
This is part of the CSS I'm confused about:
img{
weight:100px;
height:100px;
border-radius: 100%;
}
body{
margin:0;
}
header{
background-color: lightblue;
}
/*don't really understand this part*/
header::after{
content:" ";
display:table;
clear:both;
}
.container{
width:80%;
margin:0 auto;
}
.logo{
float:left;
padding:5px 0;
}
nav{
float:right;
}
nav ul{
margin:0;
padding:0;
list-style: none; /*remove HTML bullets*/
}
nav li{
display:inline-block;
margin:0 25px;
padding-top:55px;
font-family: 'Montserrat', sans-serif;
}
nav a{
color:#444;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color:black;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My logo</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--a navbar should be in header section becuase it's not the content-->
<header>
<div class="container">
<img class="logo" src="logo.jpg" alt="">
<nav>
<ul>
<li>Home</li>
<li>Product</li>
<li>Services</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
header::after{content:" "; display:table; clear:both; }
So my question is the background color in the pic would disappear without this part of code and I don't understand why, esp the display:table and clear:both. I do have logo and the li part float on both sides and clear:both doesn't stop them from floating and the background color would still show. I'm confused as why it's there and how display and clear both would affect the background color. Thanks!!
It is because you have floated all the content of header. This is like giving them all an absolute position and removes them from the flow of their parent which means the parent container, with no other content, will act as if it is empty. You could also give the header a height to see the background color, however, that might make it harder to adjust based on the content wrapping.
The CSS in question adds some content via the ::after's content prop. Then you clear the floats to make the content be seen by header, which is technically it's parent. The display table could be display block as well. It just makes sure that the after acts like an element would if it were placed in the html. But instead you are faking it with CSS.
I am making a personal bio site, and I want different color backgrounds for the header, body, and footer. I found this website, http://www.chimengxi.com/ and that is kinda what I am going for. In the end, I hope to get my header to be horizontal, instead of stacked. Some 3 toned color scheme would be awesome if its doable.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>My Personal Website</title>
</head>
<body>
<div class="wrapper">
<ul class="navbar">
<li>Home
</li>
<li>About Me
</li>
<li>School
</li>
<li>Contact Information
</li>
</ul>
<h1>Terrence Horgan <br> Information Science Major </h1>
<h2><u>My Personal Website...About ME!</u></h2>
<p id="summary">Here is a little about myself....</p>
<p>My name is Terrence Horan, I love in Montour Falls, NY, not to far from Ithaca, NY. I attend Cornell University and am majoring in Information Science, and hopefully will get a minor in Computer Science. I love anything that involves technology,however if you would like to read more, dont be shy! Come in a browse my website!</p>
<div class="footer">Call me (607-425-0760)<address>Email Me tmh233#cornell.edu.<br></address>
</a>Copyright # 2014 Terrence Horgan</div>
</div>
</body>
</html>
CSS
body {
background-color:orange;
height:100%
}
ul.navbar {
background-color:orange;
text-align:right;
font-size:175%
}
.navbar ul {
height:auto;
padding:0;
margin:0;
background-color:#f2f2f2;
border-bottom:1px solid #ccc;
display:inline-block
}
.navbar li {
display:inline-block;
padding:20px;
margin-left:auto;
margin-right:auto
}
h1 {
position:relative;
bottom:85px
}
h1 a:hover, a:active {
color:#FFF;
background-color:#3CF;
text-decoration:none
}
h1 a:visited, a:link {
color:#F36;
text-decoration:none
}
p {
width:30%;
font-size:120%
}
#summary {
font-size:135%;
font-weight:700
}
.footer {
display:inline-block;
position:relative
}
Wrap your navbar in a div. Style the div background-color however you want.
Wrap the content below the navbar and above the footer in another div. Style accordingly.
Set background-color of footer to whatever you want.
Here is an example of changing the colors. I made them quite noticeable by coloring them green and yellow and adding a few simple CSS styles to make them fit accordingly (floats, text-aligns). Look at the code below, and please note I pasted your CSS at the top. All you need to do is paste the code between the tags into your CSS file.
<!DOCTYPE html>
<html>
<head>
<style>
body {
height:100%
}
ul.navbar {
background-color:green;
text-align:right;
font-size:175%;
padding-bottom: 10px;
text-align: center;
}
.navbar ul {
height:auto;
padding:0;
margin:0;
background-color:#f2f2f2;
border-bottom:1px solid #ccc;
display:inline-block;
float: left;
}
.navbar li {
display:inline-block;
padding:20px;
margin-left:auto;
margin-right:auto;
font-size: 25px;
margin-top: 20px;
}
h1 {
float: left;
font-size: 24px;
text-align: left;
}
h1 a:hover, a:active {
color:#FFF;
background-color:#3CF;
text-decoration:none
}
h1 a:visited, a:link {
color:#F36;
text-decoration:none
}
p {
width:30%;
font-size:120%
}
#summary {
font-size:135%;
font-weight:700
}
.footer {
display:inline-block;
position:relative;
background-color: yellow;
width: 100%;
text-align: center;
}</style>
<meta charset="utf-8">
<title>My Personal Website</title>
</head>
<body>
<div class="wrapper">
<ul class="navbar">
<h1>Terrence Horgan <br> Information Science Major </h1>
<li>Home
</li>
<li>About Me
</li>
<li>School
</li>
<li>Contact Information
</li>
</ul>
<h2><u>My Personal Website...About ME!</u></h2>
<p id="summary">Here is a little about myself....</p>
<p>My name is Terrence Horan, I love in Montour Falls, NY, not to far from Ithaca, NY. I attend Cornell University and am majoring in Information Science, and hopefully will get a minor in Computer Science. I love anything that involves technology,however if you would like to read more, dont be shy! Come in a browse my website!</p>
<div class="footer">Call me (607-425-0760)<address>Email Me tmh233#cornell.edu.<br></address>
</a>Copyright # 2014 Terrence Horgan</div>
</div>
</body>
</html>
I am new to CSS but loving it so far. But, I've hit a road block with my code. I'm almost there but need some proper guidance.
I have provided my website where I'm attempting to place my logo to the left side of my nav. I want the site content CENTERED with a width of 960px and 0px from the top (against the top of the browser). I am using the CSS display: inline with li selectors to try to achieve my goal.
I'm trying to also get the inline nav to be right up against the logo. I'm also trying to mimic the logo's top 4px border with the CSS a:hover selector on the nav. I want this to be at the margin-top: 0px in the browser.
Here's the link to my almost correct logo/nav layout:
http://multimediaxchange.com/vls/index.php?page=home
Here's my CSS CODE:
.topbar {
width:960px;
height:87px;
text-align:center;
}
.topbar-inner {
width:960px;
margin:0 auto 0 auto;
text-align:center;
}
.logo {
margin-top:0px;
display:inline;
}
img {
float:left;
border: 0;
padding: 0;
margin: 0;
}
.menu {
display:inline;
margin-top:0px;
}
.menu > ul > li {
display:inline-block;
position:relative;
border-top:4px solid #FFF;
margin-right:0px;
padding-top:40px;
min-width:80px;
}
.menu > li {
display:inline-block;
list-style:none;
margin-top:50px;
}
.menu li a {
color: #000;
display: block;
text-decoration:none;
}
.menu li:hover {
border-top-color: #039;
}
.menu li:hover a {
color:#039;
}
body {
font-family:Arial, Helvetica, sans-serif;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.content {
height:500px;
padding:0px 20px 20px 20px;
text-align:left;
font-size:12px;
}
.footer {
border-top:1px solid #DFDFDF;
width:960px;
margin: 0 auto;
font-size:11px;
text-align:center;
}
Here's the HTML Code:
<?php
// Load Setup document:
include('_config/setup.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php echo $page_title; ?></title>
<link rel="stylesheet" type="text/css" href="_css/styles.css">
</head>
<body>
<div class="topbar">
<div class="topbar-inner">
<div class="logo"><img src="/vls/_images/mylogo.png" height="87" width="287"/></div>
<!-- logo -->
<div class="menu"><?php include('_template/nav_main.php'); ?></div>
<!-- menu -->
</div>
<!-- topbar-inner -->
</div>
<!-- topbar -->
<div class="bdy_hdr"><?php get_page_name($dbc, $pg); ?></div>
<div class="content"><?php get_page_body($dbc, $pg); ?></div>
<div class="footer"><?php include('_template/footer.php'); ?></div>
</body>
</html>
Thanks!
everything is right but you need to add this property margin:0 auto; not to the topbar-inner class but to the topbar class, and this like like this. so change present
.topbar {
width:960px;
height:87px;
text-align:center;
}
to
.topbar {
width:960px;
height:87px;
text-align:center;
margin:0 auto;
}
The secrets are in the .topbar class. Remove the text-align:center, and instead add a margin:0 auto. Should look like this:
.topbar {
width:960px;
height:87px;
margin:0 auto;
}
The text-align:center prevents the <ul> from being centered in the remaining space after the image floats, so the top border looks seamless.
The margin:0 auto centers the whole kaboodle.
Add this line:
.menu ul {
margin:0;
}
and it will be on the top of the browser. My comments about a lot of extra junk still apply though :)
EDIT
Here's your page, with the "minimalist" markup and styling I'm talking about. There's one or two minor tricks a beginner may not know, but you should easily understand pretty much everything.
Just slice out all the crap extra divs, basically, and you can chase down problems quicker, target elements easier, have a lighter page (in bytes, that is) and generally add a bit of elegance to your solutions.
This rebuild does everything the original did, in half the space.
HTML:
<body>
<div class="topbar">
<img src="logo.png" height="87" width="287"/>
<ul class='menu'>
<!-- Not great practice to stagger </li> like this,
but a good way to avoid rogue padding. -->
<li>Home
</li><li>Staffing
</li><li>Jobs
</li><li>Training
</li><li>GSA
</li><li>Why Us
</li><li>Clients
</li><li>Contact</li>
</ul>
</div>
...the rest of your page...
</body>
CSS:
body {
font-family:Arial, Helvetica, sans-serif;
margin:0;
}
.topbar {
width:960px;
height:87px;
margin:0 auto;
}
.topbar img {
float:left;
border: 0;
}
ul.menu {
margin:0 0 0 287px;
padding:0;
}
ul.menu li {
display:inline-block;
position:relative;
border-top:4px solid #FFF;
list-style:none;
padding-top:40px;
min-width:80px;
}
ul.menu li a {
color: #000;
display: block;
text-decoration:none;
}
ul.menu li:hover {
border-top-color: #039;
}
ul.menu li:hover a {
color:#039;
}
It is a good practice to put your divs inside a container, something like this:
<div id="container">
<div class="topbar">
<div class="topbar-inner">
<div class="logo">
<img src="/vls/_images/mylogo.png" height="87" width="287"/>
</div>
<div class="menu">
<?php include('_template/nav_main.php'); ?>
</div>
</div>
</div>
<div class="bdy_hdr">
<?php get_page_name($dbc, $pg); ?>
</div>
<div class="content">
<?php get_page_body($dbc, $pg); ?>
</div>
<div class="footer">
<?php include('_template/footer.php'); ?>
</div>
</div>
Then do just this in your CSS:
.topbar{
margin:0 auto;
}
I suggest you to give a width to .bdy_hdr, .content and .footer and then do the same with them, i.e:
.bdy_hdr,
.content,
.footer{
width:960px;
margin:0 auto;
}
As shown in image below their is little gap between two red regions..
I have set all the margins and paddings to zero but it is still giving that 4px(i think) margin in between.. I want to know why that is appearing there...
two red regions are given floating to left and displayed as inline-block.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>learning...</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="_body">
<div id="_header">
<img src="images/header_index.jpg"/>
<br />
<h3> this is just a view of uttrakhand from a camera come here and explore the whole beauty...</h3>
</div>
<div id="_navigation">
<ul>
<li>Destinations</li>
<li>Culture</li>
<li>Adventure</li>
<li>Hotels</li>
<li>Wild Life</li>
<li>History</li>
<li>About</li>
</ul>
</div>
<div id="_left">
this is left region of the page..
</div>
<div id="_content">
this is content region of the page
</div>
<p id="background-viewer">..</p>
</div>
<pre>this is something written inside pre<a></a></pre>
<script src="JavaScript.js"></script>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
#_left , #_content , #_navigation > ul {
display:inline-block;
}
#_body {
width:1200px;
background:-webkit-linear-gradient(top,#0000CC,#3999FF);
margin:0px auto;
padding:0px;
}
/*Here comes all the stylin gog header*/
#_header {
}
#_header > img {
width:1200px;
}
#_header > h3 {
border-bottom:3px solid black;
font-weight:normal;
text-align:center;
text-transform:capitalize;
padding:10px;
}
/*Here ends styling of header*/
/*here comes styling of navigatin bar*/
#_navigation {
margin:20px 20px 10px 20px;
}
/*here remains 960px for navigation bar*/
#_navigation > ul {
list-style-type:none;
}
#_navigation ul > li {
width:135px;
display: inline-block;
padding: 5px 15px 5px 0px;
font-family: Verdana;
font-size: 22px;
vertical-align: middle;
background:-webkit-linear-gradient(top,blue,aqua);
border-bottom-right-radius:5px;
border-top-left-radius:5px;
}
#_navigation ul > li:active {
background:-webkit-linear-gradient(bottom,blue,aqua);
}
#_navigation a {
text-decoration: none;
}
#_navigation a:visited {
color:black;
}
#_navigation a:active {
color:black;
}
#_navigation a:focus {
color:black;
}
/*here ends styling of _navigation*/
/*this part is for _left and _content*/
#_left {
width:400px;
padding:0px;
background-color:red;
min-height:100px;
}
#_content {
width:795px;
background-color:red;
min-height:100px;
}
/*here ends all the styling of mid region*/
Here is all of my code..
javascript file has nothing so i didn't put that here...
Your divs are incorporated in a inline formating context and a whitespace is generated by the new line in the html document
<div id="_left">
this is left region of the page..
</div>
<div id="_content">
this is content region of the page
</div>
You may avoid that by putting together the closing and ending tag of those divs as so
<div id="_left">
this is left region of the page..
</div><div id="_content">
this is content region of the page
</div>
A good idea is to use google chrome or firefox to inspect the elements you want to understand more. Just right click on your red block, inspect element. This then shows you the css applicable to the elements, including any inherited from other elements. You can live test alternatives by either editing the css code in the inspector or by editing the style sheet also presented by the inspector.
Ok, try
#_content {
float:left
}
here's fiddle: http://jsfiddle.net/cfgXX/
I am having an issue with this horizontal menu bar. It is suppose to fit the window (width wise) but continues a little bit further than it should. It is also suppose to be top:0;left:0;
Everything I do either one of two things works. Either I align it the top left but the width is too large, or it's not aligned and the width does fit.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website Title</title>
</head>
<body>
<style>
body{
}
.bg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -5000;
}
#cssmenu ul {
list-style-type:none;
width:100%;
position:absolute;
display:block;
height:33px;
font-size:.6em;
background: #76B3F1 url(images/menu-bg.png) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:1px solid #000;
margin:0;
padding:0;
top:0;
left:0;
}
#cssmenu li {
display:block;
float:left;
margin:0;
padding:0;
}
#cssmenu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
font-weight:normal;
}
#cssmenu li a:hover,.current {
color:#fff;
background: #A3BAE6 url(images/menu-bg.png) repeat-x top left;
text-decoration:none;
}
#cssmenu .current a {
color:#fff;
font-weight:700;
}
</style>
<div id="cssmenu">
<ul>
<li class='active '><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div id="background">
<img src="background/001.JPG" class="bg"/>
</div>
</body>
</html>
Add the box-sizing: border-box; css property.
This tells the menu to take the border into account when calculating '100%'
The answers so far seem cumbersome, so to re-post my comment as an answer:
Simply change the width:100% to left:0;right:0 in the ul style. This is supported in everything better than IE6. If you need to support IE6, use its expression syntax:
width:expression((this.parentNode.offsetWidth-2)+'px')
If you don't want to use the CSS3 property box-sizing as Rockafella suggested, you can try this edit of your CSS.
I got rid of your position: absolute, added 1px padding to the <div> container, and added -1px margin to the <ul>. This way, the width: 100% on the <ul> makes the width of the content box not include the 1px border you specified.
add overflow-x: hidden to your body
Instead of using a border, how about using an inset box-shadow? You'd need to get your prefix on, and it wouldn't work in older IE. As far as I'm concerned, the industry has turned the corner on older IE and understands that it's not worth the trouble giving it all the shadows and rounded corners.
box-shadow:inset 0 0 1px 0 #000;