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
Related
I'm new to writing HTML and CSS, and I'm having trouble adjusting the text position.
This is what I expected to see:
But here is what I actually got:
and here is my code:
#box {
width: 330px;
height: 212px;
margin-top: 1px;
margin-left: 22.5px;
background-color: orange;
}
#box topic {
font-size: var(--text-big);
font-family: myFirstFont;
margin-top: 20px;
margin-top: 20px;
}
<section id=box>
<topic>XXX</topic>
</section>
You can add this lines to your box class to archive this.
border-radius:10px;
padding: 10px 8px;
box-sizing: border-box;
#box {
width: 330px;
height: 212px;
margin-top: 1px;
margin-left: 22.5px;
background-color: orange;
border-radius:10px;
padding: 10px 8px;
box-sizing: border-box;
}
#box topic {
font-size: var(--text-big);
font-family: myFirstFont;
margin-top: 20px;
margin-top: 20px;
}
<section id="box">
<topic>XXX</topic>
</section>
Add border-radius and padding to your section box
border-radius: 10px; /* this will make rounded edges*/
padding: 20px; /* this will give spacing */
Learn about Padding : https://developer.mozilla.org/en-US/docs/Web/CSS/padding
#box {
width: 330px;
height: 212px;
margin-top: 1px;
margin-left: 22.5px;
background-color: red;
border-radius: 10px;
padding: 20px;
}
#box topic {
font-size: var(--text-big);
font-family: myFirstFont;
margin-top: 20px;
margin-top: 20px;
}
<section id=box>
<topic>XXX</topic>
</section>
Just add some padding to your element (#box), for example padding: 12px; (adjust the value as needed). This will create an "inner distance" between border and contents.
#box {
width: 330px;
height: 212px;
margin-top: 1px;
margin-left: 22.5px;
background-color: #fc0;
padding: 12px;
}
<section id=box>
<topic>XXX</topic>
</section>
One option is as follows, among many others; explanatory comments are in the code:
/* defining custom properties, since you were
using them already: */
:root {
--text: 1em;
--text-big: 1.5em;
--spacing: 1em;
}
/* simple reset to normalise all elements to the same
means of width/height calculation, font, margin and
pading: */
*,
::before,
::after {
box-sizing: border-box;
font: normal 400 var(--text) / 1.5 sans-serif;
margin: 0;
padding: 0;
}
body {
background-color: lightgray;
}
#box {
/* unchanged: */
width: 330px;
height: 212px;
background-color: orange;
/* Added a 2px solid white border to replicate the
aesthetics from your question's 'expected output': */
border: 2px solid #fff;
/* used a custom CSS property to implement the
border-radius: */
border-radius: calc(var(--spacing));
/* Using logical properties to set the block-axis
margin (top and bottom, perpendicular to the
inline-axis, the writing-direction axis): */
margin-block: var(--spacing);
/* Again using logical properties to set the
inline-axis margin, which is - effectively,
but simplistically, the axis of writing-direction: */
margin-inline: var(--spacing);
/* logical properties again, for padding; though note
that I'm using the same --spacing custom property, along
with the CSS calc() function to reduce the size of the
padding to half that of the --spacing property: */
padding-block: calc(var(--spacing)/2);
padding-inline: calc(var(--spacing)/2);
}
#box article {
font-size: var(--text-big);
}
<section id=box>
<!-- Note that there is no <topic> element,
so I replaced that with an <article>
element instead: -->
<article>XXX</article>
</section>
JS Fiddle demo.
References:
calc() function.
CSS Logical Properties.
var() function.
explainmehow.com
The white boxes in the middle of the screen, which have text in them, are not centered. You can see it extra clear, if you make your screen really small.
White box:
.step {
background-color: white;
width: 90%;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 15px;
padding: 20px;
color: #303030;
display: block;
float: left;
}
Change width: 100%; to width: 90%; so you aren't extending the page by adding margin-right/left:5% and set padding:15px; to padding: 15px 0; so only top and bottom gets padding:
#contentholder {
background-color: #eeeeee;
margin-left: 5%;
margin-right: 5%;
min-height: calc(100vh - 210px);
width: 90%;
}
Then:
Get rid of float:left on the class .step. Boom it is all centered.
The CSS of the main content div is this:
#contentholder {
background-color: #EEEEEE;
padding: 15px;
margin-left: 5%;
margin-right: 5%;
min-height: calc(100vh - 210px);
width: 100%;
}
Take a look at the box model. The width, padding, and margin together make it so that the total width of the element is larger than the width of the screen. The white boxes inside that element are centered properly though.
So, the problem isn't the white boxes, the problem is the parent element.
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.
I am trying to make a menu bar. The container is called: #menu and has the following CSS: border: 0px;
margin: 0 auto;
position: relative;
display: inline-block;
width: 100%;
The problem is that when I set the width of the menubars to 12.5%, they leave space on the side. Sorry but I can't show the real contents so I'm giving this image: https://www.dropbox.com/s/3z86dugdw5q9ezd/test.png . The CSS for the menu_bars is: width: 12.5%;
float: left;
padding: 25px 18px 25px 18px;
background: rgba(237, 157, 28, 0.992157);
font-weight: bold;
font-size: 15px;
text-align: center;
line-height: 15px;
height: 20px;
You need to declare this for the .menu_bar_item:
.menu_bar_item {
box-sizing: border-box;
/* more styles */
}
http://jsfiddle.net/teddyrised/eWNSz/1/
The box-sizing: border-box property prevents padding from adding onto the width (that is the default behavior, anyway). With this property declared, you will need to look into adjusting your height property, too.
You should set the left padding to 20px.
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/