http://tinypic.com/r/hrbfic/5
Hello i got problem with my footer. The main section is overlapping my footer. Main section position is relative and footer position is absolute. I dont want my footer position to be fixed. Any ideas? Thanks.
html
{
margin: 0px;
padding: 0px;
border: 0px none;
outline: 0px none;
font-size: 100%;
background: none repeat scroll 0% 0% transparent;
}
body
{
background-image: url('/images/tlo.png');
background-repeat:repeat;
font-family: Tahoma,Verdana,Arial;
font-size: 100%;
height:100%;
}
h1, .leg
{
font-size:12px;
color: orange;
text-align:center;
}
h2
{
font-size:12px;
color: orange;
text-align:left;
}
p
{
color: white;
margin-top: .5em;
font-size: .75em;
padding-left:1%;
padding-right:1%;
}
.right
{
color: white;
margin-top: .5em;
font-size: .75em;
padding-left:5%;
text-align:right;
font-style:oblique;
}
#top
{
padding-top:60px;
padding-bottom:20px;
height:auto;
width:1024px;
overflow:hidden;
margin: 0px auto;
}
nav
{
border-width: thin;
border:1px solid gray;
background-image: url('/images/tweed.png');
}
header
{
background-image: url('/images/tlo.png');
}
#div1,#div2,#div3,#div4,#div5
{
position:relative;
padding:30px;
min-height:100%;
height:auto;
width:1024px;
background-image: url('/images/podklad.png');
border-width: thin;
border:1px solid gray;
margin:0px auto;
margin-top:20px;
margin-bottom:20px;
}
#menu
{
position:relative;
text-align: center;
height:120px;
width:100%;
margin: 0px auto;
border:0px;
font-size:0px;
background-image:url('/images/podklad.png');
background-repeat:repeat;
}
#stopka
{
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:100px;
background-image:url('/images/podklad.png');
background-repeat:repeat;
margin: 0px auto;
}
ul.lista
{
text-align:center;
list-style-type:none;
margin:0;
}
ul#jezyki
{
list-style: circle;
color: white;
margin-top: .5em;
font-size: .75em;
text-align:center;
}
li.lista
{
display:inline;
margin: 0px auto;
}
.linki
{
font-size:14px;
color:white;
font-weight:bold;
}
.clear {
display:block;
float:none;
clear:both;
height:0px;
width:100%;
margin:0;
padding:0;
border:0;
}
?>
<!doctype html>
<head>
<title>Damian Pruszynski Webdesign</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link href='http://fonts.googleapis.com/css?family=Habibi' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sliding_effect.js"></script>
<script type="text/javascript" src="mojefunkcje.js"></script>
<meta name="keywords" content="Damian Pruszynski, webdesign, bialystok webdesign, strony www, programowanie bialystok, pisanie stron www, pisanie stron www bialystok, robienie stron www bialystok, robienie stron" />
<meta name="description" content="Damian Pruszynski - strona domowa, programowanie i webdesign. Programowanie stron www - HTML5 CSS3 jQuery. Skrypty PHP5 Javascript. Bannery oraz grafiki promujące. Łatwo tanio i przyjemnie."/>
<meta name="author" content="Damian Pruszyński"/>
<meta name="robots" content="index,follow" />
<meta charset="UTF-8"/>
</head>
<body>
<header>
<div id="toppodklad"></div>
<div id="top">
<img src="/images/logotop.png" alt="logo glowne" />
</div>
</header>
<nav>
<div id="menu">
<ul class="lista">
<li class="lista"><a id="pokaz1" href="index.php" ><img src="/images/pasek_01.png" alt=" " /></a></li>
<li class="lista"><a id="pokaz2" href="autor.php" ><img src="/images/pasek_02.png" alt=" " /></a></li>
<li class="lista"><a id="pokaz3" href="projekty.php" ><img src="/images/pasek_03.png" alt=" " /></a></li>
<li class="lista"><a id="pokaz4" href="kontakt.php" ><img src="/images/pasek_04.png" alt=" " /></a></li>
<li class="lista"><a id="pokaz5" href="logowanie.php" ><img src="/images/pasek_05.png" alt=" " /></a></li>
</ul>
</div>
</nav>
<div id="container">
<div id="div1">
<?php
include("newsy.php");
?>
</div>
</div>
<div id="stopka"></div>
</body>
</html>
use (clear:both;) in css hope it helps
Related
I have a webview in my UWP application, that shows some text. Some of the text is clickable (). I have tried adding the following CSS and including that in the HTML, but it does not seem to work.
a:hover {
color: red;
}
Does webview support hover in a UWP application? I have been unable to find any information regarding this.
EDIT:
Here is the HTML.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<style>
body {
font-family: 'Segoe UI';
font-size: 10pt;
color: #FFFFFF;
}
.link {
text-decoration: none;
color: #FFFFFF;
}
.link:hover {
background-color: red;
}
.linenumber {
display: inline-block;
width: 50px;
min-width: 50px;
margin-right: 10px;
}
</style>
</head>
<body>
<a class='link'>
<div>
<div class='linenumber'>1</div>
Alpha
</div>
</a>
<a class='link'>
<div>
<div class='linenumber'>2</div>
Beta
</div>
</a>
<script type='text/javascript'>
for (var i = 0; i < document.links.length; i++) {
document.links[i].onclick = function() {
window.external.notify(this.href);
return false;
}
}
</script>
</body>
</html>
}
UWP Webview: CSS :hover support?
UWP Webview support css :hover tag, you could place style in the html like the following. and load html with ms-appx-web uri scheme.
Html
<!DOCTYPE html>
<style>
a:hover{
color:red;
}
</style>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hello Html</title>
</head>
<body>
<a href="https://www.google.com" >Click Me</a>
</body>
</html>
Xaml
<Grid>
<WebView Source="ms-appx-web:///TestPage.html"/>
</Grid>
Update
<style>
body {
font-family: 'Segoe UI';
font-size: 18pt;
color: #FFFFFF;
}
.link {
text-decoration: none;
color: #000000;
}
.link:hover{
color:red;
}
.linenumber {
display: inline-block;
width: 50px;
min-width: 50px;
margin-right: 10px;
}
</style>
I'm using a template found https://bootstrapious.com/p/bootstrap-sidebar (it's the 2nd sidebar option). I have it integrated into a stock MVC5 application and everything works except for whatever is in RenderBody(), it's not responsive to when the sidebar is toggled open/closed. It is responsive when I resize the page, and the sidebar responds appropriately too, but I don't want the sidebar to overlay the contents on RenderBody(). How would I go about fixing that? Thank you in advanced!
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>
About
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<!--
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Page</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
</ul>
</div>-->
</div>
</nav>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
</script>
</body>
</html>
Site.css
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
width: 250px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 999;
background: #367fa9;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #3c8dbc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #367fa9;
background: #fff;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: #3c8dbc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #3c8dbc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: calc(100% - 250px);
padding: 40px;
min-height: 100vh;
transition: all 0.3s;
position: absolute;
top: 0;
right: 0;
}
#content.active {
width: 100%;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#content {
width: 100%;
}
#content.active {
width: calc(100% - 250px);
}
#sidebarCollapse span {
display: none;
}
}
I'm designing a basic HTML signature. I do the HTML code in Dreamweaver (Mac), open to preview in firefox/safari and select all and drag the HTML into apple mails signature composer. It works well, and the signature looks good on desktop and ipad but doesen't work on iphone/smaller screen.
The signature looks like this (i've blacked out personal details):
The problem is on the smaller iphone, some of the text stays left of the picture, and some does not fit and ends up under the photo but with a margin. What would be ideal is if on iphone, I could config so all text and icons display below the main picture all the way left with no margin. Is it possible to set a different set CSS styles for iphone in a HTML email? or is there another way I can make my code more responsive?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="sig-container" style="margin-top: 15px;padding-top: 6px; border-top: 1px dashed #ddd;">
<div style="float: left; margin: 2px 10px 5px 0px; border-right: 2px solid #000; padding-right: 30px; display: block;" id="photoWrapper"> <img src="http://websiteremoved/emailsm.jpg" id="sigPhoto" height="300px" width="200px"> </div>
<div style="margin-top:0px; margin-left: 74px;" id="sigDetailsWrapper"> <p style="font-family: Arial, sans-serif; font-size: 20px; line-height: 10px; color: #333; margin-top:10; margin-left:0; padding-left:0;"> <strong><span id="sigName">Name Removed</span></strong></span> <br>
<span id="sigTitle"><p style="font-family: Arial, sans-serif; font-size: 16px; line-height: 0px; color: #333; margin-top:0; margin-bottom:20px;margin-left:0; padding-left:0;">Title Removed | Title Removed</span><br>
<div><p style="font-family: Arial, sans-serif; font-size: 16px; line-height: 20px; color: #333;">
<span> email: emailremoved </span> <br>
<span> mobile: mobileremoved </span><br>
<span> web: websiteremoved</span> <br>
<span> facebook: facebook.com/facebookremoved</span> <br> <br>
<img src="http://websiteremoved/phone.jpg" height="62px" width="62px" style="color:#428BCA; text-decoration: none;" rel="nofollow">
<img src="http://websiteremoved/email.jpg" height="62px" width="62px" style="color:#428BCA; text-decoration: none;" rel="nofollow">
<img src="http://websiteremoved/web.jpg" height="62px" width="62px" style="color:#428BCA; text-decoration: none;" rel="nofollow"> </p> </div>
<div class="sep about" style="box-sizing: border-box;
background-attachment: scroll; height: 120px; position: relative;
-webkit-background-size: cover; background-size: cover;
background-image:
url('http://websiteremoved/about-sep.jpg');
z-index: 1; background-position: 50% -48.5px; background-repeat:
no-repeat no-repeat; "></div>
</div>
</body>
</html>
Yes, you can target iPhones using their retina screens. The media query should be "#media all and (min-device-pixel-ratio : 1.5)" For example...
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
#media all and (min-device-pixel-ratio : 1.5) {
#sigDetailsWrapper {margin-left: 0px !important;}
}
</style>
</head>
<body>
<div id="sig-container" style="margin-top: 15px;padding-top: 6px; border-top: 1px dashed #ddd;">
<div style="float: left; margin: 2px 10px 5px 0px; border-right: 2px solid #000; padding-right: 30px; display: block;" id="photoWrapper"> <img src="http://websiteremoved/emailsm.jpg" id="sigPhoto" height="300px" width="200px"> </div>
<div style="margin-top:0px; margin-left: 74px;" id="sigDetailsWrapper"> <p style="font-family: Arial, sans-serif; font-size: 20px; line-height: 10px; color: #333; margin-top:10; margin-left:0; padding-left:0;"> <strong><span id="sigName">Name Removed</span></strong></span> <br>
<span id="sigTitle"><p style="font-family: Arial, sans-serif; font-size: 16px; line-height: 0px; color: #333; margin-top:0; margin-bottom:20px;margin-left:0; padding-left:0;">Title Removed | Title Removed</span><br>
<div><p style="font-family: Arial, sans-serif; font-size: 16px; line-height: 20px; color: #333;">
<span> email: emailremoved </span> <br>
<span> mobile: mobileremoved </span><br>
<span> web: websiteremoved</span> <br>
<span> facebook: facebook.com/facebookremoved</span> <br> <br>
<img src="http://websiteremoved/phone.jpg" height="62px" width="62px" style="color:#428BCA; text-decoration: none;" rel="nofollow">
<img src="http://websiteremoved/email.jpg" height="62px" width="62px" style="color:#428BCA; text-decoration: none;" rel="nofollow">
<img src="http://websiteremoved/web.jpg" height="62px" width="62px" style="color:#428BCA; text-decoration: none;" rel="nofollow"> </p> </div>
<div class="sep about" style="box-sizing: border-box;
background-attachment: scroll; height: 120px; position: relative;
-webkit-background-size: cover; background-size: cover;
background-image:
url('http://websiteremoved/about-sep.jpg');
z-index: 1; background-position: 50% -48.5px; background-repeat:
no-repeat no-repeat; "></div>
</div>
</body>
</html>
You might want to recode this to use tables, though, as divs can often get messed up in Outlook, as well as Floats.
I've learned how to create a jquery ui tab, thanks to http://jqueryui.com/tabs, and customized the look of it. I've been searching the web on how to highlight a selected tab by changing it's background color when someone clicks on it. So far, it's been frustrated and unsuccessful.
Here's the HTML Code Use:
<!DOCTYPE html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<title>Jquery Tab Test</title>
</head>
<body>
<div id="tab-wrapper">
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<br class="clearboth" />
<div id="tabs1" class="tab-content">
Content 1
</div>
<div id="tabs2" class="tab-content">
Content 2
</div>
<div id="tabs3" class="tab-content tabs3">
Content 3
</div>
</div>
</div>
</body>
and CSS:
body, html {
height: 101%;
}
body {
font-family: arial;
}
.clearboth {
clear: both;
padding: 0;
margin: 0;
}
#tab-wrapper {
background-color: #f00fff;
border: solid 1px #909090;
padding: 5px;
width: 330px;
}
#tabs {
overflow: hidden;
}
#tabs ul li,
#tabs ul {
margin: 0;
padding: 0;
list-style: none;
}
#tabs ul a {
float: left;
padding: 5px;
display: block;
width: 100px;
text-align: center;
text-decoration: none;
color: #000000;
height: 20px;
line-height: 20px;
font-size: 10pt;
font-weight: bold;
background-color: #cccccc;
}
#tabs ul a:hover {
background-color: #f1f1f1;
}
#tabs .tab-content {
padding: 5px;
display: block;
background-color: #f1f1f1;
font-size: 10pt;
height: 300px;
border-top: solid 1px #000000;
}
Please help if anyone can.
Jquery assigns the selected tab the class="ui-tabs-active" so to style it simply hook your css into it as follows:
#tabs .ui-tabs-active {
background: yellow;
}
This works for me:
#tabs .ui-tabs-active {
background: yellow;
}
but the above answer did not - the order in the css file is important - the above is after hover.
I'm a complete noob to RoR, Bootstrap and all things code based. I'm trying to implement a full screen Bootstrap Carousel in my RoR app similar to this: http://surfscore.me/
This is what I have so far: http://cryptic-woodland-6000.herokuapp.com/
Can anyone please tell me why I can't get the image to full width....it's driving me crazy!
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
padding-bottom: 0px;
height: 100%;
width: 100%;
color: #5a5a5a;
margin: 0;
margin-right: 0;
min-height: 100%;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.logo-holder {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
margin-top: 5%;
margin-bottom: -90px;
margin-left: 5%;
/* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
/* Carousel base class */
.carousel {
margin-bottom: 0px;
}
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
z-index: 10;
}
.carousel .item {
height: 100%;
}
.carousel img {
position: relative;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
margin: 0;
}
.carousel-caption {
background-color: #0001;
position: absolute;
max-width: 400px;
padding: 35px 20px;
margin-top: 40px;
margin-left: 50px;
margin-bottom: 45%;
z-index: 20;
}
.carousel-caption h1,
.carousel-caption .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 4px 4px rgba(0,0,0,.4);
}
.carousel-caption .btn {
margin-top: 10px;
}
/* Footer
-------------------------------------------------- */
.footer {
padding: -90;
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<!-- Logo attempt
================================================== -->
<div class="logo-holder">
<img src="images/hselogo.png">
</div>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" >
<div class="carousel-inner">
<div class="carousel-caption">
<h1>COMING SOON!</h1>
<p class="lead">We're busy doing some 'market research'!</p>
<a class="btn btn-large btn-primary" href="#">Sign up today</a>
</div>
<div class="item active">
<img src="images/greek1.jpg" alt="">
</div>
<div class="item">
<img src="images/hotel.jpg" alt="">
</div>
<div class="item">
<img src="images/mykonos.jpg" alt="">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- /.carousel -->
<!-- FOOTER -->
<footer>
<p class="pull-right">91-93 Buckingham Palace Rd, London, SW1W 0RP.</p>
<p>© 2013 HOP SKIP ESCAPE LTD · Privacy · Terms</p>
</footer>
</div><!-- /.container -->
</body>
</html>
You can achieve a similar effect by dropping the container class