Just a quick on in relation to the following site:
christmas.drcrittall.com
My question, is why despite the following CSS:
html, body {
height:100%;
}
/* Background image for website */
body {
/*background: url("images/crumpled.jpg") no-repeat center center fixed;*/
background: url("../img/crumpled.jpg") no-repeat;
background-size: 100% 100%;
/*margin-bottom:5%;*/
}
#header {
height:20%;
border-style: solid;
border-color:red;
/*padding:0px; */
}
#middle {
height:60%;
/* border-style: solid;
border-color:green;*/
}
#cap {
height:20%;
border-style: solid;
border-color:blue;
/* Previously the click here text was overflowing out of this div. See here to see how to deal with this: https://css-tricks.com/almanac/properties/o/overflow/ */
/*overflow:auto;*/.
}
#form {
min-height:20%; /* Setting min-height of white-space beneath body enables container to expand with the form as it gets bigger */
display:none; /* This div is initially hidden until click button which activates jquery animation */
}
#main_image {
max-width:100%;
max-height:60vh; /*Set max and min heights to 60vh to lock within this container ie stop images expanding out */
min-height:60vh;
}
#candle_image {
width:100%;
height:100%;
}
#top_paper {
width:100%;
max-height:100%;
}
/* Make row height and columns fill entire height of containers */
.row, .col-md-6, .col-md-4, .col-md-6, .col-md-12, .col-md-8, .col-md-2, .col-md-3, {
height:100%;
}
Does the row within #cap and #head not fill 100% of the height? I have used flex box to center the font within the header, but can not seem to do the same with the cap... Here is the HTML:
<body>
<div class = "container-fluid center_font" id = "header">
<div class = "row" style = "border-style: solid; border-color:black;">
<div class = "col-md-12 col-xs-12">
<font id = "dear"> Merry Christmas! </font>
</div>
</div>
</div>
<div class = "container-fluid center_font" id = "middle">
<div class = "row"><!-- style = "border-style:solid; border-color:black;">-->
<div class = "col-md-3" id = "holly_1" style = "padding-top:10%;">
<img src = "../img/candles.png" id = "candle_image" class = "img-fluid">
</div>
<div class = "col-md-6 col-xs-12 center_font"><!-- style = "border-style:solid; border-color:yellow;">-->
<img src = "" id = "main_image" class = "img-circle">
</div>
<div class = "col-md-3" id = "holly_2" style = "padding-top:10%;">
<img src = "../img/candles.png" id = "candle_image" class = "img-fluid">
</div>
</div>
</div>
<div class = "container-fluid" id = "cap"><!-- style = "border-style:solid; border-color:green;">-->
<div class = "row" style = "border-style: solid; border-color:black;">
<div class = "col-md-offset-3 col-md-6 col-xs-12 center_font">
<font class = "ammend" id = "dear" style = "font-size:45px;"> Love from Matthew</font><br>
<!--<a href = "#" id = "reveal">
<font id = "dear" class = "fiddle" style = "font-size: 20px;">Click Me</font>
</a>
-->
</div>
<div class = "col-md-offset-3 col-md-6 col-xs-12 center_font">
<a href = "#" id = "reveal">
<font id = "dear" class = "fiddle" style = "font-size: 20px;">Click Me</font>
</a>
</div>
</div>
</div>
</body>
Font size is too big and collapses the offset columns, and you are missing center_font class on #cap.
Add center_font class to #cap.
Change font-size from 45px to less or equal than 36px on font#dear.ammend to keep 1 line of text ("Love from Matthew").
Related
I am working on a website.
I have a div block
<div id="table_and_dqinfo" class="table_and_dqinfo">
<div id="dqdiv" class="dqinfo">
<h4 class="centertext">Information Pane</h4>
<div id="dqdiv_volgraph"></div>
</div>
</div>
dqdiv_volgraph is an image block which has the image link.
Instead of putting the div block above into the CSS to show the image directly on the website, I want to put a CSS button, so that only after I press the button, it would open the div block above to show the image on the website.
Could anyone give me some hints about how to do it?
Is this what u want?
I used checkbox and label as a button.
When you click on label, it checks the checkbox, then using sibling selector (+) of CSS
input:checked + #dqdiv_volgraph{
display:block;
}
I toggle the visibility of the #dqdiv_volgraph div
Feel free to style the label tag and make it look like a button according to your project
Note that the for attrib of label and id of the input should
be same
input,
#dqdiv_volgraph {
display: none;
}
label {
border: 1px solid black;
padding: 5px;
cursor: pointer;
}
input:checked+#dqdiv_volgraph {
display: block;
}
<div id="table_and_dqinfo" class="table_and_dqinfo">
<div id="dqdiv" class="dqinfo">
<h4 class="centertext">Information Pane</h4>
<input id="checkb" type="checkbox">
<div id="dqdiv_volgraph">
<h1>Put image here</h1>
<img src="https://placehold.it/200x200">
</div>
<label for="checkb"> Click me</label>
</div>
</div>
Alternatively, you could also use JavaScript to solve this particular issue.
function showImage(n) {
var Images = document.getElementsByClassName("table_and_dqinfo");
//Get all elements with class "table_and_dqinfo"
var i = 0;
if (Images[n].style.display == "block") {
Images[n].style.display = "none";
return;
}
//Checks to see if the selected Image is already visible. If so it
//switches it makes it invisible
for (i = 0; i < Images.length; i++) {
Images[i].style.display = "none";
}
//Make the other Images invisible.
Images[n].style.display = "block";
//Change selected Image to visible
}
function showAll() {
var Images = document.getElementsByClassName("table_and_dqinfo");
var i = 0;
for(i = 0; i < Images.length; i++) {
if (Images[i].style.display == "block") {
Images[i].style.display = "none";
continue;
}
Images[i].style.display = "block";
}
}
.table_and_dqinfo {
display: none;
background-color: blue;
color: white;
}
.button {
border: 1px solid black;
cursor: pointer;
margin: 20px;
}
<span class="button" onclick="showImage(0)"> Button for Image 1 </span>
<span class="button" onclick="showImage(1)"> Button for Image 2 </span>
<span class="button" onclick="showAll()"> Button to show all Images </span>
<div class="table_and_dqinfo">
<div>
<h4>Image 1</h4>
<div></div>
</div>
</div>
<div class="table_and_dqinfo">
<div>
<h4>Image 2</h4>
<div></div>
</div>
</div>
Style the button as you please. You can also put whatever you want inside the <div class="table_and_dqinfo">
I am trying to create a "member list" -> multiple pictures with a name on the bottom next to each other. So far i have this:
<div class = "members">
<div class = "member1" style = "display:inline">
<img src = "head_1.jpg" style = "width: 80px; height: 100px"/>
Member1
</div>
<div class = "member2" style = "display:inline">
<img src = "head_2.jpg" style = "width: 100px; height: 100px"/>
Member 2
</div>
</div>
I want to put a line break between the <a> tags but this creates a line break within the html file which causes the next div to appear on the bottom of the previous when I want it to go to the right of it.
I would expect (probably wrongly) putting in the .css file:
.members .member1 {
width: 110px; // or max-width;
}
to make the formatting force the second <a> tag to appear behind the first in each memeber's <div>. How can I achieve what I'm trying to achieve?
.members .member1,.members .member2 {
width: 110px; // or max-width;
display: inline-block;
}
<div class = "members">
<div class = "member1">
<img src = "head_1.jpg" style = "width: 80px; height: 100px"/>
Member1
</div>
<div class = "member2">
<img src = "head_2.jpg" style = "width: 100px; height: 100px"/>
Member 2
</div>
</div>
Try this one
.member1 a{
display:list-item;
}
.member2 a{
display:list-item;
}
<div class = "members">
<div class = "member1" style = "display:inline">
<img src = "head_1.jpg" style = "width: 80px; height: 100px"/>
Member1
</div>
<div class = "member2" style = "display:inline">
<img src = "head_2.jpg" style = "width: 100px; height: 100px"/>
Member 2
</div>
</div>
Method 1) Remove display:inline of .member1 and .member2 and try this:
.members .member1, .members .member2 {
width: 110px;
display: inline-block;
}
.members .member1, .members .member2 {
width: 110px;
display: inline-block;
}
<div class = "members">
<div class = "member1">
<img src = "http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg" style = "width: 80px; height: 100px"/>
Member1
</div>
<div class = "member2">
<img src = "http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg" style = "width: 80px; height: 100px"/>
Member 2
</div>
</div>
Method 2) If you need display:inline, just add this code:
.member1,.member2 {
float: left;
width: 110px
}
.member1,.member2 {
float: left;
width: 110px
}
<div class = "members">
<div class = "member1" style = "display:inline">
<img src = "http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg" style = "width: 80px; height: 100px"/>
Member1
</div>
<div class = "member2" style = "display:inline">
<img src = "http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg" style = "width: 100px; height: 100px"/>
Member 2
</div>
</div>
I am having a major problem trying to create in-line tables with divs instead of tables and CSS. My issue is that I have 3 types of rows that aren't really in sync, so expectedly, do not line up. I am wondering if there is a solution or a better approach.
As you'll see in the fiddle, I am trying to get the header, row, and child row to line up. All columns and headers have the same width %, but their overall widths will be different. Also, the child row should be indented to appear under the parent.
Fiddle
http://jsfiddle.net/b6ptag0b/15/
HTML
<div id = "wrapper">
<div id = "headers">
<div class = "col header_name">Name</div>
<div class = "col header_id">ID</div>
<div class = "col header_country">Country</div>
</div>
<div id = "table">
<div class = "row" data-id = "1">
<div class = "col button">+</div>
<div class = "col name">Bob Dolle</div>
<div class = "col id">1234</div>
<div class = "col country">America</div>
</div>
<div class = "row_child" data-parent = "1">
<div class = "col name">Joe Dolle</div>
<div class = "col id">67788</div>
<div class = "col country">America</div>
</div>
</div>
CSS
#headers{
background-color:#ccc;
}
.row{
background-color:#ddd;
}
.row_child{
background-color:#AAA8A8;
margin-left:40px;
}
.col{
display:inline-block;
}
#table{
padding:5px;
}
.header_name, .name{
width:30%
}
.header_id, .id{
width:10%;
}
.header_country, .country{
width:25%;
}
.button{
padding:0 10px;
}
well, despite the "use tables" argument (I can see why you want to use DIVS), what you want to do is incredibly easy with CSS, but you're using a really convoluted logic. You can use a columns approach instead of rows, or using your rows approach, just give each columns the same width and include the .button class in the same div as the name , then simply add some table logic to your divs
#table, #headers {
display:table;
width:100%;
}
.row {
display:table-row;
width:100%;
}
.col {
display:table-cell;
width:30%;
}
#headers {
background-color:#ccc;
}
.row {
background-color:#ddd;
}
.row_child {
background-color:#AAA8A8;
margin-left:40px;
}
.header_id, .id {
width:10%;
}
.header_country, .country {
width:25%;
}
.button {
padding:0 10px;
float:left;
}
.row_child .name {
padding-left:50px;
}
See fiddle here
Modern browsers will allow you to use new CSS Table Layouts, for example:
Fiddle
http://jsfiddle.net/b6ptag0b/30/
HTML
<div id = "wrapper">
<div id = "headers">
<div class = "col header_name">Name</div>
<div class = "col header_id">ID</div>
<div class = "col header_country">Country</div>
</div>
<div class = "row" data-id = "1">
<div class = "col name">Bob Dolle</div>
<div class = "col id">1234</div>
<div class = "col country">America</div>
</div>
<div class = "row_child" data-parent = "1">
<div class = "col name">Joe Dolle</div>
<div class = "col id">67788</div>
<div class = "col country">America</div>
</div>
</div>
CSS
#wrapper{
display: table;
}
#headers{
background-color:#ccc;
display: table-row;
}
.row{
background-color:#ddd;
display: table-row;
}
.row_child{
background-color:#AAA8A8;
display: table-row;
}
.col{
display: table-cell;
padding: 2px;
}
There is a strange space on the right side of my web, whenever i zoom in. the space becomes bigger. can someone help me how to get rid of that.
here is my html:
<html>
<head>
<title>thesis</title>
<link rel = "stylesheet" href = "styles and pics/index.css">
</head>
<body>
<div id = "outer_wrapper">
<header>
<section>
<input type = "text" id = "username" name = "username" class = "text" placeholder = "E-mail"/>
<input type = "password" id = "password" name = "password" class = "text" placeholder = "Password"/>
<input type = "submit" id = "submit_login" name = "submit_login" class = "submit" value = "login"/>
</section>
</header>
<footer>
footer
</footer>
</div>
</body>
here is my css:
*{ padding:0px; margin:0px; }
body{ text-align:center;}
#outer_wrapper{ width:100%; height:700px; background-color:yellow; position:relative;}
header{ background-color:blue;height:70px;display:block;position:absolute;top:0px;width:100%;}
header section{ position:relative;top:20px;left:120px;}
.text{ height:25px;width:200px;padding-left:5px;}
#submit_login{height:25px;width:70px;background-color:green;border:0px;outline:none;cursor:pointer;color:white;}
.text,#submit_login{ margin-left:10px;}
footer{background-color:blue;height:40px;position:absolute;bottom:0px;width:100%;}
section { left: 120px; } is causing the issue. By default, section is inheriting width: 100% so moving it left is adding 120px to the total width.
Assuming you intend the header section to be offset 120px to the left, there are at least two ways to fix the issue:
Change section { left: 120px; } to section { margin-left: 120px; }
or
Add overflow: hidden; to header element i.e. header { overflow: hidden; }
Otherwise just remove left: 120px;
Remove the left:120px from: "header section{ position:relative;top:20px;left:120px;}"
Should be "{position:relative;top:20px;}".
I have a square that contains pictures and each picture is supposed to be clickable to take you to that person's profile, but my top left picture is not clickable. I'm not sure what I'm doing wrong.
Here is my jsfiddle so you can see the problem.
<div id = 'crew_div'>
<div class = 'my_crew'><div id = 'jason'><a href = 'http://www.startingtofeelit.com/author/musicmakesmelosectrl/'><img src='http://www.startingtofeelit.com/profile/jason.jpg' title = 'View Posts by Jason'></a></div></div>
<div class = 'my_crew'><div id = 'dharam'><a href = 'http://www.startingtofeelit.com/author/4everevolution/'><img src='http://www.startingtofeelit.com/profile/dharam.png' title = 'View Posts by Dharam'></a></div></div>
<div class = 'my_crew'><div id = 'james'><a href='http://www.startingtofeelit.com/author/jjstiles/'><img src='http://www.startingtofeelit.com/profile/james.png' title = 'View Posts by James'></a></div></div>
<div class = 'my_crew'><div id = 'cody'><a href='http://www.startingtofeelit.com/author/codecray/'><img src='http://www.startingtofeelit.com/profile/Cody.jpg' title = 'View Posts by Cody'></a></div></div>
</div>
#crew_div {
position:relative;
width: 312px;
height:312px;
}
.my_crew {
position:absolute;
}
.my_crew img {
width:156px;
display:block;
}
.my_crew #jason {
top:0px;
left:0px;
position:relative;
}
.my_crew #dharam {
top:0px;
left:156px;
position:relative;
}
.my_crew #james {
top: 156px;
left: 0px;
position:relative;
}
.my_crew #cody {
top:156px;
left:156px;
position:relative;
}
Add a z-index to your image like this :
.my_crew #jason {
top:0px;
left:0px;
position:relative;
z-index: 1;
}
You haven't specified width/height dimensions or top/left positioning for your <div class="my_crew">. They are each positioned at the top-left, and their child <div> is then positioned relative to the absolutely positioned parent. That's why the top-left isn't clickable, because it's really stacked under 3 other <div>s.
A better solution would be to combine the two <div>s into one.
See the fiddle here: http://jsfiddle.net/R4HJb/8/
<div id = 'crew_div'>
<div class = 'my_crew jason'><a href = 'http://www.startingtofeelit.com/author/musicmakesmelosectrl/'><img src='http://www.startingtofeelit.com/profile/jason.jpg' title = 'View Posts by Jason'></a></div>
<div class = 'my_crew dharam'><a href = 'http://www.startingtofeelit.com/author/4everevolution/'><img src='http://www.startingtofeelit.com/profile/dharam.png' title = 'View Posts by Dharam'></a></div>
<div class = 'my_crew james'><a href='http://www.startingtofeelit.com/author/jjstiles/'><img src='http://www.startingtofeelit.com/profile/james.png' title = 'View Posts by James'></a></div>
<div class = 'my_crew cody'><a href='http://www.startingtofeelit.com/author/codecray/'><img src='http://www.startingtofeelit.com/profile/Cody.jpg' title = 'View Posts by Cody'></a></div>
</div>
#crew_div {
position:relative;
width: 312px;
height:312px;
}
.my_crew {
position:absolute;
width: 156px;
height: 156px;
}
.my_crew img {
width:156px;
display:block;
}
.my_crew.jason {
top:0px;
left:0px;
}
.my_crew.dharam {
top:0px;
left:156px;
}
.my_crew.james {
top: 156px;
left: 0px;
}
.my_crew.cody {
top:156px;
left:156px;
}
Here is what you need, I reorganized your HTML a bit :)
New Fiddle
<div id = 'crew_div'>
<a href = 'http://www.startingtofeelit.com/author/musicmakesmelosectrl/'><div class = 'my_crew'><div id = 'jason'><img src='http://www.startingtofeelit.com/profile/jason.jpg' title = 'View Posts by Jason'></div></div></a>
<a href = 'http://www.startingtofeelit.com/author/4everevolution/'><div class = 'my_crew'><div id = 'dharam'><img src='http://www.startingtofeelit.com/profile/dharam.png' title = 'View Posts by Dharam'></div></div></a>
<a href='http://www.startingtofeelit.com/author/jjstiles/'><div class = 'my_crew'><div id = 'james'><img src='http://www.startingtofeelit.com/profile/james.png' title = 'View Posts by James'></div></div></a>
<a href='http://www.startingtofeelit.com/author/codecray/'><div class = 'my_crew'><div id = 'cody'><img src='http://www.startingtofeelit.com/profile/Cody.jpg' title = 'View Posts by Cody'></div></div></a>
Why don't you just float them next to each other? That will also save some lines of CSS.
.my_crew {
float:left;
}
Example: http://jsfiddle.net/T5LCm/