Using CSS to hide a class without cascading - css
Please note that I have no access to the HTML itself so I can't make any changes that way.
What I'm trying to do is hide only .openBullet leaving .lowerAlpha, .numeral, and .bullet black.
The issue I'm running into is that the transparent coloration of the marker for .openBullet is cascading down if it has children that are another marker type.
<body>
<p style="font-size: 9px; text-align: right;"><span style="color: #10265f;">Submit manual improvement suggestions here.</span></p>
<div style="text-align: right;">
<table cellspacing="0" cellpadding="6" style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 100%; border-top: hidden; border-left: hidden; border-right:hidden; border-bottom: 6px solid #007db6;">
<p style="text-align: right;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMsAAAArCAYAAADWv3yxAAAACXBIWXMAAC4jAAAuIwF4pT92AAAFJWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgMTE2LjE2NDc2NiwgMjAyMS8wMi8xOS0yMzoxMDowNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMC0wOS0wOVQxNDoxNDo0MS0wNDowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjEtMDQtMTNUMTY6MTE6MjUtMDQ6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMDQtMTNUMTY6MTE6MjUtMDQ6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjViOGNlMDQtMDA4Zi00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"
alt=""></p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="topic" data-documentRefId="Introduction" data-type="chapter" data-noNamespaceSchemaLocation="urn:fontoxml:cpa.xsd:1.0">
<h2 data-id="id-f5cc2363-db3b-43a6-b9f9-4ff438e7faa2">1 Introduction</h2>
<ol class="decimal" data-type="decimal" data-id="id-16c75eaf-f903-4ce9-d4ef-f6e2c8213c53">
<li data-id="id-9dcba4f8-dae3-4751-ef37-deb3b1287c11">
<p data-id="id-7baae131-d2fe-4e32-b3ed-824e7ee355e6">Step one goes here</p>
<ul class="openBullet" data-type="openBullet" data-id="id-f5a5de88-dada-4089-d60e-1953caf701a4">
<li data-id="id-d5e2366c-da46-4ee3-b044-7f2121d8e1fe">
<p data-id="id-59bc91da-bc49-4fbc-ba22-bdb631d369fc">Open bullet</p>
<ol class="lowerAlpha" data-type="lowerAlpha" data-id="id-b422622b-65a4-4fda-892c-ce370d851d0e">
<li data-id="id-b609503f-a39e-4674-9ca3-15bf05ec392d">
<p data-id="id-f051002a-9332-4254-8c0a-5be3614e8bc5">loweralpha</p>
</li>
<li data-id="id-1f0824e6-110b-4e7b-9979-35b3118d6b1b">
<p data-id="id-e95c7baa-4507-43be-bfa5-acd541419bbc">loweralpha</p>
</li>
</ol>
</li>
</ul>
</li>
</ol>
</div>
<p><br></p>
<table cellspacing="0" cellpadding="6" style="border-collapse: collapse; width: 100%; font-size: 12px;">
<tbody>
<tr>
<td style="width: 33.3333%;border-top: 3px solid #007db6; border-left: hidden; border-right:hidden; border-bottom: hidden;"><span style="color: #55555c;"><b>Test Manual</b></span></td>
<td style="width: 33.3333%; text-align: center; border-top: 3px solid #007db6; border-left: hidden; border-right:hidden; border-bottom: hidden;"><strong><strong><strong><span style="color: #55555c;"> Internal Use Only</span></strong></strong>
</strong>
</td>
<td style="width: 33.3333%; text-align: right; border-top: 3px solid #007db6; border-left: hidden; border-right:hidden; border-bottom: hidden;"><span style="color: #55555c;"><b>11/12/2021</b></span></td>
</tr>
</tbody>
</table>
</body>
I have tried targeting .openBullet more specifically with :nth-child() but this also cascades.
You can remove just the circular marker without affecting subsequent numbering by setting list-style-type: none on the open bullet class.
.openBullet {
list-style-type: none;
}
<body>
<p style="font-size: 9px; text-align: right;"><span style="color: #10265f;">Submit manual improvement suggestions here.</span></p>
<div style="text-align: right;">
<table cellspacing="0" cellpadding="6" style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 100%; border-top: hidden; border-left: hidden; border-right:hidden; border-bottom: 6px solid #007db6;">
<p style="text-align: right;"><img src="" alt=""></p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="topic" data-documentRefId="Introduction" data-type="chapter" data-noNamespaceSchemaLocation="urn:fontoxml:cpa.xsd:1.0">
<h2 data-id="id-f5cc2363-db3b-43a6-b9f9-4ff438e7faa2">1 Introduction</h2>
<ol class="decimal" data-type="decimal" data-id="id-16c75eaf-f903-4ce9-d4ef-f6e2c8213c53">
<li data-id="id-9dcba4f8-dae3-4751-ef37-deb3b1287c11">
<p data-id="id-7baae131-d2fe-4e32-b3ed-824e7ee355e6">Step one goes here</p>
<ul class="openBullet" data-type="openBullet" data-id="id-f5a5de88-dada-4089-d60e-1953caf701a4">
<li data-id="id-d5e2366c-da46-4ee3-b044-7f2121d8e1fe">
<p data-id="id-59bc91da-bc49-4fbc-ba22-bdb631d369fc">Open bullet</p>
<ol class="lowerAlpha" data-type="lowerAlpha" data-id="id-b422622b-65a4-4fda-892c-ce370d851d0e">
<li data-id="id-b609503f-a39e-4674-9ca3-15bf05ec392d">
<p data-id="id-f051002a-9332-4254-8c0a-5be3614e8bc5">loweralpha</p>
</li>
<li data-id="id-1f0824e6-110b-4e7b-9979-35b3118d6b1b">
<p data-id="id-e95c7baa-4507-43be-bfa5-acd541419bbc">loweralpha</p>
</li>
</ol>
</li>
</ul>
</li>
</ol>
</div>
<p><br></p>
<table cellspacing="0" cellpadding="6" style="border-collapse: collapse; width: 100%; font-size: 12px;">
<tbody>
<tr>
<td style="width: 33.3333%;border-top: 3px solid #007db6; border-left: hidden; border-right:hidden; border-bottom: hidden;"><span style="color: #55555c;"><b>Test Manual</b></span></td>
<td style="width: 33.3333%; text-align: center; border-top: 3px solid #007db6; border-left: hidden; border-right:hidden; border-bottom: hidden;"><strong><strong><strong><span style="color: #55555c;"> Internal Use Only</span></strong></strong>
</strong>
</td>
<td style="width: 33.3333%; text-align: right; border-top: 3px solid #007db6; border-left: hidden; border-right:hidden; border-bottom: hidden;"><span style="color: #55555c;"><b>11/12/2021</b></span></td>
</tr>
</tbody>
</table>
</body>
Note the SO snippet system did allow the copy of the complete snippet from the question as there were too many characters. I removed the contents of the img just for this demo,
Related
Placement of a popup over table that has overflow with CSS
I've been trying to figure out for awhile but I've not come to a solution. My issue is how to properly display a popup over a table which has a fixed height that has vertical overflow. I have a button that when hovered over displays a div that contains action links. Before the table scrolls (so at the top of the table) the div appears right below the button, where I want it to. But when you start scrolling the div starts to wander down the page.
This is a sample of the code that I am using
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Verdana;
background-color: #f6f6f6;
display: flex;
flex-direction: column;
min-height: 100vh;
}
table {
border-collapse: collapse;
width: 100%;
}
table tr:nth-of-type(even) {
background-color: #d4d4d4;
}
table tr:nth-of-type(odd) {
background-color: #E8E6E6;
}
table tr:hover {
background-color: #D0D9DD;
}
th,
td {
padding: 8px 16px;
border: 1px solid #ccc;
}
th {
color: rgb(255, 255, 255);
background: #65A0E5;
position: sticky;
top: 0;
z-index: 2;
padding: 15px;
}
.TableContainer {
display: flex;
justify-content: center;
}
.Table_Center {
width: 500px;
height: 300px;
overflow-y: auto;
}
.ActionDropdown {
display: inline-block;
}
.ActionButton {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.ActionButton-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.ActionButton-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.ActionButton-content a:hover {
background-color: #f1f1f1
}
.ActionDropdown:hover .ActionButton-content {
display: block;
}
.ActionDropdown:hover .ActionButton {
background-color: #3e8e41;
}
<div class="TableContainer">
<div class="Table_Center">
<table>
<thead>
<tr>
<th>
File Name
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>
<div class="ActionDropdown">
<button class="ActionButton">Action</button>
<div class="ActionButton-content">
<a>Test 1</a>
<a>Test 2</a>
<a>Test 3</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="ActionDropdown">
<button class="ActionButton">Action</button>
<div class="ActionButton-content">
<a>Test 1</a>
<a>Test 2</a>
<a>Test 3</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="ActionDropdown">
<button class="ActionButton">Action</button>
<div class="ActionButton-content">
<a>Test 1</a>
<a>Test 2</a>
<a>Test 3</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="ActionDropdown">
<button class="ActionButton">Action</button>
<div class="ActionButton-content">
<a>Test 1</a>
<a>Test 2</a>
<a>Test 3</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="ActionDropdown">
<button class="ActionButton">Action</button>
<div class="ActionButton-content">
<a>Test 1</a>
<a>Test 2</a>
<a>Test 3</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="ActionDropdown">
<button class="ActionButton">Action</button>
<div class="ActionButton-content">
<a>Test 1</a>
<a>Test 2</a>
<a>Test 3</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I'd like to understand what exactly dictates the placements of these divs and how the overflow of the table factors into that. When I remove the overflow the popups appear right below the buttons as I want them to. If I set the position of the ActionDropdown class to relative then the divs appear below the buttons as I want, but now it messes up the overflow. The popups don't appear above the scroll in the sense that if you hover over the button at the bottom of the table it will expand the area at the bottom of the Table_Center container so that now you have to scroll down to see the popup.
What I'm aiming for is for the popups to be displayed below the buttons but independent of the scrolling. I'm new to front-end development so my explanations may be poor and I apologize in advance.
CSS Line Dividor
I'm trying to organize two sets of information in a particular way. I have a very crude mock-up here: https://imgur.com/a/LrSCg I have everything working except for the diving line between the two sets of info. I've tried setting up the entire thing as a table and then setting the appropriate border styles, but that didn't work out so well. Here's what I currently have that gets me everything except the middle dividing line: <table style="margin: 0 auto; border: 1px solid black; table-layout: fixed"> <tr> <td> <img id="left_image" class="images" alt="left_image" height="auto" width="300" style="border: 2px solid #5b5b5b"> </td> <td style="display:block;"> <div style="float: left; margin: 20px 0 0 20px;"> <table> <tr> <td style="width: 75px;">Name:</td><td><span id="left_name" style="font-weight: bold"></span></td> </tr> <tr> <td style="width: 75px;">Category:</td> <td><span id="left_category" style="font-weight: bold"></span></td> </tr> <tr> <td style="width: 75px;">ID:</td> <td><span id="left_id" style="font-weight: bold;"></span></td> </tr> </table> </div> <hr> <div style="float: right; margin: 100px 20px 0 0;"> <table> <tr> <td style="width: 75px;">Name:</td> <td><span id="right_name" style="font-weight: bold"></span></td> </tr> <tr> <td style="width: 75px;">Category:</td> <td><span id="right_category" style="font-weight: bold"></span></td> </tr> <tr> <td style="width: 75px;">ID:</td> <td><span id="right_id" style="font-weight: bold"></span></td> </tr> </table> </div> </td> <td> <img id="right_image" class="images" alt="right_image" height="auto" width="300" style="border: 2px solid #5b5b5b"> </td> </tr> <tr> <td style="text-align: center;"> <button class="btn4 btn4-confirm" onclick="selectLeftID()">Select Left</button> </td> <td></td> <td style="text-align: center;"> <button class="btn4 btn4-confirm" onclick="electRightID()">Select Right</button> </td> </tr> </table> This is just experimental code, it hasn't been cleaned up yet, so please ignore all the in-line styling. Here's a sloppy example I threw together: https://jsfiddle.net/33pc23w0/2/ I would like to make the line in code and not use any images since I'd like the elements to be flexible in size. Any suggestions on the middle lines?
Here's a quick solution. I set the main container to relative position and added two absolute position divs with appropriate borders and dimensions to handle the dividers.
.main-container {
width: 800px;
position: relative;
}
.divider-top {
position: absolute;
width: 150px;
height: 150px;
left: 300px;
border: 2px solid black;
border-left: 0px;
border-top: 0px;
}
.divider-bottom {
position: absolute;
width: 150px;
height: 167px;
top: 150px;
left: 300px;
border: 0px;
border-left: 2px solid black;
}
.details_images {
display: block;
margin: auto;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 10px;
}
.btn4 {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
width: 150px;
height: 50px;
}
.btn4.focus,
.btn4:focus,
.btn4:hover {
color: #333;
text-decoration: none;
}
.btn4-confirm {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn4-confirm:active {
color: #fff;
background-color: #449d44;
border-color: #398439;
}
<div class="main-container">
<div class="divider-top"></div>
<div class="divider-bottom"></div>
<table style="width: 100%; border: 1px solid black; table-layout: fixed">
<tr>
<td>
<img id="left_image" class="images" alt="left_image" height="auto" width="200" src="https://catalogue.millsarchive.org/images/generic-icons/blank.png" style="border: 2px solid #5b5b5b">
</td>
<td style="display:block;">
<div style="float: left; margin: 20px 0 0 20px;">
<table>
<tr>
<td style="width: 75px;">Name:</td>
<td><span id="left_name" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="left_category" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="left_id" style="font-weight: bold;">Blah</span></td>
</tr>
</table>
</div>
<div style="float: right; margin: 100px 20px 0 0;">
<table>
<tr>
<td style="width: 75px;">Name:</td>
<td><span id="right_name" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="right_category" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="right_id" style="font-weight: bold">Blah</span></td>
</tr>
</table>
</div>
</td>
<td>
<img id="right_image" class="images" alt="right_image" height="auto" width="200" src="https://catalogue.millsarchive.org/images/generic-icons/blank.png" style="border: 2px solid #5b5b5b">
</td>
</tr>
<tr>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="selectLeftID()">Select Left</button>
</td>
<td></td>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="electRightID()">Select Right</button>
</td>
</tr>
</table>
</div>
How do I control the leaking of this link?
I'm sending an activation email. The user must click a button to activate their account, but the link boundaries are extending beyond the button. How do I fix this problem without inserting the a tags inside the main element? Then, the text would be clickable, but not the parent div. <table width='100%' border='0' cellspacing='0' cellpadding='0'> <tr> <td align='center'> <div style='border: 1px solid #CCC;width:538px;font-family:Helvetica; padding: 30px'> <span style='font-size: 30px;text-align: center;color: #606060;font-weight: bold;'> Just one more step... </span> <br> <br> <br> <a href='#' style='text-decoration: none'> <div style='color: white; padding: 20px 50px 20px 50px; background: #69B8D6; border: 1px solid #69B8D6;text-align: center;width: 156px;font-size: 18px;font-weight: bold;border-radius:3px;'> Activate Account </div> </a> </div> </td> </tr> </table>
Use display:inline-block ... <table width='100%' border='0' cellspacing='0' cellpadding='0'> <tr> <td align='center'> <div style='border: 1px solid #CCC;width:538px;font-family:Helvetica; padding: 30px'> <span style='font-size: 30px;text-align: center;color: #606060;font-weight: bold;'> Just one more step... </span> <br> <br> <br> <a href='#' style='text-decoration: none'> <div style='color: white; padding: 20px 50px 20px 50px; background: #69B8D6; border: 1px solid #69B8D6;text-align: center;display:inline-block;width: 156px;font-size: 18px;font-weight: bold;border-radius:3px;'> Activate Account </div> </a> </div> </td> </tr> </table>
Set position:absolute of div that is inside of anchor and increase main div height. <table width='100%' border='0' cellspacing='0' cellpadding='0'> <tr> <td align='center'> <div style='border: 1px solid #CCC;width:538px;font-family:Helvetica; padding: 30px;height:160px;position:relative;'> <span style='font-size: 30px;text-align: center;color: #606060;font-weight: bold;'> Just one more step... </span> <br> <br> <br> <div style='color: white; padding: 20px 50px 20px 50px; background: #69B8D6; border: 1px solid #69B8D6;text-align: center;width: 156px;font-size: 18px;font-weight: bold;border-radius:3px;position:absolute;left:170px;'> Activate Account </div> </div> </td> </tr> </table> Setting display:inline-block of inner div inside anchor tag too will work. <div style='color: white; padding: 20px 50px 20px 50px; background: #69B8D6; border: 1px solid #69B8D6;text-align: center;width: 156px;font-size: 18px;font-weight: bold;border-radius:3px;display:inline-block;'> Activate Account </div>
How do I prevent this link leaking for my email? [duplicate]
I'm sending an activation email. The user must click a button to activate their account, but the link boundaries are extending beyond the button. How do I fix this problem without inserting the a tags inside the main element? Then, the text would be clickable, but not the parent div. <table width='100%' border='0' cellspacing='0' cellpadding='0'> <tr> <td align='center'> <div style='border: 1px solid #CCC;width:538px;font-family:Helvetica; padding: 30px'> <span style='font-size: 30px;text-align: center;color: #606060;font-weight: bold;'> Just one more step... </span> <br> <br> <br> <a href='#' style='text-decoration: none'> <div style='color: white; padding: 20px 50px 20px 50px; background: #69B8D6; border: 1px solid #69B8D6;text-align: center;width: 156px;font-size: 18px;font-weight: bold;border-radius:3px;'> Activate Account </div> </a> </div> </td> </tr> </table>
Use display:inline-block ... <table width='100%' border='0' cellspacing='0' cellpadding='0'> <tr> <td align='center'> <div style='border: 1px solid #CCC;width:538px;font-family:Helvetica; padding: 30px'> <span style='font-size: 30px;text-align: center;color: #606060;font-weight: bold;'> Just one more step... </span> <br> <br> <br> <a href='#' style='text-decoration: none'> <div style='color: white; padding: 20px 50px 20px 50px; background: #69B8D6; border: 1px solid #69B8D6;text-align: center;display:inline-block;width: 156px;font-size: 18px;font-weight: bold;border-radius:3px;'> Activate Account </div> </a> </div> </td> </tr> </table>
Set position:absolute of div that is inside of anchor and increase main div height. <table width='100%' border='0' cellspacing='0' cellpadding='0'> <tr> <td align='center'> <div style='border: 1px solid #CCC;width:538px;font-family:Helvetica; padding: 30px;height:160px;position:relative;'> <span style='font-size: 30px;text-align: center;color: #606060;font-weight: bold;'> Just one more step... </span> <br> <br> <br> <div style='color: white; padding: 20px 50px 20px 50px; background: #69B8D6; border: 1px solid #69B8D6;text-align: center;width: 156px;font-size: 18px;font-weight: bold;border-radius:3px;position:absolute;left:170px;'> Activate Account </div> </div> </td> </tr> </table> Setting display:inline-block of inner div inside anchor tag too will work. <div style='color: white; padding: 20px 50px 20px 50px; background: #69B8D6; border: 1px solid #69B8D6;text-align: center;width: 156px;font-size: 18px;font-weight: bold;border-radius:3px;display:inline-block;'> Activate Account </div>
Navigation Bar not spanning width of page
It is my first time putting together a website and I was hoping some of you might be able to help me as there seems to be a wealth of knowledge here. I am having the hardest time trying to have the navigation bar stretch across the length of the webpage. Additionally, there is a space between the photo header and the navigation bar which I'd like to get rid of. I have made it white for now, but when i hover, you can see the white space.
I included all the code (I'm sorry if it's overwhelming, but I'm not sure what's important and what's not as I am adapting it from the current code of a user who is no longer with my lab) and I would appreciate all the help I can get.
Thank you so much!
UPDATE: I have made a js fiddle as chandan suggested
http://jsfiddle.net/amchen/rzdmytqz/
I was hoping to make a website similar to the one as the tutorial I looked at:
https://helpx.adobe.com/dreamweaver/learn/tutorials/how-to/first-website-part1.html
The picture above is what I am seeing when I do a test webpage.
I hope this gives you a better idea of what I am looking for in terms of design.
THANK YOU!
<style type="text/css">
<!--
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
margin: 0 auto;
min-height: 100%;
height: auto;
}
a {
text-decoration: none;
}
#wrapper {
background-color: #FFFFFF;
width: 1400px;
min height: 100%;
position: relative;
height: 100%;
margin: 0 auto;
}
#content-spacer-top {
height: 150px;
}
#content-spacer-bottom{
height:30px;
}
#header {
background-color: #357f7f;
height: 2%;
width: 100%;
}
#mainnav a {
display: block;
width: 12%;
float: left;
text-align: center;
background-color: #FFFFFF;
color: #357F7F;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
border-top-color: #F0F0F0;
border-right-color: #F0F0F0;
border-bottom-color: #F0F0F0;
border-left-color: #F0F0F0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
word-spacing: normal;
}
#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}
a:visited {
color: #FFFFFF;
background-color: #357F7F;
}
#footer {
width:100%;
height:6%;
background color:#357f7f
position:absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style6 {font-size: 12px}
-->
</style>
</head>
<body bgcolor="#CCCCCC" text="#000000" leftmargin="10%" topmargin="0" rightmargin="10%" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/indexfigures/surfover.jpg','images/indexfigures/3over.jpg' ,'images/indexfigures/4over.jpg','images/indexfigures/5over.jpg')" font>
<div id="wrapper">
<div id="header"></div>
<nav id="mainnav">
<img src="images/NewTitle copy.jpg" align="middle">
<ul style="list-style: none;">
<li>HOME</li>
<li>RESEARCH</li>
<li>SUSAN TAYLOR</li>
<li>LAB MEMBERS</li>
<li>PUBLICATIONS</li>
<li>LINKS</li>
<li>CONTACT US</li>
<li>REAGENT REQUESTS</li>
</ul>
</nav>
<div id= "content" align="center">
<br>
<div id="content-spacer-top"> </div>
<div id="content-inner">
<!-- TemplateBeginEditable name="EditRegion3" -->
<table width="75%" border="0" align="center" cellpadding="2" cellspacing="0">
<tr valign="top" bgcolor="#FFFFFF">
<td width="20%" height="113" align="center"><a href="javascript:openWindow('Figurepanes/PKAfigure.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image14','','images/indexfigures/1over.jpg',1)"><img src="images/indexfigures/1out.jpg" name="Image14" width="113" height="113" border="0"></a> </td>
<td width="16%" align="center">
<a href="javascript:openWindow('Figurepanes/surface.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image15','','images/indexfigures/surfover.jpg',1)">
<img src="images/indexfigures/surfout.jpg" name="Image15" width="91" height="113" border="0"></a> </td>
<td width="21%" align="center">
<a href="javascript:openWindow('Figurepanes/Rsub1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image22','','images/indexfigures/3over.jpg',1)">
<img src="images/indexfigures/3out.jpg" name="Image22" width="161" height="113" border="0"></a> </td>
<td width="12%" align="center">
<a href="javascript:openWindow('Figurepanes/PBC.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image23','','images/indexfigures/4over.jpg',1)">
<img src="images/indexfigures/4out.jpg" name="Image23" width="95" height="113" border="0"></a> </td>
<td width="19%" align="center">
<a href="javascript:openWindow('figurepanes/local1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image24','','images/indexfigures/5over.jpg',1)">
<img src="images/indexfigures/5out.jpg" name="Image24" width="139" height="113" border="0"></a> </td>
</tr>
</table>
<table width="75%" align="center" table id="table_text">
<tr>
<th scope="col"></th>
</tr>
</table>
<!-- TemplateEndEditable --></div>
<div id="content-space bottom"></div>
</div>
<div class="footer" id="footer">
<div align="center">
<p>content here</p>
</div>
</div>
</div>
</body>
</html>
Try setting the width in #wrapper to 100%. Also, I don't know if it matters but your whole style section looks like it's commented out. Kinda hard to see what is going on since none of your images are visible.
It's because you have your navigation inside the main wrapper and '#wrapper' width is 1400px. Take the Navigation out of the main wrapper and it will stretch 100%;
<head>
<style type="text/css">
<!--
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
margin: 0 auto;
min-height: 100%;
height: auto;
}
a {
text-decoration: none;
}
#wrapper {
background-color: #FFFFFF;
width: 1400px;
min height: 100%;
position: relative;
height: 100%;
margin: 0 auto;
}
#content-spacer-top {
height: 150px;
}
#content-spacer-bottom{
height:30px;
}
#header {
background-color: #357f7f;
height: 2%;
width: 100%;
}
#mainnav a {
display: block;
width: 12%;
float: left;
text-align: center;
background-color: #FFFFFF;
color: #357F7F;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
border-top-color: #F0F0F0;
border-right-color: #F0F0F0;
border-bottom-color: #F0F0F0;
border-left-color: #F0F0F0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
word-spacing: normal;
}
#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}
a:visited {
color: #FFFFFF;
background-color: #357F7F;
}
#footer {
width:100%;
height:6%;
background color:#357f7f
position:absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style6 {font-size: 12px}
-->
</style>
</head>
<body bgcolor="#CCCCCC" text="#000000" leftmargin="10%" topmargin="0" rightmargin="10%" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/indexfigures/surfover.jpg','images/indexfigures/3over.jpg' ,'images/indexfigures/4over.jpg','images/indexfigures/5over.jpg')" font>
<div id="header"></div>
<nav id="mainnav">
<img src="images/NewTitle copy.jpg" align="middle">
<ul style="list-style: none;">
<li>HOME</li>
<li>RESEARCH</li>
<li>SUSAN TAYLOR</li>
<li>LAB MEMBERS</li>
<li>PUBLICATIONS</li>
<li>LINKS</li>
<li>CONTACT US</li>
<li>REAGENT REQUESTS</li>
</ul>
</nav>
<div id="wrapper">
<div id= "content" align="center">
<br>
<div id="content-spacer-top"> </div>
<div id="content-inner">
<!-- TemplateBeginEditable name="EditRegion3" -->
<table width="75%" border="0" align="center" cellpadding="2" cellspacing="0">
<tr valign="top" bgcolor="#FFFFFF">
<td width="20%" height="113" align="center"><a href="javascript:openWindow('Figurepanes/PKAfigure.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image14','','images/indexfigures/1over.jpg',1)"><img src="images/indexfigures/1out.jpg" name="Image14" width="113" height="113" border="0"></a> </td>
<td width="16%" align="center">
<a href="javascript:openWindow('Figurepanes/surface.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image15','','images/indexfigures/surfover.jpg',1)">
<img src="images/indexfigures/surfout.jpg" name="Image15" width="91" height="113" border="0"></a> </td>
<td width="21%" align="center">
<a href="javascript:openWindow('Figurepanes/Rsub1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image22','','images/indexfigures/3over.jpg',1)">
<img src="images/indexfigures/3out.jpg" name="Image22" width="161" height="113" border="0"></a> </td>
<td width="12%" align="center">
<a href="javascript:openWindow('Figurepanes/PBC.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image23','','images/indexfigures/4over.jpg',1)">
<img src="images/indexfigures/4out.jpg" name="Image23" width="95" height="113" border="0"></a> </td>
<td width="19%" align="center">
<a href="javascript:openWindow('figurepanes/local1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image24','','images/indexfigures/5over.jpg',1)">
<img src="images/indexfigures/5out.jpg" name="Image24" width="139" height="113" border="0"></a> </td>
</tr>
</table>
<table width="75%" align="center" table id="table_text">
<tr>
<th scope="col"></th>
</tr>
</table>
<!-- TemplateEndEditable --></div>
<div id="content-space bottom"></div>
</div>
<div class="footer" id="footer">
<div align="center">
<p>content here</p>
</div>
</div>
</div>
</body>
</html>
There's a few errors in your style code. Make sure you input semicolons after every style you want to implement. Also background-color should have the hyphen in between (see the #footer section in your style tag). You wont be able to expand the navbar to 100% of the screen AND have the image in the same plane unless you put both items in a . I have tried as much as I can for now. You can decrease the width of the #mainnav as you increase the size of the image. Also you need to increase the height of the header. 2% height for the header hides most of the content. I used display:inline-block to get the navbar and the image in the same plane:
<head>
<style type="text/css">
<!--
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
margin: 0 auto;
min-height: 100%;
height: auto;
}
a {
text-decoration: none;
}
#wrapper {
background-color: #FFFFFF;
width: 1400px;
min-height: 100%;
position: relative;
height: 100%;
margin: 0 auto;
}
#content-spacer-top {
height: 150px;
}
#content-spacer-bottom{
height:30px;
}
#header {
background-color: #357f7f;
height: 100px;
width: 100%;
}
#mainnav{
height:50px;
display:inline-block;
width:1300px;
}
#mainnav img{
display:inline-block;
width:50px;
height:50px;
position:absolute;
}
#mainnav a {
display: inline-block;
width: 12%;
float:right;
text-align: center;
background-color: #FFFFFF;
color: #357F7F;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
border-top-color: #F0F0F0;
border-right-color: #F0F0F0;
border-bottom-color: #F0F0F0;
border-left-color: #F0F0F0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
word-spacing: normal;
}
#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}
a:visited {
color: #FFFFFF;
background-color: #357F7F;
}
#footer {
width:100%;
height:6%;
background:#357f7f;
position:absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style6 {font-size: 12px}
-->
</style>
</head>
<body bgcolor="#CCCCCC" text="#000000" leftmargin="10%" topmargin="0" rightmargin="10%" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/indexfigures/surfover.jpg','images/indexfigures/3over.jpg' ,'images/indexfigures/4over.jpg','images/indexfigures/5over.jpg');">
<div id="header">
<img src="images/NewTitle copy.jpg" align="middle">
<nav id="mainnav">
<ul style="list-style: none;">
<li>HOME</li>
<li>RESEARCH</li>
<li>SUSAN TAYLOR</li>
<li>LAB MEMBERS</li>
<li>PUBLICATIONS</li>
<li>LINKS</li>
<li>CONTACT US</li>
<li>REAGENT REQUESTS</li>
</ul>
</nav>
</div>
<div id="wrapper">
<div id= "content" align="center">
<br>
<div id="content-spacer-top"> </div>
<div id="content-inner">
<!-- TemplateBeginEditable name="EditRegion3" -->
<table width="75%" border="0" align="center" cellpadding="2" cellspacing="0">
<tr valign="top" bgcolor="#FFFFFF">
<td width="20%" height="113" align="center"><img src="images/indexfigures/1out.jpg" name="Image14" width="113" height="113" border="0"> </td>
<td width="16%" align="center">
<a href="javascript:openWindow('Figurepanes/surface.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image15','','images/indexfigures/surfover.jpg',1)">
<img src="images/indexfigures/surfout.jpg" name="Image15" width="91" height="113" border="0"></a> </td>
<td width="21%" align="center">
<a href="javascript:openWindow('Figurepanes/Rsub1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image22','','images/indexfigures/3over.jpg',1)">
<img src="images/indexfigures/3out.jpg" name="Image22" width="161" height="113" border="0"></a> </td>
<td width="12%" align="center">
<a href="javascript:openWindow('Figurepanes/PBC.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image23','','images/indexfigures/4over.jpg',1)">
<img src="images/indexfigures/4out.jpg" name="Image23" width="95" height="113" border="0"></a> </td>
<td width="19%" align="center">
<a href="javascript:openWindow('figurepanes/local1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image24','','images/indexfigures/5over.jpg',1)">
<img src="images/indexfigures/5out.jpg" name="Image24" width="139" height="113" border="0"></a> </td>
</tr>
</table>
<table width="75%" align="center" table id="table_text">
<tr>
<th scope="col"></th>
</tr>
</table>
<!-- TemplateEndEditable --></div>
<div id="content-space bottom"></div>
</div>
</div>
<div class="footer" id="footer">
<div align="center">
<p>content here</p>
</div>
</div>