- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I’m currently styling a website using responsive web design technique so that it could also look decent when accessed from handheld devices. I have used Bootstrap for positioning the elements and some custom css for styling the nav-bar, footer, etc. Most of the elements include the nav-bar work fine except the fact that my footer keeps overlapping the other elements when shrink the web-page vertically. Have a look at the code below. Any help would be greatly appreciated. thanks.
html
{
margin: 1%;
padding: 0;
}
html, body
{
height: 95%;
}
#body
{
height: 82%;
}
header, footer, nav, section
{
display: block;
}
footer
{
width: 100%;
list-style: inline-block;
position: static;
white-space: nowrap;
border-radius: 4px;
padding-top: 2px;
padding-left: 5px;
vertical-align: baseline;
}
footer p
{
padding: 0.2em;
color: White;
}
#image
{
padding: 0.2em;
}
.nav
{
position: relative;
margin: 20px 0;
width: 100%;
border-radius: 4px;
}
.nav ul
{
margin: 0;
padding: 0;
}
.nav li
{
margin: 10px 5px 10px 0;
padding: 0;
display: inline-block;
list-style: none;
}
.nav a
{
padding: 3px 12px;
text-decoration: none;
color: white;
line-height: 100%;
}
.nav a:hover
{
border: 1px solid #acdd4a;
font-weight: normal;
color: #ffffff;
text-decoration: none;
}
.nav a:active
{
border: 1px solid #acdd4a;
font-weight: normal;
color: #ffffff;
}
.nav .current a
{
border: 1px solid #acdd4a;
color: #fff;
border-radius: 5px;
}
Below is my Markup
Title of webpage
Please paste your code into http://codepen.io and give us the link.