The top navigation at http://ci2.totalshopuk.com has dividers on the left which means the last link doesn't have a divider. I would either like to remove the first divider or add one at the end.
I copied the .navmenuitem1 style and made a new one .navmenuitemfirst1 and removed the background but strangely the first link was put on a line above the rest!? (even a straight copy of the style does the same thing).
Example:-
<ul class="navmenu1">
<li class="navmenuitemfirst1">Home</li>
<li class="navmenuitem1">Download</li>
<li class="navmenuitem1">About Us</li>
<li class="navmenuitem1">FAQ</li>
<li class="navmenuitem1">Newsletter</li>
<li class="navmenuitem1">License</li>
<li class="navmenuitem1">Contact Us</li>
</ul>
Lastly, in IE6 none of the background images show, I just get the colour as the background... however the backgrounds on the original table design at http://www.totalshopuk.com show correctly.
Any help is very much appreciated!
-- Duplicating all .navmenuitem styles fixed the divider issue --
.navmenuitemfirst,.navmenuitem {
display: inline;
margin: 0;
padding: 0;
}
.navmenuitemfirst a {
color: #FFF;
font-size: 16px;
padding-left: 30px;
padding-right: 30px;
}
.navmenuitem a {
background: url(../images/navdivider.png) no-repeat;
color: #FFF;
font-size: 16px;
padding-left: 30px;
padding-right: 30px;
}
.navmenuitemfirst a:hover,.navmenuitem a:hover {
color: #E64D29;
}
Ok, the answer to your first question can have to do with the a:
http://jsfiddle.net/9DTTd/1/
I created a new class for .navmenuitemfirst1 a
You might have been applying just the new class, when the background style is in the a (the a is a block with a background). I can't see any error with lines, but check it and let me know. This might also answer the second concern about the background, but I don't have ie6 to check it :3
EDIT: I later noticed why it wasn't working, silly me. The class needed to have also the inline property:
.navmenuitem1,.navmenuitem2,.navmenuitemfirst1 {
display: inline;
margin: 0;
padding: 0;
}
Probaly the .navmenuitem1 has an position:relative and float:left and the .navmenuitemfirst1 hasn't. As utopicam asked make an jsfiddle for it so we could check the css with it.
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'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'm currently working on a portfolio project and I have a concept for the header but I am having difficult achieving it.
I want to make the bottom border of my header (and top border of my footer) look like it's a brush stroke. As seen in my photobucket link.
http://i568.photobucket.com/albums/ss130/Lovin_RainyNights/ScreenShot2014-09-29at50243PM.png
I created a border image to use but it's getting hidden in the box model since the headers background color is the same as the border. I changed the background color to black so it can easily be seen
http://i568.photobucket.com/albums/ss130/Lovin_RainyNights/ScreenShot2014-09-29at50110PM.png
So what I would like to know is: Is there a way to get the border image to border the outside, not the inside of the header?
This is the code I have
HTML
<header>
<h1>My Name</h1>
<nav>
<ul>
<li><span id="current">Projects</span></li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
CSS
header{
display: block;
background-color: black;
padding: 5px 10px;
border-bottom: 15px solid transparent;
border-image: url("border.png") 0 0 33 0;
}
h1{
float: left;
}
nav{
text-align: right;
}
nav li{
display: inline;
list-style: none;
}
Any advice would be greatly appreciated, THANKS!
The border-image-outset property specifies the amount by which the border image area extends beyond the border box.
http://www.w3schools.com/cssref/css3_pr_border-image-outset.asp
div {
border-image-source: url(border.png);
border-image-outset: 15px;
}
I believe you should not do it. You can wrap your footer into a bordered-footer and add the border to the borderedfooter. In general, the border is part of a tag. You can set border-image-outset as #bpettijohn pointed out, but I think that would be confusing later when you are already used to the standard meaning of border.
I am learning how to code HTML and CSS, and I decided to make my own website in the process.
My question is: how would I align smaller text to a bigger object, for example, links to different pages on my website neatly aligned under my full name with the links flush to the of the beginning and end of my full name?
I know describing it may have been a bit confusing, so here's an image of what I mean:
Any suggestions?
Thanks!
You can approximate the look and design regardless of the header length, but in the end, CSS doesn't offer as precise typographical tools as you'd need and you will have to nudge the percentages one way or another once you know the length of your actual text.
Sample Jsfiddle
HTML:
<div id="container">
<h1>Large Title Here Etc</h1>
<div id="sub">
<span>music</span>
<span>film</span>
<span>web</span>
<span>photo</span>
</div>
</div>
CSS:
body {
text-align: center;
}
#container {
display: inline-block;
}
h1 {
font-size: 2em;
}
#sub {
font-size: 1em;
display: table;
width: 120%;
box-sizing: border-box;
margin: 0 -10%;
}
#sub span {
display: table-cell;
padding: 0 2%;
}
links flush to the beginning and end of my full name
Get out of the habit of thinking this way as you design websites. This will lead to endless headaches and frustrations for you, as it depends on browser rendering (and possibly rendering bugs), the user's font size, the user's font, and loads of other factors you cannot control. Instead of going for 'pixel precision', the idea is simply to make it look as good as you can on most things.
When designing things like this, consider the markup first. What is the structure of what you're actually writing? In your linked image, Full Name looks to me like a header (perhaps h1), while menus like that are normally done as styled unordered lists (ul) these days. Below is an example of how I might make something similar to what is in your image.
Here is the markup:
<div id="container">
<h1>Full Name</h1>
<ul>
<li>music</li>
<li>film</li>
<li>web</li>
<li>photo</li>
</ul>
</div>
and the CSS used, with comments:
#container { border: 1px solid; }
h1 {
margin-bottom: 0;
text-align: center;
}
ul {
margin: 0.5em;
/* remove default padding inserted by browser */
padding-left: 0;
/* no bullets */
list-style-type: none;
/* this works on inline objects, not just text */
text-align: center;
}
li {
/* hybrid of inline and block; obeys text-align */
/* Also note this does not work in IE <9. Workarounds exist. */
display: inline-block;
padding: 3px;
}
And here is the end result: http://jsfiddle.net/3PLgz/1/
Alrighty so I am attempting to create a header for a website I'm making, but I'm having a bit of trouble with padding some links out for my top level nav.
Basically what's happening is, if I have a long link name, it overlaps with another link.
I think this is something to do with the width but I'm not sure how I can fix it. I also really don't want to create a fixed width for the links, as I am wanting to make each text in the links 60px away from the previous.
HTML:
<nav id="top_navigation">
Home
Example1
Longtextjustbecause
Testpage3thingy
</nav>
CSS:
#top_navigation a {
display: inline-block;
height: 60px;
color: #3b3b3b;
font-family: Hero;
font-size: 26px;
text-decoration: none;
line-height: 60px;
padding: 0px 30px; }
Any help is greatly appreciated, thanks!
Yeah so it turned out to be the font that I was using for some reason. It doesn't appear to like padding in any circumstance very much.