My problem is that on mobile, the right cont (white background) goes underneath the left cont (purple). I have tried using clear:both and it still didn't fix it.
I keep thinking this CSS is wrong:
.cont {
width: 1000px;
overflow: hidden
}
.cont_left {
width: 283px;
height: auto;
float: left;
vertical-align: central;
padding-top: 25px;
padding-left: 25px;
padding-right: 25px;
background-image: url(.//images/sidebar.png);
padding-bottom: 220px;
}
.cont_right {
width: 600px;
padding-left: 25px;
height: 100%;
float: left;
position:relative;
font: Arial;
font-size: 12px;
background: #ffffff;
padding-right: 25px;
}
Live site: Website
Image of problem: iOS Screenshot
Maybe you are looking for the Faux Columns technique, which has been discussed here. Also, Geoff Graham has written a pretty well covered article about spliting your layout in half (but of course, you don't need to go 50 50 as described).
In your case, I'd go with percentages (70% for the content, 30% for the side bar), using one of the techniques mentioned above. And be careful, as vertical-align: central; is not a valid property. Here you can find some info about how to center stuff vertically.
so its just the css for the left side is wrong. you have got the bg image on repeat. the top part of the image repeated is white so it looks like the right side is bleeding over....
.cont_left {
background-color: #23265d !important;
background-image: url(".//images/sidebar.png");
background-position: left top;
background-repeat: no-repeat;
float: left;
height: auto;
padding: 25px 25px 220px;
width: 283px;
}
this will fix it
Related
I'm having real trouble understanding something in CSS which to my mind ought to be simple. I want to change the contents of a div of size 50x50 pixels from an image to text content using jquery. The contents swap fine, but the position of the div gets messed up and I just don't see why.
EDIT: By messed up I mean when I inspect the element, a div of the correct size is highlighted, but the text sits outside of the highlighted box and the lower elements are displaced.
$('.cross').html('?');
#island{
margin: 20px auto;
border-radius:10px;
height: 500px;
width: 500px;
background: url('../images/island-500x500.png')
}
#crosses{
line-height: 0;
position: relative;
top: 50px;
left: 50px;
}
.crosses-row{
}
.cross{
display: inline-block;
width: 50px;
height: 50px;
}
I've made a fiddle here.
Here is the working fiddle
https://jsfiddle.net/6zkLvLeg/1/
Add the following code to ur .cross
.cross {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
vertical-align: top;
text-align: center;
}
Add vertical-align: top; to css class cross and remove line-height: 0px; from #crosses
I created an image and I wanted to use that as an hr for a page. When it's uploaded it is justified all the way to the left. I want it to be centered, under the heading. This is my css code:
.section-underline {
height: 35px !important;
display: block;
background-image:url("http://s18.postimg.org/rhqgsx8bp/underline.png") !important;
background-repeat: no-repeat;
border: 0;
}
This is a link to the page I'm working on: http://fortunabakery.getbento.com/
and a screenshot: underline and header
Sure, set an explicit width and then apply margin-left: auto; margin-right: auto; and it will be centered!
In your case, that means:
.section-underline {
width: 133px;
margin-left: auto;
margin-right: auto;
}
in your CSS, use background-position: center center
I admit, I'm not that good at CSS. Must be my lack of design skills.
So I am trying to accomplish four small tasks.
Move the time box (i.e '01:04' and '12:13') so it floats to the right top edge of the image?
Move the description of the workout to display to the right of the image beneath the time box and the routineID?
Allow the bottom border of class 'routine' to always be right beneath the image just like it is to the top of the image.
keep class 'routine' the same size even if more text in description is added. I want every 'routine' to have the same width and height dimensions.
I have everything layed out here: http://jsfiddle.net/n2learning/xMsrN/
Sorry to be that annoying guy with four questions in one question. Any help is appreciated!
Here is an updated jsfiddle link: http://jsfiddle.net/n2learning/xMsrN/22/
Follow up questions and comments -
The 'workout description' is still jacked up. Trying to get this to display beneath the top row, which includes the 'time' and 'ID'. The top row will also (eventually) include small image symbols.
I just noticed that the image sizes are different. I tried modifying '.routineImage' to give it a width and height property, but doing that screwed things up. How/where do I standardize the size of each image? (the images are coming from youtube and other video sources)
<ul id="routinefilter">
<li class='routine' data-id="15">
<div class='routineImage'><img src=http://img.youtube.com/vi/UheCchftswc/2.jpg></div>
<div class="routineTimeID"> <!-- added wrapper to keep it a single row -->
<div class='routineID'>16</div>
<div class='routineTime'>01:04</div>
</div>
<div class='routineDesc'>Use lighter weights on a barbell due to higher counts</div>
</li>
</ul>
CSS
#routineframe {
height: 400px;
border: dashed;
font-family: Arial,helvetica,sans-serif;
cursor: pointer;
width: 60%;
overflow: auto;
}
#routinefilter {
list-style: none;
clear: both; /*keeps each <ul> seperate*/
}
.routine{
background: #F4F4F4;
color: #41383C;
font-size: 18px;
border:2px solid #666;
margin:5px;
padding:5px;
width: 95%;
overflow: hidden; /*allows this to contain the floats*/
}
.routine .routineImage{
position: relative;
float: left;
display: inline;
margin-left: auto;
margin-right: auto;
}
.routine .routineTime{
position: relative;
top: 0;
float: left; /*this was floated the wrong way*/
margin-left: auto;
margin-right: 3px;
border: 1px solid #666;
background: white;
color: navy;
}
.routineTimeID { /*class added to keep the description from being in between the two elements*/
width:140px;
float: left;
}
.routine .routineID{
top: 0;
float: right;
margin-left: auto;
margin-right: auto;
border: 1px solid #666;
background: white;
}
.routine .routineDesc{
top: 0;
margin-left: auto;
margin-right: auto;
font-size: 16px;
}
I tried to notate all the changes I made and why. I think i got all of them...
For the last question, though, you can't do this with CSS. As I understand it, you want the text size to automatically shrink if more text is added? That will have to be done with JavaScript, solution here
I have created an image to illustrate my problem:
As you can see. I have a large rounded button. it consists of 3 images. One image is on the right side, another on the left size and another one in the middle.
The left and right images are quite wide because there is a gradient going on in the button so I cannot make them just 5px wide. The problem now is, that the text inside is limited to the middle area. I would like it to stretch across the entire button.
Here are my styles:
#index-navigation ul li a {
height: 96px;
line-height: 96px;
text-decoration: none;
font-weight: bold;
font-size: 1em;
color: #333;
background: url('/images/btn_grey#2x-right.png') right center no-repeat;
padding-right: 100px;
}
#index-navigation ul li a span.left {
background: url('/images/btn_grey#2x-left.png') left center no-repeat;
padding-left: 100px;
}
#index-navigation ul li a span.middle {
background: url('/images/btn_grey#2x-middle.png') left center repeat-x;
}
How to edit the style to be able to have the anchor take the entire width of the button? Like this:
You have to move your text to a separate span to be able to stretch it across the whole a. Just give your .left and .right the appropriate backgrounds, let the a hold the main bg - http://jsfiddle.net/JutRB/3/
a {
height: 96px;
width: 350px;
text-decoration: none;
font-weight: bold;
font-size: 1em;
color: #333;
background: beige;
border: 2px solid #000;
display: inline-block;
position: relative;
}
a span.left, a span.right {
float: left;
background: yellow;
height: 96px;
width: 100px;
display: inline-block;
}
a span.right {
float: right;
background: pink;
}
a span.text {
position: absolute;
display: block;
text-align: center;
top: 30px;
width: 100%;
}
UPDATE
Or if you want a CSS3 solution and don't care about the older IE-s then you can use the :before and :after pseudo-elements with much cleaner markup - http://jsfiddle.net/JutRB/4/
It's the sliding doors technique, falling out of favour nowadays with border-radius and graceful degradation to the old browsers getting traction in the marketplace.
The a tag in your demo does take the whole area as it wraps the inner 2 spans, you want to make sure you remove the width declaration though so it extends with the text.
If you've got a demo we could debug it a bit more specifically for you.
So my page is here and as you can see in the middle i am trying (unsuccessfully) to get the two images to fit into the gray box...one on each side. here is my html
<div class="top_center_image">
<div class="left_image">
</div>
<div class="right_image">
</div>
</div>
and here is my CSS
.top_center_image{
background: url("../image/TopBox.png") no-repeat;
height: 179px;
margin-left: 5px;
width: 649px;
}
.left_image{
background: url('../image/DwightWorldVideoleft.png') top left no-repeat;
width: 296px;
height:152px;
margin-left:11px;
float:left;
}
.right_image{
background: url("../image/AMWimage.png") no-repeat scroll left top transparent;
height: 152px;
margin-left: 11px;
width: 311px;
float:right;
}
is there an easier and better way to line all this up.....thanks in advance
The following worked for me...
.right_image {
background: url("../image/AMWimage.png") no-repeat scroll left top transparent;
float: right;
height: 152px;
margin-right: 12px;
margin-top: 12px;
width: 311px;
}
.left_image {
background: url("../image/DwightWorldVideoleft.png") no-repeat scroll left top transparent;
float: left;
height: 152px;
margin-left: 11px;
margin-top: 12px;
width: 296px;
}
I added margin-top rules to both. I removed margin-left from the right image, and added margin-right in its place.
Try this,
remove margin-left: 11px from both the .left_image and .right_image
Add as follows
.left_image {margin: 10px;}
.right_image {margin: 10px;}
I just added another div container inside of the top_center_image to wrap the two images, set both images to float left, rather than one left and one right. Then styled the new div with this
width:630px; height:155px;margin-left:10px; padding-top:14px;
You will need to adjust with margin-left of the two images to push it in, but i'm sure you can figure that out as much.