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
Related
I have an svg img I got from thenounproject.com (don't worry, I have a place on my site where I give credit to the creators of the images) which I have inside a div. I have set the CSS of the div to have overflow: hidden; however the img is stickout out of the bottom, changing the height of the containing div above the div the svg img is contained it.
Here is the photo of the end result so far (the blue overlay is the <img> object being viewed with firebug so you can see how it is sticking out beyond the white div containing it)
the code I have is:
HTML
<div class="dropdown">
<div class="box edit"><img src="../media/gear.svg"/></div>
</div>
CSS
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
}
.box.edit{
float: right;
padding: 0px;
}
I'm trying to get it so that the "blueish" overlay in the photo, which represents the svg img, does not extend beyond the white box
UPDATE
Thank you all for your answers. I though I would update this to narrow down my question now that I have gotten your feedback. I've tried removed float: right; and the other ideas (remove the border: 0px solid transparent;) but, while helpful, they did not solve the problem.
I currently have transform: rotate(90deg); applied to .box.edit so that way at least the overflow is inline with the rest of the .dropdown bar.
I've tried max-height: 100% and width: 100%; height: auto; etc. but that does not solve my problem. I do not need the entire svg in the box, only what you can see in the photo above (the gear). The part below that has copyright bit from thenounproject.com (see my above statement, I am still following their rules on using photos).
I don't know if I will need to edit the svg file or what, but I was trying to use overflow: hidden; to cut off the end bit (so it does not affect my spacing).
Thank you for your assistance so far.
try this remove border
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
/*border: 1px solid transparent;*/
border-radius: 2px;
cursor: pointer;
}
Remove the float from .box and use display: inline-block instead
Hi he is working and now you can define your img css width and height 100% as like this
.dropdown .box > img {
vertical-align: top;
width: 100%;
height: 100%;
}
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
}
.box.edit{
float: right;
padding: 0px;
}
.dropdown .box > img {
vertical-align: top;
width: 100%;
height: 100%;
}
<div class="dropdown">
<div class="box edit"><img src="http://i.stack.imgur.com/8wc74.png"/></div>
</div>
So unless I am reading this wrong the height and width attribuite would work wouldn't it?
Code would be like this and then you would just adjust the height and width according to what you would need..
<div class="dropdown">
<div class="box edit"><img src="../media/gear.svg"/ height="42" width="42"></div>
</div>
As of now your image height is exceeding more than the height of its container due to which it is showing overlay going out of its container. Well applying max-height:100%; to image will make your image to stay within it's parent container, so give it a try.
I have finally found what the problem was with this:
Upon further research, I found that a <svg> has an attribute called "viewBox," which controls how much of the <svg> is shown. The <svg> I was using had a viewBox setting of "0 0 100 125," which basically means the width of the <svg> was 100 and the height 125. Upon finding this, and reducing the height to 100, the <svg> became a proper square and did not stick out further than it's containing div.
Thank you everyone for your answers, a lot of them were good and helpful.
I'm new to the frontend and work out of the backend. I found a layout I am interested in using however noticed that when typing in these boxes if the text length isn't equal the sizing of the box changes for one of the boxes in the row and not all.
I want them all the be sized equally so if one box is using one line of text and the others two lines, the one line provide white space to match the size.
E.g.
I'd like all the boxes on that row to add in the whitespace so the boxes are equal in size so I don't get the layout issues since in the pic above.
Like this:
How do I change the css for the boxes to automatically resize all the boxes and not just one?
This is the layout I am using: http://adapt-trackers.blogspot.in/
It seems as though right now their spacing is determined by the margin/padding/border values. Try setting a height and width so that they are all the same.
For example:
#selectable li { margin: 3px; padding: 1px; float: left; width: 165px; height: 160px; font-size: 1.5em; text-align: center; }
try this (courtesy of CSS the Missing Manual):
<div id="gallery">
<div class="figure">
<div class="photo">
<img src="../images/carpet.jpg" alt="Carpet Grass" width="200" height="200" /> </div>
<p>Figure 1: Even the carpet-like <em>Carpetorium Pratensis</em> requires mowing. </p>
</div>
In this example, the gallery div wraps all the images together; the photo class wraps each image and caption together. Here's the CSS:
.figure {
float: left;
width: 210px;
margin: 0 10px 10px 10px;
}
.photo {
background: url(drop_shadow.gif) no-repeat right bottom;
}
.photo img {
border: 1px solid #666;
background-color: #FFF;
padding: 4px;
position: relative;
top: -5px;
left:-5px;
}
.figure p {
font: 1.1em/normal Arial, Helvetica, sans-serif;
text-align: center;
margin: 10px 0 0 0;
height: 5em;
}
Also, there's several gallery frameworks that you could use instead. Or stag some code from dynamicdrive.com
I'd give your tag for ... a minimum height.
add class to your anchor tags:
Link:
...
css:
.link-title{
min-height: 150px;
}
So, I got set of links set up like this. Apologies for bad names, but to keep it easy to understand, I chose to not to use real paths/names. However, all paths check out in when page is shown/used.
<nav>
<div class="center">
<img src="folder/image1.gif" alt="">
<img src="folder/image2.gif" alt="">
<img src="folder/image3.gif" alt="">
</div>
</nav>
Now, I want each image stick to each other, so that they form a one long bar. With the current set up, they all line up in the middle of the page in one row. However... there are spaces in between each. Here is the CSS:
.center {
margin: 0 auto;
text-align: center;
display: block;
}
a.navigointi
{
float:left;
margin: 0px;
padding: 0px;
}
img.navigointi
{
margin: 0px;
padding: 0px;
border: 0px;
}
However, if I designate images as navigointi class... they do stick together, forming a one long bar, but at the same time, it breaks the centering. All images float to left side of the screen. Even if I remove all content from the img.navigointi, so it becomes empty style, it still remains the same. If I don't give the images a class, they return to the middle, but once again with the spaces in between them.
Any idea what is causing the centering to break?
Here's a FIDDLE.
The line that removes the single space between the anchors is font-size: 0px;
(found on CSS-Tricks)
CSS
.center {
margin: 10px auto;
text-align: center;
display: block;
border: 1px solid black;
font-size: 0px;
}
.navigointi{
margin-left: 0px;
padding: 0px;
}
img
{
margin-left: 0px;
padding: 0px;
border: 1px solid red;
}
If I understand, you should use display: inline instead of float: left.
Here an example : http://jsfiddle.net/YTn2b/
I am trying to convert a three-column web-page layout from HTML tables to CSS, but there is one characteristic which I have so far been unable to replicate.
The HTML solution allows a photograph to be placed by php into a column to the right of the main text, but in the absence of a photograph, that column collapses, and the main text content extends up to a final right-hand 'spacing' column to maintain a right-hand margin.
So far, the only way I have found of achieving the three-column array in CSS is to use a container of fixed width, and to use fixed width styles for the div tags defining the columns, together with floats. The basis of the HTML code is:
<div class="container">
<div class="title_strip"><img src="headline_text.png"></div>
<div class="hdr_img_space"><img src="leaf_header.jpg"></div>
<div class="lh_col"><p align="center">ADMINISTRATION<br/>[WEBMASTER]</p></div>
<div class="main_content"><p>This is the location for the main administrative page
content, and will hopefully be able to contain all the necessary text, even if it
over-runs</p></div>
<div class="rh_image"><img class="rh" src="photo.jpg"></div>
<br style="clear: both"></div>
and the core CSS styling is:
body {
margin: 0px;
padding: 0px;
background-color: #200542;
}
p {color: #CCCCCC; font-family: arial, sans-serif; font-size: 14pt; line-height:1.4em
}
.container {
width: 1000px;
min-height: 600px;
max-height: 2200px;
margin: 8px auto 0 auto;
background: #333333;
padding: 0px;
}
.main_content {
float: left;
min-height: 600px;
max-height: 2000px;
margin-left: 0px;
width: 516px;
padding-top: 20px;
background: #333333;
}
.lh_col {
float: left;
width: 200px;
min-height: 600px;
max-height: 2000px;
padding-top: 20px;
padding-left: 20px;
padding-right: 24px;
margin: 0;
background: #333333;
}
.rh_image {
width: 200px;
min-height: 620px;
max-height: 2000px;
float: right;
padding-top 20px;
padding-left: 20px;
padding-right: 20px;
background: #333333;
}
img {
display: block;
}
.rh {
margin-top: 40px;
}
Because the columns are fixed width, the removal of the image tag leaves a wide gap to the right of the main text, and none of the suggestions I have found in web searches shows a satisfactory solution - generally the collapse of the right-hand column leaves the text layout in the centre column unchanged, despite the apparent availability of more space.
I want to avoid solutions which would give problems with browser compatibility - is there any way of achieving what I want in CSS, or shall I have to persist with the now deprecated use of the HTML table tag?
Peter N.
If I understand correctly, what you need is if there is no image in the right column, your main content should be without "gap", or complete layout should look like 2-column page, if so try this:
first thing is to move your
<div class="rh_image"> before
<div class="main_content">
next just adjust css like this:
.main_content {
min-height: 600px;
max-height: 2000px;
margin-left: 0px;
padding-top: 20px;
background: #333333;
}
it should do the trick
Sorry I just saw your fiddle
here's the link with the complete code: http://jsfiddle.net/darkosss/3deMj/
I am creating a web site for my church. Because they know of no web programmer members, I am taking care of it with my meager skills. My problem is merely one of placement. I am trying to place an image in the top-left of the page, but, no matter what I do, it interferes with the other div elements on the page. This is my current CSS:
body {
background-color: #FFFFFF;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#wrapper {
width: 90%;
background-color:#ffffff;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid blue;
}
div#image {
padding: 15px;
margin: 0px;
float: left;
}
div#header {
padding: 15px;
margin: 0px;
text-align: center;
}
div#nav {
width: 25%;
padding: 10px;
margin-top: 100px;
float: left;
}
div#main {
margin-left: 30%;
margin-top: 100px;
padding: 10px;
}
div#footer {
padding: 15px;
margin: 0px;
border-top: thin solid blue;
text-align: center;
}
No matter how I define the image div, it always pushes the main, navigation, and header divs out of alignment. If I just place the image in another div, it still makes things move.
Is there any way to have the page centered with 90% width and everything else in the wrapper div, and also have the image in the top-right corner? If it would require a different type of thing, can someone help me figure it out? Something that works only in one browser won't help, as I want it to work as seamlessly as possible for the most people.
You might be looking to use absolute positioning,
#image { position:absolute; top:0; left:0; }
However this will need to stay relative to your wrapper:
#wrapper { position:relative; }
Though I'm strictly guessing, provide more info and you'll get a more definitive solution.
Use z-index to put the image on a higher layer.
http://www.w3schools.com/Css/pr_pos_z-index.asp
This way nothing else gets moved.
If you don't want it to affect anything else on the page, can I just check that it's not a background image? If it's not, then have you tried making it a background image? That way it won't/can't affect the document flow and nothing will be moved because of it.
Though if you already have one background image it might complicate things a little.