I have a horizontally scrolling website for my photography portfolio, so to make it easier for people to navigate I made it possible to have the website scroll horizontally when the user scrolls vertically. However, since I did this the divs holding each image INSIST on being a fixed width and not conforming to the width of the images they contain. I'm relatively inexperienced with coding so any help getting the divs to match the width of their images would be appreciated.
Here is my html and css
<div class="main-content">
<div class="banner-01 post">
<img src="http://jmatta.com/images/pix/Main/frankell.jpg">
</div>
<div class="banner-02 post">
<img src="http://jmatta.com/images/pix/Main/HMR17.jpg">
</div>
<div class="banner-03 post">
<img src="http://jmatta.com/images/pix/Main/Banes16.jpg">
</div>
<div class="banner-04 post">
<img src="http://jmatta.com/images/pix/Main/scott5.jpg">
</div>
</div>
body {
background: white;
color: black;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
margin: 0;
padding: 0;
font-size: 24px;
}
.main-content{
position:absolute;
display: flex;
flex-direction: column;
top: 50px;
left:250px;
width:700px;
max-height:1150px;
overflow-y:auto;
overflow-x:hidden;
transform:rotate(-90deg) translateY(-700px);
transform-origin:right top;
}
.main-content div{
transform:rotate(90deg) translateX(700px);
transform-origin: right top;
display: inline-block;
}
.main-content img{
max-height: 89vh;
}
Since you rotated parents of the images, it is the height of divs that appears not to follow the height of the contained images. I am not sure why did you rotate the main-content. I removed all the rotations and transformations (are they necessary for some reason?) and simplified the whole code in general. img and div now have the same size. If you need spacing between images, just add side margin to the image.
I believe this is the solution you are looking for:
code
Related
I have spent some time trying to work this out but with no luck.
I’m trying to align the text elements along side the image like this picture below. I was able to do this with absolute positioning.
absolute positioning
However I also want my page to be responsive so I decided to use a flex box container to put the text elements and the image elements side by side and get the equal distancing when I resized the window. However when I increase the size of my image the content area just ignore its padding margins and parent container. It creates a scroll on the window width and a plain white background.
responsive image
Would love to hear what people think I’m doing wrong. Would also like to hear any other ways that people would go about creating the desired effect I’m looking for.
This is my code below 👇
<body>
<header>
<div class="container">
<div class="justify">
<div class="inline">
<h1>App name</h1>
<h2>Download on the app store!</h2>
<a href="https://www.apple.com/uk/app-store/" target="_blank"><img class="downloadimg" src="appstore.png" alt="download link">
</a>
</div>
<div class="inline">
<img class="werewolf" src="werewolf.png" alt="app logo">
</div>
</div>
</div>
</header>
</body>
</html>
CSS code:
body{
margin: 0px;
padding: 0px;
font-family: 'Bebas Neue', cursive;
}
header{
background-color: aqua;
font-size: 40px;
padding-left: 10%;
padding-top: 10%;
padding-bottom:10%;
border-style: dashed;
border-color: rgb(255, 0, 0);
}
.justify{
display: flex;
align-items: center;
justify-content: space-between;
}
.downloadimg{
width: 50%;
}
.inline{
border-style: dashed;
border-color: rgb(255, 0, 0);
}
.werewolf{
width: 140%;
}
Try adding this to your image css rules:
image.werewolf {
display: block; /* or inline-block */
max-width: 100%;
height: auto; /* to maintain aspect ratio */
}
I have tried many different methods mentioned here and elsewhere on the web, but none of them do what I want it to achieve.
I currently have elements on a webpage positioned and styled with the code below. Then below that, I have a footer div that I want to be at the bottom of the page content (see attached images). If the content height is less than the screen height, I can either have the footer at the bottom of the screen or directly under the content (both work). If the content is larger than the screen, I want the footer to be at the bottom of the page content, so that when the user scrolls down they see the footer.
Right now, My bottom-sec div is the footer (not the one that actually has id footer), but it is sticking to the bottom of the viewport, not to the bottom of the content. So, if the content is greater than the screen, the footer overlaps over the page content.
I think it may be because of the position: relative in the indiitem divs, however I need them to be there for the rest of the page to work.
Here's my code
.items-container {
margin-left: 45px;
margin-right: 45px;
display: flex;
flex-wrap: wrap;
position: absolute;
}
#bottom-sec {
position: fixed;
bottom: 10px;
width: 100%;
}
#footer {
margin: 20px;
margin-top: 0px;
display: flex;
flex-wrap: wrap;
}
#footer > div {
margin: 35px;
margin-top: 10px;
margin-bottom: 10px;
}
<div class="items-container">
<div class="indiitem" style="position: relative;">
<div class="list-item">
<img src="https://imgur.com/c3cv6SW.png" class="item-thumbnail" style="position: relative, padding-bottom: 0vw" id="product-img">
The_Tiger_Shirt
<h5 style="font-size: 13px; margin: 0; padding: 0;">$1000</h5>
</div>
</div>
<div class="indiitem" style="position: relative;">
<div class="list-item">
<img src="https://imgur.com/nIZxLpA.png" class="item-thumbnail" style="position: relative, padding-bottom: 0vw" id="product-img">
Basic_Hoodie
<h5 style="font-size: 13px; margin: 0; padding: 0;">$50</h5>
</div>
</div>
<div id="bottom-sec">
<hr style="width: 170px; text-align: center; margin-top: 50px;">
<div id="footer">
<div id="links">
<h4>M_E_N_U:</h4>
A navbar is supposed to be here--took up too much space so it isn't included
</div>
<div id="mailform">
<form method="POST" action="/shop" id="enter_email">
<input type="text" name="email" id="email" required>
<input type="submit" value=">>>>" id="emailpost">
</form>
</div>
</div>
When I tried position: absolute on my 'bottom-sec' div, would be at the bottom of the viewport, overlapping with my content, but if I scrolled down, it stayed in the same position in the middle of the content.
When I tried removing the position or position: relative, the footer completely ignored the page content and moved up to be right under my header.
Any help would be appreciated!
You need a set height into body,html tag.
Then you need a absolute position into #footer tag
For example like this:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* adjust to footer height */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* height of the footer */
background:#6cf;
}
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
One of the simplest and cleanest ways without having to mess with too many display modes is by taking advantage of flexbox. It's really simple, I wrote an article explaining it in depth here:
It's geared towards bulma but in the last paragraph I also share how this would work without a framework like bulma. There is also a codepen that you can open and edit. If you need any help, let me know :)
I've two divs. It contains two chart with width 800px and height 400px each. I want them horizontally aligned.
Also, they shouldn't change there alignment or image size if monitor/browser size changes. Automatic horizontal scroll bar (or vertical if required) should come.
I've tried many options but couldn't get what I am looking for. :(
<style type="text/css">
#container{
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
#left{
display:inline-block;
width:50%;
margin:0;
}
#right{
display:inline-block;
width:50%;
text-wrap:none;
}
This is the latest version of CSS I tried.
From what I understand, this should satisfy what you're looking for. Here's a working example in JSFiddle. I've added notes to the CSS to describe how I got it to work.
#container{
/* Since you know the width of the images, we can set
the container width. This will force the browser to
draw a horizontal scrollbar when the width is too small */
width: 1600px;
/* This is a little trick to make the container as large
as the elements inside it, even though they are set to
float: left */
overflow: hidden;
}
#left,
#right{
/* display: inline-block does not work because is adds space
around each element, making them wider than the container and
forcing the second image down below the first, so we can use
float: left instead */
float: left;
width: 50%;
}
<div id="container">
<div id="left"><img src="http://placehold.it/800x400" /></div>
<div id="right"><img src="http://placehold.it/800x400/444444" /></div>
</div>
display:flex and margin will do the trick here. And remove width:50%; if do not want to change image size.
Check following: Here i change image size to display properly.
#container {
display: flex;
font-size: 28px;
height: 100%;
text-align: center;
width: 100%;
}
#container > div {
margin: 0 5px;
}
img{
width:400px;
height:200px;
}
<div id="container">
<div id="left"><img src="http://placehold.it/100x100" /></div>
<div id="right"><img src="http://placehold.it/100x100" /></div>
</div>
Working Fiddle
Display inline-block will work, here is an example: https://jsfiddle.net/w913sbro/
You can also try adding this to your #container:
display:flex;
as by default flex will align in row style.(horizontal).
Would be great if you could show us what you have tried. Anyways I hope this is what you are expecting. demo here
<div class="row">
<div class="container">
<div id="1" class="box left">
<img src="http://placehold.it/100x100" height="800" width="400">
</div>
<div id="1" class="box right">
<img src="http://placehold.it/100x100" height="800" width="400">
</div>
</div>
</div>
I haven't used CSS quite often. I always get stuck even when it get's to the simplest layout questions. Even though I am reading a book I cannot figure out how the following works:
I want to design a website which has a header on top, then menu bar and then content. Menu bar and content are working quite good. But I want to have a header with some header text on the left and a logo on the right.
So I have taken this approach:
<div id="headline">
<div id="headertext">Some title<br/>some more title text</div>
<div id="logo"><img src="somelogo.png" /></div>
</div>
And for the CSS:
#headline { overflow: hidden;
height: 224px;
text-align: left;
padding: 0px 80px 0px 80px;
}
#headertext { font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 20pt;
color: #000000;
float: left;
font-weight: bold;
}
#logo {
float: right;
}
So I made the text on the left float: left and the logo on the right float: right. So far so good. Now I want to align both elements to the vertical middle of the parent <div> that has a certain height.
This is what I want it to look like (the blue rectangle is the logo):
I have tried using vertical-align: middle but this does not work out. I have also stumbled across display:table-cell and display: inline but I must have used it in a wrong way or it also does not work. Do I have to use another "wrapper" <div> inside the headline element?
Edit: thanks for the hint about fiddle; I tried to edit one: http://jsfiddle.net/f5vpakdv/
Thank you for your help!
You can achieve this using display: table and display: table-cell, together with vertical-align: middle.
I've removed some irrelevant bits from your original CSS to make it easier to see what's different.
To make it work perfectly after you add padding or margin, check this link: Box Sizing | CSS-Tricks.
<div id="headline">
<div id="headertext">
Some title<br/>some more title text
</div>
<div id="logo">
<div id="fakeImg"></div>
</div>
</div>
...
#headline {
width: 100%;
height: 224px;
background: yellow;
display: table;
}
#headertext {
text-align: left;
}
#headertext,
#logo {
display: table-cell;
width: 50%;
vertical-align: middle;
}
#fakeImg {
width: 100px;
height: 100px;
background: blue;
float: right;
}
Demo
You can use some CSS to accomplish this. Also check for vendor-specific transforms.
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Here is a fiddle, and I added another div wrapper.
http://jsfiddle.net/5o3xmfxn/
Updated version of your fiddle:
http://jsfiddle.net/f5vpakdv/1/
I have updated your fiddle here. I simply added display:table; to your wrapping div and gave both inner divs a style of:
display:table-cell;
vertical-align:middle;
I also made a version using flexbox here
I just added the following styles to your wrapping div:
display:flex;
align-items:center;
justify-content:space-between;
I would go for something easier like this. Just put wrapper around the content that you want to center and use a margin-top: http://jsfiddle.net/f5vpakdv/2/
<div id="headline">
<div id="wrapper">
<div id="headertext">Some title some
<br/>more title text</div>
<div id="logo"><img src="somelogo.png" width="198px" height="120px" />
</div>
</div>
</div>
CSS
#wrapper {
margin-top: 60px;
}
I have a div containing a title text and an image.
With the code below, the title is showing just above the image.
HTML code:
<div class="thumbnail">
<div class="text">
<center>Heading</center>
</div>
<div class="image">
<img src="sample.png">
</div>
</div>
I would like to align the title so that it will appear on the center (vertically and horizontally) of the image.
How can I achieve that using HTML and CSS?
You could remove the image tag and make the image be the background of the container div.
HTML
<div class="text">
Heading
</div>
CSS
.text {
background-image: url('sample.jpg');
text-align: center;
}
EDIT: I don't want to sell it as my perfect answer, but I realized I missed the vertical alignment, and as similar solutions have already been provided here in comments and answers, let me just provide you with a good source of info below. The point is that you could use vertical-align:middle if you used span or other inline element, but with div, you have to use other tricks like position:absolute and minus margins.
Source: http://phrogz.net/css/vertical-align/index.html
Your markup is mostly correct with the exception of using the center element and you do not need to wrap the img element in a div.
Here is some example markup:
<div class="thumbnail">
<h1>Heading</h1>
<img src="sample.png">
</div>
And its corresponding CSS:
.thumbnail {
position:relative;
}
.thumbnail h1 {
text-align:center;
position:absolute;top:50%;left:0;width:100%;
margin-top:-20px; /*make the negative top margin = half your h1 element height */
}
You could always use an element other than an h1 to hold your title. This just depends on your preference.
The following might help you.
HTML:
<div class="thumbnail">
<div class="text">
Heading
</div>
</div>
CSS:
.text {
background-image: url('http://cs616623.vk.me/v616623331/7991/vPKjXbo-c7o.jpg');
width: 320px;
height: 240px;
line-height: 240px;
vertical-align: middle;
text-align: center;
font-size: 48px;
}
Take into account that in this approach you would have to set manually the height and the width of your text element. Moreover, the height should be duplicated in the line-height in order for vertical alignment to work correctly.
You could test and change the code in the corresponding JSFiddle or just check the full-screen result.
I wouldn't recommend using lineheight to vertically align the text(as some answers suggest) solely because if the header is to long and spans over across two rows it would look terrible.
What I would do is to absolute position the heading and then use display: table-cell to vertical align it.
Note that to be able to use this solution you have to specify an height for the heading.
HTML
<div class="thumbnail">
<div class="text">
<h1>Heading</h1>
</div>
<div class="image">
<img src="http://placehold.it/350x250" />
</div>
</div>
CSS
.thumbnail{
position: relative;
display: inline-block;
}
.text{
position:absolute;
top: 0px;
left: 0px;
width: 350px;
}
.text h1{
height: 250px;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 350px;
color: #fff;
}
JSfiddle here