Im trying to align the out of the box Tabs which come with Foundation 5. For some reason by default they are aligned to the left and i cant figure out how i can get these to align to the center of the screen. The code i am working with is fairly simple (the bog standard tab markup)
Example:
<ul class="tabs" data-tab>
<li class="tab-title active">Tab 1</li>
<li class="tab-title">Tab 2</li>
</ul>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="panel2-2">
<p>Second panel content goes here...</p>
</div>
</div>
Live Demo:
http://jsfiddle.net/7YxLg/
So what i am aiming for is for the two tabs to be centered in the middle of the screen instead of to the left can this be done?
I got the tabs to center and play nice with foundation through the following SCSS:
ul.tabs {
text-align: center;
li {
float: none !important;
display: inline-block;
}
}
If you're using plain CSS:
ul.tabs {
text-align: center;
}
ul.tabs li {
float: none !important;
display: inline-block;
}
Benefits: You don't need to specify a width, which can cause problems with responsiveness. You also don't need an extra div. This solution is specific to foundation as well.
Explaination:
Normally, adding text-align: center; to the ul's css would center the li elements. But, foundation's default css adds float: left to li's inside ul.tabs. We clear this with float: none !important and realign the li elements in an inline block.
Sure, using the magic of auto-margins.
Figure out the overall width of the elements, then encase the lot in a div.
CSS:
#tabsDiv
{
width:250px;
margin:0 auto;
}
Then in the HTML, put all your code into that div.
Related
I'm slowly getting to grips with Flex but it has got me confused how I can make all li elements within a ul.list float right. I've read that in order to get the item floating right you simply use margin-left: auto however this only seems to work correctly on the last item, because when I resize the viewpoint to above 1920px or above the gap between the email and telephone number increases... while the left side of the top menu but remains the same distance between each li element.
Here is my HTML:
<header class="ProMenu">
<nav class="row align-middle expanded">
<div class="small-12 medium-4 columns Links">
<ul class="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="medium-4 columns Logo">
<img src="https://placehold.it/64x42" alt="">
</div>
<div class="medium-4 columns Contact">
<ul class="menu">
<li>Phone: 0777123456</li>
<li>Email: jog#blogs.com</li>
</ul>
</div>
</nav>
</header>
And my CSS:
.ProMenu {
background: #0071c5;
width: 100%;
}
.ProMenu .row {
min-height: 60px;
max-width: 100%;
}
.ProMenu ul li a {
color: #FFF;
}
.ProMenu .Logo {
text-align: center;
}
.Contact ul li{
margin-left: auto;
}
JSFiddle:
And to make things easier I've uploaded the code to a online JSfiddle, to replicate make the window big and monitor the distance between both the mobile number and email increases... something that I want to stop.
You want to utilize the foundation .align-right class, which will apply justify-content: flex-end;
https://jsfiddle.net/28btx50v/2/
Remove the margin-left: auto from the last child. Put it only on the second to last child. That will force both elements to the right.
When a flex item has margin-left: auto, it pushes itself away from everything on its left. In your case, that makes sense for the second to last child. But it doesn't make sense for the last child.
That's why when you widen the screen you get a wider separation between the two.
By using margin-left: auto only on the second to last item, you pack both items together and everything shifts right. You can then use regular (numerical) horizontal margins, if necessary, to create space between them.
I've been trying to create a navigation bar that meets the following criteria:
Spans 15% height.
Spans 100% width.
Navigation bar is aligned to the top of the site.
Elements within the navigation bar are vertically centered within it.
The last menu option is aligned to the far right of the navigation bar.
I've been playing with <div> and <ul> to implement the elements. I've spent a lot of time on it and researched it. I can't seem to find a way to vertically center the elements, which are images, if I use a percentage height. I assume this issue is because the <header> and <nav> elements are block elements, as is the div element, being that "vertical-align" only works on inline elements.
Questions, for those wise enough to provide what are probably easy answers:
Can I use "vertical-align" on block elements if I override the "display" element to the "inline" value? It seems like the answer is negative.
Can I right-align one <li> within a <ul> while the other <li> are left-aligned?
The only way I can get it to work is to use fixed height values on the navigation bar as well as padding around the elements. Is that my only option or does anyone know of a way I can make it work with a percentage height?
Basic code to express what I'd like to do (assuming all the <html> and other foundational tags are there, too; and I am aware the code below doesn't work but it shows the basic idea):
<style>
html, body {
height: 100%;
width: 100%;
}
.menu_bar {
display: inline; /* This element seems to mess things up pretty bad so I assume I can't do it
that way. I was only using it so my <ul> would be within an inline element which would allow me
to use vertical-align. */
height: 15%;
width: 100%;
background-color: #000000;
}
.menu_items {
height: 100%;
width: 100%;
}
.menu_logo {
vertical-align: middle;
text-align: left;
}
.menu_option1 {
vertical-align: middle;
text-align: left;
}
.menu_option2 {
vertical-align: middle;
text-align: left;
}
.menu_option3 {
vertical-align: middle;
text-align: right;
}
</style>
<body>
<header>
<nav>
<div class="menu_bar">
<ul class="menu_items">
<li class="menu_logo"><img src="images/logo.gif"></li>
<li class="menu_option1"><img src="images/option1.gif"></li>
<li class="menu_option2"><img src="images/option2.gif"></li>
<li class="menu_option3"><img src="images/option3.gif"></li>
</ul>
</div>
</nav>
</header>
</body>
I have a task that I initially thought would be easy, but turned out to be quite difficult. I want to be able to detect the height of the current visible window, center some text in that section of visible window, and place a navigation bar at just the end of the window, so a graphic of what it would look the following:
I have tried various ways of doing this, including setting the height of a div to a certain vh level and centering text inside that dif, though that was quite problematic, as vh is not supported in ie 8 and in order to center the text inside the div, many sources told me to do position: absolute, which tended to shift the text to a corner, which I did not want.
Is there a way in which I can create such a display? If I worded anything incorrectly or posted in the wrong place, please let me know. Thanks in advance for any help.
edit: here is the code I am using: http://pastelink.me/dl/b3cb50
Also some snippets of code for clarification:
what I do is I have a div with height of 100vh and width of 100% and an h1 with an id of myTitle (the css for id myTitle just sets the text-align to center)
<div style="height: 100vh; width: 100%"><h1 id="myTitle"> This is a large title!</h1></div>
and a nav bar directly below it, using foundation's nav bar code:
<nav class="top-bar" id="myNav" data-topbar>
<ul class="title-area">
<li class="name"><h1>My Site</h1></li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section"> <!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
EDIT: Many answers were said regarding setting the position of the nav bar to the bottom, and I thank you for that, though I forgot to clarify one thing. I would like for the nav bar to only be at the bottom initially, and when someone scrolls down it moves up, and does not stay fixed to the bottom.
find
<div class="navbar navbar-fixed-top">
...
</div>
and change it to
<div class="navbar navbar-fixed-bottom">
...
</div>
bootstrap has a fixed top and bottom selectors :)
JSBIN
Is this what you need? A table is the most supported method for vertical align in CSS.
.table {
display: table;
min-height: 100vh; width: 100%;
}
.table div {
display: table-row;
}
.header {
height: 90px;
background: #ddd;
}
.header h1 {
text-align: center;
}
.content p {
padding: 0 1em;
display: table-cell;
vertical-align: middle;
}
.footer {
height: 220px;
background: #ddd;
}
So, i'm super new to HTML/CSS. For my class I have to make a portfolio webiste.
I want to be very simple. So, I'm starting off with my name centered in the middle of the page, and then underneath I want it to look like this:
About Graphic Design Studio Art (but, spaced out a little obviously)
Here is my html:
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
</div>
<div id="indexheader"><a rel="title">THIS IS MY NAME</a>
</div>
<div id="links">
<a rel="#about">About</a>
</div>
<div id="links">
<a rel="#design">Graphic Design</a>
</div>
<div id="links">
<a rel="#art">Studio Art</a>
</div>
</div>
</div>
<!-- END: Sticky Header -->
Here is my CSS:
/* Make Header Sticky */
#header_container {
background:transparent;
height:60px;
left:0;
position:fixed;
width:100%;
top: 40px;
text-align: center;
}
#header {
left: 0;
position: fixed;
right: 0;
text-align: center;
top: 160px;
z-index: 999;
float: right;
}
body.top-navigation-position-below-banner #navigation-bottom {
position: fixed;
top: 0;
border-bottom: none;
z-index: 999;
}
#page-header-wrapper {
margin-top: 180px;
}
#links {
height: auto;
width: 100%;
margin-top:30px;
background-color:transparent;
text-align: center;
margin-top: 10px;
margin-left:0%;
padding: 0px;
}
http://jsfiddle.net/r7K26/
I also tried to make it a sticky-header. Not sure if that's right either. IM A HUGE NOOB. Forgive me.
You are closing your div with id #header immediately, so the elements beneath is are not receiving any styling. That might be what you want, but then you have an extra at the end of your html.
You can center your div a lot of ways, but the following should work fine:
#indexheader {display:block;width:100%;text-align:center;}
Good luck!
Well, you don't need that many divs first of all. Look at this, for example:
Html:
<div class="myInfo">
<h1>Your Name</h1>
<ul class="myLinks">
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
And actually, you don't even need a div in this case but regardless, having the class on one div you can style with selectors such as:
.myInfo H1 {....}
.myInfo UL {..}
etc
or just
.myLinks {} for the url and then:
.myLinks li {} for the list items.
I know this is a fast answer but as you are learning, I think it might be better to 'sort of' give you some pointers instead of just doing it all, right?
:)
You're very close, and here's one solution using your code as a base. Try this styled JSFiddle and see if its what you need. Please feel free to play around with the code, and hit the Run button when you are ready to see the results. http://jsfiddle.net/TalkingRock/MAuzN/
The structure:
The html code is simplified by using "header_container" to wrap the entire header (title and menu). The "indexheader" is placed in its own div. A new menu div now contains/wraps only the menu items.
<div id="header_container">
<div id="indexheader">THIS IS MY NAME</div>
<div id="menu">
<div class="links">About</div>
<div class="links">Graphic Design</div>
<div class="links">Studio Art</div>
</div> <!-- end menu -->
</div> <!-- end header_container -->
The CSS
Inline-block is used to shrink wrap, center, and display the menu items in a single line. Inline-block has a natural 4px margin around each item, and that can be removed by removing the white space in-between each inline-block item in the html code. You'll also need to add "vertical-align:top". Inline-block is a good style to learn, has good browser support, and comes in handy.
#header_container {
margin:0px;
padding:0px;
border:0px;
min-height:80px; /* use min-height so the div will expand around the contents, regardless of height. */
width:100%;
background-color:transparent;
position:fixed;
top:40px;
}
#indexheader {
text-align:center;
padding:10px;
}
#menu {
text-align:center; /* text-align center works because of the inline-block */
}
.links {
display:inline-block;
vertical-align: top
}
Good article on lnline-block: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
Inline-block support: http://caniuse.com/#feat=inline-block
Here are a few other articles you'll find useful. CSS Fixed Menus:http://www.w3.org/Style/Examples/007/menus.en.html
The Z Index: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
Note: The div that holds your contents needs a top padding or margin tall enough to make sure it isn't covered up by the fixed menu. Position fixed will be buggy in touch devices, especially handheld phones. In your original code there is an extra div in your html, id's can only be used once per page, use href for your links, and "backgound-color:transparent" (transparent is the default style).
I'm making a list view control shuttle with add/remove buttons
Something like a control similar to this VB (gross) image example I found:
but with only the add > and remove < buttons vertically aligned in the middle.
First I tried floating to accomplish the side by side uls and buttons, but I couldn't take care of vertically positioning the buttons in the center of the container.
I looked into a solution using inline-block with vertical-align: middle, which works if I applied it to all containers. However, I want the uls aligned to the top.
<div class="wrapper">
<div class="inblock vert-top">
<ul>
<li>item list view</li>
<li>...</li>
</ul>
</div>
<div class="inblock vert-middle">
<div>
<button>></button>
</div>
<div>
<button><</button>
</div>
</div>
<div class="inblock vert-top">
<ul>
<li>item list view</li>
<li>...</li>
</ul>
</div>
</div>
.wrapper {
vertical-align: middle;
}
.inblock {
display: inline-block;
/* IE 7 hack */
*zoom:1;
*display: inline;
}
.inblock.vert-top {
vertical-align: top;
}
.inblock.vert-middle {
vertical-align: middle;
}
http://cssdesk.com/2ZCAe (similar to jsFiddle)
Using .inblock.vert-middle does not work for the second ul, when it is applied, it sends the button container to the top. However, using .inblock.vert-middle for the second ul displays how I want it, but it doesn't make sense.
How do I fix the CSS so it makes sense for the second ul, or how do I vertically align these buttons correctly?
Maybe it's not the most elegant solution, but a table would do the job. vertical-align: middle applied to display: table-cell elements will cause the content to center vertically.