I currently have a top menu consisting of four div's: Home, Menu, Order, and Review. I have set it so that each div extends 100px when hovered over. Everything worked fine at this point. I then added some words and an image within each of the div's extended area. Now whenever I hover over any of the div's, it extends, but it carry's the rest of the div's with it. I want it so that only the div I am hovering over will extend and the rest will remain where they were. Here's the html:
<div class="TopNav">
<a href="file:///C:/Users/Justin/SkyDrive/Documents/Websites/Snack%20Shack%202/SS2.html"><div class="Home">
<h4>Home</h4> <br><br>
<p>Learn about us!</p>
<img class="Hamburger" src="http://i.imgur.com/0htcpM2.png" title="source: imgur.com" />
</div></a>
<a href="file:///C:/Users/Justin/SkyDrive/Documents/Websites/Snack%20Shack%202/SS2%20Menu.html"><div class="Menu">
<h4>Menu</h4>
</div></a>
<a href="file:///C:/Users/Justin/SkyDrive/Documents/Websites/Snack%20Shack%202/SS2%20Order.html"><div class="Order">
<h4>Order</h4>
</div></a>
<a href="file:///C:/Users/Justin/SkyDrive/Documents/Websites/Snack%20Shack%202/SS2%20Review.html"><div class="Review">
<h4>Review</h4>
</div></a>
</div>
Here's the css:
.Home:hover, .Menu:hover, .Order:hover, .Review:hover{
height: 150px;
}
.Home, .Menu, .Order, .Review {
height:50px;
width:100px;
display:inline-block;
position:relative;
z-index:1;
transition: height .5s ease-in-out;
-webkit-transition: height .5s ease-in-out;
overflow:hidden;
}
.Home p, .Menu p, .Order p, .Review p {
text-align:right;
color:white;
position:relative;
right:2px;
bottom:5px;
}
.Home h4, .Menu h4, .Order h4, .Review h4 {
text-align:center;
color:white;
position:relative;
bottom:5px;
font-family:Garamond;
}
.Hamburger {
height:40px;
width:auto;
position:relative;
left:50px;
top:10px;
display:inline-block;
}
Does anyone know how to fix this?
add vertical-align: top; to .Home, .Menu, .Order, .Review
inline-block element aligns to the bottom of the highest element by taking vertical-align: baseline; as default but you can align it to the top by adding vertical-align:top
demo - http://jsfiddle.net/hsj2ebc2/1/
Related
so i have a situation where i want text to appear over an image using visibility:hidden/visible and also playing with opacity. i cannot do it for some reason. Note that this is in a list because i have other images displayed in the same list but here i am only showing one. below is the html:
<ul>
<li>
<a class="pic" href="#">
<img alt="" src="/servlet/servlet.FileDownload?file=00PU00000096kH2MAI" style="width: 300px; height: 160px;" />
</a>
<div class="hovertext"> my hover text</div>
</li>
</ul>
and the css is here:
#gallery ul{
margin:0;
padding:0;
list-style:none;
}
#gallery li{
display:block;
float:left;
width:310px;
height:170px;
margin:0 15px 15px 0;
}
#gallery li a{
display:block;
float:left;
width:300px;
height:160px;
margin:0;
padding:4px;
}
#gallery li a:hover {
color:#FFFFFF;
opacity:0.6;
background-color:#666666;
}
#gallery li a:hover .hovertext{
visibility:visible;
}
.hovertext{ width:300px; height:85px;
background-color:#666666;
opacity:0;
visibility:hidden;
display:block;
text-align:justify;
color:#000000; font-size:20px;
}
all this does is allow me to see that the image is opaque and i can see that the div is in the background but i just cannot bring it forward to display in front of the opaque text. Any help would be greatly appreciated.
Look at the following code.
#gallery li a:hover .hovertext{
visibility:visible;
}
The above code will look the child element of hovertext when you hover the link. In your case, it is siblings element. So update your CSS like below.
#gallery li a:hover + .hovertext{
visibility:visible;
}
Also you have added opacity:0 for hovertext class. I think there is no need for that one. Because already you have visibility:hidden for the same class. So update your CSS like below.
.hovertext{ width:300px; height:85px;
background-color:#666666;
visibility:hidden;
display:block;
text-align:justify;
color:#000000; font-size:20px;
}
DEMO
I'm trying to create something that looks like this:
so far I have: http://jsfiddle.net/ePse6/
Without using something like: margin-top:-25px;, how can I position the Edit/Delete links to be on the right of the title (the part that says "iPhone" or "Android") and have both the title and links halfway between the borders?
Thanks!
just like most of answers, here i come with text-align:right and float:left .
I reduced code to minimal and plain CSS for your actual structure and to make it clear to you : http://jsfiddle.net/ePse6/7/
ul , a { /* basic reset we need */
padding:0;
margin:0;
color:gray;
text-decoration:none;
}
.mini > ul > li {
display:block;/* reset from list-item */
border-bottom:solid;
text-align:right;
overflow:hidden;/* wraps floatting element within */
}
.mini > ul > li> h3 {
float:left;
margin:0;
}
.mini > ul > li ul,
.mini > ul > li li {
display:inline-block;
}
Why not use something simple and really handy?
I have removed all of your messy code, and have created a new fiddle for you.
http://jsfiddle.net/afzaal_ahmad_zeeshan/ePse6/4/
I have used just a few lines of code, I have used a div and inside that, I have used 2 paragraphs to seperate each of them. Then inside that I used span element to seperate the right and left floating elements.
Using CSS I selected the classes and then styled them to get the desired input!
Here is the code:
<div>
<p>
<span class="left">Android</span><span class="right">Delete Edit</span>
</p>
<p>
<span class="left">iPhone</span><span class="right">Delete Edit</span>
</p>
</div>
CSS is as:
p {
border: 1px solid #333; // border that you wanted!
padding: 20px; // padding all around the element
padding-bottom: 40px; // padding at the bottom of the element
}
.left {
float: left; // making the elements float at the left
}
.right {
float: right; // floating elements at the right side
}
You can go to the fiddle page, and check for the design of the layout now. It was a simple thing. Hope its what you wanted.
This is without the lists. Just some CSS to do the trick: http://jsfiddle.net/Lg96p/
CSS:
.wrap{
width:100%;
border-bottom:solid 1px #666666;
margin-bottom:20px;
padding-bottom:10px;
}
.title{
font:bold 16px arial;
}
.fl{
float:left;
}
.fr{
float:right;
}
.lnk{
color:#6c6c6c;
display:inline-block;
text-align:right;
margin:0 10px 0 0;
text-decoration:none;
font:normal 14px arial;
}
HTML:
<div class="wrap fl">
<div class="title fl">iPhone</div>
<div class="fr"><a class="lnk" href="">Edit</a><a class="lnk" href="">Delete</a></div>
</div>
<div class="wrap fl">
<div class="title fl">Android</div>
<div class="fr"><a class="lnk" href="">Edit</a><a class="lnk" href="">Delete</a></div>
</div>
You should create two columns that fill the parent div. Make them both float:left; and for the right column you can align the text to the right text-align:right; or put two divs in it with float:right; for edit and delete.
Here is my fiddle: http://jsfiddle.net/ePse6/5/
Whatever you put into the columns or how to format it is up to you. But from here you have 2 columns independently next to each other.
If you want multiples of these stacked on top of each other i would change the container to a class and just add multiple of these containers with the columns to keep it tidy and readable. Like in this fiddle: http://jsfiddle.net/ePse6/6/
HTML:
<div class='container'>
<div class='leftCollumn'>
Iphone
</div>
<div class='rightCollumn'>
<a hreft="">Edit</a><a hreft="">Delete</a>
</div>
</div>
<div class='container'>
<div class='leftCollumn'>
Iphone
</div>
<div class='rightCollumn'>
<div class="button">Edit</div><div class="button">Delete</div>
</div>
</div>
CSS:
.container
{
width:600px;
margin:auto;
}
.leftCollumn
{
float:left;
width:400px;
background-color:#999;
}
.rightCollumn
{
float:left;
width:100px;
text-align:right;
background-color:#CCC;
}
.rightCollumn a
{
margin-left:10px;
margin-right:5px;
}
.button
{
margin-left:10px;
margin-right:5px;
background-color:#000;
color:#FFF;
float:right;
}
I'm trying to make a table where the final column of the table fills the rest of the table.
I'm using divs to design the table and using the borders of the div to make the borders between each element, but if you look at my link http://subjectplanner.co.uk/Me/test.php, you can see that the last elements don't fill the end of the table resulting in the border falling short.
CSS
.Larger{
font-size: 125%;
}
.Smaller{
font-size: 85%;
}
.Block{
display: block;
}
.TodayList{
font-family:'Proxima Nova',Helvetica,Arial,sans-serif;
display:table;
width:100%;
margin:0 0 1em 0;
-webkit-border-radius:15px;
border-radius:15px;
overflow:hidden;
border:0 none;
border-collapse:collapse;
background-color:#247B2B;
font-size:1.5em;
position:relative;
padding:0;
}
.TodayItem{
position:relative;
display:table-row;
border-collapse:collapse;
overflow:hidden;
color:#70BB75;
-webkit-transition:background-color 0.2s linear;
-moz-transition:background-color 0.2s linear;
-o-transition:background-color 0.2s linear;
-ms-transition:background-color 0.2s linear;
transition:background-color 0.2s linear;
background-color:rgba(0,0,0,0.001);
}
.TodayItem:hover{
background-color:#95FA9D;
}
.TodayItem a{
color:#fff;
}
.TodayItem .smaller,.TodayItem .TodayInfo{
color:#fff;
}
.TodayItemWrapper{
display:block;
position:relative;
overflow:hidden;
height:100%;
width:100%;
}
.TodayIcon,.TodayTitle,.TodayInfo{
display:table-cell;
border-collapse:collapse;
border:1px solid #31AE33;
border-width:0 1px 1px 0;
padding:2em;
margin:0;
font-size:100%;
min-height:120px;
font-weight:normal;
}
.TodayItem:last-of-type .TodayIcon,.TodayItem:last-of-type .TodayTitle,.TodayItem:last-of-type .TodayInfo{
border-bottom-width:0;
}
.TodayIcon{
width:130px;
vertical-align:middle;
text-align:center;
}
.TodayTitle{
width:260px;
}
.TodayInfo{
border-right-width:0;
}
.TodayTitle a{
text-decoration:none;
}
.TodayTitle a:hover{
text-decoration:underline;
}
.TodayLink{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.001);
vertical-align:top;
z-index:2;
}
HTML
<ul class="TodayList">
<li class="TodayItem">
<div class="TodayItemWrapper">
<span class="TodayIcon"></span>
<h3 class="TodayTitle">
Monday<span class="TodayLink"></span> <span class="Block Smaller">You've 3 lessons today</span>
</h3>
<div class="TodayInfo">
<ul>
<li>9 - 10: Maths</li>
<li>10 - 11: English</li>
<li>12 - 13: ICT</li>
</ul>
</div>
</div>
</li>
<li class="TodayItem">
<div class="TodayItemWrapper">
<span class="TodayIcon"></span>
<h3 class="TodayTitle">
Tuesday<span class="TodayLink"></span> <span class="Block Smaller">You've 2 lessons on this day</span>
</h3>
<div class="TodayInfo">
<ul>
<li>10 - 11: Art</li>
<li>11 - 13: Double Business</li>
</ul>
</div>
</div>
</li>
</ul>
Here's a fiddle if you want it http://jsfiddle.net/tR7WX/
Simply add this rule to your style:
ul.TodayList>li:last-child {
width:100%;
}
Btw, you're not obliged to have a class for every level of tag. You can user CSS node rules to select specific tag and apply style. Should you go for it, you get a simpler (and lighter) HTML file.
Is there a specific reason why you're not using a table for this? I know tables are often seen as old school, but you've got table data here and scenario that requires table logic. I think to use DIVs and CSS to replicate tables would be complex and difficult to change/maintain and make it quite fragile.
Another possible solution would be to not use table-cell at all and instead use DIVs with percentage widths, so they always fill the total width. You could then have a container inside each DIV with display:table to vertically centre the content.
Sorry if I've misunderstood anything.
Based on this thread, I tried to build myself a css/html only accordion menu. When I took what I learned from the above, and applied it to my divs, it worked perfectly. I also needed to add a submenu that acted the same to the first menu item, portfolio. I attempted it with no success. It was explained to me that the reason was that I was using the same target.
(To begin, I am novice when it comes to a lot of these things so while some questions I have might seem fundamental it is because I am learning as I go.)
Based on the feedback, I attempted to make a new version creating 2 accordion classes. While that did not break the functionality I wanted, it still had the problem of opening both of the submenus. When you click PORTFOLIO, BRANDING should appear. When you click BRANDING, CONTENT should appear. Instead when you click PORTFOLIO, BRANDING and CONTENT appear.
It was indicated that this is because the first accordion function includes all child objects. While I've touched on those briefly in the js I'm learning I didn't know how to work with them in css other than the :not(x) I've come across but that did not seem to resolve it in any attempt though I could be doing it wrong.
jsfiddle
Here is the css to the above jsfiddle link:
a {
color:inherit;
text-decoration:none;
font-style:normal;
}
/* ---------- SECTION ---------- */
.accordion p + div :not(.accordion2) {
height: 0;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
}
.accordion :target p + div :not(.accordion2) {
height:auto;
}
.accordion .section.large:target p + div :not(.accordion2) {
overflow: auto;
}
.section p {
color:#FFFfff;
text-align:right;
min-width:200px;
background-color:#2d2d2d;
font-size:12px;
font-size-adjust:inherit;
padding:0px;
margin:0px;
border-top:#161616 1px solid;
text-decoration:none;
text-transform:uppercase;
text-decoration:none;
color:#ffffff;
}
.section p a {
display:block;
text-align:right;
padding-right:10px;
padding-left:10px;
padding-top:3px;
padding-bottom:3px;
min-width:180px;
}
.section p a:hover {
background-color:#c569f2;
}
/* ---------- SubSection ---------- */
.accordion2 p + div {
height: 0;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
}
.accordion2 :target p + div {
height:auto;
}
.accordion2 .subsection.large:target p + div {
overflow: auto;
}
.subsection p {
color:#FFFfff;
text-align:right;
min-width:200px;
background-color:#3d3d3d;
font-size:12px;
font-size-adjust:inherit;
padding:0px;
margin:0px;
border-top:#161616 1px solid;
text-decoration:none;
text-transform:uppercase;
text-decoration:none;
color:#ffffff;
}
.subsection p a {
display:block;
text-align:right;
padding-right:10px;
padding-left:10px;
padding-top:3px;
padding-bottom:3px;
min-width:180px;
}
.subsection p a:hover {
background-color:#c39bda;
}
/* ---------- Sidebar ---------- */
#sidebar {
float: right;
right: 0px;
background-color:#161616;
position:fixed;
width:20%;
min-height: 100%;
min-width: 200px;
top:0px;
}
#side-menu {
right: 0px;
top:0px;
position:absolute;
height:75%;
width:100%;
min-width: 200px;
bottom:0px;
margin-bottom:0px;
min-height:600px;
}
Here is the html:
<div id="sidebar">
<div id="side-menu" class="accordion">
<div id="menu-portfolio" class="section">
<p> Portfolio
</p>
<div class="accordion2">
<div id="submenu-branding" class="subsection">
<p> Branding
</p>
<div>
<p> Content
</p>
</div>
</div>
</div>
</div>
<div id="menu-about" class="section">
<p> About
</p>
<div>
<p>Resume
</p>
</div>
</div>
<div id="menu-contact" class="section">
<p> Contact
</p>
<div>
<p>Content
</p>
<p>Content2
</p>
<p>Content3
</p>
</div>
</div>
</div>
</div>
Can anyone assist me in understanding what I am doing wrong?
It doesn't matter if you use divs or lists (though most tutorials will use lists). Its mostly referencing the right item. Looking briefly at the code, you are not specifying to not show the sub sub menu.
I've added a new class to your first content and what the target does in css - showing only the div right after:
HTML:
<div class="subsub"> <!--added a new class. I have never used :not, but it seems that it does't allow nesting inside :not selectors -->
<p>Content</p>
</div>
CSS:
.accordion :target p + div :not(.subsub) {
height:auto;
}
You have to reiterate what you have done to show the sub menu when clicking on portfolio onto the sub sub menu when clicking on branding.
A quick fiddle: http://jsfiddle.net/jennift/m4ADf/2/
I haven't looked into your code, but like you've said "it includes all child objects". You can prevent this by using the direct descendant selector ">". It will only get the direct child elements, e.g.
ul > li {
}
will only style the li element and no other li elements inside it.
i think that i have forgotten my css but i have a problem
here is my code
<div class="footer_container">
<div class="website_logo_to_footerexpand"></div>
<div class="info_cont">
<div class="info_slide_arrow"></div><!--arrow-->
<div class="info_slide">
<div class="level1">© Datacardz.Inc <?php echo date('Y'); ?></div>
<div class="level2">
About
Terms
Company
Blog
</div>
</div>
</div>
the problem is that when i use the css code:- website_logo_to_footerexpand:hover ~ .info_cont it displays the div but it vanishes as soon as i nove the mouse to the info_cont div
and the code .website_logo_to_footer_expand:hover > .info_cont does not work at all
my css ----
.website_logo_to_footerexpand{
float:left;
cursor:pointer;
background-image:url(data_cardz_imagesprites.png);
background-position:0 0;
width:60px;
height:60px;
}
.info_cont{
float:left;
height:60px;
opacity:0;
visibility:hidden;
}
.website_logo_to_footerexpand:hover ~ .info_cont{
visibility:visible;
opacity:1;
}
http://jsfiddle.net/K4Mp4/1/
Check the demo please.
.website_logo_to_footerexpand{
float:left;
cursor:pointer;
background-image:url(data_cardz_imagesprites.png);
background-position:0 0;
width:60px;
height:60px;
}
.info_cont{
float:left;
height:60px;
opacity:0;
visibility:hidden;
}
.footer_container:hover > .info_cont{
visibility:visible;
opacity:1;
}
you should be putting the hover on .footer_container not .website_logo_to_footer_expand that class is to the left so naturally when you scroll out of it the info will disappear
.footer_container:hover > .info_cont
you also need to add a clearfix because you are floating elements inside .footer_container
you should use the display:block; for floated child divs and display:inline-block; for the parent div then the hovering effect will work