I'm growing frustrated in positioning my javascript date in the center of my html page. Everything else is centered but the javascript date.
Here's a screenshot:
My HTML:
<section>
<img id="html5logo"src="images/html5_logo.png" alt="html5" height="50" width="50" />
<img id="csslogo" src="images/css_logo.gif" alt="css" height="50" width="50" />
</section>
<br />
<p id="pagelastupdated">Page last updated:</p>
<script type="text/javascript">
document.write(document.lastModified);
</script>
And here's my CSS:
section {
margin-top: 10px;
margin-left: auto;
margin-right: auto;
width: 112px;
}
section img#html5logo {
display: inline;
margin-left: auto;
margin-right: auto;
}
section img#csslogo {
display: inline;
margin-left: auto;
margin-right: auto;
}
#pagelastupdated {
text-align: center;
}
script {
border: 4px solid purple;
}
PLEASE HELP ME!
You might try (adjusted to show two lines)
<p align="center" id="pagelastupdated">Page last updated:<br/>
<script type="text/javascript">
document.write(document.lastModified);
</script>
</p>
Try moving the end paragraph tag to after the end script tag, or writing the date to the document wrapped in a div and then centre that.
You're writing the date outside of the p tag, which is the one which you are centering.
Related
How to create div with 2 element's (text and img) on two oppoiste sides? Length of text is variable (it's a list of months to select). So the text should be on the left side of the div or "p" and img should be on the right. Between them is gap. Like on this page:
https://zapodaj.net/acb40b1461eaf.jpg.html
There's multiple ways to do this, either using float or a margin on each object in the container.
The CSS-Property Float could help you!
.parent {
width: 90%;
height: 100px;
background: #EFEFEF;
}
.left-child {
width: 80px;
height: 80px;
margin: 10px;
background: #DDDDDD;
float: left;
}
.right-child {
width: 80px;
height: 80px;
margin: 10px;
background: #DDDDDD;
float: right;
}
<div class="parent">
<div class="left-child"></div>
<div class="right-child"></div>
<div>
You can achieve it by using float as below:
<!DOCTYPE html>
<html>
<head>
<style>
.left {
float:left;
}
.right {
float:right;
}
img {
margin:0.5em;
}
</style>
<body>
<div class="container">
<p class="left">Text will come here</p>
<img src="" width="" height="" class="right" />
</div>
</body>
</html>
Please specify image properties.
Thanks!
There are many ways, including margin, float or even position: absolute in some cases, but it's worth noting that there is a fairly new set of css properties - flex:
.container {
display: flex;
justify-content: space-between;
}
<div class="container">
<div>a</div>
<div>b</div>
</div>
I am struggling to achieve this efect ;
I would like to put n-divs next to each others if the screen is big enough , and one below each other otherwise , and I would like those n-divs to be contained in one div ( the yellow container in my code ) and the title area (black in my code) + the yellow container in a wrapper that encapsulates everything ( green in my code )
I started to write the code , but I am far from achieving the result.
Please , be nice to me , I am new to font-end developement and still in the learning process.
Jsfiddle here --> https://jsfiddle.net/9atbtj0L/1/
I will appreciate any corrections and/or enhancements to my code.
code here :
html
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">block title here</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catA">
block A
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catB">
block B
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catC">
block C
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catD">
block D
</div>
</div>
</div>
</div>
</div>
css
.homepage-wrapper{ /*This should contain the title of the grid + different blocks*/
background-color: green;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{ /*This should be the container*/
display: flex;
height: auto;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
Thank you.
******************************EDIT***********************************
I've got some help fixing my code from very knowledgeable members of our community , so I have updated my code , alhough I noticed some others problems :
1- block that have enough space to align on a same lign don't do so and go underneath.
2- I would like to put 4 blocks per line with a left-margin only between them. The max-width for the wrapper is 1080px.
4 divs of 255px + 3 left-margin of 20px and 0px on extremes ( right side of the first div and left side of the last div ).
Edited code here :
html :
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">block title here</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catA">
<img src="https://s-media-cache-ak0.pinimg.com/originals/3f/b3/1c/3fb31c972e990cb214e55540dd9a2e2b.jpg" width="auto" height="auto">
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catB">
<img src="https://s-media-cache-ak0.pinimg.com/originals/3f/b3/1c/3fb31c972e990cb214e55540dd9a2e2b.jpg" width="auto" height="auto">
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catC">
<img src="https://s-media-cache-ak0.pinimg.com/originals/3f/b3/1c/3fb31c972e990cb214e55540dd9a2e2b.jpg" width="auto" height="auto">
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catD">
<img src="https://s-media-cache-ak0.pinimg.com/originals/3f/b3/1c/3fb31c972e990cb214e55540dd9a2e2b.jpg" width="auto" height="auto">
</div>
</div>
</div>
</div>
and css :
.homepage-wrapper{
background-color: green;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{
display: flex;
flex-wrap:wrap;
width: auto;
height: auto;
background-color: yellow;
}
.homepage-top-category-container-list > div {
margin-left: 20px;
margin-bottom: 20px;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
and JSfiddle here ---> https://jsfiddle.net/mz2u6rzg/
I have added an image to better identify blocks. I will appreciate any corrections and enhancements from our community.
Thanks for your help.
I think that you're looking for flex-wrap:wrap.
According to the MDN reference:
The CSS flex-wrap property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines.
.homepage-wrapper{ /*This should contain the title of the grid + different blocks*/
background-color: green;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{ /*This should be the container*/
display: flex;
flex-wrap:wrap;
height: auto;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">block title here</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catA">
block A
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catB">
block B
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catC">
block C
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catD">
block D
</div>
</div>
</div>
</div>
You can achieve this using media query.I have used 400px as the break point you can use as per your choice.Here is a working JSfiddle link https://jsfiddle.net/0f5y8q8b/
#media only screen and (min-width: 400px) {
.homepage-top-category-container-item{
width: 100%
}
.homepage-top-category-container-list{
display:block
}
}
you can use the css media tag to check for screen size but it might not be compatible with old browser
#media only screen and (max-width: 1023px) {
}
#media only screen and (min-width: 1024px) {
}
see CSS media queries for screen sizes
i'Ve updated your fiddle with this code AFTER the 'normal' styling so it will over write the 'default' display for your class
#media only screen and (max-width: 300px) {
.homepage-top-category-container-list{ /*This should be the container*/
display: block;
}
}
https://jsfiddle.net/9atbtj0L/1/
if you use the zoom in/out of your browser you will see it in action.
hope this helps
I am trying to use CSS to center the ASlider Jquery plugin (http://varunnaik.github.io/A-Slider/) which I have embedded into the HTML code for my website. For the life of me I can't figure out how to do it!
It seems adamant that it wants to stay on the left side of my page. I have tried using the float and display CSS elements; neither of them did anything. I even tried using margin and padding, and still nothing happened. Hell, I was desperate enough to see if text-align: center; would work but that didn't do anything either.
Here is the script in CSS and HTML to include the ASlider:
.aslider {
margin: auto;
float: center;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="a-slider/aslider.js"></script>
<!--<div id="moveslider">-->
<div class="aslider" data-hide-controls>
<div class="aslide" data-duration="5">
<img src="images/pic1.jpg" width="550px" height="300px">
</div>
<div class="aslide" data-duration="5">
<img src="images/pic2.jpg" width="550px" height="300px">
</div>
</div>
<!--</div>-->
float: center; is not valid so you can remove it from .aslider. All you need to do is add a width to .aslider so that margin: auto; takes effect.
.aslider {
margin: auto;
width: 550px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="a-slider/aslider.js"></script>
<!--<div id="moveslider">-->
<div class="aslider" data-hide-controls>
<div class="aslide" data-duration="5">
<img src="http://placehold.it/550x300" width="550px" height="300px">
</div>
<div class="aslide" data-duration="5">
<img src="http://placehold.it/550x300" width="550px" height="300px">
</div>
</div>
<!--</div>-->
Normally you can do it like this:
.wrapper{
width: 100%;
border: solid;
}
.center{
border: solid red;
width: 100px;
margin-left: auto;
margin-right: auto;
}
<div class="wrapper">
<div class="center">
This needs to be centered
</div>
</div>
Add your image width to your .aslide class
.aslider{
margin:0 auto;
}
.aslide{
width:550px;
margin:0 auto;
}
<---------------------------EDIT--------------------------->
Better yet use this:
.aslider{
width:100%;
text-align:center;
margin:0 auto;
}
Why is it that when I move my text down another vertical scroll bar appears on the inside of the browser its right where then width ends at approximately 1000px is there a way to extend the length of my page or a simple way to hide the scroll bar that is showing vertically? I still want the default browser vertical scroll bar to show. All tips are appreciated thank you!
If you need to seen any of my code just ask thanks again!
HTML:
<head>
<meta charset="utf-8" />
<title> Iamdrivingtoday.com </title>
<link rel="stylesheet" href="mfcc.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="JqueryPlugins/jquery.vegas.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.vegas.min.css"></link>
<style type="text/css">
<!--
#fadein {
position: relative;
height:100%;
width:100%;
}
#fadein img {
position:absolute;
left:0;
top:0;
}
-->
</style>
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<img src="iadt.jpg" height="100" width="300"> </img>
</header>
<center><nav id="top_menu">
<ul>
<li>Home</li>
<li>Application</li>
<li>Privacy Policy</li>
<li>Contact Us</li>
</ul>
</nav> </center>
<div class="fadein">
<img src="images/slide1.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
<img src="images/slide3.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
<img src="images/slide.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
</div>
<div class="bg1">
<img src="images/bg1.jpg" width=1500 height=308 style="position: absolute; left: -125px; top: 477px;">
</div>
<img src="Images/images/newcar.png" width=150 height=150 style="position: relative; top: 320px; left: 100px">
<img src="Images/images/usedcar.png" width=150 height=150 style="position: relative; top: 320px; left: 500px">
<section id="new_car">
<center> <h3>New Car Loan Requirements</h3> </center>
<p> If you're ready to apply for a new car loan, fill out our quick an easy application here at
Iamdrivingtoday.com But obviously, you don't want to waste your time when you don't
know the requirements to get approved for a new car loan. Here's what you'll need to qualify:
</p>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut()
.next('img')
.fadeIn()
.end()
.appendTo('.fadein');
}, 4000); // 4 seconds
$.vegas('next');
});
</script>
<section id="main_section" style="position: relative; right: 0px;">
<article>
<header>
<hgroup>
<center><h1>What is Iamdrivingtoday.com?</h1></center>
</hgroup>
</header>
<p>Iamdrivingtoday.com is where we specialize in providing auto loans for people with bad credit.
We know that new and used car customers in certain times need help
finding the right auto loan provider. If you think you
have a really bad, or low credit rating, or you have been
turned down in the past, chances are we can help!
Our specialty is getting you financed and we guarantee an
approval!</p>
</article>
<article>
<header>
<hgroup>
<center><h1>Having a hard time getting approved?</h1></center>
</hgroup>
</header>
<p>No matter what your prior credit which may be due to bankruptcy, divorce,
foreclosure, repossession, late payments, or unpaid balances we get
you driving the same day no matter your circumstances.
Just fill out the application and drive away today.</p>
</article>
</section>
<div id="new_div">
<aside id="side_news">
<h4>What your Dealer needs!</h4>
<center>Paystubs!</center>
<center>$1000 Down!</center>
<center>Proof of Insurance!</center>
</aside>
</body>
</html>
CSS:
*{
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
h1{
font:bold 16px tahoma;
}
}
header,section,footer,aside,nav,article,hgroup{
display: block;
}
body{
width: 100%;
display:-webkit-box;
-webkit-box-pack: center;
}
section{
font: 12px Verdana;
}
#big_wrapper{
max-width: 1000px;
margin: 20px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header{
background: transparent;
padding: 5px;
text-align: center;
}
#top_menu{
border: 1px solid black;
background:-webkit-linear-gradient(left, #BDBDBD, #E6E6E6, #BDBDBD);
width: 998px;
text-align: center;
box-sizing: border-box;
}
#top_menu li{
display: inline-block;
list-style: none;
padding: 5px 20px;
font: bold 14px tahoma;
}
#new_div{
display: -webkit-box;
-webkit-box-orient: horizontal;
}
#new_car{
Position: relative;
Top: 20px
}
#bg1{
border: 3px solid black;
}
#main_section{
Position: relative;
border:1px solid black;
color: white;
text-shadow:
2px 2px 0 #000,
1px 1px 0 #000;
background-image:url('tb.png');
background-size: 365px 325px;
background-color:#cccccc;
-webkit-box-flex: 1;
float: right;
margin: 15px;
margin-top: 300px;
margin-right: 625px;
padding: 20px 20px;
}
#side_news{
border: 1px solid black;
width: 250px;
margin: 20px;
padding: 30px;
background: #66CCCC;
}
#the_footer{
text-align: center;
padding: 20px;
border-top: 2px solid black;
}
Best guess without seeing code: You have a set height on that container element with overflow:auto
Edit: After looking at your code, I think the best thing to do in this situation is to encourage you to spend some more time reading up about HTML and CSS. You have a lot of inline styles and you're positioning things that really mess up the natural flow of the document. This isn't a small error that's happening but just fundamentally poor code.
I'm not saying this to be mean, but this scroll bar is the least of your problems.
By default when your contents height or width exceeds the height or width of the container explicitly set by you, the css properties overflow-y and overflow-x are enabled.
Disabling the overflow-y value on that particular element will remove the scrollbar.
overflow-y:hidden
To avoid the content from being clipped, increase the height of the container or reduce the content or vice-versa. Not setting the height explicitly or setting it to auto will ensure the container expands enough to prevent its contents from overflowing.
DEMO
You should use,
overflow-y:hidden; - Use this for hiding the Vertical scroll
overflow-x:auto; - Use this to show Horizontal scroll
For IE8: -ms-overflow-y: hidden;
http://www.w3schools.com/cssref/pr_pos_overflow.asp
I have a simple tooltip which has long JavaScript code in the divs.
I would to make it is as simple way
could any one help please
here is my code
<div onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" style="position:relative;">Tool
<div id="tt1DX1" class="toolTip_new pbc11_ttpos1_1Q_di" style="display: none;">
<div class="tool_wrapper">
<div class="tooltip_top_new"></div>
<div class="tooltip_middle_new">
<div class="content">
<p>Please holder actuall text</p>
<p>Please holder actuall text</p>
</div>
</div>
<div class="tooltip_bot_new2"></div>
</div>
</div>
</div>
css
.tooltip_top_new{
background:url(../images/n_tooltip_top.png) no-repeat;
height:9px;
width:212px;
}
.tooltip_middle_new{
background:url(../images/n_tooltip_middle.png) no-repeat;
width:212px;
}
.tooltip_middle_new .content{
padding:2px 13px 1px;
}
.tooltip_middle_new .content p{
line-height: 1.3;
margin-bottom: 1em;
text-align: left;
}
.tooltip_bot_new2{
background:url(../images/n_tooltip_bot2.png) no-repeat;
height:21px;
width:212px;
}
.Question_di{
position:relative;
}
.pbc11_ttpos1_1Q_di {
border: 0 solid #FF0000;
}
.toolTip_new {
background: none repeat scroll 0 0 transparent;
color: #5C5C5C;
display: none;
font: 10px/12px Tahoma,Geneva,sans-serif;
left: -173px;
top: -90px;
position: absolute;
z-index: 1000;
}
the thing is that I have to copy & paste onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" where ever using the tooltips,I would like to avoid it.
JQueryTools includes a Tooltip module which will get rid of a big chunk of your code.
http://jquerytools.org/demos/tooltip/index.html
It's also possible to create tooltips with no JavaScript at all, using HTML and CSS along these lines:
<div class="has-tooltip">
<button class="huge red">You Know You Wanna...</button>
<div class="tooltip">Do NOT Press This Button.</div>
</div>
And in CSS:
.has-tooltip .tooltip {
position: absolute;
display: none;
<style code to position (with margin-left and margin-top)
and make the tooltip box look how you want>
}
.has-tooltip:hover .tooltip {
display: block;
}
Google "CSS Tooltips" to see lots of examples.