I have a navigation bar which consists of two parts. The left area, which is where the actual links are. And the right area, which is were a search box will display.
The left area is fluid, while the right area has a fixed width.
What I'm trying to figure out is how to set the padding on my navigation links so that it will use up the full fluid width of the left area. (The navigation links are buttons with a hover effect, I would like them to cover the full navigation bar regardless of it's width)
See the example below
What I'm trying to do (fluid/percentage based padding based on bar width)
width 300px
|========================================|========|
|---Link------Link------Link------Link---| Search |
|========================================|========|
width 400px
- padding on Links automatically adjusts to fill the bar
|================================================|========|
|----Link--------Link--------Link--------Link----| Search |
|================================================|========|
How would I go about achieving this? I've tried messing with padding percentages but I can't seem to get it to work as desired. Are padding percentages even the best way to go about this?
Depending on what support level you desire, you could use flexboxes.
I'll just assume you want to support older browsers, tho, where the best solution is propably a normal 2 column layout, with the links inside the left column getting a percentage width (25% in your example) and propably a min-width.
Heres a working fiddle. I made the main box resizeable for easier demonstration.
reduce the width of the container with padding and absolutely position the search box inside the padding. Here's an example on jsbin
HTML (note that some whitespace has been deliberately removed so that there aren't text nodes taking up space.):
<nav class="">
<div class="nav-link-container">
<div class="nav-link"><a >link</a>
</div><div class="nav-link"><a >link</a>
</div><div class="nav-link"><a >link</a>
</div><div class="nav-link"><a >link</a>
</div>
</div><div class="search-box-container">
<input class="search-box" placeholder="search">
</div>
</nav>
CSS:
nav {
padding-right: 220px;
position: relative;
background: lightblue;
line-height: 1.5em;
}
.nav-link-container {
display: inline-block;
width: 100%;
text-align: center;
}
.nav-link {
display: inline-block;
width: 25%;
outline: 1px dashed grey;
}
.search-box-container {
position: absolute;
right: 0;
top:0;
width: 210px;
display: inline-block;
}
.search-box {
width: 200px;
border-radius: 5px;
border: 1px solid lightgrey;
padding-left: 5px
}
NB: I've only used outline to show where the links are, you wouldn't do that in practise.
Related
My header is structured as a table. I finally managed to make it so that the last li is floated to the right and X % to the left while still being compatible with different screen sizes. However, my 'profile picture' div is resizing and resembles a squished circle as a result. How do I make sure that the div is always 40px in width and height (if this is the right way to go around it)?
CSS
#hdr-profile {
align-items: center;
border: 1px dotted red;
display: flex;
margin-left: auto;
white-space: nowrap;
}
#hdr-profile-pic {
width: 40px;
height: 40px;
background: white url("https://scontent-lhr3-1.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/11760274_1109394289087955_3712628479579288500_n.jpg?oh=ff64d9b1a44338d53d414459ff92aa71&oe=574558FA") no-repeat;
background-size: 100% 100%;
border-radius: 50%;
cursor: pointer;
}
HTML
<li>
<div id="hdr-profile">
<div id="hdr-profile-pic" title="My Profile">
<div id="hdr-profile-country" title="Liam is in Spain"></div>
</div>
<span id="hdr-profile-name" class="select">Liam Macmillan</span>
<i class="material-icons md-26 icn-lft icn-hvr">arrow_drop_down</i>
</div>
</li>
An easy way would be to add a !important after the 40px in your css of the profile picture
I suspect it's because of the size of the drop-down. In the JSFiddle that Nenad Vracar linked, the picture comes in totally fine. Don't use !important to force the size, it's bad practice and causes unexpected behavior. Instead, try experimenting with the size of the dropdown. I don't have the rest of your code, or I'd have looked into it.
Embarrassingly, I'm having trouble making one div (of any length) centered and one div (of any length) floating on the right. So I have a container with menu buttons that are centered and a link to the users control panel on the right. It should look something like this
----------------------------------------------------------------------------
| |----Menu Items----| |--ControlPanel--|
----------------------------------------------------------------------------
I know, this question has probably been asked a few times but I've searched through and through and they all seem to rely on percentages or fixed widths.
I have a container
.container {
height: 50px;
width: 100%;
padding: 10px 10px;
}
.menublock {
width: 200px;
margin: 0 auto;
padding: 0;
}
.controllinks {
float:right;
}
The html is like this
<div class="container">
<div class="menublock">
<span class="menuitem">Streams</span>
<span class="menuitem">Profile</span>
<span class="menuitem">Friends</span>
</div>
<div class="controllinks">
A link the users control panel
</div>
</div>
By changing menublock and controllinks to display:inline-block (or inline) I can get them on the same line just fine. .menublock does not seem to like being centered in this display and margin: 0 auto; doesn't work. I was messing around with .menublock display:table but that didn't want to stay on the same row.
Maybe it was too easy so you didn't even try it, but this fixed the thing in my test file: Just swap the order of <div class="controllinks"> and <div class="menublock">:
<div class="container">
<div class="controllinks">
A link the users control panel
</div>
<div class="menublock">
<span class="menuitem">Streams</span>
<span class="menuitem">Profile</span>
<span class="menuitem">Friends</span>
</div>
</div>
An easy solution is to use absolute positioning.
.container {
height: 50px;
width: 100%;
padding: 10px 10px;
/*this makes the child divs relative to the parent*/
position:relative;
}
.menublock {
width: 200px;
margin: 0 auto;
padding: 0;
}
.controllinks {
/*this puts the controllinks on the right.
Be warned, that if the page is too small, controllinks can no overlap on menublock.
This can be fixed with media queries.*/
position:absolute;
right:0px;
}
Both Merlin's and James' solutions worked well. They all achieved the same result.
Another solution I just found was adding text-align: center; to the .container class. It turns out inline elements respond to text-align (although it seems strange to think of divs in this way).
I'm trying to vertically align a logo and UL within a navigation bar. I've got pretty close and it looks fine really, however there is some extra space underneath and above them both that I can't account for. I've set the padding on the links and logo to allow the user to be able to click them more easily.
Place the mouse underneath the logo and underneath the nav bar, I've tried to do it so that as soon as your mouse reaches the nav bar, it hits the padding of the logo and therefore the mouse cursor turns to pointer. However, there is a gap there...using the developer tools, I can see that it's the div.inner element...but it says it has a margin. I've tried setting the margin to 0 on that div and it doesn't go away.
Here is the jsfiddle example: http://jsfiddle.net/Forresty/0smpmsqn/2/
I'm using the same vertical alignment method as here: http://webdesign.tutsplus.com/tutorials/the-holy-grail-of-css-centering--cms-22114
Here is the HTML:
<nav>
<div class="outer">
<div class="inner">
<div class="logo1">LOGO</div>
<ul>
<li>About</li>
<li>My Work</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Any help would be greatly appreciated. Or even if it's not possible to get rid of that extra space, an explanation of why it's there would be great.
Thanks in advance.
Remove
Display: table-cell;
To align in the middle use
line-height | Margin | Padding
The display table cell add's the space
You can change the following:
.outer {
display: table;
width: 100%;
height: 100%;
padding: 0;/*set padding to 0*/
}
.logo1 {
display: inline-block;
font-family: dan_custom-font;
font-size: 2em;
float: left;
margin: 0.3em;/*replace padding with margin*/
margin-left: 0.7em;/*set a bit more margin left*/
cursor: pointer;
color: #de1b1b;
text-align: center;
-webkit-transition: color .3s;
transition: color .3s;
}
fiddle
You can set .outer class padding: 0 and replace margin with padding in .logo1.
You have many options.
Adjust the height of the nav so that it fit the logo and ul.
Adjust the padding of the logo and ul so that it fits the nav.
To see whether they fit, first set a background color for logo and the ul and check.
I am making a fairly simple responsive website. I have a logo div that keeps the logo centered on small screens, and to the left on big screens. Everything is working how I want it to, (try resizing the jsfiddle) except that I want the logo div to scale down to it's min-width before the links wrap to the next line. I'm not sure how to word this, but I want the logo div to resize based on if the links are pushing it (if they have enough room). When it reaches it's min-width, then the links should wrap. Not sure if this is possible, but I figured I'd ask anyway.
Here is the jsfiddle.
The html:
<div class="header">
<div class="logo">logo</div>
<div class="link">link one</div>
<div class="link">link two</div>
<div class="link">link three</div>
</div>
The css:
.header {
text-align: center; /* Centers the logo text, and centers the links between the logo div and the other side of the page.*/
}
.logo {
max-width: 300px;
min-width: 100px;
width: 100%; /* It is always the min-width without this*/
background-color: red;
display: inline-block;
float: left;
}
.link {
display: inline-block;
background-color: green;
}
I hope I was clear, I'm still learning. Let me know if I need to add any more details.
I went looking some more and found flexboxes. Got them to do exactly what I wanted.
http://jsfiddle.net/3525C/10/
My new HTML:
<div class="header">
<div class="logo">logo</div>
<div class="nav">
<div class="link">link one</div>
<div class="link">link two</div>
<div class="link">link three</div>
</div>
</div>
and CSS:
.header {
text-align: center;
display: flex;
flex-flow: row wrap;
}
.logo {
flex: 1 0 auto;
min-width: 100px;
background-color: red;
}
.nav {
flex: 1 1 auto;
background-color: lightgray;
text-align: center;
}
.link {
display: inline-block;
background-color: green;
}
Thanks hexalys for helping me get it working.
The only real thing that responds the way you're talking is a table. Table cells have the capability of being flexible with their width.
You can use CSS to make this happen. It's a more modern display, so not all browsers (looking at you, older IE) will support it. But this should get you started: http://jsfiddle.net/mfvf8/
Here's what I added as a proof of concept:
.header
{
display: table;
width: 100%;
}
.header > div
{
display: table-cell;
}
.header .link
{
white-space: nowrap;
width: 1px;
}
I set the header to be displayed as a table, and gave it full width. I made all of the child divs act like a table cell. I made the links minimum width (1px) and said not to wrap whitespace. With regular divs, that would overflow. With table cells, that means it tries to be 1px wide but will expand to fit its content.
The rest of a table row's width will go evenly to whichever cells are left over that don't have a set width. In this case, it's the logo div. Then, as you shrink the window, it will slowly start to shrink the logo as needed.
You will need to tweak this to fit your design better. If you don't want your nav pushed all the way to the right like it is in the jsfiddle, you might need a "buffer" div to the far right, or different width settings, or a set max-width on the header div.
I've really hit the wall on this one and need some help. I'm trying to create a two column layout with both widths and heights adjusted to the contents of the left column. It seems to be a rather basic layout, but I'm starting to think it can't be done (without resorting to JS).
This fiddle describes what I'm trying to do. It's a container DIV with two DIVs inside, aligned horizontally. The left inner DIV should adjust its size (both width and height) to its content. The right inner DIV (which contains a Google Map) should have the same height as the left one while filling up the remaining width of the container.
<div id="container">
<div id="left">
This DIV should adjust<br/>
both its width and height<br/>
to its content, not taking up<br/>
more space than needed!<br/>
<br/><br/><br/>
More content here...
</div>
<div id="right">
Google Map here.
</div>
</div>
I've tried everything I know and all tricks I've found, but no success!
#container {
background-color: #EEE;
overflow: hidden;
}
#container div {
border: 1px solid black;
padding: 5px;
}
#left {
background-color: lightblue;
display: inline-block;
float: left;
}
#right {
background-color: lightgreen;
height: 100%; /* THIS IS WHAT I WANT, BUT IT WON'T WORK, OF COURSE */
overflow: hidden;
}
I've found many similar questions, but in all those cases the left DIV/column had a fixed width, which makes it a whole lot easier.
Any input is much appreciated, especially if it works in IE9+ (and modern browsers)!
Edit
Some clarification. The purpose of the right column is to hold a Google map and consequently the map is supposed to fill up the entire DIV. Try setting a fixed height (e.g. 100px) for #right in the fiddle that I link to above and you will see the map showing up.
jsfiddle demo
css :
.container {
overflow: hidden;
background-color: #EEE;
}
.column {
float: left;
background-color: grey;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
p {
padding: 10px;
margin-top: 10px;
width: 50%;
}
html
<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="container">
<div class="column">
This DIV should adjust<br/>
both its width and height<br/>
to its content, not taking up<br/>
more space than needed!<br/>
<br/><br/><br/>
More content here...
</div>
<div class="column">
<div id="map"></div>
</div>
</div>
<p>
The right DIV (which contains a Google Map)
should be the same height as the left DIV,
while filling up the remaining width.
</p>
<p>How to do that?</p>
Here what I came up with -> link
When you remove the overflow property of your #right div it stretches as expected. However in this case you won't be able to hide the overflowed content.
CSS
#right {
background-color: lightgreen;
height: 100%; /* THIS WON'T WORK */ // height works as expected
}