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.
Related
I am Mac OS user and I found something weird.
This is the example code.
header{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 58px;
background-color: #3d3d3d;
}
.wrapper{
max-width: 500px;
border: 1px solid red;
box-sizing: border-box;
height: 100%;
margin: auto; /* to make align center */
}
main {
max-width: 500px; /* same as .wrapper */
width: 100%;
height: 120vh; /* to make scrollbar */
margin: auto; /* to make align center */
padding-top: 58px;
border: 1px solid blue;
box-sizing: border-box;
}
<header>
<div class="wrapper">123</div>
</header>
<main>main</main>
You can see the gap between header and main.
But I go to System Preferences of Mac, click the General and change Show scroll bars option to When scrolling, it shows well like below picture.
How can I align the layout of header and main even if I set the Show scroll bars option always?
List item
Consider the following code. I have placed comments in the CSS
* {
/* all elements are now border box */
box-sizing: border-box;
}
header {
position: fixed;
top: 0;
left: 0;
/* changed from 100vw to 100% */
width: 100%;
height: 58px;
background-color: #3d3d3d;
/* aligns wrapper element to the center of the header no matter its contents height */
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
/* use width or min width because contents may not be 500px wide */
min-width: 500px;
border: 1px solid red;
}
main {
/* use max width because you dont want your main element wider than 500px */
max-width: 500px;
/* to make scrollbar */
height: 120vh;
/* 0 margin on top and bottom and auto for left and right */
margin: 0 auto;
padding-top: 58px;
border: 1px solid blue;
}
<header>
<div class="wrapper">123</div>
</header>
<main>main</main>
I'm new to coding and have spent days trying to figure out how to get rid of this blank space at the bottom of my web page.
I've put my CSS code through a CSS corrector online, put red borders around all elements to try and identify elements that might be creating large borders or paddings, changed the height and width of the HTML & body elements - to no avail. Alternatively, I've tried changing the 'px' value for my map (as it is a large number and it might be pushing everything further down), but can't seem to achieve the position I want, when I do so.
Attached is all my CSS:
html, body {
background-color: #222909;
font-family: "Comic Sans MS", cursive, sans-serif;
color: yellow;
}
/* Here I have created a class to apply a solid, round and yellow border around all my frog images. As I
wanted the images to be consistent with the rest of the web page design. */
.Frog_Blog_Border {
border-style: solid;
border-color: yellow;
border-radius: 50%;
}
/* Here the style and position of the Frog Blog header is determined. I decided I wanted the header to be
centered so used the'diplay', 'margin-left' and 'margin-right' option to do so. Again, I chose the map font. I wanted the border
to stand out, so created a solid and rounded yellow border around it using the 'border' options in CSS. */
.Frog_Blog_Header {
display: block;
margin-left: auto;
margin-right: auto;
width: 904px;
height: 150px;
border-style: solid;
border-color: yellow;
border-radius: 5px;
position: relative;
}
/* Here the style and position of the map div is determined using an ID selector. I decided I wanted to fit images around
my map, so resized the map and used 'diplay', 'margin-left' and 'margin-right' to centre it. Again, I chose the map font
to be 'Comic Sans MS' for consistency, the font to be bold to stand out and font size to be 16pt. I wanted the map to stand
out, so created a solid and rounded yellow border around it using the 'border' options in CSS. */
#map {
width: 600px;
height: 500px;
font-family: "Comic Sans MS", cursive, sans-serif;
font-weight: bold;
font-size: 16px;
display: block;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-color: yellow;
border-radius: 5px;
position: relative; /* Here I wanted to position my map so that it was below the header and text of the page, so used the
'position' option set to 'relative' to move the image around the page. */
bottom: 1105px; /* 'bottom' here refers to how far from the bottom in pixels the image was moved. */
left: 5px;
}
/* Here, I am styling the text for the map legend, which is taking the same properties of being yellow, bold and 'Comic
Sans MS from the body and html styling above, but adding some padding and alignment to it, so that the accompanying legend colour
scale does not overlap with the text. */
.legend {
font-size: small;
padding-top: 10px;
text-align: left;
line-height: 18px;
position: relative; /* Here I am using the 'position' option set to 'relative' to move the image left and from the bottom, up
the page. */
bottom: 1100px;
left: 325px;
}
/* Here I am styling the legend colour scale, adding alignment and margins to ensure it doesn't overlap with the text. */
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
}
.Yellow_Eyed_Frog_Caption {
position: relative;
left: 35px;
}
.Agalychnis_Annae{
position: relative;
}
.Black_Eyed_Frog_Caption {
position: relative;
left: 45px;
}
/* This is positioning the second frog image. */
.Agalychnis_Moreletii {
position: relative;
top: 2px;
}
.Lemur_Leaf_Frog_Caption {
position: relative;
bottom: 560px;
left: 950px;
}
/* This is positioning the third frog image. */
.Lemur_Leaf_Frog {
position: relative;
bottom: 560px;
left: 950px;
}
.Lemur_Leaf_Frog_2_Caption {
position: relative;
bottom: 560px;
left: 950px;
}
/* This is positioning the fourth frog image. */
.Lemur_Leaf_Frog_2 {
position: relative;
bottom: 565px;
left: 950px;
width: 300px;
height: 200px;
}
/* This is positioning the source link for the Frog Blog header below the main Frog Blog header image. */
.Image_Source {
position: relative;
left: 860px;
}
/* This is positioning the from image source link found below the third frog image. */
.Image_Source_2 {
position: relative;
left: 40px;
top: 610px;
}
/* This is positioning the tile source link found below the third frog image. */
.Tile_Source {
position: relative;
left: 40px;
top: 607px;
}
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
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
After I did some changes, my feedback div no longer centers on screen and I can't figure out why.
To center a element one only have to set the width and then just do margin: 0 auto; That should normally be enough.
The goal is to have the div shown at the top of the screen, centered. You can see my fiddel here:
http://jsfiddle.net/3u3fd/
Code:
#feedback {
position: fixed;
top: 0px;
min-height: 50px;
width: 300px;
margin: 10px auto;
z-index: 9000;
font-weight: bold;
line-height: 24px;
border: solid 1px #d1d2d1;
padding: 10px;
background-color: #f7f2e7;
display: none;
border-radius: 5px;
-moz-border-radius: 5px; /* FF < 4.0 */
-webkit-border-radius: 5px; /* Rounded corners for Safari */
}
#feedback span { display: block; float: left;}
#feedback #feedback_icon { width: 24px; height: 24px; overflow: hidden; margin-right: 10px; }
#feedback #feedback_text { height: 24px; line-height: 24px; display: inline-block; }
<div class="clearfix" id="feedback" style="display: block;"><span class="dialogFail" id="feedback_icon"></span><div class="" id="feedback_text">Message here</div></div>
Any help appreciated!
auto margins do not work on elements with position: fixed.
Instead, you need to do this:
left: 50%;
margin-left: -Xpx;
width: Ypx;
box-sizing: border-box;
Where X = Y/2.
(The box-sizing: border-box ensures that even if you have padding or borders, it will still be centred. If that interferes with the desired width, then remove it and subtract the value of padding-left + border-left-width from the margin-left.)
You have a fixed position set. Get rid of it and it will center just fine.
In order for margin: 0 auto; to work, the parent element must have a specified width. It can be percentage or units, but it must have it.
For this solution to work in this case, you need to remove the position: fixed; and top declaraions and add a wrapping element.
http://jsfiddle.net/3u3fd/16/