I need to make my app title centered in the app Semantic menu.
Below is my current code :
HTML:
<div class="ui red inverted borderless top attached menu">
<div class="ui red dropdown icon launch button">
<i class="sidebar icon"></i>
</div>
<a class="item mytitle ">My App Title</a>
<div class="ui right aligned category search item">
User Name
</div>
</div>
CSS :
.mytitle {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 35px;
display: table-cell;
color: #FFFFFF;
text-decoration: none;
}
I tried to add the width="90%" in the CSS, but although it is able to make it centered, it pushed the Username, which I want to avoid.
Is there another way to make it centered?
Here is my current JSFiddle
Like This https://jsfiddle.net/DIRTY_SMITH/85fenw7t/1/
.mytitle {
height: 35px;
color: #FFFFFF;
text-decoration: none;
margin-left: calc(50% - 90px);
}
Related
Bottom text of the image is shifting the image up in the list of thumbnails.
I saw some link about Mozilla firefox shifting images up and the solution is given was to use
vertical-align: top;
or
vertical-align: bottom;
The problem was half solved as the text is extending beyond its normal height to another image below it instead of pushing the image down to maintain a general form.
Here is my CSS code
.flex-cover{
width:100%;
display:flex;
justify-content: center;
}
.flex-child{
text-align: center;
}
.flex-head{
font-size: 20px;
margin-top: 10px;
color: #ce7842;
text-shadow: #aaa 0 0 1px;
font-weight: bold;
padding:10px;
text-align: center;
}
.flex-body{
color:#969c84;
}
.flex-box{
display: inline-block;
width:140px;
height:140px;
margin:10px;
vertical-align: top;
text-align: center;
}
.flex-pics{
height:120px;
width:100%;
}
.flex-box .flex-pics{
background-size: 100% 100%;
}
Here is the html code
<div class="flex-cover">
<div class="flex-child">
<div class="flex-head"> Recent Articles</div>
<div class="flex-body">
<div class="mycover flex-box">
<div class="pull-left flex-pics" style="background-image: url("/images/im/imm20.jpg");"></div><br>
My Article 1
</div>
<div class="mycover flex-box">
<div class="pull-left flex-pics" style="background-image: url("/images/im/imm20.jpg");"></div><br>
My Article 2 with some more content added to it
</div>
<div class="mycover flex-box">
<div class="pull-left flex-pics" style="background-image: url("/images/im/imm20.jpg");"></div><br>
My Article 2
</div>
<div class="mycover flex-box">
<div class="pull-left flex-pics" style="background-image: url("/images/im/imm20.jpg");"></div><br>
My Article 4
</div>
</div>
</div>
</div>
Original View When Browser Not Folded
Image After Browser was folded
As you can see, some text is going under instead of pushing the image down. I also do not want to use:
float:left
because it seems impossible to shift the image to center when the float is used. So, a good answer will be duly awarded. Thanks in anticipation.
You can delete the height: 140px; for .flex-box. That's why it happens.
I am used to creating a hero image as a background image and overlaying a hero button on top as a relative/in-line component.
Today, I was given a hero image that has text on it (see below). The hero button is supposed to go under the text that says "Check out the Open Enrollment Overview...". But, two things are happening:
1. when I position the button as I usually would, the button doesn't stay under that text when I shrink the length of my screen.
2. the button won't go on top of the hero image but instead, is laying below the bottom of the image and won't go on top.
<!-- Hero Image-->
<div id="banner" class="row">
<div class="col-xs-12">
<img src="../img/headers/bannerHome_OpenEnrollment.png" class="img-responsive" alt="open enrollment" tabindex="0">
<!-- Hero Button -->
<div class="hero-text">
<button class="btn btn-secondary hero-text">Learn More <img src="../img/icons/btnArrow_white.png"></button>
</div>
</div>
</div>
#banner .col-xs-12 {
padding-left: 0;
padding-right: 0;
background-color: #49c8f4;
position: relative;
}
.img-responsive {
margin-left: auto;
margin-right: auto;
display: block;
}
.hero-text button {
border: none;
position: absolute;
margin-left: 150px;
margin-bottom: 150px;
outline: 0;
display: inline-block;
color: white;
background-color: #003057;
font-size: 24px;
font-family: "Klinic Slab Medium";
cursor:pointer;
}
It is not considered a best practice to have text baked into the image. Preferably you would build out the text sections in html. This would allow them to be positioned relative to each other.
How to create a header menu under navbar menu which is fixed, like VTiger Dashboard :
Here is mine :
$(document).ready(function(){
$('.ui.dropdown').dropdown();
});
*{
margin: 0;
padding: 0;
}
body{
font-family: 'Open Sans', sans-serif;
margin-bottom: 60px;
}
.ui.grid.main{
margin-top: 70px;
}
.padding-reset{
padding: 0px !important;
}
.ui.message{
padding: 40px !important;
}
#media (max-width: 767px) {
.ui.grid.main{
margin-top: 70px;
}
.ui.vertical.menu.navbar{
margin-top: 0px !important;
}
}
.ui.vertical.menu{
margin-top: -15px !important;
width: 100%;
display: none;
}
.ui.page.grid{
padding-left: 2%;
padding-right: 2%;
}
<head>
<link href="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.13.0/css/semantic.min.css" rel="stylesheet"/>
</head>
<body>
<div class="ui grid">
<div class="ui blue inverted fixed menu navbar page grid">
<i class="home icon"></i>
Calendar
Leads
Account Members
Contacts
Opportunities
Quotes
Documents
Services
<div class="right menu">
<i class="trash brush icon"></i>
<i class="paint brush icon"></i>
<i class="settings icon"></i>
<a class="ui dropdown item">Owner
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">My Preferences</div>
<div class="item">Log Out</div>
</div>
</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.13.0/javascript/semantic.min.js"></script>
</body>
Fixed navbar works correctly, but I dont know how to add another segment, which is fixed too, below navbar. I use semantic ui as css framework
You can use semantic UI sticky to add a segment to the top of your page. In that segment your can put multiple menu bars, images, nested segments, texts, etc
<div class="ui sticky stickyTop">
<div class="ui inverted segment">
<div class="ui blue inverted menu navbar">
<i class="home icon"></i>
Calendar
Leads
</div>
<h3 class="ui header">Stuck Content</h3>
<p>Add menu bar, images, whatever here!</p>
<p>You will need to override some semantic UI css, such as margins however. For that, remember to use "<strong>!important"</strong></p>
</div>
</div>
<div class="content">
//... Your body content
</div>
Here's a semi-working code example:
http://jsfiddle.net/sL4fnrz0/3/
I say "semi-working" example, since semantic UI sticky only works to a limited extent in code playgrounds...
Try copy the code to a html file instead.
JSFiddle Link
So I have a set of divs that include a title and a list of links. I would like the title to be vertically aligned with a background image bullet. It looks fine with 1 line of text but a title that wraps because of length will get pushed down and look funny.
If there are 2 lines of text I would like the text and the background image to be vertically aligned within the header box so they are in line with the other set of headings.
<div class="calloutCollection tiled">
<div class="linksCallout Main">
<div class="title"> <a href="#">
Heading List 1</a>
</div>
<div class="links"> Child Bullet Link 1
</div>
</div>
<div class="linksCallout Main">
<div class="title"> <a href="#">
Heading-List Wrapped Because of Word Count</a>
</div>
<div class="links"> Child Bullet Link 1
Child Bullet Link 2
</div>
</div>
<div class="linksCallout Main">
<div class="title"> <a href="#">
Heading List 3</a>
</div>
<div class="links"> Child Bullet Link 1
</div>
</div>
<div class="linksCallout Main">
<div class="title"> <a href="#">
Heading List 4</a>
</div>
<div class="links"> Child Bullet Link 1
Child Bullet Link 2
</div>
</div>
</div>
Any help with this would be appreciated.
Just remove the padding-top property from CSS for .title and add line-height: 48px; which is equal to the height so that it is vertically center aligned.
And for .title a, add this CSS :
display: inline-block;
vertical-align: middle;
CSS :
.calloutCollection.tiled .callout .title a, .calloutCollection.tiled .linksCallout .title a {
background: url(https://dl.dropboxusercontent.com/u/227117/images/bg_footer02.gif) no-repeat 6px 45%;
padding-left: 21px;
display: inline-block; /* So that content */
vertical-align: middle; /* floats in middle */
background-position: 6px 40%;
font-weight: bold;
color: #333 !important;
line-height: 1.5;
text-decoration: none!important;
}
.calloutCollection.tiled .callout .title, .calloutCollection.tiled .linksCallout .title {
vertical-align: middle;
height: 48px;
line-height: 48px; /* To center align text vertically */
background: url(https://dl.dropboxusercontent.com/u/227117/images/bg_sec_top_product_01.gif) no-repeat 0 0;
font-size: 75%;
margin: 0;
}
DEMO
The UI of my page currently shows an Image in backgroud and text on left hand top corner of the page. Following is the code I am using for the image.
<div>
<div style= "z-index: 1; position: absolute; text-align: left; border: 1px solid black;">
<img src="slide1.jpg" alt="alt text" style="height:220px;width:500px;border-width:0px;" />
</div>
<div id="curtain" style="z-index: 2; position: absolute; padding-left: 10px;">
<div style="background-color: transparent; font-weight: bold; font-size: 1.8em; padding-top: 5px;">
Profile
</div>
<div style="font-size: 1em; width: 215px; color: #cccccc;">
He is a good citizen and a great teacher.
</div>
</div>
</div>
I want to add 2 small icons aligned vertically on the right hand side of this image.
Can someone help me with the css ?
Something like this?
http://jsfiddle.net/7KTEQ/
Just add <div id="smallImages"><img src='ONE' /> <img src='two' /></div> inside second div
and css for it is:
#smallImages {
position:absolute;
margin-left:400px;
}
change margin-left for css depending on second div width and image sizes..