I have this html file am working on with semantic UI,the final product is supposed to look like the one in the pic.However it doesn't render well and the image keeps being pushed to the far left side of the screen.More so the elements are also improperly aligned.Where am i growing wrong ? Here is the current code.
html code
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<meta http-equiv= "X-UA-Compatible" content ="IE=edge,chrome=1"/>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0,maximum-scale =1.0"/>
<title>SEMANTIC UI</title>
<!--Site properties-->
<!--CSS-->
<link rel = "stylesheet" type ="text/css" href ="dist/semantic.min.css">
<link rel = "stylesheet" type ="text/css" href ="dist/mycss.css">
<script type ="text/javascript" src = "dist/jquery.js"></script>
<!--Javascript-->
<script type ="text/javascript" src = "dist/semantic.min.js"></script>
<script type ="text/javascript" src = "dist/myjs.js"></script>
</head>
<body>
<!--sidebar-->
<div class = "ui sidebar menu large compact container icon labeled vertical thin">
<a class ="item" href ="#"><i class="global icon">Cities</i></a>
<a class ="item" href ="#"><i class="car icon">find a ride</i></a>
<div class = "ui buttons">
<button class = "ui button black">
<i class = "sign in icon"></i>Login
</button>
<div class = "or"></div>
<button class = "ui button green">
<i class = "users icon">Sign Up</a>
</button>
</div>
</div>
<!--Main content-->
<div class = "pusher">
<div class = "ui vertical aligned center segment landing inverted">
<div class = "transbg">
<div class = "ui container">
<div class = "ui secondary inverted top large pointing menu">
<div class = "left item">
<a class "toc item">
<i class ="sidebar icon"></i>
</a>
</div>
<div class = "right-item">
<a class = "active item" href = "/">Home</a>
<a class ="item" href ="#">Cities</a>
<a class = "item" href="#"><i class = "car icon">Find a Ride</i></a>
<div class = "item">
<div class = "ui buttons">
<button class = "ui button black">
<i class = "sign in icon"></i>Login
</button>
<div class = "or"><div>
<button class = "ui button green"><i class ="users icon"><i class = "users icon">Sign Up
</button>
</div>
</div>
</div>
</div>
</div>
<div class = "ui text container">
<h1 class = "ui header centered inverted">Look up for a ride near you</h1>
<div class = "container fluid findbg">
<form class ="ui form">
<div class = "field">
<div class = "fields">
<div class = "eleven wide field">
<div class = "ui search location">
<div class = "ui left icon input">
<i class = "inverted circular blue map icon"></i>
<input class = "prompt"type = "text" name = "location" placeholder = "enter your location...">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
CSS code file
.landing{
background:url("bg.jpg") #103d50 70% 30% no-repeat !important;
}
.landing.segment{
min-height: 500px;
padding:0em 0em;
}
.transbg{
min-height: 500px;
background:rgba(32,154,189,0.655);
}
.menu{
border:0px!important;
}
.landing h1.ui.header{
margin-top: 4.2em;
margin-bottom: 0.11em;
font-weight: 100;
}
.findbg{
padding: 1em 1.5em;
width:100%;
background:rgba(255,255,155,0.7);
}
I'd have to say that you have a few errors in your markup:
unmatched closing tags (<i> is paired to </a>)
Misuse of Semantic UI icon tags. You shouldn't put any text inside <i class="<icon name> icon"></i> as this is
translated by Semantic UI to icons specified in the class attribute.
(As pointed out by #Anirudh) Improperly closed tag (i.e. <div class="or"> <div>)
Kindy check the code below for reference. Not sure if I achieved your desired look but it fixed the broken display in your existing markup.
.landing{
background:url("bg.jpg") #103d50 70% 30% no-repeat !important;
}
.landing.segment{
min-height: 500px;
padding:0em 0em;
}
.transbg{
min-height: 500px;
background:rgba(32,154,189,0.655);
}
.menu{
border:0px!important;
}
.landing h1.ui.header{
margin-top: 4.2em;
margin-bottom: 0.11em;
font-weight: 100;
}
.findbg{
padding: 1em 1.5em;
width:100%;
background:rgba(255,255,155,0.7);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<!--sidebar-->
<div class = "ui sidebar menu large compact container icon labeled vertical thin">
<a class ="item" href ="#"><i class="global icon"></i>Cities</a>
<a class ="item" href ="#"><i class="car icon"></i>find a ride</a>
<div class="item">
<div class = "ui buttons">
<a class = "ui button black">
<i class = "sign in icon"></i>Login
</a>
<div class="or"></div>
<a class = "ui button green">
<i class = "users icon">Sign Up</i>
</a>
</div>
</div>
</div>
<!--Main content-->
<div class = "pusher">
<div class = "ui vertical aligned center segment landing inverted">
<div class = "transbg">
<div class = "ui container">
<div class = "ui fluid secondary inverted top large pointing menu">
<a class = "toc item">
<i class ="sidebar icon"></i>
</a>
<div class = "right menu">
<a class = "active item" href = "/">Home</a>
<a class ="item" href ="#">Cities</a>
<a class = "item" href="#"><i class = "car icon"></i>Find a Ride</a>
<div class = "item">
<div class = "ui buttons">
<a class = "ui button black">
<i class = "sign in icon"></i>Login
</a>
<div class = "or"></div>
<a class = "ui button green"><i class = "users icon"></i>Sign Up</a>
</div>
</div> <!-- item -->
</div><!-- right menu-->
</div><!-- pointing menu -->
</div>
<div class = "ui text container">
<h1 class = "ui header centered inverted">Look up for a ride near you</h1>
<div class = "container findbg">
<form class ="ui form">
<div class = "fields">
<div class = "sixteen wide field">
<div class = "ui search location">
<div class = "ui left icon fluid input">
<i class = "inverted circular blue map icon"></i>
<input class = "prompt"type = "text" name = "location" placeholder = "enter your location...">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Related
So Im trying simply to put a navigation bar, I wanted to add logo later, but navbar itself is not working, it is not showing when I reload the page. My app is signup and I gave the name to the page groubtn, maybe I'm doing it wrong.
<body id = "bg"style= "background-image: url('{% static 'image/doc.png' %}');">
<nav class = "navbar navbar-default">
<div class ="container-fluid">
<a class = "navbar-brand" href="{% url 'signup:groupbtn '%}" >Medical Healthcare</a>
</div>
</nav>
<h1 style="position: absolute;top: 20%; right: 41%; color: aliceblue; font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serifs">Sign in as</h1>
<div class = "center-block" style = "width: 40%; margin:auto; transform: translate(70px, 220px); " >
<div class="btn-group " >
<button class = "btn btn-lg btn-block" name = "doctor", onclick = "window.location = '/doctor_register' ;" >Doctor</button>
<button class = "btn btn-lg btn-block" name = "patient", onclick = "window.location = '/patient_register';" >Patient</button>
</div>
</div>
</body>
</html>
<!-- CLASS NOTES FIELD -->
{{#Class Notes}}<a href="#" class="hint" id="hint-cn" onclick="this.style.display='none'; myFunction('button-cn', 'hint-cn', 'button-cn'); return false;">
<button class="button-cn"><img src="classnotes.png" style="height:20px;border:0;bottom:10px;right:10px;"> Class Notes</button></a>{{/Class Notes}}
<div id="button-cn" class="generalclass" style="display:none;">
{{#Class Notes}}<button onclick="document.getElementById('hint-cn').style.display='inline-block'; myFunction('button-cn', 'hint-cn', 'button-cn')" class="button-cn" style="background:#ababab; color:black!important; font-weight:bold; width:50%!important;"><img src="classnotes.png" style="height:20px;border:0;bottom:10px;right:10px;"> Class Notes</button>
<br>
<div class="hints" id="classnotes">{{edit:Class Notes}}</div>
{{/Class Notes}}</div>
I am attempting to create a 2 column layout using bootstrap where in each row there are 2 columns :
One contains Text and one contains images adding to the explanation of the text
This is the bootstrap code :
This is the navigation bar.
<div class = "navbar navbar-default navbar-static-top">
<div class = "container ">
levi
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navbar-collapse"
name = "button" >
<span class = "navbar-toggle-Menu">Menu</span>
</button>
<div class = "collapse navbar-collapse ">
<ul class = "nav navbar-nav navbar-right ">
<li> product</li>
<li> price</li>
<li>Support</li>
<li>Sign In</li>
</ul>
</div>
</div>
</div>
This is the 2 column layout for each row
<div class = "container">
<div class = "row">
<div class = "col-sm-6 col-md-6 col-lg-8">
<h3><b>Connect Soft documents</b></h3>
<p class = "lead">Allow documents that feed into each other to provide a consistent, untainted view of the
financial, operational and social behaviour of the institution.</p>
</div>
<div class = "col-sm-3">
Image
</div>
</div>
<div class = "row">
<!-- position image to the right when on desktop,, but allow image to occupy the whole webpage when the device is less the 768px-->
<div class = "col-sm-5">
<h3><b>Improve decision models</b></h3>
<p class = "lead">Use statistical modelling to identify patterns and anomalies in the data that can help in
making better decisions.</p>
</div>
<div class = "col-sm-6">
<img src = "Statistics.png" alt = "Statistics" width = "350px" height = "270px" class = "pull-right img-responsive imG">
</div>
</div>
<div class = "row">
<div class = "col-sm-6">
<h3><b>Search. Get what is important to You!</b></h3>
<p class = "lead">All notifications and documents are indexed and
archived so that you can find what is needed at all times.</p>
</div>
<div class = "col-sm-6">
</div>
</div>
<div class = "row">
<div class = "col-sm-4">
<h3>Collaborate with other apps!</h3>
<p class = "lead" >Connect to the tools you need to prevent wasting time using so many apps </p>
<div class = "col-sm-8">
<img src = "Integrate.jpg" alt = "Integrate" width = "300" height = "300" >
</div>
</div>
</div>
<footer>
<div class = "">
<ul>
<li>Security</li>
</ul>
</div>
</footer>
How I want it to work is that when the page is being viewed on a desktop the text is aligned left and the image is aligned right.
When it is being viewed on a screen on less than 768px, the text is above the image and the image is aligned in the center of the page.
e.g.
Desktop : Text | Image
Mobile :
Text
Image
Here is my jsfiddle bootstrap website
It should have the same responsive design as slacks product page
slack's product page
it is very much easy just apply this css in the responsive media to the images
.imG{
float: none !important;
margin: auto;
text-align: center;
}
here is the updated js Fiddle
Here the solution :
<div class="row">
<div class="col-md-6 col-sm-12">
<h3>Collaborate with other apps!</h3>
<p class="lead">Connect to the tools you need to prevent wasting time using so many apps </p>
</div>
<div class="col-md-6 col-sm-12 text-center-sm">
<img src="Integrate.jpg" alt="Integrate" width="300" height="300">
</div>
</div>
I also add conditional text-align class in the css
.text-center-xs {
text-align: center;
}
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
.text-center-sm {
text-align: center;
}
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) {
.text-center-md {
text-align: center;
}
}
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) {
.text-justify-lg {
text-align: center;
}
}
The complete jsfiddle here
Take care of your tabulation in your html it's very important to provide a clean code.
Cheers bro
This is my Problem : I'm making a website and when I try to resize it the divs that I added (which are empty) stop scaling my whole website after a certain point. This is very basic but I'm not sure what's going wrong.
html-
<body>
<!-- navbar 01 starts here -->
<nav class = "navbar navbar-inverse col-lg-12">
<div class = "container">
<nav class = "navbar navbar-default">
<div class = "container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class = "navbar-header">
<button class = "navbar-toggle collapsed"
data-target = "#defaultNavbar1"
data-toggle = "collapse"
type = "button">
<span class = "sr-only">
Toggle navigation
</span>
<span class = "icon-bar">
</span>
<span class = "icon-bar">
</span>
<span class = "icon-bar">
</span>
</button>
<a class = "navbar-brand" href = "#">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id = "defaultNavbar1"
class = "collapse navbar-collapse">
<ul class = "nav navbar-nav">
<li>
<a href = "#">
Home
</a>
</li>
<li>
<a href = "#">
Contact Us
</a>
</li>
</ul>
<form class = "navbar-form navbar-left"
role = "search">
<div class = "form-group">
</div>
</form>
<ul class = "nav navbar-nav navbar-right">
<li>
<a href = "#">
Support
</a>
</li>
<li>
<a href = "#">
Get Started
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</nav>
<!-- empty div 1 -->
<div class = "index-section01">
</div>
<!--empty div 2-->
<div class = "index-section02">
</div>
<!--image-half-way-logo to home-->
<div class = "index-logo01">
<a href = "index.html">
<img class = "img-responsive"
alt = ""
src = "images/3logo_home.png"
width = "1360"
height = "138"/>
</a>
</div>
<!--empty div 3-->
<div class = "index-section03">
</div>
<script src = "js/jquery-1.11.2.min.js"
type = "text/javascript">
</script>
<script src = "js/bootstrap.js"
type = "text/javascript">
</script>
</body>
And the css code...
body
{
background-image : url(images/Final_Web_Home.jpg);
background-repeat : no-repeat;
background-size : cover;
}
.index-section01
{
min-width : 100%;
padding-bottom : 500px;
padding-right : 127px;
padding-top : 500px;
}
.index-section02
{
min-width : 100%;
padding-bottom : 770px;
padding-top : 600px;
}
.index-section03
{
min-width : 100%;
min-width : 0px;
padding-bottom : 578px;
padding-top : 833px;
}
.index-logo01
{
display : block;
padding-bottom : 85px;
padding-left : 132px;
padding-right : 0px;
padding-top : 224px;
}
.navbar-default
{
background-color : #FFE016;
padding-top : 17px;
}
.navbar-inverse
{
background-color : #FFE016;
}
This is done on the dreamweaver platform.
You are using bootstrap.
You put all the content inside <div class="container">
From the documentation:
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
Use .container for a responsive fixed width container.
So, yes, it stops getting wider when you hit the maximum width of your container. That's the point of that class.
Use .container-fluid for a full width container, spanning the entire width of your viewport.
I am trying to align some button and a input box with a table. Previous day and next day may or may not be present on the page depending on if a day exists. Below is by start code, current output and desired output.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form class = "form-inline" >
<h1>some data</h1>
<br>
<button class="btn" name = "prevDayBtn"><i class="icon-backward"></i> Previous Day</button>
<input type='text' READONLY name = 'pageDate' value = '2013-05-18' />
<button class="btn" name = "nextDayBtn" >Next Day <i class="icon-forward"></i></button>
<br>
<br>
<table class = "table table-striped">
<th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th><th>col6</th><th>col7</th><th>col8</th>
</table>
</form>
</div> <!-- /container -->
</body>
</html>
Current Output
Desired Output
Edit:
I tried Accipheran answer and got the result below. Also added code to jsFiddle http://jsfiddle.net/Y9SLs/1/
I would give the next-day button a class of pull-right (a bootstrap class) and the date field a class of center (custom class) where center is defined as
.center {
float: none;
display: table;
margin: 0 auto;
}
Think that should work
In addition to Accipheran's answer I used Twitters grid system to get the desired result. Code Below:
HTML
</head>
<body>
<div class="container">
<form class = "form-inline" >
<h1>some data</h1>
<div class = "row">
<div class = "span4">
<button class="btn" name = "prevDayBtn pull-left"><i class="icon-backward"></i> Previous Day</button>
</div>
<div class = "span4">
<input class = "center " type='text' READONLY name = 'pageDate' value = '2013-05-18' >
</div>
<div class = "span4">
<button class="btn pull-right" name = "nextDayBtn" >Next Day <i class="icon-forward"></i></button>
</div>
</div>
<br>
<div class = "row">
<div class = "span12">
<table class = "table table-striped">
<th>col11</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th><th>col6</th><th>col7</th><th>col8</th>
</table>
</div>
</div>
</form>
</div> <!-- /container -->
</body>
</html>
Additional CSS
input.center {
float: none;
display: table;
margin: 0 auto;
}