So I have an image and a slideshow on my website.
Image can be viewed here:
As you can see, there is a space between the grass logo and the slideshow. Is there anyway to get rid of that space? (space has a yellow arrow between the two objects)
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
<STYLE>
<!--
A{text-decoration:none}
-->
</STYLE>
</head>
<title>Webcleats, LLC - Traction on the Web</title>
<body bgcolor="#FFFFFF">
<center><h2>Home About Us Services Customers Contact Us</a></center></h2>
<h1> <center> <img src="webcleats_logo.tiff" /></center> </h1>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body style="background-color:#d7d7d7">
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/newest.001.jpg" alt="newest.001" title="" id="wows1_0"/></li>
<li><img src="data1/images/district_lines.002.jpg" alt="district_lines.002" title="" id="wows1_1"/></li>
<li><img src="data1/images/see_me.jpg" alt="see_me" title="" id="wows1_2"/></li>
</ul></div>
<div class="ws_bullets"><div>
<img src="data1/tooltips/newest.001.jpg" alt="newest.001"/>1
<img src="data1/tooltips/district_lines.002.jpg" alt="district_lines.002"/>2
<img src="data1/tooltips/see_me.jpg" alt="see_me"/>3
</div></div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</body>
</html>
And CSS (doesn't have a lot on it at the moment, I am new to CSS)
h1 {
margin:5spx;
}
#title span {
font-size: 4em;
color: #c13636;
line-height: 0.9em
}
#sidebar .links a:hover {
color:"white";
}
#webcleats {
margin: 5px 0;
}
This ought to fix you up, although it's hard to tell from your code whether the problem is the <H1> or the <UL>. Try one or the other to determine the offender.
h1,
h1 img {
margin-bottom: 0;
}
#wowslider-container1 ul,
#wowslider-container1 ul li {
margin-top: 0;
padding-top: 0;
}
simple,
add this to your header image css :
margin-bottom:0px;
and add css for your wow slider div so it looks like this:
#wowslider-container1 {
width[enter your width];
height:[enter your height];
margin-top:0px;
padding-top:0px;
}
and replace [enter your width/height] with whatever values you want them to be.
Related
I am trying to make a website (just for learning). What I want is "follow us" h2 and two icon youtube and twitter at a side(right).
and if web page shrinks or if I open the website in the mobile device. it needs to be under the menu.
<!DOCTYPE html>
<html>
<!--
Meta data and stylesheet link
-->
<head>
<meta charset="UTD-8" >
<meta name="description" content="Tech Lovers Youtube Channel" >
<meta name="keywords" content="HTML,CSS,XML,Javascript">
<meta name="author" content="Owais Qureshi">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title> Tech Lovers | Welcome</title>
<link rel="stylesheet" href="../CSS/Style.css">
</head>
<body>
<header>
<!--
top logo with heading
-->
<div id="logo" class="container">
<img src="../Media/IMG/logo.jpg" alt="tech_logo">
<h1>Tech Lovers</h1>
</div>
<!--
menu
-->
<nav id="menu" class="container">
<ul>
<li>Home</li>
<li>Blogs</li>
<li>About Us</li>
</ul>
</nav>
<!--
i want this on right side. -->
<div id="follow_us" class="container">
<h2>Follow us</h2>
youtube_img_icon
twitter_img_icon
</div>
</header>
</body>
</html>
my website looks
This should do what you want it to. :)
.headerContainer{
display : inline-block;
float : left;
width : 200px;
}
/* small screens and mobile */
#media screen and (max-width:767px) {
.headerContainer{
display : block;
float : left;
clear : both;
}
}
<!DOCTYPE html>
<html>
<!--
Meta data and stylesheet link
-->
<head>
<meta charset="UTD-8" >
<meta name="description" content="Tech Lovers Youtube Channel" >
<meta name="keywords" content="HTML,CSS,XML,Javascript">
<meta name="author" content="Owais Qureshi">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title> Tech Lovers | Welcome</title>
<link rel="stylesheet" href="../CSS/Style.css">
</head>
<body>
<header>
<!--
top logo with heading
-->
<div id="logo" class="container">
<img src="../Media/IMG/logo.jpg" alt="tech_logo">
<h1>Tech Lovers</h1>
</div>
<!--
menu
-->
<nav id="menu" class="headerContainer">
<ul>
<li>Home</li>
<li>Blogs</li>
<li>About Us</li>
</ul>
</nav>
<!--
i want this on right side. -->
<div id="follow_us" class="headerContainer">
<h2>Follow us</h2>
youtube_img_icon
twitter_img_icon
</div>
</header>
</body>
</html>
header {
display: flex;
flex-direction: column;
}
#media (min-width: 480px) {
header {
flex-direction: row;
}
}
You could try this CSS. Hope it will solve your problem.
Try:
position:absolute, bottom:0px
I have created two href's which act like buttons, in a comic game. I am following this tutorial . The issue i have is the links are not clickable. They dont respond to touch, nothing happens when clicked.
Here is the project structure:
here is my styles.css:
* {
font-family: Verdana, Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
margin: 0px auto;
background-color:#0a3003;
}
img {
margin:0px;
padding:0px;
border:0px;
width:100%;
height:auto;
display:block;
float:left;
}
.btn {
display: inline-block;
padding: 15px 4% 15px 4%;
margin-left: 1%;
margin-right: 1%;
margin-top: 5px;
margin-bottom: 5px;
font-size: 30px;
text-align: center;
vertical-align: middle;
border: 0;
color: #ffffff;
background-color: #4b4237;
width: 40%;
height: 80px;
text-decoration: none;
}
and now i'll show you the index.html where the button is not clickable from :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>2nd Race</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<div>
<img src="images/coverpage.png" alt="Cover Page"/>
</div>
<div>
<a href="#" class="btn" ><<</a>
<a href="comic/page1.html" class="btn" >>></a>
</div>
</div>
<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script src="app.js"></script>
<script src="lowBatteryCheck.js"></script>
</body>
</html>
When i load the program onto the tizen wearable emulator it looks like this but nothing is clickable:
In my opinion,
if you want to move between pages with tau.js library, you need to follow their rule. Here is some reference guide.
https://developer.tizen.org/development/ui-practices/web-application/tau/hello-world#fill_content
Maybe this issue was appeared because you didn't define "page" of TAU.
It is very simple. Just insert class="ui-page" in root <div> tag.
I tested on my desktop with Tizen IDE. In your index.html,
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>2nd Race</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="ui-page">
<div class="ui-content">
<img src="images/coverpage.png" alt="Cover Page"/>
<div>
<<
>>
</div>
</div>
</div>
<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script src="app.js"></script>
<script src="lowBatteryCheck.js"></script>
</body>
</html>
And on every other pages(comic/page1.html, page2.html... etc)
<!DOCTYPE html>
<html>
<body>
<div class="ui-page">
<div class="ui-content">
<img src="../images/page1.png" alt="Page 1" />
<div>
<a href="../index.html" class="btn" ><<</a>
<a href="page2.html" class="btn" >>></a>
</div>
</div>
</div>
<script type="text/javascript" src="../../lib/tau/wearable/js/tau.min.js"></script>
</body>
</html>
Please try again with above my example.
I checked that project runs well now :)
I created a sample page with a header containing an image. But the page is not responsive. I added the class img-responsive to the img tag but yet it is not responsive. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>A Sample Bootstrap Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header" id="header">
<img id="logo" src="img/logo.png" height="100" alt="Image" class="img-responsive">
<p>Some text here</p>
</div>
</div>
</body>
</html>
The style.css includes the following:
#header #logo
{
display: block;
margin-left: auto;
margin-right: auto;
}
Remove the img tag height="100" as suggested above and add this to your style.css
#header #logo {
display: block;
margin-left: auto;
margin-right: auto;
height: 100px;
}
As for the image not being responsive make sure the bootstrap style for .img-responsive is being used
In firebug/developer tools you should see a class of
.img responsive {
max-width: 100%;
height: auto;
display: block;
}
As for resolving your issue I'll be glad to solve it if you can make a codepen/snippet example for me to see/look at
You should do like this,even needn't use custom class to style, bootstrap provided enough.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive">
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
My css isn't being applied to a specific img id element on page. I have spent about 30 minutes trying to figure this thing out to no avail. I have 2 other elements with the exact same html and css being applied correctly. Image in question: http://i.imgur.com/Lrtucyo.gif The other two images are just like that one as far as i can tell.
body{
font-family: 'Montserrat', sans-serif;
background: url(/img/body_bg.jpg);
color:#ddd;
font-weight: 700;
font size: 30px;
}
.container{
margin: 0 auto;
}
#blue{
height:8px;
background-color: #4eb1ba;
margin-bottom: 45px;
}
#img{
border-bottom: 2px solid #4eb1ba;
}
/*BOTTLE*/
}
#spray{
border: 1px solid #4eb1ba;
}
/*/BOTTLE*/
/*Vacuum*/
#vacuum{
border: 1px solid #4eb1ba;
margin-left: 400px;
margin-top: -130px;
}
/*Vacuum*/
/*MOP*/
#mop{
border: 1px solid #4eb1ba;
margin-left: 630px;
margin-top: -130px;
}
#portfolio{
margin-top:100px;
}
<!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="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<title></title>
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[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>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html" </a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>Get In Touch</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="row-fluid">
<h4 class="underline"><span>Recent images</span></h4>
<img src="img/clean-home1.jpg" width="960" height="540" alt="">
<div id="portfolio">
<div class="row-fluid">
<div class="span4">
<img src="img/bottle.gif" id="spray" width="180" height="130">
</div>
<div class="row-fluid">
<div class="span4">
<img src="img/vacuum.gif" id="vacuum" width="180" height="130"></img>
</div>
<div class="row-fluid">
<div class="span3">
<img src="img/mop.gif" id="mop" width="180" height="130" ></img>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
You have a random closing brace before the #spray{} rule. Not sure if that is the problem, but maybe.
As I saw your codes, you don't have any element with id img in your HTML codes. I think you likely want to apply this CSS rule for all img elements, if so, replace your #img with img in your CSS style
Replace
#img {
border-bottom: 2px solid #4eb1ba;
}
with
img {
border-bottom: 2px solid #4eb1ba;
}
I'm not sure what's happened as haven't changed CSS but suddenly my background image stops towards the top of the page and won't cary on to the bottom no matter what i change
here is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Just Joel</title>
<link href="../CSS/JJ.css" rel="stylesheet" type="text/css" />
<link href="../CSS/grogrotesque.css" rel="stylesheet" type="text/css">
<link href="../CSS/stylesheet.css" rel="stylesheet" type="text/css">
<meta charset="utf-8" />
<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript" src="../js/jquery.corner.js"></script>
<script type='text/javascript' src="../js/slideshow.js"></script>
<link rel="stylesheet" href="../London Food Therapy/css/style.css" type="text/css" media="screen" />
<style type="text/css">
#import url("../../../CSS/JJ.css");
</style>
</head>
<body>
<div id="wrapperfull">
<div id="header">
<img src="../../../Images/Header.png" width="379" height="99" alt="Just Joel Header">
</div><!-- end header div -->
<div class="navigation">
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li><a href='#'><span>WORK</span></a>
<ul>
<li class="services1">
PRINT
BRANDING
EDITORIAL
PHOTOGRAPHY
</li>
</ul>
</li>
<li>BLOG</li>
<li>INSPIRED</li>
<li>CONTACT</li></ul>
</nav>
</div><!-- end navigation div -->
<div class="blog-container">
<div id="sidebarwrapper">
<div id="sidebar">
<div class="arrow right"></div><div class="arrow"></div>
<h1>DENTAL PERFECTION</h1>
<br>
<p>Tree Top News is a publcation produced through Highgate Woods, a heritage woodland in London</p>
<p>I produced the publication two years running, capturing the amazing nature and wildlife around he wood. I was responsible for rt direction, design and print.</p>
<script>
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() >= $(document).height() - 200){
setLeftBarPosition();
}
});
function setLeftBarPosition(){
// your code to set position of lefftbar
}
</script>
</div><!--sidebar!-->
</div>
<div class="project">
<img src="../../../Images/Dental/Dental5.jpg" alt="Kookielogo" class="image" height="378" width="580">
<img src="../../../Images/Dental/Dental4.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Dental/Dental2.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Canons high/Canons5.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Canons high/Canons6.jpg" alt="LFT" class="image" height="378" width="580">
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
html{
margin: 0;
padding: 0;
border: none;
height: 100%;
}
body {
margin: 0;
padding: 0;
border: none;
height: 100%;
background-image: url(../Images/Lines%20background.jpg);
background-repeat: repeat;
background-attachment: fixed;
}
in your body class you should add background-size: cover; so that it covers the entire <body>