For some reason my background color does not cover the entire page width on my mobile device, However, it looks fine on a regular desktop. I cannot find the problem.
Here is my style.css:
#media only screen and (min-width : 250px) and (max-width : 780px)
{
#pageHeader{
border:none;
background-color:"background-color:#F5F5DC";
}
#pageHeader nav {
height:300px;
width:100%;
}
#pageHeader nav ul {
padding-left:0;
width:100%;
}
#pageHeader nav ul li {
width:100%;
text-align:center;
margin-left:25px;;
}
#pageheader nav a:link, #pageHeader nav a:visited {
height: 60px;
padding: 5px 23px;
text-decoration: none;
dislay: block;
width:100%;
}
#pageHeader img{
width: 100%;
height: auto;
margin-bottom: 3%;
}
}
Here is my html:
!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
</head>
<body>
<div id="pageHeader" style="background-color:#F5F5DC">
<img src="style/logo.jpg" name="logo" width="431" height="94" alt=""/>
<br />
<br />
<nav>
<ul>
<li >Home</li>
<li style="margin-left:25px">All Products</li>
<li style="margin-left:25px">Blog Using Ruby</li>
<li style="margin-left:25px">User Javascript Page</li>
<li style="margin-left:25px">Submit Concerns using Perl</li>
<li class="active" style="margin-left:25px">About Us using HTML5</li>
<li style="margin-left:25px">Asp Help Pages</li>
<li style="margin-left:25px;"><img src="style/cartimage.jpg" name="shopping cart" /></li>
</ul>
</nav>
</div>
</div>
<h1 align="center">About Us</h1> </br> </br>
<div align="center" id="pageBody">
<table width="100%" border="0" cellpadding="6">
<tbody>
<tr>
<td> Code omitted </td>
</tr>
</tbody>
</table>
<div id="pageFooter">
Copyright |Admin Log In
</div>
</div>
</body>
</html>
Look that you have an extra tag when you close your
<div id="pageHeader" style="background-color:#F5F5DC">
If you are using more code, and floating some tags, dont forget to put the "overflow:hidden" in the container that "contains" the tags floated!
Remove the explicit height on the nav element - let the flow content dictate that rather than setting it explicitly. If you clear fix the floats in the unordered list using the CSS-
.group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
(See http://css-tricks.com/snippets/css/clear-fix/)
The list will take the height of its contents.
You will also want to remove the margin left on the list item elements (these are at 100% plus the 25px margin), replacing it with padding-left and setting box-sizing: border-box on the list items (or just set the margin to zero when at a smaller viewport width as your design doesn't seem to need it).
The unordered list will need to look something like this-
<ul class="group">
<li>Home</li>
<li>All Products</li>
<li>Blog Using Ruby</li>
<li>User Javascript Page</li>
<li>Submit Concerns using Perl</li>
<li class="active">About Us using HTML5</li>
<li>Asp Help Pages</li>
<li><img src="style/cartimage.jpg" name="shopping cart" /></li>
</ul>
In either case you should remove the inline margin-left: 25px styles - you will find it much more maintainable to keep these externally in your CSS.
Related
I'm writing some html and css to create a webpage. On the left of the page is a nav section. At the top is a header, below which is a 'main' section containing text in various sections, and below that is a footer.
I have managed to get the header and footer to remain fixed as desired and also get the main section to scroll between the header and footer. The links in the nav are supposed to let the user jump to a section of main as required. However, when clicking on introduction, the introduction section gets positioned at the very top of the page (hidden under the header) where as I would like it to jump to its position just below the header. I've tried various combinations of setting top and position:absolute in main but without success. Can anybody help?
The html and css are below:
index.html:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title>John Doe</title>
<link type="text/css" rel="stylesheet" href="homepage.css">
<style type="text/css">
</style>
</head>
<body>
<header id="top">
<h1>
<dl>
<dt>
John Doe
</dt>
<dd>
<img src="logo.jpg" alt="Logo" >
</dd>
</dl>
</h1>
</header>
<nav class="navlist">
<ul class="menuitem">
<li>Introduction</li>
<li>Previous Experience</li>
<li>Skills</li>
<li>Courses Taken</li>
<li>Courses Being Taken</li>
<li>Useful Links</li>
<li>Contact</li>
<img src="selfie.jpg" alt="Selfie" >
</ul>
</nav>
<div id="main">
<h2><a id="introduction">Introduction</a></h2>
<p>Welcome to my home page! This page tells you a little bit about myself.</p>
<p>Blah blah blah</p>
<h2><a id="prevExp">Previous Experience</a></h2>
<p>I have worked at
Prodrive,
Lotus Engineering and
Ricardo.
</p>
<p>At Prodrive I did some stuff.</p>
<p>At Lotus I did some stuff.</p>
<p>At Ricardo I did some stuff.</p>
<h2><a id="skills">Skills</a></h2>
<ol>
<li>Awesomeness</li>
<li>Mathematics</li>
<li>Problem Solving</li>
<li>CSS?</li>
</ol>
<h2><a id="courses_taken">Courses taken</a></h2>
<ul>
<li>BEng Degree</li>
<li>Games Programming</li>
<li>Java</li>
<li>Android Programming</li>
</ul>
<!-- Created nested list to show current course and its modules -->
<h2><a id="courses_being_taken">Courses being taken</a></h2>
<ul>
<li>MSc Degree
<ul>
<li><h3>Modules</h3></li>
<li>Apps</li>
<li>Research</li>
<li>Databases</li>
<li>Internet</li>
</ul>
</li>
</ul>
<h2><a id="useful_links">Useful Links</a></h2>
<ul>
<li>
<a href="http://www.w3schools.com/html/html5_intro.asp" >HTML5 Introduction from w3schools</a>
</li>
</ul>
<h2><a id="contact">Contact</a></h2>
<ul>
<li>Address: xxxx</li>
<li>Telephone: xxxx</li>
<li>Email: <a href="mailto:xxxx#uea.ac.uk" >xxxx</a></li>
</ul>
</div>
<footer>
<!-- Horizontal rule and update comment -->
<hr />
<p>Page last updated 30/09/2016 by Stephen Whiddett</p>
</footer>
</body>
</html>
homepage.css:
body {margin:0; padding:0;}
header {border: 0px solid white;}
nav {border: 2px ;}
footer {border: 2px ;}
div#main {border: 2px ;}
h1 {font-family:Helvetica,Arial,sans-serif;
font-size:x-large;
color:blue;
font-style: italic;}
h2 {font-family:Helvetica,Arial,sans-serif;
font-size:medium;
color:#0088FF;
font-style: italic;}
header{ width: 100%;
height: 12vh;
position: fixed;
top: 0;
background: #AAAAAA;
}
#main {
left:6em;
width: 80%;
margin: 13vh 0 6vh 6em;
}
footer{ position: fixed;
width:100%;
height:6vh;
bottom:0;
text-align:center;
background: white;}
p { font-family:Helvetica,Arial;
font-size:x-small;}
a {background-color:yellow}
header a {background-color:inherit}
nav img {max-width:100%;}
ul.menuitem {font-size:small;
margin:0;
padding:1em;}
nav.navlist {width:6em;
position: fixed;
top:12%;
bottom:94%;}
header dt {float:left;}
header dd {float:right;}
header dl {padding:1%;}
header dt {
position: absolute;
top: 6vh;
transform: translateY(-50%);
}
It may be necessary for you to reduce the window size of your browser in order to see the issue I've described to ensure that main cannot fit on the screen all at once.
How do I stop the right menu dropdown child elements from going off the page? I know it is simple but don't know the CSS to change to get it to work. Any help is appreciated.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your page title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
<style>
ul{background-color: #4CAF50; width: 100%}
</style>
</head>
<body>
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected">Home</li>
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
Contact
<ul class="pure-menu-children">
<li class="pure-menu-item">Email</li>
<li class="pure-menu-item">Twitter</li>
<li class="pure-menu-item">Tumblr Blog</li>
</ul>
</li>
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover" style="float:right">
Test
<ul class="pure-menu-children">
<li class="pure-menu-item"">Email</li>
<li class="pure-menu-item">Twitter</li>
<li class="pure-menu-item">Tumblr Blog</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I want to have them so the start at the right hand side of the page but not go off.
thanks
With some tweaking and adding in your CSS, you can achieve this. See this JSFiddle, I also cleaned your code.
Add the class .right-menu to the most right menu to get this working.
.pure-menu-horizontal .right-menu .pure-menu-children {
left: auto; /* Position from right, not from left */
right: 0; /* Position from right, not from left */
}
Update
I used display: flex; to address the problem that Firefox's having to properly show the menu you wanted.
This is what you need to add:
.pure-menu-horizontal .pure-menu-list.pure-menu-list {
display: flex;
}
.pure-menu-horizontal .right-menu {
margin-left: auto;
}
See my updated JSFiddle. Read more about the handy flexbox property at Mozilla Developer Network.
I created 3 divs:
header
menu
display area
I created three tag and I need to align two divs in the same row — the menu div in the left and display in the right.
I am getting error in that I tried many examples and none of them are working.
The header should be fixed in top
and others should be as it is
What could be the problem, and how can I fix it?
HTML
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<title>Blueprint: Vertical Icon Menu</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/leftmenu.css" />
<link rel="stylesheet" type="text/css" href="flaticon.css" />
<script src="js/modernizr.custom.js"></script>
<style>
body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;}
body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;}
a {color:#f0f0f0;text-decoration: none;}
a:hover {color: #000;}
#footer{height: 50px;background-color: #ddd;width: 100%;}
#header{z-index: 1;top: 0;margin-top: 0px;position: fixed;height: 90px;width: 100%;background-color: #ddd;}
.dis123{width: 500px;height: 500px;background-color: #ddd;text-align: left;
display: block;
margin-left: auto;
margin-right: auto;}
</style>
</head>
<div id="header">
Head
</div>
<body>
<div class="postleftmen">
<ul class="cbp-vimenu">
<li>SELECT CATEGORY</li>
<li>MOBILE & TABLET</li>
<li>ELECTRONICS & COMPUTER</li>
<li>Vehicles</li>
<li>Home & Furniture</li>
<li>Pets</li>
<li>Books, CDs & Hobbies</li>
<li>Clothing & Accessories</li>
<li>Kids & Baby</li>
<li>Sports & Health</li>
<li>Services</li>
<li>Jobs</li>
<li>Real Estate</li>
</ul>
</div>
<div class="dis123">
display
</div>
<div id="footer">
footer
</div>
</body>
</html>
You need to use float:left property two show two DIVS in row. and then use clear:both for div to place footer.
HTML
<div id="header">
Head
</div>
<div class="postleftmen">
<ul class="cbp-vimenu">
<li>SELECT CATEGORY</li>
<li>MOBILE & TABLET</li>
<li>ELECTRONICS & COMPUTER</li>
<li>Vehicles</li>
<li>Home & Furniture</li>
<li>Pets</li>
<li>Books, CDs & Hobbies</li>
<li>Clothing & Accessories</li>
<li>Kids & Baby</li>
<li>Sports & Health</li>
<li>Services</li>
<li>Jobs</li>
<li>Real Estate</li>
</ul>
</div>
<div class="dis123">
display
</div>
<div style="clear:both"> </div>
<div id="footer">
Footer
</div>
CSS
body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;}
body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;}
a {color:#f0f0f0;text-decoration: none;}
a:hover {color: #000;}
#header{height: 90px;width: 100%;background-color: #ddd;}
#footer
{
height: 50px;width: 100%;background-color: #ddd;
}
.dis123
{
width:60%;
float:left; height: 500px;background-color: #ddd;text-align: left;
}
.postleftmen
{
width:40%;
float:left;
}
DEMO
I am designing a website and I want the footer to have two small images on the bottom left side followed by #* (a twitter address). In the middle of the footer I want the address and on the right of the footer I want the contact number.
At present I have all of the above in the footer div however they are not all aligned. The images are very far apart and the text is in the wrong place. The text is below the images and to the right. However I want everything to be aligned horizontally.
I am using HTML and CSS on macromedia dreamweaver.
The current code is:
<div class="footer content">
<ul>
<li> <img src="Images/facebook.png" /> <img src="Images/twitter.png" /> </li>
<li>#TWITTERADRESS</li>
<li>POSTAL ADDRESS </li>
<li>TEL NUMBER</li>
</ul>
</div> <!--end of footer-->
CSS
.footer {
text-align:centre;
background-color:#C8C8C8;
color:#000000;
padding-bottom:1em;
}
First of all edit the CSS as
.footer ul li {
display: inline; // in a straight line
}
Edit the HTML part as:
<div class="footer">
<ul>
<li class="image"><img src="Images/facebook.png" />
<img src="Images/twitter.png" /></li>
<li class="twitter">#TWITTERADRESS</li>
<li class="address">POSTAL ADDRESS </li>
<li class="number">TEL NUMBER</li>
</ul>
</div>
Edit the CSS part now as:
.image {
float: left; // float to the left
}
.number {
float: right; // float to the right
}
Try it here: http://jsfiddle.net/afzaal_ahmad_zeeshan/6zYeA/
maybe something like this:
.footer {
text-align:centre;
background-color:#C8C8C8;
color:#000000;
padding-bottom:1em;
}
.footer li{
float: left;
width: 25%;
}
From the designer point of view... with Photoshop, Illustrator, Freehand or similar you can design a beautiful footer, or better a beautiful draft of the entire page first, the very one you would like to see. Then, start with the markup skeleton writing sections like this (html5):
<div id="wrapperdiv">
<header>
<nav>
<ul>
<li><a href='#'>home</li>
<li>...
<li><a href='#'>contact</li>
</ul>
</nav>
</header>
<section><blockquote>...</blockquote>...</section>
...
<footer>
<img src='.../footerLogo_left.png' id='footerLogo_left'>
<img src='.../footerMiddle_text.png' id='footerMiddle_text'>
<img src='.../footerLogo_right.png' id='footerLogo_right'>
</footer>
</div>
At this point we can write the CSS3 code (maybe at styles.css):
...
#wrapperdiv {background...}
header {width...}
nav li a{...}
...
footer{
width:...;
height:...;
margin:...;
}
Next thing to do is to cut images from the draft, like footer_bg.png, footerLogo_left.png, footerLogo_right.png, footerMiddle_text.png..., and link them to the markup:
footer{
background:url(.../footer_bg.png) repeat_x;
width:...;
height:...;
margin:...;
}
#footerLogo_left {
float:left;
margin:...}
#footerMiddle_text {
float:left;
margin: (the same than left)}
#footerLogo_right {
float:right;
margin: (the same than left)}
Ok, it's not as easy as it seems, but this way can give you very visual websites (graphical draft + html skeleton + css styles).
This question already has answers here:
Unwanted margin in inline-block list items [duplicate]
(10 answers)
Closed 9 years ago.
So I'm a little stumped. I'm trying to make a page to display images. I want there to be 5 images per row spaced with maximum amount when the window is at max width (~950 px), but I want them to get closer as you make it smaller and then, when there's 0 px between them, there will only be 4 images per row, and that will continue until a specific width. Kind of like Instagram, but I don't want the pictures to get smaller. Here's what I have:
HTML
<ul>
<li>
<img src="0.png">
</li>
</ul>
<ul>
<li>
<img src="1.png">
</li>
</ul>
<ul>
<li>
<img src="2.png">
</li>
</ul>
CSS
ul
{
padding: 0;
margin: 0;
list-style-type: none;
}
ul li
{
display: inline;
}
//the images are also float left, so they are horizontal
Basically, as you can see, I have nothing and I don't really know what to do. I'd appreciate any help. Thanks!
Can you do me a favor and try this fix (I know there is an obnoxious invisible-spacing bug related to lis written on newlines in the HTML, not sure if it applies to UL's in order too but it's worth a shot) --
<ul><li><img src="0.png"></li></ul><ul><li><img src="1.png"></li></ul><ul><li><img src="2.png"></li></ul>
this may get you closer to where you want to go:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
ul {
padding: 0;
margin: 0;
list-style-type: none;
min-width:450px;
}
ul li {
display: inline;
float:left;
width:20%;
}
</style>
</head>
<body>
<ul>
<li> <img src="0.png" width="150" height="50"> </li>
<li> <img src="1.png" width="150" height="50"> </li>
<li> <img src="2.png" width="150" height="50"> </li>
<li> <img src="0.png" width="150" height="50"> </li>
<li> <img src="1.png" width="150" height="50"> </li>
<li> <img src="2.png" width="150" height="50"> </li>
</ul>
</body>
</html>
It is more "proper" markup to put all the images into one list, and opens the door for setting a hard minimum width on the ul but a % on the li... which is what makes the whitespace vary with the window sizing. I am not sure if this gets you all the way there, but hopefully it will help!
Your unordered list should look like this:
<ul><li><img src="0.png"></li><li><img src="1.png"></li><li><img src="2.png"></li></ul>
Super unconventional, but it works.
Fiddle here: http://jsfiddle.net/QMs93/
http://jsfiddle.net/AgLMp/1
CSS
ul {
padding: 0;
margin: 0;
list-style-type: none;
max-width: 950px;
min-width: 600px;
}
ul li {
float: left;
width: 33%;
min-width: 200px;
}
HTML
<ul>
<li>
<img src="http://placehold.it/200x200/ff0000/00ffff&text=Image+1" />
</li>
<li>
<img src="http://placehold.it/200x200/00ff00/ff00ff&text=Image+2" />
</li>
<li>
<img src="http://placehold.it/200x200/0000ff/ffff00&text=Image+3" />
</li>
</ul>
like this? http://jsfiddle.net/fqTsN/
remove the float:left from your pictures by the way! I fixed that too (it's horizontal without float:left;
your best and fastest bet for more control is to use media queries, or you could also use Bootstrap.
As everyone else has said:
<ul>
<li>Stuff</li>
<li> Other Stuff</li>
</ul>