So I am creating this website, With a top navigation menu, a left navigation menu and a main content container, all made with bootstrap. The problem is, I can't get the text in the top navigation menu and the left navigation menu to center vertically. I assume both have the same problem, so I will only show the code of the left menu:
HTML:
<div class="row">
<div class="col-md-3 z-overview-left-menu">
<ul class="z-left-list">
<li class="z-left-list-item"><span class="z-test">One</span></li>
<li class="z-left-list-item z-selected">Two</li>
<li class="z-left-list-item">Three</li>
</ul>
</div>
<div class="col-md-9 z-overview-main-menu">
</div>
</div>
CSS:
.z-selected {
background-color: rgb(255, 216, 0);
}
.z-left-list {
vertical-align: middle;
padding-left: 0;
list-style: none;
}
.z-left-list-item {
display: block;
vertical-align: middle;
height: 7%;
font-size: 150%;
border-bottom: 1px solid black;
}
Simplified Jsfiddle: Jsfiddle
So what am I doing wrong? I already tried adding display: table to the z-left-list and display: table-cell to the z-left-list-item classes.
Try something like this:
<div class="z-overview-left-menu">
<ul class="z-left-list">
<li class="z-left-list-item"><span class="z-test">One asdfasd fasd fasdf asdf asdf</span></li>
<li class="z-left-list-item z-selected"><span>Two</span></li>
<li class="z-left-list-item"><span>Three</span></li>
</ul>
</div>
.z-left-list {
padding-left: 0;
list-style: none;
}
.z-left-list-item {
width:100%;
display: table;
vertical-align: middle;
height: 60px;
font-size: 150%;
border-bottom: 1px solid black;
}
.z-left-list-item span {
display:table-cell;
vertical-align:middle;
}
https://jsfiddle.net/fekfrwoz/7/
I would strongly recommend that you use the navbar classes. See here. This will make your code easier to maintain, and will take advantage of a lot of jscript coding done by Bootstrap to make those navbars work. For example, on a mobile screen, navbars will collapse into the hamburger icon (the three stacked horizontal bars that give you a pulldown). In my latest web app, I have two navbars (although located different from what you describe), and it works great.
If you know your list items will only have one line of text, you could always just add line-height to the .z-left-list-item class definition.
https://jsfiddle.net/fekfrwoz/1/
You could remove the height of the .z-left-list-item and use padding on the top and the bottom of the li, like so:
padding: 35px 0;
Which would emulate them being in the center of the li?
Related
I'm creating a horizontal nav bar in CSS and would like the icons to be placed in the following order from left to rigiht: +Matthew, Gmail, Images, 3x3 Square Block, Alarm Clock, Google Plus, Smiley Face. The problem is that the 3x3 Square Block always locates to the far right and does not fit in with the rest of the list. The block was created using a separate div and blocks with CSS. How do I make it so that I can place it as the fourth item from the left? Also, I am struggling to properly align my Google Plus icon with the rest of the list items. Whenever I try to set a seperate padding for the icon, it moves all of the icons down as well. Here's my code:
<ul>
<li><a class ="headerLink matthew" href="#home">+Matthew</a></li>
<li><a class ="headerLink gmail" href="#news">Gmail</a></li>
<li><a class ="headerLink images" href="#contact">Images</a></li>
<li>
<div id="googleApps"> <a href="https://www.google.com/drive/">
<div class ="googleDocs"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
</div>
<li> <a class="headerLink alarm" href="https://www.nba.com">☎</a> </li>
<li><img class="headerLink googlePlus" src="http://www.siam.org/publicawareness/images/Google-plus-icon.png">
<li><a class="headerLink profPic" href="https://plus.google.com/+MatthewThrasher/posts">☺</a></li>
</ul>
#googleApps {
height:20px;
width:20px;
position:relative;
float:right;
}
#googleApps:hover .square {
background-color:black;
}
.headerLink {
font-size: 12px;
color:#989898;
text-decoration:none;
font-family:"Arial", arial, sans-serif;
padding-left:30px;
}
.matthew:hover, .gmail:hover, .images:hover {
text-decoration:underline;
}
.square {
background-color:#737373;
float:left;
position: relative;
width: 30%;
padding-bottom: 30.66%;
margin:1.66%;
}
.square:hover {
background-color:black;
}
.driveLink {
width:20px;
height:20px;
background-color:white;
color:white;
/*Important:*/
position:relative;
}
.alarm {
font-size: 25px;
}
.googlePlus {
height: 30px;
width: 30px;
}
.profPic {
font-size: 30px;
}
I'm not sure if you have more CSS in your document but you're missing a bit of CSS to actually make your menu horizontal.
You can make it horizontal by adding to your CSS:
li {
display: inline-block;
}
Extra properties in your CSS was pushing your squares to the side.
Remove float:right and it should align properly.
Pretty much everything else was caused by missing closing tags.
I fixed up the code and made comments where they were missing: http://jsbin.com/letuwahuqe/1/edit?html,css,output
Just some tips as you continue coding - you should really pay attention to your formatting and syntax. Not sure how you're working on your stuff but the code you copy and pasted here has a lot of inconsistent spacing in both HTML and CSS. This makes it really hard to catch mistakes like missing tags and especially difficult for other people looking at your code to understand.
I recommend using something like Sublime Text (it's free!) which will make your life a lot easier!
You can do this by adding the following CSS to your code:
li {
display: inline;
}
I think this will do it!
I also resized your icon:
<img class="headerLink googlePlus" src="http://www.siam.org/publicawareness/images/Google-plus-icon.png" style="height: 20px; width: 20px;">
I'm trying to center a bordered READ MORE link on a web page, but haven't succeeded yet. The link still sits on the left of the page:
I'm using Twitter Boostrap and that's how the HTML looks like:
<div class="container">
<h2 class="more">read more</h2>
</div> <!--end container-->
And the CSS:
#process .more {
border: 1px solid #392e2e;
padding: 15px;
display: inline-block;
margin: 0 auto;
}
#process .more a {
color: #392e2e;
text-decoration: none;
text-align: center;
}
I've also tried it with Bootstrap's class="text-center", but that doesn't work either. Here's a link to my project, you can see the READ MORE link issue at the very bottom of the page.
Thank you for your help.
Use the text-center class but use it on the parent div container for the link:
<div class="container text-center">
<h2 class="text-center more">read more</h2>
</div>
You can do it two ways:
1. Block display method:
#process .more a {
color: #392e2e;
text-decoration: none;
display:block;
width:100px; //Adjustable and depends on you
margin:0 auto;
}
or:
2. Outer element align:
h2.more {
display:block;
text-align:center;
}
h2.more a {
display:inline-block;
width:auto;
}
Here is the fiddle with 2 examples: Example
There are actually other ways to do it with CSS, but these two are the most common.
In a responsive design website, I need to show four links presented side-by-side and have the collection of those 4 links enclosed within a self-resizing border. If all four links can't all fit horizontally on one line without overwriting each other, those links that can't fit should drop down to subsequent lines and the bounding border box should increase in size.
My main problem is that the bounding box... doesn't surround the links or resize properly. What am I doing wrong?
Here's the code and CSS that I've tried: http://jsfiddle.net/K3jyD/
HTML:
<div class="boundingbox">
<div class="boundeditem">
<div style="text-align: center;"><a title="Link Number One" href="http://www.abc.com/1/"><span><strong>NUMBER ONE</strong></span></a>
</div>
</div>
<div class="boundeditem">
<div><a title="Link Number Two" href="http://www.abc.com/2/"><span><strong>NUMBER TWO</strong></span></a>
</div>
</div>
<div class="boundeditem">
<div><a title="Link Number Three" href="http://www.abc.com/3/"><span><strong>NUMBER THREE</strong></span></a>
</div>
</div>
<div class="boundeditem">
<div style="text-align: center;"><a title="Link Number Four" href="http://www.abc.com/4/"><span><strong>NUMBER FOUR</strong></span></a>
</div>
</div>
</div>
CSS:
.boundingbox {
border: 1px solid red;
padding:10px;
margin:10px;
clear:both;
}
.boundeditem {
width:25%;
min-width:25%;
max-width:25%;
float:left;
padding:10px;
}
.boundeditem div {
text-align: center;
}
.boundeditem a {
text-decoration: underline;
}
I am not permitted to use jquery or external javascript libraries other than plain old html and css on this project.
The float:left is bringing your links outside the bounding box. Try this instead:
.boundeditem {
width:25%;
min-width:25%;
max-width:25%;
display: inline-block;
padding:10px;
}
If you want four links next to each other rather than three, make the width slightly smaller than 25% and put the padding in the div inside boundeditem rather than boundeditem itself.
.boundeditem {
width:24%;
min-width:24%;
max-width:24%;
display: inline-block;
}
.boundeditem div {
text-align: center;
padding: 10px;
}
add this to the .boundingbox
.boundingbox {
position: absolute;
height: auto;
}
Not sure if that's exactly what you're looking for.
I am using a table and a div to create a centered button group...but for some reason, my buttons are aligned weird? Here is a jsfiddle of the issue. Jsfiddle
Is there any way I can fix this to where I can add more buttons and have them straight?
If more code is required, please ask me and I will post it.
Here is my html:
<div align = "center" class="bdy">
<table class="wrapper">
<tr>
<td>
<button type="button">Services</button>
<br>
<button type="button">Live</button>
</td>
</tr>
</table>
</div>
My CSS is on the fiddle!
I fixed the alignment by removing the whitespace between buttons, but this is not the right way to do it.
Fixed version (reference only): http://jsfiddle.net/J7rYF/1/
Tables shouldn't be used to layout buttons. div align=center is deprecated. <br> shouldn't be used for this type of formatting purpose.
If you want an out of-the-box example/solution, Twitter Bootstrap has some very nice examples and templates.
Or, here's a simple template that you can start with for centering a list of buttons: http://jsfiddle.net/J7rYF/10/
HTML
<div class="button-set">
<ul>
<li><button type="button">Services</button></li>
<li><button type="button">Live</button></li>
</ul>
</div>
CSS
.button-set {
width: 300px;
margin: 0 auto; /* this centers the element */
}
.button-set UL {
list-style: none; /* removes bullets */
}
/* this controls spacing between adjacent buttons */
.button-set LI + LI {
margin-top: 4px;
}
/* width: 100% is needed...everything else is optional */
BUTTON {
width: 100%;
border: 1px solid #000;
padding: 4px;
border-radius: 4px;
color: #fff;
background-color: #006DCC;
}
Getting rid of the <br> between the buttons fixed it for me.
You give margin:0; at button css and .button-set ul li{margin:0}
you can add another table inside that td and inside new table you can put these two buttons
At the top of a page I've got two divs, one floated to the left and one to the right. I can place text with a border between them, however, I now need to stack two such areas of text between them.
Here's a Fiddle illustrating my problem: http://jsfiddle.net/TcRxp/
I need the orange box under the green box, with each center aligned with the other. The "legend" (floated to the right) used to be at the same level but is shifted down now.
I tried adding another table to the mix but that didn't help.
Excuse the markup - it's not real slick, I know. A few people have touched this over time and none of us are gurus at this.
And yes, I have lobbied for a designer to be added to the team but it hasn't happened yet.
Thanks,
Paul
UPDATE: Incorporating #Jeremy B's suggestion
Does it have to be via CSS changes? When dealing with scenarios like this, you need to be careful of the order in which the HTML elements are defined.
Look at the modification here: http://jsfiddle.net/TcRxp/8/
I was able to acheive what you needed by changing the order of the three DIVs and using the CSS suggesion from #Jeremy B
Essentially, the logic for the layout is
Draw the float-right content
Draw the float-left content
Draw the content in the middle (as it will now render to the right of the float-left content.
First make your top span a block element to stack them:
<span class="color status active bold" style="display:block">Status:</span>
then float the middle div left as well:
add float:left to #headmiddle in your css
It's always going to be difficult to get the desired results when you're combining CSS and tables-for-layout.
I would suggest simplifying your HTML:
<div id="headleft">a little search form here</div>
<div id="headmiddle">
<div class="active"><strong>Status:</strong> Active</div>
<div class="search">Search results displayed</div>
</div>
<div id="headright">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
and your CSS:
div { padding: 2px; }
strong { font-weight: bold; }
#headleft { float: left; font-size: 0.8em; }
#headmiddle { float: left; font-size: 0.8em; }
#headmiddle div { border: 1px solid #000; margin-bottom: 3px; }
.search { background: orange; }
.active { background: #8ed200; }
#headright { float: right; font-size: 0.8em; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
The result is semantically correct HTML, easier to read and therefore easier to modify in the future. Supporting fiddle.
If you need to do it with CSS, see my changes: Fiddle
I added the following:
#headmiddle span.status { display: block }
This will cause your spans to "stack".
I got it by putting together many different sources. Alex Coles' solution was closest right off the bat but the middle wasn't centered. It was much cleaner than my mess too. I started with the code from this post:
<style type="text/css">
.leftit {
float: left;
}
.rightit {
float: right;
}
.centerit {
width: 30%;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.centerpage {
width: 80%;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div class="centerpage">
<div class="leftit">Hello Left</div>
<div class="rightit">Hello Right</div>
<div class="centerit">Hello Middle</div>
</div>
(fiddle for above)
I took the elements Alex cleaned up which got me even closer to my goal, but the center color blocks were way too wide. From this question I learned about "max-width", which ended up being the final piece I needed...or so I thought.
Edit: max-width doesn't work in IE7 quirks mode (which I have to support) so from this page I learned how to tweak my css to work in IE7 quirks mode, IE8, and FF.
The final code (fiddle):
.leftit {
float: left;
font-size: 0.8em;
}
.rightit {
float: right;
font-size: 0.8em;
}
.centerit {
width:220px;
margin-right: auto;
margin-left: auto;
font-size: 0.8em;
}
#headmiddle div {
border: 1px solid #000;
margin-bottom: 3px;
}
.centerpage {
margin-right: auto;
margin-left: auto;
text-align: center;
}
strong { font-weight: bold; }
.search { background: orange; }
.active { background: #8ed200; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
<div class="centerpage">
<div class="leftit">a little search form here</div>
<div class="rightit">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
<div class="centerit" id="headmiddle">
<div class="active"><strong>Status:</strong>
Active</div>
<div class="search">Search results displayed</div>
</div>
</div>
Thanks to all the great answers - I learned a lot from this question.
Paul