I have done some absolute positioning with css. But in the following case, why in the firstBox , the top and left values are ignored? (I want top at 100 px and left at 100px). The Second box is pisitioned correctly.
<html>
<head>
<title>Testing</title>
<style type="text/css">
#firstBox {
color: white;
width: 500px;
padding: 1em;
background: red;
position::absolute;
top:100px;
left:100px;
z-index:2;
}
#secondBox {
color: white;
width: 500px;
padding: 1em;
background: blue;
position: absolute;
top: 100px;
left: 100px;
z-index: 0;
}
</style>
</head>
<body>
<div id="firstBox"> The First Box! </div>
<div id="secondBox"> The Second Box! </div>
</body>
</html>
It is because you are using 2 colons for position: absolute; for #firstBox
My Fiddle
Related
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>
So I'm trying to make a website with two different links- however, the CSS that I'm editing them with recognizes them both as "a" and puts them in the same spot. This is aggervating, I've tried basing the css off of the they're in, but that doesn't seem to be working. Here's my code:
<html>
<h1>
<div id = "firstbutton">
GOOGLE
<style type="text/css">
a {
color: rgb(255,255,255);
font-size: 60;
font-family: Arial;
text-decoration: none;
position: fixed;
top: 50%;
left: 50%;
margin-top: -85px;
margin-left: -145px;
}
</style>
</div>
<div id = "forumbutton">
Forum
<style type="text/css">
a{
color: rgb(255,255,255);
font-size: 30;
font-family: Calibri;
position: fixed;
text-decoration: none;
top: 50%;
left: 50%;
margin-top: 260px;
margin-left: -45px;
}
</style>
</div>
</h1>
<body>
<audio src="goingdown.mp3" autoplay></audio>
<style type="text/css">
body {
background-image: url('spacewallpaper.jpg');
}
</style>
</body>
</html>
Set ID for each a element
Then css should look like:
a#name1{ ... }
a#name2{ ... }
This is where classes come in handy. You should add a class attribute to each a and define your CSS with that class. Or you could use an ID.
Styles can get overridden with multiple style blocks or declarations. It doesn't apply the the closest tag.
Here is your fixed code
JS Fiddle - Working
.GClass a {
color: rgb(255,255,255);
font-size: 60;
font-family: Arial;
text-decoration: none;
position: fixed;
top: 50%;
left: 50%;
margin-top: -85px;
margin-left: -145px;
}
.FClass a{
color: rgb(255,255,255);
font-size: 30;
font-family: Calibri;
position: fixed;
text-decoration: none;
top: 50%;
left: 50%;
margin-top: 260px;
margin-left: -45px;
}
<html>
<h1>
<div id = "firstbutton">
GOOGLE
</div>
<div id = "forumbutton">
Forum
</div>
</h1>
<body>
<audio src="goingdown.mp3" autoplay></audio>
<style type="text/css">
body {
background-image: url('spacewallpaper.jpg');
}
</style>
</body>
</html>
You should set and ID for each element you are trying to add (implement), then you can call that element easily inside the CSS.
Also Element div cannot be nested inside element h1!
The font-size should be marked in pixels. Example font-size: 30px;.
The structure of your document is slightly scattered...
it is better to put all your styles in the head section an not scattered through the body section
<html>
<head>
<style type="text/css">
body
{
background-image: url('spacewallpaper.jpg');
}
a
{
color: #FFFFFF;
text-decoration: none;
top: 50%;
left: 50%;
}
.FirstLink
{
font-size: 60;
font-family: Arial;
position: fixed;
margin-top: -85px;
margin-left: -145px;
}
.SecondLink
{
font-size: 30;
font-family: Calibri;
position: fixed;
margin-top: 260px;
margin-left: -45px;
}
</style>
</head>
<body>
<h1>
<div id = "firstbutton">
<a class="FirstLink" href="http://google.com">GOOGLE</a>
</div>
<div id = "forumbutton">
<a class="SecondLink" href="http://www.google.com">Forum</a>
</div>
</h1>
<audio src="goingdown.mp3" autoplay></audio>
</body>
</html>
Try the code above and compare it to your own for reference to see the differences. Good luck.
I know dragging works because i can do it on jsfiddle examples, but i'm clearly not doing something right. I have added the html, css and js below but still cant drag the div in chrome. All help appreciated.
html
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel='stylesheet' href='drag.css'></link>
<script src='drag.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="car">
<div id="top"></div>
<div id="bottom"></div>
<div id="fwheel"></div>
<div id="bwheel"></div>
</div>
</body>
</html>
drag.css
#top {
position: relative;
height: 50px;
width: 50px;
border-radius: 5px;
background-color: #cc0000;
left: 25px;
}
#bottom {
position: relative;
height:25px;
width: 100px;
background-color: #cc0000;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
top: -25px;
}
#fwheel {
position: relative;
height:20px;
width:20px;
border-radius: 100%;
background-color: black;
top: -35px;
left: 5px;
}
#bwheel {
position: relative;
height:20px;
width:20px;
border-radius: 100%;
background-color: black;
top: -55px;
left: 75px;
}
drag.js
$(document).ready(function() {
$('#car').draggable();
});
I'm having some difficulty getting my website to display properly when viewed on the iPhone and iPad. The website displays properly when viewed on every desktop browser I've tried (safari, chrome, firefox), however, on the iPhone/iPad there is a tiny gap/space between the IMG and right box.
It works fine in Firefox. What is the problem?
Here's an inline link to JsFiddle.
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/>
<div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
#wrapper {
border-top: 8px solid #457b91;
max-width: 488px;
margin: 0 auto;
overflow: hidden;
}
#wrapper img {
width: 32%;
float: left;
}
#subject {
background-color: green;
float: right;
width: 68%;
padding-bottom: 32%;
position: relative;
}
#subject_wrapper {
padding-top: 12%;
position: absolute;
height: 100%;
width: 100%;
}
#subject span {
font-family: Thonburi;
font-size: 34px;
color: #ffffff;
display: block;
padding: 0 20%;
}
#subject span:nth-child(2) {
font-size: 18px;
line-height: 8px;
}
I don't have an iPd or iPhone to hand to check this, but try commenting out the space between your elements, thus:
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/><!--
--><div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
It's a pretty ridiculous fix, but it work for inline block elements, like menus made up of LIs.
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>