I want to create a navigation bar like this:
How would I structure such a thing? Obviously there should be one external div with a blue background. But what about the child elements? How should they be structured? Thanks.
There is no generalized answer on how to structure a page properly. There are general standards for using technologies, but over all getting your page to present properly is more important then how many or which type of elements you use.
For example if you want your page to auto re-size then you might want to use Divs or Tables. If you want your text to wrap without crossing the entire page, you might want to use a table, or spans...
I can show you some references to floating for CSS... But even in this type of example you could create divs within divs, that are styles appropriately to "taste"; or you could use spans within spans.
http://www.w3schools.com/css/css_float.asp
The major caveat to this explination is that corporate environments will normally have a style guide generated by advertising or marketing that will dictate how the eccomerse or client present sites, and data is represented. This will normally force you to use as an ex: Divs vs Spans.
Each element has a different default display property so I think in this case it depends of the element.
The display property of the span is Inline
– The inline elements line up horizontally as like
Inline Inline Inline
The display property of the div is block
https://iamarunkumar.wordpress.com/2010/02/10/what-is-the-default-display-property-for-span-and-div/
To create a navigation bar, you'll need something like so
* {
margin: 0;
padding: 0;
}
nav {
background-color: blue;
color: white;
font-family: Arial;
padding: 30px 40px;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
width: 49%;
text-align: right;
}
li.title {
text-align: left;
}
<nav>
<ul>
<li class="title">Welcome to Our World</li>
<li>We Work Best</li>
</ul>
</nav>
This would generally be considered the most common way to structure a nav bar.
Related
I want one side of my webpage to have an unordered list of links and when you click on those links information will appear on the other side of the webpage based on which link was clicked. Can this be done with just HTML and CSS if not can I do it in PHP?
This is my current code
article {
float: left;
padding: 0px;
width: 35%;
background-color: #f1f1f1;
height: 650px;
}
li {
margin: 40px 0;
}
<article>
<ul style="list-style-type:none">
<li>Tiger</li>
<li>Hammerhead</li>
<li>Bull</li>
<li>Great White</li>
<li>Mako</li>
<li>Greenland</li>
<li>Whale</li>
<li>Thresher</li>
<li>Oceanic WhiteTip</li>
<li>Goblin</li>
</ul>
</article>
This can be achieved using JavaScript by creating an element on the other side of your links then use
document.getElementById("id").innerHTML
to edit it's content based on whats clicked (by linking onclick functions to your links).
Editing a webpage after showing it can not be done with only CSS and HTML.
Here is a CODEPEN
HTML and CSS only (if you really insist, but it is kinda nasty, tho):
Place <div>s containing the relevant information to be shown inside the <li> elements. When the links are mouseovered (and get :hover in terms of CSS), so do the <div>s and <li>s. Make the <div>s hidden (using CSS) and display them only when hovered.
li div {display:none;}
li:hover div {display:block; ... }
Here is a Codepen demo i made you.
Client-side javascript / jQuery..
.. is a much more practical option, where clicking links will change the CSS of respective <div>, which can be placed and styled as you wish. Or, using data- attribute containing text, this text can be inserted into that single information <div> on the right.
I've been following w3schools and this other website to build a navbar in jekyll using frontmatter. I'm having trouble with the block property in CSS. The entire navbar except for the dropdown portion is working.
Here's the jsfiddle. I'm not sure how useful that will be since it has Liquid in it.
Here's a picture of what I'm looking at. I've played around with the "#navbar .ddm a" section of the CSS, so I know I'm in the right spot, but it doesn't matter if I put block. Inline works correctly. It just defaults to inline-block, even if I delete "display: "
This is the css that I think should be the culprit
#navbar .ddm a {
color: green;
padding: 14px 16px;
text-decoration: none;
display: block;
text-align: left;
}
Elements that need to be targeted are the list items (li) of the dropdown menu.
You're focus was on the nested anchor tags (a). So you needed to be looking one level up - at the containing parent elements (li).
In order to achieve your intended result, you need to remove the float declared on only the dropdown list items, e.g:
#navbar .dropdown-menu li {
float: none;
}
As long as you have float rules declared, aligning elements with display rules won't be effective.
Fiddle Demonstration
https://jsfiddle.net/kbuoL6sm/3/ (additional styles included)
Is there a way to print target page numbers with hyperlinks which linked to various places within the same document?
<h1>Table of Contents</h1>
<ul>
<li>Introduction</li>
</ul>
...
<section id="introduction"> <!-- Appears, for example, on page 3 when printed -->
<h1>Introduction</h1>
...
</section>
So that the output is like:
Table of Contents (page 0)
Introduction.........................3
...
Introduction (page 3)
I only need this to work with the Google Chrome browser when printing to PDF (on OS X).
Is there some CSS or JavaScript trickery which would allow me to achieve this?
It looks like this is part of a new working draft of the CSS specification:
http://www.w3.org/TR/2014/WD-css-gcpm-3-20140513/#cross-references
I doubt that there is any browser support yet...
I have no idea if this will work in a PDF or not, but to answer the question of how this can be done in CSS:
You can generate the numbers using counter-increment on a pseudo element in css:
note that I changed your <ul> to an <ol> as this is an ordered list, whether you use the list-style or not.
ol {
counter-reset: list-counter;
}
li:after {
counter-increment: list-counter;
content: counter(list-counter);
float: right;
}
Making the little dotted line in between the text and the number takes a little more work, but you can achieve that by adding in some extra span elements and using css display: table; and display: table-cell; to lay them out properly:
<ol>
<li><span>Test</span><span class="line"></span></li>
<li><span>Test2</span><span class="line"></span></li>
<li><span>Test3</span><span class="line"></span></li>
</ol>
li {
display: table;
}
li span, li:after {
display: table-cell;
vertical-align: bottom;
}
li span.line {
border-bottom: 1px dotted #000;
width: 100%;
}
Setting the width to 100% on the span.line element, while not setting any width at all forces it to fill all of the remaining space (this is due to table-cell display elements not being allowed to break to new lines, and preventing overflow of content)
See full demo
It's not the cleanest approach to have to add the extra span elements, but it is a bit of a tricky task. Perhaps someone else will be able to take the time to think of a more efficient way to accomplish it? You could always just put an underline under the entire <li>, and skip the extra markup, at the cost of being a little less cool.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
How to you get rid of the white space between list items? I am trying to make it so that the images are right next to each other. Even though I have set the styling to margins: 0;, they are still separated.
CSS
ul.frames{
margin: 20px;
width: 410px;
height: 320px;
background-color: grey;
float: left;
list-style-type: none;
}
ul.frames li {
display:inline;
margin: 0;
display: inline;
list-style: none;
}
ul.frames li img {
margin: 0 0 0 0;
}
HTML
<li>
<img id="myImg" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
<img id="myImg2" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
<img id="myImg3" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
<img id="myImg4" src="img.jpg" width="102.5px" height="80px"/>
</li>
Updated Sept. 1st, 2014
In modern browsers, flex-box is the preferred method of doing this. It's as simple as:
ul {
display: flex;
}
See a JSFiddle here.
For legacy browser support refer to the other options below, which are still just fine, albeit slightly more complex.
Though each of the other answers gives at least one good solution, none seem to provide all of the possibilities. And that's what I'll try to do here.
Firstly, to answer your implicit question of why there's spacing, it's there because you've set your LIs to display as inline elements.
inline is the default display value for text and images in all of the browsers that I know of. Inline elements are rendered with spacing between them whenever there's whitespace in your code. This is a good thing when it comes to text: these words that I've typed are spaced apart because of the space I've included in the code. And there's also space between each line. It's this very behavior of inline elements is what makes text on the web readable at all.
But sometimes we want non-text elements to be inline to take advantage of other properties of this display style. And this typically includes a desire for our elements to fit snugly together, quite unlike text. And that seems to be your problem here.
Without further ado, here are all the ways I know of to get rid of the spacing:
Keeping them inline
(Not recommended) Apply negative margin to the LIs to move them over.
li { margin: -4px; }
Note that you'll need to 'guess' the size of a space. This isn't recommended because, as Arthur excellently points out in the comments below, users can change the Zoom of their browser, which would more than likely mess up the rendering of your code. Further, this code requires too much guesswork and calculation. There are better solutions that work under all conditions.
Get rid of the whitespace
<li>One</li><li>Two</li>
Use comments to make the whitespace a comment JSFiddle
<li>One</li><!--
--><li>Two</li>
Skip the closing tag (HTML4 valid / HTML5 Valid) JSFiddle
<li>One
<li>Two
Put the whitespace in the tag itself (Note: Early Internet Explorers will not like this)
<li>One</li
><li>Two</li
>
Take advantage of the fact that the spacing between the elements is calculated as a percentage of the font size of the parent. Consequently, setting the parent's font size to 0 results in no space. Just remember to set a non-zero font-size on the li so that the text itself has a nonzero font size. View on JSFiddle.
Floating them
Float them instead. You'll probably want to clearfix the parent if you do this.
li { float: left; display: block; }
Incredible but no one here has provided the proper solution for this problem.
Just do this:
ul.frames {
font-size: 0;
}
ul.frames li {
font-size: 14px; font-size:1.4rem;
display: inline;
}
Keep in mind that we won't always have access to modify the markup. And trying to remove the spaces from the <li>s with JavaScript would be totally unnecessary when the solution is simply two font-size properties.
Also, floating the <li>s introduces another potential problem: You wouldn't be able center and right align the list items.
If you try to do float:right; on the <li>s then their order will be swapped, meaning: the first item in the list would be last, the second item is the one before the last, and so on.
Check out this other post here in SO: A Space between Inline-Block List Items
You should just remove all the spaces in the ul tags just like this: http://jsfiddle.net/dFRYL/3/
Since the <li> elements are inline, in you write spaces in or between them you will have spaces displayed.
The reason you get the spaces is because you have spaces between the elements (line break)
<ul>
<li>One</li><li>
Two</li><li>
Three</li>
</ul>
You can use negative margins like this:
margin-right: -4px;
margin-bottom: -4px;
Take a look here.
It also works up and down, I added another one to show that here.
Using display:inline; causes whitespace in your HTML to create whitespace when displaying the HTML.
There are two solutions to this:
1) Change how you make them appear inline, I would recommend using floats on all of the list items, then using a clearfix of sorts.
2) Remove all whitespace between your list items, e.g.
<li><img id="myImg" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg2" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg3" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg4" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li>
Personally I would recommend option 1 (I hate display: inline)
here is my attempt at it. Hope it helps. As Sean Dunwoody mentioned, white space in your html can be a cause of the space, but I've floated the li and made the image to display:block;. Left comment on where I made changes. Hope it helps: http://jsfiddle.net/FJ3nV/
Here my small but main changes:
/*
* Added float left
*/
ul.frames li {
margin: 0;
list-style: none;
float:left;
}
/*
* Moved inline sizing here just to clear up obtrusive html.
* Added display block.
*/
ul.frames li img{width:102px; height:80px; display:block;}
I would change your li elements to inline-block.
One person did not recommend
li { margin: -4px; }
But making a slight change to it will cause it to work even when the font size changes or when the browser zooms in
li{ margin-right: -0.25em; }
That should fix that white space problem completely. However, if you are using a poorly designed font-face that doesn't follow correct letter-height standards then it may cause a problem. However those are harder to find and most of the fonts google hosts don't have that issue.
The navigation I'm referring to looks something like this:
home | about | contact
So what's the best and most flexible HTML/CSS to use for this type of navigation? The best thing I can come up with is to wrap the delimiters in a span so that I can control the spacing around them. For example:
home<span>|</span>about
Is that the best approach?
This all comes down to your target browsers, and if validating as strict HTML4.01 is important to you (ie: a boss/committee thinks it's a "big deal") or not.
Personally, for purposes of nav-menus, I go the route of wrapping everything in an unordered list.
If 4.01-compliance is important, I'll wrap that in a div.nav
If html5 is cool (which it is, with an oldIE JS-shim, as long as there are no committees involved), I'll wrap everything in a <nav id="main-nav"> or similar.
<ul><li>home</li><li>about</li></ul>
Then in CSS:
#main-nav li { display : inline-block; list-style : none; }
From there, you can set your padding on each <li> element to whatever you want.
You can use the :after pseudo-selector to inject "|" or any custom image you want, after each one (and you can use the :last-child:after to make sure that there's no image after the last one, if that's what you want).
You can even play around with the a, turning it into a block-element, and playing with padding to make the entire li block clickable, and not just the text.
See the oldIE-compatibility hack here: how to make clickable links bigger, if necessary.
You could simply add a left border to every element, except the first one:
HTML:
<ul id="nav-list">
<li>Home</li>
<li>Blog</li>
<li>Link</li>
</ul>
With the CSS:
#nav-list li {
display: inline-block;
border-left: 1px solid black;
padding: 4px;
}
#nav-list li:first-child {
border-left: 0;
}
See the above code in action on jsfiddle!
This is rather cross-browser compatible (IE7+) but it can be easily polyfilled with something like Selectivizr for IE6. Thanks to Rob W for suggesting to use border-left and first-child to reach more browsers!