EDIT: I have solved my own problem. I have commented my code below where the error was. I will add an answer as soon as I'm able.
I have a header bar on my page which could have up to three rows of data:
Page Title
Page Information
Page Badges
However, the page-info bar and the page-badges bar are shown dynamically; sometimes they're there (depending on the data coming in), and sometimes they're not.
Goal: I want to ensure that everything stays nice and vertically centered in the header area, if one or more of the aforementioned rows is not present because there's nothing to render.
I attempted to use display:table-cell and vertical-align:middle, but it doesn't seem to be working out. Here's my code:
Relevant HTML:
<div class="header-bar">
<div class="header-bar-wrapper">
<h1 class="page-title">Charity Challenge Golf Outing</h1>
<div class="page-info">
<h5 class="item"><span class="info-label">Project</span>US Asset</h5>
<h5 class="item"><span class="info-label">Project Manager</span>John Smith</h5>
<h5 class="item"><span class="info-label">Start Date</span>11/22/2013</h5>
<h5 class="item"><span class="info-label">End Date</span>12/25/2013</h5>
</div>
<div class="page-badges">
<span class="page-badge">
<span class="page-badge-icon"><i class="fa fa-coffee"></i></span>
<span class="page-badge-value">10</span>
<span class="page-badge-text">Cups Consumed</span>
</span>
<span class="page-badge">
<span class="page-badge-icon"><i class="fa fa-coffee"></i></span>
<span class="page-badge-value">3</span>
<span class="page-badge-text">Days Remaining</span>
</span>
</div>
</div>
</div>
Relevant CSS:
.header-bar {
display:table;
width:100%;
position:relative;
height:79px;
overflow:hidden;
border:1px solid black;
box-sizing:border-box;
padding:0 20px;
}
.header-bar-wrapper {
display:table-cell;
vertical-align:center; // THIS WAS MY ERROR. Should be vertical-align:middle
}
.page-title,
.page-info,
.page-badges {
display:block;
margin:0;
padding:0;
clear:both;
}
.page-title {
margin:0;
font-size:29px;
}
.page-info {
}
.page-badges {
bottom:0;
font-size:11px;
padding:5px 0;
}
Here is a Fiddle with the aforementioned code.
Turns out I was using vertical-align:center instead of vertical-align:middle. This fixed my code.
Here's an updated Fiddle with working code.
Try deleting either the page-badges or page-info block and you'll see how everything stays centered vertically.
Related
So far I have this:
<div class="w3-sidebar w3-bar-block w3-indigo w3-xxlarge" style="width:70px">
<i class="fa fa-user-circle"></i>
<i class="fa fa-id-card-o"></i>
<i class="fa fa-folder-open"></i>
</div>
If I enter text into the a tag, the text ends up looking jumbled and doesn't go under the button the way I want it to. How can I fix this?
I made a codepen that should match what you are attempting to do :
Here is the css :
.w3-sidebar {
width: auto;
}
.w3-bar-block .w3-bar-item {
/* Overrides default rule */
text-align: center;
}
.sidebar-icon-label {
display: block;
font-size: 10px;
}
You'll see that I removed the inline style of your w3-sidebar, and set it to "auto" instead, which means it will have the size of its content.
I created a new class for your icon labels, and overrode a native w3 rule to center everything.
Update your code Like this
<style>
i{ width:20px;
height:20px;
display:inline-block; }
a{ float:left; width:100%; text-align:center; }
span{ float:left; width:100%; text-align:center; }
</style>
<div class="w3-sidebar w3-bar-block w3-indigo w3-xxlarge"
style="width:70px">
<i class="fa fa-user-circle"></i><span>Text 1</span>
<i class="fa fa-id-card-o"></i><span>Text 1</span>
<i class="fa fa-folder-open"></i><span>Text 1</span>
</div>
<div id="nav_banner">
<br>
<a class="smoothScroll" href="#home">Home</a>
<a class="smoothScroll" href="#contactme">Email</a>
<br>
<div id="nav_banner2">
<a class="smoothScroll" href="https://twitter.com" target="_blank" title="Twitter">Twitter</a>
<a class="smoothScroll" href="https://facebook.com" target="_blank" title="fb">facebook</a>
</div>
</div>
I am trying to add a background image inside the nav_bannner section of the html page..
here is my css code to do that:
#nav_banner
{
width:100%;
position:fixed;
bottom:0px;
background:white;
left:0px;
right:0px;
height:100px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
font-size:30px;
word-spacing: 50px;
text-align: center;
font-family: Copperplate,Copperplate Gothic Light,fantasy;
background-image:url('images/shsf.png');
}
But when i load the page.. the image is not showing up... the nav banner simply has white background.
Can anyone tell me what is the issue with the code above?
First of all, check the path. The code works well for Chromium (Version 39.0.2171.65 Ubuntu 14.04).
Second, if you have a small image you can embed it directly to css by data-uri https://css-tricks.com/data-uris/
I suspect I'm doing something stupid but I have some hyperlinks styled as images with css but they don't work as links.
Experimental page is at http://cotswoldplayhouse.co.uk/jm3/index.php/what-s-on
and it's the 'Read more' and 'buy tickets' buttons.
The page is built by php but the html looks like this...
<td>
<div class="sg-read-more">
Find out more
</div>
<div class="sg-book-ticket">
Book Ticket
</div>
</td>
The CSS is this....
div.sg-book-ticket {
display:block;
position:absolute;
background:url(images/buy-ticket.png) no-repeat 0 0;
right:15px;
bottom:2px;
width:80px;
height:40px;
text-indent:-9999px;
}
div.sg-book-ticket:hover {
background-position:0 -40px;
}
The images display correctly and the rollover works, but they aren't links.
What have I missed?
I personally would style the link as opposed to the div
div.sg-book-ticket{
position:absolute;
right:15px;
bottom:2px;
}
div.sg-book-ticket > a{
display:block;
background:url(images/buy-ticket.png) no-repeat 0 0;
width:80px;
height:40px;
text-indent:-9999px;
}
div.sg-book-ticket a:hover{
background-position:0 -40px;
}
if you want the whole div to be clickable, use this :
<td>
<a href="#">
<span class="sg-read-more">
</span>
</a>
<a href="http://www.ticketsource.co.uk/event/70577" target="_blank">
<span class="sg-book-ticket">
</span>
</a>
</td>
Can you try the following?:
<a href="<a href="http://www.ticketsource.co.uk/event/70577" target="_blank" alt="book ticket" />
<img src="images/buy-ticket.png" />
</a>
instead of putting the image in the css?
Please firstly visit my webpage tristans.ml/.. and make your browser window less that 1000px wide, then open the menu and there you have my issue.
I don't know a good way to solve this problem. The code is as follows:
First the media queries in css:
#media all and (max-width:1000px){
#nav_holder{
width:100%;
height:54px;
z-index:2;
}
nav{
}
.first_menu{
display:none;
background:#161619;
}
.logo_b{
top:0;
float:right;
display:block;
}
#logo{
padding:0;
}
#ttrgovina{
width: 200px;
}
#container{
margin-top:54px;
}
}
Then there is the html code (sorry if it's a mess):
<div id="nav_holder">
<div id="logo">
<span class="logo_b" id="nav_button"><img width="55" height="55" src="style/images/menu.png" alt="Menu"></span>
<span class="logo_b" id="cart_button"><img width="55" height="55" src="style/images/cart.png" alt="Cart"></span>
</div>
<nav>
<span id="ttrgovina">Tshop</span>
<ul class="first_menu">
<li>
<a id="menu_1" href="javascript:void();">Komponente</a>
<ul class="second_menu"></ul>
</li>
</ul>
</nav>
</div>
NOTE: the code has been shortened. just li elements removed.
Would you please help me with this issue cause I am hanging on it for quite some time now. I tried also creating 2 menus, but I think this is a waste of time. If you need more data or anything else, just comment the post.
I'm trying to get the "about 15 hours ago" text to the left, but can't seem to get it done. float left doesn't seem to work, and I can't decrease the margin left because then the "3 minutes ago" text will collide with the image.
Here's the html(sorry for the big mess):
<div class="comment_column_narrow">
<div id="comment_title_39" class="comment_title">
Do you like this song?
x
</div>
<div class="comment_content">
<img alt="Justin meltzer" src="/system/photos/45/tiny/Justin Meltzer.jpeg?1302075215">
<div class="textual_comment_content">
<div class="comment_text">
<span class="name_link">
Justin Meltzer
</span>
Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great.
</div>
<span class="comment_footer">
<ul>
<li class="list_style">about 15 hours ago.</li>
</ul>
<span>
</span></span></div></div></div>
And here's the corresponding CSS:
.comment_column_narrow {
float: left;
width: 295px;
margin-right: 5px;
}
.comment_content{
clear:both;
padding: 10px 5px;
border-top:2px solid #E2E2E2;
border-right:3px solid #E2E2E2;
}
.comment_text{
line-height: 120%;
}
.comment_image{
float:left;
margin-right: 10px;
}
.comment_footer{
}
.comment_footer ul{
margin-top: 5px;
}
.comment_footer ul li{
font-size: 10px;
color:gray;
float:left;
margin-right:25px;
}
.list_style{
list-style:none;
}
.name_link{
margin-left:-3px;
}
Instead of
this:
<div class="comment_text">
<span class="name_link">
Justin Meltzer
</span>
Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great.
</div>
<span class="comment_footer">
<ul>
<li class="list_style">about 15 hours ago.</li>
</ul>
</span>
Move the comment_footer span INSIDE the comment_text span, so that it wraps around the image as you desire. Then remove the <ul> and <li> as they are just getting in your way. You end up with:
<div class="comment_text">
<span class="name_link">
Justin Meltzer
</span>
Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great.
<span class="comment_footer">about 15 hours ago.</span>
</div>
Try changing to the comment section to this:
<div class="comment_content">
<img alt="Justin meltzer" src="/system/photos/45/tiny/Justin Meltzer.jpeg?1302075215">
<div class="textual_comment_content">
<div class="comment_text">
Justin Meltzer
Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great.
</div>
<div class="comment_footer">
about 15 hours ago.
</div>
</div>
</div>