I hope someone can help, I can't figure this out. I am creating a wordpress theme using the _s template and I am having trouble with my right column.
If I put just a bunch of line breaks in, the flow is correct. However, as soon as I insert any text, img, or anything else, that data falls below the center column.
I know it is something simple that I am just not seeing.
Here is a link to the page. http://juststin.com/test/help.html
And here is the css
.content-area {
float: left;
}
.site-content {
margin: 0 20%;
width: 60%;
-moz-border-radius: 25px 25px;
border-radius: 25px 25px;
border-width: 5px;
border-style: solid;
border-color: #333333;
background: #ffffff;
}
.pictures {
margin: 0 81%;
width: 20%;
-moz-border-radius: 25px 25px;
border-radius: 25px 25px;
border-width: 2px;
border-style: solid;
border-color: #ffffff;
background: #ffffff;
}
.site-main .widget-area {
float: left;
margin: 0 0 0 -100%;
width: 20%;
background: #2E9AFE;
background: #333333;
}
.site-footer {
clear: both;
width: 100%;
background: #ffffff;
-moz-border-radius: 25px 25px;
border-radius: 25px 25px;
border-width: 5px;
border-style: solid;
border-color: #333333;
}
.site-header {
clear: both;
width: 100%;
background: #ffffff;
-moz-border-radius: 25px 25px;
border-radius: 25px 25px;
border-width: 5px;
border-style: solid;
border-color: #333333;
}
.menu-div {
border-width: 2px;
border-style: solid;
border-color: #ffffff;
background-color: #ffffff;
-moz-border-radius: 25px 25px;
border-radius: 25px 25px;
overflow: visible;
}
#page {
width: 90%;
margin: 0 auto;
}
the problem is your weird column layout. giving margin-left -100% to your .widget-area rather than just rendering it before your #primary column. Your #pictures column isn't floated so its flowing AFTER the #primary container who's width is 100%.
Option 1) put the column where it should go and don't use negative margins.
Option 2) assign a fixed width to #primary (looks like around 60%) and float #pictures left as well
You really need some changes on your column layout markup. I edited your markup and css a little bit to make it work(I won't recommend you to use it.). Take a look at http://pastebin.com/raw.php?i=hqi0MLTc
Off-topic:
Personally I prefer to use fixed width for sidebars/right left columns and fluid width for content area only.
Hope this helps you.
The problem ended up being that I had to decrease the size of the right side bar. I am guessing that adding borders was increasing the sizes to over 100%.
Related
I am reading HTML and CSS by Jon Duckett, and have been introduced to the border-radius property.
I am trying to create a circle using the code below, but the circle is not perfect. I am using the radius of 50px but it isn't perfect.
p {
border: 5px solid #ee3e80;
padding: 10px;
width: 100px;
height: 100px;
display: inline-block;
margin: 20px;
}
p.three {
padding: 0px;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
}
<p class="three"></p>
What am I doing wrong?
padding and the width of the border is calculated additionally to the width and height of your element.
You have different options to solve this:
add box-sizing: border-box to your element which defines what should include in the size calculation
use border-radius: 50%
add your border-width and padding to your border-radius.
Here the solution just with box-sizing
p {
display: inline-block;
margin: 20px;
width: 100px;
height: 100px;
/* these values get added to your 100px by default */
border: 5px solid #ee3e80;
padding: 10px;
}
p.three {
padding: 0px;
border-radius: 50px;
/* now width and height determine how big your
element is as a whole */
box-sizing: border-box;
}
<p class="three"></p>
For a more detailed explanation about the CSS box model look at this article from MDN.
It should be 50%, not 50px. 50% will always draw a circle regardless of the size of the element. Setting a pixel value will only draw a circle if the element is sufficiently small.
See below.
p {
border: 5px solid #ee3e80;
padding: 10px;
width: 100px;
height: 100px;
display: inline-block;
margin: 20px;
}
p.three {
padding: 0px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
<p class="three"></p>
It's because you didn't take into account the width coming from the border width, which is 5px on each end. So the total width is 110px, so your border radius will need to be 55px. An easier way for a perfect circle is to just set border-radius to 50%.
p {
border: 5px solid #ee3e80;
padding: 10px;
width: 100px;
height: 100px;
display: inline-block;
margin: 20px;
}
p.three {
padding: 0px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
<p class="three"></p>
You just need to add 50% to the border-radius property. Below is a snippet and you will find it is a perfect circle.
p {
border: 5px solid #ee3e80;
padding: 10px;
width: 100px;
height: 100px;
display: inline-block;
margin: 20px;
}
p.three {
padding: 0px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
<p class="three"></p>
Yet another option is to set your element's box-sizing property to border-box (as I do for nearly all elements).
p {
border: 5px solid #ee3e80;
padding: 10px;
width: 100px;
height: 100px;
display: inline-block;
margin: 20px;
box-sizing: border-box; /* < -------------------- here */
}
p.three {
padding: 0px;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
}
<p class="three"></p>
Border-box takes into consideration border when doing math, and generally simplifies layout and styling when applied across the board. Libraries like Bootstrap do this for you.
I have a border around my h4 header :
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 90%;
border-style: solid;
padding: 5px;
}
which renders as
I would like to indent the whole header (including the border) by 50px. Adding text-indent: 50px; indents just the text, not the border (and border-indent apparently does not exist)
What should be done so that the border is indented as well (or is indented, dragging the text within)?
use margin:
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 90%;
border-style: solid;
padding: 5px;
margin-left: 50px; /* change this as you like */
}
margin will shift the whole element while padding will increase the space between the content and the border.
Look at this picture to understand the difference:
Use margin-left property to move the border also for h4 tag
Check out JSFiddle
CSS:
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 90%;
border-style: solid;
padding: 5px;
margin-left:20px;
}
Add a wrapper:
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 100%;
border-style: solid;
padding: 5px;
}
#wrapper {
width:90%;
padding-left:12px
}
<div id="wrapper">
<h4>ddd</h4>
</div>
you can try this one:
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 90%;
border-style: solid;
padding:5px;
margin-left:50px;
}
DEMO HERE
Add padding-left: 50px and a margin-left: 50px to the h4
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 90%;
border-style: solid;
padding: 5px 5px 5px 50px; /*top, right, bottom, left*/
margin-left: 50px;
}
The padding will affect the space between the border and the content, while the margin the space between the container and the nearest element
I'm basically trying to do a "CSS-triangle" (you know, an element where the entire shape is generated using borders) but instead of a triangle shape, I want a square with rounded corners on the left side and straight corners on the right side.
This works fine in Chrome but IE11 creates a weird artefact at the top-left corner. (a background-colored oval right where the rounded corner should be. really strange!)
Is there a way to create a workaround for IE11?
.RoundedElement {
width: 0;
height: 0;
border-top: none;
border-bottom: 50px solid transparent;
border-right: 20px solid #00a2d4;
position: relative;
right: 20px;
border-radius: 15px 0px 0px 15px;
border-color: #F7A824;
}
http://codepen.io/anon/pen/QbjaOG
I think you are over complicating the problem here.
Try the following:
body { margin: 50px; }
.RoundedElement {
width: 30px;
height: 50px;
position: relative;
right: 20px;
border-radius: 15px 0px 0px 15px;
background-color: #F7A824;
}
<div class="RoundedElement">
</div>
Why not use the regular background-color with border radius that works by default ?
If you still want to use border try the following:
body { margin: 50px; }
.RoundedElement {
width: 20px; //Added 20px to fix in FF.
height: 0px;
border-top:30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 40px solid #00a2d4;
position: relative;
border-radius: 15px 0px 0px 15px;
border-color: #F7A824;
}
<div class="RoundedElement">
</div>
tweaking the code to:
body { margin: 50px; }
.RoundedElement {
width: 10px;
height: 0;
border-top:30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 10px solid #00a2d4;
position: relative;
right: 20px;
border-radius: 15px 0px 0px 15px;
border-color: #F7A824;
z-index:2
}
pen
works in FF (should also in ie but not tested)
There is no need to do it like this. Use border-radius (support here). Also what you have is not a square, this is.
div {
width: 100px;
height: 100px;
border-radius: 50% 0px 0px 50%;
background: #000;
}
<div></div>
It not work because your div size is 0: width: 0; height: 0;
I have a set width for my div in CSS, however, I need something inside of that div to go beyond that width, but can't find a solution. Here's my CSS:
#wrapper {
width: 845px;
margin: 0 auto;
}
#wrapper #content {
width: 630px;
float: left;
}
#wrapper #content .post {
background-image: url('images/black_linen_v2.png');
padding: 10px;
color: white; text-shadow: black 0.1em 0.1em 0.2em;
position: relative;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
#wrapper #primary {
color: white;
}
#wrapper #primary .widget-container {
color: white; text-shadow: black 0.1em 0.1em 0.2em;
padding: 10px;
background-image:url('images/black_linen_v2.png');
position: relative;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
And here's what I need to go beyond that area:
/* This is the ribbon effect */
.ribbon {
background: #36ff36;
background: -moz-linear-gradient(top, #36ff36, #21b521);
background: -webkit-gradient(linear, left top, left bottom, from(#36ff36), to(#21b521));
padding: 10px 10px;
margin-left: 50px;
margin-top: 0;
position: relative;
width: 100%;
-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 1px 1px 3px #292929;
/*round the top corners */
-webkit-border-top-left-radius: 10px ;
-webkit-border-top-right-radius: 10px;
-moz-border-top-left-radius: 10px ;
-moz-border-top-right-radius: 10px ;
border-top-right-radius: 10px ;
border-top-left-radius: 10px ;
color: #454545;
text-shadow: 1px 1px 0 #36ff36;
text-align:center;
}
.arrowl {
width: 0; height: 0;
line-height: 0;
border-left: 20px solid transparent;
border-top: 10px solid #21b521;
top: 104%;
left: 0;
position: absolute;
}
.arrowr {
width: 0; height: 0;
line-height: 0;
border-right: 20px solid transparent;
border-top: 10px solid #21b521;
top: 104%;
right: 0;
position: absolute;
}
#footer {position: relative;
background-image:url('../images/footer.png');
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/* End of ribbon effect*/
The set width conflicts with the ".ribbon", which I need to go beyond that set width.
Help is appreciated!
Please post your HTML it it will be a guessing game. However in if you want to create some items which is outside its container, you need to set overflow property on the container.
Set overflow:visible on #wrapper and use a width that is larger (110%) for .ribbon or padding.
You could set the object as fixed position. Then define the position and dimensions. Be sure your parent container has the property overflow:visible. your child element will look like this
position: fixed;
width:*;
height:*;
I have a parent div #modal_share that contains a floating div modal_big_hline and a unfloated div modal_big_button_container (with clear: both).
modal_big_button_container's CSS is created to allow it to be the width of the parent div minus 25px on its left and right sides.
Problem: Changing the margin-top of modal_big_button_container does not cause it to shift up/down, instead it remains in the same position, although its margin can be seen to be changing using Chrome's developer tools.
Why is this happening, and how can I solve this? Thanks!
CSS
#modal_share {
width: 565px;
height: 400px;
position: relative;
background: whiteSmoke;
padding-top: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 3px 16px #222;
-moz-box-shadow: 0px 3px 16px #222;
box-shadow: 0px 3px 16px #222;
display: none;
}
.modal_big_hline {
width: 100%;
height: 1px;
margin-top: 25px;
border-top: 1px solid #CCC;
float: left;
}
#modal_big_button_container {
height: 14px;
width: auto;
margin: 10px 25px 0px 25px;
clear: both;
}
HTML Structure
<div id="#modal_share">
<div class="modal_big_hline"></div>
<div id="modal_big_button_container"></div>
</div>
JSFiddle: http://jsfiddle.net/5LG2w/
try
modal_big_button_container{
position: relative;
top: 20px;
}
here is the fiddle - http://jsfiddle.net/5LG2w/2/.
or you can take the float out of .modal_big_hline. then your margin-top will work - http://jsfiddle.net/5LG2w/3/.
#modal_big_button_container {
height: 14px;
width: auto;
margin: 10px 25px 0px 25px;
clear: both;
background: red;
}
Looks like margin collapsing. Check these pages:
http://reference.sitepoint.com/css/collapsingmargins
http://www.howtocreate.co.uk/tutorials/css/margincollapsing