ok so i've been working on this website. mostly just as kind of a proof of concept. i haven't coded a website in quite some time now so this is basically me trying to get back onto the horse as they say.
anyway, i've searched this forum for some time now and i did find quite a few questions very similar to mine. but somehow all the solutions and all the ideas they gave me did not seem to work for me. now maybe i have a typo somewhere making my browser go crazy and misinterpret the code i don't know. what i want to do is create something like a fluid layout with 4 "columns" all being 1/4 of the canvas and full height. in each of these four columns i want to place an image which i want to be center center. so that i can move the image up to the top of the column and have some text at the center on mouseover. thing is i can't seem to find a way to place the image in the center. i tried using and containers. i even tried just aligning the without a container, but it just won't go where i want it. as i mentioned maybe i have a typo somewhere or something.
any
so this is the html code i use for layout
<body>
<div id="col_home">first text first text</div>
<div id="col_so"> text text text</div>
<div id="col_tra">
<div id="picture">
<img src="img/Ordner ZU.png" width="100px" height="100px" />
</div>
image title
</div>
<div id="col_co">last text last text</div>
</body>
and this is the css i use for formatting
html {
width: 1024px;
height: 768px;
margin: auto;
border: 1px solid;
}
body, div {
margin: 0px;
width: 100%;
height: 100%;
}
#col_home {
position: relative;
float: left;
left: 0%;
top: 0%;
width: 25%;
height: 100%;
}
#col_so {
position: relative;
float: left;
left: 0%;
top: 0%;
width: 25%;
height: 100%;
background-color: rgb(255, 255, 1);
}
#col_tra {
position: relative;
float: left;
left: 0%;
top: 0%;
width: 25%;
height: 100%;
background-color: rgb(255, 204,51);
}
#col_co {
position: relative;
float: left;
left: 0%;
top: 0%;
width: 25%;
height: 100%;
background-color: rgb(255, 153, 0);
}
#picture {
position: absolute;
left: 50%;
clear: left;
}
thanks to any- and everyone for help. as i said i'm mostly doing this for fun but still i would like to figure out a possible solution for my learning curve ;). i did run it with id-tags first but for now i don't think it makes a difference at least not in the results i get.
An easy way to achieve this is using flexbox. To center a child element in its parent, you can use justify-content:center; which aligns an item horizontally, and align-items:center - vertically. flex-flow:row makes your child elements display in a row, if you want them to display in a column, use flex-flow:column. You can see the result by running the snippet by clicking the button below.
html {
width: 1024px;
height: 768px;
margin:auto;
border: 1px solid;
}
body, div {
margin:0;
width: 100%;
height: 100%;
display:flex;
flex-flow:row;
}
#col_home {
width:25%;
}
#col_so {
width:25%;
background-color: rgb(255, 255, 1);
}
#col_tra {
width:25%;
flex-flow:column;
background-color: rgb(255, 204,51);
}
#col_co {
width:25%;
background-color: rgb(255, 153, 0);
}
#picture{
justify-content:center;
align-items:center;
}
<body>
<div id="col_home">first text first text</div>
<div id="col_so"> text text text</div>
<div id="col_tra">
<div id="picture">
<img src="img/Ordner ZU.png" width="100px" height="100px"/>
</div>
</div>
<div id="col_co">last text last text</div>
</body>
Using float for column layouts like this is a thing of the past - you really want to use the flexible box model (aka "flexbox"). In the example below you can see that setting up the columns takes considerably less CSS code and each column always tries to take up any available space by "flexing." Since there are 4 columns, they all always take up 25% of the space.
Then within any individual column, you can use traditional relative positioning with top/left and margin offsets to perfectly center the image:
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-flow: row;
}
.col {
flex: 1 1 auto;
position: relative;
}
#col2 {
background-color: rgb(255, 255, 1);
}
#col3 {
background-color: rgb(255, 204,51);
}
#col4 {
background-color: rgb(255, 153, 0);
}
#picture {
left: 50%;
margin-left: -50px;
margin-top: -50px;
position: relative;
top: 50%;
}
<div class="col" id="col1"></div>
<div class="col" id="col2"></div>
<div class="col" id="col3">
<div id="picture">
<img src="img/Ordner ZU.png" width="100px" height="100px" />
<br>image title
</div>
</div>
<div class="col" id="col4"></div>
Not sure exactly what you're trying to do on mouse hover, but this should get you pretty close. You could also turn each column into a flexing box and try to align the image with justify or align properties but that might get tricky with hover effects.
Related
I need a div filled with colour that goes across the screen behind the bottles like this:
Have tried too many times now...
Here is my html:
.panel {
height: 100vh;
width: 100vw;
display: block;
}
.OriginalCollection {
background: url(img/page_5_background.png);
}
.inner2 {
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
overflow: hidden;
}
.centerwraper {
position: relative;
height: auto;
margin: 0 auto;
padding: 10px;
}
.centerdivcollections {
margin: 0 auto;
text-align: center;
max-width: 1080px;
}
.allbottleswrap {
display: flex;
}
.singlebottle {
width: 100%;
}
#media (max-width: 1200px) {
.singlebottle {
width: 100%;
}
}
.bottletextwraper {
display: inline-block;
vertical-align: middle;
}
.bottletext {
padding: 0px 5px 0px 0px;
}
.titlebottle {
width: 90%;
.stripeee {
background-color: #662d91;
width: 100vw;
height: 30px;
position: absolute;
left: 0;
right: 0;
margin-top: -45px;
}
<section class="panel OriginalCollection" data-section-name="OriginalCollection">
<div class="inner2">
<div class="centerwraper">
<div class="centerdivcollections">
<div>
<img class="coltitle" src="img/original_header.png" />
</div>
<div class="allbottleswrap">
<div class="bottletextwraper">
<div>
<img class="singlebottle" src="img/1Heisenberg.png" />
</div>
<div>
<img class="titlebottle" src="Titles/Titles/Heisenberg.png" />
</div>
<div class="bottletext">
<p>A top secret recipe that can only be described as the daddy of all day vapes. A fruity undertone and a cool crystal after sensation that will leave you wondering what it is... and wanting more.</p>
</div>
</div>
<div class="bottletextwraper">
<div>
<img class="singlebottle" src="img/2Pinkman.png" />
</div>
<div>
<img class="titlebottle" src="Titles/Titles/Pinkman.png" />
</div>
<div class="bottletext">
<p>The real MVP of the fruity flavours. Perfect for those looking for a one of a kind taste sensation. A true mouth-watering fruit explosion that your taste buds have been waiting for.</p>
</div>
</div>
<div class="bottletextwraper">
<div>
<img class="singlebottle" src="img/3BloodSukka.png" />
</div>
<div>
<img class="titlebottle" src="Titles/Titles/BloodSukka.png" />
</div>
<div class="bottletext">
<p>Packed with one hell of a bite. This flavour is crammed with sweet red cherries blended perfectly with fresh picked forest fruits. The fruity taste is then entangled beautifully with sweet eucalyptus and aniseed.</p>
</div>
</div>
</div>
<div class="stripeee">
<br>
</div>
</div>
</div>
</div>
</section>
Everything is almost done as I want, except this stripe... If you want you can always go to www.konceptxix.com to see the actual site. It's probably an easy fix for someone who knows it well. Sorry for mess in the code, I'm doing my best...
UPDATE:
I can get this set to a position behind it, but it has to be responsive so it's the same on mobile etc...
I'm assuming you want this to go all the way across the page? You'll want to use a pseudo element instead of a div, since it's just a decoration, and you can set the width to something impossibly wide to guarantee it fills the page - you already have overflow set to hidden on the sections, so it won't matter if it gets too wide. I used 150vw and set the left to -50vw, to guarantee that it's always at the far-left of the screen and goes all the way across.
From there, I needed to find a way to target the container for the images, that way I could position the pseudo element consistently as the image gets scaled down without worrying about overlapping the text. So I target the first bottle's first div, which is always the image, that way using different sized images doesn't cause weird double dividers. The result should be what you're looking for!
.bottletextwraper div:first-of-type{
position: relative;
}
.bottletextwraper img{
position: relative;
z-index: 1;
}
.bottletextwraper:first-child div:first-of-type:after{
content: '';
display: block;
width: 150vw;
position: absolute;
bottom: 3%;
left: -50vw;
height: 15%;
background: #662d91;
}
.bottletextwraper {
display: inline-block;
vertical-align: middle;
position: relative;
}
.bottletextwraper::after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background-color: orange;
}
Try to add this.
Because the stripee is outside of allbottletexwrapper its harder to correctly set the z-indexing. If you can move it inside, you can do without z-index hacks. But anyway, here is what you can do:
//set stripee to be relative and positioned (use your size units)
.stripeee {
position: relative;
top: -190px;
z-index: 1;/*mind this... a bit hacky but... */
}
And then style the bottles:
.bottletextwraper {
z-index: 5; /* use whatever number you consider safe according to the rest of page*/
}
I'm making a website and I've got this sort of a menu that looks like this:
Image
I want the lightblue part with the buttons to be centered vertically and to the right in the grey part not below Pepito123.
The code for the HTML is this:
#fotoUsuario {
width: 150px;
height: 150px;
border-radius: 10px;
}
.contenedor {
display: flex;
overflow: hidden;
}
.perfilUsuario {
background-color: rgb(211, 211, 211);
width: 80%;
height: 500px;
margin: auto;
border-radius: 10px;
padding: 15px;
}
.menuPerfil {
height: 80%;
width: 20%;
float: right;
background-color: rgb(173, 216, 230);
border-left: 1px solid rgb(0, 0, 0);
}
<section class="contenedor">
<div class="perfilUsuario">
<img id="fotoUsuario" src="http://coyotechronicle.net/wp-content/uploads/2015/02/facebook-logo.jpeg">
<h1>Pepito123</h1>
<div>
<ul class="menuPerfil">
<li><button type="button">Plan de Estudio</button></li>
<li><button type="button">Materias</button></li>
<li><button type="button">Otra cosa</button></li>
</ul>
</div>
</div>
</section>
JSFiddle
.perfilUsuario > div{
position: relative;
left: 40%;
}
Do this, it'll center the div. Next time you should explain your problem better
I moved the class of menuPerfil from the <ul> element to it's parent div and then slightly modified the height and width of menuPerfil from 30% to 40% respectively.
See Fiddle
In general, you can position the child element vertically within the parent element using positioning and transform. See the example:
.parent {
width: 100%;
height: 300px;
background-color: grey;
position: relative;
}
.child {
width: 100px;
height: 50px;
background-color: red;
position: relative;
top: 50%; /*This will push the child down from the TOP of the parent element. However, origin point of the child is set to its top (imagine top border laying perfectly at the middle vertically), therefore we need the next step, which is: */
transform: translateY(-50%); /* This will push the element UP for the half of it's height. */
margin: 0 auto; /* If you want to center it horizontally as well. */
<div class="parent">
<div class="child"></div>
</div>
Note: it's important that both parent and child are positioned for this to work.
I gave the general/universal example instead of applying it to your specific code, because I also (like few others) cannot say I perfectly understand how exactly did you want to position your elements in particular, but hopefully this will help you. Also, I'd target the div which contains the UL, and not the UL itself.
Let me know if you need help applying this solution to your problem. Good luck.
I recently have created this banner for my website, but I realized that I only want the main part of my site to be 900px long. However, I want the banner to run off the page, but have the part where it runs off be darkened (through opacity). So, this means, I need to make the image of my site positioned in the middle. Here is what I developed so far:
https://jsfiddle.net/h3w89t9y/4/
As you can see, this doesn't really get what I need. Here's the issue:
.banner {
background:url(https://i.gyazo.com/74f0fa6b9d9ed6652f3e220ceae113cf.png) no-repeat;
background-position: center;
margin: 0 auto;
height:185px;
}
The banner isn't 800px. If I add in a width of 800px, it will go to the middle just like I wanted. However, the image will be limited to only be 800px long rather than overflowing off of 800px.
This is what I'm trying to get it to look like:
https://i.gyazo.com/c38cae7bd34379477a6fcc8eeb160c22.png
How do I make it to where my banner is centered to the middle, but has the sides overlapped with opacities?
You can achieve what you want using pseudo like this:
body {
margin: 0;
}
.wrapper {
background:url(https://i.gyazo.com/74f0fa6b9d9ed6652f3e220ceae113cf.png) no-repeat center;
width: 100%;
}
.wrapper:before, .wrapper:after {
content:'';
width: calc((100% - 900px) / 2); /*setting the width to the 100% minus your desired header's width / 2 so it will occupy the rest of your content*/
height:185px;
position: absolute;
top: 0;
background: rgba(0, 0, 0, 0.3); /*set the desired opacity*/
}
.wrapper:before {
left: 0;
}
.wrapper:after {
right: 0;
}
.banner {
width: 900px;
height:185px;
margin: 0 auto;
}
<div class="wrapper" style="">
<div class="banner"></div>
</div>
So the idea is your pseudo elements occupy the rest of the content and setting them your desired transparency, notice that in this way you also can set them blur or whatever filter that you want.
Here a working jsfiddle to play with
You can't control opacity of a single background like that, you need another element. For example:
.banner, .bannert {
background:url(https://i.gyazo.com/74f0fa6b9d9ed6652f3e220ceae113cf.png) no-repeat;
background-position: center;
margin: 0 auto;
height:185px;
}
.banner {
max-width: 800px;
position: absolute;
left: 0;
right: 0;
top: 0;
}
.bannert {
background-repeat: repeat-x;
opacity: 0.5;
}
<div style="width: 100%; background: black; padding: 1px;position: relative;">
<div class="bannert"></div>
<div class="banner"></div>
</div>
https://jsfiddle.net/h3w89t9y/6/
Try this; add two divs first, one for the left side, and one for the right,hence you can apply your desired opacity to them and make the banner sides filtered, look at the snippets below;
HTML
<div style="width: 100%; padding: 1px;">
<div class="banner">
<div class="trans_right"></div>
<div class="trans_left"></div>
</div>
</div>
CSS
.trans_right {
padding: 2rem;
width: 13%;
float: right;
background: rgba(71,67,255,0.9);
height: 65%;
}
.trans_left {
padding: 2rem;
width: 13%;
float: left;
background: rgba(71,67,255,0.9);
height: 65%;
}
I'm really not sure if there is a better way to do this, but it gives you what you're looking for, checkout the link:
Transparent Sides
SO,
I've created a four-column fluid-width layout for a site, and I'm working on placing a fluid square DIV within one of my columns. There are a few techniques I've found to achieve this - namely, setting padding-bottom to the same percentage as the width - but none of these seem to work when the DIV contains content.
Is there a way to maintain a 1:1 (square) ratio on a fluid DIV when that DIV contains content?
Here's my HTML:
<div id="leftmostcolumn">
<div id="logo"></div>
</div>
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div id="rightmostcolumn"></div>
And my CSS:
body {
width: 100%;
height: 100%;
background-color: red;
}
#leftmostcolumn {
position: absolute;
top: 0;
left: 0;
width: 25%;
height: 100%;
background-color: blue;
}
#leftcolumn {
position: absolute;
top: 0;
left: 25%;
width: 25%;
height: 100%;
background-color: green;
}
#rightcolumn {
position: absolute;
top: 0;
left: 50%;
width: 25%;
height: 100%;
background-color: yellow;
}
#rightmostcolumn {
position: absolute;
top: 0;
left: 75%;
width: 25%;
height: 100%;
background-color: gray;
}
#logo {
width:100%;
padding-bottom:100%;
background-color: #aa2d2d;
color: white;
}
And here's a JsFiddle.
The DIV "logo" is the one I'm trying to maintain as a square. Right now, I've used the padding-bottom approach but that doesn't do the trick when there's content in the DIV. Any input is greatly appreciated!
Marca
EDIT:
Getting there...I'm adapting a script I found to find the width of the DIV and then apply that value to the height to keep it a square. However, as it stands now the script doesn't constantly resize the DIV, and it won't allow it to shrink below a certain size. Any thoughts on how to correct either of these issues?
HTML:
<div id="box"></div>
CSS:
#box { width: 75%; height: 50px; background-color: black; }
JQUERY:
$("#box").css("height", function() {
return $(this).width();
});
JsFiddle is here.
This is something I've actually been messing around with for a while, and have come up with a quasi (but not entirely) hacky, CSS-only solution that seems to work on most browsers in the past decade. The trick is to use images, and positioning in a tricky fashion. Consider the following (simplification) of your code.
Markup:
<div class="sqr_box">
your content goes here!
</div>
CSS:
.sqr_box
{
width: 50%; /* or 100px, or 20em, or whatever you want */
border: solid 2px pink;
background-color: grey;
color: white;
}
Now, we can't set the height in terms of percent, so we won't; instead, first we'll go into Photoshop, and make an image that is 2x2 px, transparent, or background-colored. Next we'll add the following to your markup:
<div class="sqr_box">
<img src="images/sizers/2x2.png" class="sizer">
<div class="content">your content goes here!</div>
</div>
and THIS to your CSS:
.sqr_box
{
width: 50%; /* or 100px, or 20em, or whatever you want */
position: relative; /* static positioning is less than ideal for this scenario */
}
.sqr_box > img.sizer
{
display: block; /* images default to an inline-block like thing */
width: 100%;
height: auto; /* CLUTCH!!! this ensures that the image's height changes to maintain proportions with it's width */
visibility: hidden;
}
.sqr_box > .content
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; /* Our parent element now has a dynamically assigned height, this will work */
border: solid 2px pink;
background-color: grey;
color: white;
}
Best of all, this will work for any sized ratio of box you'd want! Just change the proportions of the image!
Hope this is all still relevant to you, 3 months later.
-Sandy
Put all four columns in one div. set that div to 100% width and set the font size to 100em
Have each of your four columns have a width of 25em instead of 25%
Have your logo width and height set to 25em each
I'm working on a photography website. One of the things we're trying to aim for is a 'film strip' type of display for the images, as opposed to the usual thumbnail or 'tabulated' formation.
It works with tables. No problemo. The only thing that makes me not want to use a table is the fact that I'm not showing data, there's no need for columns and rows.
Another thing that is a slight spanner in the gears is the fact that I'm putting the images as backgrounds of divs. This is for basic 'copy protection', and also so I can overlay items over the photo on hover of the div.
The way I've got it coded at the moment is:
container [
[image]
[image]
[image]
[image]
]
I've drawn a skitch to help out with the visualisation of this..
As soon as the width of the container is met, the image-divs are dropping to the next line.
The CSS for the Divs is as follows:
.gallery_block_image_p {
width: 354px;
height: 532px;
display: inline-block;
margin: 0px;
padding: 0px;
margin-left: 10px;
float: left;
background-repeat: no-repeat;
}
and for the container...
#gallery {
border: 0px solid black;
position: relative;
top: 99px;
/* width: 8000px; */ /* When this is uncommented it works, with a huge amount of space to the right */
height: 532px;
z-index: 99;
}
and last but not least, the HTML used for the image divs...
<div id="gallery_1_0_img" class="gallery_block_image_p" style="background-image: url(gallery_img/ith/adamd_20101021_137.jpg);"></div>
if you remove "float:left;" from the gallery block style and add "white-space:nowrap" to the container then it should work.
Edit: I think something like this is what you're looking for
<div style="width: 800px; overflow-x:auto; white-space: nowrap;">
<div style="width: 300px; height: 100px; background-color: #f00; display: inline-block;"></div>
<div style="width: 300px; height: 100px; background-color: #0f0; display: inline-block;"></div>
<div style="width: 300px; height: 100px; background-color: #00f; display: inline-block;"></div>
<div style="width: 300px; height: 100px; background-color: #ff0; display: inline-block;"></div>
</div>
Try specifying the width of 800 and adding an overflow declaration:
#gallery {
border: 0px solid black;
position: relative;
top: 99px;
width: 800px;
height: 532px;
z-index: 99;
overflow:auto;
}
try using the overflow property for the container. so something like this:
#gallery {
overflow-x: scroll;
overflow-y: hidden;
}
here are some examples http://www.brunildo.org/test/Overflowxy2.html
I think you might need to define the width of your gallery! see fiddle
I have added the view to hold it all, but like you seemed to find there was no way of forcing a line, might be able to do something with positioning.
Alternatively declare the width at the top of the page with the server side logic instead of the javascript on the fiddle
Not tested, but could you use the
white-space:nowrap;
css property to stop the divs from wrapping when you specify the width?
I have done some thing very similar with a site and was challenged by this as the user would be adding / removing divs on his own. My solution for this was to use jQuery to count each item/div within the container and set the width of the container based on items within the container.
jQuery:
$('.gallery-item').each(function(scroll){ n = n+310; });
$('#gallery').css( "width", n);
});
I came up with a bit of a hacky solution, the only downside of which, you need to know the width of the scrolling gallery. I'm sure that's pretty easy to predetermine or calculate. Below is the code and here is an online demo.
Some cheeky jQuery will allow you to calculate it all on the fly if results are dynamic.
<style type="text/css">
#gallery {
border: 0px solid black;
position: relative;
width:500px;
height: 450px;
overflow:scroll;
overflow-y:hidden;
z-index: 99;
}
.gallery_block_image_p {
width: 354px;
height: 400px;
margin: 0 0 0 10px;
padding: 0;
background-repeat: no-repeat;
display:inline-block;
}
#stretch{
width:1850px;
}
</style>
<div id="gallery">
<div id="stretch">
<div id="gallery_1_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div>
<div id="gallery_1_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div>
<div id="gallery_2_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div>
<div id="gallery_3_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div>
<div id="gallery_4_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div>
</div>
</div>