I am trying to make some web page as show in image .I am able to make almost 90%.But I have one issue
how to make square as shown in image (a square which have triangle in bottom.I know we can make square using border .but how to make triangle in that bottom triangle
how to make contend scrollable mean my contend it not scrolling I already use overflow:auto and scroll
)
.bg {
background: #597A4D!important;
width: 100%!important;
}
.nav_bar {
background: #597A4D!important;
border-style: none;
height: 44px;
border: 0px!important;
border-radius: 0px!important;
}
.display_menu li a{
font-size: 1.2em!important;
color: #ffffff!important;
}
ul.display_menu li:last-child{
background:#3C86D7;
}
.rowClass {
display: block;
margin-top: 3%;
}
.rowClass >div {
padding: 3em;
text-align: center;
}
.text_row div{
display: block;
border: 1px ;
padding: auto;
color: #ffffff;
margin-top: 3%;
}
.rowClass span {
display: block!important;
color: #ffffff;
}
.logo_image{
width: 60px;
height: 60px;
}
.email_div label {
color: #ffffff;
font-weight: bold;
text-align: center;
}
.email_div{
width: 50%;
margin: auto;
}
.email_div label {
}
.email_div input {
background: transparent;
border: 1px solid #3C86D7;
display: inline;
width: 50%;
}
.email_div button {
display: inline;
}
.wrapper{
overflow: auto!important;
overflow: scroll!important;
}
Here is my plunker: http://plnkr.co/edit/G8mp53rQlF562hEkgmgT?p=preview
just do this
.wrapper{
overflow: auto!important;
overflow: scroll!important
height: 200px;
}
or desired height instead of
.wrapper{
overflow: auto!important;
overflow: scroll!important;
}
it will start scrolling because it will only scroll if data is overflowing
and for shape this article may help but you don't need to use any thing just use bootstrap tooltip
Try this for the overflowing
.wrapper{
overflow: auto!important;
overflow: scroll!important
height: 250px;
}
to get an idea to make those box with shapes,
See this DEMO
Related
It's my understanding that simply adding display:inline to divs with a relative position will line them up (left to right), somewhat like float:left. I've tried both approaches but they haven't worked.
Below is an example of my last attempt, using inline displaying. I want all three segments to line up from left to right, but they're displaying just like unstyled divs.
function showProfile() {
var profile = document.getElementById('userprofile');
profile.style.opacity = 0.8;
var profileImage = document.getElementById('userimage');
profileImage.style.opacity = 0.8;
}
.profile {
top: 68px;
background-color: #424755;
color: #dddddd;
width: 100%;
min-height: 50px;
opacity: 0;
position: fixed;
font: 16px"Tahoma";
}
.miniProfileImage {
opacity: 0;
width: 100px;
height: 100px;
}
.miniBioSegment {
display: inline;
margin-right: 5px;
width: 33%;
}
<div class="profile" id="userprofile">
<div class="miniBioSegment">
<img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
</div>
<div id="miniBio" class="miniBioSegment">
This is basic information about this person that you clicked.
</div>
<div id="miniQuote" class="miniBioSegment">
This is a tag line from the person that you clicked.
</div>
</div>
<button onclick="showProfile()">View Profile</button>
You should use inline-block instead of inline for more control. I used a width of 33%-2px because the browser rounds the div's size up therefore leading to overflowing. Your 5px margins weren't helping with the sum either.
function showProfile() {
var profile = document.getElementById('userprofile');
profile.style.opacity = 0.8;
var profileImage = document.getElementById('userimage');
profileImage.style.opacity = 0.8;
}
.profile {
top: 68px;
background-color: #424755;
color: #dddddd;
width: 100%;
min-height: 50px;
opacity: 0;
position: fixed;
font: 16px"Tahoma";
}
.miniProfileImage {
opacity: 0;
width: 100px;
height: 100px;
display:inline-block;
}
.miniBioSegment{
display: inline-block;
width: calc(33% - 2px);
vertical-align:middle;
}
<div class="profile" id="userprofile">
<div class="miniBioSegment">
<img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
</div>
<div id="miniBio" class="miniBioSegment">
This is basic information about this person that you clicked.
</div>
<div id="miniQuote" class="miniBioSegment">
This is a tag line from the person that you clicked.
</div>
</div>
<button onclick="showProfile()">View Profile</button>
CSS should target the ID's and use float:left. See example
.profile {
top: 68px;
background-color: #424755;
color: #dddddd;
width: 100%;
min-height: 50px;
position: fixed;
font: 16px"Tahoma";
}
.miniProfileImage {
float:left;
max-width: 33%;
height: 100px;
}
#miniBio {
float:left;
margin-right: 5px;
width: 33%;
}
#miniQuote {
float:left;
margin-right: 5px;
width: 33%;
}
<div class="profile" id="userprofile">
<div class="miniBioSegment">
<img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
</div>
<div id="miniBio" class="miniBioSegment">
This is basic information about this person that you clicked.
</div>
<div id="miniQuote" class="miniBioSegment">
This is a tag line from the person that you clicked.
</div>
</div>
I'm asking myself, why do you have position:absolute;?
To make it work, I have just added display: flex; justify-content: space-between; to the .profileclass.
Remove the position, and try adding the last two lines.
See example here: http://sandbox.clickadelic.de/demos/lineup.html
With the divs set to display: inline; they will only line up horizontally if the total length of the divs does not exceed the container's width.
And width, height of inline elements is ignored, you should use display: inline-block; instead. The wrapping behavior is the same as above.
Also browser renders whitespace among inline* elements, which is about 4px, see How to remove the space between inline-block elements? for more details.
In your example, there are 3 divs, if you want them to be equal width, you can do:
.profile {
font-size: 0; /*remove whitespace*/
background: silver;
}
.miniBioSegment {
font-size: 16px; /*reset font-size*/
display: inline-block;
vertical-align: top; /*vertical alignment*/
width: 33.3333%;
}
However, the image object in the first div is set to 100px, I think you would prefer that div to be the same width too, and each one takes 50% of the rest space for other two divs. Examples:
1. Inline block
jsFiddle
.profile {
font-size: 0;
background: silver;
}
.miniBioSegment {
font-size: 16px;
display: inline-block;
vertical-align: top;
border: 1px dotted red;
box-sizing: border-box;
width: 100px;
}
#miniBio, #miniQuote {
width: calc((100% - 100px) / 2);
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
2. Float
jsFiddle
.profile {
background: silver;
}
.profile:after {
content: "";
display: table;
clear: both;
}
.miniBioSegment {
float: left;
border: 1px dotted red;
box-sizing: border-box;
width: 100px;
}
#miniBio, #miniQuote {
width: calc((100% - 100px) / 2);
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
3. CSS table
jsFiddle
.profile {
background: silver;
display: table;
border-collapse: collapse;
width: 100%;
}
.miniBioSegment {
display: table-cell;
vertical-align: top;
border: 1px dotted red;
}
#miniBio, #miniQuote {
width: 50%;
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
4. Flexbox
jsFiddle
.profile {
background: silver;
display: flex;
}
.miniBioSegment {
border: 1px dotted red;
}
#miniBio, #miniQuote {
flex: 1;
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
I have found a few questions similar to this, but were unable to help me.
When I scroll down the page the header/navigation bar doesn't move "smoothly" with the page. After I reach a certain amount down the page, the header "jumps", but after that it's fine.
I have the following code for a fixed header:
$(window).scroll(function(){
if ($(window).scrollTop() >= 147) {
$("#top_nav").addClass("fixed");
$("#top_nav").css("position", "fixed");
$("#top_rule").hide();
$("#bottom_rule").hide();
}
else {
$("#top_nav").removeClass("fixed");
$("#top_nav").css("position", "initial");
$("#top_rule").show();
$("#bottom_rule").show();
}
});
My CSS:
.fixed {
width: 100%;
background: white;
border-bottom: 1px solid black;
box-shadow: 0 0 20px #000000;
top: 0px;
padding-top: 15px;
padding: 10px;
}
I don't have a position: fixed in my CSS, because for some reason it isn't working, so instead I used jQuery to set the position to fixed.
I have posted the rest of my page on jsfiddle.net
http://jsfiddle.net/5n4pF/
If I did not explain propelry, please ask and I'll try and explain better :)
Thanks in advance
EDIT
When I reach 147px, it must not jump. It looks as if it "hides and shows". Instead it must move smoothly as you scroll down the page.
You should position your header absolute. and give the news a margin-top the size of the header.
The reason why your position: fixed wasn't working is because you fixed it inside of a relative element. It get's fixed inside of that element (which isn't what you want, because you want it fixed on top of the page).
It jumps because of the fact that you change the element from static to fixed. All of a sudden you miss about 53 pixels of height in your layout . Which makes it jump.
In this fiddle: http://jsfiddle.net/5n4pF/3/
* {
margin: 0px;
padding: 0px;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
#black_top {
background: black;
font-size: 5px;
display:block;
width: 100%;
height: 5px;
}
#logo_header {
margin-top: 20px;
}
.list_item {
list-style-type: none;
display: inline-block;
font: 16px Arial;
padding: 10px 30px 10px 30px;
text-align: center;
}
#top_nav {
font: Arial 30px;
display: block;
width: 100%;
}
.nav_links {
text-decoration: none;
color: black;
}
hr {
margin-right: 30px;
margin-left: 30px;
color: #f00;
opacity: 0.3;
}
.nav_bullets {
color: #D6D6D6;
}
::-moz-selection {
background: #93E6E5;
}
::selection {
background: #b3d4fc;
}
#news_block {
/*Chrome & Safari*/
-webkit-column-count: 3;
-webkit-column-gap: 40px;
/*Firefox*/
-moz-column-count:3;
-moz-column-gap: 40px;
margin: 20px;
position: absolute;
top: 249px;
width: 100%;
box-sizing: border-box;
}
#search_field {
font-size: 25px;
}
.fixed {
width: 100%;
box-sizing: border-box;
background: white;
border-bottom: 1px solid black;
box-shadow: 0 0 20px #000000;
top: 0;
position: fixed;
padding-top: 15px;
padding: 10px;
}
the correct code is given. It's still a bit buggy with widths of something. But the code in general is not very tidy. So I'll leave that part to you. Hope this works for you.
I was working on it today, and I found the solution.
Change the CSS from
.fixed-header .main-header {
display: none;
}
to
.fixed-header .main-header {
display: inline;
}
I want to hide my CSS triangle which is attached to a div using :before, and I came across this solution to implement: https://stackoverflow.com/a/11354393/998117
However, my jQuery is not working:
$(".contact input[type='submit']").click(function(event) {
event.preventDefault();
$(".contact .inner").addClass("hidden");
...
(Yes, it does get called.)
This is what my CSS/SASS looks like:
.contact {
background: #3c6ea5;
color: #fff;
display: none;
height: 500px;
.hidden:before {
display: none;
}
.inner {
margin: auto;
padding-top: 20px;
position: relative;
width: 400px;
&:before {
border: solid;
border-color: #3c6ea5 transparent;
border-width: 14px 16px 0 16px;
bottom: -107px;
content: "";
display: block;
position: absolute;
right: -50px;
}
.hidden:before {
display: none;
}
}
...
Why is it not hiding it? What am I doing wrong?
Your Sass is off just a little bit, should be:
.inner {
&.hidden:before {
display: none;
}
}
Notice the & before hidden
Try below code to solve your problem:
.inner { &:before {
.hidden & { display:none;}}}
I am not able to set overflow: hidden; on div wrapper for this script.
Please look at this js fiddle.
http://jsfiddle.net/CwzAD/1/
My aim is to display 10 cells (200 px in height) on the page and showing only animation within this limit, so to act as a mask.
Any idea what I am doing wrong? Any alternative approach even using JavaScript if with only CSS is not possible?
*{
margin: 0;
padding: 0;
}
#pageset {
position: fixed;
top: 0px;
left: 0px;
width: 500px;
height: 200px;
border: 1px solid rgba(0,255,255,1);
-webkit-box-sizing:border-box;
}
#wrapper {
position: fixed;
top: 0px;
left: 0px;
width: 500px;
background-color: green;
/*overflow: scroll;*/ /* PROBLEM HERE----------------*/
/*height: 200px;*/ /* PROBLEM HERE----------------*/
}
#navigator {
position: absolute;
left: 600px;
}
ul {
list-style: none;
/* margin:0px;
padding:0px;*/
}
li:nth-child(even) {
background: #d80000;
}
li {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 0px;
}
.focus {
background-color: yellow !important;
}
.btn {
float: left;
width: 50px;
height: 50px;
border: 2px gray solid;
margin: 10px;
background-color: #f0f0f0 ;
}
.icon {
width: 60px;
height: 60px;
border: 2px gray solid;
margin: 10px;
background-color: #99ff66;
}
Solution here
http://jsfiddle.net/Uz5a9/
Basically, what you need to do is use the #wrapper div as a container, which is only 200px high.
The .content div you generate should then scroll inside that wrapper.
To accomplish this you need to position the wrapper relatively, and then position the content div absolutely inside the wrapper. The wrapper should never move around.
The content can be as high as you want, the wrapper should always stay 200px high.
Check the following fiddle, which demonstrates exactly this: http://jsfiddle.net/Uz5a9/
Try this css it will work fine DEMO HERE
.content {
height:200px;
overflow:hidden
}
Just apply these additional rules to #wrapper:
#wrapper { max-height: 200px; overflow: hidden; }
and it seems to work just as described.
I am writing a card list in using html/css/javascript.
Here are the two sample implementation:
http://jsfiddle.net/235Tp/
#wrapper {
background: #EEE;
width: 100%;
height: 100%;
}
#cards-div {
background: green;
width: 100%;
height: 70%;
overflow-y:auto;
}
#cards-list {
width: 100%;
height: 100%;
}
#cards-list li {
vertical-align: middle;
text-align: center;
height: 100%;
width: 20%;
float: left;
background: #EEE;
margin-left: -14%;
border: 1px solid #000;
}
#cards-list li:first-child {
margin-left: 0;
}
http://jsfiddle.net/scctk/
You can see that one has borders while another has not.
The one with borders has a y-asix scrolling bar that I do not want to include.
How to remove that?
Just simply change overflow-y:auto to overflow-y:hidden; as shown:
#cards-div {
background: green;
width: 100%;
height: 70%;
overflow-y:hidden;
}
Here is the DEMO
Use box-sizing: border-box (and -moz-box-sizing) to have the border included in the width/height calculation of the box model.
http://jsfiddle.net/235Tp/3/