I am creating a Node/Express staff directory. It's all working fine so far except one single image appears out of line and I cannot figure out why this one image is not behaving like the rest. The first image in the row is higher than the rest, even though all images are the same size, and all are placed on the page with the same class. This is what the page looks like:
As you can see, only the first image is falling out out alignment.
I've attached the relevant parts of the code in hopes that someone could see something I am obviously missing.
Thanks for the help!
This is my header.ejs file:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type = "text/css" href = "/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type = "text/css" href = "/css/styles.css">
</head>
<body>
This is the staff.ejs file:
<%include header %>
<div class = "container">
<header class = "jumbotron">
<h1>Staff Directory</h1>
</header>
<div class = "row row-grid">
<% staff.forEach(function(staff){ %>
<div class="col-sm-1">
<div class="thumbnail">
<div class = "imagewrap">
<!--<h4><%= staff.name %></h4>-->
<img src = "<%=staff.image%>">
<%=staff.initials%>
</div>
</div>
</div>
<% }); %>
</div>
</div>
<%include footer%>
And this is my css:
/* THE CSS TO OVERLAY BUTTON ON THE BOTTOM LEFT CORNER OF IMAGE */
.imagewrap {
display:inline-block;
position:relative;
}
.button2 {
position:absolute;
bottom:0;
right:0;
}
/* A BUNCH OF CSS TO MAKE A ROUND BUTTON*/
.round-button {
position:absolute;
width:20px;
height:20px;
line-height:20px;
border: 2px solid #f5f5f5;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: #4679BD;
box-shadow: 0 0 3px gray;
font-size:10px;
font-weight:bold;
bottom:0;
right:0;
}
.round-button:hover {
background:#30588e;
}
img {
width:100%;
}
.row .display-flex {
display: flex;
flex-wrap: wrap;
}
.row .display-flex > [class*='col-'] {
display:flex;
flex-direction:column;
}
.row.row-grid [class*="col-"] + [class*="col-"] {
margin-top: 15px;
}
Fixed it - the problem was the row-grid class. I deleted the second [class*="col-"], and the first picture fell into place. Thanks!!
due to the CSS/Bootstrap Have you tried it on
'img-thumbnail' //Shapes the image to a thumbnail
'img-responsive' //Makes an image responsive (will scale nicely to the parent element)
as you can use it
<img src = "<%=staff.image%>" class="img-responsive">
Related
So I'm not that great at programming sorry, but I use stack overflow and other sources to add site functionality and learn a little more each time. I'm using a Flexible Grid System to display my main content, specifically to re-arrange navigational buttons on the page.
This works great for me, but I've been using an ancient onMouseOver effect to display text when the user moves over an image button link and I'm not happy with the way it looks, and using flex creates issues with text legibility when the sizing gets small.
Ideally, I'd like to use a css overlay on my buttons so I can replace the image with text and format it to my liking. I've tried MANY different overlay solutions, but they all seem to use grid layouts and I can't get them to work with my flex layout for some reason.
Either the images get cropped, or the text can't completely cover the image due to layering issues, or (If I use the grid layout) I lose the flexible resizing capabilities that I really like on the site.
I'm hoping that this is a really simple fix. I'm assuming I need to add a container to my flex layout to place the content over the top of the image, but a hint to where to start would be really appreciated.
Here's a link to the buttons in the flex layout with no overlay:
https://megaauctions.net/megaflextest.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MEGA Main Flex Buttons</title>
<link rel="stylesheet" href="css/test-code-buttons-no-action-compact.css" type="text/css"/>
</head>
<body>
<div class="buttoncontainer">
<buttonhomea class="buttonhomea column grad-yellow">
<a href=#><img src="http://www.megaauctions.net/images/btn-auctions.gif" /></a>
</buttonhomea>
<buttonhomeb class="buttonhomeb column grad-babyblue">
<img src="http://www.megaauctions.net/images/btn-buying.gif" />
</buttonhomeb>
<buttonhomec class="buttonhomec column grad-salmon">
<img src="http://www.megaauctions.net/images/btn-selling.gif" />
</buttonhomec>
</div>
</body>
</html>
and the CSS...
.buttoncontainer {
margin: 0 auto;
top: 0px;
display: flex;
position: relative;
flex-wrap: wrap;
justify-content: space-evenly;
text-align: center;
background: url('http://www.megaauctions.net/images/bkg-subs-deep.gif');
}
.column {
--columns: 12; /* number of columns in the grid system */
--width: var(--width-mobile, 0); /* width of the element */
padding: 0px;
margin: 9px 1px 2px 1px;
flex-basis: calc(var(--width) / var(--columns) * 94%);
}
/****** VIEWPORTS START ******/
#media (min-width: 350px) {
.column {
--width-mobile: var(--width-mobile);
--width: var(--width-mobile);
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
width:100%;
max-width:157px;
}
}
#media (min-width: 512px) {
.column {
--width-tabletp: var(--width-tablet);
--width: var(--width-tabletp);
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
width:100%;
max-width:157px;
}
}
#media (min-width: 650px) {
.column {
--width-tablet: var(--width-mobile);
--width: var(--width-tablet);
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
width:100%;
max-width:300px;
}
}
#media (min-width: 900px) {
.column {
--width-desktop: var(--width-tablet);
--width: var(--width-desktop);
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
width:100%;
max-width:315px;
}
}
/****** VIEWPORTS END ******/
.buttonhomea, .buttonhomeb, .buttonhomec {
--width-mobile: 12;
--width-tabletp: 4;
--width-tablet: 4;
--width-desktop: 4;
height: 100%;
}
.grad-yellow {
background-color:#f3d250;
background-image:linear-gradient(140deg,#f3d250,#EEA315);
}
.grad-babyblue {
background-color:#90CCF4;
background-image:linear-gradient(140deg,#90CCF4,#578FEE);
}
.grad-salmon {
background-color:#F78888;
background-image:linear-gradient(140deg,#F78888,#E7298C);
}
code in fiddle:
https://jsfiddle.net/mattcomps/gfb7k43h/
...and an overlay example of what I'm trying to achieve:
https://megaauctions.net/megaflextestbuttonaction.htm
<html>
<head>
<title>CSS Grid Cards</title>
<link rel="stylesheet" href="css/test-code-buttons-working-grid-compact.css" type="text/css"/>
</head>
<body>
<div class="container">
<section class="cards">
<a href="#" class="card grad-yellow">
<div class="card__overlay grad-yellow">
<div class="card__title">Auctions</div>
<div class="card__description">
Description goes here.
</div>
</div>
<div class="card__image" style="background-image:url('http://www.megaauctions.net/images/btn-auctions.gif')"></div>
<div class="card__content">
</div>
</a>
<a href="#" class="card grad-babyblue">
<div class="card__overlay grad-babyblue">
<div class="card__title">Buying</div>
<div class="card__description">
Description goes here.
</div>
</div>
<div class="card__image" style="background-image:url('http://www.megaauctions.net/images/btn-buying.gif')"></div>
<div class="card__content">
</div>
</a>
<a href="#" class="card grad-salmon">
<div class="card__overlay grad-salmon">
<div class="card__title">Selling</div>
<div class="card__description">
Description goes here.
</div>
</div>
<div class="card__image" style="background-image:url('http://www.megaauctions.net/images/btn-selling.gif')"></div>
<div class="card__content">
</div>
</a>
</section>
</div>
</body>
</html>
and the CSS...
.container{
background-image:url(http://www.megaauctions.net/images/bkg-subs-deep.gif)
}
.cards{
display:grid;
gap:1rem;
margin:0 auto;
padding:1rem;
}
#media (min-width:59em){
.cards{
grid-template-columns:repeat(2,1fr)
}
}
.card{
display:grid;
grid-template-columns:repeat(2,1fr);
grid-template-rows:300px 1fr auto;
color:#fff;
}
#media (min-width:31.25em){
.card{
grid-template-columns:160px (2,1fr);
grid-template-rows:1fr auto
}
}
#media (min-width:50em){
.card{
grid-template-columns:300px (2,1fr)
}
}
#media (min-width:59em){
.card{
grid-template-columns:160px(2,1fr)
}
}
.card__overlay{
min-height:300px;
display:none
}
#media (min-width:59em){
.card__overlay{
position:relative;
opacity:0;
display:grid;
justify-items:center;
align-items:center;
grid-column:1/4;
grid-row:1/3;
transition:opacity .3s ease-in-out}
}
.card:hover .card__overlay{
min-height:300px;
opacity:1
}
.card__content span{
display:inline-block;
border:2px solid #fff;
padding:1rem 3rem;
color:#fff;
}
.card__image{
grid-column:1/3;
grid-row:1/2;
min-height:157px;
background:no-repeat
}
#media (min-width:31.25em){
.card__image{
grid-column:1/4;
grid-row:1/3
}
}
.card__content{
grid-column:1/3;
grid-row:2/3;
padding:1.5rem}
#media (min-width:31.25em){
.card__content{
grid-column:2/4;
grid-row:1/2}
}
.grad-yellow {
background-color:#f3d250;
background-image:linear-gradient(140deg,#f3d250,#EEA315);
}
.grad-babyblue {
background-color:#90CCF4;
background-image:linear-gradient(140deg,#90CCF4,#578FEE);
}
.grad-salmon {
background-color:#F78888;
background-image:linear-gradient(140deg,#F78888,#E7298C);
}
code in fiddle:
https://jsfiddle.net/mattcomps/2eLzkwts/
Thanks!
Hope this answers your query
JSFIDDLE
what i have done is giving relative style to the parent buttonhomea .
then on hover showing the hidden div.
.card__overlay{
position: absolute;
width: 100%;
height: 100%;
top: 0;
opactity:0;
z-index:-1;
}
.buttonhomea{
position:relative;
}
.buttonhomea:hover .card__overlay{
opacity:1;
z-index:1;
}
and added html
<div class="card__overlay grad-yellow">
<div class="card__title">Auctions</div>
<div class="card__description">
Description goes here.
</div>
</div>
under each buttonhomea class
I am putting in new code as I have been studying, Hopefully this is a clearer picture of what my goal is.
I want to go from a table based to a div setup, I have tried
<div class="image"></div>
with this CSS
div.image:before {
content:url(http://placehold.it/350x150);
}
But I am unsure of the placement of the text, also putting an image in the div as well as making sure the dimension is correct.
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My Site</title>
<meta http-equiv="Content Type" content="text/html; charset=utf-8" />
<style type="text/css">
.bgimg {
background-image: ('file:///C:/Location/somimg.jpg');
}
</style>
</head>
<body>
<img src="somimg.jpg" width="246" height="94" alt="sm pic'/>
<div class="bgimg">
</div>
<div class="mainsection">
</div>
</body>
</html>
CSS code:
td {
text-align: left;
vertical-align: top;
font-family:Tahoma;
font-weight: bold;
font-size:15px;
color: #E5E5E5;
}
.div-with-bg
{
width: 263px;
height: 94px;
background-image:url('smpic.jpg');
margin:0;
padding:0;
}
a {
text-decoration: underline;
color:#9D5FBB;
}
A:Hover {
color : #DBACF2;
text-decoration : underline;
}
h1 {
color: #9929bd;
font-weight: normal;
font-size: 20px;
font-family: Tahoma;
}
H3 {
color: #7F409E;
font-weight: bold;
font-size : 20px;
font-family:Tahoma;
}
My goal is to have the div's go out to the edge of the browsers as I have multiple tables that I would like to replace with div elements. I have viewed this setup in a browser and the div and image show up but not at the edge of the page.
I don't know if I understand what you're asking but I just copied your HTML in Sublime text, and did this for css:
div.image:before {
width: 263px;
height: 94px;
background-image:url('somepic.jpg');
content:url(http://placehold.it/350x150);
margin:0;
padding:0;
}
It works for me. I have the left div on the left and the right div next to it.
Also, I would the the style of the divs in the css file:
div.right {
float: "middle"
}
div.left {
float: "left";
}
And for the HTML:
<body>
<div class="image left">Left Div</div>
<div class="right"">Right Div</div>
</body>
And if you want to make your life easier just learn flexbox. The way i learned it was using this site.
.container{
display:flex;
}
<div class="container">
<div>
<img src="http://placehold.it/350x150" />
</div>
<div>
RIGHT
</div>
</div>
This is one way to do it.
However i think that you should change the question into how i can learn to design in the browser (e.g. https://hackernoon.com/css-box-model-45ecf4ac219e) or something like that.
I have a main div which contains another 3 divs, inner divs are each separated into widths of 20% 50% and 30%. I encountered an issue, when resizing window to smaller sizes I get that squeezed effect ass all elements resize, however I want to keep element 1 and 3 at certain sizes (40px and 75px respectively). I tried setting element 1 to 40px, element 2 to 100% and element 3 to 75px widths, but eneded up with getting element 2 to occupy all space and push other elements out. I'll include image of normal state, resized state and desired state (on resize) that I wan't to achieve. How could I achieve it?
As you can see I only want middle section (element 2) to resize as windows is resized.
<div class="div-contain">
<div class="div-1"><div>
<div class="div-2"><div>
<div class="div-3"><div>
<div>
.div-contain {
position: relative;
}
.div-1 {
width: 20%;
min-width: 40px;
float: left;
}
.div-2 {
width: 50%;
position: abosolute;
margin: 0 auto;
}
.div-3 {
width: 30%;
min-width:75px;
float: right;
}
You could also use a media query and directly specify widths when it reaches a break point. add a margin to the center div the size of the left div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
margin:0;
padding:0;
}
.wrapper{
width:100%;
height:400px;
display:table;
}
#n1{
width:20%;
min-width:40px;
background:red;
display:table-cell;
}
#n2{
width:50%;
background:green;
display:table-cell;
}
#n3{
width:30%;
min-width:75px;
background:blue;
display:table-cell;
}
</style>
<script type="text/javascript">
window.onload = function()
{
document.getElementById('n1i').value = document.getElementById('n1').offsetWidth;
document.getElementById('n2i').value = document.getElementById('n2').offsetWidth;
document.getElementById('n3i').value = document.getElementById('n3').offsetWidth;
}
window.onresize = function()
{
document.getElementById('n1i').value = document.getElementById('n1').offsetWidth;
document.getElementById('n2i').value = document.getElementById('n2').offsetWidth;
document.getElementById('n3i').value = document.getElementById('n3').offsetWidth;
}
</script>
</head>
<body>
<div class="wrapper">
<div id="n1">
</div>
<div id="n2">
</div>
<div id="n3">
</div>
</div>
First div width:<br />
<input type="text" id="n1i" readonly="true" /><br />
<br />
Second div width:<br />
<input type="text" id="n2i" readonly="true" /><br />
<br />
Third div width:<br />
<input type="text" id="n3i" readonly="true" />
</body>
</html>
The easiest way might be to do away with element 2 altogether and just put its contents directly within the parent div. Then you can float elements 1 and 2, and when the page is resized only the space between them will change:
<style type="text/css">
#parent {position:relative;width:100%;height:100%;}
#parent div {position:relative;height:100%;}
#element1 {width:40px;float:left;}
#element3 {width:75px;float:right;}
</style>
<div id="parent">
<div id="element1"></div>
<div id="element3"></div>
<!-- Place the contents of element 2 here -->
</div>
i don't know if this works for you but basically i made all three inner divs absolute positioned. and had to use calc to calculate the middle div's width. there might be a better solution without using calc, but this is what came to my mind at this point.
http://jsfiddle.net/btevfik/VRU8V/
body{
margin:0;
}
.container {
height:20px;
position:relative;
}
.div1 {
width: 40px;
position:absolute;
left:0;
border:1px solid blue;
}
.div2 {
width: calc(100% - 120px);
position:absolute;
left:40px;
border:1px solid red;
}
.div3 {
width: 75px;
position:absolute;
right:0;
border:1px solid yellow;
}
On my computer I have it perfectly looking, it is a 17"
I went to see my web under development on www.hrcprojectconsulting.com on another computer, an old screen of 1080 x 600 i think
and the right panel has dislocated itself from its position and taken the middle container
I conceived it as One main container that wraps, a left container, a center container and a right container. I positioned the main container centered with margin: 0 auto; and it all looked good. Then I had to had the banner, the blue stripe that you will see:
This is my blueprint for all pages:
<link rel="stylesheet" href= "<?php echo base_url() ?>css/style.css" />
<script type ="text/javascript" src="<?php echo base_url()?>js/1.8.js"></script>
<div id = "contenedor_principal">
main wrapper
<div id = "left_container">
content for left panel
</div>
<div id="container-center"><!-- 1 -->
content for the center panel
</div> <!-- end of container center 1 -->
<div id = "right_container">
and for the right panel
</div>
</div>
and this is the header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<link rel="stylesheet" href= "<?php echo base_url() ?>css/main_style.css" />
<link rel="stylesheet" href= "<?php echo base_url() ?>css/webform.css" />
<script type ="text/javascript" src="<?php echo base_url()?>js/1.8.js"></script>
</head>
<div id="header" class = "header"><h1 class="header">Real Estate Worldwide</h1>
<body>
And this is the CSS:
#contenedor_principal
{
background:orange;
width:1040px;
margin: 0 auto;
}
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#FFFFFF;
}
#container-center{
width:635px; /*** Set to = center col width ***/
height:500px;
font-size:8px;
display:inline;
position:absolute;
left:485px;
top:80px;
/* \*/
margin-left:-1px;
/* Hidden from IE-mac */
}
#left_container{
width:200px; /*** Set to = center col width ***/
height:500px;
float:right;
margin-right:0px;
font-size:8px;
display:inline;
position:absolute;
left:275px;
top:80px;
/* \*/
margin-left:-1px;
/* Hidden from IE-mac */
}
#right_container{
width:202px; /*** Set to = center col width ***/
margin-left:0px;
height:600px;
float:right;
font-size:8px;
display:inline;
position:absolute;
right:260px;
background:url('../assets/uploads/miweb/bg_body.png');
background-repeat:repeat-x;
top:80px;
/* \*/
margin-left:-1px;
/* Hidden from IE-mac */
}
#header {
float:inherit;
background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
font-family: 'trebuchet ms',geneva,arial,tahoma,sans-serif;
font-size: 10px;
margin: 0 auto;
margin-top: 2px;
padding: 0;
width: 1050px;
height:75px;
h2 {color:#ffffff;}
}
Than can anyway be seen live on my web like I said. I am using 1660 x 900 and 17" but it should be viewable on any resolution and screen.
Any clue as to why it went all upside down?
thank you
The layout you are using is wrong. no need to use position: absolute for every div and then set the top and left.
Instead of that follow the below structure.
HTML
<html>
<head>
<title>Website</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<div id="left_content"></div>
<div id="middle_content"></div>
<div id="right_content"></div>
</div>
</div>
</body>
</html>
CSS
#container {
width:960px;
margin:0 auto;
}
#header {
background: blue;
height:50px;
margin-bottom:20px;
}
#left_content {
float: left;
width:150px;
background: red;
min-height: 600px;
margin-right:20px;
}
#middle_content {
float: left;
width:620px;
background: green;
min-height: 600px;
margin-right:20px;
}
#right_content {
float: right;
width:150px;
background: red;
min-height: 600px;
}
Live Demo
Hope this will help you.
Well, in your css, you clearly coded everything in order it comes correctly only on your screen.
In particular what is going wrong is your #right_container in which you say float:right and than right:260px.
A quick (but bad) solution to your css would be to put float:left instead of float:right and define the number of pixels from the left left:1190px (1190 is approximate)
A better solution would be learn properly css and play with it afterwards!
I am trying to align a text Email and textbox for it on top of an image at a specific location. I want the position to be fixed, no matter what size the screen is. Here is my html code:
<html>
<head>
<style type="text/css">
#container {
background-color:blue;
}
#content {
background: url('images/orange.jpg') no-repeat center top;
}
#c_main {
color: yellow;
}
#c_email {
position:absolute;
top:200px;
left:410px;
color: #FFFFFF;
font-size: 15px;
}
#c_emailbox1 {
position:absolute;
top:200px;
left:480px;
}
#c_emailbox2 {
position:absolute;
top:200px;
left:620px;
color: white;
font-size: 12px;
}
input {
border:0;
}
.email_textbox1 {
width:130px;
background-image:url('images/text_bg.jpg');
background-repeat:no-repeat;
}
.email_textbox2 {
color: #FFFFFF;
font-size: 11px;
width:130px;
background-image:url('images/text_bg.jpg');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="container">
<div id="content" style="height:1000px;left:0px;border:1px solid red;position:relative" >
<div style="height:100px;width:200px;border:1px solid red;position:absolute;top:250px;left:0px">
<h4> CREATE A USERNAME AND PASSWORD </h4>
</div>
<div id="c_email">
Email
</div>
<div id="c_emailbox1">
<input type="textbox" id="email1" border="0" class="email_textbox1">
</div>
<div id="c_emailbox2">
<input type="text" id ="email" value="Confirm Email Address" class="email_textbox2" onfocus="if
(this.value==this.defaultValue) this.value='';">
</div>
</div>
</div>
</body>
</html>
I cannot get it to align relative to the image. The text and textbox are misplaced when seen in a larger screen or if zoomed in and out. Suggestion please.
See my sample code. This is working. Change the height of parent div, the child always stays at bottom:
<div style="height:300px;border:1px solid red;position:relative">
<div style="height:100px;width:20px;border:1px solid red;position:absolute;bottom:0px">
</div>
</div>
If you want them always to the top of the text box. Make the parent control as relative.
The box or anything which you want to maintain constant distance make it absolute position
.Container {
position:relative
}
.child{
position:absolute
bottom:0px; // how much u wants to maintain..from the element
}