I have been attempting to make my menu responsive. www.treytrumble.com
It seems that because it is fixed, it will not scale properly when viewed on a device smaller than a laptop. What can I do to make the menu appear like this one when the screen is scaled to smaller than 1,150px wide? http://www.adtile.me
HTML
<div class="contactcontainer">
<div class="contactmenu">Trey Trumble<br /><br/>804-513-7704 <br/><br/>
trey#treytrumble.com<br/><br/>Resume
</div><!-- end .contactmenu -->
</div><!-- end .contactcontainer -->
<div class="container">
<div class="sidebar1">
<table width="120" height="104" border="0">
<tr>
<th scope="col"></th>
</tr>
</table>
<ul class="nav">
<li><img src="images/logo.jpg" width="180"/></li>
<li><a id="webbutton" class="nav">WEB DESIGN</a></li>
<li><a id="printbutton" class="nav">PRINT DESIGN</a></li>
<li><a span class="contactbutton">CONTACT & RESUME</span></a></li></ul>
</div><!-- end .sidebar1 -->
CSS
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
position:fixed;
}
ul.nav li {
border-bottom: 1px solid #666;
letter-spacing: 2px;
font-family: "Helvetica", Arial, sans-serif;
cursor: pointer;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background: #fff;
inline-box-align:initial;
color:#F60;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background:#F60;
color: #FFF;
font-family: "Helvetica", Arial, sans-serif;
letter-spacing: 2px;
font-size: 9px;
}
This is quite simple to accomplish, but it's quite a bit hard to explain. You have to use media queries to accomplish this, maybe even JavaScript.
Media Queries
Chris Coyier has a very interesting article in CSS-TRICKS that explains various concepts of responsive menus here: http://css-tricks.com/responsive-menu-concepts/
As for the main question, you can definitely make that menu responsive, though, I wouldn't suggest you put the exact same layout you have for desktop for mobile, because that would be a problem since the screen is too small, I would suggest making it go all the way to the top like a normal menu, being responsive, you can also fix it to the top and adding a padding-top to the remaining elements so that they don't go below the menu.
If you decide that the menu should be always on top, make sure you add a z-index property to the nav or div element so that no other goes across it too.
FlexBox
There is another approach you can take as well, but depending on what support you're giving to certain browsers I would suggest or not using Flexbox. If you display your navigation as display: flex and you tweak it CSS wise, you can achieve beautiful combinations, but again, remember this is a slightly new CSS3 property, and mainly Internet Explorer has just recently began supporting it.
More about Flexbox can be found here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Responsive Design
If you're new to responsive/adaptive design, then sir you have a lot of work to do, but, luckily for you, there are today tons of free and/or paid resources that will give you a pretty good idea of what to do.
I found this article on Team Tree House very useful: http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
You can go on from there and start looking for other resources, some of them mentioned on this answer:
Media Queries
Flexbox
Other Tips
If you want to make your menu responsive, you also need to make your site responsive, make sure you have all these:
Responsive viewport tag
HTML5 doctype
A plan (grid system, media queries, flexbox, etc)
Fallbacks for unsupported content
Of course yes,
use media queries to choose the resolution you want it to snap to.
Define your classes within the query and apply it around the menu.
Related
I'm trying to style my navbar and work on its aesthetics but I think I'm missing a trick. The darken which happens on the hover is too big for my liking, but the only size change I can do is an overall padding which doesn't allow fine tuning.
I've spent the last 2 hours looking for a solution and I'm stumped. I bet it's something simple and I'm just not seeing it.
#navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
height: 6%;
transition: top 0.3s;
z-index: 2;
}
#navbar a {
float: left;
display: block;
color: white;
margin: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
border-radius: 30px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
height: 6%;
border: 1px inset #000000;
}
<div id="navbar">
<div class=buttonContainer>
<div class="homeBorder">
Home </div>
Skills
Projects
About
Contact
</div>
</div>
Right now, your code does not show any "darkening" but I hope I still understood your question correctly: You want the background of the navbar links to be of a certain color on hover but the area is too big, especially in height?
You are right, your issue is caused by the 10px-padding that you have set on your link elements. I would recommend you to reduce the padding to maybe 5px to achieve the height you would like to see on hover (same padding for normal and hover, otherwise the links "jump" on hover). You could then wrap all links in an additional div to make universal changes or you could simply work with margins instead. I would also recommend not setting a specific height on the navbar but letting the elements inside determine its height by using padding and margin.
What always helps me when dealing with spacing in CSS, is adding differently colored backgrounds to ALL of the elements involved as to understand their behavior and to test my code.
In case there is a specific reason why you cannot reduce the padding, then please edit your question and make your requirements clearer.
Btw, there is one fatal error in your code:
<div class=buttonContainer>
should be:
<div class="buttonContainer">
(quotes!!)
...and ideally it should be:
<div class="button-container">
as it's not best practise to use camel case in CSS as opposed to JS or other programming languages.
I am relatively new to HTML/CSS, and am finding a basic bug in a website that I am attempting to create.
I am using an external CSS file to style my website, and I use the following code as a general guideline for my HTML links.
a:link, a:visited{
background-color: #000000;
color: white;
padding: 14px 25px;
text-align: center;
font-size: 18px;
text-decoration: none;
display: inline-block;
}
a:active, a:hover{
background-color: rgb(46, 46, 46);
color: white;
}
After I link my styles.css file to my HTML file (via link), I want to have a standard logo at the top right corner of the screen, which when clicked, will bring the user to the home screen. However, I do not want to set a specific pixel size, rather, I want it to cover a specific percentage of the screen so the website would look natural on a phone and a computer (rather than being too big/small). I have attempted to do so below, and although the image is in the correct proportions I want it to be, I am still getting an issue when I hover over the label, there seems to be a border that lights up around the image (even though I don't want it to). Here is the code that I used to add the logo:
<a href="index.html" style="float:right; padding:0px 0px;">
<img src="images/test.jpg" alt="Testing Logo" style="width:35%; height:20%; border:0;">
</a>
I am pretty sure that adding the percentages to both the width and height is illegal, right? I'm also curious why this seems to work for the height, but not for the width, and if there is something flawed in doing so please let me know. Here is the output that this code will cause to my logo:
In the above image, I am not hovering over the image with my mouse. The logo is taking up more space than I would like and has a border.
The above image shows my logo when I am hovering over it with my mouse. Notice that the border around it changes color, and if you click in this area, then it will redirect it to the homepage (which is what I want it to do, but I want to minimize the clicking area to just the picture of the logo, not the space surrounding it, and I want to get rid of the border surrounding the logo).
there's a property in CSS called as an outline
a:link, a:visited{
background-color: #000000;
color: white;
padding: 14px 25px;
text-align: center;
font-size: 18px;
text-decoration: none;
display: inline-block;
outline: none;
}
this will remove your border which is highlighting when you hover over it
Your issue is not that clear.
It is best to show your live site or place your code on sites like CodePen or JSFiddle, so others can test to check the issue.
By the way, you can also post your code here as well.
You can try this, but please read what follows: :)
a:link, a:visited{
background-color: #000000;
color: white;
padding: 14px 25px;
text-align: center;
font-size: 18px;
text-decoration: none;
display: inline-block;
border: none; /* <-- add this */
}
a:active, a:hover{
background-color: rgb(46, 46, 46);
color: white;
}
From what I see: I suspect the border (and box-shadow ?) to come from a parent node. You can use the inspector of your browser and click on the border to identify the html tag we want and give him the medicine:
{
border: none;
box-shadow: none;
}
I am pretty sure that adding the percentages to both the width and height is illegal, right?
The SWAT won't come at your place, though we tend to avoid that directly in the HTML file.
More, it's better to not put style inside the HTML file itself, as it may override some rules written on your css files. If you don't know about CSS specificity, here is a good read.
Though it's ok on a CSS file. Myself I usually put max-width: 100% to the images, and I change the width and height of it's parent's div as needed.
I do not want to set a specific pixel size, rather, I want it to cover a specific percentage of the screen
This is perfect! Did you know about vw and media queries ?
I've almost got my website finished but am growing incredibly frustrated and not being able to get the vertical-align to work. Everywhere else, my content is where it should be, but for reasons unknown, these lists are appearing in the middle... meaning when the iframe is set to the desired size, my lists move to the middle of their td?
I've tried adding the vertical align option to the css of the links, created a div option for the entire area, adding it html etc, no luck anywhere? What am I doing wrong? :(
A.class2 {text-decoration: none; text-transform: uppercase; font-weight: bold; text-align: left; font-size: 16px;}
A.class2:link, A.class2:visited {color: #0fa616;}
A.class2:hover, A.class2:active {color: #0fa616;}
#sub li {list-style-type: square;}
Please bear in mind that I have a main ul menu above that I do not want affected in any code anyone manages to fix for me.
<center><h2>Amber w/Inclusions</h2></center><ul id="sub">
<li>Baltic</li>
<li>Copal</li>
</ul>
<center><h2>Dinosaurs/Reptiles</h2></center>
<ul id="sub">
<li>Pterosaur</li>
<li>Raptor</li>
<li>Spinosaurus</li>
</ul>
<center><h2>Trilobites</h2></center>
<ul id="sub">
<li>Cambrian age</li>
<li>Devonian age</li>
<li>Ordovician age</li>
</ul>
You can see what I mean on the page http://www.dinodeals.co.uk/fossils.html
The table itself is only for aid during design, it won't be visible on the complete design. I would love a little divider also, say a green line to the right of the entire sub category menu I'm trying to set to the top. But had no luck implimenting that either after reading up how. I'm not sure the border-right css is usable anymore?
you can try this, I just inspected the page and found you are running some type of padding on your td element (most likely caused by it aligning to the middle).
Try this little snippet:
td{
padding-top: 0px;
vertical-align: top;
}
This aligned the table to the top on my screen.
EDIT:
As per your request for border on the right of it (I didn't see that far into the question).
td{
vertical-align: top;
border-right: 3px solid rgb(15, 166, 22);
padding: 10px 0;
}
I have created a simple navigation bar using html and css. The issue with it is when zoomed in, the structure changes as not all the links can fit in one line. Here is the jsfiddle: http://jsfiddle.net/HamishT/b3Lw4/
Here is the code in case you are unable to access jsfiddle:
<div id="navBar">
<ul>
<li class="nav">HOME</li>
<li class="nav">PRODUCTS</li>
<li class="nav">SERVICES</li>
<li class="nav">CONTACT US</li>
<li class="nav" id="order">ORDER</li>
</ul>
</div>
#navBar {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#5a5a5a;
font-size:12px;
font-weight:bold;
background-color:#eeeeee;
padding:0.1em;
box-shadow: 5px 5px 5px #888888;
}
.nav {
list-style:none;
display:inline;
border-left:3px solid;
}
.nav a {
text-decoration:none;
color:inherit;
padding: 0 20px 5px 20px;
}
.nav a:hover{
border-bottom:3px solid;
}
#order {
float:right;
color:#E65C00;
}
I have tried various ways, none to any success. One way I am wondering about is if I can edit it so that it will flow off the page if it doesn't fit (so only part of the width of the navbar is seen at one time), but I can't seem to work my head around it. Another way I think would be to detect the screen width/zoom and change the structure completely if the available space is too small, but I am unsure if this is possible (I've looked into it, but have not found any that seem to work the way I've described.
Just in case it helps: one thing I have spotted is the floats may be preventing me from being able to fix this.
Are there any ways to fix this and if so, how? I don't mind how it works (eg. flows off the screen or zooms the whole navbar out) so long as it does work. I've been stuck on this for three days now (I'm still new to it all) so any help whatsoever would be greatly appreciated.
The problem is caused because float is considering a 100% width for the navbar. Add a width in pixels to fix the size of the navbar, like this
#navBar {
width: 550px;
}
Although this will cause elements to flow out of current window (and hence bringing the scrollbar). Your best bet in such a case is make stuff responsive and create different styles for different widths.
When you zoom into the page, the size of the viewport is decreasing.
That means you can use media queries to create proper breakpoints:
#media screen and (max-width:600px) {
#navBar {
font-size:5px;
}
}
The 600px mark works well in my test case. But you can't reproduce it via jsfiddle. 5px aren't too small since you're zoomed in. The best approach however would be using em values instead of px since they allow to change the reference font-size: body { font-size:0.9em; }. This will be inherited by any other element.
I have found a solution (it may not be of use to everyone who sees this, but is one alternative solution to the issue). I put the li element that floats right in a separate div so that when zoomed in it will not drop below the others or overlap. Instead the other li elements will drop down before they overlap, whilst still working properly.
From the HTML, the #order element (float right) is in a div before the other li elements put into a new div.
<div id="navBar">
<div>
<ul>
<li class="nav" id="order">ORDER</li>
</ul>
</div>
<div>
<ul>
<li class="nav">HOME</li>
<li class="nav">PRODUCTS</li>
<li class="nav">SERVICES</li>
<li class="nav">CONTACT US</li>
</ul>
</div>
</div>
Here's a working jsfiddle to show what I mean: http://jsfiddle.net/HamishT/3pd5Z/#base
Right now I am fairly happy with my navigation bar and it is centered how I would like it, however instead of the white background box ending at the end of the specified width, It is running the full length of the screen, as seen at www.rebeccahenrydesign.com/about.html
Does anyone know what I can to to give it a specified length.
Here is my html
<script type="text/javascript" src="csshorizontalmenu.js">
/***********************************************
* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy- vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>
<div class="horizontalcssmenu">
<ul id="cssmenu1">
<li>Home</li>
<li>Work
<ul>
<li>Print</li>
<li>Digital</li>
<li>Photography</li>
</ul>
</li>
<li><a href="about.html" >About</a></li>
<li><a href="contact.html" >Contact</a>
</li>
and here is the css
.horizontalcssmenu ul{
padding: 0;
list-style-type: none;
background:white;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline-block;
float: none;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 120px; /*Width of top level menu link items*/
padding: 2px 8px;
border: 1px white;
border-left-width: 0;
text-decoration: none;
background: white;
color: #f77bb1;
font: 20px Helvetica,sans-serif;
}
/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px white;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}
/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}
/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 160px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
background: white;
border-width: 0 1px 1px 1px;
}
.horizontalcssmenu ul li a:hover{
background: #f77bb1;
color:white;
}
.horizontalcssmenu ul li ul li a:hover{
background: #f77bb1;
}
.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url(menuarrow.gif) no-repeat center left;
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */
Please forgive me if the formatting of this post is incorrect (or if this is a stupid question). I have never coded anything before this and I have never posted on this site! Any feedback is appreciated. Thanks
Editing my answer as i look at the actual website... Also, you have some other errors that need to be corrected. Run your web page through this web site and correct the errors it indicates.
You have defined the class four times with the same name. This will not work. If you need to define four classes, they must all have different names.
http://validator.w3.org/
-----------Update-------
Okay, I fixed your problem. Here is the code, with my changes made as comments that you can delete. You should still run it through the validator, and fix problems.
The problem you asked about required setting a width and a margin in the div element. There are other things you should address, but this solves your main problem.
<!DOCTYPE html>
<html>
<head>
<!-- Declared character encoding --> <meta charset="utf-8">
<!-- Inserted required title element --> <title>About Rebecca Henry</title>
<!-- Moved link element from body to head --><link rel="stylesheet" type="text/css" href="csshorizontalmenu.css">
<!-- Moved Script to the head element --><script type="text/javascript" src="csshorizontalmenu.js">
/***********************************************
* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy- vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>
</head>
<body>
<h1>About Rebecca Henry</h1>
<!-- Added a width and a margin. This solves your white bar problem. --><div class="horizontalcssmenu" style="width: 556px; margin: auto">
<ul id="cssmenu1">
<li>Home</li>
<li>Work<span class="arrowdiv"> </span>
<ul style="top: 27px;">
<li>Print</li>
<li>Digital</li>
<li>Photography</li>
</ul>
</li>
<li>About</li>
<li>Contact
</li>
</ul>
</div>
<!--Split the menu from the table with separate div elements -->
<div>
<br>
<br>
<br>
<img src="images/profile.jpg" alt="Profile">
<!-- changed align center to margin auto inline style --><br><table style="width:410px; margin: auto">
<tbody><tr>
<td>
<p>
Hello Friends,
<br>
My name is Rebecca Henry and I am a Graphic
Designer out of Richmond Virginia. I love
working with different mediums, but print is
by far my favorite. Experimentation
and trial and <br> error are important factors in my work. I
try to think out of the box and try as many
things as I possibly can. The work on this site
is comprised mostly of work from my junior year
of college at Virginia Commonwealth University,
and also of the work I completed at an internship
with a local luxary car service by the name of
bioRide. I am passionate about useing my talent to help others in any way I can. My dream job would be to work with a non-profit creating meaningful work. I do not work in hopes of fame or foutune, but simply for the love of what I do. If you have any questions or comments
about the work, I am always happy to hear them.
My contact information can be found on the contact
page. I am currently a student, and always looking
for employment so please feel free to contact me
in those regards also. Thank you for visiting my page!
</p>
</td>
</tr>
</tbody></table>
<br>
<br>
<br>
<br>
<br>
</div></body></html>
Welcome aboard!
I wish you to find all the help you need on this great Q&A platform.
The "local" solution
This solution only resizes the list container. The advantage is that you can choose the width you want without impacting the rest of your page. The drawback is that whenever you add an element to your page, you have to align/size it manually.
Add this in your CSS file:
ul#cssmenu1 {
width: 580px; /* Edit this line */
margin: 0 auto;
}
The "global" solution
This solution resizes the entire page by resizing the body, which is the first displayed child element of the <html> element. The drawback is that you cannot expand your list container outside the body element (well, at least not without a hack or side effects). The advantage is that you have a consistent layout in your entire page, no matter what you add or edit in the future. Also, you can resize the entire page (if it's too small, or if you want to have a responsive version, ...) by updating just one value. That's definitely the direction I would take.
Start by resizing the entire body by adding this at the top of your CSS:
body {
width: 580px; /* Edit this line */
margin: 0 auto;
}
Now, in your HTML page, line 48, replace:
<table style="width:410px" align="center">
with the following:
<table>
Of course, I am not saying there are no other solutions, but that these two ones are the first ones that come to my mind.
Also, as Edward said in his answer, please use W3C's markup validator as using standard markup gives you - among other things - a better chance to be compliant with all sort of browsers. Results for the page you gave can be found here. Your CSS is also invalid, you can check it with the CSS validator.