i have a webpage and use the <hr> tag for separation of content when the page is displayed on tablets. it look like this:
at the red rectangle the line should continue. however, it does not. what do i have to change in html/css in order to let the <hr> continue until the border of the page?
the page is here: http://crossroads-festival.org/test2015/en/film/almaen
please note to redue the browser width to at least 811px for the horizontal line to show up.
thanks for your help!
UPDATE:
the css for <hr> is
hr {
height: 0;
border: none;
border-bottom: 1px solid #c1c1c1;
margin-bottom: 1.5em;
background: none;
}
the css for the divider-mobile class is:
.divider-mobile {
margin-top: 3.125em;
margin-bottom: 3.125em;
overflow: visible;
border: none;
color: #888888;
background-color: #888888;
height: 1px;
width: 150%;
margin-left: -25%;
}
in the html i use it like this:
<hr class="divider-mobile">
In your CSS you have:
#filmcontent {
overflow-x: hidden;
}
That is preventing the negative margin on your <hr> from going to the edge of the page.
You'll also want to remove the width: 150%; and margin-left: 25% on the <hr> and instead do...
margin-left: -20px;
margin-right: -20px;
(Where 20px is equal to the padding on #content .entry-content)
That will get you your desired effect!
Related
Is it possible to automatically adjust the height to the content's height using only css without using javascript?
For Example, When the height of the is 200px, when the text inside is written only as much as 100px in height, I hope that there will be no blank space.
I want the height of the text inside the to affect the height of the itself. There is way to use javascript all over the internet. But I want to implement it using only css and html. I need help!
Here is my code.
.code-wrap {
margin-top: 8px;
border-radius: 8px;
background: #1e1e1e;
max-height: 400px;
}
.code-title {
border-radius: 8px 8px 0 0;
background: #242E64;
padding: 21px 24px;
}
.area-wrap {
padding: 21px 24px;
}
textarea {
border: 0;
resize: none;
width: 100%;
height: 300px;
outline: none;
font-size: 20px;
font-weight: 800;
color: #fff;
background: none;
font-family: 'D2Coding';
}
<div class="code-wrap">
<div class="code-title"><p>Result</p></div>
<div class="area-wrap">
<textarea
rows="15"
cols="50"
name="quiz-editor"
id="mainResultArea"
class="ed-result"
readOnly
>
</textarea>
</div>
</div>
Unfortunately, to the best of my knowledge, there is no great way of doing this using raw CSS or HTML. However, you can stray away from the textarea element and use the contentEditable attribute on a div or text element.
Check out this basic example & write in this sample text box:
div {
border: solid 1px;
padding: 5px;
width: 300px;
min-height: 50px;
overflow: auto;
}
<div contentEditable></div>
I am trying to improve my css(and html) skills by trying to re-create the homepage of reddit.
The problems I have are the sidebars simply won't stay where they are supposed to be when resizing the browser window, they go up and the width is also changing.
The way it is on my end: https://imgur.com/a/SrfyP (Look at the right side things)
The way it should be: https://imgur.com/a/iBEX3 ( They always stay on the same width and height)
HTML for just the blue bars on the right side which say "Submit a new link"(in the imgur link). I assume if I can get one of them to work I can get all the other elements to work properly too.
<div class="container">
<div class="div1">
Submit a new link
</div>
<div class="div2">
Submit a new text post
</div>
</div>
CSS:
html, body{
margin: 0;
padding: 0;
width: 100%;
}
.container{
display: block;
margin-top: 8%;
margin-left: 87%;
width: 8%;
}
.div1, .div2 {
display: inline-block;
margin-top: 5%;
background: rgb(212, 229, 245);
height: 100%;
padding: 7px;
width: 199%;
text-align: center;
margin-left: -53%;
border-radius: 10px;
border: 1px solid #c4dbf1;
font-size: 150%;
font-weight: bold;
letter-spacing: -1px;
font: normal medium verdana,arial,helvetica,sans-serif;
}
.div1 a, .div2 a{
font-weight: bold;
text-decoration: none;
}
I tried so many possibilities, messing with position, display, float, width, margins. This question has been answered a million times but I couldn't find something that helps me.
Thank you for your time.
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 am using the hover event over a <div> to make an additional description about the element appear.
The problem is that when you hover on a <div> it shifts the others around. Basically I would like everything else to stay in place and the word blob to just appear over the top of them.
Here is an example of a jsfiddle outlining the problem
How can I change it so the other blocks do not shift?
Your extra_info needs to be positioned absolute to the block div
.link{
position:relative;
margin : 2em 0em 2em 1.5em;
float: left;
width: 10.4em;
min-height: 17em;
max-height: 18.5em;
text-align: center;
padding: 0em 0.1em 0.1em 0.1em;
background-color: #276277;
}
.block { position:relative; float:left; }
.extra_info{
z-index: 900;
position: absolute;
top: 30px;
left: 30px;
display: none;
width: 275px;
background: #FFFFBC;
border-style: inset;
border-width: 5px;
}
Also, I do believe you need to do this with jquery
$('.link').hover(function() {
// show the box
$(this).siblings('.extra_info').toggle();
});
Here is a complete demo
Here is a demo where the extra_info is above each parent div
You're missing an underscore.
<div class="extra info">
should be
<div class="extra_info">
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