I made a CSS Navbar, but inbetween each "navbar-item", there is little space. I don't want there to be anyspace at all! Is there a way to make this happen without changing the margin-left for every navbar-item?
<!doctype html>
<html>
<head>
<title>Home - UnhandyFir9</title>
<style>
#wrapper {
box-shadow: 0px 0px 20px 10px black;
left: 0px;
top: 0px;
margin: auto;
margin-top: 30px;
width: 800px;
background-color: rgb(200, 200, 200);
font-family: sans-serif;
}
#top-notification {
display: inline-block;
width: 100%;
height: 20px;
background-color: lightblue;
text-align: center;
}
#navbar-core {
width: 100%;
height: 30px;
background-color: lightgreen;
}
#navbar-item {
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
background-color: green;
color: white;
}
</style>
</head>
<body>
<div id="wrapper">
<span id="top-notification">== Hi! Our site was just recently launched, so you may expect alot of bugs! Sorry 'bout that! ==</span>
<div id="navbar-core">
Home
Lessons
About Us
Donate
</div>
</div>
</body>
</html>
The problem is in display:inline-block - it reduces the elements to inline blocks, meaning they behave like all other inline content in HTML. Since there's whitespace between the anchor elements, which as always collapses to a single whitespace, what you see is an actual 'space' in between in the current font size just like between words in a sentence. You can fix this by applying font-size:0 on the container but that's messy since you'd have to reset it for the children. Recommended method is to just use float:left instead and manually set the parent's size correctly, and set the items to height:100%.
Using multiple elements with the same ID is wrong but not causing this issue - should still be fixed though.
As I mentioned in my comment, IDs must be unique, so use classes instead. That being said, your links are inline elements and are sensitive to white space, so either float them left or remove the white space between the elements in the code.
Ex:
.navbar-item {
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
background-color: green;
color: white;
float:left;
}
jsFiddle example
White space removed jsFiddle example
Try this;
.navbar-item {
display:block;
float:left;
width: 100px;
height: 30px;
text-align: center;
background-color: green;
color: white;
}
<div id="wrapper">
<span id="top-notification">== Hi! Our site was just recently launched, so you may expect alot of bugs! Sorry 'bout that! ==</span>
<div id="navbar-core">
Home
Lessons
About Us
Donate
</div>
First,
#navbar-item {
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
background-color: green;
color: white;
}
Change this to a class instead of an id. Id's are unique and can only be used once on a page but a class can be used over and over again.
I am pretty sure the space is from this but I will make a fiddle to test,
display: inline-block;
You could change display: inline-block; to float: left; and have it without the space.
JSFIDDLE
Use float: left; instead of display: inline-block; by using inline-block will have 4px margin by default but using float: left; by default do not have the space. And use classes for every a element no id, id are unique and shouldn't be repeated.
.navbar-item {
/*display: inline-block;*/
float: left;
width: 100px;
height: 30px;
text-align: center;
background-color: green;
color: white;
}
If you still want to use inline-block instead of float: left; you should use margin-left: -4px;
To solve your problem quickly, you can wrap your links with span and give it a darker background:
<div id="navbar-core">
<span class="navbar-inner-wrapper">
Home
Lessons
About Us
Donate
</span>
</div>
Then add this to your CSS:
.navbar-inner-wrapper {
background-color: green;
}
Related
I'm creating a page, at the top of which there is a button (aligned to the right), followed by the main page content in a div.
I've encountered an issue when trying to separate the button and the main content div. The two divs are currently overlapping. I don't imagine this to be a huge issue, but I'd like to clarify what the most accepted way of separating these would be, rather than just messing about with margins etc.
.view-all-container {
display: block;
float: right;
margin-bottom: 40px;
}
.view-all {
background-color: #808080;
color: #fff;
padding: 10px;
}
.main-section {
height: 400px;
background-color: #ebebeb;
}
<div class="view-all-container">
<a class="view-all">View our range of holiday homes</a>
</div>
<div class="main-section">
</div>
I've found that when I add a margin-top: 50px to .main-section the button travels with it, as if it's contained within the same div.
If you are looking for best practices then consider the following:
1) Avoid using float. There are many better ways to get elements where you want them without needing to revert to a complicated process. The biggest problem with float is that it removes your element from the normal DOM flow. https://designshack.net/articles/css/farewell-floats-the-future-of-css-layout/, https://www.webdesignerdepot.com/2014/07/the-secret-to-designing-website-layouts-without-css-floats/
2) If you are navigating, then use the <a> tag. If you are doing something on the same page use a <button> or <input type='button'/> https://davidwalsh.name/html5-buttons
Here is a simple fix for what you want:
.view-all-container {
margin-bottom: 10px;
text-align: right;
}
.view-all {
background-color: #808080;
border: none;
color: #fff;
padding: 10px;
text-align: middle;
}
.main-section {
height: 400px;
background-color: #ebebeb;
padding: 5px;
}
<div class="view-all-container">
<button class="view-all">View our range of holiday homes</button>
</div>
<div class="main-section">
Stuff in the main section
</div>
I removed the float and changed to text-align. The <div> is already display: block so I removed that.
I assumed that your button at the top was to make changes on the active page so I changed the html from an <a> tag to a <button>.
If you don't want to use text-align then try flex-box:
.view-all-container {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
}
.view-all {
background-color: #808080;
border: none;
color: #fff;
padding: 10px;
}
.main-section {
height: 400px;
background-color: #ebebeb;
padding: 5px;
}
<div class="view-all-container">
<button class="view-all">View our range of holiday homes</button>
</div>
<div class="main-section">
Stuff in the main section
</div>
One of my favorite quotes about using float comes from this article: https://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
If you’re new to CSS layouts, you’d be forgiven for thinking that using CSS floats in imaginative ways is the height of skill. If you have consumed as many CSS layout tutorials as you can find, you might suppose that mastering floats is a rite of passage. You’ll be dazzled by the ingenuity, astounded by the complexity, and you’ll gain a sense of achievement when you finally understand how floats work.
Don’t be fooled. You’re being brainwashed.
You just need to clear the float with clear:right on .main-section
.view-all-container {
display: block;
float: right;
margin-bottom: 40px;
}
.view-all {
background-color: #808080;
color: #fff;
padding: 10px;
}
.main-section {
height: 400px;
background-color: #ebebeb;
clear: right;
}
<div class="view-all-container">
<a class="view-all">View our range of holiday homes</a>
</div>
<div class="main-section">
</div>
I have the following block of CSS/HTML:
<html>
<head>
<title>{CODE} Pink</title>
<style>
.leftLogo {
float: left;
border: black solid;
background-color: black;
color: white;
font-family: Courier, Courier New;
}
.rightLogo {
float: right;
border: black dashed;
background: pink;
color: black;
}
.logo
{
height: 50px;
line-height: 50px;
width: 200px;
text-align: center;
vertical-align: middle;
font-size: 3em;
}
</style>
</head>
<body>
<div class="leftlogo logo">{CODE}</div>
<div class="rightlogo logo">PINK</div>
</body>
</html>
What it's currently doing is this:
What I'd like it to do is this:
I know I can do this with positions, but what's the best way to do this so the two will stay next to each other in a variety of scenarios?
Change your code for the .rightlogo class to reflect this:
.rightLogo {
float: left;
}
instead of what it is currently:
.rightLogo {
float: right;
}
Note: Also, be mindful of your capitalization of the classes. I noticed that in your CSS, you use .leftLogo but in your HTML, you use .leftlogo. I'm not sure how deep the browser requirements go for being that strict, but I wouldn't put it past IE to mess something up.
The result:
.leftLogo {
float: left;
border: black solid;
background-color: black;
color: white;
font-family: Courier, Courier New;
}
.rightLogo {
float: left;
border: black dashed;
background: pink;
color: black;
}
.logo
{
height: 50px;
line-height: 50px;
width: 200px;
text-align: center;
vertical-align: middle;
font-size: 3em;
}
<div class="leftLogo logo">{CODE}</div>
<div class="rightLogo logo">PINK</div>
You can easily do this by adding float: left; to your .logo class and removing the float property inside .leftLogo & .rightLogo
I think the best approach for this question is to set the two logos(divs) inside a container, to have an absolute position so they overlap and then the one you want in the right give it a right of 100%.
html code
<div class="container">
<div class="leftLogo logo">{CODE}</div>
<div class="rightLogo logo">PINK</div>
</div>
css Code
.container{
position: absolute;
}
.rightLogo {
right: 100%;
}
I have only put the code that needs to be add to what you currently have.Good Luck
Hope this answer your Question T04435...
PS:The divs in the original post have miss spell in the class names the l should be Capital L leftlogo ---> leftLogo and same for right
You can use float:left for right div, and resize width with media queries for resolution where second div go to bottom.
I have a similar HTML structure like this Fiddle: http://jsfiddle.net/hAMmK/3/
The HTML structure:
<span class="all">
<span class="group-1">
<span class="a">A</span>
<span class="b"><input type="text" placeholder="b" /></span>
</span>
<span class="group-2">
<span class="c">C</span>
<span class="d">D</span>
</span> </span>
The current result with the css is
but my desired result would be
This result should be responsive, I mean, the width for the input text should be the maximum with the correct current width of the device/browser. Furthermore, I need compatibility with the most common browsers (as desktop as mobile/tablet).
What is the best way to solve this?
Use CSS3 Calc: Running Demo
input[type="text"]{
width: calc(100% - 100px);
}
Not (yet) supported everywhere, though, and you need to know the width to subtract.
If your buttons are static, ie you know the width/number of the left/right span's then you could use floats. It's gives a smoother responsive feel, but uses negitive margins which sometimes aren't that nice.
I changed the CSS to:
.group-1 {
width: 20px;
float: left;
margin-top: 6px;
}
.group-2 {
margin-left: 30px;
margin-right: 70px;
}
.group-3 {
width: 60px;
float: right;
margin-top: -20px;
}
Have a look at:
http://jsfiddle.net/hAMmK/16/
Like I said, it will only work if you can fix your left/right width's but seems to give a clean responsive feel.
As an alternative to css3 style calc if you need to support other browsers here is another solution.
If A is a label and C and D are buttons (as I guess), you can use width 100% in the input field and float it left, then you have to display block its parent (if it is an span as in that case) and add a margin-right the sime size than your buttons. The margin will collapse because the content is floated and the buttons will appear at the right side of your input field.
You could then do the same for the label if you know its size or you can better use a table to allow changing the label text (maybe for internationalization).
You can see it applied to your example:
http://jsfiddle.net/cTd2e/
/*Styles for position here*/
.all{
line-height: 22px;
}
table {
width: 100%;
float: left;
}
.second-cell input{
width: 100%;
float: left;
}
.b {
display: block;
margin-right: 130px;
}
td.first-cell {
white-space: nowrap;
}
td.second-cell {
width: 100%;
}
.group-2{
vertical-align: middle;
margin-left: 10px;
}
Also if the buttons contain text then you can use a table inside a table to have the input field 100% and the rest auto.
I am not aware if there is a more modern compatible way of doing that, it would be great!
Change the widths to use a percentage.
.a {
padding: 3px 7px;
background-color: LightBlue;
border: 2px solid CornflowerBlue;
border-radius: 5px;
color: SteelBlue;
width: 10%;
}
.c {
padding: 3px 7px;
background-color: Moccasin;
border: 2px solid BurlyWood;
border-radius: 5px;
color: DarkKhaki;
width: 10%;
}
.d {
padding: 3px 7px;
background-color: LightSalmon;
border: 2px solid Brown;
border-radius: 5px;
color: IndianRed;
width: 10%;
}
input{
width: 70%;
}
JS Fiddle: http://jsfiddle.net/hAMmK/4/
I would like to understand the correct way to align different size type between different div classes. Right now, the code forces the smaller type to align with the top of the larger type. How do I align the type across all divs on the same typography baseline with the cleanest code. This seems like really easy stuff, but I cannot find an answer.
I also hope this is semantically correct (I am trying to create a row of data that is responsive and can resize and rearrange (float) on different devices). All suggestions welcome.
Link to Demo
You need to adjust the line-height and possibly the vertical margins for each font size so the match a baseline grid.
I'd recommend reading this : http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
Sounds like you need CSS' line-height property. That way you can make the lines of text the same height but affect font-size separately
#artist { /* Selector to affect all the elements you want */
color: #000;
font-size: 18px; /* Default font size */
line-height:18px; /* Line height of largest font-size you have so none go */
/* above the top of their container */
}
Demo
Adjusting where text is placed is done with padding and margin. but for this setting a p class to each of your divs gives you control of wher eyou want text placement within the div. of course your padding will vary for your baseline shift since you have mutiple em sizes of your fonts. fiddle http://jsfiddle.net/rnEjs/
#artist {
padding: 5px;
float: left;
width: 100%;
background-color: #036;
color: #000;
font-size: 18px;
overflow: hidden;
}
.genre {
width: 5em;
float:left;
height: 50px;
background-color: #09F;
}
.genre p {
padding:5px 5px;
}
.artistName {
float: left;
width: 175px;
height: 50px;
background-color: #F39;
}
.artistName p {
padding:5px 5px;
}
.birth {
float: left;
width: 5em;
height: 50px;
font-size: 12px;
background-color: #F90;
}
.birth p {
padding:15px 5px;
}
.medium {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #099;
}
.medium p {
padding:15px 5px;
}
.gallery {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #FF6;
}
.gallery p {
padding:15px 5px;
}
.website {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #99F;
}
.website p {
padding:15px 5px;
}
<div id="artist">
<div class="genre">
<p>Genre</p>
</div>
<div class="artistName">
<p>Artist First Last</p>
</div>
<div class="birth">
<p>birth year</p>
</div>
<div class="medium">
<p>medium</p>
</div>
<div class="gallery">
<p>gallery name</p>
</div>
<div class="website">
<p>website</p>
</div>
</div>
I found a good answer to your question from this Stackoverflow thread: Why is vertical-align:text-top; not working in CSS.
The gist of it is the following:
Understand the difference between block and inline elements. Block elements are things like <div> while inline elements are things like <p> or <span>.
Now, vertical-align attribute is for inline elements only. That's why the vertical-align didn't work.
Using the Chrome dev tool, you can tinker with your demo and see that it works: specifically, inside <div> tags, put <span> tag with appropriate style.
I am trying to do a hide / reveal using javascript and css and my divs are stacking rather than lining up side by side. i have set a width and floats... i cant figure out what's going on. any help is greatly appreciated.
#container {
width: 760px;
margin: 20px auto;
padding: 30px;
background-color: #000;
border-width: 0px;
color: #fff;
}
#1a {
width: 300px;
float: left;
margin:10px
background-color: #000;
}
#1b {
width: 400px;
margin: 10px;
background-color: #000;
}
and the html:
<div id="container">
<div id="1b" class="hidden">
Module Details:
My First Page
</div>
<div id="1a">
01
</div>
i've been messing with it a lot, and now the second div is in the middle of the first... so here is a link if that's helpful too:
http://www.amandasmithsf.com/m14_SMITH_demo/test.html
Update
Inspecting your CSS in Firebug, I noticed that it wasn't being applied, then I saw why -- HTML IDs should not start with a number (or at least, not if you want them to work the CSS # selector; it turns out that in HTML5 they decided to start allowing IDs beginning with numbers, but you'll have to use a different strategy to select them with CSS: http://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/).
Starting the IDs with letters instead of numbers made it work:
<style>
.hidden {display:none}
#container {
width: 760px;
margin: 20px auto;
padding: 30px;
background-color: #000;
border-width: 0px;
color: #fff;
}
#b1 {
float: left;
width: 300px;
margin:10px;
background-color: #000;
}
#a1 {
float:left;
width: 10px;
margin: 10px;
background-color: #000;
}
</style>
<script>
function unhide(id) {
document.getElementById(id).style.display = 'block';
}
</script>
<div id="container">
<div id="b1" class="hidden">
Module Details:
My First Page
</div>
<div id="a1">
01
</div>
</div>
Original Answer
I think you just need to add float: left; to #1b.
Or, if for some reason you really only wanted to assign float: left; to one of them, it would need to be #1b - the floated element needs to come before the non-floated element next to which you want it to display.