This is my first post, because I'm stuck on the first part of making my first website.
I'm trying to make a navigation bar with five parts:
(Vertical list of 3 items) (Label) (Logo) (Label) (Vertical list of 3 items)
For example,
(Apples, Oranges, Pears) (Fruits) (Logo) (Vegetables) (Broccoli, Celery, Lettuce)
With my code, the two vertical lists aren't aligned with each other, and I can't get any of them to center vertically in the bar.
This is my code:
HTML
<body>
<div class='nav'>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-3'>
<ul class='port-list' class='navbar-left'>
<li>Art</li>
<li>Design</li>
<li>Writing</li>
</ul>
</div>
<div class='col-md-3'>
<p class='port'>Portfolio</p>
</div>
<img>
<div class='col-md-3'>
<p class='about'>About</p>
</div>
<div class='col-md-3'>
<ul class='about-list' class='navbar-right'>
<li>Biography</li>
<li>Résumé</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS
* {
list-style: none;
list-style-type: none;
}
body {
height: 100%; /* Prevents rubber-band scrolling */
overflow: hidden; /* Prevents rubber-band scrolling */
}
.nav {
color: #fff;
font-family: 'Donegal One', serif;
background-color: #004d40;
padding-top: 12px;
padding-bottom: 8px;
display: block;
}
.port-list {
text-align: right;
}
.port {
text-align: left;
}
.about {
text-align: right;
}
.about-list {
text-align: left;
}
This here newbie would appreciate any help. Thanks.
Here is the updated code
HTML
<div class='row newRow'>
Added newRow to row
CSS
.newRow {
width: 100%;
display: table;
}
.newRow .col-md-3 {
display: table-cell;
vertical-align: middle;
float: none
}
You can define line-height for both div as follow:
<div class='col-md-3' style="line-height:58px;">
<p class='port'>Portfolio</p>
</div>
....
<div class='col-md-3' style="line-height:58px;">
<p class='about'>About</p>
</div>
Related
I'm diving into the footer of this site for the first time, and I need to place 3 titles with phone numbers below horizontally.
I have
HTML:
<div class="phone-container">
<div class="float-left">
<ul>
<li><h3>Phone West<h3></li>
<li>888-888-8888</li>
</ul>
</div>
<ul>
<li><h3>Phone Central<h3></li>
<li>888-888-8888</li>
</ul>
</div>
<ul>
<li><h3>Phone East<h3></li>
<li>888-888-8888</li>
</ul>
</div>
</div>
CSS:
#phone-container{
width: 100%;
}
#phone-left {
float:left;
width: 33%;
}
#phone-center {
float:left;
width: 33%;
}
#phone-right{
float:left;
width: 33%;
}
This is giving me all the items vertically listed towards the left, if someone knows what error I'm making or a better way to arrange these I'd love the help!
There's a few things going on here. First, you're styling the ID #phone-container rather than a class like you've written in your HTML, so your parent element is not getting the width: 100% rule applied to it.
Second, the #phone-left, #phone-center, and #phone-right IDs are not included in your HTML. Since these all have the same rules, I would make them all one class, .phone.
Check out the demo on Codepen.
HTML:
<div class="phone-container">
<div class="phone">
<ul>
<li><h3>Phone West<h3></li>
<li>888-888-8888</li>
</ul>
</div>
<div class="phone">
<ul>
<li><h3>Phone Central<h3></li>
<li>888-888-8888</li>
</ul>
</div>
<div class="phone">
<ul>
<li><h3>Phone East<h3></li>
<li>888-888-8888</li>
</ul>
</div>
</div>
CSS:
body{
margin: 0;
padding: 0;
}
.phone-container {
width: 100%;
}
.phone {
float: left;
width: 33.3%;
}
This is how I'd go about it. But I have issues with floats and clearing them.
ul {
list-style: none;
display: inline-block;
width: 33%;
padding: 0;
text-align: center;
}
<div class="phone-container">
<ul>
<li><h3>Phone West<h3></li>
<li>888-888-8888</li>
</ul>
<ul>
<li><h3>Phone Central<h3></li>
<li>888-888-8888</li>
</ul>
<ul>
<li><h3>Phone East<h3></li>
<li>888-888-8888</li>
</ul>
</div>
You can also put
.phone-container{
font-size: 0;
}
But then you'll need to put font sizes on your h3 and anchors. Once you do this you'll be able to set
ul{
width:33.3333333%;
}
And they should be evenly spaced out.
Also your HTML is not valid - you have unclosed divs.
There's a few items to note:
1. Your id tags were not linked to the HTML elements. They need to be linked, as demonstrated below, for the styling/positioning to take effect.
2. The *, :before, :after code is for normalizing between browser behavior and for removing the extra margin that is added by default. (This allows for the 3 x 33% phone numbers to all fit on one row.
3. list-style-type: none; removes the list bullet points. You can remove the entire rule if it is something you would like to keep.
4. I've also went ahead and centered the phone numbers for you with text-align: center;.
You can see all the code, as well as how it looks like in a browser below.
In any case, if your links still need to be positioned at the bottom, you can either choose to append them to the end of your document, or position: fix; it to bottom of the viewport.
*, :before, :after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
#phone-container{
width: 100%;
}
#phone-left {
text-align: center;
float:left;
width: 33.3%;
}
#phone-center {
text-align: center;
float:left;
width: 33.3%;
}
#phone-right{
text-align: center;
float:left;
width: 33.3%;
}
<div class="phone-container">
<div>
<ul id='phone-left'>
<li><h3>Phone West<h3></li>
<li>888-888-8888</li>
</ul>
</div>
<ul id='phone-center'>
<li><h3>Phone Central<h3></li>
<li>888-888-8888</li>
</ul>
</div>
<ul id='phone-right'>
<li><h3>Phone East<h3></li>
<li>888-888-8888</li>
</ul>
</div>
</div>
Here is a fix for you-
HTML-
<div class="phone-container">
<div class="float-left">
<ul>
<li><h3>Phone West<h3></li>
<li>888-888-8888</li>
</ul>
<ul>
<li><h3>Phone West<h3></li>
<li>888-888-8888</li>
</ul>
<ul>
<li><h3>Phone West<h3></li>
<li>888-888-8888</li>
</ul>
</div>
</div>
CSS-
* {
margin: 0;
padding: 0;
}
#phone-container, .float-left {
width: 100%;
float: left;
}
#phone-container ul, .float-left ul {
float: left;
width: 33%;
display: block;
text-align: center;
}
#phone-container ul li, .float-left ul li {
display: inline-block;
}
After trying to add clamping to my headers, my result does not turn out the way I wanted.
I made a fiddle of the code that I am using to achieve my result: https://jsfiddle.net/73kerhsn/
h3
{
margin: 0;
font-size: 13px;
}
ul
{
list-style: none;
padding: 0;
margin: 0;
}
li
{
display: inline-block;
margin: 2px;
padding: 0;
}
.acontainer
{
background-color: yellow;
width: 500px;
padding: 15px;
}
.background
{
background-color: grey;
width: 196px;
}
.block1
{
height: 110px;
width: 195px;
background-color: red;
}
.clamp
{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
<div class="acontainer">
<ul>
<li class="background">
<div class="block1">
</div>
<h3 class="clamp">
This foo test asdas asdassd saasas dasasa asdasadsd asasddas asdadsg gfhfhg gddfd sddsfsdf
</h3>
<div>
Something
</div>
<div>
Something else
</div>
</li>
<li class="background">
<div class="block1">
</div>
<h3>
This foo test
</h3>
<div>
Something
</div>
<div>
Something else
</div>
</li>
<li class="background">
<div class="block1">
</div>
<h3>
This foo test
</h3>
<div>
Something
</div>
<div>
Something else
</div>
</li>
</ul>
</div>
I want the list items to stay at the same height, even when the header tags get bigger than the ones of the other list items (so for example, the second list item in the jsfiddle appears to be lower from the top than the first list item. I want it to still stick to the top (with the padding still in tact)).
Is there anyone out there that can help me with this?
Thanks in advance.
You probably simply want to add vertical-align: top for your list items.
li
{
display: inline-block;
margin: 2px;
padding: 0;
vertical-align: top;
}
https://jsfiddle.net/73kerhsn/1/
You can just apply this to your css for styling the list-items:
li{
display: inline-table;
}
This will make your li items start from the same height, now you can set the height as you want, it won't hamper your next line contents. If you won't set a fixed height, then only the start of the boxes will remain same.
I am floating two divs side by side, my problem is the content on the left has a huge space on top. The height otherwise adjusts great. Is there any way to have the content horizontally aligned properly eliminating the huge space? Please see the link provided http://jsfiddle.net/darlene1624/zey0macx/.
<div class="row">
<div class="col">
<div class="event">
<img src="http://ima.gs/800x400.png" alt="event 1" />
</div>
</div>
<div class="col">
<div class="eventdesc">
<div class="eventtitle">
<h2>Carnival Party</h2>
</div><p><strong>Where: </strong>TBA<br>
<strong>When: </strong>19/09/2014<br>
<strong>End Date: </strong>18/12/2014<br>
<strong>Time: </strong>7:00 pm<br>
<strong>Contact: </strong><br></p><br>
<div class="readmore">
Read More
</div>
</div>
.row {
display: table;
}
.col {
display: table-cell;
width: 50%;
padding: 1em;
border-bottom: 1px solid #F5F8F9;
}
.event img{
width:100%;
}
.eventdesc{
padding-left: 15px;
padding-right: 15px;
}
.readmore {
text-align:right;
color: #FBE321;
}
.readmore a{
color: #FBE321;
}
Thanks,
D.
You need to set:
.col {
vertical-align: top;
}
h2 {
margin-top: 0;
line-height: 1em;
}
Fiddle
I have a footer in my webpage which nests 3 divs with twitter bootstraps span4 class. I want to have the 'Connect With Us' the same distance from the right as the 'Contact Us' header is from the left and the 'Useful Links' in the middle with all the text for each div left justified underneath.
This is what I have so far:
You can see that Contact Us is closer to the left edge than Connect With Us is from the right edge.
I have tried using text align for the headers which works however the list items below do not left align with the elements.
Here is an image which shows what it is like with the text-align on the headers. You can see that they are laid out as I want but the content below them is not left aligned with them:
Here is the HTML for the footer:
<footer class="footer">
<div class="row-fluid">
<div class="span12">
<div class="span4" id="leftFooter">
<h5><b>Contact Us</b></h5>
<ul>
<li>Tel: 01234 567897</li>
<li>E-mail: info#oom.com</li>
</ul>
</div>
<div class="span4" id="middleFooter">
<div class="middle"><h5><b>Useful Links</b></h5>
<ul>
<li>Contact Us</li>
<li>About Us</li>
<li>Copyright Information</li>
<li>Terms & Conditions</li>
</ul> </div>
</div>
<div class="span4" id="rightFooter">
<h5><b>Connect With Us</b></h5>
<ul>
<li><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px"> Facebook</li>
<li><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px"> Twitter</li>
</ul>
</div>
</div>
</div>
</footer>
Here is the CSS for the footer:
.footer {
padding: 10px;
position: relative;
color: #ccc2a0;
background-color: #333333;
height: 150px;
clear:both;
padding-top:20px;
}
.footer ul {
list-style: none;
padding: 0;
margin: 0;
}
#leftFooter {
color: #ccc2a0;
padding-left: 50px;
}
#middleFooter {
color: #ccc2a0;
/* text-align: center; */
}
#rightFooter {
padding-right: 50px;
/*text-align: right; */
color: #ccc2a0;
}
#rightFooter li {
padding-top: 5px;
}
.follow { line-height: 19px; }
Can anyone help?
Thanks
EDIT:
Here are the changes I made to the right footer:
<div class="span4" id="rightFooter">
<div class="trow"> <h5 class="tcell"><b>Connect With Us</b></h5> </div>
<ul>
<div class="trow"> <li class="tcell"><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px"> Facebook</li> </div>
<div class="trow"> <li class="tcell"><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px"> Twitter</li> </div>
</ul>
</div>
CSS:
.trow {
display: table-row;
background-color: green;
margin-right: 0;
}
.tcell {
display: table-cell;
background-color: green;
}
.trow h5 {
display: table-row;
background-color: yellow;
}
and here is what it looks like with the rows and cells coloured:
You can use display: table-cell to make the block behave as table cells, which can style further to make them the same width.
You can also float the blocks or use display: inline-block and give each block a third of the width, but when zooming you may get rounding errors that can cause the last block to jump to the next line. When the block behave like table-cells, you don't have that problem.
I renamed some of your CSS ids and removed some markup in your HTML like the b tag (not sure why you were using that). Your ampersand & should be &.
Added a couple DIVs .outer and .inner that center the contents of the second .span4 but maintain the left alignment. The main thing there is the float: left; on .outer which sets the width of .outer to it's content. You could also use display: inline-block; instead of float: left;. .outer is moved left 50% of it's container and then .inner is moved right 50% of it's container (.outer). In the end it ends up in the center of .span4.
For the third .span4 we added a DIV with the class .pull-right which is from your Twitter Bootstrap that floats things to the right. This sets everything to the right side of the third .span4 without re-aligning your text.
.footer {
padding: 10px;
position: relative;
color: #ccc2a0;
background-color: #333333;
height: 150px;
clear:both;
padding-top:20px;
}
.footer ul {
list-style: none;
padding: 0;
margin: 0;
}
#contact-us {
padding-left: 50px;
}
.outer {
position: relative;
left: 50%;
float: left;
}
.inner {
position: relative;
right: 50%;
}
#connect-with-us {
padding-right: 50px;
}
#connect-with-us li {
padding-top: 5px;
}
#connect-with-us a {
padding-left: 5px;
}
.follow {
line-height: 19px;
}
<footer class="footer">
<div class="row-fluid">
<div class="span12">
<div id="contact-us" class="span4">
<h5>Contact Us</h5>
<ul>
<li>Tel: 01234 567897</li>
<li>E-mail: info#oom.com</li>
</ul>
</div>
<div class="span4">
<div class="outer">
<div class="inner">
<h5>Useful Links</h5>
<ul>
<li>Contact Us</li>
<li>About Us</li>
<li>Copyright Information</li>
<li>Terms & Conditions</li>
</ul>
</div>
</div>
</div>
<div id="connect-with-us" class="span4">
<div class="pull-right">
<h5>Connect With Us</h5>
<ul>
<li><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px">Facebook</li>
<li><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px">Twitter</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
Here's the challenge I'm facing. I'm trying to get a div to appear behind another object and to center align to it.
This is what I'm up to so far: http://jsfiddle.net/imoda/GYha2/
And this is the result I'm trying to get
As you can see, I'm close. I just can't get it to align center and to position itself behind the other object.
Any thoughts?
HTML:
<div id="banner" class="grid_12">
<div class="bannerBgT"></div>
<div class="bannerBgY">
<div id="planPricingWrapper">
<div id="planPrices">
<div class="planPrice">
<div class="planPriceX"> </div>
<div class="planPriceR"></div>
<div class="clear"></div>
</div>
<div class="clear_10px"></div>
<div class="planPrice">
<div class="planPriceX"> </div>
<div class="planPriceR"></div>
<div class="clear"></div>
</div>
</div>
<div id="planPriceOptions">
<div class="planPriceOptionsBgT" id="supremacy"></div>
<div class="planPriceOptionsBgY" id="supremacy">
<div><img src="http://www.patientacquisitionsystem.com/images/plans/pricing_title_supremacy.png" width="183" height="27" alt="Supremacy" id="titleImg" /></div>
<img src="http://www.patientacquisitionsystem.com/images/plans/pricing_plan_supremacy.png" width="146" height="156" alt="" />
<div class="planFeatures"> <b>Includes Gold & Platinum Features Plus:</b>
<ul>
<li>Class 3 Rayhawk Design</li>
<li>Class 3 Content Management</li>
<li>Up to 6 Content Modules</li>
<li>Inclusion in 2 or more directories/portals</li>
<li>Access to Rayhawk brand management services*</li>
<li>Mobile device enabled educational content/videos</li>
<li>Marketing materials deployment system*^</li>
<li>2 hours per month of additional services</li>
</ul>
</div>
</div>
<div class="planPriceOptionsBgB" id="supremacy"></div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="bannerBgB"></div>
</div>
CSS:
#planPricingWrapper {
padding: 20px;
}
#planPrices {
float: right;
}
#planPrices * {
z-index: 1;
}
.planPrice > * {
float: left;
}
.planPriceX {
width: 280px;
height: 131px;
background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_bg_x.png) repeat-x;
}
.planPriceR {
width: 11px;
height: 131px;
background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_bg_r.png) no-repeat;
}
#planPriceOptions {
z-index: 9999999;
}
.planPriceOptionsBgT, .planPriceOptionsBgB {
width: 614px;
}
.planPriceOptionsBgT#supremacy, .planPriceOptionsBgY#supremacy, .planPriceOptionsBgB#supremacy {
background-color: #181818;
}
.planPriceOptionsBgT {
height: 10px;
background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_plan_bg_t.png) no-repeat;
}
.planPriceOptionsBgY {
background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_plan_bg_y.png) repeat-y;
color: #FFF;
text-align: center;
padding: 20px;
width: 574px;
min-height: 250px;
}
.planPriceOptionsBgY #titleImg {
margin-bottom: 10px;
}
.planPriceOptionsBgB {
height: 12px;
background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_plan_bg_b.png) no-repeat;
}
.planFeatures {
display: inline-block;
vertical-align: top;
font-size: 14px;
text-align: left;
list-style: square;
margin-left: 10px;
}
.planFeatures ul {
list-style: square;
}
There are basically two ways to do vertically aligning:
Use tables (using either real HTML <table> tags or fake CSS display:table-cell declarations)
Use inline elements (again, either real HTML elements that are naturally inline, like <span>, or CSS display:inline-block declarations)
Here's an updated fiddle that uses display:inline-block to approximately get what you're after, I think. Notice that I also flipped around the two divs in the HTML.
It also uses the *display:inline; zoom:1; hack to make it work with IE6/7