I have a Web site which is working very fine. But when i am trying to use in the ipad it's giving me the scroll to the Right hand side. The site is not live so i am not able to give you the URL
I have used width: 953px for the container and i don't have used any width for the Body part.
Workaround
<meta name="viewport" content="width=953px"/>
<meta name = "viewport" content = "user-scalable=no, width=device-width">
HTML
<div class="maincontainer">
<div class="firstcontainer">
<div class="h1-fonts">
We understand your success
</div>
<div class="first-innertex">
<p>Our planning consultancy is built around our people. We recruit, develop and retain the best professionals. We build strong relationships with our clients to with</p>
</div>
<div class="clear"></div>
<input type="button" onclick="location = '/team'" class="buttonred button-fonts" value="Meet the team" />
</div>
<div class="secondcontainer">
<img src='/media/1004/success_people.png' width="555px" height="368px" alt='Banner Alt text' />
</div>
</div>
CSS
.firstcontainer {
width: 38%;
top: 147px;
margin-left: 25px;
float: left;
}
.secondcontainer {
float: right;
}
.maincontainer {
border: 1px solid #E2DEDE;
height: 368px;
margin-bottom: 20px;
width: 100%;
}
.button-red {
font-size: 16.18px;
font-family: "OpenSans";
color: rgb(255, 255, 255);
border-width: 1px;
border-color: rgb(229, 229, 229);
border-style: solid;
background-image: url('../images/arrow.png');
background-repeat: no-repeat;
height: 45px;
z-index: 97;
padding-right: 40px;
cursor: pointer;
margin-left: 0px;
background-color: rgb(182, 39, 29);
background-position: 90% 50%;
}
I have tried to put both of the thing but it's still not working.
Note: I don't want to change my css
If anyone can suggest me for this.
I have change meta tag and it's worked nicely.
<meta name="viewport" content="width=device-width; initial-scale=0.8; maximum-scale=1.5;" />
I have change initial-scale to 0.8 from 1.0. So It's reducing the zoom in the iPad and my site working very well without using any css
It is very tricky to answer without the code, but the width of an iPad is 768px in portrait view, using 953px for your container will make it wider than the device size and therefore you will get the scroll.
Try working with % on mobile devices
The width of an ipad is 768px.
So you need to use <meta name="viewport" content="width=768px"/>
And if you want a proper alignment you should give the img an %-width like this:
.secondcontainer {
float: right;
width: 55%;
}
.secondcontainer img {
width: 100%;
}
Related
I need help making the Email Opt-In bar under the Header look at the same on mobile devices as it does on my desktop. Here is the website.
I am not skilled in any kind of coding so any help would be greatly appreciated! :)
Here is the CSS I am currently using:
/* this would be the color and size of the main bar */
#nsu-head {
background-color: #ffcfde;
padding: 34px;
}
/* basic text color and placement */
#nsu-head p {
float: left;
color: #000000;
margin-top: -5px;
padding-right: 10px;
}
/* placement of the invitation text */
#nsu-head p.form_label {
text-transform: uppercase;
padding-left: 50px;
padding-right: 30px;
margin-top: 0;
}
#nsu-form-1 label {
display: none;
}
/* hides the input field labels */
/* input button styling going for a circle with drop shadow */
input#nsu-submit-1 {
/* remove if you don't care about IE8 */
}
.type1 {
width: 100px;
height: 100px;
background: yellow;
border: 3px solid red;
}
/* controls the background color during inactive and hover states */
input#nsu-submit-1.nsu-submit {
background: no-repeat darkMagenta;
border: 1px solid darkMagenta;
}
input#nsu-submit-1.nsu-submit:hover {
background: no-repeat black;
border: 1px solid black;
}
/* placement of post sign up text if no thank-you page */
p#nsu-signed-up-1 {
float: right;
font-size: .9rem;
color: #DDD;
padding-right: 0;
margin-top: -18px;
width: 45%;
}
your code is quite messy, but try doing this:
1) Look for Aweber's code. IN your source code looks like this
<div class="nsu-form" id="nsu-head">
<p class="form_label">Get <span style="font-style:italic;">Free</span> Tips to Be a Healthier Mama!</p>
<!-- Form by Newsletter Sign-Up v2.0.3 - http://wordpress.org/plugins/newsletter-sign-up/ -->
<form class="nsu-form" id="nsu-form-0" action="http://www.aweber.com/scripts/addlead.pl" method="post"><p><label for="nsu-name-0"> </label><input class="nsu-field" id="nsu-name-0" type="text" name="name" placeholder="Name" /></p><p><label for="nsu-email-0"> </label><input class="nsu-field" id="nsu-email-0" type="email" name="email" placeholder="Email" required /></p><textarea name="nsu_robocop" style="display: none;"></textarea><p><input type="submit" id="nsu-submit-0" class="nsu-submit" name="nsu_submit" value="Get it!" /></p></form>
<!-- / Newsletter Sign-Up -->
</div>
it might be different in your Aweber's code, but you'll get the idea. Now, if your plugin allows it to, try to move this part:
<p class="form_label">Get <span style="font-style:italic;">Free</span> Tips to Be a Healthier Mama!</p>
outside <div class="nsu-form" id="nsu-head"> (thus, that paragraph has to be BEFORE this nsu-form line)
Once you have this all, be sure to remove everything you currently have in your code and add it to header-left, like this:
<div id="header-left-section">
YOUR CODE HERE
</div><!-- #header-left-section -->
this will make your theme work as expected. That is: your form on the left and full width on mobile and your nav on the right and full width on mobile.
However, if you also want it to be full width in ANY screen, add this to your CSS:
#header-left-section, #header-right-section{float:none !important; clear:both; display:block}
This should fix every issue you have
My webpage wont work with IE. I fully validated my webpage with W3C, and I made sure not to use anything that was not supported in all browsers (at least I think I did)
I think I tested it with IE 8 (I don't have IE installed, just used a free webprogram)
Basicly with IE the sidebar took up the full space of the page, and then the rest of the website went below the sidebar. By the way I cannot change things to absolute. (I absolutly can't change it to absolute haha)
http://www.adrianhoulewebprojects.com/
<!--Home Page for adrianhoulewebpojects.com Version 1.0-->
<!--Written by Adrian Houle-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/HomePageStyle.css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Adrian Houle Web Projects</title>
</head>
<body>
<div id="Sidebar">
<h3>Projects</h3>
<ul>
<li>
Under Construction
</li>
<li>Unfinished Project #2</li>
<li>Unfinished Project #3</li>
<li>Unfinished Project #4</li>
<li>Unfinished Project #5</li>
</ul>
</div>
<div class="box">
<div class="HalfSpacer"></div>
<div class="TransBox" id="Header">
<h1>Welcome to<br>AdrianHouleWebProjects.com</h1>
</div>
<div class="Spacer"></div>
<div class="TransBox" id=About>
<h2>About:</h2>
<p>Welcome to my website. I had a bit of time over the holidays and decided to finally get around to learning web programming. The purpose of this website is to give me a place to practice and display what I learn in the form of web projects. I may also be making some blogs that will also serve to showcase my travelling and hobbies. Note: If you are accesing this on a mobile phone you will probaly notice the side bars text is sticking out of its box; this is just part of the joys of web porgraming, I cannot fix it for this page without rewriting it, but my next web page will be compatible.</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="NewStuff">
<h2>Coming Soon</h2>
<ul>
<li>
<h3>Australia Travel Blog</h3>
<img src="http://www.adrianhoulewebprojects.com/img/AustralianFlag100by50.gif" alt="Australian Flag" >
<p>2013-2014 Australia Travel Blog coming soon.</p>
</li>
</ul>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Contact">
<h2>Contact Info:</h2>
<p class="Italic">Please report any compatibility, accessibility, or security issues to:</p>
<p>Adrian Houle</p>
<p>adrianhoule#gmail.com</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Footer">
<p>Website by Adrian Houle</p>
</div>
</div>
<div class="BottomBorder"></div>
</body>
</html>
CSS code
/***************************************** Info *********************************************************/
/*Style Sheet for HomePage of adrianhoulewebprojects.com*/
/*Written by Adrian Houle*/
/*For any issues with my website (compatibility, accessibility, white-hat reports) feel free to contact me at
adrianhoule#gmail.com
/*Page Purpose: Create a homepage that welcomes users to my website and directs them to various projects*/
/***********************************************************************************************************/
/************************************* Table of Contents **************************************************/
/*CSS layout*/
/* -none specific elements*/
/* -classes*/
/* -ID's and children of ID's*/
/* -Other*/
/************************************************************************************************************/
/************************************** CSS code ****************************************************/
/* -none specific elements ***********************************************************************************/
p {
font-size: large;
font-weight: bolder;
}
a {
color: blue;
}
a:hover, a:focus{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
/* -classes **************************************************************************************************/
/*Element that contains everything except the sidebar and has the main background image.*/
.box {
display: block;
position: relative;
width: 100%; /*test and adjust to keep it from expading the browser*/
height: 100%;
border: 3px solid black;
right: 0;
top: 0px;
padding: 0;
background-image: url(http://www.adrianhoulewebprojects.com/img/CautionStripes.png);
}
/*Allows for synchronised space adjustment between elements*/
.Spacer {
position :relative;
height: 100px;
}
/*Allows for synchronised space adjustment between elements*/
.HalfSpacer {
position :relative;
height: 30px;
}
/*Every element that contains text belongs to this class*/
/*This class has nothing to do with transgender boxes, or gender boxes in general*/
.TransBox {
width: 70%;
padding: 1em;
z-index: 1;
left: 20%;
position: relative;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
moz-box-shadow: 0 0 5px 5px #888; /*shadow effect with cross compatibility*/
webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
.Italic {
font-style: Italic;
}
/* -ID's and children of ID's********************************************************************************/
/*Sidebar, to be fixed to the left hand side of the screen. Must allow conent to the right of it*/
#Sidebar {
height: 100%;
width: 10%;
left: 0px;
top: 0px;
padding: 2%;
display: inline;
position: fixed;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
border-style: solid;
border-width: 3px;
z-index: 2;
}
#Sidebar ul {
padding-left:0;
}
#Sidebar li {
margin: 10%;
}
/*Header text*/
#Header h1 {
text-align: center;
}
#Footer p {
text-align: center;
}
/* -Other (empty)*****************************************************************************************/
Thanks for any help.
You should force IE8 to render with edge:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
It can be placed within the head of your HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- other head tags -->
</head>
<body>
</body>
</html>
Check out this answer for more a more indepth look at how it can be used.
I've been working on pre-made web templates for almost a year now and I started off by making one of my own from scratch in PSD.
The Website can be located here:
http://gamelabs.webege.com/
My first time chopping a PSD to HTML/CSS as well. Nonetheless I got the thing to work on my laptop and I got it going until I viewed on multiple other browsers (Mac/iPad/Android) etc.
The whole thing got messed up and I have been searching for almost 3 days now still without a solution.
Have tried wrapping the website in margin: 0;, using other techniques like min/max-width, using positioning and still its aligned out, showing a bottom scroll on many browser screens but my own computer. Not going with overflow here because I can hide the scroll but the website is cut.
This is my first time going ahead with a website from scratch and I'm stuck at the ground level still.
I would also like to mention that I'm not planning to build a Responsive WD with grid.less or bootstrap, I just want the website to equally align on any browser window opened and be fluid in width.
An excerpt from my choppy CSS is as:
body {
margin: 0;
padding: 0;
background-color:#000;
}
#wrapper {
margin: 0 auto;
position:relative;
width: 100%;
}
#bottombar
{
left: 0px;
top: 750px;
position: absolute;
width: 100%;
height: 200px;
z-index:1;
background:url(images/foot.png) repeat-x;
}
#bottombarglow
{
left: 260px;
top: 733px;
position: absolute;
width: 800px;
height: 51px;
z-index:2;
background:url(images/bottombarglow.png);
}
#topbar
{
left: 0px;
top: 0px;
position: absolute;
width: 100%;
height: 82px;
z-index:3;
background:url(images/tb.png)repeat-x;
}
#blueline
{
left: 80px;
top: 648px;
position: absolute;
width: 1200px;
height: 2px;
z-index:4;
background:url(images/blueline.png);
}
#bullets
{
left: 100px;
top: 660px;
position: absolute;
width: 860px;
height: 87px;
z-index:5;
background:url(images/gallery_left.png);
}
#gallerybutton
{
left: 980px;
top: 670px;
position: absolute;
width: 257px;
height: 67px;
z-index:6;
background:url(images/gallery.png);
}
#menu
{
left: 840px;
top: 14px;
position: absolute;
width: 450px;
height: 54px;
z-index:7;
background:url(images/menu.png);
}
#footer
{
left: 156px;
top: 810px;
position: absolute;
z-index:8;
width: 400px;
height: 98px;
background:url(images/footer.png);
}
#logo
{
position: absolute;
width: 237px;
height: 156px;
z-index:9;
background:url(images/logo.png);
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Title and CSS -->
<title>Game Art Labs | Play for Fun</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="bootstrap.min.css">
<!-- Fav and touch icons -->
<link rel="icon" href="http://appbuzzsolutions.com/gal/favicon.png" type="image/png">
</head>
<body>
<div id="wrapper">
<div id="logo"></div>
<div id="topbar"></div>
<div id="menu"></div>
<div id="bullets"></div>
<div id="gallerybutton"></div>
<div class="clearfix"></div>
<div id="blueline"></div>
<div id="bottombarglow"></div>
<div id="footer"></div>
<div id="bottombar"></div>
<!-- BG SLIDER -->
<!-- set the active class on whichever image you want to show up as the default
(otherwise this will be the last image) -->
<div id="slideshow">
<img src="images/bg1.png" alt="Slideshow Image 1"/>
<img src="images/bg2.png" alt="Slideshow Image 2" />
<img src="images/bg3.png" alt="Slideshow Image 3" />
<img src="images/bg4.png" alt="Slideshow Image 4" />
<img src="images/bg5.png" alt="Slideshow Image 5" />
<img src="images/bg6.png" alt="Slideshow Image 6" class="active" />
</div>
<!-- Java Starts -->
<script src="bootstrap.min.js"></script>
<script src="jquerry.js" type="text/javascript"></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 4000 );
});
</script>
<!-- Java Ends -->
</div>
</body>
</html>
This is starting to eat my nerves a bit I would confess. The mistake here must be very basic but my knowledge is too. Hope someone can help me around with us. Will reply to any query.
Advance Thanks!
PS: I was inspired from Kabam.com while designing this.
If your trying to actually define the width of the whole webpage window, you need to do something like this:
body {
width: 1600px; //You can set it to any width
padding: 0px;
background-color:#000;
}
Something simpler might be to add px after your measurements, otherwise, it won't know the unit of measurement, so it is void. Think of it like this. The world is about 250,000 long. Centimeters, or light years?
If your trying to change the margin of the page, you should do this:
body {
width: 1000px; //You can set it to any width
margin: auto; //Auto will automatically center the whole page
padding: 0px; //Don't forget px!
background-color:#000;
}
I'm using twitter bootstrap for my css and the following code has an issue with the alignment:
see jsfiddle here: http://jsfiddle.net/graphicsxp/99rhF/ (make sure you enlarge the html view)
<div class="view-header">
<span class="view-title">Recherche de mandats</span>
<div class="pull-right">
<a style="line-height: 30px; margin-right: 20px; vertical-align: bottom; float: left;">
<span class="pointer">more options</span>
</a>
<form class="form-inline pull-left" placeholder="N° de contrat, nom/numéro de client" css-class="input-xxlarge">
<input class="input-xxlarge ng-dirty" type="text" placeholder="N° de contrat, nom/numéro de client" ng-model="model">
<button disabled="disabled" class="btn btn-info" type="submit"><i class="icon-search"></i> Rechercher</button>
</form>
</div>
<div class="clearfix"></div>
<div class="pull-right">
</div>
<div class="clearfix"></div>
</div>
as you can see the button with the label 'Rechercher' is too far right. What am I doing wrong ?
There is nothing wrong with your button, its the containing element.
Update the css with:
.view-header {
background-color: #F5F5F5;
border-bottom: 1px solid #BBBBBB;
margin-bottom: 20px;
padding: 10px 20px;
}
Removing width: 100%; Div's are block line elements, meaning they will fill their parent. This should solve your problem.
See:
http://jsfiddle.net/99rhF/2/
The parent element has a width of 100%, but padding isn't included in width calculations, so it ends up being 100% + 40px. You fix this by wrapping the contents in a container, and padding that instead.
http://jsfiddle.net/ndTuL/
.view-header {
background-color: #f5f5f5;
width: 100%;
margin-bottom: 20px;
border-bottom: solid 1px #bbbbbb;
}
.content-wrap {
padding: 10px 20px 10px 20px;
}
First of all, I know I'm late to the party :)
Second - #Jamie Hutber has a very good and valid answer. No arguments here at all - it should remain the accepted answer for sure.
Third - Here's what I ran in to, and how I fixed it:
HTML:
<!DOCTYPE html>
<html>
<head>
<?php echo $str->head; ?>
</head>
<body>
<footer>
© Copyright 2021-$currentYear | All Rights Reserved | No Unauthorized Use Permitted | JPeG Web Development
</footer>
</body>
</html>
<footer> is also a Block Line Element, so width is not needed. Here's what I did instead:
CSS
body {
background-color: #f8f3ed;
max-width: 1200px;
display: flex;
flex-direction: column;
margin-bottom: 2rem;
}
footer {
display: flex;
flex-direction: row;
height: 1.5rem;
font-size: 1rem;
position: absolute;
bottom: 0px;
right: 0px;
overflow: hidden;
max-width: 1200px;
padding: 5px;
}
Things to note is that the position: absolute; will mess up any text-direction and make it overflow, especially if you try and add a width: 100% to it. The right and bottom stick it on the bottom right corner no matter how much you scroll.
It's not exactly what the question was asking, but I thought it might be nice for people to see some alternate ways to have this issue, and resolve it.
I have the following HTML code where the subnav div is a collection of div tags that will act as tabs across the featuredexhibit div. Problem is that there is a white space adding between the top of the featureexhibit div and bottom of the subnav tab.
HTML:
<div id="subnav">
<div id="subnavtab">Plan Your Visit</div>
<div id="subnavtab">Tour the Museum</div>
<div id="subnavtab">Program & Events</div>
<div id="subnavtab">Membership</div>
<div id="subnavtab">Donate</div>
</div>
<div id="featuredexhibit">
Featured Exhibit - this can be a rotating menu of exhibits
</div>
CSS:
#subnav { margin-top: 20px; width: 740px; display: inline-block; }
#featuredexhibit { width: 732px; height: 200px; background-color: #A7A9AC; margin: 0; }
#subnavtab { background-color: #A1CD3A; float: left; padding: 10px 10px 10px 10px; margin: 0 5px 0 0; display: inline-block; }
I have tried using the Chrome Developer Tools to find the issue but I do not have any luck or I do not know what to look for.
There doesn't seem to be any problem with your code.
Are you sure no other CSS is conflicting? Make sure the CSS tags you are using are from the last CSS added in the HTML.
For example,
<link rel="stylesheet" type="text/css" href="css-1.css">
<link rel="stylesheet" type="text/css" href="css-2.css">
If there are common tags in "css-2.css", then it will over ride any similar tags of "css-1.css"
You should give a float to the subnav and then clear the featuredexhibit and then only it couldn't save a space between them.
#subnav{float: left;}
#featuredexhibit{clear: both;}
See this Demo
I'm honestly not sure why the white space is there, but I got it fixed in Chrome by removing the inline-block and creating a clear both.
CSS
.subnav { margin-top: 20px; width: 740px; }
.featuredexhibit { width: 732px; height: 200px; background-color: #A7A9AC; margin: 0; }
.subnavtab { background-color: #A1CD3A; float: left; padding: 10px 10px 10px 10px; margin: 0 5px 0 0; }
.clear { clear: both; }
HTML
<div class="subnav">
<div class="subnavtab">Plan Your Visit</div>
<div class="subnavtab">Tour the Museum</div>
<div class="subnavtab">Program & Events</div>
<div class="subnavtab">Membership</div>
<div class="subnavtab">Donate</div>
<div class="clear"></div>
</div>
<div class="featuredexhibit">
Featured Exhibit - this can be a rotating menu of exhibits
</div>
jsFiddle: http://jsfiddle.net/vFFx5/
I know this is old, but since I just ran into this issue I might as well point future visitors to this article: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
The problem seems to be that a new line counts as white space character in a row of inline-block elements. To solve this use floated blocks or flexbox.