I am working on a site that I am building for myself on squarespace which is why I am trying to write this using inline css. I am trying to get an image styled in a row with some text. The image should be 1/12 of the row. I need to do this in html/css because there will be additional, identically styled rows below the one that I am depicting in jsfiddle.
I can't seem to get he image to scale down and fit on the same row as the text, with the same height as the text. I had it working and then accidentally reverted my work... so it's time for a break. Hoping someone will take pity on me before I come back to it.
Here's my JSFiddle with image and text: https://jsfiddle.net/hrwj2u7c/
<div style="display:flex;flex-direction:row;flex-wrap:wrap;background-color:#bcc0c6">
<div style="flex:0 1 150px;">
<img src=http://creaturesoundproductions.com/s/HelpSpeaker.png>
</div>
<div style="flex:1 0 auto;">
<span style="font-weight:bold;font-size:24px; ">I'm new to podcasting, and I don't know where to start!</span>
<p>That's OK, we've got you! Start here with us, and we'll do all of the technical stuff for you. Have you heard of hosting, RSS feeds, maybe editing? We'll do all of that for you. All you have to do is use our unique app on any device and start recording. We'll even be happy to teach you, so that you'll be more educated going forward!
</p>
</div>
</div>
Is this what you're trying to achieve?
<div style="display:flex;flex-direction:row;align-items: center;background-color:#bcc0c6">
<div style="flex: 0 0 150px;">
<img src=http://creaturesoundproductions.com/s/HelpSpeaker.png style="width: 100%">
</div>
<div>
<span style="font-weight:bold;font-size:24px; ">I'm new to podcasting, and I don't know where to start!</span>
<p>That's OK, we've got you! Start here with us, and we'll do all of the technical stuff for you. Have you heard of hosting, RSS feeds, maybe editing? We'll do all of that for you. All you have to do is use our unique app on any device and start recording.
We'll even be happy to teach you, so that you'll be more educated going forward!
</p>
</div>
</div>
Key points:
flex-basis: 150px; flex-grow: 0; on image container
width: 100%; on <img>
removing flex-wrap: wrap from the overall wrapper (which would cause the second div to go below).
i also added align-items: center to the wrapper, to align the flex items vertically. You can't really match their height, as you'll notice the second div varies in height significantly at various widths of the page, but you can align them vertically.
Now, the biggest problem with what you're trying to do (which is styling inline) is that it cannot be responsive, because you can't apply #media queries by using inline styles. However, what you can do is use <style> tags inside <body>. Example:
<style type=text/css>
.wrapper {
padding: 25px;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: center;
background-color: #bcc0c6;
}
.wrapper> :first-child {
flex: 0 0 200px;
}
.wrapper> :first-child img {
width: 100%;
}
.wrapper> :nth-child(2) {
padding: 0 0 0 25px;
}
.wrapper> :nth-child(2)>span {
font-weight: bold;
font-size: 24px;
}
#media (max-width: 700px) {
.wrapper {
flex-wrap: wrap;
}
.wrapper> :first-child {
margin: 0 auto;
}
}
</style>
<div class="wrapper">
<div>
<img src=http://creaturesoundproductions.com/s/HelpSpeaker.png>
</div>
<div>
<span>I'm new to podcasting, and I don't know where to start!</span>
<p>That's OK, we've got you! Start here with us, and we'll do all of the technical stuff for you. Have you heard of hosting, RSS feeds, maybe editing? We'll do all of that for you. All you have to do is use our unique app on any device and start recording.
We'll even be happy to teach you, so that you'll be more educated going forward!
</p>
</div>
</div>
Related
I'm currently building a website with Blazor Pages on the .NET platform. I'm new to using HTML and CSS, and I decided to use the Bootstrap CSS library to work on my first website. I'd like to have a text container aligned to the left of my overall jumbotron component along with an image in the right. Something like this:
My website currently resembles this:
(the hair is a photo of me, not going to upload the whole image)
The image itself is rather large, so ideally I'd like to work with scaling. I know the img-fluid class can handle scaling within a parent container, but I'm not sure why it's not scaling down.
Here's my current HTML.
<div class="jumbotron">
<div>
<div class="container-fluid">
<h1 class="display-4">Welcome to my site!</h1>
<div class="container align-items-start">
<p class="lead text-left">Welcome to my personal site. I hope to use this as a place where you can learn more about me, my projects, and my ideas.</p>
<p class="lead text-left">I am just learning web development, so many aspects of this website won't be perfect. I hope that this place can serve as a living example of my progression!</p>
</div>
<div class="container">
<img src="/Images/Headshot2020.jpg" class="img-fluid" alt="Image of Matt Marlow"/>
</div>
</div>
</div>
There are multiple ways to achieve what you're looking for or create layouts in general.
I would strongly recommend avoiding using 3rd party libraries that you're not familiar with to build your webpage layout. You might be able to get help on this particular page, but you will get stuck again as soon as you want to create the next one.
It's kind of like trying to build a car without knowing how to weld.
You should read about using Flex (bootstrap is based on that). It might sound intimidating but it's very straightforward.
Start by building some blocks and see how they react with different settings applied to it. Once you feel comfortable, start expanding it and reach the design you want.
a helpful tip:
For each container or "box" you're building - apply some colorful background or border. This will allow you to see exactly which container is being affected and how by every change. So the thumb rule is: Each div gets it's own color.
Once you're satisfied with the layout, just remove all the colors and start inserting content.
Link explaining how to work with css flexbox
CSS Flexbox
And here's a snippet using basic flex to build the layout you wanted
body, html{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
}
.main-container{
background: gray;
width: 90%;
height: 90%;
border: solid 1px red;
display: flex;
padding: 50px;
box-sizing: border-box;
}
.left-panel{
width: 70%;
height: 100%;
border: solid 1px blue;
}
.right-panel{
width: 30%;
height: 100%;
border: solid 1px lime;
padding: 50px;
box-sizing: border-box;
}
.title{
font-size: 2.5em;
}
.content{
padding: 30px;
box-sizing: border-box;
border: solid 1px magenta;
line-height: 30px;
}
.image{
border: solid 1px;
width: 100%;
height: 100%;
background: white;
display: flex;
align-items: center;
justify-content: center;
}
<div class="main-container">
<div class="left-panel">
<div class="header">
<div class="title">
Welcome to my site !
</div>
</div>
<div class="content">
Lorem ispum, some random text!
</br>
This is a markup example for my question
</div>
</div>
<div class="right-panel">
<div class="image">
A picture of me !
</div>
</div>
</div>
Bootstrap saves a lot of time and work-- setting breakpoints for a gazillion things is hard.
But when it comes to these kinds of problems, you need to KNOW enough html/css does and how it works. In particular, learn how flex layout works.
Then you will be able to choose the correct Bootstrap classes, knowing that your site will conform to best practices for a dynamic layout.
Use float-end on the image this will allow the text to flow around the image. I moved the image above the heading to align their tops.
<div class="container-fluid">
<img src="/Images/Headshot2020.jpg" class="img-fluid float-end col-4" alt="Image of Matt Marlow" />
<h1>Welcome to my site!</h1>
<p class="lead">Welcome to my personal site. I hope to use this as a place where you can learn more about me, my projects, and my ideas.</p>
<p class="lead">I am just learning web development, so many aspects of this website won't be perfect. I hope that this place can serve as a living example of my progression!</p>
</div>
BTW: jumbotron is obsolete.
Photo by Alison Wang on Unsplash
This is my first ever question on stackoverflow so I apologize if I'm not following standard etiquette.
I'm working on a blog final project for a class that requires a custom theme and I'm using tumblr to host it for reasons independent of coding. This is the first time I've used css for more than extremely basic styling purposes, and I'm relatively new to html/css-related work in general.
For my main page, I have a sticky sidebar on the left 1/4 of the page, and then 3 columns for posts in a tiled gallery sort of like (similar to masonry but I used css grid because masonry confused me). Overall, I'm pretty satisfied with how this is turning out. Due to my inexperience, it's not where I would ideally have it designed, but my goal is to be able to work on it as I learn more html/css/js after this class is over.
main page layout
about page currently
However, I'm having trouble with fixing an individual post page and my about page: when you click on an individual post, it's also being shown as a 3 column post, which is not my intention at all. Same with the about page. I think this is due to my usage of css-grid on the main page, but I'm confused as to how I can fix this on individual posts.
a note on my html/css - my friend let me borrow most of the sidebar-specific code which is why it's much nicer than some of the stuff I've written and she's helped me a lot during this process but the page issue isn't something she's ever really encountered because she doesn't use css-grid or columned design often.
I've tried simply writing a completely new html for the about page, but my sidebar uses meta/variables (that I think are) built into the tumblr theme editing interface, so my sidebar wouldn't show up correctly when I tried to do that. And I haven't tried anything for the posts because I didn't even realize they had an issue until earlier today.
I can provide other code snippets if this would help, but I'm not sure what to include other than these:
#sidebar {
top: 35%;
position: -webkit-sticky;
position: sticky;
background: #ffffff;
height: 40vh;
width: 20%;
text-align: center;
padding: 25px 10px 10px 10px;
border: 2px solid;
border-radius: 70% 30% / 20% 40%;
margin: 2% 2%;
}
#container {
column-count: 3;
display:inline-block;
grid-template-columns: auto auto auto;
grid-area: container;
width: 100%;
column-gap: 20px;
}
#house {
display: flex;
flex-direction: row;
justify-content: right;
}
.content{
width: 90%;
background-color: #ffffff;
padding: 20px;
margin: auto;
margin-bottom: 10px;
float: left;
}
<body id="{select:background}">
<div id="house">
<div id="sidebar">
<a href="/">
<h1>{Title}</h1>
</a>
<div id=“description”>
{Description}
</div>
<br />
<div class="sidebarlink">{text:link 1}</div>
<div class="sidebarlink">{text:link 2}</div>
<div class="sidebarlink">{text:link 3}</div>
<div class="sidebarlink">{text:link 4}</div>
</div>
<div id="container">
{block:Posts}
<div class="content">
[I've omitted the post types and their meta info for clarity]
</div>
{/block:Posts}
</div>
</div>
Any help at all would be greatly appreciated! If this has already been answered please direct me there as well, I'm not too well-versed in navigating stackoverflow yet.
I have HTML structure like this :
<div class="card-container">
<div class="intro-card">
<img src="/Users/thangna/Desktop/snkr/thang-files/webdev.jpeg" alt="">
<h3>CAREER</h3>
<p>Realizing that becoming a great web developer is not easy, I'm trying my best to achieve my targets everyday to level up myself. My journey as well as my achievement in my web developing career will be updated here once I have free timm !</p>
</div>
<div class="intro-card">
<img src="/Users/thangna/Desktop/snkr/thang-files/bball.jpeg" alt="">
<h3>BASKETBALL</h3>
<p>Realizing that becoming a great web developer is not easy, I'm trying my best to achieve my targets everyday to level up myself. My journey as well as my achievement in my web developing career will be updated here once I have free timm !</p>
</div>
<div class="intro-card">
<img src="/Users/thangna/Desktop/snkr/thang-files/webdev.jpeg" alt="">
<h3>CAREER</h3>
<p>Realizing that becoming a great web developer is not easy, I'm trying my best to achieve my targets everyday to level up myself. My journey as well as my achievement in my web developing career will be updated here once I have free timm !</p>
</div>
</div>
and its CSS below:
.card-container {
display: flex;
flex: auto;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin-left: auto;}
.intro-card {
display: flex;
flex: auto;
flex-direction: column;
justify-content: center;
width: 25%;
height: 700px;
border-radius: 20px;
background-color: #fff ;
padding: 10px;
margin: 5% 20px;};
.intro-card > img{
height: 200px;}
.intro-card > h3 {
margin: 10px;
text-align: center;}
As you can see , I really want to set the height of the image in the flex card to be 200 px but when I did it in CSS code, nothing changed !
enter image description here
You can see from the image, the image in the second card is still longer than the rest.
But I can change it to the same height when i added inline style directly to the img tag in my html code !
Can anyone explain for me why this happen and the solution to it ? Thank you a lot !
To give a higher priority to height put CSS at end of the CSS file.
In chrome, to apply img CSS there should be a pre-defined css for flex.
i.e.: img{ min-height: 0 }
Here is solution why it's not working in chrome.
Image height inside flexbox not working in Chrome
I have many elements with header of image with static height and some text below. Target is to get that .outer full height as the elements in the row with it. I need that text to get width of image and height to be full as it can be.
This is what i have achieved at the moment.
CSS:
.outer {
display: inline-block;
}
.inner {
background: green;
display: table-caption;
}
.inner>img{
height: 200px;
}
HTML:
<div class="outer">
<div class="inner">
<img src="https://pp.vk.me/c322418/v322418480/131a7/c3HrxpJiYqY.jpg"/>
<p>Useless Text.</p>
</div>
</div>
Here the essential thing is vertical-align:top; I have given a fixed width but you can give width in percentage.
body {
width: 100%;
}
.outer {
display: inline-block;
width: 90%;
}
.inner {
display: inline-block;
vertical-align: top;
background: green;
width: 290px!important;
padding-right: 20px;
padding-left: 15px;
}
.inner>img {
height: 200px;
}
.inner>p {
width: inherit;
}
.inner>img,
.inner>p {
display: block;
}
<body>
<div class="outer">
<div class="inner">
<img src="https://pp.vk.me/c322418/v322418480/131a7/c3HrxpJiYqY.jpg" />
<p>Useless Text. CSS is not an overly complex language. But even if you’ve been writing CSS for many years, you probably still come across new things — properties you’ve never used, values you’ve never considered, or specification details you never
knew about. In my research, I come across new little tidbits all the time, so I thought I’d share some of them in this post. Admittedly, not everything in this post will have a ton of immediate practical value, but maybe you can mentally file
some of these away for later use.</p>
</div>
<div class="inner">
<img src="https://pp.vk.me/c322418/v322418480/131a7/c3HrxpJiYqY.jpg" />
<p>This is an awesome text, but i want my element get height of left space up of my image.</p>
</div>
<div class="inner">
<img src="https://pp.vk.me/c322418/v322418480/131a7/c3HrxpJiYqY.jpg" />
<p>Useless Text. CSS is not an overly complex language. But even if you’ve been writing CSS for many years, you probably still come across new things — properties you’ve never used, values you’ve never considered, or specification details you never
knew about. In my research, I come across new little tidbits all the time, so I thought I’d share some of them in this post. Admittedly, not everything in this post will have a ton of immediate practical value, but maybe you can mentally file
some of these away for later use.</p>
</div>
</div>
</body>
I have made some adjustments to your code, I have added a class table-div and a class table-row and wrapped those div.outer in div.table-div and div.table-row. You can see it here: http://codepen.io/anon/pen/XboROq?editors=110. I hope this is what you are looking for.
I know this question has been asked many times, but I never saw a satisfactory answer. I mean, an answer that actually works.
So, here we go again. Take this jsFiddle: http://jsfiddle.net/KFMyn/3/
If you remove the align="center" from the HTML, what CSS do you need to use to make the result look the same as the original?
The answers I found usually amount to margin:0 auto and/or text-align:center but neither of those have the desired effect of making the result look the same as the original.
The text align center covers most of the text elements but a little extra is needed to centre align the table
div {width:400px; text-align:center;}
table {margin: 0 auto;}
table td {text-align: left;}
http://jsfiddle.net/NYuv8/4/
div {width:400px; text-align: center;}
table {display:inline-block;}
Should work as well in addition to Paul's answer.
http://jsfiddle.net/KFMyn/13/
div {width:400px; margin: 0 auto; text-align: center; }
div > * { margin: 0 auto; }
Works for me. But this may not work properly when you have multiple nested dom elements
margin: 0 auto;
text-align: center;
Above Code might not be working when you are using bootstrap grids.
Here is the quick solution for this using bootstrap 4 and IT WORKS IN EVERY BROWSERS
<div class="row">
<div class="col-sm-2">
<div class="customClass mx-auto">
<p class="text-center"> your text goes here </p>
</div>
</div>
</div
you can put any column like col-sm-2, 3, 4.......12
Replacement for Center tag in different situations
1. text-center
Works with p, a, button, h tags and more i.e all the tags containing data or text directly
2. Flex
It can used to align complete element inside another element, however it has more utilities check documentation for reference
Use can center elements using flex in following manners
display:flex;
justify-content:center;
align-items:center;
Another import property is flex-direction i.e
flex-direction:column
flex-direction:row
Use flex direction according to the type of alignment you want
3. mx-auto (bootstrap class)
You can try and style the table as well, like this:
div {
width:400px;
margin: 0 auto;
text-align: center;
}
div table {
margin: 0 auto;
}
Why not just leave it
<div align="center">
It still works just fine with all browsers as far as I know. I have plenty of old html and I got to this thread only because my NetBeans IDE is warning me this is obsolete. My guess is the browsers are automatically translating to the correct solution. Same thing with
<font size="6">bla bla</font>
still works just fine and probably automatically converted to
<span style="font-size:36px">bla bla</span>
div { width: 400px; text-align: center; }
table { display: inline-block; }
This should work. Check example here: http://jsfiddle.net/ye7ngd3q/2/
and if you want elements inside table cell left/right aligned then you can define individual classes and assign to element respectively as show below:
HTML
<div align="center">
A centered div
<p>A</p>
<table border="1">
<tr><td class="align-left">centered</td><tr>
<tr><td class="align-right">div</td><tr>
</table>
<ul><li>A centered div</li></ul>
</div>
CSS
div { width: 400px; text-align: center; }
table { display: inline-block; }
.align-left { text-align: left; }
.align-right { text-align: right; }