I'm a beginner in html/css and I'm trying to create something that will go into a page of a platform called Chronus. The idea is for users to be able to click on one of the four choices which will take them to the relevant section in the platform so that they don't have keep 'going back' (a sort of nav, but not really). I've used 'row fluid' as per the code below. I also attach an image to show you how it looks in a desktop/laptop. The problem is, as the width of the device decreases, the div that all the links are in does not increase in height, so the second two links are cut off (also image attached).
<div class="row-fluid" style="background-color: #DEEBF9; color: #094183;">
<div class="footerlinks">
<div class="span3">
<p>Before the match</p>
<i class="fa fa-arrow-right"></i></div>
<div class="span3">
<p>Career resources</p>
<i class="fa fa-arrow-right"></i></div>
<div class="span3">
<p>The mentoring partnership</p>
<i class="fa fa-arrow-right"></i></div>
<div class="span3">
<p>Partnership wrap up</p>
<i class="fa fa-arrow-right"></i></div>
</div>
</div>
<style>
.footerlinks {
text-align:center;
height: 160px;
vertical-align: middle;
padding: 40px;
font-family: ARIAL;
font-size: 20px;
}
</style>
links in laptop/desktop
links in narrow device
Would anyone be able to suggest a solution for this please? Thank you very much in advance.
Remove the height from .footerlinks. The reason it is happening is that when you see it from a narrow device, your content is more than 160px.
.footerlinks {
text-align:center;
vertical-align: middle;
padding: 40px;
font-family: ARIAL;
font-size: 20px;
}
Related
Today I tried to practice, and use HTML to code a simple email design. But until now I have a few questions not clearly, please see the image sample, so may I ask some help:
The middle white background. How to code this part use HTML?
The two pink lines, I tried use <hr> for this, but I don't know why the color won't change and the middle space which from first line to image top is not correct, so is there any other way to code the line?
The 4 buttons, how to HTML the 4 buttons? The image sample button pink background looks like use as a shape?
I know these can used CSS to reach the effect but currently want all things ONLY done in HTML, is this possible based on this sample?
Please let me know if any guy who know how to solve these problems.
HTML:
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class="mainDiv">
<div class="lines"></div>
<div class="title">MEMORIAL DAY</div>
<div class="title2">SALE</div>
<div class="lines"></div>
<div class="text1">stock up blah blah</div>
<div class="row">
<div class="sm-col margin">
<button type="button" class="btn btn-info">but1</button>
<button type="button" class="btn btn-info">but2</button>
</div>
<div class="row">
<div class="sm-col">
<button type="button" class="btn btn-info">but1</button>
<button type="button" class="btn btn-info">but2</button>
</div>
</div>
</div>
You need css to do the margins by the way. Really recommend Using it.
CSS:
.mainDiv {
background-color: white;
width: 350px;
height: 500px;
display: inline-block;
text-align: center;
}
.lines {
margin-top: 50px;
display: inline-block;
text-align: center;
margin-bottom: 10px;
height: 6px;
width: 200px;
background-color: pink;
}
.title {
color: black;
font-size: 25px;
}
.title2 {
color: black;
font-size: 60px;
}
.text1{
font-size:17;
}
.margin{
margin-bottom:30px;
}
LINK TO JSFIDDLE :)))
I have an image that takes up the fold, below a fixed nav. I Want to vertical align: middle the #fold-text and chevron over the image.
html markup:
<div class="row">
<img class="background-image" src="images/1400px_splash.jpeg">
<div id="fold-container">
<div id="fold-text">
Sign up to learn about upcoming changes!
</div>
<div class="fa fa-chevron-down"></div>
</div>
</img>
</div>
This CSS below usually works when I want to center one div within another, but not luck on this (maybe because the img height is set to "auto" ? ) . Can anyone tell me how to correct this?
.background-image {
height: auto;
width: 100%;
display: table;
}
#fold-container {
display: table-cell;
vertical-align: middle;
}
#fold-text {
font-size: 1.6em;
font-weight: bold;
background-color: rgba(black, 0.3);
color: white;
display: table-cell;
}
.fa.fa-chevron-down {
z-index: 500;
color:white;
text-align: center;
font-size: 2em;
font-weight: normal;
display: table-cell;
}
Your desired markup:
<div class="row">
<img class="background-image" src="images/1400px_splash.jpeg">
<div id="fold-container">
<div id="fold-text">
Sign up to learn about upcoming changes!
</div>
<div class="fa fa-chevron-down"></div>
</div>
</img>
</div>
... is not valid HTML. <img> tags don't contain any other markup, so what the browser sees is more like this:
<div class="row">
<!-- note the self closing img tag -->
<img class="background-image" src="images/1400px_splash.jpeg"/>
<div id="fold-container">
<div id="fold-text">
Sign up to learn about upcoming changes!
</div>
<div class="fa fa-chevron-down"></div>
</div>
<!-- </img> don't know what to do with this, because img tags close themselves -->
</div>
What you need to do is more like this:
<div class="row">
<div id="fold-container">
<div id="fold-text">
Sign up to learn about upcoming changes!
</div>
<div class="fa fa-chevron-down"></div>
<img class="background-image" src="images/1400px_splash.jpeg"/>
</div>
</div>
... and just make sure the appropriate stylings are added to your elements to position them appropriately.
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);
}
I am using skeleton css framework, I want to vertically align my fontawesome icon to the right of a textarea, but it seems the common "vertical-align:middle; display: table-cell;" doesn't work. I also want when the textarea resizes, the icon still aligns in the middle, without hard code a height inside the style, is it possible?
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" rel="stylesheet"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style type="text/css">
.icon {
margin-left: 1em;
vertical-align: middle;
display: table-cell;
}
</style>
<div class="row">
<div class="six columns">
<label for="inputA">labelA</label>
<textarea class="u-full-width" id="inputA" type="text"></textarea>
</div>
<div class="one colum">
<span class="icon"> <i class="fa fa-check-circle"></i> </span>
</div>
</div>
You may need to fake it, due to the way skeleton styles its columns.
As such, you can use absolute positioning to offset the icon as necessary:
.six.columns {
position: relative; /* <-- ensure the icon positions relative to the parent column */
}
#inputA {
margin-bottom: 0; /* <-- remove the textarea margin, making the icon look like its not centered */
}
.icon {
position: absolute; /* <-- position the icon */
/* transform:translateY(-50%); OPTIONAL, use for true vertical alignment */
top: 50%;
right: -20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" rel="stylesheet" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="row">
<div class="six columns">
<label for="inputA">labelA</label>
<textarea class="u-full-width" id="inputA" type="text"></textarea>
<span class="icon"> <i class="fa fa-check-circle"></i> </span>
</div>
<div class="one column">
</div>
</div>
You can try creating a javascript function wich reubicates the icon. Anyways, it could be a little bit of trouble if you're handling with many dinamic icons/textareas.
css:
.icon {
margin-left: 1em;
vertical-align: middle;
display: table-cell;
position:absolute; <--- additions
padding-top:52px; <--- additions
padding-left:269px; <--- additions
}
HTML (Notice the onClick="resiz()" instruction)
<textarea onClick="resiz()" class="u-full-width" id="inputA" type="text"></textarea>
<span id="ico" class="icon"> <i class="fa fa-check-circle"></i> </span>
JavaScript
document.resiz=function(){
var he = document.getElementById("inputA").offsetHeight;
var wi = document.getElementById("inputA").offsetWidth;
document.getElementById("ico").style.paddingTop=(he/2+20)+'px';
document.getElementById("ico").style.paddingLeft=wi+'px';
}
Here's the code: https://jsfiddle.net/ko2dzcfc/
You can also make the resiz() instruction to execute when the page loads, so it will automatically place the icon correctly at start, and avoid editing the css.
Update: I tested it in Firefox, and it worked well. In chromium it does not work so well. Maybe you'll have to edit the code for differents browsers
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.