I am making responsive page cordova, I have image size of 500x500px.
<div id="div1" class="table_data1">
<img src="img/contact.png" alt="contact_image" class="image_class">
<h3 class="h3_class">Contact</h3>
</div>
.table_data1 {
position: absolute;
/* position in the center of the screen */
left: 45%;
top: 40%;
height: 30%;
/* text area height */
width: 37%;
/* text area width */
text-align: center;
padding: 10px 10px 10px 10px;
/* image height is 200px (bottom 20px are overlapped with text) */
background: rgb(119, 161, 38);
color: white;
margin: 5px;
text-transform: capitalize;
border-radius: 10px;
}
/*
Common class used for setting params for div
*/
.image_class {
max-width: 100%;
height: auto;
padding:4%;
}
I am facing problem that image is out of bound in this case
If I set height as 30% then it become small and not fit for all phone devices
EDIT :
adding image
Related
My goal was to stack two forms over each other so the outside borders aligned perfectly. I got it to work and look exactly how I want it to on the desktop site but viewing it on my mobile phone I noticed the "red box" isn't exactly on top of the other one and is slightly higher. (Like no more than 1 or 2px)
If I lower the red box to make it look right on the mobile version than the desktop version gets screwed up.
I've eliminated all margins, and tested various positioning "absolute" in and out of div's to try and eliminate this weird extra space but I still can't figure out what's causing the discrepancy in the mobile version versus the desktop version.
CSS (Included animated transitions) - if you need me to edit the code some more just let me know (sorry I'm still fairly new here)
.wrappercirclenamesearchcats {
top: 10%;
position: relative;
margin: 0 auto;
}
.circlelogo1 {
position: relative;
background: #007580;
margin: 0 auto;
border-radius: 50%;
height: 50px;
width: 50px;
/* Child elements with absolute positioning will be positioned relative to this div */
}
.circlelogo2 {
position: absolute;
background: white;
border-radius: 50%;
height: 32px;
width: 32px;
/* Put top edge and left edge in the center */
top: 50%;
left: 50%;
margin: -16px 0 0 -16px;
/* Offset the position correctly with minus half of the width and minus half of the height */
}
.name {
position: relative;
margin: 0 auto;
font-size: 45px;
font-weight: 300;
top: 25px;
height: 40px;
line-height: 40px;
color: #007580;
}
.searchcontainer {
position: relative;
height: 36px;
top: 45px;
margin: 0 auto;
width: 90%;
max-width: 400px;
box-sizing: border-box;
}
input[type=text] {
width: 100%;
border: 1px solid grey;
border-radius: 0;
-webkit-appearance: none;
padding: 8px 40px;
/* 1st size of box 2nd moves words right */
background-image: url('https://image.ibb.co/j9esac/searchicon.png');
background-position: 10px 7px;
/* 1st moves right 2nd moves down */
background-repeat: no-repeat;
font-size: 17px;
box-sizing: border-box;
}
.categories {
margin: 0 auto;
position: relative;
font-weight: 300;
word-spacing: 26px;
top: 66.5px;
#include fluid-type(font-size, 413px, 1200px, 14px, 16px);
}
.categories a {
text-decoration: none;
color: inherit;
}
#media screen and (max-width: 413px) {
.categories {
font-size: 14px;
}
}
#media screen and (min-width: 1200px) {
.categories {
font-size: 16px;
}
}
.formcontainer {
position: absolute;
top: 0;
font-size: 17px;
font-weight: 400;
padding: 10px 0 10px 0;
border: 1px solid red;
width: 100%;
max-width: 400px;
margin: 0 auto;
box-sizing: border-box;
}
input[type=unams] {
width: 70%;
padding: 12px 50px;
margin: 22px 0 0 0;
border: 1px solid grey;
border-radius: 0;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/fZHHnc/signin.png');
background-position: 10px 8px;
/* 1st controls move right 2nd move down */
background-repeat: no-repeat;
background-size: 25px;
/* username icon size */
box-sizing: border-box;
}
input[type=password] {
width: 70%;
padding: 12px 50px;
/* first is how big you want the input box 2nd is positioning of word password */
margin: 22px 0 15px 0;
border: 1px solid grey;
border-radius: 0;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/jC7gfx/lock.png');
background-position: 10px 8px;
/* 1st controls move right 2nd move down */
background-repeat: no-repeat;
background-size: 25px;
/* lock icon size */
box-sizing: border-box;
}
.loginbutton {
background-color: #007580;
border: none;
color: white;
width: 30%;
font-size: 17px;
height: 38px;
margin: 0 auto;
}
<div class="wrappercirclenamesearchcats">
<a href="index2.html">
<div class="circlelogo1">
<div class="circlelogo2">
</div>
</div></a>
<div class="name">Dollar Resources
</div>
<div class="searchcontainer">
<form>
<input name="search" type="text">
</form>
<div class="formcontainer animated slideInRight">
<form>
<input type="unams" class="usr" placeholder="Username" name="uname"
required>
<br>
<input type="password" placeholder="Password" name="psw" required>
<br>
<button class="loginbutton" type="submit">Log In</button>
</form>
</div>
</div>
<div class="categories">
<b>Categories</b> Newest Popular Music Youth
</div>
</div>
The most absolute solution to this problem would be the use of media queries. Check here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Media queries will help you design and tailor your website to work on all sizes you specify.
If media queries don't work for you, then another method would be making your bottom form's position relative, adding "overflow-x: hidden;" to your body and animating the margin-left/left of the form. With the position set to relative, rather than fixed or absolute,, it should always remain under the first form (it shouldn't overlay on top of other elements because the position will take into account all the elements surrounding it).
you can use media queries, but i don't recommend you to use absolute positioning due to responsiveness, unless you use responsive measurements (vh, vw, vmin, vmax, em, rem). i would recommend you to use wherever but em and rem, because are font-size based, and vh vw, vmin vmax are related to viewport.
it's not a quick job to set the media queries or the alignment with this measurements so i'll let you the doc to you can do it properly.
Address to w3c:
https://www.w3schools.com/cssref/css_units.asp
Media queries link that #braijon-g posted already:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
if you don't want to use any of these options listed before, you can use javascript or jQuery to reach this job, using (example with jQuery):
function windowSize(){
//get the height of the window
var height = $(window).height();
//get the width of the window
var width = $(window).width();
/* Some calculations to set the items on desired % of the screen, for example: */
//in this case i want this item to have the full screen less 100px of margin
desiredWidth = width - 100;
//adding this calculation to the desired item:
$('.desiredItem').css('width', desiredWidth);
}
//this will call and apply the windowSize function to move elements or whatever
$(document).ready(function(){
windowSize();
});
//if you resize the window, it will call the windowSize function again to recalc the position dynamically
$(window).resize(function{
windowSize();
});
Anyway i would recommend you to run over CSS to reach this, is faster, lighter and more recommendable.
div.e{
position: absolute;
top: 5vh;
left: 25vmin;
}
h1.a{
position: absolute;
left: 20vmin;
}
p.m{
position: absolute;
top: 35vh;
left: 30vmax;
}
p.l, p.e{
position: absolute;
min-width: 50vmax;
top: 25vmin;
left: 30vmax;
}
p.e{
top: 20vmin;
}
<div class="e">
<div class="x">
<h1 class="a"> Lorem ipsum dolor sit amet </h1>
<p class="m"> text text text text</p>
</div>
<div class="p">
<p class="l"> text2 text2 text2 text2 </p>
<p class="e"> text3 text3 text3 </p>
</div>
</div>
Example using absolute position with responsive measurements.
It's only to show you how different responsive measurements can work.
If you open it at full screen it will fit different than in the little screen, this is due to the use of different type of measurements.
You can use vh and vw for being more exact, or use vmin and vmax, but not blend it on a real project because the difference on their calcs.
My first question here. Hope this is OK.
I'm trying to redo a webpage I hacked together a long time ago. Right now it's barebones and I'm just trying to get some of the main stuff to work. I have a header, navbar (on the left), a content section (on the right), and a footer. The navbar and content are under and above the the header and footer, respectively. Within the navbar I have some "buttons" that I want to scroll down and up when the page scrolls. It's kinda working except for one thing:
When the buttons scroll to the bottom, they run out of the navbar and into the footer. When scrolling up, it's fine, they do not run into the header. Just when they scroll down. I want to keep these buttons contained within the navbar.
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link type="text/css" rel="stylesheet" href="newpage.css"/>
<title>Daruma An Farms</title>
</head>
<body>
<div id="header"></div>
<div id="navBar">
<div class="inner" id="inner1">Home</div>
<div class="inner" id="inner2">About</div>
<div class="inner" id="inner3">Shop</div>
<div class="inner" id="inner4">Contact</div>
<div class="inner" id="inner5">日本語</div>
</div>
<div id="content"><p>Hello. This is the new page</p>
<p>Hopefully this stuff will work</p>
<p>And we can get it up soon!</p>
</div>
<div id="copyright">Copyright</div>
</body>
</html>
Here is the CSS:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: white;
background: #95954a;
}
div {
border-radius: 5px;
}
/* This is the header ID. I would like a static pic to go here,
centered, and stuck at the top. Right now I just have a block header
as a place holder.
*/
#header {
height:259px;
width: 100%;
background-color: #965d4a;
background: url("images/logo4.jpg") no-repeat center top;
}
/* This is the navbar, which will contain the navigation buttons.
I want it to be long enough to contain all the buttons and
have a bit of empty space on the bottom.
*/
#navBar {
height: 700px;
width: 13%;
background-color: #965d4a;
position: absolute;
margin: 5px 0px 5px 130px;
float: left;
}
/* This is the CSS for the "buttons" in the nav bar.
I want them to stay on the page when the user scrolls.
I have separated the common elements into the .inner class
and put the unique elements into the IDs.
*/
.inner {
height: 50px;
width: 12%;
position: fixed;
margin-left: 6px;
padding-top: 10px;
text-align: center;
font-size: 2em;
background-color: #5d964a;
}
#inner1 {
margin-top: 5px;
}
#inner2 {
margin-top: 75px;
}
#inner3 {
margin-top: 145px;
}
#inner4 {
margin-top: 215px;
}
#inner5 {
margin-top: 285px;
}
/* This is the content area. Will have the content of the site.
I would like this to contain all the content with no extra space
at the bottom for large content areas, such as the about page
or the shop page. But I don't mind it having some extra space
at the bottom for the low content pages, like contact.
*/
#content {
width: 700px;
height: 680px;
float: right;
background-color: #965d4a;
margin: 5px 130px 5px 0px;
padding: 10px 10px 10px 10px;
}
/* This is the copyright section. I want this at the bottom of every
page. Small type, centered.
*/
#copyright {
width: 879px;
height: 50px;
background-color: #965d4a;
clear: both;
font-size: .7em;
text-align: center;
margin-left: 130px;
margin-right: 130px;
}
I hope I have that all formatted right and you can see where my problem is. I think it should be something I'm missing within the .inner class s and the #navBar ID .
Thanks for your help.
You need to adjust the height of the header, see fiddle https://jsfiddle.net/sxh0n7d1/35/
If you want it to be more diverse you will need to use javscript.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: white;
background: #95954a;
}
div {
border-radius: 5px;
}
/* This is the header ID. I would like a static pic to go here,
centered, and stuck at the top. Right now I just have a block header
as a place holder.
*/
#header {
height:180px;
width: 100%;
background-color: #965d4a;
background: url("images/logo4.jpg") no-repeat center top;
}
/* This is the navbar, which will contain the navigation buttons.
I want it to be long enough to contain all the buttons and
have a bit of empty space on the bottom.
*/
#navBar {
height: 680px;
width: 13%;
background-color: #965d4a;
position: absolute;
margin: 5px 0px 0px 130px;
float: left;
}
/* This is the CSS for the "buttons" in the nav bar.
I want them to stay on the page when the user scrolls.
I have separated the common elements into the .inner class
and put the unique elements into the IDs.
*/
.inner {
height: 50px;
width: 12%;
position: fixed;
margin-left: 6px;
padding-top: 10px;
text-align: center;
font-size: 2em;
background-color: #5d964a;
}
#inner1 {
margin-top: 5px;
}
#inner2 {
margin-top: 75px;
}
#inner3 {
margin-top: 145px;
}
#inner4 {
margin-top: 215px;
}
#inner5 {
margin-top: 285px;
}
/* This is the content area. Will have the content of the site.
I would like this to contain all the content with no extra space
at the bottom for large content areas, such as the about page
or the shop page. But I don't mind it having some extra space
at the bottom for the low content pages, like contact.
*/
#content {
width: 700px;
height: 680px;
float: right;
background-color: #965d4a;
margin: 5px 130px 5px 0px;
padding: 10px 10px 10px 10px;
}
/* This is the copyright section. I want this at the bottom of every
page. Small type, centered.
*/
#copyright {
width: 879px;
height: 50px;
background-color: #965d4a;
clear: both;
font-size: .7em;
text-align: center;
margin-left: 130px;
margin-right: 130px;
}
I want to place some text over a banner on my homepage. The banner changes it's size dynamically, when I scale it in Developer-Mode. Hower I can't mange to kepp the position of the text relative to the banner and change the font-size according to the scaling factor. I tried with font-size vh, vw, % etc.
Here is the sample on jsfiddle:
https://jsfiddle.net/malptek/2o3a81vp/2/
My html-code:
<div class="header-container clearfix">
<!-- <div class="helper-box"></div> -->
<h1 class="header-post-title-banner header-subimage">This is a title</h1>
<img src="http://mesut.alptekin.de/wp-content/uploads/tmpbanner.jpg" class="header-image">
</div>
And css:
.header-container {
margin-bottom: 0;
font-size: 16px;
z-index: 1;
/* border-bottom: 1px solid #EAEAEA; */
position: relative;
width: 100%;
}
.helper-box {
z-index: 2;
position: absolute;
margin-left: 8%;
background-color: #ababab;
margin-bottom: 0;
width: 260px;
height: 20%;
}
.header-subimage {
z-index: 2;
font-size: 16px;
position: absolute;
margin-left: 8%;
margin-bottom: 0;
/* background-color: #fff;
opacity: .5; */
width: 20%;
height: 20%;
/* width: 8em;
height: 1.67em; */
}
.header-image {
z-index: 1;
margin-bottom: 0;
/* border-bottom: 1px solid #EAEAEA; */
width: 100%;
position: relative;
}
.header-post-title-banner {
/* font-size: 3vh;
font-size: 2vw; */
font-size: 150%;
text-align: center;
color: #1b6dba;
font-weight: bold;
padding-bottom: 0;
}
#media screen and (min-width: 1285px) {
.header-post-title-banner {
font-size: 1.8em;
text-align: center;
color: #1b6dba;
font-weight: bold;
padding-bottom: 0;
}
}
==================================
UPDATE:
well, this example is working because viewport is the same size as the banner. but you can imagine the banner being inside another big with 1400px wide (see new example: jsfiddle.net/malptek/2o3a81vp/7). However, in this example the image is somehow not scaling according to the new (don't know why).
Works for me with vw.
https://jsfiddle.net/abalter/2o3a81vp/3/
CSS length measurements vw, vh, and vmin are starting to be widely supported.
http://caniuse.com/#feat=viewport-units
I'm kind of confused by how to interpret the global browser use percentages, but, unless you are concerned about compatibility with older browsers, you can use them pretty freely.
CSS: Are view height (vh) and view width (vw) units widely supported?
I'm making a Coppermine Theme which is made out of tables (The theme base was made like that). I'm trying to give it a little bit of CSS style.
I want the gallery content to occupy the whole container. Here you have the link to my gallery.
As you may notice, the gallery content is all over the left, but I can't make it go all over the right too (In that way the whole container will be occupied)
Here you have the CSS code I'm using
.maintable {
background-color: #FFFFFF;
margin-left: -40px;
padding-right:50px;
}
What am I doing wrong?
Thank you.
The <div class="container"> has padding: 40px added to it. Try changing that to padding: 40px 0 to have 40px of vertical padding but no horizontal padding. Remove the margin-left and padding-right from the .maintable
You can achieve it doing this: (just comment the lines I've commented below)
1. Container (style.css:34)
#container {
width: 1100px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
/* padding: 40px; */
box-shadow: 0px 0px 19px
}
2. menub (style.css:71)
.menub {
background-color: #000;
color: #fff;
/* width: 100%; */
padding: 30px;
/* margin-left: -40px; */
/* margin-top: -40px; */
/* padding-right: 50px; */
}
3. adminmenu (style.css:81)
.adminmenu {
background-color: #2E2E2E;
color: #fff;
/* width: 100%; */
padding: 30px;
/* margin-left: -40px; */
/* padding-right: 50px; */
margin-bottom: 30px;
}
4. maintable (style.css:221)
.maintable {
background-color: #FFFFFF;
/* margin-left: -40px; */
/* padding-right: 50px; */
}
Table cells cannot use margins.
A few alternatives:
Padding. You can still use padding on table cells.
Add margin to an inner div. Put a div in your table cell that holds your content and apply margins to that div.
The border-spacing property. https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing
I have an image that I need to display a form in it,but when I add more tags and text it becomes messy :
here is my code :
.box {
width: 650px;
padding-right: 15px; /* the gap on the right edge of the image (not content padding) */
margin: 20px auto; /* use to position the box */
z-index: 10;
position: absolute;
top: 100px;
left: 230px;
}
.box_head {
background-position: top right;
margin-right: -15px; /* pull the right image over on top of border */
padding-right: 40px; /* right-image-gap + right-inside padding */
}
.box_head h2 {
background-position: top left;
margin: 0; /* reset main site styles*/
border: 0; /* ditto */
padding: 25px 0 15px 40px; /* padding-left = image gap + interior padding ... no padding-right */
height: auto !important; height: 1%; /* IE Holly Hack */
}
.box_body {
background-position: bottom left;
margin-right: 25px; /* interior-padding right */
padding: 15px 0 15px 40px; /* mirror .cssbox_head right/left */
}
I would suggest you use an image editor and then slice your images to the components.
After that, put the images in <img> tags and next to them are input controls. By doing this way, it would be easier to control the layout using CSS.