The title says it all for some reason my margin 0 auto is not centering my margin: 0 auto; wont center my ul inside of the nav element. Any help would be greatly appreciated. I already took a look at other posts on stack regarding the same issues, and couldn't fix my issue.
CSS
/* Sets the body to take up 100% of the width of the browser */
body {
width: 100%;
background: #444444;
margin: 0px;
}
#container{
width: 100%;
}
header {
margin-left: -10px;
margin-top: -10px;
padding: 0 20px;
width: 25%;
height: 12000px;
background: url("imgs/headerBg.jpg") repeat-y;
float: left;
}
nav{
width:60%;
margin: auto;
}
nav ul{
width: 70%;
list-style-type: none;
text-align: center;
margin: 0 auto;
}
nav ul li{
height: 45px;
padding: 0px;
margin: 0px;
display: inline-block;
border-top: 3px double #fff;
}
nav ul li a{
text-decoration: none;
text-align: center;
font-weight: bold;
color: #ffffff;
font-size: 2.5em;
}
#homepage{
height: 120000px;
width: 65%;
float: left;
}
#homepage li{
list-style-type: none;
height: 14.20%;
}
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Skull Alcohol ©</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="container">
<header>
<nav>
<ul>
<li>home</li>
<li>recipes</li>
<li>our products</li>
<li>shop</li>
<li>contact</li>
</ul>
</nav>
</header>
<section id="homepage">
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
</section>
<footer>
<div id="privacy">privacy</div>
<div id="tos">terms of service</div>
</footer>
</div>
</body>
</html>
It looks like your ul is actually centered, but because ul has a default padding on the left side it appears more to the right.
Try adding padding: 0 to your nav ul rule.
Related
I am still new to HTML 5. I am trying to build an index page but I have run into a few problems. I am trying to use a three column layout with some navigation links on the side and I want some navigation links under the header. I have tried several approaches with no luck. I am also trying to have a picture stretch between the two columns but I am not sure if I have my coding right since there is so much space between everything. I will post a picture of what I would like my index page to look. Any suggestions would be appreciated.
nav {
float: left;
width: 150px;
box-sizing: border-box;
display: block;
}
main {
margin: 0 210px 0 160px;
padding: 1px 10px 20px 10px;
background-color: #FFFFFF;
display: block;
color: #000000
}
body {
background-color: #FFFFFF;
margin: 0;
}
header {
background-color: #000000;
color: #FFFFFF;
text-align: right;
box-sizing: border-box;
display: block;
height: 120px;
padding: 0 20px;
border-bottom: 2px solid;
}
aside {
display: block;
box-sizing: border-box;
float: right;
width: 150px;
}
footer {
display: block;
box-sizing: boreder-box;
font-size: .70em;
color: #FFFFFF;
background-color: #000000 padding-top: 10px;
clear: both;
}
#container {
background-color: #969696;
color: #000000;
min-width: 960px;
font-family: Verdana, Arial, sans-serif;
}
<!DOCTYPE html >
<html lang="en">
<head>
<title>St. Pete Flower Market</title>
<meta charset="utf-8">
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="container">
<header role="banner">
<span>Search</span>
<h1>St. Pete Flower Market</h1>
</header>
<nav role="navigation">
<ul>
<li><a class="navigation" href="index.html">Home</a></li>
<li><a class="navigation" href="contact.html">Contact Us</a></li>
<li><a class="navigation" href="occasions.html">Occasions</a></li>
<li><a class="navigation" href="flowers.html">Flowers</a></li>
<li><a class="navigation" href="giftbaskets.html">Pricing</a></li>
<li><a class="navigation" href="deals.html">Deals</a></li>
<li><a class="navigation" href="about.html">About Us</a></li>
</ul>
</nav>
<aside role="complementary">
</aside>
<main role="main" id="content">
<h2><img src="roses.jpg" width="1148" height="300" alt="Roses"></h2>
<h3>fjfjfwjif</h3>
<footer role="contentinfo"> fjiefjwiofjewfjiewofjewo</footer>
</main>
</div>
</body>
</html>
Take a look in to flex or grid.
These can help you a lot if you are doing it by yourself.
Here's some great links to check out.
GRID : https://css-tricks.com/snippets/css/complete-guide-grid/
Flex : https://www.google.com/url?q=https://css-tricks.com/snippets/css/a-guide-to-flexbox/&sa=U&ved=0ahUKEwjd9Ye_lo_ZAhVsplkKHfzoCp0QFggFMAA&client=internal-uds-cse&cx=008634746982114956312:jsnn6x4ou7o&usg=AOvVaw3oVZNdBcJm5oSz3KSIgI7Z
Either of these can help create that 3 column layout you want.
Also if you'd like you can use bootstrap 4 which can make your life easier.
https://getbootstrap.com/
I hope it helps.
I am trying to get 4 images to line up with text centered under them. I have been able to get them close but they are still aligning slightly off. I am still trying to get the hang of HTML 5, and have tried to find some others that have had the same issue but have not had much luck. Any advice would be great since I have hit a brick wall. I will attach a screen shot of my page.
#navigation {
height: 40px;
font-size: 20px;
font-family: Verdana;
font-weight: bold;
text-align: center;
background-color: #000000;
}
main {
margin: 0 210px 0 160px;
padding: 1px 10px 20px 10px;
background-color: #FFFFFF;
display: block;
color: #000000
}
body {
background-color: #FFFFFF;
margin: 0;
}
header {
background-color: #000000;
color: #FFFFFF;
text-align: right;
box-sizing: border-box;
display: block;
height: 120px;
padding: 0 20px;
border-bottom: 2px solid;
}
aside {
display: block;
box-sizing: border-box;
float: right;
width: 150px;
}
footer {
display: block;
box-sizing: boreder-box;
font-size: .70em;
color: #FFFFFF;
background-color: #000000 padding-top: 10px;
clear: both;
}
#container {
background-color: #969696;
color: #000000;
min-width: 960px;
font-family: Verdana, Arial, sans-serif;
}
#navigation ul {
height: auto;
padding: 5px 20px;
margin: 1px;
}
#navigation li {
display: inline;
padding: 50px;
}
#navigation a {
text-decoration: none;
color: #FFFFFF;
}
body {
background-color: #969696;
}
side {
display: block;
box-sizing: border-box;
float: right;
width: 150px;
}
#rose {
overflow: hidden;
}
.imageContainer {
float: left;
margin-right: 250px;
margin-left: 20px;
}
p {
text-align: center;
}
.imageContainer2 {
float: center;
margin-right: 250px;
margin-left: 20px;
}
p {
text-align: center;
}
<!DOCTYPE html >
<html lang="en">
<head>
<title>St. Pete Flower Market</title>
<meta charset="utf-8">
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="container">
<header role="banner">
<span>Search</span>
<h1>St. Pete Flower Market</h1>
</header>
<nav>
<div id="navigation">
<ul>
<li><a class="navigation" href="index.html">Home</a></li>
<li><a class="navigation" href="contact.html">Contact Us</a></li>
<li><a class="navigation" href="occasions.html">Occasions</a></li>
<li><a class="navigation" href="flowers.html">Flowers</a></li>
<li><a class="navigation" href="giftbaskets.html">Gift Baskets</a></li>
<li><a class="navigation" href="deals.html">Deals</a></li>
<li><a class="navigation" href="aboutus.html">About Us</a></li>
</ul>
</div>
</nav>
<section id="side">
</section>
<aside role="complementary">
</aside>
<main>
<div id="rose">
<h1><img src="roses.jpg" width="100%" height="300px">
</div>
</h1>
<div class="image123">
<div class="imageContainer">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
< <div class="image1234">
<div class="imageContainer2">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer2">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</main>
<footer> fjiefjwiofjewfjiewofjewo</footer>
</div>
</body>
</html>
There are some errors in your code:
the h1 tag inside the div #rose is actually closing outside it. consider getting rid of the h1 tag in the first place, unless you need a title with the top image.
A similar error is div class="image1234" closing outside the main tag.
My solutions (which seems to work fine) is to get rid of the css for both the image containers, add an outer div and set its css to display:flex; and justify-content: space-around;
that worked for me
<div id="newDiv">
<div class="image123">
<div class="imageContainer">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
<div class="image1234">
<div class="imageContainer2">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer2">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
</div>
the css:
#newDiv {
display:flex;
content: space-around;
}
have a look here for more info:
https://www.w3schools.com/css/css3_flexbox.asp
I hope someone will be able to help me with my problem. I'm working on a mobile site and I need the footer background image to be responsive with footer links centrally positioned over this image. To make the background image responsive I used that code:
#footer-bg {
width: 100%;
display: inline-block;
vertical-align: middle;
font: 0/0 serif;
text-shadow: none;
color: transparent;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url("../img/background.jpg");
}
#footer-bg .inner-footer {
padding-top: 39.06%;
display: block;
height:0;
}
and it works as a charm, but when I add links they are way out of position, on the bottom of page. Is there a way around this? Thanks in advance for any help.
JSfiddle code here http://jsfiddle.net/4kuUm/
Just to clarify, I want the links and copyright logo to be positioned over an image and not the bottom of it.
I cleared out a lot of the extra cruft that you had in your HTML & CSS to strip this down to the essential bones. You may need to add some minor styings (padding margins etc to get the two menu list items to match up but it's mostly there.
I can say that with a little extra time the HTML & CSS could be trimmed further.
JSfiddle Demo
HTML
<div class="footer-container">
<footer class="wrapper">
<div class="social-icons">
<ul>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Join us on Facebook"/>
</li>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Follow us on Instagram"/>
</li>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Subscribe to our Newsletter"/>
</li>
</ul>
</div>
<div class="f-links">
<ul>
<li>About Us
</li>
<li>Contact Us
</li>
<li>Terms & Conditions
</li>
</ul>
</div>
<!-- /f-links -->
<div class="divider">
<p>© ALL RIGHTS RESERVED.</p>
</div>
</footer>
</div>
CSS
.footer-container footer {
color: #000000;
padding: 20px 0;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url("http://queermeup.com/wp-content/uploads/2010/10/background-2-640x250.jpg");
}
.social-icons {
text-align:center;
}
.social-icons ul,
.f-links ul {
list-style:none;
width:50%;
margin:0 auto;
text-align: center;
}
.social-icons li,
.f-links li {
display: inline-block;
width:30%;
}
.f-links a {
font-size:12px;
margin-top: 0;
margin-bottom: 0;
text-align: center;
text-decoration: none;
color: black;
padding:2px 10px;
white-space:nowrap;
}
.f-links a:hover {
text-decoration: underline;
}
.divider {
padding:0;
margin:0;
}
.divider p {
margin: 0 5%;
text-align:center;
border-top: 1px solid #000;
font-size:11px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
<div class="footer-container">
<footer class="wrapper"> <span id="footer-bg" role="img" aria-label="Footer">
<div class="social-icons" style="padding:25px;">
<ul>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Join us on Facebook">
</li>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Follow us on Instagram">
</li>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Subscribe to our Newsletter">
</li>
</ul>
</div>
<div class="f-links" style="padding:25px;">
<ul>
<li>About Us
</li>
<li>Contact Us
</li>
<li>Terms & Conditions
</li>
</ul>
</div>
<!-- /f-links -->
<div class="divider">
<p>© ALL RIGHTS RESERVED.</p>
</div>
</footer>
</div>
This works my friend :)
Please help me to solve my problem.
I need to make head menu with pictures.
Now i have:
What i need to do:
My HTML code here:
<div id="head">
<div class="site_info">
<div id="tabs">
<ul id="tabMenu">
<li class="dropdown">
<div><a class="tab1">поиск по производителю</a></div>
</li>
<li class="dropdown">
<div><a class="tab2">поиск по назначению</a></div>
</li>
<li class="dropdown">
<div>
<span id="more_search"></span>
<a class="tab4" href="/emarket/cart/">покупки</a>
</div>
</li>
<li class="dropdown">
<div><a class="tab3">сравнение</a></div>
</li>
<li class="dropdown">
<div><a class="tab3">кабинет</a></div>
</li>
</ul>
</div>
</div>
<div class="work" umi:element-id="40">
<div umi:field-name="order_info_top"></div>
</div>
</div>
CSS:
#main #head div.site_info {
padding-top: 45px;
}
#main #head div.site_info ul {
width: 50%;
margin: 0 auto;
min-width: 1024px;
}
#main #head div.site_info ul li {
display: inline;
margin-right: 18px;
}
#main #head div.site_info ul li a.tab1 a.tab2 a.tab3 a.tab4 {
float: left;
margin-left: 89px;
}
Give a height and width to the individual menu. Then add a style with your image as its background. Position the backgruond image top center.
HTML
<div>
<ul>
<li class="dropdown"><div><a class="tab1">Menu 1</a></div></li>
<li class="dropdown"><div><a class="tab2">Menu 2</a></div></li>
</li>
</ul>
</div>
CSS
li
{
list-style: none;
float: left;
width :100px;
}
.dropdown .tab1
{
background : url('http://www.indievisionmusic.com/wp-content/themes/indievisionmusic/images/at_symbol_10x10.gif') no-repeat top center;
padding-top: 10px;
}
.dropdown .tab2
{
background : url('http://www.gigabyte.us/images/icon_blue.png') no-repeat top center;
padding-top: 10px;
}
DEMO
Just change your text for <img src="images/image.jpg">
And if you want it to be a link: <img src="images/image.jpg" width="100" height="100"/>
you could just use images instead of text and add in the image using the CSS backgroundd feature
li a.tab1 { background: url(); width:XXpx; height: XXpx }
li a.tab2 { background: url(); width:XXpx; height: XXpx }
li a.tab3 { background: url(); width:XXpx; height: XXpx }
For some reason, I have this one webpage which renders something great in Chrome, but completely different on FireFox and IE.
The effect may be seen here.
The other browsers appear to remove my margin centering of my header and footer elements.
Is there a particular reason this is only working in Chrome?
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TileTabs</title>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon/favicon.ico">
<link rel="stylesheet" href="css/v2.css" type="text/css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css">
<link rel="stylesheet" href="css/veramono.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
<script src="js/tile_interaction.js"></script>
</head>
<body>
<header>
<img src="images/logo/logo_v3.png" alt="logo" />
</header>
<div id="content">
<ul>
<li>
<div class="tile">
</div>
</li>
<li>
<div class="tile">
</div>
</li>
<li>
<div class="tile">
</div>
</li>
<li>
<div class="tile">
</div>
</li>
<li>
<div class="tile">
</div>
</li>
<li>
<div class="tile">
</div>
</li>
<li>
<div class="tile">
</div>
</li>
<li>
<div class="tile">
</div>
</li>
<li>
<div class="tile">
</div>
</li>
<li>
<div class="tile">
</div>
</li>
</ul>
</div>
<footer>
<a class="emailus" href="index.htm">Home</a> | <a class="emailus" href="about.htm">About</a> | <a class="emailus" href="contact.htm">Contact</a>
</footer>
</body>
</html>
CSS:
body {
background: #F6F6F6;
font-family: 'BitstreamVeraSansMonoRoman', 'Myriad-Pro', 'Myriad', helvetica, arial, sans-serif;
margin: 0;
}
a:link, a:visited, a:hover, a:active {
color: white;
text-decoration: none;
}
header {
width: 920px;
background: #999;
margin: 0px auto;
text-align: center;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
#content {
width: 920px;
height: 760px;
background: #999;
margin: 0px auto;
}
footer {
width: 920px;
background: #999;
margin: 0px auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
li {
float: left;
list-style: none;
padding: 34px;
}
.tile {
cursor: pointer;
background: red;
border: 2px solid #000;
width: 100px;
height: 100px;
}
The <header> and <footer> tags are new (HTML5)
For older browsers that don't support HTML5 just use standard divs.
If you want to still use <header> and <footer> you can use the following code to make it work for browsers that don't support the HTML5 tags.
<script>
document.createElement('header');
document.createElement('footer');
</script>
The problem is that IE doesn't fully support (if at all) the <header> and <footer> tags. I'm not sure about Firefox 3.x, but this works fine in the current beta of Firefox 4.
get rid of the header tags
<-- <header> --!>
<-- </header> --!>
and place the picture inside of the content tag like so, also center the picture with some css
<div id="content">
<img src="images/logo/logo_v3.png" alt="logo" />
<ul>
...
tags are part of HTML5 which are not yet fully supported.