I'm trying to make the menu appear at the middle of 30px line but the problem is that I cannot move it from the top unless I use display: table-cell.
What is wrong here?
Style sheet file:
div.menu
{
width: 600;
height: 30px;
border: 1px solid black;
margin: 0px auto;
text-align: center;
vertical-align: bottom
}
The menu code in my html file:
<div class="space"></div>
<div class="menu">
Home
Home
Home
Home
Home
</div>
<div class="space"></div>
line-height: 100px; set the height of your menu line. But keep enough space in horizontal dimension, otherwize you will get crazy view. Look forward to min-width, width or overflow-x rules.
div.menu
{
width: 600px;
/* Use line-height instead of height */
line-height: 30px;
border: 1px solid black;
margin: 0px auto;
text-align: center;
}
div.menu a {
vertical-align: middle;
}
setting the line-height to the desired value fixes the issue but it is not a correct way to do it. It is just a hack. The correct way is to use vertical-align property (for all the anchors inside the menu div)
.menu a {
vertical-align: middle;
}
Check this fiddle. http://jsfiddle.net/sfz7d/
Tell me if it works for you.
Related
I have an svg img I got from thenounproject.com (don't worry, I have a place on my site where I give credit to the creators of the images) which I have inside a div. I have set the CSS of the div to have overflow: hidden; however the img is stickout out of the bottom, changing the height of the containing div above the div the svg img is contained it.
Here is the photo of the end result so far (the blue overlay is the <img> object being viewed with firebug so you can see how it is sticking out beyond the white div containing it)
the code I have is:
HTML
<div class="dropdown">
<div class="box edit"><img src="../media/gear.svg"/></div>
</div>
CSS
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
}
.box.edit{
float: right;
padding: 0px;
}
I'm trying to get it so that the "blueish" overlay in the photo, which represents the svg img, does not extend beyond the white box
UPDATE
Thank you all for your answers. I though I would update this to narrow down my question now that I have gotten your feedback. I've tried removed float: right; and the other ideas (remove the border: 0px solid transparent;) but, while helpful, they did not solve the problem.
I currently have transform: rotate(90deg); applied to .box.edit so that way at least the overflow is inline with the rest of the .dropdown bar.
I've tried max-height: 100% and width: 100%; height: auto; etc. but that does not solve my problem. I do not need the entire svg in the box, only what you can see in the photo above (the gear). The part below that has copyright bit from thenounproject.com (see my above statement, I am still following their rules on using photos).
I don't know if I will need to edit the svg file or what, but I was trying to use overflow: hidden; to cut off the end bit (so it does not affect my spacing).
Thank you for your assistance so far.
try this remove border
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
/*border: 1px solid transparent;*/
border-radius: 2px;
cursor: pointer;
}
Remove the float from .box and use display: inline-block instead
Hi he is working and now you can define your img css width and height 100% as like this
.dropdown .box > img {
vertical-align: top;
width: 100%;
height: 100%;
}
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
}
.box.edit{
float: right;
padding: 0px;
}
.dropdown .box > img {
vertical-align: top;
width: 100%;
height: 100%;
}
<div class="dropdown">
<div class="box edit"><img src="http://i.stack.imgur.com/8wc74.png"/></div>
</div>
So unless I am reading this wrong the height and width attribuite would work wouldn't it?
Code would be like this and then you would just adjust the height and width according to what you would need..
<div class="dropdown">
<div class="box edit"><img src="../media/gear.svg"/ height="42" width="42"></div>
</div>
As of now your image height is exceeding more than the height of its container due to which it is showing overlay going out of its container. Well applying max-height:100%; to image will make your image to stay within it's parent container, so give it a try.
I have finally found what the problem was with this:
Upon further research, I found that a <svg> has an attribute called "viewBox," which controls how much of the <svg> is shown. The <svg> I was using had a viewBox setting of "0 0 100 125," which basically means the width of the <svg> was 100 and the height 125. Upon finding this, and reducing the height to 100, the <svg> became a proper square and did not stick out further than it's containing div.
Thank you everyone for your answers, a lot of them were good and helpful.
My pen
http://codepen.io/helloworld/pen/dqGDk
I want to vertically align 3 divs inside a wrapper div. Each of the 3 divs should have a height of 33%. I can make the layout work when the divs has a height of 33px but I need it as percentage because the wrapper div`s height changes dynamically. Sometimes its 100px height, sometimes 70px etc...
I just want that all 3 are always correct align by using percentage height.
What is the approach aligning divs with percentage?
HTML
<div id="wrapperDiv" style="height:100px;">
<div id="navigationWheelerContainer">
<div id="navigationWheeler" >
<div id="previewTemplate" >1</div>
<div id="previewTemplate" style="background-color: #0094ff;">2</div>
<div id="previewTemplate" >3</div>
</div>
<div id="toggleButtonRight" >◄</div>
</div>
</div>
CSS
#navigationWheeler {
height: 100%;
text-align: center;
width: 100%;
vertical-align: middle;
border: black solid 1px;
background-color: lightgray;
display: inline-block;
}
#navigationWheelerContainer {
float: right;
height: 100%;
}
#previewTemplate {
vertical-align: middle;
line-height: 33%; /* 33px; works but is not dynamic to the wrapper div */
}
#toggleButtonRight {
width: 40px;
border: black solid 1px;
cursor: pointer;
text-align: center;
}
I use flex-box, works way better the list items plus you can place ul,ol,il in flex-box.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
It's much easier if you change to use an unordered list. Also the ID previewTemplate should be a class as the ID has to be unique.
HTML
<div id="wrapperDiv" style="height:100px;">
<div id="navigationWheelerContainer">
<ul id="navigationWheeler" >
<li class="previewTemplate" >Testing</li>
<li class="previewTemplate" style="background-color: #0094ff;">2</li>
<li class="previewTemplate" >3</li>
</ul>
<div id="toggleButtonRight" >◄</div>
</div>
</div>
Then in your CSS you can set .previewTemplate in the CSS to have a height of 33%. Also add list-style: none; to get rid of the bullets. Then in #navigationWheeler set padding-left: 0; to get rid of the spacing.
CSS
#navigationWheeler {
height: 100%;
text-align: center;
width: 100%;
vertical-align: middle;
border: black solid 1px;
background-color: lightgray;
display: inline-block;
padding-left: 0;
}
#navigationWheelerContainer {
float: right;
height: 100%;
}
.previewTemplate {
height: 33%;
list-style: none;
}
#toggleButtonRight {
width: 40px;
border: black solid 1px;
cursor: pointer;
text-align: center;
}
Now when the height of your #wrapperDiv changes the li with class .previewTemplate will change it's height.
Here's a working JSFiddle. Also you should avoid using inline CSS. Have all your styles inside your CSS file. Makes it easier to manage in the long run.
EDIT Adding padding-left: 0 to the CSS for the #navigationWheeler
EDIT Updating the JSFiddle to take in account the padding-left for the <ul>
Try using list items instead of div's. You can easily style and their syntax is more focused on alignment then a div. Also, Your wrapper div's need to be a percentage as well, you can't do a 10% height in a 100px wrapper div..
Problem
So I'm creating a simple navigation menu which contains a div of a tags. Currently it looks like this:
The follow are my HTML and CSS:
HTML
<div id="tabcontent-container">
<div class="tabcontent-menu">
WLAN Jumpstart
Mobility
Guest Access Jumpstart
</div>
</div>
The CSS
#tabcontent-container { padding: 15px 0px; position: relative; text-align: center; border-radius: 25px; -webkit-border-radius: 25px; }
.tabcontent-menu {}
.tabcontent-menu a { text-decoration: none; color: white; font-size: 30px; border-right: 1px solid white; line-height: 33px; padding: 0 22px; display: inline-block; width: 200px; height: 70px; vertical-align: top; }
.tabcontent-menu a:last-child { border:none; }
.tabcontent-menu a:hover { color:#000; }
Working example on Jsfiddle.net
The Question
I'm wondering if there is an easier way to align the middle "Mobility" a tag to the middle. The other two links look fine because they are double line. I purposely made them double line for a reason, and now just need the middle one to middle align some how.
Any suggestions?
You can use vertical-align: middle to adjust the position vertically. Since that only works on table cells, set display: table-cell for the .tabcontent-menu a
http://jsfiddle.net/H9VHs/8/
I usually accomplish something like this by varying the line-height.
.tabcontent-menu a.midline {
line-height: 64px;
}
See it here: http://jsfiddle.net/PZVnq/
Documentation/Further Reading
CSS line-height on MDN - https://developer.mozilla.org/en/CSS/line-height
Lauri Raittilan on Vertical centering with CSS - http://www.student.oulu.fi/~laurirai/www/css/middle/
Vertical centering with CSS on vanseodesign.com - http://www.vanseodesign.com/css/vertical-centering/
I am trying to center align an image that is wrapped in a <span>, but I am having trouble doing so. I have uploaded my CSS and HTML to jsfiddle: http://jsfiddle.net/7nHhu/1/
I am trying to get the image to center align itself with the content in a "block" style (ie. all text above and below it, not wrapped to the left or right)
Any help would be greatly appreciated.
.imgframe {
border: 1px solid #EAEAEA;
display: inline-block;
margin: 8px;
}
.imgframe img {
border: 1px solid #FFFFFF;
margin: 0;
background: #F6F6F6;
padding: 8px;
-moz-box-shadow: 2px 2px 5px #CCCCCC;
-webkit-box-shadow: 2px 2px 5px #CCCCCC;
}
<span class="imgframe centerimg"><img src="http://i48.tinypic.com/31368e9.jpg" /></span>
I think it's more appropriate to use text-align for centering text rather than images. You could center an image by setting left and right margin auto.
img {
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
padding-top: 10px; //margin-top doesn't work
}
Demo
Just make image wrapper block level element and text-align:center; it.
FIDDLE
or wrap it in another element if needed;
FIDDLE
In .imgframe, add width: 100%;
Given your requirements, to keep the .imgframe element in-line, to avoid it taking up the full width of the enclosing element, and working without adding wrapping elements to your mark-up, the following works:
body {
text-align: center;
}
body p {
text-align: left;
}
JS Fiddle demo.
This would, probably, be less intrusive if you had the elements from your Fiddle wrapped in a specific, target-able, element; rather than the body, as the method, above, requires you to reset the text-align for all elements contained within the body. So, personally, I'd use:
<div id="contentWrapper">
<p>...</p>
<span class="imgframe">
<img src="..." />
</span>
<p>...</p>
</div>
And:
#contentWrapper {
text-align: center;
}
#contentWrapper p {
text-align: left;
}
Just in order to minimise the amount of work required to tidy up afterwards.
span {position: absolute; top:0; left: 0; width: 100%; text-align: center;}
img {width:yourimagewidth; heigth: width:yourimageheigth}
I have a <div id="content">, which contains <div id="sub-navigation> and <div id="main container">, which themselves are inline-blocks. I would like to be able to make the main container fill the rest of the available page width. Is that possible?
I need columns-strip to expand or shrink based on the number and width of column elements. If the width of the columns-strip exceeds the width of the main container, then a horizontal scroll bar should appear.
* {
margin: 0px;
padding: 0px;
font-size: 10pt;
white-space: normal;
}
#wrapper {
margin: 0px 20px;
background-color: red;
}
#header {
margin: 25px 10px 10px 10px;
height: 50px;
background-color: purple;
color: white;
}
#content {
margin: 10px;
padding: 10px;
font-size: 0pt;
white-space: nowrap;
overflow: hidden;
background-color: white;
}
#sub-navigation {
width: 200px;
height: 150px;
display: inline-block;
vertical-align: top;
background-color: forestgreen;
color: white;
}
#main-container {
padding: 10px;
display: inline-block;
overflow: auto;
background-color: yellow;
}
#columns-strip {
padding: 10px;
font-size: 0pt;
white-space: nowrap;
background-color: mediumturquoise;
}
.posts-column {
margin: 0px;
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
overflow: auto;
}
#footer {
margin: 10px 10px 25px 10px;
height: 50px;
background-color: navy;
}
<div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="sub-navigation"></div>
<div id="main-container">
<div id="columns-strip">
<div class="posts-column" style="background-color: lightgray;"></div>
<div class="posts-column" style="background-color: darkgray;"></div>
<div class="posts-column" style="background-color: gray;"></div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
You have to remove the inline-block styles and float the #sub-navigation div. inline-block is not suited for what you are trying to achieve. When you add no display styles, the div element will be the default value which is block, block elements take up all the available space by default. By floating the #sub-navigation element you make it only take up the space required for its contents.
#sub-navigation {
width: 200px;
height: 150px;
float : left;
vertical-align: top;
background-color: forestgreen;
color: white;
}
#main-container {
padding: 10px;
overflow: auto;
background-color: yellow;
}
make sure to add a clear: left element after the #main-container
That's not how inline-blocks are supposed to be used. Best thing to do here is make your navigation box float:left and leave the default display value alone.
If your header, footer and wrapper have specific widths, then yes, you can have your main-container fill the available space. But if you're not specifying widths in your CSS, then you need to determine how big your main-container CAN be based on the rendered width of the containing element (wrapper). The only way to determine that width after the page loads is with javascript. If you want your site to have a dynamic width but still have your content (sub-navigation and main-container) fill the screen, you would either need to use javascript or percentages, and percentages can get ugly when you start looking at varying resolutions of monitors, laptops, etc...
Ever heard of flex box model!!
It is made just for that.
Note in flexbox model all child elements act as flex box model you cant opt out certain things. Which mean if page has navigation and under it content div + side div. You can't make top navigation out of it. Which has implications. So solution is to have all things only that need flex box in one div.