I have a nav bar with a few images as the navigation buttons and when I zoom to 110% on chrome (only) the right image falls out of the nav bar. It is for a school project.
Here is the HTML for the nav bar as well as the CSS.
CSS
nav {
width: 960px;
height: 54px;
background-color: #191a19;
margin: auto;
}
.menu_button {
border: 2px solid #19242e;
}
.menu_button:hover {
background-color:#000;
opacity:0.5;
}
html
jsfiddle
<style>
nav {
width: 960px;
height: 54px;
background-color: #191a19;
margin: auto;
overflow:hidden;
}
.menu_button {
border: 2px solid #19242e;
}
.menu_button:hover {
background-color:#000;
opacity:0.5;
}
nav a{
display:block
width:233;
float:left;
height:50;
}
nav img{
width:233;
height:50;
}
</style>
<nav>
<a href="index.html">
<img class="menu_button" src="images/home_button.jpg" alt="home button">
</a>
<a href="overview.html">
<img class="menu_button" src="images/overview_button.jpg" alt="overview button">
</a>
<a href="tools.html">
<img class="menu_button" src="images/tools_button.jpg" alt="tools button">
</a>
<a href="tutorials.html">
<img class="menu_button" src="images/tutorials_button.jpg" alt="tutorials button">
</a>
</nav>
try this one dude, please vote for my answer so that i can help you again in the future. thanks
You should change either the width of your nav css element to a higher number (965px) or lower your .menu_button class' border to 1px;
Hope it helps.
Related
I'm working on a webpage to get cover photos from eBooks next to each other. Under each photo there are two buttons. see picture.
I used one div as a container, then I used <li> because I will have a lot more books. This page is on a fluid website.
<div id="ebooks_container">
<li>
<div id="ebook_single"><img src="cover1.jpg">
<div id="download_btn">
DOWNLOAD
</div>
<div id="review_btn"><a class="inline" href="#data2">REVIEW</a>
</div>
</div>
</li>
I can't get the buttons under the image and when I copy this code and paste it under this the next eBook single div shows up under the first.
I want them next to each other.
Hope someone can help me. I know a little bit of CSS3 but I'm an amateur :)
This is what I am trying to do:
It looks like you are just starting out. I would try to find an online video resource to help you learn like lynda or treehouse. (am i allowed to plug these website names? I am not sponsored by either).
I have a rough layout of what you are looking for. This might help.
UPDATE: The reason this code is effecting your current code is because these styles are being applied to ALL of your 'UL', 'LI' tags. You need to make this 'UL' unique by adding a class to it. I update the code to show you want I mean.
HTML
<ul class="book_covers clearfix">
<li>
<div>Image Panel</div>
<a class="btn1" href="#">Button1</a>
<a class="btn2" href="#">Button2</a>
</li>
<li>
<div>Image Panel</div>
<a class="btn1" href="#">Button 1</a>
<a class="btn2" href="#">Button2</a>
</li>
</ul>
CSS
*{
box-sizing: border-box;
}
.clearfix:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.book_covers {
list-style-type: none;
width: 100%;
height: 500px;
background: #333;
padding: 0px;
margin: 0px;
}
.book_covers li {
width: 50%;
height: 100%;
background: yellow;
display:inline-block;
float:left;
border: 2px solid #000;
}
.book_covers li div{
width: 90%;
height: 70%;
padding:0px;
margin: 5%;
background: blue;
border:2px solid #000;
}
.book_covers li .btn1,
ul li .btn2{
width: 42.5%;
height: 22.5%;
padding: 0;
float: left;
border:2px solid #000;
text-decoration: none;
color: #fff;
text-align: center;
}
.book_covers li .btn1{
margin:0 2.5% 5% 5%;
background: orange;
}
.book_covers li .btn2{
margin:0 5% 5% 2.5%;
background: pink;
}
Here is the updated fiddle!
Your code might look something like:
HTML
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<style type='text/javascript'>
#import main.css;
</style>
</head>
<body>
<div id='cnt1'>
<img id='img1' src='cover1.jpg' />
<a href='eBooks_ENG/eBook1.epub' class='btns' id='dwn'>DOWNLOAD</a>
<a href='#data2' class='btns' id='rev'>REVIEW</a>
</div>
<div name='data2' id='data2'>Your data here</div>
</body>
</html>
main.css may look something like:
#cnt1{
height:320px; width:300px; position:relative;
}
#img1{
display:block; height:300px; width:300px;
}
.btns{
display:block; height:20px; width:150px; text-align:center; float:left;
}
not tested but should work
<style>
ul{
list-style-type: none;
}
ul li{
border:5px solid #ccc;
background:#ccc;
width:260px;
height:400px;
margin-right:4px;
float:left;
}
li div{
width: 100%;
height:90%;
background:#dedede;
}
li span{
display: inline-block;
width: 40%;
height: 5%;
background:#fff;
padding:8px;
border:5px solid #ccc;
float:left;
}
</style>
<ul>
<li>
<div>image</div>
<span>Download</span>
<span>Review</span>
</li>
<li>
<div>image</div>
<span>Download</span>
<span>Review</span>
</li>
</ul>
#magnetwd
Thanks for looking into my problem.
I uploaded a duplicate site, this is the page [link] (http://hoddenbagh.nl/test_bibleopen/subjects_eBooks.html)
The NAV bar is not good anymore.
And the shadow Gif under the photo neither.
Probably that all has to do with the new CSS.
To compare, this is the original site. NAV bar and photo shadow are good. [link] (http://hoddenbagh.nl/bibleopen/index.html)
P.S. I didn't do much on styling yet and the buttons are still basic.
I'm making a basic navigation bar that consists of inline links all containing text and some also containing images. When an image is within the link, it moves the link element background (it does not move the link text apparently). The background moves more if the image is set to a larger size. I want all the elements to be exactly lined up.
Here is an image of the problem
Here is the relevant HTML:
<!--navigation bar-->
<div id="nav">
<a class="navLinks" href="">Resume</a>
<a class="navLinks" href="mylinkedinprofileURL">
<img class="logo" id="logo_linkedin" src="images/logoLinkedin.png">LinkedIn</a>
<a class="navLinks" href="wordpress">
<img class="logo" id="logo_wordpress" src="images/logoWordpress.png">WordPress</a>
<a class="navLinks" href="travels">Travels</a>
</div>
And here is the relevant CSS:
#nav {
position: relative;
top: 10px;
text-align: center;
}
.navLinks {
border-radius: 3px;
text-decoration: none;
color:white;
text-align: center;
width:110px;
height:20px;
padding:15px;
background-color: #353841;
display:inline-block;
}
.logo {
height:20px;
position:relative;
right:10px;
}
I'm very new to web development, so if there is a much better or more elegant way to be doing this, please let me know!
Add vertical-align:top to the tabs.
.navLinks {
vertical-align:top;
}
See DEMO here.
I'm building a simple dropdown menu for an avatar. The problem I'm having is that I want the dropdown menu to cover a portion of the avatar's border, so it looks more seamless. Here's what I mean.
Before
After
I probably built my HTML/CSS incorrectly, but I tried adding z-indexes, but it never changed anything. I'm basically trying to make the dropdown menu go behind the avatar button, and set the avatar's bottom border as none, so it looks seamless.
Any ideas what I could do differently?
HTML
<div class="user">
<div class="avatar">
<img src="<?php echo base_url(); ?>assets/img/avatars/don.jpg" class="image">
<img src="<?php echo base_url(); ?>assets/img/header-arrow-inactive.png" class="arrow">
<div class="dropdown">
<div class="wrap">
<p>Test</p>
</div>
</div>
</div>
</div>
CSS
header .user { position:relative; width:37%; padding:0 10px 0 0; height:100%; float:left; text-align:right; }
header .avatar { position:relative; display:inline-block; width:70px; height:50px; margin:19px 0 0 0; text-align:left; vertical-align:middle; border:1px solid transparent; }
header .avatar img.image { vertical-align:-30px; margin:0 5px 0 10px; }
header .avatar img.arrow { vertical-align:-18px; }
header .avatar:hover { background:#fff; border:1px solid #dcdcdc; border-bottom:none; }
header .avatar:hover .dropdown { display:block; }
header .avatar .dropdown { position:absolute; top:50px; left:-231px; display:none; width:300px; height:200px; background:#fff; border:1px solid #dcdcdc; }
header .avatar .dropdown .wrap { padding:20px; }
header .avatar .dropdown p { margin:0; }
the HTML should look like this:
<div class="user">
<div class="avatar">
<img src="<?php echo base_url(); ?>assets/img/avatars/don.jpg" class="image">
<img src="<?php echo base_url(); ?>assets/img/header-arrow-inactive.png" class="arrow">
</div>
<div class="dropdown">
<div class="wrap">
<p>Test</p>
</div>
</div>
</div>
CSS
.avatar{ border-bottom: 0; z-index: 10:}
.dropdown{z-index:9}
and fixed :)
Try border-bottom-style:none; on the 'avatar" and border-top-style:none; on your drop-down,or just a negative margin-top.
Put "avatar" inside "dropdown" and use a negative margin-top.
I want to align menu text at the bottom of image how to i achieve it?
Expected output:
Image Image Image Image
[menutext] [menutext][menutext] [menutext]
Actual output :
Image[menutext] Image[menutext] Image[menutext] Image[menutext]
my Css Code:
#vilaniHeader
{
margin: 0;
padding: 0;
height: 80px;
background-color: Black;
}
#vilaniHeader h1
{
padding-left: 15%;
font: Arial;
font-size: 30px;
color: #ffffff;
font-weight: bold;
float: left;
}
#vilaniHeader #menu
{
color: #ffffff;
font: Arial;
font-size: 18px;
font-weight: bold;
padding-top: 30px;
padding-left: 30%;
}
#vilaniHeader #menu ul
{
list-style: none;
margin: 0;
padding: 0;
padding-right: 300px;
padding-bottom: 300px;
}
#vilaniHeader #menu li
{
display: inline;
margin: 0 15px 0 15px;
float: none;
text-align:center;
}
#vilaniHeader #menu a
{
text-decoration: none;
color: #ffffff;
}
#vilaniHeader #menu .menuHome
{
color: red;
clear:both;
padding-top:50px;
background-image:url:("Styles/menuHome.png") ;
vertical-align:text-top;
}
and My HTML code
<div id="vilaniHeader">
<h1>
Comany name
</h1>
<div id="menu">
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li><a href="About.aspx">Car</li>
<li><a href="About.aspx">Mobile</li>
<li><a href="About.aspx">OldThings</li>
<li><a href="About.aspx">Matrimoni</li>
</ul>
</div>
</div>
I want menu text should be align at the bottom of the image plese help me to do that.
I came up with this solution building upon the answer here from tejash. My answer validates and is search engine friendly.
I prefered to use links within a div but I imagine this will work with an ul
I use a background image that does not show if CSS is disabled
I use a span set displayed as block because a div inside an a tag does not validate
I use a class to place the image but use ids if you want different pics for each link
Change the width + heights to suit your needs
HTML
<div id="nav">
<span class="image"></span><span>About Us</span>
<span class="image"></span><span>Investors</span>
</div>
CSS
#nav a {
display:block;
float: left;
width:100px;
}
.image {
display:block;
background: url("myimage.jpg") no-repeat scroll center center transparent;
height:40px;
width:100px;
}
Make the img a block element so it takes the full width / line-breaks afterwards.
#menu li { display:block; }
That’s all.
I would suggest add some wrapper on text and make image and wrapper both display:block;
You can use span tag as an wrapper for text.
HTML
<ul>
<li><a><img src="Styles/menuHome.png" /><span>Home</span></a></li>
</ul>
CSS
li img, li span
{
display:block;
}
If you want your text to overlay your image, but at the bottom, you should try to play around with the line-height property. That will cause your text to move down, so it will be in the center of it's line.
I have two solutions for you. style1 works for items with text smaller than the image. style2 works for items with text wider than the image. Easiest is to make sure that the images are always wider or smaller than the text, so that you need only one style.
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
#menu .style1 img, #menu .style2 span {
overflow:hidden
}
#menu .style1 span, #menu .style2 img {
display:block
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li class="style1"><img src="Styles/menuHome.png" width="10" alt="" /> <span>Home</span></li>
<li class="style2"><img src="Styles/menuHome.png" width="100" alt="" /> <span>Car</span></li>
</ul>
</div>
I'm not a span-fan but it seems like you can't do it without here.
BTW, why don't you just add a br?
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li><img src="Styles/menuHome.png" width="10" alt="" /><br />Home</li>
<li><img src="Styles/menuHome.png" width="100" alt="" /><br />Car</li>
</ul>
</div>
I guess that's the most easy and reliable solution.
You can do this way, obviously replacing the image sample I used. For the link to work, you can use a jQuery click event on LI, so it searches for the link inside the clicked LI and then opens the desired link.
http://jsfiddle.net/WcePK/
HTML
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Car</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Mobile</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">OldThings</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Matrimoni</li>
</ul>
CSS
LI {
float: left;
margin: 5px;
padding: 50px 10px 10px;
min-width: 100px;
background-repeat: no-repeat;
background-position: center 10px;
background-color: #366D93;
text-align: center;
cursor: pointer
}
Please see http://jsfiddle.net/mithun/nuF2Q/1/
I've the HTML structure
<div id='slider'>
<ul>
<li>
<a class='pride' href="i1.html"> Item 1 </a>
<div class='info'>
<a class='roar' href="i1.html"> Description 2 </a>
</div>
</li>
<li>
<a class='pride' href="i2.html"> Item 2 </a>
<div class='info'>
<a class='roar' href="i1.html"> Description 1 </a>
</div>
</li>
<li>
<a class='pride' href="i3.html"> Item 3 </a>
<div class='info'>
<a class='roar' href="i1.html"> Description 3 </a>
</div>
</li>
<li>
<a class='pride' href="i4.html"> Item 4 </a>
<div class='info'>
<a class='roar' href="i1.html"> Description 4 </a>
</div>
</li>
</ul>
<div>
and CSS
#slider {
width : 400px;
height: 100px;
border: 1px solid #bcd;
background-color: #def;
position:relative;
z-index:0 !important;
}
#slider ul{
margin:0px;
padding:0px;
list-style:none;
}
#slider ul li {
margin:0px;
padding:0px
list-style:none;
width:100px;
z-index:10;
}
#slider ul li a.pride {
color: #333;
display: block;
text-decoration: none;
padding: 2px 0px 2px 10px;
}
#slider ul li.active a.pride,
#slider ul li:hover a.pride {
background-color: #ffff7c;
}
#slider ul li div.info {
background-color: #9ab;
border: 1px solid #ccc;
display:none;
position:absolute;
right: 0;
top:0;
z-index:-5;
}
#slider ul li.active div.info,
#slider ul li:hover div.info {
display:block;
}
#slider ul li div.info a.roar{
color: #0a0;
display:block;
width: 280px;
height: 80px;
padding: 10px 10px 10px 30px;
text-decoration: none;
z-index:10;
}
Issue is links inside the Div's are not click able, actually they are behind the UL
-- update
It happens only in Webkit/Gecko browsers
Opera and IE are displaying it correctly
This fixes it for me in Firefox and Chrome:
<div id='slider'>
<ul style="width:100px">
100px might not be is the optimum width.
here
http://jsfiddle.net/nuF2Q/4/
what you had done wrong was settting the z-index to -5; for div.info which made it get under the ul element which prevented you from clicking the links...
so what i did was change it to 5 and then set the a.prid links position to relative and add a index of 6 so it would overlapp the div.info element
z-index only has an effect when the element has the 'position' property set--so try putting 'position: relative' on the elements with z-index that don't already have the property.
In addition, elements naturally stack in the order in which they appear in the source. When elements overlap, the once that appear later will be stacked on top of the ones that appear earlier. So if you remove the z-index property from everything on the stylesheet, you should also have the desired result.