There is a horizontal white bar, approximately 15px in height, across the top of every one of my pages when viewing my website's mobile version. Here is the relevant CSS code and HTML markup:
body {
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
}
#container {
width: 100%;
background-color: #FFF;
}
#navigation {
display: block;
width: 100%;
height: auto;
padding: 0px;
background-color: #009245;
}
#content {
display: block;
width: 100%;
max-width: 100%;
padding: 0px;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div id="container">
<div id="navigation" class="navigationtext">
<h2>domain<br> the home page of First Last</h2>
<p>About</p>
<p>Blog</p>
<p>Contact</p>
<div class="copyright">Copyright</div>
</div>
<div id="content">
<p>Content/text goes here.</p>
</div>
</div>
</body>
</html>
I have tried many combinations of CSS properties (primarily "margin" and "padding") and have spent a lot of time searching the Web. Nothing seems to work.
Please let me know if you need anything. I will be checking this thread regularly tonight.
Just assign h2 margin:0. and in body margin:0 and padding:0.
Because by default h2 tag have margin inspect h2 tag.
.navigationtext h2 {
margin: 0px;
}
body {
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
padding: 0; /*Added*/
margin: 0; /*Added*/
}
.navigationtext h2 {
margin: 0px; /*Added css for h2 tag*/
}
#container {
width: 100%;
background-color: #FFF;
}
#navigation {
display: block;
width: 100%;
height: auto;
padding: 0px;
background-color: #009245;
}
#content {
display: block;
width: 100%;
max-width: 100%;
padding: 0px;
}
<div id="container">
<div id="navigation" class="navigationtext">
<h2>domain<br> the home page of First Last</h2>
<p>About</p>
<p>Blog</p>
<p>Contact</p>
<div class="copyright">Copyright</div>
</div>
<div id="content">
<p>Content/text goes here.</p>
</div>
</div>
It's caused by default margins on the body and h2 elements.
All you need is margin-top: 0; on these two elements.
body {
margin-top: 0; /* Remove top margin from body */
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
}
.navigationtext h2 {
margin: 0px;
}
#container {
width: 100%;
background-color: #FFF;
}
#navigation {
display: block;
width: 100%;
height: auto;
padding: 0px;
background-color: #009245;
}
h2 {
margin-top: 0; /* Remove top margin from h2 */
}
#content {
display: block;
width: 100%;
max-width: 100%;
padding: 0px;
}
<div id="container">
<div id="navigation" class="navigationtext">
<h2>domain<br> the home page of First Last</h2>
<p>About</p>
<p>Blog</p>
<p>Contact</p>
<div class="copyright">Copyright</div>
</div>
<div id="content">
<p>Content/text goes here.</p>
</div>
</div>
Related
I am using jquery-3.4.1.min.js and jquery-ui-1.12.1 .
I have a problem with jquery ui sortable widget.
When I try to drag "div.container", which is child of "div.containerList" (with applied sortable), I am not able to trigger dom change on whole height of sibling element, I have to adjust dragged element vertical position.
Can somebody please explain this behavior, possibly with solution?
Thank you very much!
https://jsfiddle.net/chada090/47ku2jer/
A added some modificaton to make it more "contrast" for each element.
HTML
<div class="containerList">
<div class="container"><span class="title">test kontejner</span>
<div class="addTask">
<div class="switch">Přidat úkol</div>
</div>
<div class="taskList"></div>
</div>
<div class="container">
<span class="title">test kontejner1</span>
<div class="addTask">
<div class="switch">Přidat úkol</div>
</div>
<div class="taskList"></div>
</div>
<div class="container placeholder"><span class="title_newCont">Nový kontejner</span></div>
</div>
JS
$(".containerList").sortable({
// containment: "parent",
placeholder: "ui-state-highlight container",
change: function( event, ui ) {
console.log(ui);
}
}).disableSelection();
CSS
.containerList{
display: flex;
min-height: 600px;
}
.containerList .container{
display:inline;
margin-left: 15px;
margin-right: 15px;
flex: 0 0 300px;
min-height: 150px;
width: 300px;
display:flex;
flex-direction: column;
background: gray;
padding: 20px;
}
.container .title_newCont{
cursor: pointer;
color: blue;
}
.container .addTask{
margin-top: 10px;
margin-bottom: 10px;
background-color: white;
box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.18), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.11);
min-height: 20px;
display: flex;
flex-direction: column;
align-items: center;
padding: 5px;
}
.container .taskList{
margin-top: 20px;
background: brown;
height: 20px;
}
.taskList > div{
background-color: white;
margin-top: 15px;
}
.taskList .taskItem{
margin-bottom: 10px;
background-color: white;
box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.18), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.11);
min-height: 40px;
display:flex;
align-items: center;
padding: 5px;
background: blue;
}
.taskNewItem > *{
padding: 3px;
background: green;
}
.taskNewItem input{
border: none;
outline: none;
background: red;
}
.addTask .switch{
text-align: center;
width: 100%;
background: yellow;
}
.taskNewItem{
display: flex;
flex-direction: column;
}
.taskNewItem input{
width: 100%;
}
.taskNewItem .taskButtonAdd{
width: 100%;
background-color: green;
flex:0 0 40px;
font-size: 15px;
border: none;
}
.ui-state-highlight{
background-color:blue !important;
}
after reading through API documentation, I found option "tolerance", which solved my problem.
tolerance Type: String Default: "intersect" Specifies which mode to
use for testing whether the item being moved is hovering over another
item. Possible values: "intersect": The item overlaps the other item
by at least 50%. "pointer": The mouse pointer overlaps the other item.
Code examples: Initialize the sortable with the tolerance option
specified:
1 2 3 $( ".selector" ).sortable({ tolerance: "pointer" });
I'm trying to enclose the datagrid inside of a custom component with three stacked divs, the one in the middle acting as a growing div. The middle div grows but the grid only shows the headers, no viewport, no rows.
<!DOCTYPE html>
<dom-module id="vertical-datagrid">
<template>
<style include="bwu-datagrid-default-theme">
:host {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: lightblue;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
flex: 1;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
overflow: hidden;
word-wrap: break-word;
width: auto;
height: 100%;
/*
height: calc(100% + 15px);
height: -moz-calc(100% + 15px);
height: -webkit-calc(100% + 15px);
*/
}
#myGrid {
--bwu-datagrid: {
width: auto;
height: 100%;
opacity: 1;
transition: opacity 200ms;
background: white;
outline: 0;
border: 1px solid gray;
};
}
#gridHeaderDiv {
padding: 0;
margin: 0;
width: auto;
height: 20px;
background-color: lightgoldenrodyellow;
}
#gridDiv {
width: 100%;
test-decoration: none;
overflow: hidden;
flex: 1 1 auto;
background-color: lightsalmon;
}
#footerDiv {
background-color: lightpink;
height: 20px;
width: 100%;
}
</style>
<div id="gridHeaderDiv">
Top Header
</div>
<div id="gridDiv">
<bwu-datagrid grid id="myGrid"
theme="bwu-datagrid-default-theme">
</bwu-datagrid>
</div>
<div id="footerDiv">
Footer
</div>
</template>
</dom-module>
</html>
This is how the grid looks:
I also added this for the resize, which works great:
dom.window.onResize.listen((dom.Event e) => grid.resizeCanvas(e));
The only way I've managed to get this working is by removing the "gridDiv" nesting and simply placing the grid in between the header/footer divs.
Trying to follow this tutorial in this book, but the images supplied are not being shown on the page my /views/layouts/ads.html.erb looks like this
<!doctype HTML>
<html>
<head>
<title>Ads: <%= controller.action_name %></title>
<%= stylesheet_link_tag 'default.css' %>
</head>
<body>
<div id="wrapper">
<div id="header">
<div>
<h1>MeBay</h1>
<ul id="nav">
<li>All Ads</li>
</ul>
</div>
</div>
<div id="content">
<%= yield %>
</div>
<div id="clearfooter"></div>
</div>
<div id="footer"></div>
</body>
</html>
CSS in /app/assets/stylesheets looks like this
html, body { height: 100%; }
body { background-color: #e6dacf; background-image: url('/images/bg.png'); background-position: top center; background-repeat: repeat-y; font-family: "Trebuchet MS", Arial, san-serif; font-size: 14px; margin: 0; padding: 0; text-align: center; }
a { color: #000; }
a:hover { background: #000; color: #e6dacf; }
div#wrapper { min-height: 100%; }
* html div#wrapper { height: 100%; }
div#header { background: url('/images/bgHeader.png'); height: 100px; padding: 8px 0 0 0; }
div#header div { margin: 0 auto; position: relative; width: 800px; }
div#header h1 { left: 0; margin: 0; position: absolute; }
div#header h1 { background: url('/images/logo.png') no-repeat; display: block; height: 0; margin: 0 auto; padding: 92px 0 0 0; overflow: hidden; width: 319px; }
ul#nav { float: right; list-style: none; margin: 0; padding: 69px 0 0 0; }
ul#nav li { background: #e6dacf; border: solid #000; border-width: 2px 2px 0 2px; float: left; margin: 0 0 0 2px; }
ul#nav a { display: block; padding: 3px 6px 0 6px; text-decoration: none; }
ul#nav a:hover { display: block; padding: 3px 6px 7px 6px; }
ul#nav a.current { padding-bottom: 8px; }
ul#nav a.current:hover { background: #e6dacf; color: #000; cursor: default; }
div#content{ margin: 0 auto; padding: 20px 0; text-align: left; width: 720px; height: 300px}
div#content img { border: 10px solid #000; float: right; margin: 18px 0 0 20px; }
div#content h2 { border: solid #999; border-width: 0 0 5px 0; font-size: 28px; margin: 0; padding: 0 0 10px 0; }
div#content p { margin: 0; padding: 4px 6px 10px 0; }
div#clearfooter { height: 110px; }
div#footer { background: url('/images/bgFooter.png'); height: 110px; margin: -110px auto 0 auto; }
and I placed the supplied images in /app/assets/images
This is how it should look, and also what it looks like for me
http://imgur.com/a/VEryr
You should debug these kinds of problems with either
Chrome Developer Tools
Firebug for Firefox
Both provide excellent support for resolving js / css related issues.
In your particular case, you need to check the Network or Net tabs in the tools to see how the CSS gets loaded. Most likely you'll see an error in loading the stylesheet.
The tool will show you the CSS path its trying to access and you can debug it from there...
Heading
I need to align tags beside the price in featured products (the tags in the example feature the text "Aussie Made").
I need to vertically align the "Aussie Made" images beside the price (bottom align). The price can dynamically change in width and height. Can someone give me some ideas on how to make the "Aussie made" image/icon float on the right and still be on the bottom of the div aligned?
I tried to put
position:absolute;
bottom:0px on the div containing the Aussie Made icon. However it didn't work. Can someone please help me on this?
Did you try using position RELATIVE?
As in relative to the PARENT container?
This should give you an ideia:
CSS
.container{position:relative; height:200px; width: 200px; outline: 1px solid #000; }
.image { position: absolute; bottom:0px; right:0px; width: 10px; height: 10px; outline: 1px solid #000; }
HTML
<div class="container"><div class="image"></div></div>
I beg your pardon, your quite right, its ABSOLUTE not RELATIVE...
Although Absolute position actually makes the contents relative to the parent.
See the photo below.
and the code...
<style type="text/css">
.Main
{
position: absolute;
left: 400px;
top: 200px;
width: 469px;
height: 280px;
}
.Photo
{
width: 469px;
height: 280px;
z-index: 1;
}
.Caption
{
position: absolute;
left: 0px;
top: 250px;
width: 461px;
height:32px;
padding-left: 8px;
background-color: #FF0000;
color: #FFFFFF;
font-family: tahoma;
font-size: 20pt;
text-align: left;
vertical-align: middle;
z-index: 2;
}
.Price
{
position: absolute;
left: 330px;
top: 215px;
width: 122px;
height: 40px;
text-align: center;
vertical-align: middle;
z-index: 3;
color: #CC3300;
font-size: 20pt;
background-color: #FFFF00;
}
.MiniText
{
top: 4px;
color: #111111;
font-size: 8pt;
font-weight: bold;
font-family: Tahoma;
}
</style>
<div style="left: 0px; top: 0px; height: 800px;">
<div class="Main">
<img class="Photo" alt="" src="http://202.92.83.79/medias/sys_master/images/8796157247518/Package-img1.jpg" />
<div class="Price" style="z-index: 4">
<div class="MiniText">First of it's kind!</div>
£100.97p
</div>
<div class="Caption" style="z-index: 3">Sooper Dooper Wotsit Thingy</div>
</div>
</div>
I have a twitter feed on my website and i'm trying to put it in a box that has a top, a middle section that repeats as needed to accommodate text and a bottom image as well as an image below the bottom. the problem is that originally the feed was in a box that didn't repeat or anything the feed was just on top of the box, but now i can't get the box set up right or the feed to do it's thing. here is my code:
#twitter_update_list {
overflow: hidden;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
line-height: 20px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
#twitter_update_list li {
font-family:Arial, Helvetica, sans-serif;
color:#000000;
list-style: none;
}
#twitter_update_list li a {
color:#f7f6e7;
text-decoration: none;
}
#twitter_update_list li a:hover {
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #f7f6e7;
}
.twitter_top {
position:absolute;
left:632px;
top: 39px;
width: 333px;
height: 27px;
background:url(twittertop.png);
}
.twitter_mid {
width: 333px;
background:url(twittermiddle.png);
background-repeat:repeat-y;
padding: 0 15px;
}
.twitter_bot {
width: 333px;
height: 27px;
background:url(twitterbottom.png);
background-repeat:no-repeat;
margin-bottom: 0px;
}
.twitter_whale {
width: 140px;
height: 67px;
left: 900px;
background-image: url(Layer-6.png) no-repeat;
position: absolute;
left: 9px;
top: 9px;
line-height: 13px;
}
<div class="twitter_top"></div>
<div class="twitter_mid">
<ul id="twitter_update_list"></ul>
</div>
<div class="twitter_bot"></div>
<div class="twitter_whale">
<div id="twitter_div"><ul id="twitter_update_list"><li></li></ul></div>
(update list i'm not putting in here because it's just the js)
</div>
<div id="twitter_box">
<div id="twitter_top">
</div>
<div id="twitter_middle">
</div>
<div id="twitter_bottom">
</div>
</div>
I would think it would make more sense to contain them all in one div, from here you can set your styles, since you want the middle part to expand leave the height dynamic.