I'm building a website layout and I'm trying to have a list of images with descriptions centered next to them, but I can't figure out how to get the paragraphs to move next to the images without the entire layout messing up. I've messed around with the float, clear, and display settings with no avail. I added a picture of my desired result
my HTML for this section looks like this currently:
<section>
<ul id="gallery">
<li>
<a href="GPA_Calc_Screen.png">
<img src="GPA_Calc_Screen.png" alt""> <!--Relative img path -->
</a>
</li>
<li>
<p >
This is a custom GPA Calculator, and what I like to think is the first real app that I made. Going to Georgia Tech, and college in general, this is a vital asset. Although at GT we don't operate on the plus/minus system, I added a setting in which you can edit that if you want.
</p>
</li>
<li>
<a href="Avengers_App_Screen.png">
<img src="Avengers_App_Screen.png" alt"">
</a>
</li>
<li>
<p>
Okay, who doesn't like The Avenegrs movie series? Huh? Well, yeah I guess you're right, but it doesn't matter because I love it! I made this app to
test out layout design, android intents, and a few other features. It's also
a great way to kill 4 minutes.
</p>
</li>
</ul>
</section>
and my CSS that goes with it looks like this currently:
#gallery {
margin: 0;
padding: 0;
list-style: none; /*Removes bullet points*/
}
#gallery li {
width: 45%;
margin: 2.5%;
background-color: #b3dbeb
color: #1d95c5;
}
.descriptions {
display: block;
}
.descriptions a {
float: left;
}
For each p tag just add a clearfix class and import bootstrap or any other framework with clearfix support or do as below
.p:before,
.p:after {
content:"";
display:table;
}
.p:after {
clear:both;
}
.p {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
Try flex box on the parent of your two elements:
display: flex;
Or try float right on paragraph:
.description p {float:right}
Make sure to define widths first.
Related
I am on a wordpress website of a client where I have to remove text they added by mistake under their logo . They use Outreach Pro wordpress theme and I cannot find in the theme where to remove the text in the header so I am going with custom css .
The format however with the text for the element is
<div class="title-area">
<h1 class="site-title" itemprop="headline">TEXT I WANT </h1>TEXT TO REMOVE
</div>
where TEXT TO REMOVE is outside of the h1 tag , so how can I make its display none without including the h1 tag ?
Thank you in advance
Set the font-size to zero, and re-set if for the children:
.title-area { font-size: 0; }
.title-area h1 { font-size: 32px; }
<div class="title-area">
<h1 class="site-title" itemprop="headline">TEXT I WANT </h1>TEXT TO REMOVE
</div>
Like an option, you can make your container flex with row layout and move text content you want to remove to the right; And text outside block will be cropped.
Also you can move text to hide war away from view port by text-indent: 1000%;, see Code Snippet with comments:
.title-area {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
white-space: nowrap; /* make text in one line */
text-indent: 1000%; /* move text to remove far away */
}
.title-area .site-title {
flex-grow: 1;
flex-shrink: 0;
width: 100%;
text-indent: 0; /* move site title to the beginning */
}
<div class="title-area">
<h1 class="site-title" itemprop="headline">TEXT I WANT </h1>TEXT TO REMOVE
</div>
Rules get overridden in css
.title-area
{
visibility:hidden;
}
.site-title
{
visibility:visible;
};
<div class="title-area">
<h1 class="site-title" itemprop="headline">TEXT I WANT </h1>TEXT TO REMOVE
</div>
You can do it by using js or css. I will show only the js solution for it.
JS Version
const el = document.querySelector(".title-area > *");
document.querySelector(".title-area").innerHTML = el.outerHTML;
<div class="title-area">
<h1 class="site-title" itemprop="headline">TEXT I WANT </h1>
TEXT TO REMOVE
</div>
This blog list formatting is not working in chrome. It looks fine in Safari (although it wont stack) but I don't know what I'm doing wrong with Chrome. I have attached an image of the blog list in my chrome browser. I have added more css for reference. Please let me know if you can help! Much appreaciated!
<ul class="blog-list">
<li>
<a href="https://bluestoneconstruction.com/why-asheville-is-the-best-place-to-retire-and-become-the-artist-you-always-wanted-to-be/">
<img src="https://bluestoneconstruction.com/wp-content/uploads/2018/11/liveable-cities-where-to-move-if-you-can-live-anywhere-10-1030x579.jpg" alt="">
<h3>Asheville NC Is The Best Place to Retire—And Become the Artist You Always Wanted to Be</h3>
</a>
<p>Retirement is about getting to play, grow, and explore parts of yourself that you were too busy or preoccupied to fully enjoy previously. It’s about having free hours to learn new skills and fully immerse yourself in those “night and weekend” hobbies that are no longer relegated to nights and weekends. For many of us,</p>
</li>
<li>
<a href="https://bluestoneconstruction.com/now-is-the-time-to-build-the-custom-home-you-want-to-live-work-play-in/">
<img src="https://bluestoneconstruction.com/wp-content/uploads/2020/04/Best-Greenville-luxury-home-builder-1.jpg" alt="">
<h3>Now Is The Time To Build The Custom Home You Want To Live, Work & Play In</h3>
</a>
<p>Spending most of your time at home clarifies what works and what doesn’t about your space. We’re all stuck at home, which means that aspects of our space that seemed like mild annoyances a few weeks ago now feel like major inconveniences. Maybe your kitchen felt small when you were eating out multiple times a</p>
</li>
<li>
<a href="https://bluestoneconstruction.com/kevin-reed-on-home-construction-during-coronavirus-via-houzz/">
<img width="1009" height="690" src="https://bluestoneconstruction.com/wp-content/uploads/2020/03/why-bluestone-construction-is-the-best-custom-builder-in-Asheville-nc-6-1-1500x1026-1-1009x690.jpg" class="img-responsive wp-post-image" alt="" loading="lazy" srcset="https://bluestoneconstruction.com/wp-content/uploads/2020/03/why-bluestone-construction-is-the-best-custom-builder-in-Asheville-nc-6-1-1500x1026-1-1009x690.jpg 1009w, https://bluestoneconstruction.com/wp-content/uploads/2020/03/why-bluestone-construction-is-the-best-custom-builder-in-Asheville-nc-6-1-1500x1026-1-300x205.jpg 300w, https://bluestoneconstruction.com/wp-content/uploads/2020/03/why-bluestone-construction-is-the-best-custom-builder-in-Asheville-nc-6-1-1500x1026-1-1024x700.jpg 1024w, https://bluestoneconstruction.com/wp-content/uploads/2020/03/why-bluestone-construction-is-the-best-custom-builder-in-Asheville-nc-6-1-1500x1026-1-768x525.jpg 768w, https://bluestoneconstruction.com/wp-content/uploads/2020/03/why-bluestone-construction-is-the-best-custom-builder-in-Asheville-nc-6-1-1500x1026-1.jpg 1500w" sizes="(max-width: 1009px) 100vw, 1009px">
<h3>Kevin Reed on Home Construction During Coronavirus, via Houzz</h3>
</a>
<p>Bluestone founder Kevin Reed was recently featured on Houzz, in an article about how the novel coronavirus is affecting the home building industry and the extra hygiene precautions his teams are taking. Read the entire story here.</p>
</li>
</ul>
.blog-list {
padding: 0 8px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.blog-list li {
padding-bottom: 20px;
}
.blog-list a {
position: relative;
text-decoration: none;
height: 400px;
}
.blog-list h3 {
padding: 20px 0 10px;
font-size: 1.9rem;
font-family: 'Playfair Display', Arial, serif;
color: #c9aa70;
line-height: 1;
}
.blog-list p {
padding-bottom: 1em;
}
.blog-list img {
display: block;
height: auto !important;
width: 100%;
}
the display: grid; css style tag is actually supported on all browser as per the can i use https://caniuse.com/css-grid. I would suggest you take a look at some article about the use of css, that one for example grid https://css-tricks.com/snippets/css/complete-guide-grid/.
If you don't want to bothered yourself with it you can always use a css framework like https://getbootstrap.com/ which has already a pre made built in grid system and is verry friendly to learn. Regards
So reviewing your code, it looks like you specified display: grid and grid-template-columns but forgot to specify which items go into which column in the child elements.
Here is a working jsfiddle that shows it working (yes, I tested in chrome) with some quick style changes to make it look readable: https://jsfiddle.net/tjaLuc7r/29/
I simply added this to the css to make it work:
ul:first-child {
grid-column-start: 1;
}
ul:nth-child(n+1) {
grid-column-start: 2;
}
ul:last-child {
grid-column-start: 3
}
There is great documentation for grids and all things css here: https://css-tricks.com/snippets/css/complete-guide-grid/
I have a scenario in which I have a team page with pictures and some blurb. Under each picture I have social media links much like the following:
These are images that sit within a horizontal list underneath each item using the below base markup.
<ul>
<li>
<a><img src=""/></a>
</li>
<li>
<a><img src=""/></a>
</li>
</ul>
At the moment these are images but I would very much like if when hovered the grey inards of these images turned blue.
I was thinking just have a span with a background image like this:
<a><span class="linkedin"></span></a>
.linkedin{
height:28px;
width:auto;
background-image:url(link/to/the/linkedin/picture)
}
.linkedin:hover{
height:28px;
width:auto;
background-image:url(link/to/the/linkedin/picture-blue-version)
}
However, when I attempted this the space was empty instead of taking the size of the image.
If I enter as content I get a small part of the background image, furthermore giving the class an absolute position takes it out of document flos
Is this the ideal approach?
The problem is if you use a <span> element you need to set it to display: inline-block and you need to set a width for the image to show up. Then it works, here is a demo:
.linkedin {
display: inline-block;
width: 140px;
height:100px;
background-image:url(http://ipsumimage.appspot.com/140x100,ff7700)
}
.linkedin:hover {
background-image:url(http://ipsumimage.appspot.com/140x100,0000FF)
}
<span class="linkedin"></span>
As you see on the first :hover it flickers. Cause it will not load the image bevore you :hover the first time. This is why you should consider another solution. Like mentioned in some comments you could use http://fontawesome.io/icons/ and then just change the color.
To prevent flickering you could do the same with using <img> tags then the source will be loaded and ready to be shown on :hover. But it works best with also setting positions, demo like so:
a.special {
position: relative;
}
a.special img {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
a.special img:first-child {
visibility: visible;
}
a.special:hover img:first-child {
visibility: hidden;
}
a.special:hover img:last-child {
visibility: visible;
}
<a class="special" href="#">
<img src="http://ipsumimage.appspot.com/140x100,ff7700">
<img src="http://ipsumimage.appspot.com/140x100,0000FF">
</a>
Best approach for this is to use SVG's and change the fill of the SVG on hover.
Your approach should work however, it might be that you've not got the correct size image? try 'background-size: cover;' Or that the element has no width. Try setting a width on the span too. (don't forget to give it 'display: inline-block;' too.
Ed: checkout https://css-tricks.com/lodge/svg/
Font-Awesome is a great idea for what you're trying to achieve. Takes less data to load the page too if you can get away with using text in place of images.
By the way, when using the :hover property there is no need to redefine the width and height of the image... Just redefine the changes you'd like to make.
I've created a <ul> and <li> list and got a ton of different information in it. Is it possible to space different pieces of information in one <li> over the page, like it had columns?
Like the first word of <li> is aligned at the left side of the page, then the second is always at the first 1/4 the 3rd at half and the 4th at 3/4, for every <li>?
Is this possible, if yes, how is it done? If needed I can post my PHP/HTML Code in here (though it's dynamic).
EDIT: Here is the Code: http://jsfiddle.net/woz1r55e/ :)
Thanks beforehand already :)
In your CSS define two classes
.inline-block
{
display: inline-block;
}
.col
{
width: 25%;
}
and then define containers for whatever you want in those columns.
<div>
<div class="inline-block col">List 1
</div>List 2<div class="inline-block col">
</div>List 3<div class="inline-block col">
</div>List 4<div class="inline-block col">
</div>
</div>
Source: 4 column CSS layout - Fluid
I think this is what you mean:
http://jsfiddle.net/woz1r55e/1/
I added this css:
ul ul ul li {
display: inline-block;
width: 25%;
}
I'd recommend giving either the <li> a class to make it inline block or to give the third <ul> class and make it's children inline-block
Create different css classes for each "column":
ul.Col1 { margin-left: 10px; }
ul.Col2 { margin-left: 210px; }
ul.Col3 { margin-left: 410px; }
<ul class="Col1">
...
</ul>
etc...
I downloaded a HTML template, started modifying some items and first thing I want to do is to change the id attribute for an <article> element.
I only changed that, and so the site appeareance changed to not a desired one. Console shows any CSS issues.
This is original HTML part of code I'm interested:
<!-- Nav -->
<nav id="nav">
<span>Home</span>
<span></span>
<span>Email Me</span>
<span>Twitter</span>
</nav>
<!-- Main -->
<div id="main">
<!-- Me -->
<article id="me" class="panel">
<header>
<h1>Diego Benjamín <br><br> Aguilar Aguilar</h1>
<!-- <span class="byline">Senior Astral Projectionist</span> !-->
And just changed:
<span>Home</span>
<article id="start" class="panel">
This are the visual changes:
What's that I'm missing or should fix?
EDIT
Right after comments I went and saw CSS file and found out:
/*********************************************************************************/
/* Panels */
/*********************************************************************************/
#main
{
position: relative;
overflow: hidden;
}
.panel
{
position: relative;
}
/* Me */
#me
{
}
#me .pic
{
position: relative;
display: block;
}
This is because the id me is being styled in the CSS.
Taken from the CSS (I downloaded it):
#me
{
}
#me .pic
{
position: relative;
display: block;
}
#me .pic:before
{
content: '';
position: absolute;
top: 0;
left: 0;
background: url('images/overlay.png');
width: 100%;
height: 100%;
z-index: 1;
}
Basically, if you want to change the #me ID, you have to go into the CSS style sheets and change it there too.
Update
There are various different stylesheets. I took that snippet from style.css, however there is also style-desktop.css that has various different #me styled in. My recommendation is to go through every css file and edit every instance of #me to be what you want.
Like commented by Hamed Ali Khan, the id is probably used in the stylesheet.
In your stylesheet you should change all styles that contain #me to #start.
Or you could add an extra class to the element. For example <article id="start" class="extraStyle panel">. Then you should change all #me to .extraStyle.
You have to change that thing in CSS file too.
The styles applied with id in the CSS, like #article-id .child{some :style; }
What you changed in the HTML may reflect the same in CSS too.
Replacing the ID broke the styles related to your #home element.
Open your CSS file, and rename all #home in #me.
This is probably happening because some elements in your CSS are targetted as shown below
#foo .bar{
}
This means that it affects elements with the class bar inside of the element with ID foo. That's why changing of an element's ID can really mess up it's content's style.