I am having difficulty in getting a menu list to float in the center of it's parent container. Here is the address of the page: simplekitchenandbath.com/staging/
And the necessary code snippets:
div#wrapper {
width:1100px;
margin:0 auto;
padding:0 0 50px 0;
}
div#content-main {
background-color:#000;
width:1024px;
margin:0 auto;
}
nav {
background-color:#000;
height:30px;
}
div#nav-container {
width:720px;
margin:0 auto;
}
ul#nav { position:relative; }
ul#nav li { float: left; zoom: 1; list-style-type:none; margin:0; border-bottom:1px solid #FFF; }
ul#nav a:hover { color:#DDD; text-decoration:none; }
ul#nav a:active { color:#DDD; }
ul#nav li a { display:block; padding:0 10px 0 0; color:#FFF; text-transform:uppercase; }
ul#nav li:last-child a { padding-right:0; }
ul#nav li.hover, ul#nav li:hover { position: relative; }
Make the width smaller and to align it in the center place it inside the container of the element and set its margin to 0 auto; try responsive webdesign with css3 media queries and targeting two different monitor size... because the site on 780px monitor it has the slider to go horizontally.... so basically:
<div class="container">
... some code ...
</div>
css:
.container {
width: 960px;
margin: 0 auto;
}
Thanks for reading... Love to hear some response on my answer.
div#nav-container {
width:575px;
margin:0 auto;
}
the width is too big on #nav-container. set it to 575px !
Use display:inline-block on the #nav element, and text-align:center on the #nav-container
Related
I'm trying to figure out why this footer is acting unusual. If you notice in the demo the HR tag in the location section is being pushed to the bottom of the page. Which is changing the layout. Also i'm trying to get the Facebook Icon to float:left so that it will be to the left of the HR tag within the "Network With Us section." My CSS looks fine to me, but this is the first time i've used the section tags for html5.
Also i'm having troubles applying a background-color or a margin-top:50px to my #footer.It's as if the #footer is ignoring me.
Here is my Demo
#footer {
background-color:#95643d;
width:100%;
margin:30px 0px 0px 0px;
clear:both;
}
#footer h3 {
font-family: 'Dancing Script', cursive;
font-weight:700;
color:#FFF;
font-size:2em;
}
#footer hr {
width:60%;
float:left;
height:4px;
background-color:#FFF;
}
#footer p {
margin:0px;
padding: 0px;
color:#FFF;
font-family: 'Arimo', sans-serif;
}
#footer_logo {
width:25%;
float:left;
background-color:#95643d;
}
#footer_logo img {
margin:20px 0px 0px 20px;
}
#footer_network {
width:25%;
float:left;
background-color:#95643d;
}
#footer_contact {
width:25%;
float:left;
background-color:#95643d;
}
#footer_network img {
float:left;
}
}
#footer_location {
width:25%;
float:left;
background-color:#95643d;
}
You can use this CSS:
/* Footer */
#footer {
background-color:#95643d;
width:100%;
}
#footer h3 {
font-family: 'Dancing Script', cursive;
font-weight:700;
color:#FFF;
font-size:2em;
text-align: center;
}
#footer hr {
width:100%;
float:left;
height:4px;
background-color:#FFF;
}
#footer p {
margin:0px;
padding: 0px;
color:#FFF;
font-family: 'Arimo', sans-serif;
text-align: center;
margin-bottom: 10px;
}
#footer_logo {
width:100%;
float:left;
background-color:#95643d;
}
#footer_logo img {
margin: 10px auto;
display: block;
}
#footer_network {
float:left;
background-color:#95643d;
width: 33%;
}
#footer_contact {
width: 33%;
float:left;
background-color:#95643d;
}
#footer_network img {
margin: 0 auto;
display: block;
}
#footer_location {
display: inline-block;
background-color:#95643d;
width: 34%;
}
Also i'm having troubles applying a background-color or a margin-top:50px to my #footer.It's as if the #footer is ignoring me.
When you have floats, the parent element collapses, so you have to clear the floats. One often-used technique is the clearfix class. Applied to your element it would look like this:
#footer:after {
content: "";
display: table;
clear: both;
}
I have a fiddle with cleaner code that you can use parts of it, or the whole thing, at your convenience. https://jsfiddle.net/r3ruzLL2/2
https://jsfiddle.net/r3ruzLL2/2/embedded/result/
EDIT: For the Facebook logo, an easy solution is to use a negative margin-top.
Add this rule:
section{
overflow:hidden;
}
Here you go, this seems to be fixing your problem: http://jsfiddle.net/weissman258/kpo4y108/10/.
Here are the things I added.
#footer {
display:inline-block;
}
#footer_network {
position:relative;
}
#footer_network a {
position:absolute;
left:0;
}
#footer_location {
display:inline-block;
}
As well as removing:
#footer_network img {
float:left;
}
Edit: Your first line on location seemed to be aligned right, so made another change to fix it:
#footer p {
clear:left;
}
Here is a fiddle for you https://jsfiddle.net/kpo4y108/6/ . You have break's in your html that you don't need. You have background's in different div's, which you don't need if you are only going to have one color. Let me know if you have any questions.
<div id="footer">
<section id="footer_logo">
<img src="http://nuskinprinting.com/atticstash/images/as_logo.png" />
</section>
<section id="footer_network">
<a><img src="http://nuskinprinting.com/atticstash/images/facebook_icon.png" /></a>
<h3>Network With Us</h3>
<hr />
</section>
<section id="footer_contact">
<h3>Contact Us</h3>
<hr />
<p> Vivian#advancedlitho.com<br />(972)999-9999 </p>
</section>
<section id="footer_location">
<h3>Location</h3>
<hr />
<p> Orange Circle Antique Mall<br />118 South Glassell Street<br />Orange, CA 92866<br />(714)538-8160<br />Mon. 10 a.m. - 4:45 p.m.<br />Tues - Sat 10 a.m. - 5:45 p.m.<br />Sun. 11 a.m. - 5:45 p.m. </p>
</section>
</div>
css:
/* Footer */
#footer {
background-color:black;
width:100%;
margin:30px 0px 0px 0px;
clear:both;
float:left;
}
#footer h3 {
font-family: 'Dancing Script', cursive;
font-weight:700;
color:#FFF;
font-size:1.5em;
margin:0px;
padding:0px;
}
#footer hr {
width:60%;
float:left;
height:4px;
}
#footer p {
margin:0px;
padding: 0px;
color:#FFF;
font-family: 'Arimo', sans-serif;
float:left;
word-wrap:break-word;
}
#footer_logo {
width:25%;
float:left;
}
#footer_logo img {
margin:20px 0px 0px 20px;
max-width:80%;
}
#footer_network {
width:25%;
float:left;
}
#footer_contact {
width:25%;
float:left;
}
#footer_network img {
float:left;
width:25px;
height:25px;
margin: 5px 5px 0 0;
}
#footer_location {
width:25%;
float:left;
}
I have some divs set up as navigation buttons and I have put all the buttons into a div and then put that div into another "holder" div. the problem is that I can't seem to center the div that holds the buttons.
I've tried to add margin:0 auto but it doesn't seem to do anything:
HTML:
<div class="navholder">
<div class="nav">
<div class="button1"><div class="triangle"></div></div>
<div class="button2"><div class="triangle"></div></div>
<div class="button3"><div class="triangle"></div></div>
<div class="button4"><div class="triangle"></div></div>
<div class="button5"><div class="triangle"></div></div>
<div class="button6"><div class="triangle"></div></div>
</div>
</div>
CSS:
.navholder {
width:950px;
height:350px;
background-color:grey;
}
.nav {
position:relative;
bottom:0px;
margin:0 auto;
}
.button1, .button2, .button3, .button4, .button5, .button6 {
width:120px;
height:35px;
background-color:rgb(204,204,204);
margin-left:5px;
margin-right:5px;
display:inline-block;
float:left;
}
.button1:hover > .triangle, .button2:hover > .triangle, .button3:hover > .triangle, .button4:hover > .triangle, .button5:hover > .triangle, .button6:hover > .triangle{
display: block;
}
.button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover, .button6:hover{
background-color:#B7939B;
}
.triangle {
position:relative;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #B7939B;
top:-15px;
left:0;
right:0;
margin:0 auto;
display: none;
}
Heres a Fiddle of my code.
Add width to your .nav class:
.nav {
position:relative;
bottom:0px;
margin:0 auto;
width:780px;
}
You can try with this:
.navholder {
text-align:center;
}
.nav {
display:inline-block;
}
Your demo http://jsfiddle.net/S6BVL/3/
Specify a width for .nav that is large enough for the 5 buttons. It is defaulting to 100% of its container, 950px. Fiddle: http://jsfiddle.net/S6BVL/2/
Try this demo , i added text-align:center to .navholder and width:800px to .nav:
CSS:
.navholder {
width:950px;
height:350px;
background-color:grey;
text-align:center;
}
.nav {
position:relative;
bottom:0px;
margin:0 auto;
width:800px;
}
This works :
.navholder {
width:950px;
height:350px;
background-color:grey;
text-align: center;
}
.nav {
bottom:0px;
margin: auto;
display: inline-block;
}
Try this
.nav {
text-align: center;
}
the reason margin: 0 auto; does not work is because you have the div's as "inline-block". You can only center inline blocks by centering from their parent.
if you don't want that, you can always try changing this
.button1, .button2, .button3, .button4, .button5, .button6 {
display:inline-block;
}
to this
.button1, .button2, .button3, .button4, .button5, .button6 {
display: block;
}
Or you can just add text-align: center; to .nav
and then just remove float: left; from .button1, .button2, .button3, .button4, .button5, .button6 {
like this:
.nav {
position:relative;
bottom:0px;
text-align: center;
}
.button1, .button2, .button3, .button4, .button5, .button6 {
width:120px;
height:35px;
background-color:rgb(204,204,204);
margin-left:5px;
margin-right:5px;
display:inline-block;
}
Here's the Jsfiddle - http://jsfiddle.net/S6BVL/8/
There are some problems with my HTML, so I am posting the code.
The first tag is a div with id="header". I have given it 100% width and given it a background image.
Inside the header there's another div with id="header-contents". I want it centered on the page so I have given it a width and then margin:0 auto. It works fine with the max-sized browser but when I zoom in or resize the browser width to about half, the background of the header div starts to disappear at some point and does not fill in 100% width.
This is how it looks at first (and should always look):
This is how it looks when I zoom or resize the browser:
What is the proper HTML and CSS for it?
Here's the code:
<!DOCTYPE HTML>
<html>
<style>
body
{
margin:0;
padding:0;
}
.clear
{
display:block;
clear:both;
}
#header
{
min-height:156px;
width:100%;
background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
}
#head-contents
{
width:974px;
margin:0 auto;
height:156px;
}
#header ul
{
margin:85px 23px 0 0;
float:right;
list-style-type:none;
}
#header ul li
{
display:inline;
}
#header ul li a
{
margin-left:46px;
font-size:19px;
color:#fff;
text-decoration:none;
}
#header ul li a:hover ,
#header ul li a.active
{
color:#FD7600
}
</style>
<body>
<div id="header">
<div id="head-contents">
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRRlklPBeTiVsV7dycvDxqFyrU02d0grYf4rTUqL-2ZzGb8Qvbwimb37HgO" />
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="clear"></div>
</div>
</div>
</body>
</html>
I have found the solution:
#header {
height: 156px;
min-width: 990px;
background-image: url('http://www.webdesignideas.org/images/bellevueBg.gif');
display: block;
}
#head-contents {
width: 974px;
margin: 0 auto;
height: 156px;
}
It's all a matter of min-width in the #header.
I checked out facebook's login page and figured it out.
Working FIDDLE Demo
You must set the width of your head-contents as the min-width of your header:
#header {
min-height:156px;
display: block;
width:100%;
background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
min-width: 974px; /* this is width of head-contents */
}
This is the style sheet which works with me:
body{
margin:0;
padding:0;
}
.clear{
display:block;
clear:both;
}
#header{
min-height:156px;
display: block;
width:100%;
background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
}
#head-contents{
width:974px;
margin-left:200px;
height:156px;
}
#header ul {
margin:85px 23px 0 0;
float:right;
list-style-type:none;
}
#header ul li {
display:inline;
}
#header ul li a {
margin-left:46px;
font-size:19px;
color:#fff;
text-decoration:none;
}
#header ul li a:hover ,
#header ul li a.active {
color:#FD7600;
}
Resizing the window and setting the margins to auto will screw the position of your inner div because it s width doesn t fit the window.
Take out the background-image property from #header and apply this style to the body tag:
background: url('http://www.webdesignideas.org/images/bellevueBg.gif') 0 0 repeat-x #fff;
You will no longer have the problem you described. All you need to do now is cut down the background image to 156px height, using an image-editing software package like Photoshop.
Edit: here's the updated jsfiddle showing the solution: http://jsfiddle.net/eYrg8/35/
#header {
min-height:156px;
width:100%;
background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
}
I am trying to show the menu as follows
| HOME |
| GAMES |
| PLAYERS|
|SCHEDULE|
The problem is that my menu is showing like this
| HOME || GAMES |
|PLAYERS||SCHEDULE|
and also.. how can I set the width of it to be consistent?, right now it takes only the length of the word inside of |HOME| but i would like to set this to a fix number.. I am new to css please help
.#tabshor {
width:100%;
font-size:50%;
line-height:5px;
}
#tabshor ul {
margin:-30px;
padding:150px 0px 0px 0px;
line-height:10px;
}
#tabshor li {
display:block;
margin:0;
padding:5;
}
#tabshor a {
float:left;
background:url("../images/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 3px;
text-decoration:none;
}
#tabshor a span {
float:left;
display:block;
background:url("../images/tabright.gif") no-repeat right top;
padding:10px 20px 20px 10px;
color:#FFF;
}
#tabshor a span {float:none;}
#tabshor a:hover span {
color:#FFF;
}
#tabshor a:hover{
background-position:0% -42px;
}
#tabshor a:hover span {
background-position:100% -42px;
}
div#tabshor>ul>li {
display:block;
position:relative;
float:left;
list-style:none;
left:50px;
}
div#tabshor>ul>li ul{
position:absolute; display:none;
list-style:none;
left:100px;
}
div#tabshor>ul>li>a{
display:block;
}
div#tabshor>ul>li:hover ul{
display:block;
z-index:500;
width:50%;
margin:10px 0px 0px -20px;
width:100%;
}
div#tabshor ul li ul a{
display:block;
width: 50px;
}
div#tabshor ul li a:hover{
background:red;
font-style: oblique;
}
HERE IS THE HTML
<div id="left_banner" class="divleftside">
<div id="tabshor">
<ul>
<li><span>HOME</span></li>
<li><span>GAMES</span></li>
<li><span>PLAYERS</span>
<ul>
<li><span>PLAYERS</span></li>
<li><span>SOCCER</span></li>
<li><span>BASKETBALL</span></li>
</ul>
</li>
<li><span>COURTS</span></li>
<li><span>REFEREES</span></li>
<li><span>ABOUT US</span></li>
<li><span>CONTACT US</span></li>
<li><span>REGISTER</span></li>
</ul>
</div>
</div>
Try:
Remove float: left from div#tabshor>ul>li
Remove float: left from #tabshor a
Add width: 170px; to div#tabshor>ul>li>a
Cleaning up your CSS might lead to less headaches. Also starting with an example like this vertical rollover list or this nested vertical rollover list might be easier.
I'm better about getting things to look good in IE8, FF, and Safari, but IE7 still throws curve balls at me...
Please check out this page and scroll down below the nav bar:
http://rattletree.com/instruments.php
It should become obvious when viewing in FF vs IE7. For some reason the formatting of the list is pushing the list items down on the page...
any tips?
<ul class="instrument">
<li class="imagebox"><img src="/images/stuff.jpg" width="247" height="228" alt="Matepe" /></li>
<li class="textbox"><h3>Matepe</h3><p>This text should be to the right of the image but drops below the image in IE7</p></li>
</ul>
css:
ul.instrument {
text-align:left;
display:inline-block;
}
ul.instrument li {
list-style-type: none;
display:inline-block;
}
li.imagebox {
display:inline;
margin:20px 0;
padding:0px;
vertical-align:top;
}
li.imagebox img{
border: solid black 1px;
}
li.textbox {
display:inline;
}
li.textbox p{
margin:10px;
width:340px;
display:inline-block;
}
basically this line ul.instrument li { is overiding li.imagebox etc.
so what you can do is this:
CSS:
ul.instrument {
text-align:left;
display:inline-block;
}
ul.instrument li {
list-style-type: none;
display:inline-block;
}
ul.instrument li.imagebox {
display:inline;
margin:20px 0;
padding:0px;
vertical-align:top;
}
ul.instrument li.imagebox img{
border: solid black 1px;
}
ul.instrument li.textbox {
display:inline;
}
ul.instrument li.textbox p{
margin:10px;
width:340px;
display:inline-block;
}
Basically what I did, instead of declaring li.imagebox I used ul.instrument li.imagebox
so that it won't be overide by this declaration ul.instrument li
Hope this helps :)
Edit, here's another take but this approach is different it uses float
CSS:
ul, li, h3, p { margin: 0; padding: 0 }
ul, li { list-style: none }
ul.instrument { overflow: hidden}
ul.instrument li, ul.instrument li img { float: left; }
ul.instrument li.imagebox { margin:20px 0; }
ul.instrument li.imagebox img { border: 1px solid black }
ul.instrument li.textbox p { margin: 10px; width: 340px }
but this one works in all browsers, I promise :D. Basically the first 2 lines resets the elements you used so that it will look the same in all browser.