Hi i don't know how to center div in footer or float it right or left because my footer falls apart.
Here is my code:
<div id="footer"><div id="tab_brand"><ul>
<li><img src="footer_slike/dell_footer.png"/></li>
</ul>
<ul>
<li><img src="footer_slike/acer_footer.png"/></li>
</ul></div>
</div>
css code
#footer{
background-color:grey;
width:100%;
height:auto;
margin:0;
padding:0;
left:0;
clear:both;
opacity:0.8;
}
#tab_brand{
height:100%;
left: 20px;
border:1px solid white;
}
#tab_brand ul li img{
padding:5px;
}
#tab_brand ul{
display: inline-table;
list-style: none;
height:auto;
width:auto;
}
thanks
If you want to center #tab_brand you need to set a width to it and add "margin: 0 auto" to center it.
Here is an example:
http://jsfiddle.net/ok7Lyp2n/
Related
i want to make responsive image slider but i change #wrapper ul width to max-width so responsive doesn't work.I do not know what to do.It does not work well.please help me for this problem.
*{
padding:0;
margin:0;
box-sizing:border-box;
}
.after::after{
content:'';
display:block;
clear:both;
}
#main{
position:relative;
width:100%;
background:yellow;
margin-top:30px;
}
#wrapper{
position:relative;
max-width:800px;
margin:0 auto;
overflow:hidden;
}
#wrapper ul{
padding:0;
margin:0;
list-style-type:none;
max-width:3200px;/* it doesn't work*/
}
#wrapper ul li{
width:800px;
height:400px;
float:left;
}
<html>
<body>
<div id="main" class="after">
<div id="wrapper" class="after">
<ul class="after">
<li style="background:red;"><img src="http://via.placeholder.com/800x400" /></li>
<li style="background:green;"></li>
<li style="background:blue;"></li>
<li style="background:purple;"></li>
</ul>
</div>
</div>
</body>
</html>
You've set the max-width in your #wrapper to 800px.
You've set the max-width of the #wrapper ul to 3200px.
I might be mistaken, but logically speaking the ul will only ever reach 800px because the max width of the wrapper that it is inside is set to 800px.
#wrapper ul li {
/* width: 800px; remove it */
height: 400px;
/* float: left; remove it */
}
And add #wrapper ul li img { max-width : 100% }
Everything will be responsive perfectly.
Full code
*{
padding:0;
margin:0;
box-sizing:border-box;
}
.after::after{
content:'';
display:block;
clear:both;
}
#main{
position:relative;
width:100%;
background:yellow;
margin-top:30px;
}
#wrapper{
position:relative;
max-width:800px;
margin:0 auto;
overflow:hidden;
}
#wrapper ul{
padding:0;
margin:0;
list-style-type:none;
max-width:3200px;/* it doesn't work*/
}
#wrapper ul li{
height:400px;
}
#wrapper ul li img { max-width : 100% }
<html>
<body>
<div id="main" class="after">
<div id="wrapper" class="after">
<ul class="after">
<li style="background:red;"><img src="http://via.placeholder.com/800x400" /></li>
<li style="background:green;"></li>
<li style="background:blue;"></li>
<li style="background:purple;"></li>
</ul>
</div>
</div>
</body>
</html>
I am trying to center then float:right my top fixed navbar with the content area of my page. Currently the navbar is floated right but is not centered with my content area.
Click to view my subject site.
CSS
#topribbon{
width: 100%;
height: 30px;
background-color: #AA1119 ;
margin: -11px 0px 1em 0px;
position: fixed;
z-index: 9999;
}
#topribbon ul{
padding-top:5px;
text-align:right;
float:right;
position:relative;
margin:0 auto;
width:980px;
}
#topribbon ul li{
float:right;
color:white;
padding:0 10px 0 10px;
list-style:none;
display:block;
line-height:20px;
text-align:center;
cursor:pointer;
width:auto;
}
#topribbon ul li:hover{
color:#5C8FA5;
HTML
<div id="topribbon"> <ul>
<li>Free Ground Shipping on all orders over $99!</li>
<li>Why Us?</li>
<li>Account</li>
<li>Cart</li>
<li>+1-800-555-5555</li>
</ul>
</div>
My first guess is the width of ul element doesn't work.
Try this instead
<div id="topribbon">
<div class="ribbonwrapper" style="width:980px;margin:0 auto;">
<ul>
<li>Free Ground Shipping on all orders over $99!</li>
<li>Why Us?</li>
<li>Account</li>
<li>Cart</li>
<li>+1-800-555-5555</li>
</ul>
</div>
</div>
Put the style of .ribbonwrapper into CSS to make the code tidy :) then you can remove irrelevant width & margin property of #topribbon ul
I'm not sure I'm entirely clear on what you're trying to do, but if what you want is to float:right the UL and then have all the LI's within it centered, you could do this:
#topribbon ul { float:right; text-align: center; }
#topribbon ul li { display: inline-block; }
Be sure to remove the float:right; from the li style block.
If you mean something else by "centered with my content area" can you explain more?
Try with float:none; on the #topribbon ul
Pretty confused what you mean exactly myself... Maybe this is what you want? jsFiddle
#topribbon {
width: 100%;
background-color: #AA1119;
margin: -11px 0px 1em 0px;
position: fixed;
z-index: 9999;
overflow:hidden;
}
#topribbon ul {
padding:10px 0 8px;
position:relative;
margin:0 auto;
width:980px;
background:red;
overflow:hidden;
}
#topribbon ul li {
color:white;
list-style:none;
display:inline-block;
line-height:20px;
cursor:pointer;
width:auto;
padding:0 10px 0 10px;
float:right;
}
#topribbon ul li:hover {
color:#5C8FA5;
}
like others have said use the ul below. I am just as stumped as you however, I am new so if my code is wrong then please feel free to tell me. Thanks
#topribbon ul { float:right; text-align: center; }
#topribbon ul li { display: inline-block; }
I'm having a very hard time trying to figure out how to align my bottom border for my text to the bottom border of my header. Can anybody tell me how to do this? It'd be greatly appreciated. I've tried numerous things.
http://jsfiddle.net/Zevoxa/YeJc6/
HTML
<div id="header">
<img id="logo" src="/img/logo.png"/>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
CSS
/*-- HEADER --*/
#header {
top:0px;
width:100%;
padding-top:20px;
padding-bottom:0px;
background-color:#2C2E31;
border-bottom:#242426 solid 2px;
text-align:center;
}
img#logo {
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
}
#nav ul li {
list-style-type:none;
display:inline;
margin-bottom:0px;
padding-bottom:0px;
padding-right:20px;
font-size:20px;
}
#nav ul li a {
color:#FAFAFA;
text-decoration:none;
border-bottom:#FAFAFA solid 2px;
}
/*-- CONTENT --*/
body {
margin:0px;
padding:0px;
background-color:#2A2B2D;
}
You can set the margin-bottom to 0px for the ul
#header ul {
margin-bottom:0px;
}
http://jsfiddle.net/YeJc6/6/
maybe set #nav to the bottom of #header simply with:
#nav
{
position:absolute;
bottom:0px;
height:20px; //whatever height/size of text is needed
}
This tells it to align #nav, which is in #header, to go to the bottom of #header.
In your case you just need to remove the bottom margin on your ul.
#nav ul {
margin-bottom: 0;
}
I took a break after doing a little bit and everything is fine. I come back to see my header has a gap between the top of the page and itself. I don't know why, I must of not saved or something, but I can't figure out what's wrong...
http://jsfiddle.net/Zevoxa/tCxaU/
HTML
<div id="header">
<img id="logo" src="/img/logo.png">
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
CSS
/*-- HEADER --*/
#header {
position:relative;
top:0px;
width:100%;
background-color:#2C2E31;
border-bottom:#242426 solid 2px;
}
img#logo {
display: block;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
}
#nav ul li {
list-style-type:none;
display:inline;
margin-bottom:0px;
padding-bottom:0px;
}
/*-- CONTENT --*/
body {
margin:0px;
padding:0px;
background-color:#2A2B2D;
}
Your issue is margin-top on the #logo.
One solution is to add that top 20px spacing as padding on the #header rather than a margin on the #logo.
http://jsfiddle.net/JRPwr/
/*-- HEADER --*/
#header {
position:relative;
top:0px;
width:100%;
background-color:#2C2E31;
border-bottom:#242426 solid 2px;
padding-top:20px;
}
img#logo {
display: block;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
}
#nav ul li {
list-style-type:none;
display:inline;
margin-bottom:0px;
padding-bottom:0px;
}
/*-- CONTENT --*/
body {
margin:0px;
padding:0px;
background-color:#2A2B2D;
}
Alternate solutions are mentioned in the following StackOverflow question:
Margin on child element moves parent element
In img#logo, use margin-top: 0px;
this is a html/css nav bar how can i center it in the center of my page i tryed putting center tags in the html and float:center; under the ul but it wont work ill post my html then my css
HTML
<body>
<ul>
<li> </li>
</ul>
</body>
CSS
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
padding-left:200px;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
demo here
Add text-align: center to ul and replace float: left with display: inline-block
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
text-align:center; <<add this
}
li
{
display:inline-block; << add this instead of float
}
The other parts of your css remains unchanged!
So if You add more li to your website they'll all be in the center next to each other.
<li> </li>
<li> </li>
To remove the whitespace:
<li> </li><li> </li>
Don't push enter between each line. :)
...or there's another solution is to add: margin-left:-4px:
li
{
display:inline-block;
margin-left: -4px;
}
You'll need to add:
margin: 0 auto;
to the css for the ul and a elements, and remove the float: left; from the li.
See this jsfiddle here
Since you give your a a width: 120px then why cannot give your ul the same property and using margin:
width: 120px;
margin: 0 auto;
Demo: http://jsfiddle.net/NYE3y/
Put the <ul> inside a <div> and center it using align="center"
like this:
<div align="center">
<ul>
<li>hhhh</li>
<li>hhhhh</li>
</ul>
</div>
Use an wrapper for UL and apply an width to wrapper
<div class="menu-wrap">
<ul>
<li>Menu A</li>
</ul>
</div>
CSS:
.menu-wrap {
margin:0 auto;
width:500px;
}
you can still use float for your li.
Remember to clear floats always.