ok so here goes. Im working on expanding my html, css, and javascript knowledge. To do this i began writing a few basic website designs (on a live server, but all made up and fake). On my most recent one, I've decided to go for dropdown menu's. To space this all properly i decided to go with a table element, and use some very basic (which is all i know right now) javascript. I am currently using a .dropdown and a .dropdown:hover to make my menus work. However since i used the table element, each time i "dropdown" my menu on my test page, the other menus titles resize to the size of the dropdown window. Any ideas how to combat this? heres my code....
CSS
.dropdown ul {
display: none
}
.dropdown:hover ul {
display: block;
background-color: white;
}
body {
margin: 0;
padding: 0;
background: -moz-linear-gradient(AliceBlue, White);
background: -webkit-linear-gradient(AliceBlue, White);
background: linear-gradient(AliceBlue, White);
}
table {
align: center;
font-family: cursive;
font-decoration: underline;
}
td {
border: solid 1px Lavender;
padding: 4px;
margin-left: 6px;
margin-right: 6px;
cell-spacing: 6px;
}
h1 {
font-size: 14px;
}
HTML
<div style="text-align: center">
<img src="http://satasurfer.byethost33.com/2/logo.jpg" height="150px" width="70%" align="center">
</div>
<table>
<td class="dropdown">
<h1>
Search By Department
<ul>
<li>Computers and Laptops
<li>Computer Components
<li>Office Supplies
<li>Phones and PDAs
<li>Speakers and Audio
<li>Tablets and Ipads
</h1>
</td>
<td class="dropdown">
<h1>
Search by Company
<ul>
<li>ACER</li>
<li>AMD</li>
<li>APPLE</li>
<li>BELKIN</li>
<li>BOSE</li>
<li>COBY</li>
<li>DELL</li>
<li>HP</li>
<li>HTC</li>
<li>JVC</li>
<li>LG</li>
<li>PANASONIC</li>
<li>SAMSUNG</li>
<li>SONY</li>
</h1>
</td>
You seem to have guessed it already: don't use table, besides being semantically incorrect (<table> is meant for tables with data) it gives you all kinds of other issues because of their default styling.
Use a straightforward (embedded) ul and position the sub menus absolute, make sure to make the top level menu items (li) position: relative; and display: inline-block; and it should be pretty straightforward from there.
One way to accomplish this is in you td {} style give a specific height such as 'height: 50px' and the float them 'float: left'. might not be the best option but it seems to accomplish it.
If you wish to use plain javascript. That should work fine.
<html>
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: -moz-linear-gradient(AliceBlue, White);
background: -webkit-linear-gradient(AliceBlue, White);
background: linear-gradient(AliceBlue, White);
}
table {
align: center;
font-family: cursive;
font-decoration: underline;
}
td {
border: solid 1px Lavender;
padding: 4px;
margin-left: 6px;
margin-right: 6px;
cell-spacing: 6px;
}
h1 {
font-size: 14px;
}
.dd1,.dd2{display:none;}
</style>
<title>Discount Electronics</title>
</head>
<body>
<div style="text-align: center">
<img src="http://satasurfer.byethost33.com/2/logo.jpg" height="150px" width="70%" align="center">
</div>
<table>
<tr>
<td onmouseover="fun('dd1')"> Search By Department</td>
<td onmouseover="fun('dd2')"> Search by Company</td>
</tr>
<tr><td>
<div class='dd1 dropdown'>
<h1>
<ul>
<li>Computers and Laptops
<li>Computer Components
<li>Office Supplies
<li>Phones and PDAs
<li>Speakers and Audio
<li>Tablets and Ipads
</h1>
</div>
</td>
<td>
<div class='dd2 dropdown'>
<h1>
<ul>
<li>ACER</li>
<li>AMD</li>
<li>APPLE</li>
<li>BELKIN</li>
<li>BOSE</li>
<li>COBY</li>
<li>DELL</li>
<li>HP</li>
<li>HTC</li>
<li>JVC</li>
<li>LG</li>
<li>PANASONIC</li>
<li>SAMSUNG</li>
<li>SONY</li>
</h1>
</div>
</td></tr>
</table>
<script type='text/javascript'>
function fun(cls){
var arr=document.getElementsByClassName('dropdown');
for(i=0;i<arr.length;i++)
{
arr[i].style.display='none';
}
document.getElementsByClassName(cls)[0].style.display='block'
}
</script>
</body>
</html>
Related
I'm creating a table of links, I want the table to be a bit fancier by changing the table heading's background color whenever I move the cursor to one of the list's links. However, I don't know how to change the attribute of the container element by affecting its smaller element. This is my code:
<html lang="vi">
<head>
<style>
.toc-container {
max-width: 600px;
font-family: "Roboto", sans-serif;
background: #deff9d;
border-radius: 8px;
box-shadow: 0 4px 11px rgba(0, 0, 0, 0.6);
}
.toc-container h2.index-heading {
text-transform: uppercase;
font-weight: normal;
margin: 0 16px;
padding-top: 16px;
}
.table-of-contents {
list-style: none;
padding: 0;
}
.table-of-contents li.author li.blog {
background: #222;
transition: 400ms;
list-style: none;
}
.table-of-contents li.author{
background-color: green;
}
.table-of-contents li.author li:nth-of-type(even).blog {
background: #2e2e2e;
}
.table-of-contents li.author li:hover.blog {
background: #000;
}
.table-of-contents li a {
text-decoration: none;
color: #fff;
margin-left: 24px;
padding: 16px 0;
display: block;
}
</style>
</head>
<body>
<div class="toc-container">
<h2 class="index-heading">heading</h2>
<ul class="table-of-contents">
<li class="author">
Author's name
<ul>
<li class="blog">
Nháp 1
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I think it's easier to do this with javascript, you can use Element Event mouseenter and mouseleave to achieve style change, maybe this can help you. code below
<script>
const headerDiv = document.querySelector('.index-heading');
const blogDiv = document.querySelector('.blog');
blogDiv.addEventListener('mouseenter', function(e) {
headerDiv.style.background = 'purple'
})
blogDiv.addEventListener('mouseleave', function(e) {
headerDiv.style.background = '#deff9d'
})
</script>
basically your HTML code is not in a order manner so that we could not apply all the changes you need . thats why i attached the code snippet which is easily explained and you can change your design yourself as your choice . and in style , unfortunately a tag is not doing as expected but i am sure that it will work in your browser .
if any needs to be changed in my code then comment below .
let header2=document.getElementById("header2");
let link=document.getElementById("link")
let changeLink=()=>{
header2.style.backgroundColor="green"
link.style.backgroundColor="yellow"
}
let changeHeader=()=>{
link.style.background="green"
header2.style.backgroundColor="yellow"
}
a{
text-decoration: none;
}
#header1{
height:85px;
}
#link{
margin-left: 50px;
background-color:black;
margin-top:-141px;
}
#header2{
height:180px;
}
<div id="header1" style="background-color:red">header1</div>
<a href="https://www.blogger.com/profile/00965819760488730111">
<div style="background-color:green" id="change">
<div id="header2" onmouseover="changeLink()">Đặng Minh Hoàng</div>
</div>
</a>
<ul id="link" onmouseover="changeHeader()">
<div class="col my-1">Nháp1</div>
<div class="col my-1">Nháp2</div>
<div class="col my-1">Nháp3</div>
<div class="col my-1">Nháp4</div>
<div class="col my-1">Nháp5</div>
</ul>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
I am trying to increase the width of the twitter feed displayed on my webpage, I added a Div id to it and tried increasing its size in css however it stops getting bigger after a certain point, Also I want to add images in my portfolio section which includes 3 random pictures of like computers which get bigger and change size when you hover over them in css, how do I do this? Also I can't figure out how to change the color of the background of the webpage, everything I have tried doesn't work. Thanks.
I have provided the HTML, CSS and JS code for my code below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Muhammed's Webpage</title>
<style>
#body {
margin: auto;
max-width: 85%;
font-family: 'Exo 2', Times, serif;
color: black;
padding-top: 50px;
}
.mainlogo {
font-size: 18px;
font-weight: 900;
font-family: 'Montserrat', Times, serif;
text-decoration: underline;
}
nav {
position: fixed;
top: 0;
width: 100%;
margin-left: 4%;
opacity: 0.8;
max-width: 85%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
font-size: 20px;
}
li {
float: left;
border-right: 2px solid black;
}
li:first-child {
border-left: 2px solid black;
}
li a {
display: inline-block;
color: black;
text-align: justify;
padding: 36px 40px;
text-decoration: underline;
font-family: 'Montserrat', Times, serif;
text-shadow: 4px 4px 4px #aaa;
}
li a:hover {
background-color: #C2E5E5;
color: black;
}
.yt {
margin-left: 53px;
margin-top: 30px;
display: inline-block;
height: 500px;
width: 650px;
}
#twitter {
display: inline-block;
height: 300px;
width: 300px;
}
.contentbox {
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-size: 2em;
padding-left: 10px;
padding-bottom: 0;
margin-bottom: 0;
background-color: #C2E5E5;
}
.content {
background-color: #C2E5E5;
}
p {
text-indent: 3%;
margin: auto;
max-width: 95%;
}
.contentbox {
font-family: 'Montserrat', Times, serif;
font-size: 28px;
}
</style>
<script>
!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
</script>
</head>
<body>
<div class="mainlogo">
<div>Muhammed's
<br>Webpage
</div>
</div>
<div id="body">
<nav>
<ul>
<li> BASIC INFORMATION </li>
<li> CURRICULUM VITAE </li>
<li> PORTFOLIO </li>
<li> REPORT </li>
</ul>
</nav>
<div class="yt">
<iframe src="http://www.youtube.com/embed/nKIu9yen5nc">
</iframe>
</div>
<div id="twitter">
<a class="twitter-timeline" href="https://twitter.com/applenws" data-widget-id="674678491141570560">Tweets by
#applenws</a>
</div>
<div class="content" id="Basic Information">
<h3 class="contentbox"><u>Basic Information</u></h3>
<p>
<br>Name: Muhammed Hussain
<br>Age: 18
<br>Contact Number: 07711909673
<br>E-mail: Mhuss055#gold.ac.uk
<br>Occupation: Student of Goldsmiths, University of London
<br>Hobbies & Interests: Playing on my ps4 and outdoor tennis
<br>
<br>
</p>
</div>
<div class="content" id="Curriculum Vitae">
<h3 class="contentbox"><u>Curriculum Vitae</u></h3>
<p>
<br><u>Jun 2015 - Currently Employed</u> : <b>Harrods - Operations Assistant</b>
<br>Responsible for ensuring all daily administrative tasks are met within time schedule
<br>Worked with colleagues to sustain a world class service of luxury goods, through providing an excellent
service while working in a team environment and focusing on customer service
<br>Proactive use of CCA and SAP software on a regular basis, in order to deal with online orders.
<br>
<br><u>Jun 2014 - Sep 2014</u> : <b>Direct Accountancy - Accounts Assistant</b>
<br>Assisted Account Manager through creating invoices and sending to customers using SAGE software
<br>Made and arranged invoices occasionally for customers, and ensured these were sent out promptly upon
receiving the order.
<br>
<br>
<u>Skills Gained:</u>
<br>Communication - Established rapport and resolved queries within pressurised customer service
environments
<br>Teamwork - Motivated and developed colleagues to work effectively
<br>Leadership - Showed leadership qualities when delivering end of unit presentations at Sixth form
<br>
<br>
<p>
</div>
<div class="content" id="Portfolio">
<h3 class="contentbox"><u>Portfolio</u></h3>
<p>
<br>Here im going to include some images and use css to make them interactive and exciting
<br>
<br>
</p>
</div>
<div class="content" id="Report">
<h3 class="contentbox"><u>Report</u></h3>
<p>
<br>Here im going to state why i did what i did in detail
<p>
<br>
</div>
<br>
<br>
</div>
</body>
</html>
Your Twitter feed has a width set in HTML property. Erase the property and move it to CSS. That should fix the Twitter thing. Edit: Remember that the height is set on Twitter > Settings > Widget > Height.
- EDIT 1 -
Now that I know your Twitter feed can't be controlled by you, you have to control the result of your Twitter script which will normally be 600px of height by default. No matter what this is, you know it will end up styling an iframe with the twitter-timeline CSS class, so you only need to overwrite the value like this:
.twitter-timeline {
height: 503px; // 503 because for some reason it needs 3 more pixels to catch up with your video, as I could see.
}
- END EDIT 1 -
You just gave away all of your personal information to strangers around the web. You'll probably be spammed in a few seconds if they are true. I suggest you ONLY provide necessary code. There is a lot of CSS and HTML not related to the question, you can simply ask them in another question or explain them apart of each other.
To place pictures you can do many things, being them random means either JavaScript or preloaded with PHP. I imagine you would be loading them from your site, let's say /images/computers/ and give them a class, for instance photo. Then on CSS, you can do the following:
.photo {
height:200px;
}
.photo:hover {
height:400px;
}
That will make it bigger on hover using CSS. If you like to animate it, you might want to use other CSS properties. Search on the web, you'll find them.
- EDIT 2 -
So, looking at your pictures with the class photo, I see that you were not adding the % values correctly. You need to find a balanced value for each one of your images. In your case, we are playing with image padding, margin and width basically. So there are 3 images and you know that the percentage must reach something around 100%:
.photo {
background-color: white;
padding: 1%;
margin-left: 5%;
margin-bottom: 2%;
-webkit-box-shadow: 0 0 0.2em 0.15em rgba(00, 00, 00, 0.35);
box-shadow: 0 0 0.2em 0.15em rgba(00, 00, 00, 0.35);
float: left;
width: 25%;
transition: all 0.25s ease-out;
}
According to this code I wrote for you, now the formula is:
(3 * 25%) + (6 * 1%) + (3 * 5%) = 75% + 6% + 15% = 96%
6 times 1% because the padding will be added to both left and right of the picture.
- END EDIT 2 -
The background color of the website? That is just too basic. It depends on your needs, you can set your background color to the <html> or <body>. I'll use HTML:
html {
background-color:red;
}
With that, your website will have a red background. Of course you can use HEX, or rgb() or rgba() or color names, whatever you want.
Try this codes.
twitter frame having max-width="520" that is a boundary.portfolia images supported responsive also.
MAKE IT COOL,WE LOVE OUR CODING.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Muhammed's Webpage</title>
<link rel="stylesheet" type="text/css" href="homepage.css">
<script src="homepage.js"></script>
<link href='https://fonts.googleapis.com/css?family=Exo+2:500,700,800italic,600|Montserrat' rel='stylesheet' type='text/css'>
</head>
<div class="mainlogo">
<body>Muhammed's
<br>Webpage</body>
</div>
<div id="body">
<nav>
<ul>
<li> BASIC INFORMATION </li>
<li> CURRICULUM VITAE </li>
<li> PORTFOLIO </li>
<li> REPORT </li>
</ul>
</nav>
<div class="yt">
<iframe src="http://www.youtube.com/embed/nKIu9yen5nc">
</iframe>
</div>
<div id = "twitter">
<a class="twitter-timeline" href="https://twitter.com/applenws" data-widget-id="674678491141570560">Tweets by #applenws</a>
</div>
<div class="content" id="Basic Information">
<h3 class="contentbox"> <u>Basic Information</u> </h3>
<p>
<br>Name: Muhammed Hussain
<br>Age: 18
<br>Contact Number: 07711909673
<br>E-mail: Mhuss055#gold.ac.uk
<br>Occupation: Student of Goldsmiths, University of London
<br>Hobbies & Interests: Playing on my ps4 and outdoor tennis
<br>
<br>
</p>
</div>
<div class="content" id="Curriculum Vitae">
<h3 class="contentbox"> <u>Curriculum Vitae</u> </h3>
<p>
<br><u>Jun 2015 - Currently Employed</u> : <b>Harrods - Operations Assistant</b>
<br>Responsible for ensuring all daily administrative tasks are met within time schedule
<br>Worked with colleagues to sustain a world class service of luxury goods, through providing an excellent service while working in a team environment and focusing on customer service
<br>Proactive use of CCA and SAP software on a regular basis, in order to deal with online orders.
<br>
<br><u>Jun 2014 - Sep 2014</u> : <b>Direct Accountancy - Accounts Assistant</b>
<br>Assisted Account Manager through creating invoices and sending to customers using SAGE software
<br>Made and arranged invoices occasionally for customers, and ensured these were sent out promptly upon receiving the order.
<br>
<br>
<u>Skills Gained:</u>
<br>Communication - Established rapport and resolved queries within pressurised customer service environments
<br>Teamwork - Motivated and developed colleagues to work effectively
<br>Leadership - Showed leadership qualities when delivering end of unit presentations at Sixth form
<br>
<br>
<p>
</div>
<div class="content" id="Portfolio" style="height:250px">
<h3 class="contentbox"> <u>Portfolio</u> </h3>
<p>
<br>Here im going to include some images and use css to make them interactive and exciting
<br>
<br>
</p>
<ul class="portfolioimg" style="">
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
</ul>
</div>
<div class="content" id="Report">
<h3 class="contentbox"> <u>Report</u> </h3>
<p>
<br>Here im going to state why i did what i did in detail
<p>
<br>
</div>
<br>
<br>
</body>
</html>
<style>
body{
background-color:gray;
}
.portfolioimg {
clear: both;
display: block;
margin: 30px auto 0;
padding: 0;
position: static !important;
text-align: center;
width: 1000px;
background-color:transparent;
}
.portfolioimg > li {
background-color: transparent !important;
border: medium none !important;
display: inline-block;
float: none;
list-style-type: none;
margin-right: 40px;
text-align: center;
}
.portfolioimg > li img{
width:200px;
}
#body {
margin: auto;
max-width: 85%;
font-family: 'Exo 2', Times, serif;
color: black;
padding-top: 50px;
}
.mainlogo {
font-size: 18px;
font-weight: 900;
font-family: 'Montserrat' , Times, serif;
text-decoration: underline;
}
nav {
position: fixed;
top: 0;
width: 100%;
margin-left: 4%;
opacity: 0.8;
max-width: 85%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
font-size: 20px;
}
li {
float: left;
border-right: 2px solid black;
}
li:first-child {
border-left: 2px solid black;
}
li a {
display: inline-block;
color: black;
text-align: justify;
padding: 36px 40px;
text-decoration: underline;
font-family: 'Montserrat', Times, serif;
text-shadow: 4px 4px 4px #aaa ;
}
li a:hover {
background-color: #C2E5E5;
color: black;
}
.yt {
margin-left: 53px;
margin-top: 30px;
display:inline-block;
height: 500px;
width: 650px;
}
#twitter {
display:inline-block;
height: 300px;
width: 520px;
}
.contentbox {
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-size: 2em;
padding-left: 10px;
padding-bottom: 0;
margin-bottom: 0;
background-color: #C2E5E5;
}
.content {
background-color: #C2E5E5;
}
p {
text-indent: 3%;
margin: auto;
max-width: 95%;
}
.contentbox {
font-family: 'Montserrat', Times, serif;
font-size: 28px;
}
</style>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
</script>
I want that the logo stays in the middle of menu items in the navigation, that it seems like the logo "splits" the navigation like in this example. It is important, that the logo stays also in the middle of page. So the menu items are arround them but the logo is "fixed".
I add a sepeartor div dynamically with javascript to the middle of menu items (when six items, the seperator stays after the third) to create the effect I discribe above.
.seperator {
display: inline-block;
height: 10px;
margin-left: 69px;
margin-right: 206px;
width: 10px;
}
But when the editor adds a new menu item to the navigation or renames an item (CMS), the logo is not centered anymore. With fixed margin it will not work but I don't know how to calculate dynamically the width or margin size. I want to add the value via javascript. I think this is the only way it could work.
So I need a script or a helpful idea to do this.
Responsive solution, bare HTML & CSS:
<div class="navBar">
<table class="menu">
<tr>
<td class="left">
<table class="nested" >
<tr>
<td>first</td>
<td>second</td>
</tr>
</table>
</td>
<td class="logo">
<a href="#">
<img src="http://i48.tinypic.com/2mob6nb.png" alt="Michigan State" />
</a>
</td>
<td class="right">
<table class="nested" >
<tr>
<td>third</td>
<td>fourth</td>
<td>fifth</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<style>
.navBar {
width: 100%;
margin: 0 auto;
}
.menu {
width: 100%;
}
.menu td {
text-align: center;
}
.menu .logo {
width: 22%;
}
.menu .logo img {
width: 200px;
max-width: 100%;
}
.left, .right {
width: 39%;
}
.nested {
width: 100%;
}
.nested td {
text-align: center;
}
</style>
View on Codepen
Okay, I tried a few things and I don't wanted to use two navigations but I did:
<div class="inner">
<div class="desktop_navi">
<ul>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
<div class="logo"><img width="281" height="280" src=""></div>
<div class="desktop_navi">
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</div>
Thats my new HTML-Markup. Here the style I use:
.inner {
display: table;
width: 100%;
}
.inner .desktop_navi,.logo {
display: table-cell;
}
.inner .desktop_navi {
text-align: left;
}
.header .inner .desktop_navi:first-child {
text-align: right;
}
This is not the best solution, but it works, is responsive and there are no problems with older browsers. If anyone finds a realy good solution with a single navigation, please let me know!
flex box might work for this.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've created a page (http://www.nextsteptutoring.co.uk/WhatWeTeach.html) with 4 selectable h3 elements that bring up further text on the topic for the user to read.
The 1st element works perfectly - the whole element is selectable. The 2nd and 3rd are partially selectable, the + and first letter can be clicked. The 4th can't be clicked at all.
The JS works fine and my CSS would seem to be fine as displayed by the 1st working fine, and the 2nd and 3rd being partially ok. I can't see how this could be a z-inex as the only element on the page with a z-index value is the footer, which loads fine as well.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Cabin+Condensed" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="Main.CSS">
<title>NST | What We Teach</title>
</head>
<body>
<div class="container">
<header> </header>
<div class="leftcolumn">
<h2>What We Teach</h2>
<p> Clear schemes of work, linked to the National Curriculum, which
are individually tailored to your child’s needs. We offer one to one
sessions, or small groups, with a maximum of 4 children. Groups are
based on specific needs/ability, rather than on chronological age.<br/>
<br/>
Programmes of study are adapted for high achievers in need of a
challenge, as well as those who lack confidence or require additional
support, outside of mainstream education.<br/>
</p>
</div>
<div class="rightcolumn">
<div class="hide">
<h3>+ Primary Maths</h3>
<ul>
<li>The four rules of number</li>
<li>Focus on Mental Arithmetic</li>
<li>Multiplication and associated division facts</li>
<li>Fractions, decimals and percentages</li>
<li>Data Handling, measures, and shapes</li>
<li>Algebra</li>
<li>Using and applying mathematical skills in everyday problem
solving</li>
<li>Confidence building and catch-up</li>
</ul>
</div>
<div class="hide">
<h3>+ Primary English</h3>
<ul>
<li>Clear focus on comprehension. Building skills of inference and
reasoning</li>
<li>Individually tailored spelling programme (specialised dyslexia
spelling programme)</li>
<li>Grammar and punctuation</li>
<li>Writing for different purposes and audiences</li>
<li>Handwriting</li>
<li>Confidence building and catch-up</li>
</ul>
</div>
<div class="hide">
<h3>+ Year 6 to Year 7 Transition</h3>
<p>Tailored English and Maths programme to support youngsters who
lack confidence during their transition from Primary to Secondary
education.</p>
</div>
<div class="hide">
<h3>+ Written Reports</h3>
<p>Parents may wish to receive a termly or yearly written report on
their child’s progress, and targets for the next phase of their
learning. This service will incur a fee of £10.</p>
</div>
</div>
<footer> </footer>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("header").load("Header.txt");
});
$(document).ready(function(){
$("footer").load("Footer.txt");
});
$(".hide > h3").click(function(){
$(this).parent().toggleClass("show");
});
$(".show > h3").click(function(){
$(this).parent().toggleClass("hide");
});
</script>
</body>
</html>
footer {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
background: rgba(150,150,150,1);
color: white;
text-align: center;
z-index: 5;
}
footer .container div {
display: inline-block;
padding: 5px 30px 2px 30px;
}
#contact {
background: rgba(120,117,185,1);
float: right;
padding: 5px 100px 2px 100px;
}
.hide h3 {
width: 100%;
background: rgba(171,167,242,0.75);
border-radius: 5px;
cursor: pointer;
padding: 2px 0 2px 8px;
}
.hide p, .hide ul {
opacity: 0;
height: 0;
}
.show {
height: auto;
}
.show p, .show ul {
opacity: 1;
list-style-type: square;
height: auto;
font-size: 18px;
}
Any ideas would be greatly appreciated!!
The problem is css.
Add this:
.hide p, .hide ul {
opacity: 0;
height: 0;
overflow: hidden;
}
The li elements were overlapping the buttons. So give overflow: hidden to the ul and they get hidden properly without affecting the rest.
CSS
.hide h3 {
padding: 2px 0 2px 10px;
width: 97%;
background: rgba(171,167,242,0.75);
border-radius: 5px;
cursor: pointer;
position: relative;
}
Add position:relative CSS property to your .hide h3 it will work fine.
I'm having an issue where a search bar & text within a nav are overflowing it's div container. I have tried using various things like word-break and overflow-hidden but nothing seems to be working for me. If you see below I have my HTML code along with the CSS. Any help appreciated!
I know there are many other similar questions but nothing answers mine.
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder="Enter Book Title"/>
</form>
</div>
<ul>
<li>
<a id="firstlink">
Home
</a>
</li>
<li>
<a id="secondlink">
Categories
</a>
</li>
<li>
<a id="thirdlink">
Bestsellers
</a>
</li>
<li>
<a id="fourthlink">
Contact
</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
CSS:
body{
background-color: #f1f6f6;
}
#sidebar{
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav{
margin: 2em 1em 1em 1em;
text-align: right;
color: #888888;
display: block;
}
#nav li{
list-style-type: none;
}
#searchbar{
padding-bottom: 0.5em;
text-align: center;
}
#firstlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
#secondlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
#thirdlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
#fourthlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
Example of Problem - http://i.imgur.com/TigP5MD.png & http://i.imgur.com/nj2A9ka.png
Give the <input> a width:
#searchbar input { max-width: 100%; }
The way to investigate things like this is to use your browser's DOM inspector tools. In this case, I was able to see (by selecting the <div> and <form> containers) that your block-level elements were constrained within the sidebar area, but the <input> itself wasn't. (In the images you linked, the container size is indicated by the blue highlight box.) It was therefore pretty obvious that the answer lay in sizing that element directly.
Here's a jsfiddle with that CSS change.
#Pointy is right, but you will always geht in trouble with using percentage width on #sidebar and the text on your input and links. At a certain point they will be always greater than the #sidebar and overlap.
You may want to look in http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
to avoid this.