I've spent the past two days troubleshooting this problem for my portfolio website, and have yet to find a solution.
The basic structure of the page is a header, a wrapper for content (nav bar and content divs), and the footer. The problem is that the footer is cutting through the middle of the wrapper div, making the content run around and below the footer. I would post a screenshot, but I don't have enough reputation.
It looks like the div containing the résumé info is the only one causing the problem, whereas the footer is only corresponding to the nav bar.
Code is below.
Additional info:
When I tried setting the footer's position to fixed, it disappears completely from the page. I also tried removing the .wrapper div and just using the content divs. I also tried changing the positions of the divs to absolute and relative.
HTML
<!DOCTYPE html5>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel='icon' href='/favicon.png' />
<link rel='stylesheet' href='main.css' />
<link rel='stylesheet' href='webfonts.css' />
<title>Kyle Simmonds: Design, Writing and Web</title>
</head>
<body>
<header>
<!--<a class='headerlogo' href="http://kylesimmonds.com"><h1>Kyle Simmonds</h1></a>-->
<a href='index.html'>
<ul>
<li id='title'>Kyle Simmonds</li>
<li id='subtitle'>Copywriting, Graphic Design and Web Development</li>
</ul>
</a>
</header>
<div class='wrapper'>
<!-- NAVIGATION BAR -->
<nav>
<ul class='firstlevel'>
<li><a href='index.html'>Home</a></li>
<li><a href='resume.html'>Résumé</a></li>
<li><a href='portfolio.html'>Portfolio</a></li>
<li><a href='blog.html'>Musings</a></li>
<li><a href='contact.html'><font color='#f00'>Contact Me</font></a>
<ul class='secondlevel'>
<li>Email: <a href='mailto:kbsimmonds#gmail.com'>kbsimmonds#gmail.com</a></li>
</ul>
</li>
</ul>
</nav>
<div class='content' id='resume'>
<h2>ABOUT ME</h2>
<p></p>
<hr />
<h2>EXPERIENCE</h2>
<h4>Gulliver's Travel</h4>
<ul>
<li id='jobtitle'>Social Media Intern</li>
<li id='subhead'>January–August '12</li>
<li>// Established and managed company's Facebook and Twitter pages</li>
<li>// Created graphics for emails and promotions</li>
</ul>
<h4>TCU Schieffer School of Journalism</h4>
<ul>
<li id='jobtitle'>Website Assistant</li>
<li id='subhead'>August '09–December '12</li>
<li>// Uploaded content onto the school's website through HTML and CSS</li>
<li>// Managed the site by keeping it free of visual and typographical errors</li>
</ul>
<h4>TCU Student Activities</h4>
<ul>
<li id='jobtitle'>Graphic Designer</li>
<li id='subhead'>September '10–December '12</li>
<li>// Designed posters for campus-wide events</li>
<li>// Created invitations and printed materials for special events</li>
</ul>
<h4>Peaceable Kingdom Retreat for Children</h4>
<ul>
<li id='jobtitle'>Summer Staff</li>
<li id='subhead'>Summer '10–'11</li>
<li>// Facilitated activities for campers including high-ropes courses (zip line and rock climbing) and pool activities</li>
<li>// Ensured a safe and fun environment for campers by being lifeguard, CPR and high-ropes certified</li>
</ul>
<hr />
<h2>SKILLS</h2>
<ul id='skills'>
<li>// Advertising</li>
<li>// Copywriting/editing</li>
<li>// Graphic Design</li>
<li>// Photoshop</li>
<li>// InDesign</li>
<li>// Illustrator</li>
<li>// Web Development</li>
<li>// HTML</li>
<li>// CSS</li>
<li>// jQuery</li>
<li>// Audio/Video Editing</li>
</ul>
<hr />
<h2>EDUCATION</h2>
<h4>Texas Christian University</h4>
<ul>
<li id='subhead'>December '12</li>
<li>// BS Strategic Communication</li>
<li>// Music Minor</li>
<li>// Studies in Italian</li>
</ul>
</div>
</div>
<footer>
<p>© 2013 Kyle Simmonds. All rights reserved.</p>
</footer>
<script src='jquery-1.8.3.js'></script>
<script src='jquery-ui-1.9.2.custom.min.js'></script>
</body>
</html>
CSS
body{
font-family:'OpenSans', sans-serif;
margin:0 auto;
padding:0px;
width:100%;
height:100%;
}
a, a:hover,a:active,a:visited{
text-decoration:none;
color:#000;
}
header{
width:100%;
height:70px;
background:#000;
margin:0 auto;
padding:0px;
}
header h1{
margin:0 0 0 10px;
}
header h4{
font-weight:300;
margin:10px;
}
header ul{
width:960px;
margin:0px 0 0 0;
padding:8px 0 0 50;
overflow:hidden;
}
header li{
list-style:none;
display:inline;
}
#title{
font-size:36px;
color:#fff;
}
#subtitle{
font-size:12px;
font-weight:lighter;
font-style:italic;
color:#ddd;
}
.wrapper{
height:100%;
width:960px;
margin:0 auto;
margin-bottom:10px;
padding:0px;
position:relative;
}
nav{
height:100%;
width:300px;
margin:0 auto;
float:left;
padding:10px;
}
nav .firstlevel{
height:100%;
margin:0px;
padding:0px;
display:block;
border-right:solid 2px #000;
float:left;
}
nav .firstlevel li{
list-style-type:none;
font-weight:lighter;
font-size:16px;
padding:10px;
}
nav .secondlevel ul{
display:inline;
}
nav .secondlevel li{
font-size:12px;
margin:0 0 0 -30px;
padding:10px;
}
.content{
height:100%;
width:600px;
margin:10px 0 0 50;
padding:0px;
position:absolute;
}
.content p{
font-size:12px;
}
hr{
border:0;
height:1px;
background:#aaa;
}
#resume{
display:inline;
}
#resume h2{
font-size:16px;
color:#aaa;
margin-bottom:5px;
padding:0;
}
#resume h4{
font-size:14px;
color:#444;
margin-top:15px;
margin-bottom:0;
}
#resume ul{
margin:0 0 0 0px;
}
#jobtitle{
font-weight:bold;
font-size:16px;
margin:3px 0 0 0;
}
#subhead{
color:#aaa;
}
#resume li{
font-size:12px;
list-style:none;
display:block;
margin:0;
padding:0;
}
footer{
background-color:#000;
height:6%;
width:100%;
margin:0 auto;
margin-bottom:0px;
padding:0px 0 0 0;
position:absolute;
clear:both;
}
footer p{
position:relative;
font-size: 10px;
color:#fff;
text-align:right;
margin:8px 10 0 0;
}
Also, if you have suggestions for making this a better question, or for better code, please let me know. Thank you for any help.
Okay, so I have a few suggestions. You can go look at the updated jsFiddle, here:
http://jsfiddle.net/tf4cq/1/
Basically, there isn't any good reason to have .content positioned absolutely. You floated the sidebar (your nav menu), so to make sure the content lines up correctly on the left side, just add a left-padding value equal to or greater than the width of the sidebar.
The reason your footer doesn't wind up where you thought it should is that the two elements above it (the nav bar and the content) are both taken out of the normal document flow as soon as you apply either float or position: absolute (or fixed, for that matter).
Basically, you just need to update your CSS file a bit:
body{
font-family:'Open Sans', sans-serif;
margin:0 auto;
padding:0;
width:100%;
height:100%;
}
a, a:hover, a:active, a:visited{
text-decoration:none;
color:#000;
}
header{
width:100%;
height:70px;
background:#000;
margin:0 auto;
padding:0;
}
header h1{
margin:0 0 0 10px;
}
header h4{
font-weight:300;
margin:10px;
}
header ul{
width:960px;
margin:0;
padding:8px 0 0 50;
overflow:hidden;
}
header li{
list-style:none;
display:inline;
}
#title{
font-size:36px;
color:#fff;
}
#subtitle{
font-size:12px;
font-weight:lighter;
font-style:italic;
color:#ddd;
}
.wrapper{
height:100%;
width:960px;
margin:0 auto 10px;
padding:0;
position:relative;
}
nav{
height:100%;
width:300px;
margin:0 auto;
float:left;
padding:10px;
}
nav .firstlevel{
height:100%;
margin:0px;
padding:0px;
display:block;
border-right:solid 2px #000;
float:left;
}
nav .firstlevel li{
list-style-type:none;
font-weight:lighter;
font-size:16px;
padding:10px;
}
nav .secondlevel ul{
display:inline;
}
nav .secondlevel li{
font-size:12px;
margin:0 0 0 -30px;
padding:10px;
}
.content{
height:100%;
width:600px;
margin:10px;
padding:0;
padding-left:300px;
}
.content p{
font-size:12px;
}
hr{
border:0;
height:1px;
background:#aaa;
}
#resume{
}
#resume h2{
font-size:16px;
color:#aaa;
margin-bottom:5px;
padding:0;
}
#resume h4{
font-size:14px;
color:#444;
margin-top:15px;
margin-bottom:0;
}
#resume ul{
margin:0 0 0 0px;
}
#resume li{
font-size:12px;
list-style:none;
display:block;
margin:0;
padding:0;
}
#jobtitle{
font-weight:bold;
font-size:16px;
margin:3px 0 0 0;
}
#subhead{
color:#aaa;
}
footer{
background-color:#000;
height:6%;
width:100%;
margin:0 auto;
margin-bottom:0px;
padding:0;
position:absolute;
clear:both;
}
footer p{
position:relative;
font-size: 10px;
color:#fff;
text-align:right;
margin:8px 10 0 0;
}
What I (stupidly) realized was that the DOCTYPE says html5, when html is the correct declaration. #TiesonT. thank you for helping. Changing the DOCTYPE solved the problem.
Related
The background image I have in a div on my website shows up in the inspect element and the background image is correctly pathed in css but it is covered up by something in my code ,and I can't seem to find it.If anyone can look at my code and see what the problem is,it would be greatly appreciated.
* {
margin:0;
padding:0;
box-sizing: border-box;
list-style-type:none;
text-decoration: none;
}
body,html {
width:100%;
height:100%;
}
body {
text-decoration:none;
margin:0;
padding:0;
background-color:#000;
}
.wallpaper {
background-image: url('/../images/wallpaper.jpg');
background-repeat:no-repeat;
background-size:100% auto;
background-position:center top;
width:100%;
height:100vh;
}
.nav {
position:absolute;
top:10px;
width:100%;
height:50px;
overflow:hidden;
z-index:1;
}
.nav ul {
text-align:center;
float:right;
display:block;
margin:0 auto;
margin-right:50px;
}
.nav ul li {
float:left;
cursor:pointer;
}
.nav ul li a {
color:#fff;
font-size:16px;
line-height: 50px;
padding:0 10px 7px 10px;
font-family: "Playfair Display";
text-transform: uppercase;
}
.nav ul li a:hover {
border-bottom:2px solid #fff;
}
<body>
<div class="wallpaper">
<p>Hello</p>
</div>
<div class="nav">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contact</a></li>
</ul>
</div>
</body>
Would this work for you?
Change HTML:
<body>
<div class="nav">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contact</a></li>
</ul>
</div>
<div class="wallpaper">
<p>Hello</p>
</div>
</body>
Change CSS:
.wallpaper {
background-image: url('http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg');
background-repeat:no-repeat;
background-size:100% auto;
width:100%;
height:100vh;
}
https://jsfiddle.net/PRW69/r258vvvm/
There is nothing wrong with your code. You need to double-check the path - that's where the issue is. If you share your folder structure, maybe we could help point out the error.
Following CSS - works fine in IE8 or greate but not for IE7 or less:
#main_navi {
list-style:none;
text-align:left;
padding:0px;
margin:0px 0px 20px 0px;
float:left;
}
.dsn li {
display: none;
}
a.main_navi_0 ul {
float:left;
display:none;
}
a.main_navi_0:link, a.main_navi_0:visited {
color:blue;
font-size:16px;
font-weight:200;
font-family: 'Allerta', sans-serif;
height:65px;
padding:40px 10px 0 20px;
display:block;
float:left;
text-align:center;
}
a.main_navi_1:link, a.main_navi_1:visited {
font-size:16px;
font-weight:200;
font-family: 'Allerta', sans-serif;
height:65px;
padding:40px 10px 0 20px;
display:block;
float:left;
text-align:center;
color: #3c94e2;
}
a.main_navi_0:hover, a.main_navi_1:hover {
color:#000;
border-bottom:5px solid #3c94e2;
}
a.sub_navi_0:link, a.sub_navi_0:visited {
color:#696969;
font-size:13px;
font-weight:200;
font-family: 'Allerta', sans-serif;
height:25px;
padding:5px 10px 0 10px;
display:block;
float:left;
text-align:center;
z-index:999;
position:relative;
border-bottom:2px solid #dedad6;
}
a.sub_navi_1:link, a.sub_navi_1:visited {
color:#696969;
font-size:13px;
font-weight:200;
font-family: 'Allerta', sans-serif;
height:25px;
padding:5px 10px 0 10px;
display:block;
float:left;
text-align:center;
z-index:999;
position:relative;
border-bottom:2px solid #3c94e2;
}
a.sub_navi_0:hover, a.sub_navi_1:hover {
color:#000;
border-bottom:2px solid #3c94e2;
}
MY html-file:
<div id="nav">
<div id="logo">
<a target="_self" href="fileadmin/../home.html">
<img border="0" title="4fleet Group" alt="" src="fileadmin/../fileadmin/img/logo.jpg">
</a>
</div>
<div id="main_navi">
<ul>
<li class="dsn">
<a class="main_navi_0" href="xyz.html">Über uns</a>
<ul>
<li>
<a class="sub_navi_0" href="xyz/team.html">Team</a>
</li>
<li>
<a class="sub_navi_0" href="xyz/presse.html">Presse</a>
</li>
</ul>
</li>
*another li with class ="dsn" tree*
</ul>
</div>
My output in IE7 or less than IE7:
Link1
Link2
Link3
I want it that way:
Link1 Link2 Link3
How do I get it to work in IE7. I do have an extra CSS file for IE7. I just don't know the code in CSS.
inline-block; is not a valid value for float
I guess you meant display: inline-block;. This won't work in IE7 though.
What you probably want is float: left; but it's hard to say without seeing any HTML.
I'm new to web design and I'm making a website as a project for my friend. I've got two divs with different content in each div, one for the main content and one for news and other things which I want at the side.
I've sorted the content div out and thats fine its where I want it. But when I go to float the news div right it goes from under the content div (Inside the wrapper div still) to out side the wrapper div but to where I want it. (I know this because for now I've got a blue border round so I can make sure everything is inside where I want it to be.)
Heres my code and css:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style/style.css" type="text/css">
<title>Bake Away</title>
</head>
<body>
<img src="img/logo.png">
<img src="img/ad_bar.png">
<div id="wrapper">
<div id="navBar">
<ul>
<li>Home</li>
<li>About</li>
<li>Responsibility</li>
<li>Working With Us</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</div>
<div id="images">
<img src="img/scroll_1.png">
</div>
<div id="content">
<span>Welcome to the Bake Away Bakery, here you can find out about
all the wonderful things we bake. How you can place orders, who we
bake for, where we're based, apply for jobs and contact head office.</span>
</div>
<div id="news">
<h3>Latest news:</h3>
<span>We've just started our new line of cakes that should
hit the shelves by Monday.</span>
<span class="read">Read More</span>
</div>
</div>
</body>
</html>
body{
margin:0;
padding:0;
width:100%;
background-color:#E6E6E6;
font-family:consolas;
font-size:16px;
font-weight:normal;
text-align:center;
}
img{
margin-top:5px;
margin-right:15px;
}
#wrapper{
width:1000px;
border:1px solid blue;
margin:3px;
margin-left:13px;
text-align:left;
}
#navBar{
color:white;
margin:2px;
margin-right:43px;
height:50px;
font-size:25px;
font-weight:bold;
float:center;
text-align:center;
}
#navBar ul{
list-style-type:none;
}
#navBar li{
display:inline;
}
#navBar a{
text-decoration:none;
background-color:#BDBDBD;
color:black;
padding:2px;
}
#navBar a:hover{
text-decoration:underline;
background-color:#FE2E2E;
color:white;
}
#images img{
margin-left:50px;
}
#content{
width:450px;
margin-left:7px;
margin-bottom:3px;
font-size:16px;
}
#news{
width:300px;
}
Well, you can add display: inline-block;, Simple as hell ;)
Add display: inline-block to the following css:
#navBar {
color:white;
margin:2px;
margin-right:43px;
height:50px;
font-size:25px;
font-weight:bold;
float:center; // there is nothing like this. Wrong text-align:center;
display: inline-block;
}
#images img {
margin-left:50px;
display: inline-block;
}
#content {
width:450px;
margin-left:7px;
margin-bottom:3px;
font-size:16px;
display: inline-block;
}
#news {
width:300px;
display: inline-block;
}
Check this JSFiddle
display:flex is how you do it.
Nested list navigation is not displaying the second list as I'd expect (block listed down vertically). Instead all items are placed directly on top of one another.
http://jsfiddle.net/HL69H/3/
<div id="linksLeft">
<ul class="menu">
<li class="current">about</li>
<li class="current" id="active">portfolio
<ul class="subMenu" id="subNav">
<li>editorial</li>
<li>advertising</li>
<li>packaging</li>
<li>photography</li>
</ul>
</li>
</ul>
</div>
#nav {
width:48em;
margin:auto;
text-align:center;
padding-top:6em;
list-style-type:none;
}
#outerBox {
margin:0;
padding:0;
}
#linksLeft{
float:left;
border-top:2px solid #93b9bb;
border-bottom:2px solid #93b9bb;
margin-top:60px;
padding:5px 0px;
}
#linksLeft li {
display:inline-block;
padding:0 3em;
position:relative;
}
#linksLeft li ul li {
display:block;
}
#subNav li{
position:absolute;
padding:1em;
left:50%;
/*display:none;*/
}
#linksRight li{
display:inline-block;
padding:0 3em;
position:relative;
}
The position: absolute; was stacking them. Changing this to relative, and use absolute positioning on the parent container to position it where you want it.
#subNav li{
position:relative;
padding:1em;
left:50%;
/*display:none;*/
}
the problem is your css for '#subnav li'. The style you apply you want for the ul but not the li.
CSS
#subNav {
position:absolute;
padding:1em;
left:0;
/*display:none;*/
}
#menu li{
position:relative;
}
That gives you what you want
I would like to center my floated menu(ul tag)in my page and can't figure out what's wrong with my css. Please help. Thanks.
My html
<section>
<div id='index'><img src='images/index_pic.png' title='index Picture'/></div>
<nav>
<ul> ////I want to center this menu, but the 3 buttons all float to left.
<li id=browser ><a href=#></a></li>
<li id=user_management><a href=#></a></li>
<li id=log_out><a href=#> </a></li>
</ul>
</nav>
</section>
and my css
section {
color: blue;
margin: 0 auto;
color:blue;
width:980px;
height:700px;
}
ul{
list-style:none;
}
#browser a{
color:red;
width:270px;
height:32px;
display:inline-block;
float:left;
background-image:url('../images/browser_BT.jpg');
}
#user_management a{
color:red;
width:270px;
height:32px;
display:inline-block;
float:left;
background-image:url("../images/user_management_BT.jpg");
}
#log_out a{
color:red;
width:270px;
height:32px;
display:inline-block;
float:left;
background-image:url('../images/log_out_BT.jpg');
}
section #index img{
padding:3px;
border:1px solid #a6a6a6;
}
Try this:
ul {
list-style: none;
width: 810px;
margin: 0 auto;
}