I need the pockeat item place right beside the sidebar, and I tried many of the solutions I found on the Internet, but none of them work.
This is my code:
.header {
background-color:#ffffff;
top:0;
height:10%;
width:100%;
color:#1c1919;
font-family:century gothic;
font-size:56px;
padding:15px;
text-decoration:none;
float:center;
text-align:center;
top:2%;
}
.navbar {
position:relative;
display:inline-block;
text-align:center;
overflow:hidden;
background-color:#ffffff;
height:8%;
width: 100%;
border-top:4px solid #1c1919;
border-bottom:4px solid #1c1919;
padding:5px;
}
.navbar a {
text-align:center;
text-decoration:none;
color:#1c1919;
font-family:century gothic;
font-size:32px;
padding:0 30px;
}
.sidebar {
background-color:#ffffff;
text-decoration:none;
font-family:century gothic;
height:82%;
width:20%;
border-right:2px solid #1c1919;
}
button.accordion {
background-color: #f2f2f2;
color: #1c1919;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
opacity:0.7;
}
button.accordion:after {
content: '\002B';
color: #1c1919;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0 18px;
background-color:#ffffff;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.panel li a {
text-decoration:none;
font-family:century gothic;
font-size:15px;
text-align:left;
color: #1c1919;
padding:10px;
display:block;
}
.content-body {
background-color:#ffffff;
height:82%;
width:80%;
text-decoration:none;
padding:10px;
float:right;
}
.content {
height:60px;
width:50px;
background-color:#ffffff;
text-decoration:none;
font-family:century gothic;
padding:10px;
font-size:20px;
display:block;
}
<!navbar>
<div class="navbar">
HOME
NEWEST
RECOMMENDED
ALL TIME FAVE
CONTACT US
</div>
<!sidebar>
<div class="sidebar">
<button class="accordion">Gadgets</button>
<div class="panel">
<ul>
<li>Camera</li>
<li>Watch</li>
<li>Music</li>
<li>Phone</li>
<li>Bracelet</li>
</ul>
</div>
<button class="accordion">Furniture</button>
<div class="panel">
<ul>
<li>Wheelchair</li>
<li>Lights</li>
<li>Table/ Chair</li>
<li>Storage</li>
</ul>
</div>
<button class="accordion">Lifestyle</button>
<div class="panel">
<ul>
<li>Window Blinds</li>
<li>Ornaments</li>
<li>Mask</li>
<li>Socks</li>
<li>Gardening</li>
</ul>
</div>
<button class="accordion">Instruments</button>
<div class="panel">
<ul>
<li>Guitar</li>
<li>Flute</li>
<li>Tuner</li>
</ul>
</div>
<button class="accordion">Kitchen/Bathroom</button>
<div class="panel">
<ul>
<li>Ready-to-Eat</li>
<li>Bag</li>
<li>Pot</li>
<li>Kit</li>
</ul>
</div>
<button class="accordion">Pet</button>
<div class="panel">
<ul>
<li>Cat</li>
<li>Dog</li>
</ul>
</div>
<button class="accordion">Stationery</button>
<div class="panel">
<ul>
<li>Pen Pouch</li>
<li>Clock</li>
</ul>
</div>
<button class="accordion">Toy</button>
<div class="panel">
<ul>
<li>Block</li>
<li>Doll</li>
<li>Card</li>
</ul>
</div>
<button class="accordion">Other</button>
<div class="panel">
<ul>
<li>Pill Case</li>
<li>Fitness</li>
<li>Bicycle</li>
<li>Wine</li>
</ul>
</div>
</div>
<!content>
<div class="content-body">
<div class="content">
<img src="/image/bento/20170521223952w6A7Gz9kL8KlUW1g.jpg-w600.jpg" style="height:80%; width:100%">
<br>Pockeat
</div>
</div>
Where have I done wrong?
Your border of 2% eats into your sidebar width making it a total of 22%, so your sidebar needs to be 18% with a 2% border, please see the updated CSS.
I have also removed all of your height attributes and they are not needed. The content within the divs will adapt naturally. Another amendment I made is making the font you are using global by adding it into the "body" selector within your CSS.
body {
font-family:century gothic;
}
.header {
background-color:#ffffff;
width:100%;
color:#1c1919;
font-size:56px;
padding:15px;
text-decoration:none;
float:center;
text-align:center;
top:2%;
}
.navbar {
position:relative;
display:inline-block;
text-align:center;
overflow:hidden;
background-color:#ffffff;
width: 100%;
border-top:4px solid #1c1919;
border-bottom:4px solid #1c1919;
padding:5px;
}
.navbar a {
text-align:center;
text-decoration:none;
color:#1c1919;
font-size:32px;
padding:0 30px;
}
.sidebar {
background-color:#ffffff;
text-decoration:none;
width:18%;
border-right:2px solid #1c1919;
float:left;
}
button.accordion {
background-color: #f2f2f2;
color: #1c1919;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
opacity:0.7;
}
button.accordion:after {
content: '\002B';
color: #1c1919;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0 18px;
background-color:#ffffff;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.panel li a {
text-decoration:none;
font-size:15px;
text-align:left;
color: #1c1919;
padding:10px;
display:block;
}
.content-body {
background-color:#ffffff;
width:80%;
text-decoration:none;
padding:10px;
float:right;
}
.content {
background-color:#ffffff;
text-decoration:none;
font-size:20px;
display:block;
}
No float was added to .sidebar
total width of both (i.e. .sidebar and .content-body) should be less than 100% as you added a border to the right side of .sidebar as below,
background-color:#ffffff;
top:0;
height:10%;
width:100%;
color:#1c1919;
font-family:century gothic;
font-size:56px;
padding:15px;
text-decoration:none;
float:center;
text-align:center;
top:2%;
}
.navbar {
position:relative;
display:inline-block;
text-align:center;
overflow:hidden;
background-color:#ffffff;
height:8%;
width: 100%;
border-top:4px solid #1c1919;
border-bottom:4px solid #1c1919;
padding:5px;
}
.navbar a {
text-align:center;
text-decoration:none;
color:#1c1919;
font-family:century gothic;
font-size:32px;
padding:0 30px;
}
.sidebar {
background:#fff;
text-decoration:none;
font-family:century gothic;
height:82%;
width:20%;
border-right:2px solid #1c1919;
float:left;
overflow:hidden;
}
button.accordion {
background-color: #f2f2f2;
color: #1c1919;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
opacity:0.7;
}
button.accordion:after {
content: '\002B';
color: #1c1919;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0 18px;
background-color:#ffffff;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.panel li a {
text-decoration:none;
font-family:century gothic;
font-size:15px;
text-align:left;
color: #1c1919;
padding:10px;
display:block;
}
.content-body {
background-color:#ffffff;
height:82%;
width:calc(80% - 5%);
text-decoration:none;
padding:10px;
float:right;
}
.content {
height:60px;
width:50px;
background-color:#ffffff;
text-decoration:none;
font-family:century gothic;
padding:10px;
font-size:20px;
display:block;
}
<div class="navbar">
HOME
NEWEST
RECOMMENDED
ALL TIME FAVE
CONTACT US
</div>
<div class="sidebar">
<button class="accordion">Gadgets</button>
<div class="panel">
<ul>
<li>Camera</li>
<li>Watch</li>
<li>Music</li>
<li>Phone</li>
<li>Bracelet</li>
</ul>
</div>
<button class="accordion">Furniture</button>
<div class="panel">
<ul>
<li>Wheelchair</li>
<li>Lights</li>
<li>Table/ Chair</li>
<li>Storage</li>
</ul>
</div>
<button class="accordion">Lifestyle</button>
<div class="panel">
<ul>
<li>Window Blinds</li>
<li>Ornaments</li>
<li>Mask</li>
<li>Socks</li>
<li>Gardening</li>
</ul>
</div>
<button class="accordion">Instruments</button>
<div class="panel">
<ul>
<li>Guitar</li>
<li>Flute</li>
<li>Tuner</li>
</ul>
</div>
<button class="accordion">Kitchen/Bathroom</button>
<div class="panel">
<ul>
<li>Ready-to-Eat</li>
<li>Bag</li>
<li>Pot</li>
<li>Kit</li>
</ul>
</div>
<button class="accordion">Pet</button>
<div class="panel">
<ul>
<li>Cat</li>
<li>Dog</li>
</ul>
</div>
<button class="accordion">Stationery</button>
<div class="panel">
<ul>
<li>Pen Pouch</li>
<li>Clock</li>
</ul>
</div>
<button class="accordion">Toy</button>
<div class="panel">
<ul>
<li>Block</li>
<li>Doll</li>
<li>Card</li>
</ul>
</div>
<button class="accordion">Other</button>
<div class="panel">
<ul>
<li>Pill Case</li>
<li>Fitness</li>
<li>Bicycle</li>
<li>Wine</li>
</ul>
</div>
</div>
<div class="content-body">
<div class="content">
<img src="/image/bento/20170521223952w6A7Gz9kL8KlUW1g.jpg-w600.jpg" style="height:80%; width:100%">
<br>Pockeat
</div>
</div>
Just add float:left to your sidebar div & add box-sizing to globally. Check updated snippet below:
*,
*:before,
*:after {
box-sizing: border-box;
}
.header {
background-color: #ffffff;
top: 0;
height: 10%;
width: 100%;
color: #1c1919;
font-family: century gothic;
font-size: 56px;
padding: 15px;
text-decoration: none;
float: center;
text-align: center;
top: 2%;
}
.navbar {
position: relative;
display: inline-block;
text-align: center;
overflow: hidden;
background-color: #ffffff;
height: 8%;
width: 100%;
border-top: 4px solid #1c1919;
border-bottom: 4px solid #1c1919;
padding: 5px;
}
.navbar a {
text-align: center;
text-decoration: none;
color: #1c1919;
font-family: century gothic;
font-size: 32px;
padding: 0 30px;
}
.sidebar {
background-color: #ffffff;
text-decoration: none;
font-family: century gothic;
height: 82%;
width: 20%;
border-right: 2px solid #1c1919;
float: left;
}
button.accordion {
background-color: #f2f2f2;
color: #1c1919;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active,
button.accordion:hover {
opacity: 0.7;
}
button.accordion:after {
content: '\002B';
color: #1c1919;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0 18px;
background-color: #ffffff;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.panel li a {
text-decoration: none;
font-family: century gothic;
font-size: 15px;
text-align: left;
color: #1c1919;
padding: 10px;
display: block;
}
.content-body {
background-color: #ffffff;
height: 82%;
width: 80%;
text-decoration: none;
padding: 10px;
float: right;
}
.content {
height: 60px;
width: 50px;
background-color: #ffffff;
text-decoration: none;
font-family: century gothic;
padding: 10px;
font-size: 20px;
display: block;
}
<div class="navbar">
HOME
NEWEST
RECOMMENDED
ALL TIME FAVE
CONTACT US
</div>
<div class="sidebar">
<button class="accordion">Gadgets</button>
<div class="panel">
<ul>
<li>Camera</li>
<li>Watch</li>
<li>Music</li>
<li>Phone</li>
<li>Bracelet</li>
</ul>
</div>
<button class="accordion">Furniture</button>
<div class="panel">
<ul>
<li>Wheelchair</li>
<li>Lights</li>
<li>Table/ Chair</li>
<li>Storage</li>
</ul>
</div>
<button class="accordion">Lifestyle</button>
<div class="panel">
<ul>
<li>Window Blinds</li>
<li>Ornaments</li>
<li>Mask</li>
<li>Socks</li>
<li>Gardening</li>
</ul>
</div>
<button class="accordion">Instruments</button>
<div class="panel">
<ul>
<li>Guitar</li>
<li>Flute</li>
<li>Tuner</li>
</ul>
</div>
<button class="accordion">Kitchen/Bathroom</button>
<div class="panel">
<ul>
<li>Ready-to-Eat</li>
<li>Bag</li>
<li>Pot</li>
<li>Kit</li>
</ul>
</div>
<button class="accordion">Pet</button>
<div class="panel">
<ul>
<li>Cat</li>
<li>Dog</li>
</ul>
</div>
<button class="accordion">Stationery</button>
<div class="panel">
<ul>
<li>Pen Pouch</li>
<li>Clock</li>
</ul>
</div>
<button class="accordion">Toy</button>
<div class="panel">
<ul>
<li>Block</li>
<li>Doll</li>
<li>Card</li>
</ul>
</div>
<button class="accordion">Other</button>
<div class="panel">
<ul>
<li>Pill Case</li>
<li>Fitness</li>
<li>Bicycle</li>
<li>Wine</li>
</ul>
</div>
</div>
<div class="content-body">
<div class="content">
<img src="/image/bento/20170521223952w6A7Gz9kL8KlUW1g.jpg-w600.jpg" style="height:80%; width:100%">
<br>Pockeat
</div>
</div>
It is because your sidebar and your content-body are too large to be floated.
If you want to use width: 80% with a padding, you should use:width: calc(80% - padding), same for borders.
.header {
background-color:#ffffff;
top:0;
height:10%;
width:100%;
color:#1c1919;
font-family:century gothic;
font-size:56px;
padding:15px;
text-decoration:none;
float:center;
text-align:center;
top:2%;
}
.navbar {
position:relative;
display:inline-block;
text-align:center;
overflow:hidden;
background-color:#ffffff;
height:8%;
width: 100%;
border-top:4px solid #1c1919;
border-bottom:4px solid #1c1919;
padding:5px;
}
.navbar a {
text-align:center;
text-decoration:none;
color:#1c1919;
font-family:century gothic;
font-size:32px;
padding:0 30px;
}
.sidebar {
background-color:#ffffff;
text-decoration:none;
font-family:century gothic;
height:82%;
width:20%;
float: left;
}
button.accordion {
background-color: #f2f2f2;
color: #1c1919;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
opacity:0.7;
}
button.accordion:after {
content: '\002B';
color: #1c1919;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0 18px;
background-color:#ffffff;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.panel li a {
text-decoration:none;
font-family:century gothic;
font-size:15px;
text-align:left;
color: #1c1919;
padding:10px;
display:block;
}
.content-body {
background-color:#ffffff;
height:82%;
width:80%;
text-decoration:none;
float:left;
}
.content {
height:60px;
width:50px;
background-color:#ffffff;
text-decoration:none;
font-family:century gothic;
padding:10px;
font-size:20px;
display:block;
}
<!navbar>
<div class="navbar">
HOME
NEWEST
RECOMMENDED
ALL TIME FAVE
CONTACT US
</div>
<!sidebar>
<div class="sidebar">
<button class="accordion">Gadgets</button>
<div class="panel">
<ul>
<li>Camera</li>
<li>Watch</li>
<li>Music</li>
<li>Phone</li>
<li>Bracelet</li>
</ul>
</div>
<button class="accordion">Furniture</button>
<div class="panel">
<ul>
<li>Wheelchair</li>
<li>Lights</li>
<li>Table/ Chair</li>
<li>Storage</li>
</ul>
</div>
<button class="accordion">Lifestyle</button>
<div class="panel">
<ul>
<li>Window Blinds</li>
<li>Ornaments</li>
<li>Mask</li>
<li>Socks</li>
<li>Gardening</li>
</ul>
</div>
<button class="accordion">Instruments</button>
<div class="panel">
<ul>
<li>Guitar</li>
<li>Flute</li>
<li>Tuner</li>
</ul>
</div>
<button class="accordion">Kitchen/Bathroom</button>
<div class="panel">
<ul>
<li>Ready-to-Eat</li>
<li>Bag</li>
<li>Pot</li>
<li>Kit</li>
</ul>
</div>
<button class="accordion">Pet</button>
<div class="panel">
<ul>
<li>Cat</li>
<li>Dog</li>
</ul>
</div>
<button class="accordion">Stationery</button>
<div class="panel">
<ul>
<li>Pen Pouch</li>
<li>Clock</li>
</ul>
</div>
<button class="accordion">Toy</button>
<div class="panel">
<ul>
<li>Block</li>
<li>Doll</li>
<li>Card</li>
</ul>
</div>
<button class="accordion">Other</button>
<div class="panel">
<ul>
<li>Pill Case</li>
<li>Fitness</li>
<li>Bicycle</li>
<li>Wine</li>
</ul>
</div>
</div>
<!content>
<div class="content-body">
<div class="content">
<img src="/image/bento/20170521223952w6A7Gz9kL8KlUW1g.jpg-w600.jpg" style="height:80%; width:100%">
<br>Pockeat
</div>
</div>
I think it will solve your issue.
.header {
background-color:#ffffff;
top:0;
height:10%;
width:100%;
color:#1c1919;
font-family:century gothic;
font-size:56px;
padding:15px;
text-decoration:none;
float:center;
text-align:center;
top:2%;
}
.navbar {
position:relative;
display:inline-block;
text-align:center;
overflow:hidden;
background-color:#ffffff;
height:8%;
width: 100%;
border-top:4px solid #1c1919;
border-bottom:4px solid #1c1919;
padding:5px;
}
.navbar a {
text-align:center;
text-decoration:none;
color:#1c1919;
font-family:century gothic;
font-size:32px;
padding:0 30px;
}
.sidebar {
background-color:#ffffff;
text-decoration:none;
font-family:century gothic;
height:82%;
width:20%;
border-right:2px solid #1c1919;
float: left;
}
button.accordion {
background-color: #f2f2f2;
color: #1c1919;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
opacity:0.7;
}
button.accordion:after {
content: '\002B';
color: #1c1919;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0 18px;
background-color:#ffffff;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.panel li a {
text-decoration:none;
font-family:century gothic;
font-size:15px;
text-align:left;
color: #1c1919;
padding:10px;
display:block;
}
.content-body {
background-color:#ffffff;
height:82%;
width:calc(100% - 20% - 22px);
text-decoration:none;
padding:10px;
float:right;
}
.content {
height:60px;
width:50px;
background-color:#ffffff;
text-decoration:none;
font-family:century gothic;
padding:10px;
font-size:20px;
display:block;
}
<!--navbar -->
<div class="navbar">
HOME
NEWEST
RECOMMENDED
ALL TIME FAVE
CONTACT US
</div>
<div id="wrapper">
<!--sidebar -->
<div class="sidebar">
<button class="accordion">Gadgets</button>
<div class="panel">
<ul>
<li>Camera</li>
<li>Watch</li>
<li>Music</li>
<li>Phone</li>
<li>Bracelet</li>
</ul>
</div>
<button class="accordion">Furniture</button>
<div class="panel">
<ul>
<li>Wheelchair</li>
<li>Lights</li>
<li>Table/ Chair</li>
<li>Storage</li>
</ul>
</div>
<button class="accordion">Lifestyle</button>
<div class="panel">
<ul>
<li>Window Blinds</li>
<li>Ornaments</li>
<li>Mask</li>
<li>Socks</li>
<li>Gardening</li>
</ul>
</div>
<button class="accordion">Instruments</button>
<div class="panel">
<ul>
<li>Guitar</li>
<li>Flute</li>
<li>Tuner</li>
</ul>
</div>
<button class="accordion">Kitchen/Bathroom</button>
<div class="panel">
<ul>
<li>Ready-to-Eat</li>
<li>Bag</li>
<li>Pot</li>
<li>Kit</li>
</ul>
</div>
<button class="accordion">Pet</button>
<div class="panel">
<ul>
<li>Cat</li>
<li>Dog</li>
</ul>
</div>
<button class="accordion">Stationery</button>
<div class="panel">
<ul>
<li>Pen Pouch</li>
<li>Clock</li>
</ul>
</div>
<button class="accordion">Toy</button>
<div class="panel">
<ul>
<li>Block</li>
<li>Doll</li>
<li>Card</li>
</ul>
</div>
<button class="accordion">Other</button>
<div class="panel">
<ul>
<li>Pill Case</li>
<li>Fitness</li>
<li>Bicycle</li>
<li>Wine</li>
</ul>
</div>
</div>
<!--content-->
<div class="content-body">
<div class="content">
<img src="/image/bento/20170521223952w6A7Gz9kL8KlUW1g.jpg-w600.jpg" style="height:80%; width:100%">
<br>Pockeat
</div>
</div>
</div>
Related
I have some issue with a paragraph moving on hover, after some research I found many issue related with padding and margin so I tried some edit like :
to remove the padding
to remove the margin
to remove line-height
set position static or fixed on hover
Nothing worked, this mostly looks like a layout issue but I'm not very accommodate with it.
Any help would be appreciated.
#main-footer p{
font-size:16px;
}
#main-footer hr{
margin-top:0;
border-color:#19191d;
}
#main-footer .col-sm-4 p{
line-height: 30px;
margin: 0 !important;
}
#main-footer .col-sm-4 p.address{
padding-left: 28px;
}
#main-footer .container a{
color: #ffffff;
}
#main-footer .container a:hover{
color: #d6c087;
position: static;
}
#main-footer .container a:active, a:visited, a:focus{
text-decoration: none;
}
#main-footer img{
width: 24px !important;
height: 24px !important;
}
.social-links {
list-style:none;
margin:0;
padding:0;
margin-bottom:20px;
}
.social-links li{
display:inline-block;
margin:0 5px;
border-radius:3px;
box-shadow:0 4px 0 transparent;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.social-links li a {
display:block;
color:#fff;
color:rgba(255,255,255,0.3);
font-size:18px;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background:rgba(0,0,0,0.2);
border-radius:50%;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.social-links li a:hover {
color:#fff;
background:#38A5DB;
}
<div class="container">
<hr>
<h4>Tittle</h4>
<div class="row">
<div class="col-sm-4">
<a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname
</p>
<p class="address">address<br/>
CP City</p></a>
</div>
<div class="col-sm-4">
<a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname
</p>
<p class="address">address<br/>
CP City</p></a>
</div>
<div class="col-sm-4 text-right">
<ul class="social-links">
<li class="scrollimation fade-right d4"><i class="fa fa-instagram fa-fw"></i></li>
<li class="scrollimation fade-right d3"><i class="fa fa-facebook fa-fw"></i></li>
</ul>
<p>Footer copyright</p>
</div>
</div>
</div>
Adding this should work:
p:hover {
padding-left: 20px;
transition: .5s;
}
p {
transition:.25s;
}
Try it in action in the snippet below.
#main-footer p{
font-size:16px;
}
#main-footer hr{
margin-top:0;
border-color:#19191d;
}
#main-footer .col-sm-4 p{
line-height: 30px;
margin: 0 !important;
}
#main-footer .col-sm-4 p.address{
padding-left: 28px;
}
#main-footer .container a{
color: #ffffff;
}
#main-footer .container a:hover{
color: #d6c087;
position: static;
}
#main-footer .container a:active, a:visited, a:focus{
text-decoration: none;
}
#main-footer img{
width: 24px !important;
height: 24px !important;
}
.social-links {
list-style:none;
margin:0;
padding:0;
margin-bottom:20px;
}
.social-links li{
display:inline-block;
margin:0 5px;
border-radius:3px;
box-shadow:0 4px 0 transparent;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.social-links li a {
display:block;
color:#fff;
color:rgba(255,255,255,0.3);
font-size:18px;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background:rgba(0,0,0,0.2);
border-radius:50%;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.social-links li a:hover {
color:#fff;
background:#38A5DB;
}
p:hover {
padding-left: 20px;
transition: .5s;
}
p {
transition:.25s;
}
<div class="container">
<hr>
<h4>Tittle</h4>
<div class="row">
<div class="col-sm-4">
<a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname
</p>
<p class="address">address<br/>
CP City</p></a>
</div>
<div class="col-sm-4">
<a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname
</p>
<p class="address">address<br/>
CP City</p></a>
</div>
<div class="col-sm-4 text-right">
<ul class="social-links">
<li class="scrollimation fade-right d4"><i class="fa fa-instagram fa-fw"></i></li>
<li class="scrollimation fade-right d3"><i class="fa fa-facebook fa-fw"></i></li>
</ul>
<p>Footer copyright</p>
</div>
</div>
</div>
I've added this:
p:hover {
padding-left: 10px;
transition: 1s;
}
The 1 second transition is just for the example, and also you can come up with better css selector for those paragraphs.
#main-footer p{
font-size:16px;
}
#main-footer hr{
margin-top:0;
border-color:#19191d;
}
#main-footer .col-sm-4 p{
line-height: 30px;
margin: 0 !important;
}
#main-footer .col-sm-4 p.address{
padding-left: 28px;
}
#main-footer .container a{
color: #ffffff;
}
#main-footer .container a:hover{
color: #d6c087;
position: static;
}
#main-footer .container a:active, a:visited, a:focus{
text-decoration: none;
}
#main-footer img{
width: 24px !important;
height: 24px !important;
}
.social-links {
list-style:none;
margin:0;
padding:0;
margin-bottom:20px;
}
.social-links li{
display:inline-block;
margin:0 5px;
border-radius:3px;
box-shadow:0 4px 0 transparent;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.social-links li a {
display:block;
color:#fff;
color:rgba(255,255,255,0.3);
font-size:18px;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background:rgba(0,0,0,0.2);
border-radius:50%;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.social-links li a:hover {
color:#fff;
background:#38A5DB;
}
p:hover {
padding-left: 10px;
transition: 1s;
}
<div class="container">
<hr>
<h4>Tittle</h4>
<div class="row">
<div class="col-sm-4">
<a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname
</p>
<p class="address">address<br/>
CP City</p></a>
</div>
<div class="col-sm-4">
<a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname
</p>
<p class="address">address<br/>
CP City</p></a>
</div>
<div class="col-sm-4 text-right">
<ul class="social-links">
<li class="scrollimation fade-right d4"><i class="fa fa-instagram fa-fw"></i></li>
<li class="scrollimation fade-right d3"><i class="fa fa-facebook fa-fw"></i></li>
</ul>
<p>Footer copyright</p>
</div>
</div>
</div>
Tittle
<div class="row">
<div class="col-sm-4">
<a href="" target="_blank"><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname </img>
<p class="address">address
CP City</p></a>
</div>
<div class="col-sm-4">
<a href="" target="_blank"><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname </img>
<p class="address">address
CP City</p></a>
</div>
<div class="col-sm-4 text-right">
<ul class="social-links">
<li class="scrollimation fade-right d4"><i class="fa fa-instagram fa-fw"></i></li>
<li class="scrollimation fade-right d3"><i class="fa fa-facebook fa-fw"></i></li>
</ul>
<p>Footer copyright</p>
</div>
</div>
</div>
If this solves your problem, plz mark it as your answer.
i was wondering if any of you could help me out, i have started to create a drop down menu for my blog it was going well in my perspective until i realized that the dropdown menu would disapear once i hovered over it with my cursor, the link is fine, but when i hover my cursor over the dropdown menu it disappears.
Source Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Yeti™</title>
<link rel="stylesheet" href="main.css" />
<style type="text/css">
body
{
background-image:url(img.jpg);
background-repeat:no-repeat;
}
a:link{color:yellow;
text-decoration:none;}
a:visited{color:yellow;}
a:hover{background-color:none;
color:green;
text-decoration:bold;
text-decoration:underline;
font-weight:bold;}
#footer {position: absolute;
width: 1500px;
height: 80px;
bottom: 1px;
left: 0px;}
#main {position: absolute;
width: 600px;
height: 200px;
top: 160px;
left: 0px;}
</style>
</head>
<ul id="nav">
<div id="Title">
<p> Yeti Corporation™ </p>
--------------------------------------------------> ( This is the drop down menu )--------
<div id="wrapper">
<div id="navMenu">
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
--------------------------------------------------> ( This is the drop down menu )--------
</div>
<body>
<div id="video">
<video src="csgo.mp4" width="540" height="380" poster="csgo.jpg" controls></video>
</div>
<div id="main">
<div id="yeti">
<p> <div id="play">
</div></P>
</div>
<p>There is never enough to what you can do with programming</p>
<p> a Small Indie Development company Consisting of 4 people that works on Video games and Websites, as well as many other project we hope to get to in the future. Originally we where two separate companies, but when we realised the potential we had together we decided to merge to create Yeti Corp™.
If you are interested in Hiring a web developer go to the web development page. If you want to check up on the newest games and software updates, go to the game development page. a Small Indie Development company Consisting of 4 people that works on Video games and Websites, as well as many other project we hope to get to in the future. Originally we where two separate companies, but when we realised the potential we had together we decided to merge to create Yeti Corp™.
If you are interested in Hiring a web developer go to the web development page. If you want to check up on the newest games and software updates, go to the game development page. </p>
</div>
</div>
<div id="footer">
<a href="#" />Contact Us|</a>
<a href="#" />Web Dev|</a>
<a href="#" />Game Dev|</a>
<a href="#" />Graphic Designer|</a>
<a href="#" />Twitter Page|</a>
<a href="#" />FaceBook Page|</a>
<a href="#" />Gmail Page</a>
<p> All Rights Reserver Yeti LTD. 2014 Created by Head Web Developer, Hamza Issa</P>
</div>
</body>
</html>
CSS:
#body{
background: white;
}
#wrapper{
font:20px Tahoma;
}
--------------------------------------------------> ( This is the drop down menu )--------
#navMenu{
margin:0;
padding:30;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#999;
}
#navMenu li ul a {
text-align:center;
text-decoration:none;
font:20px Tahoma;
height:30px;
width:130px;
display:block;
color: blue;
border:1px solid black;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:30px;
}
#navMenu ul li:hover ul {
display: block;
visibility:visible;
display: block;
}
--------------------------------------------------> ( This is the drop down menu )--------
#Title{
font: 30px Candara;
-webkit-box-shadow:rgba(110,110,110,.4) 10px 10px 10px;
padding-top: 5px;
padding-left: 100px;
color: orange;
}
#Search{
margin-left: 200px;
padding-bottom: 10px;
}
#Links{
padding-left: 400px;
font: bold 20px Tahoma;
padding-bottom: 30px;
}
#Links a:hover{
color: green;
}
#sign{
color: white;
font:20px Tahoma ;
padding-right: 100px;
padding-top: px;
}
#Sign_up{
padding-left: 400px;
padding-bottom: 200px;
}
#main{
font: 14px Courier ;
color: white;
width: 650px;
padding-left: 100px;
}
#yeti{
font: 45px Candara ;
}
#footer{
background: #E6EAEE;
color: black;
font: 20px impact;
text-align: center;
padding-bottom: 20px;
padding-right: 60px;
width: 1300px;
}
#video{
padding-left: 850px;
padding-top: 50px;
}
So I made a simplified version of your code (In the future you should do this first) and was able to narrow down the problem. The positioning of your #main section is messing with the drop downs and it appears on top of them. So the simple thing I did was add z-index to the drop downs
#navMenu ul li ul {
position:absolute;
visibility:hidden;
top:30px;
z-index: 1;
}
#navMenu ul li:hover ul {
// display: block;
visibility:visible;
// display: block;
}
a:link {
color:yellow;
text-decoration:none;
padding: 10px;
}
a:visited {
color:yellow;
}
a:hover {
background-color:none;
color:green;
text-decoration:bold;
text-decoration:underline;
font-weight:bold;
}
#Title {
font: 30px Candara;
-webkit-box-shadow:rgba(110, 110, 110, .4) 10px 10px 10px;
padding-top: 5px;
padding-left: 100px;
color: orange;
}
#wrapper {
font:20px Tahoma;
}
#navMenu {
margin:0;
padding:30;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#999;
}
#navMenu li ul a {
text-align:center;
text-decoration:none;
font:20px Tahoma;
height:30px;
width:130px;
display:block;
color: blue;
border:1px solid black;
}
#navMenu ul li ul {
position:absolute;
visibility:hidden;
top:30px;
z-index: 1;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#main {
font: 14px Courier;
color: red;
padding-left: 100px;
position: absolute;
width: 600px;
height: 200px;
top: 160px;
left: 0px;
}
<div id="Title">
<p>Yeti Corporation™</p>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
</div>
<div id="main">
<p>There is never enough to what you can do with programming</p>
</div>
</div>
</div>
Hello I have three columns that need a right border with a fixed height, not depending on the number of items in the column.
My code
html
<div class="col-sm-2">
<div class="footer-col">
<ul>
<li class="footer-title hidden-xs">Customer Care</li>
<li>Contact us</li>
<li>Help</li>
<li>Shipping</li>
<li>Returns</li>
<li>Size Guide</li>
</ul>
</div>
</div>
<div class="col-sm-2 hidden-xs">
<div class="footer-col">
<ul>
<li class="footer-title">About Us</li>
<li>Our Story</li>
<li>Careers</li>
</ul>
</div>
</div>
<div class="col-sm-2 hidden-xs">
<div class="footer-col">
<ul>
<li class="footer-title">Shortcuts</li>
<li>My Account</li>
<li>Store Locator</li>
<li>Gift Cards</li>
<li>Payment</li>
</ul>
</div>
</div>
.wrapper {
display: inline-block;
background-color: #000000;
width: 100%;
height: 150px;
color: #999999;
}
.col-sm-2 {
float: right;
margin: 0;
width: 32%;
display: inline-block;
height: 90%;
}
.footer-col {
float: right;
margin: 0;
width: 90%;
padding-left: 10px;
display: inline-block;
height: 90%;
}
ul {
display: inline-block;
width: 90%;
height: 100%;
border-right: 1px solid #999999;
list-style: none;
}
li a {
color: #FFFFFF;
}
https://jsfiddle.net/michaelyuen/72dc7xrd/
There are two things:
1) Set ul height to 100%
2) Set height to parent or parent's parent. In this case, it's the wrapper.
OR use table, then you have to fix width instead of height.
https://jsfiddle.net/michaelyuen/72dc7xrd/1/
.wrapper {
display: table-row;
background-color: #000000;
color: #999999;
}
.col-sm-2 {
margin: 0;
padding-left: 10px;
width: 150px;
display: table-cell;
height: 90%;
border-right: 1px solid #999999;
vertical-align: top;
}
.footer-col {
margin: 0;
width: 90%;
display: inline-block;
height: 90%;
}
ul {
display: block;
margin: 0;
padding: 0;
width: 90%;
height: 100%;
list-style: none;
}
li a {
color: #FFFFFF;
}
Try this:
<style>
.verticalLine {
border-left: thick solid #E2C4C4;
margin-top:6px;
width:5px;
height:50px;
left: 408px;
position: absolute;
}
.pull_left {
float:left;
}
.clear {
clear: both;
}
</style>
<div class="col-sm-2">
<div class="footer-col pull_left">
<ul>
<li class="footer-title hidden-xs">Customer Care</li>
<li>Contact us</li>
<li>Help</li>
<li>Shipping</li>
<li>Returns</li>
<li>Size Guide</li>
</ul>
</div>
<div class="verticalLine pull_left"></div>
</div>
<div class="clear"></div>
<div class="col-sm-2 hidden-xs">
<div class="footer-col pull_left">
<ul>
<li class="footer-title">About Us</li>
<li>Our Story</li>
<li>Careers</li>
</ul>
</div>
<div class="verticalLine pull_left"></div>
</div>
<div class="clear"></div>
<div class="col-sm-2 hidden-xs">
<div class="footer-col pull_left">
<ul>
<li class="footer-title">Shortcuts</li>
<li>My Account</li>
<li>Store Locator</li>
<li>Gift Cards</li>
<li>Payment</li>
</ul>
</div>
<div class="verticalLine"></div>
</div>
Try like this: Demo
.col .well {
margin-bottom: -99999px;
padding-bottom: 99999px;
border-right:1px solid #ddd !important;
}
.col-wrap {
overflow: hidden;
}
.well {
min-height:20px;
padding:19px;
margin-bottom:20px;
background:transparent !important;
border-right:1px solid #e3e3e3 !important;
border:none !important;
box-shadow:none !important;
}
HTML:
<div class="container">
<div class="row col-wrap">
<div class="col-sm-2 col">
<div class="footer-col well">
....
</div>
</div>
<div class="col-sm-2 hidden-xs col">
<div class="footer-col well">
....
</div>
</div>
<div class="col-sm-2 hidden-xs col">
<div class="footer-col well">
....
</div>
</div>
</div>
</div>
Try this Create a outer container and apply overflow: hidden and apply margin and padding to the bottom
http://www.bootply.com/YNUeK8I29h
You can use after/before pseudo selectors.
http://jsfiddle.net/s7w4sqLd/
.footer-col ul:after {
position:absolute;
content:" ";
left:0;
top:0;
width:100%;
height:50px;
border-right: solid 1px #2a343f;
}
.footer-col ul{
position:relative;
float:left;
padding-right:10px;
}
.footer-col ul li {
list-style:none;
}
i created a navigation bar, and while hovering i made the font larger.
but when i hover the other menu items seem to move from its position , how do i lock them in their position. Also, just started html and css, if anyone would help me, thank you :)
html:
<div class="header">
<div class="container">
<div class="header-left">
<a href="index.php">
<img src="images/hawa.png" style="width:200px;height:60px;">
</a></div>
<div class="header-right">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact Us</li>
<li>Sign Up</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
CSS:
.header{
background-color: #003399;
width: 100%;
height: 83px;
position: fixed;
}
.container{
width:1200px;
background-color:#003399;
margin:auto;
height:83px;
}
.header-left{
float:left;
padding: 10px;
}
.header-right{
float:right;
width:900px;
height:83px;
}
.header-right ul{
margin: 0;
padding: 0;
}
.header-right li{
list-style: none;
}
.header-right li a{
text-decoration: none;
float:left;
display: block;
padding: 35px;
color:#FFFFFF;
text-transform: uppercase;
font-size: 18px;
font-family: sans-serif;
}
.header-right li a:hover{
font-size: 20px;
display: block;
}
You can add a class on your list items and set the width for these items. For example:
html:
<ul>
<li class="nav-cells">Home</li>
<li class="nav-cells">About</li>
<li class="nav-cells">Services</li>
<li class="nav-cells">Contact Us</li>
<li class="nav-cells">Sign Up</li>
</ul>
css:
.nav-cells {
width: 100px;
display: inline;
}
Screenshot of the header that's needing this work:
As you can see, the menu is below the logo. I was wanting the menu beside it, to the right of the logo. I don't know if it's possible, but if it is, I could use some help, please.
Here's the code for everything, separated for your convenience.
The menu and logo in their divs:
<div id="wrapper">
<div id="body-wrapper">
<div class="head">
<div class="head-wrapper">
<div class="logo">
<img src="http://i.imgur.com/sDnntOE.png">
<ul>
<li>Home</li>
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
</ul>
</li>
<li>Products
<ul>
<li>Chaotix Browser</li>
<li>Useful Beta 1.7.5</li>
<li>Chaotix Cleaner 1.4</li>
<li>Forum</li>
<li>CDev</li>
<li>Infinite-PVP</li>
<li>Ulta-Craft</li>
</ul>
</li>
<li>Contact Us
<ul>
<li>E-Mail</li>
<li>News Letter</li>
<li>Social Mediar</li>
</ul>
</li>
<li>Divisions
<ul>
<li>Gaming</li>
<li>Films</li>
</ul>
</li>
<li>Chaotix! Forum</li>
<li>Partnerships
<ul>
<li>GameFanShop</li>
<li>Forumotion</li>
</ul>
</li>
</ul>
The CSS:
<style>
*{
background-image:url('http://i.imgur.com/0u7sBsT.png');
background-color:#999999;
font-family:Tahoma;color:white;
}
div.head{
text-align:Center;
padding-top:10px;
}
div.body{
padding-top:100px;
padding-left:300px;
padding-right:300px;
text-align:center;
}
div.logo{
float:left;
}
a{
color:white;
}
a:hover{
color:gray;
}
/* Main menu
------------------------------------------*/
ul{
font-family: Lato,Tahoma,Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
padding-left:25px;
}
ul li{
display: block;
position: relative;
float: left;
}
li ul{
display: none;
}
ul li a{
display: block;
text-decoration: none;
color: #FFFFFF;
border-top: 1px solid #000000;
padding: 5px 15px 5px 15px;
background: #000000;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover{
background: #999999;
}
li:hover ul{
display: block;
position: absolute;
}
li:hover li{
float: none;
font-size: 11px;
}
li:hover a{
background: #000000;
}
li:hover li a:hover{
background: #999999;
}
</style>
Add your css
.logo img
{
float:left;
}
.logo ul
{
float:left;
}
It working ok. Hope this help!