Hi,
I am trying to code a design but I cannot get it aligned correctly no matter what I try it wont stay in the same place nicely.
Here is what it looks like
http://postimg.org/image/tuctjuglz/
Here is what it is meant to be like
http://postimg.org/image/4aajdev87/
and here is my code hopefully it can be fixed.
<!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>a</title>
<link rel="stylesheet" type="text/css" href="style/css/reset.css"/>
<style>
body {
color:#ffffff;
background:#1f1f1f url(style/images/background.png) repeat-x center top;
}
.profileMidSection {
height:239px;
width:860px;
color:#ffffff;
background:#2e2e2e;
clear:both;
}
ul.profileMidSection {
list-style:none;
vertical-align:middle;
line-height:47px;
}
ul.profileMidSection li {
height:47px;
vertical-align:middle;
clear:both;
}
ul.profileMidSection li a{
height:47px;
width:175px;
background:#333333;
text-decoration:none;
color:#737373;
float:left;
text-align:left;
padding-left:25px;
font-family: 'Open Sans', sans-serif;
font-weight:600;
font-size:10.5pt;
margin-left:-40px;
}
ul.profileMidSection li a:hover{
color:#ffffff;
border-left:3px solid #83bdf2;
width:172px;
}
.profileCaption {
background:#3c3c3c;
width:200px;
height:35px;
font-family: 'Open Sans', sans-serif;
font-weight:600;
font-size:11pt;
color:#ffffff;
border-radius:0 0 4px 4px;
-webkit-border-radius:0 0 4px 4px;
}
</style>
</head>
<body>
<div class="profileMidSection">
<ul class="profileMidSection">
<li>Recommended Games</li>
<li style="margin-top:1px;">Your Friends Played</li>
<li style="margin-top:1px;">You Liked</li>
<li style="margin-top:1px;">Your Friends Liked</li>
<li style="margin-top:1px;">Disliked</li>
</ul>
<img src="games/images/caption1.png" />
<div class="profileCaption">Angry Birds™</div>
<img src="games/images/caption2.png" />
<div class="profileCaption">Mario Kart Pro™</div>
<img src="games/images/caption3.png" />
<div class="profileCaption">Lazy™</div>
</div>
</body>
</html>
Wrap each image and caption in a div with a class like game-thumb and float the class left. Then, enclose all games in another div container, and set overflow:hidden on it.
Related
So I'm making a webpage in html5 for a school project, and some of my hyperlinks that were working before have become completely broken, so much so that even the a:hover attribute doesn't work.
Here is the exact code (comments included) for my About page, on which the hyperlinks on the left do work:
#charset "UTF-8";
/* CSS Document */
#container {
width:1024px;
height:800px;
background-image:url(Images/All%20Pages/Background.png);
}
header{
width:1024px;
height:100px;
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
background-image:url(Images/All%20Pages/Top_Banner.png);s
display:inline;
}
footer{
width:1024px;
height:80px;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
background-image:url(Images/All%20Pages/Bottom_Border.png);
}
#content{
width:869px;
height:620;
padding-left:155px;
padding-bottom:80px;
position:absolute;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
}
h2{
color:#FFF;
}
h4{
color:#FFF;
}
p{
color:#FFF;
}
#left_bar{
background-image:url(Images/All%20Pages/Sidebar.png);
height:700px;
width:155px;
text-align:center;
}
a{
text-decoration: none;
color:#FFF;
}
a:hover{
color:#000;
text-decoration: none;
}
<!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>
<link rel="stylesheet" type="text/css" href="About.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>[Title Goes Here]</title>
</head>
<body>
<div id="container">
<header>
<div style="line-height:5%;">
<br>
</div>
<h2>[Title Goes Here]:</h2>
<h4>Adventures in Design</h4>
</header>
<!-- CONTENT DIV HERE -->
<div id="left_bar">
<br />
<h2>ABOUT</h2>
<br />
<h2>PORTFOLIO</h2>
<br />
<h2>CONTACT</h2>
</div>
<footer>
<br />
<p>Last Updated: 05-08-2017</p>
</footer>
</div>
</body>
</html>
<!--<div style="border-left:1px solid #000;height:500px"></div>
for vertical line -->
Here is the complete code for my main page, on which only the link leading back to the main page works:
#charset "UTF-8";
/* CSS Document */
#container {
width:1024px;
height:800px;
background-image:url(Images/All%20Pages/Background.png);
}
header{
width:1024px;
height:100px;
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
background-image:url(Images/All%20Pages/Top_Banner.png);s
display:inline;
}
footer{
width:1024px;
height:80px;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
background-image:url(Images/All%20Pages/Bottom_Border.png);
}
#content{
width:869px;
height:620;
padding-left:155px;
padding-bottom:80px;
position:absolute;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
}
h2{
color:#FFF;
}
h4{
color:#FFF;
}
p{
color:#FFF;
}
#left_bar{
background-image:url(Images/All%20Pages/Sidebar.png);
height:700px;
width:155px;
text-align:center;
}
a{
text-decoration: none;
color:#FFF;
}
a:hover{
color:#000;
text-decoration: none;
}
<!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>
<link rel="stylesheet" type="text/css" href="Front_Page.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>[Title Goes Here]</title>
</head>
<body>
<div id="container">
<header>
<div style="line-height:5%;">
<br>
</div>
<h2>[Title Goes Here]:</h2>
<h4>Adventures in Design</h4>
</header>
<div id="content">
<h2> Hello and welcome to [Title Goes Here], <br />
one adventure in design, from websites to photos and beyond!</h2>
<div style="line-height:217px;">
<br />
</div>
<img src="Images/Front Page/Landscape.png" />
</div>
<div id="left_bar">
<br />
<h2>ABOUT</h2>
<br />
<h2>PORTFOLIO</h2>
<br />
<h2>CONTACT</h2>
</div>
<footer>
<br />
<p>Last Updated: 05-08-2017</p>
</footer>
</div>
</body>
</html>
Any answers to this would be much appreciated, as I have yet to find anything wrong. Thank you in advance for any advice you could throw my way
Two things to note:
First, you have an improperly formatted link href.
href="Title Goes Here.html"
As a rule, it is best practice to omit spaces in file names and replace them with dashes instead.
href="title-goes-here.html"
Second, when it comes to writing URL paths for things like images, if the goal is to grab files from a relative root directory, you should lead all URLs with a forward slash.
background-image:url(/Images/All%20Pages/Background.png);
Your #content element is overlaid on top of your #left_bar element because of the padding-left. You can use margin-left instead.
#charset "UTF-8";
/* CSS Document */
#container {
width:1024px;
height:800px;
background-image:url(Images/All%20Pages/Background.png);
}
header{
width:1024px;
height:100px;
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
background-image:url(Images/All%20Pages/Top_Banner.png);s
display:inline;
}
footer{
width:1024px;
height:80px;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
background-image:url(Images/All%20Pages/Bottom_Border.png);
}
#content{
width:869px;
height:620;
margin-left:155px;
padding-bottom:80px;
position:absolute;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
}
h2{
color:#FFF;
}
h4{
color:#FFF;
}
p{
color:#FFF;
}
#left_bar{
background-image:url(Images/All%20Pages/Sidebar.png);
height:700px;
width:155px;
text-align:center;
}
a{
text-decoration: none;
color:#FFF;
}
a:hover{
color:#000;
text-decoration: none;
}
<!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>
<link rel="stylesheet" type="text/css" href="Front_Page.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>[Title Goes Here]</title>
</head>
<body>
<div id="container">
<header>
<div style="line-height:5%;">
<br>
</div>
<h2>[Title Goes Here]:</h2>
<h4>Adventures in Design</h4>
</header>
<div id="content">
<h2> Hello and welcome to [Title Goes Here], <br />
one adventure in design, from websites to photos and beyond!</h2>
<div style="line-height:217px;">
<br />
</div>
<img src="Images/Front Page/Landscape.png" />
</div>
<div id="left_bar">
<br />
<h2>ABOUT</h2>
<br />
<h2>PORTFOLIO</h2>
<br />
<h2>CONTACT</h2>
</div>
<footer>
<br />
<p>Last Updated: 05-08-2017</p>
</footer>
</div>
</body>
</html>
There's also an extra "s" in the .header css section. Check the background-image line after the ";".
header{
width:1024px;
height:100px;
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
background-image:url(Images/All%20Pages/Top_Banner.png);s
display:inline;
}
I have the following html code for a page:
<!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>Buy, Sell Anywhere!</title>
<?php
$bgimglist = array(
"1419761599136.jpg",
"123.jpg",
"6Edng.jpg",
"second-hand-smoke-2-390x285.jpg",
"AllSmoke.jpg",
"best-air-purifier-for-smoke.jpg",
"HTB1pZmkG.jpg",
"images.jpg",
"index.jpg",
"SmokerBearded.jpg",
"sygareta.jpg"
);
$bgimg = $bgimglist[array_rand($bgimglist)];
?>
<style type="text/css">
body {
background-image: url(images/<?php echo $bgimg;?>);
background-repeat:no-repeat;
background-size:cover;
}
</style>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
</head>
<body>
<script language="JavaScript">
... removed...
</script>
<div id="top">
<div class="ad">
<?php include 'Ad728x90.inc';?>
</div>
<div id="TC">
<p>By using this site, you agree to the terms and conditions. You also agree that your government, local or national permits you to engage in activities relating to... <removed>...</p>
<p>You must be at least 18 years to use this site, regardless of your local laws. We do not encourage children to be associated in any way with this site.</p>
</div>
<div id="main">
And I have the following CSS:
.large {
font-size:30px;
}
body {
font-family:Arial, Helvetica, sans-serif;
}
#top {
font-size:300%;
font-weight:bold;
text-align:center;
padding:19px 0 6px 0;
}
.ad {
margin:auto;
padding:10px;
text-align:center;
}
.links a{
color:#FFF;
text-decoration:none!important;
}
#TC {
margin:auto;
width:90%;
height: 50px;
text-align:center;
font-size:12px;
background-color:#F0F0F0;
padding:12px;
}
#main {
margin:auto;
width:90%;
height: 500px;
text-align:center;
font-size:12px;
background-color:#FFFFFF;
padding: 10px;
}
Most of the CSS may not be relevant, but I have included it for completeness. The problem is that the DIV with the id "TC" appears to have bottom padding on the web using Firefox, Chrome and IE; but not on my mobile using Chrome. In fact, some text is cutoff, so it appears to have a negative padding!
Slightly troubling (maybe this is a different issue) is that the padding on top looks bigger than the padding at the bottom on all browsers, but using Inspect Element in Firefox, the Box Model shows a 10px border for bottom and top.
Any inputs appreciated as always.
It's doing that on smaller screens because the content is overflowing the #TC div,
you can make that div bigger, or use overflow: hidden, or overfow-y: scroll in your css.
For demonstration purposes I have included overflow-y: scroll
#TC {
margin:auto;
width:90%;
height: 60px;
text-align:center;
font-size:12px;
background-color:#F0F0F0;
padding:12px;
overflow-y:scroll;
}
CODEPEN DEMO
I don't know how to get rid of the bars on the side when I hover over the navbar. Can anyone help? I dont want to change the look or position of the navigation bar. I only want to make the parts that are not affected by hovering affected by it.
HTML:
<!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>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Site</title>
</head>
<body>
<div id="container">
<div id="body">
<center>
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Biography</li>
</ul>
</center>
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
#container {
margin-left:auto;
margin-right:auto;
width:960px;
background-color:#666666;
}
#body {
background-color:#666666;
width:960px;
height:500px;
border:2px solid #FFFFFF;
margin-top:50px auto;
}
.navbar {margin:0px;
background-color:#66FF33;
text-align:center;
list-style:none;
border-bottom:none;
padding-left:0px
}
ul.navbar li {
width:19%;
display:inline-block;
}
ul.navbar a {
display:block;
width:100%;
margin:0px;
padding:10px 0px;
text-decoration:none;
}
ul.navbar a:hover {
background-color:#33FFD7;
}
body {
background-color:#333333;
}
Try removing all the space between your <li> elements. The spaces are creating extra, well, space between links. This adds to the 100% width 5 elements at 20% width should be creating.
<li>Home</li><li>About</li><li>Contact</li><li>Services</li><li>Biography</li>
I hope that there is a more satisfying answer than this, but if you just want the quick and easy, this will work.
JSFiddle
I have a from inside a div (with a border). This looks good on Firefox and IE 10 (not sure about older versions of IE). However, sometimes IE activates the compatibility mode and then the form (input box and submit button) fall out of the div. Is there some css tweak to prevent this?
My HTML:
<!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>
<title>test</title>
</head>
<body>
<div class="box">
<h2 style="display:inline;">Some sample text</h2>
<form id="frm">
<input type="text" id="tb" />
<input type="submit" class="button" />
</form>
</div>
</body>
</html>
and my css
.box {
display:block;
height:40px;
magin-left:5px;
padding:5px 0 0 10px;
width:740px;
background:green;
border:1px solid black;
}
h2 {
margin:0 0 7px;
padding:0;
font:1.6em Arial;
letter-spacing: -1px
}
#tb {
width:225px
}
.button {
float:right;
width:93px;
margin-left:5px;
padding:2px 0
}
form {
float:right;
}
#frm {
margin-right:10px;
margin-top:2px;
width:330px;
}
Live example at jsfiddle:
http://jsfiddle.net/d3EdW/1/
Screenshot:
Since your form is floated, try clearing it by putting overflow: auto; on a parent of the form, such as .box.
How would I change this to make the middle div expand vertically to fill the white space?
<!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></title>
<style type="text/css">
body,td,th {
font-family: Tahoma, Geneva, Verdana, sans-serif;
}
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
}
#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:100%;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#header {
height: 150px;
border-bottom: 2px solid #ff8800;
position: relative;
background-color: #c97c3e;
}
#middle {
padding-right: 90px;
padding-left: 90px;
padding-top: 35px;
padding-bottom: 43px;
background-color: #0F9;
}
#footer {
border-top: 2px solid #ff8800;
background-color: #ffd376;
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
}
</style>
</head>
<body>
<div id="container">
<div id="header">
Header
</div>
<div id="middle">
Middle
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
You can't get the actual div to expand to fill a gap without Javascript, but you can easily make it appear to do so. Move your rule background-color:#0F9; from #middle to #container. This will give you the behaviour you require (it will fill the gap when there is minimal content, and when there is lots of content it will expand down, pushing the footer with it).
If however you want the Javascript solution, the following code will work. Simply put this in your HTML head section:
<script type="text/javascript">
window.onload = function() {
var mid = document.getElementById('middle');
var foot = document.getElementById('footer');
mid.style.height = ((foot.offsetTop+foot.clientHeight)-(mid.offsetTop+mid.clientHeight))+'px';
};
</script>
This is my backup answer:
<!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></title>
<style type="text/css">
body,td,th {
font-family: Tahoma, Geneva, Verdana, sans-serif;
}
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
}
#container {
height: 100%;
}
#container #header {
height: 50px;
background-color:#0F6;
}
#container #middle {
background-color: #66F;
}
#container #footer {
height: 20px;
background-color: #FF3;
}
</style>
</head>
<body>
<!-- Apology note to perfectionists: I'm sorry for using tables, but see this:
http://stackoverflow.com/questions/1703455/three-row-table-less-css-layout-with-middle-row-that-fills-remaining-space
A layout done with this table would be impossible with CSS. -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="container">
<tr id="header">
<td>h</td>
</tr>
<tr id="middle">
<td>m</td>
</tr>
<tr id="footer">
<td>f</td>
</tr>
</table>
</body>
</html>
#footer {
clear: both;
}
That should to the trick. The footer should alway appear below the column with the most content.
Personally I always add a CSS clear class in my templates and use them as breaks
.clear {clear:both;}
Then:
<div id="container">
<div id="header">
Header
</div>
<div id="middle">
Middle
</div>
<br class="clear" />
<div id="footer">
Footer
</div>
</div>
Tables will cause you more problems than they solve.
I think what you are looking for is sometimes called a sticky footer.
This page explains how it is done. What you would do is put your header and expanding content inside the wrapper he mentions.
I hope this helps you get your layout.