Okay so this is the CSS and basically I have two paragraphs and I just want to put a picture below the paragraph on the left. It is a longer paragraph than the one on the right so I think that's what's effecting it. The picture always ends up on the right side below the right paragraph. Can someone please help?
body{
font-family: sans-serif;
margin:auto;
}
.p1 {
width: 425px;
float:left;
padding: 2px 2px 2px 2px;
border: 1px solid black;
border-radius:5px;
height:auto;
}
#dates img{
float: left;
}
.p2 {
width:405px;
float:right;
padding: 2px 2px 2px 2px;
border: 1px solid black;
border-radius: 5px;
}
.content {
width:850px;
text-align:center;
margin:auto;
}
h1 {
text-align:center;
margin-bottom:0px;
}
h3 {
text-align:center;
margin-top:0px;
}
You need to add clear: both; to the #dates img style.
Here is a working fiddle.
Related
I have this short example:
link
CODE HTML:
<div class="header">
<div class="menu-collapse">MENU</div>
</div>
CODE CSS:
.header{
width:300px;
height:auto;
border:1px solid grey;
padding: 5px 0 5px 0;
}
.menu-collapse {
display: table-cell;
vertical-align: middle;
border-right: 2px solid red;
padding: 0px 10px 0 10px;
height: 100%;
}
My problem is that border (red border) is not until the end header.
There is a space both top and bottom in.
CSS code in the header must remain exactly the same
Can you help me to solve this problem?
Thanks in advance!
set padding 0px for header and add line-height
.header{
width:300px;
height:auto;
border:1px solid grey;
padding: 0;
line-height:25px;
}
remove padding from the .header class. This space is header's padding. And add the padding to the .menu-collapse class.
.header{
width:300px;
height:auto;
border:1px solid grey;
}
.menu-collapse {
display: table-cell;
vertical-align: middle;
border-right: 2px solid red;
padding: 5px 10px;
height: 100%;
}
Here is the fiddle.
Remove Padding from header and provide top & bottom padding too to menu-collapse.
Try this:
.header{
width:300px;
height:auto;
border:1px solid grey;
}
.menu-collapse {
display: table-cell;
vertical-align: middle;
border-right: 2px solid red;
padding: 5px;
height: 100%;
}
<div class="header">
<div class="menu-collapse">MENU</div>
</div>
Check this:
https://jsfiddle.net/6ae7vumn/3/
.header{
width:300px;
height:auto;
border:1px solid grey;
}
.menu-collapse {
display: table-cell;
vertical-align: middle;
border-right: 2px solid red;
padding: 15px 5px;
height: 100%;}
You dont need to use padding in header
My <div> with id="page" contains a full page. My <div> with id="main" is 25px (the 25px is only coming from it having padding) tall and should be a full page tall still. Mywithid="container"` is inside main and should be a full page tall without the footer but it is 0px tall which is causing its inner elements to spill out of it.
Mywithid="container"` is not containing its inner HTML elements. They are spilling out of the container. How do I make them not spill out? Here is the HTML, CSS, and and image of what it looks like showing me hovering over "main" and it taking 25px. Cheers.
HTML:
<div id="page"
<div id="main">
<div id="container">
<div id="left-hand-side"></div>
<div id="right-hand-side">
<img src="resources/Logo.png"/>
<?wp_nav_menu(array('theme_location'=>'primary', 'menu_class'=>'nav-menu'));?>
</div>
</div>
CSS:
/*
Theme Name: 2011-child-theme-commons
Description: Child theme for the Commons website
Author: admin
Template: twentyeleven
(optional values you can add: Theme URI, Author URI, Version)
*/
#import url("../twentyeleven/style.css");
#branding {
display:none;
}
.nav-menu .menu-item {
font-size:2em;
margin-bottom: 70px;
margin-right:30px;
list-style-type: none;
text-decoration:none;
float: right;
}
.nav-menu .menu-item a {
color:#333;
}
.first_menu_item a:hover {
color:#FEBA2E;
list-style-type: none;
text-decoration:none;
}
.second_menu_item a:hover {
color:#FF46C8;
list-style-type: none;
text-decoration:none;
}
.third_menu_item a:hover {
color:#2B6AFF;
list-style-type: none;
text-decoration:none;
}
#comments {
display:none;
}
body {
background: #FFF;
}
#container {
margin-top:-24px;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
position:relative;
background: url("../../../resources/plan_edited.png") no-repeat;
background-size:contain;
height: 100%;
width: 100%
}
#colophon {
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}
#right-hand-side img {
margin:auto;
z-index:2;
width:100%;
}
#right-hand-side h1 {
float:right;
margin-right:30px;
margin-bottom:50px;
font-size:2em;
cursor:pointer;
}
#logo {
cursor:pointer;
}
#right-hand-side {
float:right;
width:36%;
position:absolute;
height:inherit;
z-index:2;
margin-left:64%;
}
#left-hand-side {
z-index:3;
height:inherit;
width:64%;
float:left;
position:absolute;
}
#left-hand-side article {
background-color:#FFF;
margin-left:10%;
margin-top:10%;
margin-right:10%;
border:#666 1px solid;
position:absolute;
padding-top:2em;
}
#left-hand-side .entry-content {
padding: 0.5em;
width: 85%;
}
#left-hand-side .entry-header {
width: 85%;
}
It isn't containing it because on the #right-hand-side you have a margin on your image of 90px so that will force the image out of the box.
http://jsfiddle.net/Cb5h8/
What you are experiencing is that elements to not automatically resize to contain their floated child elements. The term used for the remedy is "Clearing floats". There are multiple ways to do that, the easiest one is probably just to add overflow:auto; to the container. It will force the container to contain its floated children.
Detailed information can be seen here: http://www.quirksmode.org/css/clearing.html
#container {
margin-top:-24px;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
position:relative;
background: url("../../../resources/plan_edited.png") no-repeat;
background-size:contain;
height: 100%;
width: 100%;
overflow: auto;
}
EDIT:
The #left-hand-side and #right-hand-side styles are positioned absolutely, which prevents the #container from properly containing them. You need to remove the position:absolute; styles. If you really need the position:absolute; styles, then the only way for you to accomplish this is by giving the container a specific height, which is enough for it to contain it's children.
See this fiddle
JSFiddle
CSS:
.containers {
width:100%;
height:auto;
padding:10px;
margin-bottom:0px;
}
#id4 {
float:right;
margin-right:0;
display:inline;
border:5px solid red;
}
#id5 {
text-align:center;
border:5px solid red;
}
HTML:
<div class='containers'>
<div id='id4'>
margin-right:10px;
</div>
<div id='id5'>
center-text;
</div>
In this fiddle I want center-text to be center of the page, not at the center between left-border and float element.
The below is one possible option by adding position: absolute; right: 10px; to the id4 div. This will make the div always stay at 10px from the right margin. But it has to be noted that the element is no longer a float element.
Note: The texts would overlap if the result window is shrunk beyond a certain level. I will update the answer if and when I manage to find a fix for that.
.containers {
width: 100%;
height: auto;
padding: 10px;
margin-bottom: 0px;
text-align: center;
box-sizing: border-box;
}
#id4 {
display: inline-block;
position: absolute;
right: 10px;
border: 5px solid red;
}
#id5 {
display: inline-block;
border: 5px solid red;
}
.containers {
width:100%;
height:auto;
padding:10px;
margin-bottom:0px;
text-align:center;
}
#id4 {
float:right;
margin-right:0;
display:inline;
border:5px solid red;
}
#id5 {
margin: 0 auto;
display:inline-block;
border:5px solid red;
}
DEMO
I am trying to style setup a section of a website with a pattern running to each side of certain pieces of text. You an see a screenshot that I took from the PSD file here --> http://screencast.com/t/84RCLRdSZT with red arrows pointing to the areas in question that I am finding difficult to solve.
Any idea how to go about this?
Here is what I am starting with:
<div class="box">
<h2>Some text here</h2>
</div>
and the css:
.box {
width:400px;
height:200px;
text-align:center;
background:yellow;
}
h2:after,h2:before{
content:"";
border:5px double purple;
}
here is the fiddle --> http://jsfiddle.net/HerrLoop/g63LB/1/
As you can see, the stripes are vertical, instead of horizontal as you can see in my initial screenshot.
This isn't quite perfect and requires you set a fixed width on the before/after elements (best I can think of is to use JavaScript if responsive is required), but here goes:
h2{
display:inline-block;
vertical-align:middle;
}
h2:after,
h2:before{
content:"";
margin:0px 20px;
border:1px solid #000;
border-left: 0px;
border-right:0px;
height:5px;
width:50px;
display:inline-block;
vertical-align:middle;
}
http://jsfiddle.net/daCrosby/g63LB/2/
Edit
This is a little bit more responsive, but still gets kind of cut off at small sizes and looks disproportional at others:
.box {
width:50%;
overflow:hidden;
}
h2{
display:inline-block;
vertical-align:middle;
width:100%;
white-space:nowrap;
}
h2:after,
h2:before{
content:"";
margin:0px 20px;
border:1px solid #000;
border-left: 0px;
border-right:0px;
height:5px;
width:20%;
display:inline-block;
vertical-align:middle;
}
http://jsfiddle.net/daCrosby/g63LB/3/
Try the solution described here: http://kizu.ru/en/fun/legends-and-headings/
The quick demo:
h2{
overflow-x: hidden;
white-space: nowrap;
text-align: center;
}
h2:before, h2:after {
content: "";
border: solid #000;
border-width: 1px 0;
height: 5px;
width: 50%;
display: inline-block;
vertical-align: middle;
}
h2:before { margin: 0 .5em 0 -50%; }
h2:after { margin: 0 -50% 0 .5em; }
Demo
Basically, I'm trying to setup something that looks like this:
However, my code for some reason isn't working. Fist of all, in teh tinkerbin, my arrow image isn't even showing. It works fine on my computer though, so I'm not sure why this is. I also tried jsfiddle and it didn't work there either.
I can get the arrow to be there just fine, but I can't get the text to be centered vertically, let alone even go insie the gray box when the image is there. That is what is confusing me here.
HTML:
<div id="answers">
<div id="arrowcenter"></div><div id="answerstext">Text Next To Arrow</div>
</div><!-- end grayAnswer -->
CsS:
#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
}
#arrowcenter {
width:71px;
height:31px;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
margin-left:-140px; }
#answerstext {
margin-top:0;
}
1st of all your arrow was isn't showing because you were using margin-left:140px; in #arrow_center
See my Fiddle
Just with 1 <div> Fiddle
This answer is inspired by Mr. Alien's answer of using less markup (id optional).
Reference: jsFiddle
HTML:
<span>Masculino</span>
CSS:
span {
background-image:url('http://fortmovies.com/brazil/arrow.png'); /* 70px x 31px */
background-position: 3px 10px;
background-repeat: no-repeat;
background-color: #DDDDDD;
border-top: 1px solid black;
border-bottom: 1px solid black;
font-family: Arial;
font-weight: bold;
font-size: 30px;
padding: 8px 10px 8px 80px;
}
Status Update: jsFiddle with Div for Navbar method
Just remove margin-left:-140px; and add float:left; to #arrowcenter
Working Demo
Use the tag instead of the tag.
The tag defaults to display: block, which prevents the content of different s to be aligned next to each other. tags default to display:inline; which suits your ideas better. As analternative you could also set those display rules in your css.
#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
}
#arrowcenter {
width:75px;
height:31px;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
float: left;
}
#answerstext {
margin-top: 16px;
}
Little bit changes that i made in just in your css as follow, and it is working...
#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
}
#arrowcenter {
width:120px;
height:31px; float:left;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
}
#answerstext {
margin-top:0; float:left; height:50px; line-height:50px;
}
Working Demo
OR
Use this CSS
#answers
{
width: 220px;
height: 50px;
background-color: #DDDDDD;
border-top: 1px solid black;
border-bottom: 1px solid black;
margin-top: 20px;
}
#arrowcenter
{
width: 100px;
height: 50px;
background-image: url('http://fortmovies.com/brazil/arrow.png');
background-position: left center;
background-repeat: no-repeat;
float:left;
}
#answerstext
{
line-height:50px;
margin-left:10px;
font-size:20px;
font-family:Arial;
font-weight:bolder;
}
Use this in HTML :-
<div id="answers">
<div id="arrowcenter">
 </div>
<div id="answerstext">
Masculino</div>
</div>
I hope it'll helps!! :)
What's the purpose of margin-left:-140px; it moves #arrowcenter off-screen remove it and you'll be fine.
Also set both divs to display:inline-block and vertical align appropriately
#arrowcenter {
...
display:inline-block;
vertical-align:middle;
}
#answerstext {
...
display:inline-block;
vertical-align:middle;
}
http://jsfiddle.net/XEk5d/