I am trying to make a number of columns the same height, and have decided to go down the display:table CSS route.
<div class="header" style="display: table; width: 100%; background-color: yellow">
<div class="title" style="font-size: 30px; display: table-cell;">Navigation Title</div>
<div class="navigation" style="display: table-cell;">
<a class="navigation-link" style="background-color: red">Home</a>
<a class="navigation-link">About</a>
<a class="navigation-link">Contact</a>
</div>
</div>
I would like the navigation-links to the the full height of the header table (so as to add background-color to them), but the navigation seems to have some padding automatically added to the top and bottom. How would i set the height of navigation, and navigation-links to be the height of the header table.
I have tried using height:100% in various places but that did not seem to work (I am probably missing something). Here is a diagram to show what i mean:
Try to play with display: inline-block;, vertical-align: top;, padding-top and height of your navigation links:
.navigation {
...
vertical-align: top;
}
.navigation-link {
...
display: inline-block;
height: 100%;
padding: 7px 5px;
}
Demo: http://jsfiddle.net/y8AF5/
This seems to solve your problem : DEMO
CSS
.navigation > a {
display:inline-block;
border:1px solid #CCC;
line-height:2.5em;
}
What you have done so far is styling the classes but no styling was done for a tag.
Now, the trick is to change the display type of a and using line-height to provide appropriate spacing of full height!!!
Related
I keep reading articles that floats are outdated and that using inline-block solves problems such as having to use clearfix and a few more. These articles go on to justify inline-block by showing the same example: three squares that are aligned middle. In trying to use inline-block to create a navbar, I come across many problems. My navbar layout looks like such:
<nav id="main-nav" class="navbar">
<div class="logo">
<!-- image -->
</div><!--
--><div class="navbar-header"><!--
--><button type="button" class="navbar-toggle closed">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars"></i>
</button>
</div>
<div class="navbar-collapse navbar-sidebar">
<ul class="navbar-nav">
<!-- list-items -->
</ul>
</div>
</nav>
In order to align the logo left and the navbar-toggle button right, I had to use text-align justify and some special markup, which I find just as obtrusive as clearfix (Align two inline-blocks left and right on same line):
.header {
text-align: justify;
/* ie 7*/
*width: 100%;
*-ms-text-justify: distribute-all-lines;
*text-justify: distribute-all-lines;
}
.header:after{
content: '';
display: inline-block;
width: 100%;
height: 0;
font-size:0;
line-height:0;
}
.logo {
display: inline-block;
vertical-align: top;
}
.navbar-header {
display: inline-block;
vertical-align: middle;
}
My navbar is very similar to Bootstrap's. At small screen sizes, I want my navbar-toggle button to be centered in the navbar area. Vertical align: middle, however, would align this button to the middle my logo, which will be shorter or taller than the navbar, and which I also want aligned to the top of the navbar. Inline-block doesn't allow me to vertically align my content to the parent container, which seems to make it a non-viable option in many layouts. Is there some sort of solution where I can align my content to the container, rather than the sibling elements? I've been experimenting with setting different line heights and vertical-aligns.
If you have followed the comments above, there are many question being asked. I'll try to summaries most of it.
For display:inline-block, the vertical-algin property only affects the position of the element itself, and relative to the position of the siblings (the tallest sibling especially).
Percentage height like height:100%, only works with fixed height of parent container, or all percentage height that is set all the way back to <html> tag. But excluding positioned (relative, absolute etc.) elements, and viewport units vh, and maybe some other cases.
For display:table-cell, the vertical-algin property affects all the child elements, again excluding some positioned ones.
I think CSS table is easiest way to get your desired layout done in this case. Since you can easily have both vertical and horizontal alignments set on it. Here is a simplified workaround.
JsFiddle Demo
.nav {
border: 1px solid red;
display: table;
width: 100%;
}
.nav > div {
display: table-cell;
vertical-align: middle;
}
.logo img {
display: block;
}
.menu {
text-align: right;
}
.menu span {
border: 1px solid blue;
}
<div class="nav">
<div class="logo">
<img src="//dummyimage.com/50"/>
</div>
<div class="menu">
<span>Menu</span>
</div>
</div>
I used the two border options to round various buttons in my site and because of this, they now cascade by roughly one line break. (See image: http://gyazo.com/14af343dea8b280262f6c88465659c42 )
The HTML and CSS is pretty much the same for each button, so I posted an example. Any ideas on why this is happening (I imagine it's the div tags) and how I can stop it?
EDIT - JS Fiddle upload: http://jsfiddle.net/4phcS/
CSS:
#linkwordpress
{
color:white;
background-color:#5C0DAC;
font-family:Arial, Sans-Serif;
font-size:18px;
text-align:center;
width:100px;
height:30px;
position:relative;
top:-90px;
left:500px;
line-height:28px;
border:2px solid;
border-radius:25px;
}
HTML:
<div id="linkwordpress">
Wordpress
</div>
Don't use id's (#), use classes instead as follows:
.header {
color:white;
text-align:center;
background-color:#5C0DAC;
font-family:Arial, Sans-Serif;
font-size:30px;
padding:0px;
margin-bottom:10px;
height:38px;
width:800px;
border:2px solid;
border-radius:25px;
display: inline-block;
}
And use display: inline-block.
<div class="header">
Leon's CS150 Assignment
</div>
<div class="header">
Leon's CS150 Assignment 2
</div>
Your question is a little vague, but if I had to guess I would say that the fact that you are using a div is probably why.
Divs inherently have a display:block. Try changing the display to inline or inline-block.
#linkwordpress
{
color:white;
background-color:#5C0DAC;
font-family:Arial, Sans-Serif;
font-size:18px;
text-align:center;
width:100px;
height:30px;
position:relative;
top:-90px;
left:500px;
line-height:28px;
border:2px solid;
border-radius:25px;
display:inline;
}
or if your id #linkwordpress is just a container then add the display:inline; or display:inline-block; to the anchor inside of the div instead like so:
#linkwordpress a {
display:inline-block;
}
The best solution would be to remove the <div> from around the anchors entirely and negate the problem you are suffering with the display property. Like this:
<nav>
<div>
<a class="Menu-Item" href="#">Home</a>
<a class="Menu-Item" href="about.html">About</a>
<a class="Menu-Item" href="cv.html">CV</a>
<a class="Menu-Item" href="../wordpress">Wordpress</a>
<a class="Menu-Item" href="../webshop/catalog">Webshop</a>
</div>
EDIT:
After examining your code I noticed several issues you were running into that were breaking the navigation. I've attached a new JSFiddle that I think accomplishes what you are looking for and will attempt to explain some of the changes below:
http://jsfiddle.net/Incredulous/j4ZbT/
You had free floating elements in your <div id="container"> that needed to be put into another div and treated as a column.
I added 2 divs to your code:
<div id="col2">
<div id="sideboxhead">Who am I?</div>
<!-- lots of content here -->
</div>
<div id="col1">
<div id="header2">Home</div>
<!-- lots of content here -->
</div>
Then added the matching CSS to treat these as columns:
#col1 { float:left;width:644px;}
#col2 { float:right; width:145px;}
I also altered all of the width properties of divs in #col1 so that I could apply the width to the entire column instead.
I removed all of your top:XXpx; values because you were artificially attempting to create/reduce space and instead added a margin value to the nav element that can be negative instead.
Lastly I removed all of your left values and instead added float to the columns. If you still want the offset of your center content area you can add another container div around both of the #col2 & #col1, make its width less, then change the width of #col1 by the difference of old width - new width.
Hope this helps.
Update:
After reading your comment, the reason your items are vertical rather than horizontal is because the element that contains your navigation requires one of these two tags:
display: inline;
display: inline-block;
Those two items force the items to remain on the same line, rather then constantly drop to a new line. Think of a nesting doll, each doll is one layer deep diving further and further into the doll. Same applies to html, so to counter act that line drop per an element you modify the dimensions, float, or display to cater the design to your entire goal.
I'm still not entirely sure what your attempting to create, or do. Is this more inline of what your trying to accomplish? Fiddle
When you look at the code it isn't all that much different then yours. One of the primary differences, is that nav is simply a div but it is anchoring to the parent element. In this case header. So I define this element as a position: absolute; which will allow more finite control over the entire menu structure.
Then for large menu's and refactoring sometimes it is better to utilize a div over the traditional ul or plain a href. This will add a higher level of control yet again over your menu structure.
Also you'll notice that I don't use Id. That is because an Id is only allowed on a single page, it is unique. Which means it can't be utilized more than once. A class can be, which is more inline for a repetitive values throughout your page.
I'm still not entirely sure of your goal and or poor wording of the question, but hopefully this points you in the proper direction:
header {
width: 100%;
height: 100px;
background: #5C0DAC;
}
h3 {
font-family: Arial, Sans-Serif;
color: white;
text-align: center;
}
nav {
width: 100%;
height: 10%;
position: absolute;
left: 85px;
}
.Menu-Item {
width: 100px;
height: 30px;
padding: 10px 35px;
border-radius: 25px;
display: inline;
margin: 0px 15px;
box-shadow: 0px 3px 6px 0px;
position: relative;
}
a {
font-family: Arial, Sans-Serif;
text-align: center;
line-height: 28px;
color: white;
}
The html:
<header>
<h3>Leon's CS150 Assignment</h3>
<nav>
<div class="Menu-Item">
Home
</div>
<div class="Menu-Item">
About
</div>
<div class="Menu-Item">
CV
</div>
<div class="Menu-Item">
Wordpress
</div>
<div class="Menu-Item">
Webshop
</div>
</nav>
</header>
I'm building a responsive page that has an image and <div> side by side:
The width and height of the image retain their proportions and expand/contract with the browser window.
The width of the <div> does the same, but I'd like it to match the image in terms of height.
Is there any way of achieving this? Here's a Fiddle of the problem: http://jsfiddle.net/alecrust/xwJHw/
You can use display:table property for this. Write like this:
section{
display:table;
width:100%;
}
.text-box,.image{
display:table-cell;
vertical-align:top;
}
Check this http://jsfiddle.net/xwJHw/8/
Note: display:table works till IE8 & above.
You can use jQuery.
Calculate the hight of the image using $('#imgId').height() and the set the same to Div.
Also see the code, how heights are adjusted here http://filamentgroup.com/examples/equalHeights/
EDITED:
#alecrust: This is a fine solution and also implemented in your fiddle, See Here
A pure css solution: SEE DEMO
CSS:
#wrapper {
overflow: hidden;
background: #ccc;
}
.placeholder_image {
float: left;
width: 430px;
height: 264px;
background: #fff;
padding: 0 20px 0 0;
}
.placeholder_text {
background: #ccc;
margin-left: 450px;
display: block;
}
HTML:
<div id="wrapper">
<div class="placeholder_image">
<img src="http://www.qesign.com/templates/designs/christmas-after-effects-animated-e-card-template-31966.jpg" alt="" />
</div>
<div class="placeholder_text">
A block of text
</div>
</div>
I'm trying to use display: table with fieldset, but it's not scaling properly. The same thing works if I change <fieldset> to <div>.
I tried with Safari and Firefox.
Am I missing something?
http://jsfiddle.net/r99H2/
Basically, the default rendering of fieldset can't actually be expressed in CSS. As a result, browsers have to implement it in non-CSS terms, and that interferes with application of CSS to the element.
Pretty much any element that can't be recreated using pure CSS will have issues of that sort.
The fieldset is an element with special behavior, so it is likely for this issue to occur.
Add another div wrapper inside your fieldset wrapper, and use the div. Change fieldset back to normal, or block.
<fieldset style="background: pink; width: 100%">
<div style="display: table; width: 100%">
<div style="display: table-cell; background: red; width: 33%">a</div>
<div style="display: table-cell; background: green; width: 33%">b</div>
<div style="display: table-cell; background: blue; width: 33%">c</div>
</div>
</fieldset>
When you change the width of the fieldset, you are changing the size of the border of it. Its function is to group elements and draw a border around them. Its size doesn't affects the content inside it. So, follow this.
.fieldset {
display: table;
padding:0;
border:none;
}
.div {
display:table-cell;
border: 1px solid black;
width:calc(100vw * 1/3);
}
<fieldset class="fieldset">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
</fieldset>
I need to make <div> displayed inline and hide them with "overflow: hidden" for their parent.
Width for <div> is set to 20% with "box-sizing" property, so they are exactly 20% of their parent width.
The usual method, using "float: left" doesn't help, because it makes only 5 <div> displayed in one line, and the rest of them shown in new line under the first 5 <div>.
How to make all <div> displayd inline and hide the rest of them if they are too wide to be shown inside of their parent, using "overflow: hidden"?
I have the following document structure:
<body>
<div class="column">
<div class="header">Some text</div>
<ul class="item_list">
<li class="simple">Some text<br></li>
<li class="simple">Some text<br></li>
<li class="simple">Some text<br></li>
...
</ul>
</div>
You can see what I mean here. But I've made it using javascript (setted for <div> "position: absolute" and generated "margin-left" for each elemet) and it causes great problems for future development.
DEMO: http://jsfiddle.net/marcuswhybrow/7YDfE/3/
Use display: inline-block and white-space: nowrap in combination:
<div class="wrapper">
<div class="inline"></div>
<div class="inline"></div>
<div class="inline"></div>
</div>
Then use the appropriate CSS:
div.wrapper {
width: 200px; /* or whatever */
overflow: hidden;
white-space: nowrap;
}
div.inline {
display: inline-block;
}
The demo contains a little jQuery animation to illustrate the effect:
DEMO: http://jsfiddle.net/marcuswhybrow/7YDfE/3/
If the div elements are display: inline then applying white-space: nowrap; to the parent element will prevent their wrapping to new lines.
Since you have a known number of divs, have you tried using absolute positioning instead of floats, and specifying left:20% left:40%, etc.?
If you set the container div's height to a fixed value, and give all the inner elements display: inline-block, this should do the trick. inline-block will make each element align to the left, but keep it's dimensions, while the fixed height container will hide any that overflow to a new line.
This will do what you want with the addition of removing the white space between while allowing nice code formatting. The container gets font-size:0px ftw.
Markup
<div class="wrapper">
<div class="inline">Some text </div>
<div class="inline">Some sample text </div>
<div class="inline">Some Other text </div>
</div>
CSS
div.wrapper {
width: 250px; /* or whatever */
overflow: hidden;
white-space: nowrap;
border: 1px solid red;
font-size:0px;
}
div.inline {
display: inline-block;
width: 80px;
height: 20px;
background-color: black;
color:white;
margin: 0; padding: 0;
border: 1px solid blue;
font-size:12px;
}