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>
Related
I have a simple problem with a menu, its a 2 part menu : on the left, a traditional UL. On the right, a link contained in a div.
The right div has fixed width. The left div must take all remaining space.
I tried the overflow:hidden technique, to no avail
https://coderwall.com/p/0ph8lg/overflow-hidden-trick-to-fill-remaining-width
https://jsfiddle.net/3gfqyux4/
.container {
width:800px;
height:50px;
}
.left-menu {
background-color:red;
width:auto;
height:50px;
overflow:hidden;
}
.left-menu ul li {
display:inline;
}
.right-menu {
background-color:blue;
float:right;
width:100px;
height:50px;
}
Use calc
.container {
width:800px;
height:50px;
}
.left-menu {
background-color:red;
width:150px;
height:50px;
float:left;
}
.left-menu ul li {
display:inline;
}
.right-menu {
background-color:blue;
width:calc(100% - 150px);
height:50px;
}
Updated your fiddle: https://jsfiddle.net/3gfqyux4/3/
I assume you mean your "right" div has a fixed width (as indicated in your code) and that the left div should take up the remaining width.
flexbox can do that.
.container {
width: 80%;
height: 50px;
display: flex;
}
.left-menu {
background-color: red;
flex: 1 0 auto;
}
.left-menu ul li {
display: inline;
}
.right-menu {
background: green;
flex: 0 1 100px;
}
<div class="container">
<div class="left-menu">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
<div class="right-menu">
<a href="xyz.com">
xyz.com
</a>
</div>
</div>
JSfiddle Demo
CSS-Tricks: Complete Guide
if you don't change the order: remember display:inline-block;
.container {
width:800px;
height:50px;
}
.left-menu {
background-color:red;
width:calc(100% - 100px);
height:50px;
/*overflow:hidden;*/
display:inline-block;
}
.left-menu ul li {
display:inline;
}
.right-menu {
background-color:blue;
float:right;
width:100px;
height:50px;
display:inline-block;
}
Change an order of this two lists ;)
<div class="container">
<div class="right-menu">
<a href="xyz.com">
xyz.com
</a>
</div>
<div class="left-menu">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
https://jsfiddle.net/3gfqyux4/2/
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/
I have two that I need horizontally centered to each other, wrapped in a single div. can you please explain what I am doing wrong?
My HTML
<div id="center">
<div id="logo"><img src="images/blackcat_logo.png" width="200px"></div>
<nav>
<ul>
<li>SHOP</li>
<li>ARTIST</li>
<li>SERVICES</li>
<li>FAQs</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
My CSS:
header{
height:500px;
width:auto;
background-image:url(images/headerphoto.png);
text-align:center;
}
#center{
width:960px;
margin:auto;
overflow:hidden;
display:inline-block;
}
#logo{
float:left;
display:inline-block;
}
nav{
float:right;
display:inline-block;
}
#center {
text-align:center;
}
#logo, nav {
display: inline-block;
}
The above code works for me http://www.cssdesk.com/QKNNj .
Remove the float from #logo and nav. Then set your #center div to text-align:center;
#center {
width:960px;
margin:auto;
overflow:hidden;
display:inline-block;
text-align:center;
}
Is that what you had in mind?
Your full CSS should be:
#center {
width:960px;
margin:0 auto;
overflow:hidden;
left:0;
right:0;
text-align:center;
}
I have the following:
HTML:
<div id="wrapper">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
CSS:
div {
height: 178px;
}
#wrapper {
display: table;
table-layout: fixed;
width: 100%;
}
#left, #center, #right {
display: table-cell;
}
#center {
width: 1100px;
}
#left {
background: url(left.gif) repeat-x;
}
#center {
background: url(center.gif) no-repeat center center;
}
#right {
background: url(right.gif) repeat-x;
}
See: fiddle
I want to put a horizontal menu in orange part of center section and another horizontal menu in yellow part;
I tried this:
HTML:
<div id="wrapper">
<div id="left"></div>
<div id="center">
<ul id="menu1">
<li>Home</li>
<li>What We Do</li>
<li>Locations</li>
<li>Partnerships</li>
<li>Contact</li>
</ul>
<ul id="menu2">
<li>Home</li>
<li>What We Do</li>
<li>Locations</li>
<li>Partnerships</li>
<li>Contact</li>
</ul>
</div>
<div id="right"></div>
</div>
Added CSS:
#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;}
#menu1 li {float:right; margin-left:5px;}
#menu1 a {color:violet;}
#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;}
#menu2 li {float:right; margin-left:5px;}
#menu2 a {color:#000;}
See: fiddle
But no had no success, please help!
You can use relative positioning (https://developer.mozilla.org/en-US/docs/Web/CSS/position#Relative_positioning) e.g.
http://jsfiddle.net/67UWv/
css
#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;
position:relative;
top:85px;
right:30px;
}
#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;
position:relative;
top:110px;
right:30px;
}
edit - related to last comments
in order to remove the white spacing around the menu image it is required to set margin:0 for the body element to override the default user agent style rules.
body{
margin:0px;
}
http://jsfiddle.net/67UWv/1/
edit - response to the latest comments
The white gap noticed was caused in ff from the beginning (test original fiddle http://jsfiddle.net/6GE3x/27/show/ ) when content was placed within #center div. So there is some issue there when using display:table and display:table-cell and also adding content.
In order to avoid using an actual table for layout and all the consequences related to them, it is possible to position the center part using absolute layout as follows,
http://jsfiddle.net/eH2m6/show/
http://jsfiddle.net/eH2m6/
css
div {
height: 178px;
}
#wrapper {
/* display: table;
table-layout: fixed; */
width: 100%;
}
#left, #right {
/* display: table-cell; */
/*the following will make #left and #right take full width*/
float:left;
width:50%;
}
#center {
width: 1100px;
/*the following will position #center in the center*/
position:absolute;
left:50%;
margin-left:-550px;
}
#left {
background: url(http://dentaliran.ir/left.gif) repeat-x;
}
#center {
background: url(http://dentaliran.ir/center.gif) no-repeat center center;
}
#right {
background: url(http://dentaliran.ir/right.gif) repeat-x;
}
#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;
position:relative;
top:85px;
right:30px;
}
#menu1 li {float:right; margin-left:5px;}
#menu1 a {color:violet;}
#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;
position:relative;
top:110px;
right:30px;
}
#menu2 li {float:right; margin-left:5px;}
#menu2 a {color:#000;}
body{
margin:0px;
}
has been tested in ie8,ie9,chrome32.x,ff25.x
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;