I want two 'menus' on my page, but when I add a div next to my leftmenu (where I didn't use div but pictures) I get ugly space between my pictures.
My current code is:
<html>
<head>
<title>Welcome to Nielyboyken</title>
</head>
<body bgcolor="grey">
<br>
<a href="http://zeldauniverse.net">
<img src="http://i1.minus.com/jbg3tjE57KYsx1.png" />
</a>
<a href="">
<img src="http://i.minus.com/ip2vEndNDv7vj.png" />
</a><text-align:"right">
<iframe src="http://free.timeanddate.com/clock/i3qoeq8q/n48/szw135/szh135/hoc000/hbw12/hfc000/cf100/hgr0/hcw1/fas20/facfff/fdi88/mqc0033cd/mqs3/mql5/mqw2/mqd74/mhc0033cd/mhs4/mhl4/mhw2/mhd76/mmcf90/mml4/mmw1/mmd74/hhc666/hmc666" frameborder="0" width="137" height="137"></iframe>
</font>
<div style="width:1340px; height:20px; background-color:black;">
Contact
[Register]
[Login]</font>
</div>
<center>
<font style="font-family: Fixedsys;font-size: 35px;color:blue">Welcome to my personal site!</font>
</center>
<center><font style="font-family:Fixedsys,;color:white">Welcome! Notice that this is not a forum site but just a personal site.</font></center>
<div id="LeftMenu">
<table>
<img src="http://i5.minus.com/iI7VEHhLP3WyV.png" /> <br>
<a target="_blank" href="http://minus.com/lJMgzKG1FFv2v">
<img src="http://i.minus.com/jJMgzKG1FFv2v.png" border="0"/>
</a>
<div style="width:50px; height:50px; color:red;" </div> <br>
<a href="http://zeldauniverse.net">
<img src="http://i.minus.com/ibfBWr7hEsMtsT.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://youtube.com">
<img src="http://i.minus.com/ib0OadHbWfnpew.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://twitter.com">
<img src="http://i.minus.com/iMNcGJ5Bjwvx4.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://facebook.com">
<img src="http://i.minus.com/ibhDDFKmGlL4rk.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<img src="http://i4.minus.com/i6nJ7Pg8kUfqo.png" /> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="page2test.html" >
<img src="http://i.minus.com/iFNcJv4UvSdye.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="aboutzu.html">
<img src="http://i.minus.com/ishbphpEbNRi2.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://twitter.com/nielyboyken">
<img src="http://i.minus.com/ihJnSHKv3vAco.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://www.zeldauniverse.net/forums/members/5390370-nielyboyken.html">
<img src="http://i.minus.com/ibdZgDlK1H5NLP.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="youtube.com/nielyboyken">
<img src="http://i.minus.com/iGZahFuxuc349.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" />
</table>
</div>
</body>
</html>
Does someone know how to fix it?
You should use CSS. HTML is going to leave white space unless you explicitely define where you want them in your DIVs. Much easier to use a CSS template, and format with that. You will have ability to "stick" things in place with CSS.
http://www.w3schools.com/css/
OR
You could use a 1x 2 table. and then insert each element inside the table. Then they would be side by side. Define Column properties, etc...
You should really Google the formatting of this stuff before you ask on here...
Related
I'm trying to use the jquery-bootgrid plugin, but running into some issues using a simple initialization.
The button pagination isn't styled properly and the pageSize/column selection button throws an error in the console when you click on the button:
a.default is not a constructor
This is my markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Dashboard </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.css" />
</head>
<body>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">BRANDING</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search" />
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap"> <a class="nav-link" href="#">Sign out</a> </li>
</ul>
</nav>
<div id="content-container" class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="sidebar-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item"> <a class="nav-link active" href="#">Menu Item 1 <span class="sr-only">(current)</span> </a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Menu Item 2</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Menu Item 3</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Menu Item 4</a> </li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
<h1 class="h2 pt-3 pb-2 mb-3 border-bottom">Users</h1>
<!-- jquery-bootgrid starts here -->
<table id="grid-basic" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="id" data-type="numeric">ID</th>
<th data-column-id="email">Sender</th>
<th data-column-id="firstName">First Name</th>
<th data-column-id="lastName" data-order="desc">Last Name</th>
<th data-column-id="deactivated">Deactivated</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>user#domain.com</td>
<td>John</td>
<td>Smith</td>
<td>true</td>
</tr>
</tbody>
</table>
</main>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.fa.min.js"></script>
<script>
$(document).ready(function() {
$("#grid-basic").bootgrid();
});
</script>
</body>
</html>
I don't feel like I'm doing anything overly complicated here and I'm following the example in the documentation.
This leads me to believe it is a version conflict with bootstrap 4.5.
I want display the video blob. How can I process for the src?
<div class="jumbotron col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3" th:each="film: ${films}">
<p th:text="${film.description}" />
<p th:text="${film.genre}" />
<p th:text="${film.nomFilm}" />
<p th:text="${film.titre}"/> <video src="${film.filmvideo}"></video>
</div>
<video width="400" controls>
<source th:src="${film.filmvideo}" />
</video>
On my site some of my products picture are not shown.
When i right click to inspect element and click my pictures url there is written
410 GONE
When i refresh the site image is shown.
I have lots of products so pictures too on my site and thats a big problem for me.
Thanks for helping.
<div class="productGallery"> <img id="product" width="450" height="405" src="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_1b.jpg" data-zoom-image="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_1b.jpg" />
<c:if test="${prdDemo != ''}"><a onclick="OpenTv();" class="watch"></a></c:if>
<div id="productGallery">
<img onerror="this.src='assets/images/nophoto-140x125.jpg'" id="img_01" src="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_1b.jpg" width="70" height="70" />
<img onerror="this.src='assets/images/nophoto-140x125.jpg'" id="img_01" src="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_2b.jpg" width="70" height="70" />
<img onerror="this.src='assets/images/nophoto-140x125.jpg'" id="img_01" src="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_3b.jpg" width="70" height="70" />
<a href="#" data-image="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_4b.jpg" data-zoom-image="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_4b.jpg"> <img onerror="this.src='assets/images/nophoto-140x125.jpg'" id="img_01" src="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_4b.jpg" width="70" height="70" />
<a onclick="OpenTv();" class="tv_icon"></a></a>
</div>
</div>
I'm quite new to coding and I have a question. I have checked out several forums already, but none of them helped me out.
I have a image gallery (I used this one to get started: http://startbootstrap.com/thumbnail-gallery) and I want to get a popup with the image on full size when a viewer clicks on one of the thumbnails. Does anyone know how I can implent this function?
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="">
<meta name="description" content="">
<title></title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300' rel='stylesheet'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- HEADER -->
<div class="top-header section-content align-center">
<header>
<img class="logo" src="images/logo.png">
<ul class="inline">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
</div>
<!-- CONTENT -->
<section>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/2.png" class="grayscale" alt="Portfolio Item 1">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/1.png" class="grayscale" alt="Portfolio Item 2">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/3.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/5.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/4.png" class="grayscale" alt="Portfolio Item 1">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/6.png" class="grayscale" alt="Portfolio Item 2">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/8.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/7.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/1.png" class="grayscale" alt="Portfolio Item 1">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/4.png" class="grayscale" alt="Portfolio Item 2">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/3.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/6.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
</div>
</div>
</section>
<hr />
<!-- QUOTE AREA -->
<section>
<div class="quote-container section-content align-center">
<h2 class="interested">Interested?</h2>
<p>Do you like my work? Do you want more information about me and the services I provide? Feel free to shoot me a message!</p>
Contact
</div>
</section>
<!-- FOOTER -->
<div id="footer">
<div class="copyright">
© Copyright 2014 Distinction Portfolio Theme.
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You can use LightBox for this. It is not included in the bootstrap framework but i'm sure there are extensions made for it.
For example, you can try Bootstrap 3 lightbox : http://ashleydw.github.io/lightbox/
Use this HTML code to implement simple image pop up on click of thumbnail and have an image close option:
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-toggle="modal" data-target=".bs-example1-modal-lg">
<img class="img-responsive" src="img/clinic1.jpg" alt="">
</a>
<div class="modal fade bs-example1-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<!-- /.modal-dialog -->
<div class="modal-content">
<!-- /.modal-content -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myLargeModalLabel">Image-1</h4>
</div>
<div class="modal-body">
<img src="img/clinic1.jpg" class="img-responsive img-rounded center-block" alt="">
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
I want to have a word like table of content in telerik radeditor.
I have enabled it for editing list items,so inside sharepoint's list item dispform,the table of contents should work by scrolling down to correct title.
I tried adding a snippet using anchor tags as below ,but it opens the link in a new window in dispform.
Any ideas?
Thanks
<snippet name="Table of Content">
<![CDATA[
One
<br/>
<a href="#two" >Two</a>
<br/>
<a href="#three" >Three</a>
<br/>
<a href="#four" >Four</a>
<br/>
<a href="#five" >Five</a>
<br/>
<a href="#six" >Six</a>
<br/>
<a href="#seven" >Seven</a>
<br/>
Eight
<br/>
Nine
<br/>
<a href="#ten" >Ten</a>
<br/>
<a name="one" />
<h1>This is number One</h1>
<br/>
<a name="two" />
<h1>This is number Two</h1>
<br/>
<a name="three" />
<h1>This is number Three</h1>
<br/>
<a name="four" />
<h1>This is number Four</h1>
<br/>
<a name="five" />
<h1>This is number Five</h1>
<br/>
<a name="six" />
<h1>This is number Six</h1>
<br/>
<a name="seven" />
<h1>This is number Seven</h1>
<br/>
<a name="eight" />
<h1>This is number Eight</h1>
<br/>
<a name="nine" />
<h1>This is number Nine</h1>
<br/>
<a name="ten" />
<h1>This is number ten</h1>
<br/>
]]>
</snippet>