What's the best way to do this?
I have a full-width row (320px). 160px is an image on one side, the other 160px is reserved for text. Is it a simple float, or is there a less destructive way?
<div class="two-up_img u-pull-right">
<figure>
<img src="../img/img.jpg">
</figure>
</div>
<div class="two-up_info">
<div class="inner">
<h4 class="highlight">Rob</h4>
<div class="small">
<p>Landing Page</p>
<p>Brand Identity</p>
</div>
</div>
</div>
CSS
.two-up_info {
height: 160px;
background: #fff;
}
.two-up_info .inner {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.two-up_img {
max-width: 50%;
}
I'm using a framework called Skeleton (http://getskeleton.com/), which is where the u-pull-right comes from. It floats an element to the right.
You want to wrap your html in a parent div and apply the styling clear: both to that parent div.
See this fiddle: https://jsfiddle.net/5gkzh2pa/
Or, if you are not concerned about supporting old browsers, take a look at flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
I want to display it like this:
.
However the container wont center / cover the entire screen for the other columns to be side by side (I left out the left/right column in css, because I'm trying to find out how to make it work + the container just defaults to the top left of the screen.) Also how do I get them side by side like the layout, inside the entire screen container?
#container {
text-align: center;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.title {
color: #eee;
font-size: 30px;
font-weight: bold;
letter-spacing: 4px;
}
<div class="container">
<div id="leftColumn">
<div class="center">
<h1 class="title">requiem.moe</h1>
<div id="center_wrap">
<div id="yt">
> youtube <
</div>
<div id="steam">
> steam <
</div>
<div id="hub">
> old theme+hub <
</div>
<div id="sharex">
> New ShareX Server <
</div>
<div id="tracks">
tracklist N/A
</div>
<div id="user">
user system N/A
</div>
<div id="aura">
aura sys TBA
</div>
</div>
<div id="rightColumn">
test
</div>
</div>
</div>
</div>
You put the rightColumn inside the leftColumn.
I recommend you using FlexBox. This is modern and most wanted.
* {
padding: 0;
margin: 0;
box-sizing: border-box
}
.container {
width: 100vw;
height: 100vh;
display: flex;
border: 2px solid black
}
.container #leftColumn {
width: 25%;
height: 100%;
background-color: green;
}
.container #rightColumn {
width: 75%;
height: 100%;
background-color: red
}
<div class="container">
<div id="leftColumn">
<div class="center">
<h1 class="title">requiem.moe</h1>
<div id="center_wrap">
<div id="yt">
> youtube <
</div>
<div id="steam">
> steam <
</div>
<div id="hub">
> old theme+hub <
</div>
<div id="sharex">
> New ShareX Server <
</div>
<div id="tracks">
tracklist N/A
</div>
<div id="user">
user system N/A
</div>
<div id="aura">
aura sys TBA
</div>
</div>
</div>
</div>
<div id="rightColumn">
test
</div>
</div>
assign display:flex; flex-direction: row; to your container class. they will cause the left column and right column display in a row.
Don't position your container at all. You even don't need your container. The body element of your html could be the container, but if you do want a container, you could add something like margin: auto (this will center anything relative to its parent element) and height: 100% with width: 100%.
Then, your left column could be something like display: block with width: 30% and your right column display: block with width 70%.
I would consider using a CSS grid layout for this though.
One thing you might find helpful is starting with something like TailwindCSS classes instead of writing your own CSS. It's a good way to learn the underlying CSS as well. For instance, here are the docs for height: 100%.
You can get started with Tailwind by simply including a link to their CND version of the Tailwind stylesheet in the head of your HTML document:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
Use that as your "stylesheet reset" and start playing around with Tailwind layout properties and I think you'll have a better entry point into learning more complex CSS layout.
here is how to split to 2 parts:
.split {top:0; height:100%; position:absolute;}
.left {width:20%; left:0; background-color:purple;}
.right {width:80%; right:0; background-color:green;}
<div class="split left">
<p>something</p>
</div>
<div class="split right">
<p>something</p>
</div>
To split, you need to write 20% for the left part, and 80% to the right part (as you can see in the CSS).
both of the divs need to have full height (as you can see in the CSS).
I am trying to achieve a structure like below on a webpage
https://www.figma.com/file/NfikH1inSqCgwXOSzb3VeDCW/Untitled?node-id=0%3A1
So the full width is max width 1600px. Problem is, making it responsive has become very complex.
Reason is, all the boxes are given width in percentages.
So first whole section is divided in 2 parts 50% left – 50% right.
Inside 50% left – I have added 4 images by giving 50% width
Inside 50% right – I have added 1 image by giving 100% width
If we use just images in this structure, it stays very responsive if I reduce the screen size.
But as there are texts added BELOW each images, the box that contains the text has fixed width (66px). When we reduce the screen size, this disturbs the layout responsiveness.
Any solution to make it proper responsive?
I tried making the text box as an overlay to the image, so position absolute bottom of the image which fixes the issue but then the bottom part of the image goes behind the text box.
I want to make sure the image stays full visible and the text box also stay below it.
Any thoughts? I am happy to use JS too if there is a good solution.
*{
box-sizing: border-box;
}
.fifty {
width: 50%;
padding-bottom: 66px;
position: relative;
}
.parent {
display: flex;
flex-wrap: wrap;
}
img {
width: 100%;
height: 100%;
}
.left {
display: flex;
flex-wrap: wrap;
}
p {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
}
.pb-0 {
padding-bottom: 0;
}
.child {
border: 1px solid #333;
}
<div class="parent">
<div class="left fifty pb-0">
<div class="fifty child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p>
</div>
<div class="fifty child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p>
</div>
<div class="fifty child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p>
</div>
<div class="fifty child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p>
</div>
</div>
<div class="right fifty child">
<img src="https://dummyimage.com/350x250/ffa0a0/ffa0a0" alt="image"/>
<p>Text Right</p>
</div>
</div>
I think you want something like this, if needed anything else, Please let me know
How i can center div elements horizontally, so when i change the width of the browser, the last div go down with css?
So:
---||||-||||-||||---
--------||||--------
When i write:
<div style="float: left; position: relative; left: 50%;">
<div style="float: left; position: relative; left: -50%;">
<div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div>
<div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div>
...
</div>
</div>
Then after a element go down, all div elements go to the left side.
I would recommend using display: inline-block on the elements and then using text-align: center on the container to handle the centering you want:
I cleaned up your HTML but here is the basic HTML formatting with a container class and multiple (as many as you want) block class DIVs:
<div class="container">
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
</div>
The CSS modifies the display settings of the blocks and the text-alignment of the container:
div.block {
display: inline-block; /* this changes the elements to behave more like inline elements (think <span>s) */
width: 315px;
margin: 10px 0;
height: 340px;
}
div.container {
width: 100%;
text-align: center; /* this is the magic that centers the elements */
}
I put together a small demo that should help demonstrate this method: JSFIDDLE
Be Aware: a small 'quirk' exists with the display: inline-block CSS. it causes a small amount of space to occur between the elements. This can be removed multiple ways, my preferred methods being either using comments or wrapping the closing tags of the DIVs. (the issue is caused by the return/spaces between the elements in the HTML):
<div class="container">
<div class="block">Text</div><!--
--><div class="block">Text</div><!--
--><div class="block">Text</div>
</div>
<div class="container">
<div class="block">Text</div
><div class="block">Text</div
><div class="block">Text</div>
</div>
reference for the quirk behavior
Create a container <div> that is 100% of a given area. Then set each <div>'s width inside the container to be a % and float: left;. They'll stack next to each other until they do not fit and will break to the next line.
.container {
width: 100%;
}
.three {
width: 33%;
min-width: 225px;
float: left;
border: 1px solid black;
}
<div class="container">
<div class="three">
<p>Something</p>
</div>
<div class="three">
<p>Something</p>
</div>
<div class="three">
<p>Something</p>
</div>
</div>
Run the snippet.
You could use media queries to write different css code for different sizes:
Media Queries
What is the best/proper way to vertically align the text in the middle of its column? The image height is statically set in the CSS.
I have tried setting an outer div to display: table and an inner div to display: table-cell with vertical-align: middle but that didn't work either.
HTML
<section id="browse" class="browse">
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-5">
<h2 class="text-left">Link up with other gamers all over the world who share the same tastes in games.</h2>
</div>
<div class="col-md-1"></div>
<div class="col-md-6 col-sm-7 animation_container">
<img id="animation_img2" class="animation_img animation_img2" src="images/section2img2.png"/>
<img id="animation_img1" class="animation_img animation_img1" src="images/section2img1.png"/>
</div>
</div>
</div>
</section>
CSS
.browse .container, .blind_dating .container { padding-bottom: 0; }
.animation_container { position: relative; }
.browse .animation_container { height: 430px; }
.animation_img { position: absolute; bottom: 0; }
.animation_img1 { right: 25%; }
.animation_img2 { right: 25%; }
HTML:
First, we will need to add a class to your text container so that we can access and style it accordingly.
<div class="col-xs-5 textContainer">
<h3 class="text-left">Link up with other gamers all over the world who share the same tastes in games.</h3>
</div>
CSS:
Next, we will apply the following styles to align it vertically, according to the size of the image div next to it.
.textContainer {
height: 345px;
line-height: 340px;
}
.textContainer h3 {
vertical-align: middle;
display: inline-block;
}
All Done! Adjust the line-height and height on the styles above if you believe that it is still slightly out of align.
WORKING EXAMPLE
h2.text-left{
position:relative;
top:50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
Explanation:
The top:50% style essentially pushes the header element down 50% from the top of the parent element. The translateY stylings also act in a similar manner by moving then element down 50% from the top.
Please note that this works well for headers with 1 (maybe 2) lines of text as this simply moves the top of the header element down 50% and then the rest of the content fills in below that, which means that with multiple lines of text it would appear to be slightly below vertically aligned.
A possible fix for multiple lines would be to use a percentage slightly less than 50%.
Could you not have simply added:
align-items:center;
to a new class in your row div. Essentially:
<div class="row align_center">
.align_center { align-items:center; }
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