The left sidebar won't position itself on the left side of the main area. It seems to get stuck on the navigation link. It should be placed "below" the navigation links and the "buttons" should overlap the sidebar just as they overlap the header. Then I want the text to wrap around the sidebar (works in the code I posted here).
I have tried using z-index on the navigation and sidebar. I have also tried using position:relative; and float:left; on the sidebar without result. The text should also wrap around the sidebar as it is in the example below. I managed to move the sidebar to the left using position:relative; but then the text won't wrap it.
HTML:
<html lang="sv">
<head>
<link href="layout1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="topbanner">
<h1>TopBanner</h1>
</div>
<div class="header">
<h1>Header</h1>
<h2>underrubrik</h2>
</div>
<div class="navigation">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</div>
<div id="main">
<div class="leftsidebar">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</div>
<div class="content">
<p>Content text here</p>
</div>
</body>
</html>
CSS
body {
margin: 0;
background: #fff;
}
/* BANNER */
.topbanner {
width: 980px;
height: 80px;
margin: auto;
border: 1px solid;
text-align: center;
font-family: sans-serif;
}
/* HEADER */
.header {
width: 980px;
height: 100px;
margin: auto;
border: 1px solid;
text-align: center;
font-family: sans-serif;
}
.header h1 {
margin: 0;
}
.header h2 {
margin: 0;
}
/* NAVIGATION LINKS */
.navigation {
width: 980px;
margin: auto;
}
.navigation a {
text-decoration: none;
color: #000;
}
.navigation ul {
float: left;
margin: -10px 0 0 0;
list-style: none;
}
.navigation ul li {
display: inline;
padding: 0 10px 0 10px;
border: 1px solid;
background: #fff;
}
.navigation ul li:first-child {
border-radius: 10px 0 0 10px;
}
.navigation ul li:last-child {
border-radius: 0 10px 10px 0;
}
/* CONTENT */
#main {
width: 980px;
margin: 0 auto;
border: 1px solid;
}
.leftsidebar {
width: 20%;
position: relative;
}
.leftsidebar ul {
margin: 0;
border: 1px solid;
list-style: none;
}
.leftsidebar ul li {
}
.content {
}
.content p {
font-family: sans-serif;
}
Set the following for .navigation ul styles
margin: -10px 0 -10px 0;
position: relative;
z-index: 2;
list-style: none;
Add float: left; to .leftsidebar to allow text to wrap around that, and add padding-top: 20px 30px; (adjust to your liking) to .leftsidebar ul to compensate for the overlap.
http://jsfiddle.net/ocfjsqpp/3/
Try putting padding-left:0 in your ul container.
Here have a look at what I did here with you code, also you haven't ended one of you h2 tags at the start.
Visit http://jsfiddle.net/4p6gdka9/ enter code here
Related
See https://jsfiddle.net/scott8035/gqn0t9a7/3/.
In this example, I have a section of a page content box displayed with a box shadow only on left & right sides. I achieve that effect by adding clip-path: inset(0 -10px); to the content box's CSS. So far, everything is good.
There is an element inside the content box. When you hover over it, a drop-down menu appears. However, the menu is also clipped by the clip-path from the parent content box instead of being displayed in its entirety.
How can I display the menu child element over the top of the clipped area so you can see the entire thing?
Note: I am somewhat hampered in how I can structure the HTML because I'm using a page builder, notably, the menu has to be a child element of the content box.
Here is the code in case the jsfiddle doesn't work:
<body>
<div id="content-box">
<div class="hoverable">
<p>
Element 1
</p>
<p>
Element 2
</p>
<p>
Element 3
</p>
<div class="menu">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
</ul>
</div>
</div>
</div>
</body>
body {
background-color: green;
}
#content-box {
width: 50%;
margin: 40px auto;
padding: 40px;
background-color: white;
box-shadow: 0 0 10px #000000;
clip-path: inset(0 -10px);
}
.hoverable {
border: 1px solid #bbb;
padding: 10px;
position: relative;
}
p {
background-color: #eee;
padding: 5px;
}
.hoverable:hover .menu {
display: block;
}
.menu {
display: none;
width: 35%;
background-color: black;
padding: 0;
margin: 0;
position: absolute;
top: 172px;
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.menu ul li {
border-bottom: 1px solid #555;
}
.menu ul li a {
display: block;
padding: 5px 10px;
color: white;
text-decoration: none;
}
.menu ul li:hover a {
background-color: #333;
color: red;
}
Apply the trick to a pseudo element instead:
body {
background-color: green;
}
#content-box {
width: 50%;
margin: 40px auto;
padding: 40px;
background-color: white;
position:relative;
}
#content-box::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
box-shadow: 0 0 10px #000000;
clip-path: inset(0 -10px);
pointer-events:none;
}
.hoverable {
border: 1px solid #bbb;
padding: 10px;
position: relative;
}
p {
background-color: #eee;
padding: 5px;
}
.hoverable:hover .menu {
display: block;
}
.menu {
display: none;
width: 35%;
background-color: black;
padding: 0;
margin: 0;
position: absolute;
top: 172px;
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.menu ul li {
border-bottom: 1px solid #555;
}
.menu ul li a {
display: block;
padding: 5px 10px;
color: white;
text-decoration: none;
}
.menu ul li:hover a {
background-color: #333;
color: red;
}
<body>
<div id="content-box">
<div class="hoverable">
<p>
Element 1
</p>
<p>
Element 2
</p>
<p>
Element 3
</p>
<div class="menu">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
</ul>
</div>
</div>
</div>
</body>
Im trying to make the navigation bar highlight fully when we hover over a link but it's currently only working horizontally. I think its something really small I'm doing wrong and have been trying four hours. Heres the code I have:
html, body {
/*require html and body 100% height and width to allow other child elements to use percentages*/
height: 100%;
width: 100%;
margin: 0;
}
a {
text-decoration: none;
display: block;
color: black;
}
li {
list-style: none;
}
div{
margin-left: 2.5%;
margin-right: 2.5%;
margin-top: 1%;
border: 1px solid black;
}
.content_section{
height: 150%;
margin-bottom: 1%;
}
#footer{
height: 25%;
margin-bottom: 1%;
}
#banner{
margin-top: 2.5%;
height: 15%;
position: relative;
}
#banner img{
width: 100%;
height: 100%;
}
#navbar{
padding: 0;
height: 5%;
text-align: center;
position: relative;
background-color: #FFCB3D;
}
#navbar li a {
display: block;
text-align: center;
text-decoration: none;
width: 20%;
height: 100%;
float: left;
}
#navbar ul a:hover{
height: 100%;
background-color: #FFF17C;
}
<!DOCTYPE html>
<html>
<head>
<title>Sample Site</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="banner">
<img src="resources/images/banner-image.png">
</div>
<div id="navbar">
<ul id="navbar">
<li>Page A</li>
<li>Page B</li>
<li>Page C</li>
<li>Page D</li>
<li>Page E</li>
</ul>
</div>
<div class="content_section">
</div>
<div id="footer">
</div>
</body>
</html>
I would make the ul a display: flex parent to create a row out of the li's, remove the height on #navbar so it's fluid based on the content, remove the ul's default margin, then set flex-grow: 1 on the li's (or flex: 1 0 0 for short) so they'll stretch to fill the parent evenly, then apply vertical padding to the li > a's and remove the height and floats.
html, body {
/*require html and body 100% height and width to allow other child elements to use percentages*/
height: 100%;
width: 100%;
margin: 0;
}
a {
text-decoration: none;
display: block;
color: black;
}
li {
list-style: none;
}
div{
margin-left: 2.5%;
margin-right: 2.5%;
margin-top: 1%;
border: 1px solid black;
}
.content_section{
height: 150%;
margin-bottom: 1%;
}
#footer{
height: 25%;
margin-bottom: 1%;
}
#banner{
margin-top: 2.5%;
height: 15%;
position: relative;
}
#banner img{
width: 100%;
height: 100%;
}
#navbar{
padding: 0;
position: relative;
background-color: #FFCB3D;
text-align: center;
}
ul#navbar {
display: flex;
margin: 0;
}
#navbar li {
flex: 1 0 0;
}
#navbar li a {
display: block;
text-decoration: none;
padding: 1em 0;
}
#navbar ul a:hover{
background-color: #FFF17C;
}
<!DOCTYPE html>
<html>
<head>
<title>Sample Site</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="banner">
<img src="resources/images/banner-image.png">
</div>
<div id="navbar">
<ul id="navbar">
<li>Page A</li>
<li>Page B</li>
<li>Page C</li>
<li>Page D</li>
<li>Page E</li>
</ul>
</div>
<div class="content_section">
</div>
<div id="footer">
</div>
</body>
</html>
I am trying to get the horizontal menu bar above the pdf which is in tag object I have tried multiple options( for IE Only), which i found over internet but none helped me.
Below is the code I have tried(which is also copied from one the websites example).
<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml" lang="en-us"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IE Dropdown Bug Fix | jonathanstegall.com</title>
<style type="text/css">
body {
text-align: center;
font: normal 76% Verdana, Arial, Helvetica, sans-serif;
padding: 1em;
line-height: 1.8em;
}
#wrapper {
width: 770px;
margin: 0 auto;
text-align: left;
border: 1px solid #ddd;
padding: 20px 10px;
}
#wrapper #header {
position: relative;
z-index: 2;
}
#wrapper #nav {
clear: both;
margin: 0 5px;
padding: 0 5px;
width: 750px;
height: 30px;
list-style: none;
border-top: 1px solid #335a86;
border-bottom: 1px solid #335a86;
text-align: center;
position: relative;
z-index: 2;
}
#wrapper #nav li {
float: left;
margin: 0;
padding: 0 0 5px 0;
border: 0;
position: relative;
}
#wrapper #nav li a {
margin: 0;
padding: 7px 15px;
display: block;
text-decoration: none;
font-size: 1.2em;
}
#wrapper #nav a:link, #wrapper #nav a:visited {
color: #888;
}
#wrapper #nav a:hover, #wrapper #nav a:focus {
color: #335a86;
}
#wrapper #nav li ul {
background-color: #ccc;
border: 0;
width: 150px;
height: auto;
list-style: none;
margin: 0;
padding: 5px 0 10px 0;
border: 0;
text-align: left;
position: absolute;
display: none;
}
#wrapper #nav li ul li {
float: none;
margin: 0;
line-height: 30px;
height: 30px;
}
#wrapper #nav li ul a {
padding: 7px 10px;
white-space: nowrap;
display: block;
}
#wrapper #nav li:hover ul {
display: block;
}
#wrapper #container {
padding: 10px;
position: relative;
}
#wrapper h1 {
position: absolute;
left: 10px;
top: 10px;
height: 60px;
line-height: 60px;
vertical-align: middle;
font-size: 2em;
background: #335a86;
color: #fff;
}
#wrapper #container p.intro {
margin-top: 60px;
}
#wrapper #container p {
margin: 1em 0;
}
#wrapper #container form {
padding: 1em 0;
}
#wrapper #container label, #wrapper #container select {
float: left;
display: block;
margin: 0 1em 0 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="nav">
<li>home</li>
<li>item one
<ul>
<li>sub item one</li>
<li>sub item two</li>
<li>sub item three</li>
<li>sub item four</li>
<li>sub item five</li>
<li>sub item six</li>
</ul>
</li>
<li>item two
<ul>
<li>sub item one</li>
<li>sub item two</li>
</ul>
</li>
</ul>
</div>
<div id="container">
<h1>Hi. This is a positioned H1</h1>
<p class="intro">This page is just some friendly content to show you just how bad IE really is. You could replace the absolutely positioned H1 above with a <code><select> </select></code> as I do below, a Flash movie, or whatever you like.</p>
<form name="form" id="form">
<label>To indicate this:</label>
<select name="foo" id="foo">
<option value="IE is mean">IE is mean</option>
<option value="IE sucks">IE sucks</option>
<option value="Maybe IE8 will be okay">Maybe IE8 will be okay</option>
</select>
</form>
<object id="pdfshow" style="background-color:#FFFFFF;" data="1.pdf??wmode=transparent" type="application/pdf" width="99.5%" height="550">
</object>
</div>
</div>
</body>
</html>
Please let me know, where I am doing wrong, as I have used position:relative , z-index:999too.
Here is the fiddle link. http://jsfiddle.net/h2knhyb4/
Thanks In Advance.
This is a hack , as I am using extra iframes next to <ul>, but it works the way we need in all browsers(i.e FF, chrome, IE11).
I found this answer somewhere over net and dont have the link at present, so updated the code for future reference.
<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml" lang="en-us"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IE Dropdown Bug Fix | jonathanstegall.com</title>
<style type="text/css">
body {
text-align: center;
font: normal 76% Verdana, Arial, Helvetica, sans-serif;
padding: 1em;
line-height: 1.8em;
}
#wrapper {
width: 770px;
margin: 0 auto;
text-align: left;
border: 1px solid #ddd;
padding: 20px 10px;
}
#wrapper #header {
position: relative;
z-index: 2;
}
#wrapper #nav {
clear: both;
margin: 0 5px;
padding: 0 5px;
width: 750px;
height: 30px;
list-style: none;
border-top: 1px solid #335a86;
border-bottom: 1px solid #335a86;
text-align: center;
position: relative;
z-index: 2;
}
#wrapper #nav li {
float: left;
margin: 0;
padding: 0 0 5px 0;
border: 0;
position: relative;
}
#wrapper #nav li a {
margin: 0;
padding: 7px 15px;
display: block;
text-decoration: none;
font-size: 1.2em;
}
#wrapper #nav a:link, #wrapper #nav a:visited {
color: #888;
}
#wrapper #nav a:hover, #wrapper #nav a:focus {
color: #335a86;
}
#wrapper #nav li ul {
background-color: #ccc;
border: 0;
width: 150px;
height: auto;
list-style: none;
margin: 0;
padding: 5px 0 10px 0;
border: 0;
text-align: left;
position: absolute;
display: none;
}
#wrapper #nav li ul li {
float: none;
margin: 0;
line-height: 30px;
height: 30px;
}
#wrapper #nav li ul a {
padding: 7px 10px;
white-space: nowrap;
display: block;
}
#wrapper #nav li:hover ul {
display: block;
}
#wrapper #container {
padding: 10px;
position: relative;
}
#wrapper h1 {
position: absolute;
left: 10px;
top: 10px;
height: 60px;
line-height: 60px;
vertical-align: middle;
font-size: 2em;
background: #335a86;
color: #fff;
}
#wrapper #container p.intro {
margin-top: 60px;
}
#wrapper #container p {
margin: 1em 0;
}
#wrapper #container form {
padding: 1em 0;
}
#wrapper #container label, #wrapper #container select {
float: left;
display: block;
margin: 0 1em 0 0;
}
.cover
{
position:absolute;
z-index:-2;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="nav">
<li>home</li>
<li>item one
<ul>
<iframe src="about:blank" class="cover" />
<li>sub item one</li>
<li>sub item two</li>
<li>sub item three</li>
<li>sub item four</li>
<li>sub item five</li>
<li>sub item six</li>
</ul>
</li>
<li>item two
<ul>
<iframe src="about:blank" class="cover" />
<li>sub item one</li>
<li>sub item two</li>
</ul>
</li>
</ul>
</div>
<div id="container">
<h1>Hi. This is a positioned H1</h1>
<p class="intro">This page is just some friendly content to show you just how bad IE really is. You could replace the absolutely positioned H1 above with a <code><select> </select></code> as I do below, a Flash movie, or whatever you like.</p>
<form name="form" id="form">
<label>To indicate this:</label>
<select name="foo" id="foo">
<option value="IE is mean">IE is mean</option>
<option value="IE sucks">IE sucks</option>
<option value="Maybe IE8 will be okay">Maybe IE8 will be okay</option>
</select>
</form>
<object id="pdfshow" style="background-color:#FFFFFF;" data="1.pdf" type="application/pdf" width="99.5%" height="550">
</object>
</div>
</div>
</body>
</html>
The above hack does not appear to work - adding the .cover section to the style sheet and the iframe lines to the html code in the JSFiddle do not fix the problem - the drop down menus appear as blank boxes with no content in IE11?
I have a webpage I have been working on and I want to have a static background. The idea is to have the page initially only show a title and the background and have you scroll down for content (a div that fills up the entire width of the browser and has a filled background). The page has a navbar at the top that already spans the entire width of the screen. My question is, how to you make this possible? Here is the code I tried, which didn't quite do the trick. I have nothing for the CSS in main.
HTML:
<body>
<div class="wrapper">
<div class="navbar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="topspace">
<h1 class="mainTitle">Title</h1>
</div>
<div class="main">
Bottom content<br /><br /><br /><br /><br /><br />
</div>
</div>
</body>
CSS:
body {
font-family: sans-serif;
margin: 0;
border: 0;
padding: 0;
}
.navbar {
background-color: #708090;
margin: 0 0 auto;
border: 0;
padding: 0;
}
.navbar ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
.navbar ul li {
display: inline-block;
margin: 0;
padding: 0;
}
.navbar ul li a {
text-decoration: none;
color: #DDD;
display: block;
padding: 5px 10px;
border: 0;
}
.navbar ul li a:hover {
color: #FFF;
background-color: #222;
}
.topspace {
position: absolute;
top: 40px;
bottom: 0px;
right: 0px;
left: 0px;
}
.mainTitle {
margin-left: auto;
margin-right: auto;
padding-top: 40%;
color: #B22222;
}
.wrapper {
border:0;
margin: 0;
padding:0;
background: rgba(0, 100, 100, 0.6);
}
Here is a JSFiddle for this code, though it is not displayed quite as it looks on my browser http://jsfiddle.net/xpkayL9t/
use the background cover
just look at this
http://css-tricks.com/perfect-full-page-background-image/
Here is my CSS:
<style>
ul, ol, dl { padding: 0;
margin: 0;
}
#navWrapper {
background:#3C6;
height: 90px;
float: left;
position: relative;
width: 600px;
}
#nav {
margin: 0 0 0 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
position: absolute;
bottom: 0;
}
#nav li {
float: left;
list-style-type: none;
}
#nav li a, #nav a:visited {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover, #nav a:active, #nav a:focus {
color: #c00;
background-color: #fff; }
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#wrapper {
width: 965px;
background: #FFFFFF;
margin: 0 auto;
}
a img {
border: none;
float: left;
}
</style>
Here is my HTML:
<div id="wrapper">
<div class="header"><img src="" alt="Insert Logo Here" name="Insert_logo" width="300px" height="90px" id="Insert_logo"/>
<div id="navWrapper">
<div id="nav">
<ul class="nav">
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
<li>Link four</li>
</ul>
<!-- end #nav --></div>
<!-- end #navWrapper --></div>
<!-- end .header --></div>
<div class="clearfloat"></div>
</div>
I am trying to create a navigation bar that sits on the bottom of its wrapper. The only way I can think to do this is using absolute positioning and setting the bottom to 0. But the problem is I have to set a width the div inside of the wrapper, which is what my code reflects now. I want the width to be dynamic and change with the width of the navigation bar while it still sits on the bottom of the wrapper, aligned to the bottom of the header image. How can I do this?
You can set #nav to 100% width, and the four items to 25% width each.
fiddle
If you mean something else, leave a comment.
Here are the exact changes I made.
#nav {
width: 100%; /* Add: */
}
#nav li {
width: 25%; /* Add: */
}
Based on the fiddle you provided, the left float on the navWrapper is causing problems. Removing it hides the logo, which is floated left. To fix this, put a clearfix before the navWrapper, and after the logo image.
updated fiddle